summaryrefslogtreecommitdiff
path: root/js/index.html
diff options
context:
space:
mode:
authorJohn MacFarlane <jgm@berkeley.edu>2014-07-21 23:02:04 -0700
committerJohn MacFarlane <jgm@berkeley.edu>2014-08-13 22:56:32 -0700
commitda6d7f5ec81528558f2bdc5e7ba36f39c39682b3 (patch)
treeb02f221d2b075c287d706744c8d8b03ed4ef2be8 /js/index.html
parent4051f2ec7d86ff2de1dc5f1015e9c569048aa1c0 (diff)
Added dingus as js/index.html.
Diffstat (limited to 'js/index.html')
-rw-r--r--js/index.html110
1 files changed, 110 insertions, 0 deletions
diff --git a/js/index.html b/js/index.html
new file mode 100644
index 0000000..7ba5a86
--- /dev/null
+++ b/js/index.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>stmd.js demo</title>
+ <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+ <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+ <script src="stmd.js"></script>
+ <script type="text/javascript">
+
+var writer = new stmd.HtmlRenderer();
+var reader = new stmd.DocParser();
+
+$(document).ready(function() {
+ $(".timing").hide();
+ var timer;
+ var x;
+ var parsed;
+ var render = function() {
+ if (parsed === undefined) {
+ return;
+ }
+ var startTime = new Date().getTime();
+ var result = writer.renderBlock(parsed);
+ var endTime = new Date().getTime();
+ var renderTime = endTime - startTime;
+ // $("#html").text(result);
+ $("#preview").html(result);
+ $("#html").text(result);
+ $("#rendertime").text(renderTime);
+ };
+ var parseAndRender = function () {
+ if (x) { x.abort() } // If there is an existing XHR, abort it.
+ clearTimeout(timer); // Clear the timer so we don't end up with dupes.
+ timer = setTimeout(function() { // assign timer a new timeout
+ var startTime = new Date().getTime();
+ parsed = reader.parse($("#text").val());
+ var endTime = new Date().getTime();
+ var parseTime = endTime - startTime;
+ $("#parsetime").text(parseTime);
+ $(".timing").show();
+ /*
+ var warnings = parsed.warnings;
+ $("#warnings").html('');
+ for (i=0; i < warnings.length; i++) {
+ var w = warnings[i];
+ var warning = $("#warnings").append('<li></li>');
+ $("#warnings li").last().text('Line ' + w.line + ' column ' + w.column + ': ' + w.message);
+ }
+ */
+ render();
+ }, 0); // ms delay
+ };
+ $("#text").keyup(parseAndRender);
+ $(".option").change(render);
+});
+ </script>
+ <style type="text/css">
+ textarea#text { height: 400px; width: 95%; font-family: monospace; font-size: 92%; }
+ pre code#html { font-size: 92%; font-family: monospace; }
+ pre#htmlpre { height: 400px; width: 95%; overflow: scroll; }
+ div#preview { height: 400px; overflow: scroll; }
+ div.row { margin-top: 1em; }
+ blockquote { font-size: 100%; }
+ h3 { margin-top: 0; margin-bottom: 0; padding: 0; font-size: 100%; }
+ footer { color: #555; text-align: center; margin: 1em; }
+ pre { display: block; padding: 0.5em; color: #333; background: #f8f8ff }
+ #warnings li { color: red; font-weight: bold; }
+ label { padding-left: 1em; padding-top: 0; padding-bottom: 0; }
+ p.timing { color: red; }
+ span.timing { font-weight: bold; }
+ span.timing { font-weight: bold; }
+ </style>
+</head>
+<body>
+<div class="container">
+ <div class="row">
+ <div class="col-md-6">
+ <h1>stmd.js dingus</h1>
+ </div>
+ <div class="col-md-3">
+ <ul class="nav nav-tabs" role="tablist">
+ <li class="active"><a href="#preview" role="tab" data-toggle="tab">Preview</a></li>
+ <li><a href="#result" role="tab" data-toggle="tab">HTML</a></li>
+ </ul>
+ </div>
+ <div class="col-md-3">
+ <p class="timing">Parsed in <span class="timing" id="parsetime"></span> milliseconds.<br/>
+ Rendered in <span class="timing" id="rendertime"></span> milliseconds.</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <textarea id="text"></textarea>
+ <ul id="warnings"></ul>
+ </div>
+ <div class="col-md-6">
+ <div class="tab-content">
+ <div id="preview" class="tab-pane active">
+ </div>
+ <div id="result" class="tab-pane">
+ <pre id="htmlpre"><code id="html"></code></pre>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+</body>
+</html>