summaryrefslogtreecommitdiff
path: root/js/dingus.html
diff options
context:
space:
mode:
Diffstat (limited to 'js/dingus.html')
-rw-r--r--js/dingus.html175
1 files changed, 0 insertions, 175 deletions
diff --git a/js/dingus.html b/js/dingus.html
deleted file mode 100644
index f567755..0000000
--- a/js/dingus.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>commonmark.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="commonmark.js"></script>
- <script type="text/javascript">
-
-var writer = new commonmark.HtmlRenderer();
-var xmlwriter = new commonmark.XmlRenderer({ sourcepos: true });
-var reader = new commonmark.DocParser();
-
-function getQueryVariable(variable) {
- var query = window.location.search.substring(1);
- var vars = query.split("&");
- for (var i=0; i<vars.length; i++) {
- var pair = vars[i].split("=");
- if (pair[0] == variable){
- return decodeURIComponent(pair[1]);
- }
- }
- return null;
-}
-
-// via http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
-function setSelectionRange(input, selectionStart, selectionEnd) {
- if (input.setSelectionRange) {
- input.focus();
- input.setSelectionRange(selectionStart, selectionEnd);
- }
- else if (input.createTextRange) {
- var range = input.createTextRange();
- range.collapse(true);
- range.moveEnd('character', selectionEnd);
- range.moveStart('character', selectionStart);
- range.select();
- }
-}
-// via http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
-function setCaretToPos(input, pos) {
- setSelectionRange(input, pos, pos);
-}
-
-$(document).ready(function() {
- var timer;
- var x;
- var parsed;
- var render = function() {
- if (parsed === undefined) {
- return;
- }
- var startTime = new Date().getTime();
- var result = writer.render(parsed);
- var endTime = new Date().getTime();
- var renderTime = endTime - startTime;
- $("#preview").html(result);
- $("#html").text(result);
- $("#ast").text(xmlwriter.render(parsed));
- $("#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").css('visibility','visible');
- /*
- 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
- };
- var initial_text = getQueryVariable("text");
- if (initial_text) {
- $("#text").val(initial_text);
- // show HTML tab if text is from query
- $('#result-tabs a[href="#result"]').tab('show');
- }
- // make tab insert a tab in the text box:
- $("#text").keydown(function(e) {
- if (e.which == 9) {
- e.preventDefault();
- if (this.selectionStart !== undefined) {
- var pos = this.selectionStart;
- this.value = this.value.substring(0, pos) + "\t" + this.value.substring(pos);
- setCaretToPos(this, pos + 1);
- } else {
- this.value += "\t";
- }
- }
- });
- parseAndRender();
- $("#clear-text-box").click(function(e) {
- $("#text").val('');
- window.location.search = "";
- parseAndRender();
- });
- $("#permalink").click(function(e) {
- window.location.pathname = "/index.html";
- window.location.search = "text=" + encodeURIComponent($("#text").val());
- });
- $("#text").bind('keyup paste cut mouseup', parseAndRender);
- $(".option").change(render);
-});
- </script>
- <style type="text/css">
- h1.title { font-family: monospace; font-size: 120%; font-weight: bold;
- margin-top: 0.5em; margin-bottom: 0; }
- 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; overflow: scroll; resize: vertical; width: 95%; }
- div#astpre { height: 400px; overflow: scroll; resize: vertical; width: 95%; }
- div#preview { height: 400px; overflow: scroll; resize: vertical; width: 95%; }
- div.row { margin-top: 1em; }
- blockquote { 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; }
- div.timing { color: gray; visibility: hidden; height: 2em; }
- p#text-controls { height: 1em; margin-top: 1em; }
- a#permalink { margin-left: 1em; }
- 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 class="title">commonmark.js dingus</h1>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6">
- <p id="text-controls"><a id="clear-text-box">clear</a>&nbsp;<a
- id="permalink">permalink</a></p>
- <textarea id="text"></textarea>
- <ul id="warnings"></ul>
- <div class="timing">Parsed in <span class="timing" id="parsetime"></span>
- ms. Rendered in <span class="timing" id="rendertime"></span> ms.</div>
- </div>
- <div class="col-md-6">
- <ul id="result-tabs" 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>
- <li><a href="#result-ast" role="tab" data-toggle="tab">AST</a></li>
- </ul>
- <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 id="result-ast" class="tab-pane">
- <pre id="astpre"><code id="ast"></code></pre>
- </div>
- </div>
- </div>
-</div>
-</body>
-</html>