Added debug view to demo

10 years ago · a75604569c
6 changed files with 99 additions and 35 deletions
--- a/CHANGELOG.md
+++ b/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.


--- a/demo/assets/index.css
+++ b/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;
--- a/demo/assets/index.js
+++ b/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');
-      // only to update permalink
-      updateResult();
-      event.preventDefault();
+    $(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();
--- a/demo/assets/index.styl
+++ b/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
--- a/demo/index.html
+++ b/demo/index.html
@ -18,12 +18,12 @@
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
+      
      ga('create', 'UA-26895916-3', 'auto');
      ga('require', 'displayfeatures');
      ga('require', 'linkid', 'linkid.js');
      ga('send', 'pageview');
-
+      
    </script>
  </head>
  <body>
@ -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,12 +275,13 @@ 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>
    <div class="gh-ribbon"><a href="https://github.com/jonschlinkert/remarkable" target="_blank">Fork me on GitHub</a></div>
  </body>
-</html>
+</html>
--- a/demo/index.jade
+++ b/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