| <!doctype html> |
| <html> |
| <head> |
| <style> |
| iframe { |
| width: 95%; |
| min-height: 450px; |
| margin-left: auto; |
| margin-right: auto; |
| margin-bottom: 2em; |
| } |
| input, textarea { |
| display: block; |
| width: 95%; |
| } |
| textarea { |
| height: 8em; |
| } |
| </style> |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
| <script src="render.js"></script> |
| </head> |
| |
| <body> |
| |
| <form> |
| <textarea id='editor' wrap='off' oninput='updateUrl();'></textarea> |
| </form> |
| |
| <div id='viewurl'><a href=''>foo</a></div> |
| |
| <iframe id='result' seamless></iframe> |
| |
| <script> |
| function argsToForm(args) { |
| var t = ''; |
| for (var argi in args.all) { |
| var arg = args.all[argi]; |
| var key = arg[0], value = arg[1]; |
| if (key) { |
| t += key + '=' + value + '\n'; |
| } |
| } |
| $('#editor').text(t); |
| } |
| |
| |
| function niceEncode(s) { |
| // we could use encodeURIComponent() here, but it's too fancy. Let's |
| // *only* encode & characters so the resulting URL looks as nice as |
| // possible. |
| return s.replace(/&/g, '%26'); |
| } |
| |
| |
| function formToUrl() { |
| var urlbase = window.location.protocol + '//' + window.location.host; |
| var out = []; |
| var parts = $('#editor').attr('value').trim().split('\n'); |
| for (var parti in parts) { |
| var part = parts[parti]; |
| if (part) { |
| var bits = afterquery.internal.trySplitOne(part, '='); |
| if (bits) { |
| out.push(niceEncode(bits[0]) + '=' + niceEncode(bits[1])); |
| } else { |
| out.push(niceEncode(part)); |
| } |
| } |
| } |
| return urlbase + '?' + out.join('&'); |
| } |
| |
| |
| function updateUrl() { |
| var url = formToUrl(); |
| $('#viewurl a').attr('href', url).text(url); |
| if (tmo) { |
| clearTimeout(tmo); |
| } |
| tmo = setTimeout(function() { |
| if (lastloaded != url) { |
| $('iframe#result').attr('src', url + '&editlink=0&trace=1'); |
| lastloaded = url; |
| } |
| }, 1000); |
| } |
| |
| tmo = null; |
| lastloaded = null; |
| var exampleurl = (window.location.protocol + '//' + window.location.host + |
| '/example1.json'); |
| args = afterquery.internal.parseArgs(window.location.search || |
| ('?url=' + exampleurl)); |
| argsToForm(args); |
| updateUrl(); |
| </script> |
| |
| <p><a href='/help'>here's the documentation</a> |
| </body> |
| </html> |
