aboutsummaryrefslogtreecommitdiff
path: root/dingus.html
blob: 6f9193bfe6775ea4c7595bfa28c54bced89bf60b (plain)
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>commonmark.js demo</title>
  6. <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  7. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  8. <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  9. <script src="js/commonmark.js"></script>
  10. <script type="text/javascript">
  11. var writer = new commonmark.HtmlRenderer();
  12. var reader = new commonmark.DocParser();
  13. function getQueryVariable(variable)
  14. {
  15. var query = window.location.search.substring(1);
  16. var vars = query.split("&");
  17. for (var i=0;i<vars.length;i++) {
  18. var pair = vars[i].split("=");
  19. if(pair[0] == variable){return decodeURIComponent(pair[1]);}
  20. }
  21. return null;
  22. }
  23. $(document).ready(function() {
  24. var timer;
  25. var x;
  26. var parsed;
  27. var render = function() {
  28. if (parsed === undefined) {
  29. return;
  30. }
  31. var startTime = new Date().getTime();
  32. var result = writer.renderBlock(parsed);
  33. var endTime = new Date().getTime();
  34. var renderTime = endTime - startTime;
  35. // $("#html").text(result);
  36. $("#preview").html(result);
  37. $("#html").text(result);
  38. $("#ast").text(commonmark.ASTRenderer(parsed));
  39. $("#rendertime").text(renderTime);
  40. };
  41. var parseAndRender = function () {
  42. if (x) { x.abort() } // If there is an existing XHR, abort it.
  43. clearTimeout(timer); // Clear the timer so we don't end up with dupes.
  44. timer = setTimeout(function() { // assign timer a new timeout
  45. var startTime = new Date().getTime();
  46. parsed = reader.parse($("#text").val());
  47. var endTime = new Date().getTime();
  48. var parseTime = endTime - startTime;
  49. $("#parsetime").text(parseTime);
  50. $(".timing").css('visibility','visible');
  51. /*
  52. var warnings = parsed.warnings;
  53. $("#warnings").html('');
  54. for (i=0; i < warnings.length; i++) {
  55. var w = warnings[i];
  56. var warning = $("#warnings").append('<li></li>');
  57. $("#warnings li").last().text('Line ' + w.line + ' column ' + w.column + ': ' + w.message);
  58. }
  59. */
  60. render();
  61. }, 0); // ms delay
  62. };
  63. var initial_text = getQueryVariable("text");
  64. if (initial_text) {
  65. $("#text").val(initial_text);
  66. // show HTML tab if text is from query
  67. $('#result-tabs a[href="#result"]').tab('show');
  68. }
  69. // make tab insert a tab in the text box:
  70. $("#text").keydown(function (e) {
  71. if (e.which == 9) {
  72. e.preventDefault();
  73. this.value += "\t";
  74. }
  75. });
  76. parseAndRender();
  77. $("#clear-text-box").click(function(e) {
  78. $("#text").val('');
  79. window.location.search = "";
  80. parseAndRender();
  81. });
  82. $("#permalink").click(function(e) {
  83. window.location.pathname = "/index.html";
  84. window.location.search = "text=" + encodeURIComponent($("#text").val());
  85. });
  86. $("#text").bind('keyup paste cut mouseup', parseAndRender);
  87. $(".option").change(render);
  88. });
  89. </script>
  90. <style type="text/css">
  91. h1.title { font-family: monospace; font-size: 120%; font-weight: bold;
  92. margin-top: 0.5em; margin-bottom: 0; }
  93. textarea#text { height: 400px; width: 95%; font-family: monospace; font-size: 92%; }
  94. pre code#html { font-size: 92%; font-family: monospace; }
  95. pre#htmlpre { height: 400px; width: 95%; overflow: scroll; }
  96. div#preview { height: 400px; overflow: scroll; }
  97. div.row { margin-top: 1em; }
  98. blockquote { font-size: 100%; }
  99. footer { color: #555; text-align: center; margin: 1em; }
  100. pre { display: block; padding: 0.5em; color: #333; background: #f8f8ff }
  101. #warnings li { color: red; font-weight: bold; }
  102. label { padding-left: 1em; padding-top: 0; padding-bottom: 0; }
  103. div.timing { color: red; visibility: hidden; height: 2em; }
  104. p#text-controls { height: 1em; }
  105. a#permalink { margin-left: 1em; }
  106. span.timing { font-weight: bold; }
  107. span.timing { font-weight: bold; }
  108. </style>
  109. </head>
  110. <body>
  111. <div class="container">
  112. <div class="row">
  113. <h1 class="title">commonmark.js dingus</h1>
  114. </div>
  115. <div class="row">
  116. <div class="col-md-6">
  117. <div class="timing">Parsed in <span class="timing" id="parsetime"></span>
  118. ms. Rendered in <span class="timing" id="rendertime"></span> ms.</div>
  119. <p id="text-controls"><a id="clear-text-box">clear</a>&nbsp;<a
  120. id="permalink">permalink</a></p>
  121. <textarea id="text"></textarea>
  122. <ul id="warnings"></ul>
  123. </div>
  124. <div class="col-md-6">
  125. <ul id="result-tabs" class="nav nav-tabs" role="tablist">
  126. <li class="active"><a href="#preview" role="tab" data-toggle="tab">Preview</a></li>
  127. <li><a href="#result" role="tab" data-toggle="tab">HTML</a></li>
  128. <li><a href="#result-ast" role="tab" data-toggle="tab">AST</a></li>
  129. </ul>
  130. <div class="tab-content">
  131. <div id="preview" class="tab-pane active">
  132. </div>
  133. <div id="result" class="tab-pane">
  134. <pre id="htmlpre"><code id="html"></code></pre>
  135. </div>
  136. <div id="result-ast" class="tab-pane">
  137. <pre id="astpre"><code id="ast"></code></pre>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. </body>
  143. </html>