demo.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. $(function () {
  2. var $inputElem = $('#input');
  3. var $outputTypeElem = $('#outputType');
  4. var $previewElem = $('#preview');
  5. var $htmlElem = $('#html');
  6. var $lexerElem = $('#lexer');
  7. var $syntaxElem = $('#syntax');
  8. var inputDirty = true;
  9. var $activeElem = null;
  10. if (top.document.location.href.match(/\?blank=1$/)) {
  11. $inputElem.val('');
  12. }
  13. $outputTypeElem.change(function () {
  14. $('#rightContainer .pane').hide();
  15. $activeElem = $('#' + $outputTypeElem.val()).show();
  16. }).change();
  17. var noticeChange = function () {
  18. inputDirty = true;
  19. };
  20. $inputElem.
  21. change(noticeChange).
  22. keyup(noticeChange).
  23. keypress(noticeChange).
  24. keydown(noticeChange);
  25. var jsonString = function (input) {
  26. var output = (input + '').
  27. replace(/\n/g, '\\n').
  28. replace(/\r/g, '\\r').
  29. replace(/\t/g, '\\t').
  30. replace(/\f/g, '\\f').
  31. replace(/[\\"']/g, '\\$&').
  32. replace(/\u0000/g, '\\0');
  33. return '"' + output + '"';
  34. };
  35. var getScrollSize = function () {
  36. var e = $activeElem[0];
  37. return e.scrollHeight - e.clientHeight;
  38. };
  39. var getScrollPercent = function () {
  40. var size = getScrollSize();
  41. if (size <= 0) {
  42. return 1;
  43. }
  44. return $activeElem.scrollTop() / size;
  45. };
  46. var setScrollPercent = function (percent) {
  47. $activeElem.scrollTop(percent * getScrollSize());
  48. };
  49. var delayTime = 1;
  50. var checkForChanges = function () {
  51. if (inputDirty) {
  52. inputDirty = false;
  53. var startTime = new Date();
  54. // Save scroll position
  55. var scrollPercent = getScrollPercent();
  56. // Convert
  57. var markdown = $inputElem.val();
  58. var lexed = marked.lexer(markdown);
  59. // Grab lexed output and convert to a string before the parser
  60. // destroys the data
  61. var lexedList = [];
  62. for (var i = 0; i < lexed.length; i ++) {
  63. var lexedLine = [];
  64. for (var j in lexed[i]) {
  65. lexedLine.push(j + ":" + jsonString(lexed[i][j]));
  66. }
  67. lexedList.push("{" + lexedLine.join(", ") + "}");
  68. }
  69. var parsed = marked.parser(lexed);
  70. // Assign
  71. $previewElem.html(parsed);
  72. $htmlElem.val(parsed);
  73. $lexerElem.val(lexedList.join("\n"));
  74. // Set the scroll percent
  75. setScrollPercent(scrollPercent);
  76. var endTime = new Date();
  77. delayTime = endTime - startTime;
  78. if (delayTime < 50) {
  79. delayTime = 50;
  80. } else if (delayTime > 500) {
  81. delayTime = 1000;
  82. }
  83. }
  84. window.setTimeout(checkForChanges, delayTime);
  85. };
  86. checkForChanges();
  87. setScrollPercent(0);
  88. });