From ff4c7b72629defd603ee4729b4916210b9a7651c Mon Sep 17 00:00:00 2001 From: Vitaly Puzrin Date: Tue, 30 Sep 2014 15:01:10 +0400 Subject: [PATCH] Demo cleanup --- .eslintignore | 1 - demo/.eslintrc | 6 ++++ demo/assets/index.css | 11 ++++--- demo/assets/index.js | 71 +++++++++++++++++++++++++++---------------- demo/data.yml | 18 +---------- demo/index.html | 14 ++++----- demo/index.jade | 45 +++++++++------------------ 7 files changed, 79 insertions(+), 87 deletions(-) create mode 100644 demo/.eslintrc diff --git a/.eslintignore b/.eslintignore index d85148f..0262b4e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,3 @@ benchmark/implementations/ -demo/ dist/ node_modules/ diff --git a/demo/.eslintrc b/demo/.eslintrc new file mode 100644 index 0000000..3089c06 --- /dev/null +++ b/demo/.eslintrc @@ -0,0 +1,6 @@ +env: + node: false + browser: true + +globals: + $: false diff --git a/demo/assets/index.css b/demo/assets/index.css index 6b52927..c3dfac4 100644 --- a/demo/assets/index.css +++ b/demo/assets/index.css @@ -3,7 +3,7 @@ body { overflow: hidden; } -.source, .result, .result-text { +.source, .result, .result-src { width: 100%; height: 350px; } @@ -13,25 +13,26 @@ body { overflow: auto; } -.result-text { +.result-src { display: none; } -.result-text-data { +.result-src-content { white-space: pre; } -.result-as-text .result-text { +.result-as-text .result-src { display: block; } .result-as-text .result { display: none; } -.mode { +.result-mode, .source-clear { position: absolute; right: 15px; top: 0; padding: 0 10px; + border-radius: 0 4px; font-weight: bold; font-size: 12px; background-color: #666; diff --git a/demo/assets/index.js b/demo/assets/index.js index 0cbd067..6bedc0d 100644 --- a/demo/assets/index.js +++ b/demo/assets/index.js @@ -1,32 +1,51 @@ -$(function() { - // highlight snippets - $('pre.code-sample code').each(function(i, block) { - hljs.highlightBlock(block); - }); -}); +(function () { + 'use strict'; + + var mdHtml, mdSrc; + + var options = { + html: true, + xhtml: true, + breaks: false, + langprefix: 'language-' + }; -var md = new window.Remarkable({ - html: true, - xhtml: true, - breaks: false, - langprefix: 'language-' -}); + function mdInit() { + mdHtml = new window.Remarkable(options); + mdSrc = new window.Remarkable(options); -md.renderer.rules.table_open = function () { - return '\n'; -} + // Beautify output of parser for html content + mdHtml.renderer.rules.table_open = function () { + return '
\n'; + }; + } + function updateResult() { + var source = $('.source').val(); + $('.result').html(mdHtml.render(source)); + $('.result-src-content').text(mdSrc.render(source)); + } -function updateResult() { - var result = md.render($('#demo1 .source').val()); - $('#demo1 .result').html(result); - $('#demo1 .result-text-data').text(result); -} -$('#demo1 .source').on('keyup paste cut mouseup', updateResult); -$('#demo1 .mode').on('click', function (event) { - $('#demo1').toggleClass('result-as-text'); - event.preventDefault(); -}); + $(function() { + // highlight snippet + $('pre.code-sample code').each(function(i, block) { + window.hljs.highlightBlock(block); + }); -updateResult(); \ No newline at end of file + mdInit(); + + $('.source').on('keyup paste cut mouseup', updateResult); + $('.source-clear').on('click', function (event) { + $('.source').val(''); + updateResult(); + event.preventDefault(); + }); + $('.result-mode').on('click', function (event) { + $('body').toggleClass('result-as-text'); + event.preventDefault(); + }); + + updateResult(); + }); +})(); diff --git a/demo/data.yml b/demo/data.yml index f5883dc..48acf67 100644 --- a/demo/data.yml +++ b/demo/data.yml @@ -1,9 +1,6 @@ self: - demo1: - title: Simple markdown - description: | - That's a sample of typical `remarkable` use. You can play with content + demo: code: | var Remarkable = require('remarkable'); @@ -89,16 +86,3 @@ self: [Basic link](https://github.com/jonschlinkert/remarkable) [Link with title](https://github.com/jonschlinkert/remarkable "Awesome markdown parser") - - demo2: - title: Code highlight - - # Advanced demos - - demo3: - title: Typograph - demo4: - title: Block macros - demo5: - title: Custom tag (lexer plugin) - diff --git a/demo/index.html b/demo/index.html index 178313d..381246a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -8,12 +8,13 @@ +

remarkable demo

-

Show code

- 
var Remarkable = require('remarkable');
+      
Show code sample

+      
var Remarkable = require('remarkable');
 
 var md = new Remarkable({
   html: true,
@@ -25,8 +26,8 @@ var md = new Remarkable({
 console.log(md.parse('# Remarkable rulezz!'));
 // => <h1>Remarkable rulezz!</h1>
 

-      

-        

+      

+        
clear
           
         

-        
html / source
+        
html / source
           

-          

+          

         

       

     

     
Fork me on GitHub

-    
   
 
\ No newline at end of file
diff --git a/demo/index.jade b/demo/index.jade
index 77a8eb3..459f89b 100644
--- a/demo/index.jade
+++ b/demo/index.jade
@@ -1,22 +1,3 @@
-mixin sample(name)
-  - var s = self.self[name];
-  //-h3= s.title
-  //-if s.description
-  //-  p= s.description
-  p: a(data-toggle='collapse' href='#code-sample-' + name) Show code
-
-  pre.collapse.code-sample(id='code-sample-' + name)
-    code.js= s.code
-
-  .row(id=name)
-    .col-xs-6
-      textarea.source= s.source
-    section.col-xs-6
-      a.mode(href='#') html / source
-      .result
-      pre.result-text
-        code.result-text-data
-
 doctype html
 html
   head
@@ -31,24 +12,26 @@ html
     script(src='../dist/remarkable.js')
 
     link(rel='stylesheet' href='./assets/index.css')
+    script(src='./assets/index.js')
 
   body
     .container
+      - var s = self.self.demo;
       h1 remarkable demo
 
-      //-h2 Basic examples
-
-      +sample('demo1')
-    //-
-      +sample('demo2')
+      p: a(data-toggle='collapse' href='#code-sample') Show code sample
+      pre.collapse.code-sample(id='code-sample')
+        code.js= s.code
 
-      h2 Advanced examples
-
-      +sample('demo3')
-      +sample('demo4')
-      +sample('demo5')
+      .row
+        .col-xs-6
+          a.source-clear(href='#') clear
+          textarea.source= s.source
+        section.col-xs-6
+          a.result-mode(href='#') html / source
+          .result
+          pre.result-src
+            code.result-src-content
 
     .gh-ribbon
       a(href='https://github.com/jonschlinkert/remarkable') Fork me on GitHub
-
-    script(src='./assets/index.js')