diff --git a/demo/.eslintrc b/demo/.eslintrc index 3089c06..16b8bce 100644 --- a/demo/.eslintrc +++ b/demo/.eslintrc @@ -4,3 +4,4 @@ env: globals: $: false + _: false diff --git a/demo/assets/index.css b/demo/assets/index.css index b0d124b..c96b1e1 100644 --- a/demo/assets/index.css +++ b/demo/assets/index.css @@ -1 +1 @@ -body{margin-bottom:20px;overflow:hidden}.source,.result,.result-src{width:100%;height:350px}.result{padding-right:20px;overflow:auto;}.result img{max-width:100%}.result-src{display:none}.result-src-content{white-space:pre}.result-as-text .result-src{display:block}.result-as-text .result{display:none}.demo-control{position:absolute;right:15px;top:0;padding:0 10px;border-radius:0 4px;font-size:12px;background-color:#666;color:#fff !important;opacity:.6;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;}.demo-control:hover{opacity:1}.demo-control a{margin:0 20px;color:#fff !important}.hljs{background:none;padding:0}.gh-ribbon{display:block;position:absolute;right:-60px;top:44px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);width:230px;z-index:10000;white-space:nowrap;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background-color:#686868;box-shadow:0 0 2px rgba(102,102,102,0.4);padding:1px 0;}.gh-ribbon a{text-decoration:none !important;border:1px solid #ccc;color:#fff;display:block;font-size:13px;font-weight:700;outline:medium none;padding:4px 50px 2px;text-align:center} \ No newline at end of file +body{margin-bottom:20px;overflow:hidden}.demo-options{margin-bottom:10px}.checkbox{margin-right:10px}.source,.result,.result-src{width:100%;height:350px}.result{padding-right:20px;overflow:auto;}.result img{max-width:100%}.result-src{display:none}.result-src-content{white-space:pre}.result-as-text .result-src{display:block}.result-as-text .result{display:none}.demo-control{position:absolute;right:15px;top:0;padding:0 10px;border-radius:0 4px;font-size:12px;background-color:#666;color:#fff !important;opacity:.6;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;}.demo-control:hover{opacity:1}.demo-control a{margin:0 20px;color:#fff !important}.hljs{background:none;padding:0}.gh-ribbon{display:block;position:absolute;right:-60px;top:44px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);width:230px;z-index:10000;white-space:nowrap;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background-color:#686868;box-shadow:0 0 2px rgba(102,102,102,0.4);padding:1px 0;}.gh-ribbon a{text-decoration:none !important;border:1px solid #ccc;color:#fff;display:block;font-size:13px;font-weight:700;outline:medium none;padding:4px 50px 2px;text-align:center} \ No newline at end of file diff --git a/demo/assets/index.js b/demo/assets/index.js index 99ef49d..ad7d260 100644 --- a/demo/assets/index.js +++ b/demo/assets/index.js @@ -3,16 +3,20 @@ var mdHtml, mdSrc, permalink; - var options = { + var defaults = { html: true, xhtml: true, breaks: false, - langprefix: 'language-' + langprefix: 'language-', + + // options below are for demo only + _highlight: false, + _src: false }; function mdInit() { - mdHtml = new window.Remarkable(options); - mdSrc = new window.Remarkable(options); + mdHtml = new window.Remarkable(defaults); + mdSrc = new window.Remarkable(defaults); // Beautify output of parser for html content mdHtml.renderer.rules.table_open = function () { @@ -26,11 +30,17 @@ $('.result-src-content').text(mdSrc.render(source)); try { if (source) { - permalink.href = '#md=' + encodeURIComponent(source); + // serialize state - source and options + permalink.href = '#md=' + encodeURIComponent(JSON.stringify({ + defaults: _.omit(defaults, 'highlight'), + source: source + })); } else { permalink.href = ''; } - } catch (__) {} + } catch (__) { + permalink.href = ''; + } } @@ -42,21 +52,82 @@ // Restore content if opened by permalink if (location.hash && location.hash.toString().slice(0,4) === '#md=') { - $('.source').val(decodeURIComponent(location.hash.slice(4))); + try { + var cfg = JSON.parse(decodeURIComponent(location.hash.slice(4))); + + if (_.isString(cfg.source)) { + $('.source').val(cfg.source); + } + + var opts = _.isObject(cfg.defaults) ? cfg.defaults : {}; + + // copy config to defaults, but only if key exists + // and value has the same type + _.forOwn(opts, function (val, key) { + if (!defaults.hasOwnProperty(key)) { return; } + + if ((_.isBoolean(defaults[key]) && _.isBoolean(val)) || + (_.isString(defaults[key]) && _.isString(val))) { + defaults[key] = val; + } + }); + } catch (__) {} } - mdInit(); + // Activate tooltips + $('._tip').tooltip({ container: 'body' }); + + // Set default option values and option listeners + _.forOwn(defaults, function (val, key) { + if (key === 'highlight') { return; } + + var el = document.getElementById(key); + + if (!el) { return; } + + var $el = $(el); + + if (_.isBoolean(val)) { + $el.prop('checked', val); + $el.on('change', function () { + defaults[key] = Boolean($el.prop('checked')); + mdInit(); + updateResult(); + }); + } else { + $(el).val(val); + $el.on('change update keyup', function () { + defaults[key] = String($(el).val()); + mdInit(); + updateResult(); + }); + } + }); + + // Set display mode for result + if (defaults._src) { + $('body').addClass('result-as-text'); + } + + + mdInit(); permalink = document.getElementById('permalink'); + // Setup listeners $('.source').on('keyup paste cut mouseup', updateResult); + $('.source-clear').on('click', function (event) { $('.source').val(''); updateResult(); event.preventDefault(); }); + $('.result-mode').on('click', function (event) { + defaults._src = !defaults._src; $('body').toggleClass('result-as-text'); + // only to update permalink + updateResult(); event.preventDefault(); }); diff --git a/demo/assets/index.styl b/demo/assets/index.styl index 3d1128d..e2ed7f0 100644 --- a/demo/assets/index.styl +++ b/demo/assets/index.styl @@ -2,6 +2,12 @@ body margin-bottom 20px overflow hidden +.demo-options + margin-bottom 10px + +.checkbox + margin-right 10px + .source, .result, .result-src width 100% height 350px diff --git a/demo/index.html b/demo/index.html index 49966c3..d75ad1c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,7 +1,9 @@ + Remarkable demo + @@ -12,7 +14,7 @@
-

remarkable demo

+

Remarkable demo

Show code sample

var Remarkable = require('remarkable');
 
@@ -26,6 +28,31 @@ var md = new Remarkable({
 console.log(md.parse('# Remarkable rulezz!'));
 // => <h1>Remarkable rulezz!</h1>
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
clear
diff --git a/demo/index.jade b/demo/index.jade index e53e5cc..a4fa97f 100644 --- a/demo/index.jade +++ b/demo/index.jade @@ -1,8 +1,12 @@ doctype html html head + title Remarkable demo + script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') + script(src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js') + script(src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js') link(rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css') @@ -17,12 +21,36 @@ html body .container - var s = self.self.demo; - h1 remarkable demo + h1 Remarkable demo p: a(data-toggle='collapse' href='#code-sample') Show code sample pre.collapse.code-sample(id='code-sample') code.js= s.code + .form-inline.demo-options + .checkbox + label._tip(title='enable html tags in source text') + input#html(type='checkbox') + | html + .checkbox + label._tip(title='add / to single tags (
instead of
') + input#xhtml(type='checkbox') + | xhtml + .checkbox + label._tip(title='newlines in paragraphs are rendered as
') + input#breaks(type='checkbox') + | breaks + .checkbox + label._tip(title='enable output highlight for fenced blocks') + input#_highlight(type='checkbox') + | highlight + .form-group + input#langprefix.form-control._tip( + type='input' + placeholder='language prefix' + title='css class language prefix for fenced code blocks' + ) + .row .col-xs-6 .demo-control