Browse Source

Added debug view to demo

pull/14/head
Vitaly Puzrin 10 years ago
parent
commit
a75604569c
  1. 1
      CHANGELOG.md
  2. 35
      demo/assets/index.css
  3. 42
      demo/assets/index.js
  4. 27
      demo/assets/index.styl
  5. 9
      demo/index.html
  6. 8
      demo/index.jade

1
CHANGELOG.md

@ -3,6 +3,7 @@
- Fixed speed degradation when linkifier enabled.
- Added coverage reports.
- Added debug view to demo (show internal representation)
- Other minor optimizations and cleanup.

35
demo/assets/index.css

@ -23,32 +23,51 @@ body {
font-size: 13px;
padding: 2px;
}
.result {
.result-html {
padding: 2px 10px;
overflow: auto;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
.result img {
.result-html img {
max-width: 50%;
}
.result-src {
.result-src,
.result-debug {
display: none;
background-color: #fff;
}
.result-src-content {
.result-src-content,
.result-debug-content {
white-space: pre;
}
.result-as-text .result-src {
.result-as-html .result-html {
display: block;
}
.result-as-html .result-src,
.result-as-html .result-debug {
display: none;
}
.result-as-src .result-src {
display: block;
}
.result-as-src .result-html,
.result-as-src .result-debug {
display: none;
}
.result-as-debug .result-debug {
display: block;
}
.result-as-text .result {
.result-as-debug .result-html,
.result-as-debug .result-src {
display: none;
}
.demo-control {
position: absolute;
right: 15px;
right: 40px;
top: 0;
border-radius: 0 4px;
border-radius: 0 0 6px 6px;
font-size: 12px;
background-color: #666;
color: #fff !important;

42
demo/assets/index.js

@ -14,7 +14,7 @@
// options below are for demo only
_highlight: true,
_strict: false,
_src: false
_view: 'html' // html / src / debug
};
defaults.highlight = function (str, lang) {
@ -42,6 +42,14 @@
}
}
function setResultView(val) {
$('body').removeClass('result-as-html');
$('body').removeClass('result-as-src');
$('body').removeClass('result-as-debug');
$('body').addClass('result-as-' + val);
defaults._view = val;
}
function mdInit() {
if (defaults._strict) {
mdHtml = new window.Remarkable('commonmark');
@ -59,8 +67,13 @@
function updateResult() {
var source = $('.source').val();
$('.result').html(mdHtml.render(source));
$('.result-html').html(mdHtml.render(source));
$('.result-src-content').html(window.hljs.highlight('html', mdSrc.render(source)).value);
var dump = JSON.stringify(mdSrc.parse(source, { references: {} }), null, 2);
$('.result-debug-content').html(window.hljs.highlight('json', dump).value);
try {
if (source) {
// serialize state - source and options
@ -107,11 +120,22 @@
_.forOwn(opts, function (val, key) {
if (!defaults.hasOwnProperty(key)) { return; }
// Legacy, for old links
if (key === '_src') {
defaults._view = val ? 'src' : 'html';
return;
}
if ((_.isBoolean(defaults[key]) && _.isBoolean(val)) ||
(_.isString(defaults[key]) && _.isString(val))) {
defaults[key] = val;
}
});
// sanitize for sure
if ([ 'html', 'src', 'debug' ].indexOf(defaults._view) === -1) {
defaults._view = 'html';
}
} catch (__) {}
}
@ -149,11 +173,7 @@
}
});
// Set display mode for result
if (defaults._src) {
$('body').addClass('result-as-text');
}
setResultView(defaults._view);
mdInit();
permalink = document.getElementById('permalink');
@ -167,12 +187,14 @@
event.preventDefault();
});
$('.result-mode').on('click', function (event) {
defaults._src = !defaults._src;
$('body').toggleClass('result-as-text');
$(document).on('click', '[data-result-as]', function (event) {
var view = $(this).data('resultAs');
if (view) {
setResultView(view);
// only to update permalink
updateResult();
event.preventDefault();
}
});
updateResult();

27
demo/assets/index.styl

@ -22,32 +22,49 @@ body
font-size 13px
padding 2px
.result
.result-html
padding 2px 10px
overflow auto
background-color #fff
border 1px solid #ccc
border-radius 4px
img
max-width 50%
.result-src
.result-debug
display none
background-color #fff
.result-src-content
.result-debug-content
white-space pre
.result-as-text
.result-as-html
.result-html
display block
.result-src
.result-debug
display none
.result-as-src
.result-src
display block
.result
.result-html
.result-debug
display none
.result-as-debug
.result-debug
display block
.result-html
.result-src
display none
.demo-control
position absolute
right 15px
right 40px
top 0
//padding 0 10px
border-radius 0 4px
border-radius 0 0 6px 6px
font-size 12px
background-color #666
color #fff !important

9
demo/index.html

@ -109,7 +109,7 @@ console.log(md.render('# Remarkable rulezz!'));
<textarea class="source full-height">---
__Advertisement :)__
- __[pica](http://nodeca.github.io/pica/demo/)__ - high quality and fast image
- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
resize in browser.
- __[babelfish](https://github.com/nodeca/babelfish/)__ - developpers friendly
i18n with plurals support and easy syntax.
@ -254,7 +254,7 @@ Right aligned columns
[link text](http://dev.nodeca.com)
[link with title](https://nodeca.github.io/pica/demo/ &quot;title text!&quot;)
[link with title](http://nodeca.github.io/pica/demo/ &quot;title text!&quot;)
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
@ -275,9 +275,10 @@ With a reference later in the document defining the URL location:
</textarea>
</div>
<section class="col-xs-6 full-height">
<div class="demo-control"><a href="#" class="result-mode">html / source</a></div>
<div class="result full-height"></div>
<div class="demo-control"><a href="#" data-result-as="html">html</a><a href="#" data-result-as="src">source</a><a href="#" data-result-as="debug">debug</a></div>
<div class="result-html full-height"></div>
<pre class="result-src full-height"><code class="result-src-content full-height"></code></pre>
<pre class="result-debug full-height"><code class="result-debug-content full-height"></code></pre>
</section>
</div>
</div>

8
demo/index.jade

@ -86,10 +86,14 @@ html
textarea.source.full-height= s.source
section.col-xs-6.full-height
.demo-control
a.result-mode(href='#') html / source
.result.full-height
a(href='#' data-result-as='html') html
a(href='#' data-result-as='src') source
a(href='#' data-result-as='debug') debug
.result-html.full-height
pre.result-src.full-height
code.result-src-content.full-height
pre.result-debug.full-height
code.result-debug-content.full-height
.gh-ribbon
a(href='https://github.com/jonschlinkert/remarkable' target='_blank') Fork me on GitHub

Loading…
Cancel
Save