aboutsummaryrefslogtreecommitdiff
path: root/dingus.html
blob: 6b379eb87e1b06d9cc96856b2a82ceb99f94e90c (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. var query = window.location.search.substring(1);
  15. var vars = query.split("&");
  16. for (var i=0; i<vars.length; i++) {
  17. var pair = vars[i].split("=");
  18. if (pair[0] == variable){
  19. return decodeURIComponent(pair[1]);
  20. }
  21. }
  22. return null;
  23. }
  24. // via http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
  25. function setSelectionRange(input, selectionStart, selectionEnd) {
  26. if (input.setSelectionRange) {
  27. input.focus();
  28. input.setSelectionRange(selectionStart, selectionEnd);
  29. }
  30. else if (input.createTextRange) {
  31. var range = input.createTextRange();
  32. range.collapse(true);
  33. range.moveEnd('character', selectionEnd);
  34. range.moveStart('character', selectionStart);
  35. range.select();
  36. }
  37. }
  38. // via http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
  39. function setCaretToPos(input, pos) {
  40. setSelectionRange(input, pos, pos);
  41. }
  42. $(document).ready(function() {
  43. var timer;
  44. var x;
  45. var parsed;
  46. var render = function() {
  47. if (parsed === undefined) {
  48. return;
  49. }
  50. var startTime = new Date().getTime();
  51. var result = writer.render(parsed);
  52. var endTime = new Date().getTime();
  53. var renderTime = endTime - startTime;
  54. $("#preview").html(result);
  55. $("#html").text(result);
  56. $("#ast").text(commonmark.ASTRenderer(parsed));
  57. $("#rendertime").text(renderTime);
  58. };
  59. var parseAndRender = function() {
  60. if (x) { x.abort() } // If there is an existing XHR, abort it.
  61. clearTimeout(timer); // Clear the timer so we don't end up with dupes.
  62. timer = setTimeout(function() { // assign timer a new timeout
  63. var startTime = new Date().getTime();
  64. parsed = reader.parse($("#text").val());
  65. var endTime = new Date().getTime();
  66. var parseTime = endTime - startTime;
  67. $("#parsetime").text(parseTime);
  68. $(".timing").css('visibility','visible');
  69. /*
  70. var warnings = parsed.warnings;
  71. $("#warnings").html('');
  72. for (i=0; i < warnings.length; i++) {
  73. var w = warnings[i];
  74. var warning = $("#warnings").append('<li></li>');
  75. $("#warnings li").last().text('Line ' + w.line + ' column ' + w.column + ': ' + w.message);
  76. }
  77. */
  78. render();
  79. }, 0); // ms delay
  80. };
  81. var initial_text = getQueryVariable("text");
  82. if (initial_text) {
  83. $("#text").val(initial_text);
  84. // show HTML tab if text is from query
  85. $('#result-tabs a[href="#result"]').tab('show');
  86. }
  87. // make tab insert a tab in the text box:
  88. $("#text").keydown(function(e) {
  89. if (e.which == 9) {
  90. e.preventDefault();
  91. if (this.selectionStart !== undefined) {
  92. var pos = this.selectionStart;
  93. this.value = this.value.substring(0, pos) + "\t" + this.value.substring(pos);
  94. setCaretToPos(this, pos + 1);
  95. } else {
  96. this.value += "\t";
  97. }
  98. }
  99. });
  100. parseAndRender();
  101. $("#clear-text-box").click(function(e) {
  102. $("#text").val('');
  103. window.location.search = "";
  104. parseAndRender();
  105. });
  106. $("#permalink").click(function(e) {
  107. window.location.pathname = "/index.html";
  108. window.location.search = "text=" + encodeURIComponent($("#text").val());
  109. });
  110. $("#text").bind('keyup paste cut mouseup', parseAndRender);
  111. $(".option").change(render);
  112. });
  113. </script>
  114. <style type="text/css">
  115. h1.title { font-family: monospace; font-size: 120%; font-weight: bold;
  116. margin-top: 0.5em; margin-bottom: 0; }
  117. textarea#text { height: 400px; width: 95%; font-family: monospace; font-size: 92%; }
  118. pre code#html { font-size: 92%; font-family: monospace; }
  119. pre#htmlpre { height: 400px; overflow: scroll; resize: vertical; width: 95%; }
  120. div#astpre { height: 400px; overflow: scroll; resize: vertical; width: 95%; }
  121. div#preview { height: 400px; overflow: scroll; resize: vertical; width: 95%; }
  122. div.row { margin-top: 1em; }
  123. blockquote { font-size: 100%; }
  124. footer { color: #555; text-align: center; margin: 1em; }
  125. pre { display: block; padding: 0.5em; color: #333; background: #f8f8ff }
  126. #warnings li { color: red; font-weight: bold; }
  127. label { padding-left: 1em; padding-top: 0; padding-bottom: 0; }
  128. div.timing { color: gray; visibility: hidden; height: 2em; }
  129. p#text-controls { height: 1em; margin-top: 1em; }
  130. a#permalink { margin-left: 1em; }
  131. span.timing { font-weight: bold; }
  132. span.timing { font-weight: bold; }
  133. </style>
  134. </head>
  135. <body>
  136. <div class="container">
  137. <div class="row">
  138. <div class="col-md-6">
  139. <h1 class="title">commonmark.js dingus</h1>
  140. </div>
  141. </div>
  142. <div class="row">
  143. <div class="col-md-6">
  144. <p id="text-controls"><a id="clear-text-box">clear</a>&nbsp;<a
  145. id="permalink">permalink</a></p>
  146. <textarea id="text"></textarea>
  147. <ul id="warnings"></ul>
  148. <div class="timing">Parsed in <span class="timing" id="parsetime"></span>
  149. ms. Rendered in <span class="timing" id="rendertime"></span> ms.</div>
  150. </div>
  151. <div class="col-md-6">
  152. <ul id="result-tabs" class="nav nav-tabs" role="tablist">
  153. <li class="active"><a href="#preview" role="tab" data-toggle="tab">Preview</a></li>
  154. <li><a href="#result" role="tab" data-toggle="tab">HTML</a></li>
  155. <li><a href="#result-ast" role="tab" data-toggle="tab">AST</a></li>
  156. </ul>
  157. <div class="tab-content">
  158. <div id="preview" class="tab-pane active">
  159. </div>
  160. <div id="result" class="tab-pane">
  161. <pre id="htmlpre"><code id="html"></code></pre>
  162. </div>
  163. <div id="result-ast" class="tab-pane">
  164. <pre id="astpre"><code id="ast"></code></pre>
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </body>
  170. </html>