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