aboutsummaryrefslogtreecommitdiff
path: root/js/index.html
blob: 7ba5a86bb587ebc40a50f0c0c27f5ab74d5c159f (plain)
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>stmd.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="stmd.js"></script>
  10. <script type="text/javascript">
  11. var writer = new stmd.HtmlRenderer();
  12. var reader = new stmd.DocParser();
  13. $(document).ready(function() {
  14. $(".timing").hide();
  15. var timer;
  16. var x;
  17. var parsed;
  18. var render = function() {
  19. if (parsed === undefined) {
  20. return;
  21. }
  22. var startTime = new Date().getTime();
  23. var result = writer.renderBlock(parsed);
  24. var endTime = new Date().getTime();
  25. var renderTime = endTime - startTime;
  26. // $("#html").text(result);
  27. $("#preview").html(result);
  28. $("#html").text(result);
  29. $("#rendertime").text(renderTime);
  30. };
  31. var parseAndRender = function () {
  32. if (x) { x.abort() } // If there is an existing XHR, abort it.
  33. clearTimeout(timer); // Clear the timer so we don't end up with dupes.
  34. timer = setTimeout(function() { // assign timer a new timeout
  35. var startTime = new Date().getTime();
  36. parsed = reader.parse($("#text").val());
  37. var endTime = new Date().getTime();
  38. var parseTime = endTime - startTime;
  39. $("#parsetime").text(parseTime);
  40. $(".timing").show();
  41. /*
  42. var warnings = parsed.warnings;
  43. $("#warnings").html('');
  44. for (i=0; i < warnings.length; i++) {
  45. var w = warnings[i];
  46. var warning = $("#warnings").append('<li></li>');
  47. $("#warnings li").last().text('Line ' + w.line + ' column ' + w.column + ': ' + w.message);
  48. }
  49. */
  50. render();
  51. }, 0); // ms delay
  52. };
  53. $("#text").keyup(parseAndRender);
  54. $(".option").change(render);
  55. });
  56. </script>
  57. <style type="text/css">
  58. textarea#text { height: 400px; width: 95%; font-family: monospace; font-size: 92%; }
  59. pre code#html { font-size: 92%; font-family: monospace; }
  60. pre#htmlpre { height: 400px; width: 95%; overflow: scroll; }
  61. div#preview { height: 400px; overflow: scroll; }
  62. div.row { margin-top: 1em; }
  63. blockquote { font-size: 100%; }
  64. h3 { margin-top: 0; margin-bottom: 0; padding: 0; font-size: 100%; }
  65. footer { color: #555; text-align: center; margin: 1em; }
  66. pre { display: block; padding: 0.5em; color: #333; background: #f8f8ff }
  67. #warnings li { color: red; font-weight: bold; }
  68. label { padding-left: 1em; padding-top: 0; padding-bottom: 0; }
  69. p.timing { color: red; }
  70. span.timing { font-weight: bold; }
  71. span.timing { font-weight: bold; }
  72. </style>
  73. </head>
  74. <body>
  75. <div class="container">
  76. <div class="row">
  77. <div class="col-md-6">
  78. <h1>stmd.js dingus</h1>
  79. </div>
  80. <div class="col-md-3">
  81. <ul class="nav nav-tabs" role="tablist">
  82. <li class="active"><a href="#preview" role="tab" data-toggle="tab">Preview</a></li>
  83. <li><a href="#result" role="tab" data-toggle="tab">HTML</a></li>
  84. </ul>
  85. </div>
  86. <div class="col-md-3">
  87. <p class="timing">Parsed in <span class="timing" id="parsetime"></span> milliseconds.<br/>
  88. Rendered in <span class="timing" id="rendertime"></span> milliseconds.</p>
  89. </div>
  90. </div>
  91. <div class="row">
  92. <div class="col-md-6">
  93. <textarea id="text"></textarea>
  94. <ul id="warnings"></ul>
  95. </div>
  96. <div class="col-md-6">
  97. <div class="tab-content">
  98. <div id="preview" class="tab-pane active">
  99. </div>
  100. <div id="result" class="tab-pane">
  101. <pre id="htmlpre"><code id="html"></code></pre>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </body>
  108. </html>