From 858475af7aa4b86a40c6edce6924ecb4efa7cad1 Mon Sep 17 00:00:00 2001 From: Vitaly Puzrin Date: Mon, 27 Apr 2015 02:40:12 +0300 Subject: [PATCH] Use browserify to build demo --- Makefile | 13 +- support/demo_template/index.jade | 10 - support/demo_template/index.js | 680 +++++++++++++++---------------- 3 files changed, 340 insertions(+), 363 deletions(-) diff --git a/Makefile b/Makefile index 0049d3b..9ae5338 100644 --- a/Makefile +++ b/Makefile @@ -24,19 +24,8 @@ demo: lint > ./demo/index.css rm -rf ./support/demo_template/sample.json browserify ./ -s markdownit > ./demo/markdown-it.js - #cp ./dist/markdown-it.js ./demo/ - cp ./support/demo_template/index.js ./demo/ + browserify ./support/demo_template/index.js > ./demo/index.js cp ./support/demo_template/README.md ./demo/ - mkdir ./demo/plugins - cp ./node_modules/markdown-it-abbr/dist/* ./demo/plugins - cp ./node_modules/markdown-it-container/dist/* ./demo/plugins - cp ./node_modules/markdown-it-deflist/dist/* ./demo/plugins - cp ./node_modules/markdown-it-emoji/dist/* ./demo/plugins - cp ./node_modules/markdown-it-footnote/dist/* ./demo/plugins - cp ./node_modules/markdown-it-ins/dist/* ./demo/plugins - cp ./node_modules/markdown-it-mark/dist/* ./demo/plugins - cp ./node_modules/markdown-it-sub/dist/* ./demo/plugins - cp ./node_modules/markdown-it-sup/dist/* ./demo/plugins gh-demo: demo touch ./demo/.nojekyll diff --git a/support/demo_template/index.jade b/support/demo_template/index.jade index 5b0fc76..b341a3c 100644 --- a/support/demo_template/index.jade +++ b/support/demo_template/index.jade @@ -20,16 +20,6 @@ html script(src='markdown-it.js') script(src='https://twemoji.maxcdn.com/twemoji.min.js') - script(src='plugins/markdown-it-abbr.js') - script(src='plugins/markdown-it-container.js') - script(src='plugins/markdown-it-deflist.js') - script(src='plugins/markdown-it-emoji.js') - script(src='plugins/markdown-it-footnote.js') - script(src='plugins/markdown-it-ins.js') - script(src='plugins/markdown-it-mark.js') - script(src='plugins/markdown-it-sub.js') - script(src='plugins/markdown-it-sup.js') - link(rel='stylesheet' href='index.css') script(src='index.js') diff --git a/support/demo_template/index.js b/support/demo_template/index.js index 3662fc4..c959170 100644 --- a/support/demo_template/index.js +++ b/support/demo_template/index.js @@ -1,407 +1,405 @@ -(function () { - 'use strict'; - - /*eslint-env browser*/ - /*global $, _*/ - - var mdHtml, mdSrc, permalink, scrollMap; - - var defaults = { - html: false, // Enable HTML tags in source - xhtmlOut: false, // Use '/' to close single tags (
) - breaks: false, // Convert '\n' in paragraphs into
- langPrefix: 'language-', // CSS language prefix for fenced blocks - linkify: true, // autoconvert URL-like texts to links - typographer: true, // Enable smartypants and other sweet transforms - - // options below are for demo only - _highlight: true, - _strict: false, - _view: 'html' // html / src / debug - }; +'use strict'; - defaults.highlight = function (str, lang) { - if (!defaults._highlight || !window.hljs) { return ''; } +/*eslint-env browser*/ +/*global $, _*/ - var hljs = window.hljs; - if (lang && hljs.getLanguage(lang)) { - try { - return hljs.highlight(lang, str).value; - } catch (__) {} - } +var mdHtml, mdSrc, permalink, scrollMap; + +var defaults = { + html: false, // Enable HTML tags in source + xhtmlOut: false, // Use '/' to close single tags (
) + breaks: false, // Convert '\n' in paragraphs into
+ langPrefix: 'language-', // CSS language prefix for fenced blocks + linkify: true, // autoconvert URL-like texts to links + typographer: true, // Enable smartypants and other sweet transforms + // options below are for demo only + _highlight: true, + _strict: false, + _view: 'html' // html / src / debug +}; + +defaults.highlight = function (str, lang) { + if (!defaults._highlight || !window.hljs) { return ''; } + + var hljs = window.hljs; + if (lang && hljs.getLanguage(lang)) { try { - return hljs.highlightAuto(str).value; + return hljs.highlight(lang, str).value; } catch (__) {} + } - return ''; - }; + try { + return hljs.highlightAuto(str).value; + } catch (__) {} - function setOptionClass(name, val) { - if (val) { - $('body').addClass('opt_' + name); - } else { - $('body').removeClass('opt_' + name); - } - } + return ''; +}; - 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 setOptionClass(name, val) { + if (val) { + $('body').addClass('opt_' + name); + } else { + $('body').removeClass('opt_' + name); + } +} + +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 = window.markdownit('commonmark'); + mdSrc = window.markdownit('commonmark'); + } else { + mdHtml = window.markdownit(defaults) + .use(require('markdown-it-abbr')) + .use(require('markdown-it-container'), 'warning') + .use(require('markdown-it-deflist')) + .use(require('markdown-it-emoji')) + .use(require('markdown-it-footnote')) + .use(require('markdown-it-ins')) + .use(require('markdown-it-mark')) + .use(require('markdown-it-sub')) + .use(require('markdown-it-sup')); + mdSrc = window.markdownit(defaults) + .use(require('markdown-it-abbr')) + .use(require('markdown-it-container'), 'warning') + .use(require('markdown-it-deflist')) + .use(require('markdown-it-emoji')) + .use(require('markdown-it-footnote')) + .use(require('markdown-it-ins')) + .use(require('markdown-it-mark')) + .use(require('markdown-it-sub')) + .use(require('markdown-it-sup')); } - function mdInit() { - if (defaults._strict) { - mdHtml = window.markdownit('commonmark'); - mdSrc = window.markdownit('commonmark'); - } else { - mdHtml = window.markdownit(defaults) - .use(window.markdownitAbbr) - .use(window.markdownitContainer, 'warning') - .use(window.markdownitDeflist) - .use(window.markdownitEmoji) - .use(window.markdownitFootnote) - .use(window.markdownitIns) - .use(window.markdownitMark) - .use(window.markdownitSub) - .use(window.markdownitSup); - mdSrc = window.markdownit(defaults) - .use(window.markdownitAbbr) - .use(window.markdownitContainer, 'warning') - .use(window.markdownitDeflist) - .use(window.markdownitEmoji) - .use(window.markdownitFootnote) - .use(window.markdownitIns) - .use(window.markdownitMark) - .use(window.markdownitSub) - .use(window.markdownitSup); - } + // Beautify output of parser for html content + mdHtml.renderer.rules.table_open = function () { + return '\n'; + }; + // Replace emoji codes with images + mdHtml.renderer.rules.emoji = function(token, idx) { + return window.twemoji.parse(token[idx].content); + }; - // Beautify output of parser for html content - mdHtml.renderer.rules.table_open = function () { - return '
\n'; - }; - // Replace emoji codes with images - mdHtml.renderer.rules.emoji = function(token, idx) { - return window.twemoji.parse(token[idx].content); - }; - - // - // Inject line numbers for sync scroll. Notes: - // - // - We track only headings and paragraphs on first level. That's enough. - // - Footnotes content causes jumps. Level limit filter it automatically. - function injectLineNumbers(tokens, idx, options, env, self) { - var line; - if (tokens[idx].map && tokens[idx].level === 0) { - line = tokens[idx].map[0]; - tokens[idx].attrPush([ 'class', 'line' ]); - tokens[idx].attrPush([ 'data-line', String(line) ]); - } - return self.renderToken(tokens, idx, options, env, self); + // + // Inject line numbers for sync scroll. Notes: + // + // - We track only headings and paragraphs on first level. That's enough. + // - Footnotes content causes jumps. Level limit filter it automatically. + function injectLineNumbers(tokens, idx, options, env, self) { + var line; + if (tokens[idx].map && tokens[idx].level === 0) { + line = tokens[idx].map[0]; + tokens[idx].attrPush([ 'class', 'line' ]); + tokens[idx].attrPush([ 'data-line', String(line) ]); } - - mdHtml.renderer.rules.paragraph_open = mdHtml.renderer.rules.heading_open = injectLineNumbers; + return self.renderToken(tokens, idx, options, env, self); } - function setHighlightedlContent(selector, content, lang) { - if (window.hljs) { - $(selector).html(window.hljs.highlight(lang, content).value); - } else { - $(selector).text(content); - } + mdHtml.renderer.rules.paragraph_open = mdHtml.renderer.rules.heading_open = injectLineNumbers; +} + +function setHighlightedlContent(selector, content, lang) { + if (window.hljs) { + $(selector).html(window.hljs.highlight(lang, content).value); + } else { + $(selector).text(content); } +} - function updateResult() { - var source = $('.source').val(); +function updateResult() { + var source = $('.source').val(); - // Update only active view to avoid slowdowns - // (debug & src view with highlighting are a bit slow) - if (defaults._view === 'src') { - setHighlightedlContent('.result-src-content', mdSrc.render(source), 'html'); + // Update only active view to avoid slowdowns + // (debug & src view with highlighting are a bit slow) + if (defaults._view === 'src') { + setHighlightedlContent('.result-src-content', mdSrc.render(source), 'html'); - } else if (defaults._view === 'debug') { - setHighlightedlContent( - '.result-debug-content', - JSON.stringify(mdSrc.parse(source, { references: {} }), null, 2), - 'json' - ); + } else if (defaults._view === 'debug') { + setHighlightedlContent( + '.result-debug-content', + JSON.stringify(mdSrc.parse(source, { references: {} }), null, 2), + 'json' + ); - } else { /*defaults._view === 'html'*/ - $('.result-html').html(mdHtml.render(source)); - } + } else { /*defaults._view === 'html'*/ + $('.result-html').html(mdHtml.render(source)); + } - // reset lines mapping cache on content update - scrollMap = null; + // reset lines mapping cache on content update + scrollMap = null; - try { - if (source) { - // serialize state - source and options - permalink.href = '#md64=' + window.btoa(JSON.stringify({ - source: source, - defaults: _.omit(defaults, 'highlight') - })); - } else { - permalink.href = ''; - } - } catch (__) { + try { + if (source) { + // serialize state - source and options + permalink.href = '#md64=' + window.btoa(JSON.stringify({ + source: source, + defaults: _.omit(defaults, 'highlight') + })); + } else { permalink.href = ''; } + } catch (__) { + permalink.href = ''; } +} + +// Build offsets for each line (lines can be wrapped) +// That's a bit dirty to process each line everytime, but ok for demo. +// Optimizations are required only for big texts. +function buildScrollMap() { + var i, offset, nonEmptyList, pos, a, b, lineHeightMap, linesCount, + acc, sourceLikeDiv, textarea = $('.source'), + _scrollMap; + + sourceLikeDiv = $('
').css({ + position: 'absolute', + visibility: 'hidden', + height: 'auto', + width: textarea[0].clientWidth, + 'font-size': textarea.css('font-size'), + 'font-family': textarea.css('font-family'), + 'line-height': textarea.css('line-height'), + 'white-space': textarea.css('white-space') + }).appendTo('body'); + + offset = $('.result-html').scrollTop() - $('.result-html').offset().top; + _scrollMap = []; + nonEmptyList = []; + lineHeightMap = []; + + acc = 0; + textarea.val().split('\n').forEach(function(str) { + var h, lh; - // Build offsets for each line (lines can be wrapped) - // That's a bit dirty to process each line everytime, but ok for demo. - // Optimizations are required only for big texts. - function buildScrollMap() { - var i, offset, nonEmptyList, pos, a, b, lineHeightMap, linesCount, - acc, sourceLikeDiv, textarea = $('.source'), - _scrollMap; - - sourceLikeDiv = $('
').css({ - position: 'absolute', - visibility: 'hidden', - height: 'auto', - width: textarea[0].clientWidth, - 'font-size': textarea.css('font-size'), - 'font-family': textarea.css('font-family'), - 'line-height': textarea.css('line-height'), - 'white-space': textarea.css('white-space') - }).appendTo('body'); - - offset = $('.result-html').scrollTop() - $('.result-html').offset().top; - _scrollMap = []; - nonEmptyList = []; - lineHeightMap = []; - - acc = 0; - textarea.val().split('\n').forEach(function(str) { - var h, lh; - - lineHeightMap.push(acc); - - if (str.length === 0) { - acc++; - return; - } - - sourceLikeDiv.text(str); - h = parseFloat(sourceLikeDiv.css('height')); - lh = parseFloat(sourceLikeDiv.css('line-height')); - acc += Math.round(h / lh); - }); - sourceLikeDiv.remove(); lineHeightMap.push(acc); - linesCount = acc; - for (i = 0; i < linesCount; i++) { _scrollMap.push(-1); } + if (str.length === 0) { + acc++; + return; + } - nonEmptyList.push(0); - _scrollMap[0] = 0; + sourceLikeDiv.text(str); + h = parseFloat(sourceLikeDiv.css('height')); + lh = parseFloat(sourceLikeDiv.css('line-height')); + acc += Math.round(h / lh); + }); + sourceLikeDiv.remove(); + lineHeightMap.push(acc); + linesCount = acc; - $('.line').each(function(n, el) { - var $el = $(el), t = $el.data('line'); - if (t === '') { return; } - t = lineHeightMap[t]; - if (t !== 0) { nonEmptyList.push(t); } - _scrollMap[t] = Math.round($el.offset().top + offset); - }); + for (i = 0; i < linesCount; i++) { _scrollMap.push(-1); } - nonEmptyList.push(linesCount); - _scrollMap[linesCount] = $('.result-html')[0].scrollHeight; + nonEmptyList.push(0); + _scrollMap[0] = 0; - pos = 0; - for (i = 1; i < linesCount; i++) { - if (_scrollMap[i] !== -1) { - pos++; - continue; - } + $('.line').each(function(n, el) { + var $el = $(el), t = $el.data('line'); + if (t === '') { return; } + t = lineHeightMap[t]; + if (t !== 0) { nonEmptyList.push(t); } + _scrollMap[t] = Math.round($el.offset().top + offset); + }); - a = nonEmptyList[pos]; - b = nonEmptyList[pos + 1]; - _scrollMap[i] = Math.round((_scrollMap[b] * (i - a) + _scrollMap[a] * (b - i)) / (b - a)); + nonEmptyList.push(linesCount); + _scrollMap[linesCount] = $('.result-html')[0].scrollHeight; + + pos = 0; + for (i = 1; i < linesCount; i++) { + if (_scrollMap[i] !== -1) { + pos++; + continue; } - return _scrollMap; + a = nonEmptyList[pos]; + b = nonEmptyList[pos + 1]; + _scrollMap[i] = Math.round((_scrollMap[b] * (i - a) + _scrollMap[a] * (b - i)) / (b - a)); } - // Synchronize scroll position from source to result - var syncResultScroll = _.debounce(function () { - var textarea = $('.source'), - lineHeight = parseFloat(textarea.css('line-height')), - lineNo, posTo; - - lineNo = Math.floor(textarea.scrollTop() / lineHeight); - if (!scrollMap) { scrollMap = buildScrollMap(); } - posTo = scrollMap[lineNo]; - $('.result-html').stop(true).animate({ - scrollTop: posTo - }, 100, 'linear'); - }, 50, { maxWait: 50 }); - - // Synchronize scroll position from result to source - var syncSrcScroll = _.debounce(function () { - var resultHtml = $('.result-html'), - scrollTop = resultHtml.scrollTop(), - textarea = $('.source'), - lineHeight = parseFloat(textarea.css('line-height')), - lines, - i, - line; - - if (!scrollMap) { scrollMap = buildScrollMap(); } - - lines = Object.keys(scrollMap); - - if (lines.length < 1) { - return; - } - - line = lines[0]; + return _scrollMap; +} + +// Synchronize scroll position from source to result +var syncResultScroll = _.debounce(function () { + var textarea = $('.source'), + lineHeight = parseFloat(textarea.css('line-height')), + lineNo, posTo; + + lineNo = Math.floor(textarea.scrollTop() / lineHeight); + if (!scrollMap) { scrollMap = buildScrollMap(); } + posTo = scrollMap[lineNo]; + $('.result-html').stop(true).animate({ + scrollTop: posTo + }, 100, 'linear'); +}, 50, { maxWait: 50 }); + +// Synchronize scroll position from result to source +var syncSrcScroll = _.debounce(function () { + var resultHtml = $('.result-html'), + scrollTop = resultHtml.scrollTop(), + textarea = $('.source'), + lineHeight = parseFloat(textarea.css('line-height')), + lines, + i, + line; + + if (!scrollMap) { scrollMap = buildScrollMap(); } + + lines = Object.keys(scrollMap); + + if (lines.length < 1) { + return; + } - for (i = 1; i < lines.length; i++) { - if (scrollMap[lines[i]] < scrollTop) { - line = lines[i]; - continue; - } + line = lines[0]; - break; + for (i = 1; i < lines.length; i++) { + if (scrollMap[lines[i]] < scrollTop) { + line = lines[i]; + continue; } - textarea.stop(true).animate({ - scrollTop: lineHeight * line - }, 100, 'linear'); - }, 50, { maxWait: 50 }); + break; + } - ////////////////////////////////////////////////////////////////////////////// - // Init on page load - // - $(function() { - // highlight snippet - if (window.hljs) { - $('pre.code-sample code').each(function(i, block) { - window.hljs.highlightBlock(block); - }); - } + textarea.stop(true).animate({ + scrollTop: lineHeight * line + }, 100, 'linear'); +}, 50, { maxWait: 50 }); + +////////////////////////////////////////////////////////////////////////////// +// Init on page load +// +$(function() { + // highlight snippet + if (window.hljs) { + $('pre.code-sample code').each(function(i, block) { + window.hljs.highlightBlock(block); + }); + } - // Restore content if opened by permalink - if (location.hash && /^(#md=|#md64=)/.test(location.hash)) { - try { - var cfg; - - if (/^#md64=/.test(location.hash)) { - cfg = JSON.parse(window.atob(location.hash.slice(6))); - } else { - // Legacy mode for old links. Those become broken in github posts, - // so we switched to base64 encoding. - cfg = JSON.parse(decodeURIComponent(location.hash.slice(4))); - } + // Restore content if opened by permalink + if (location.hash && /^(#md=|#md64=)/.test(location.hash)) { + try { + var cfg; - if (_.isString(cfg.source)) { - $('.source').val(cfg.source); - } + if (/^#md64=/.test(location.hash)) { + cfg = JSON.parse(window.atob(location.hash.slice(6))); + } else { + // Legacy mode for old links. Those become broken in github posts, + // so we switched to base64 encoding. + cfg = JSON.parse(decodeURIComponent(location.hash.slice(4))); + } - var opts = _.isObject(cfg.defaults) ? cfg.defaults : {}; + if (_.isString(cfg.source)) { + $('.source').val(cfg.source); + } - // copy config to defaults, but only if key exists - // and value has the same type - _.forOwn(opts, function (val, key) { - if (!_.has(defaults, key)) { return; } + var opts = _.isObject(cfg.defaults) ? cfg.defaults : {}; - // Legacy, for old links - if (key === '_src') { - defaults._view = val ? 'src' : 'html'; - return; - } + // copy config to defaults, but only if key exists + // and value has the same type + _.forOwn(opts, function (val, key) { + if (!_.has(defaults, key)) { return; } - if ((_.isBoolean(defaults[key]) && _.isBoolean(val)) || - (_.isString(defaults[key]) && _.isString(val))) { - defaults[key] = val; - } - }); + // Legacy, for old links + if (key === '_src') { + defaults._view = val ? 'src' : 'html'; + return; + } - // sanitize for sure - if ([ 'html', 'src', 'debug' ].indexOf(defaults._view) === -1) { - defaults._view = 'html'; + if ((_.isBoolean(defaults[key]) && _.isBoolean(val)) || + (_.isString(defaults[key]) && _.isString(val))) { + defaults[key] = val; } - } catch (__) {} - } + }); - // Activate tooltips - $('._tip').tooltip({ container: 'body' }); + // sanitize for sure + if ([ 'html', 'src', 'debug' ].indexOf(defaults._view) === -1) { + defaults._view = 'html'; + } + } catch (__) {} + } - // Set default option values and option listeners - _.forOwn(defaults, function (val, key) { - if (key === 'highlight') { return; } + // Activate tooltips + $('._tip').tooltip({ container: 'body' }); - var el = document.getElementById(key); + // Set default option values and option listeners + _.forOwn(defaults, function (val, key) { + if (key === 'highlight') { return; } - if (!el) { return; } + var el = document.getElementById(key); - var $el = $(el); + if (!el) { return; } - if (_.isBoolean(val)) { - $el.prop('checked', val); - $el.on('change', function () { - var value = Boolean($el.prop('checked')); - setOptionClass(key, value); - defaults[key] = value; - mdInit(); - updateResult(); - }); - setOptionClass(key, val); + var $el = $(el); - } else { - $(el).val(val); - $el.on('change update keyup', function () { - defaults[key] = String($(el).val()); - mdInit(); - updateResult(); - }); - } - }); + if (_.isBoolean(val)) { + $el.prop('checked', val); + $el.on('change', function () { + var value = Boolean($el.prop('checked')); + setOptionClass(key, value); + defaults[key] = value; + mdInit(); + updateResult(); + }); + setOptionClass(key, val); + + } else { + $(el).val(val); + $el.on('change update keyup', function () { + defaults[key] = String($(el).val()); + mdInit(); + updateResult(); + }); + } + }); - setResultView(defaults._view); + setResultView(defaults._view); - mdInit(); - permalink = document.getElementById('permalink'); + mdInit(); + permalink = document.getElementById('permalink'); - // Setup listeners - $('.source').on('keyup paste cut mouseup', _.debounce(updateResult, 300, { maxWait: 500 })); + // Setup listeners + $('.source').on('keyup paste cut mouseup', _.debounce(updateResult, 300, { maxWait: 500 })); - $('.source').on('touchstart mouseover', function () { - $('.result-html').off('scroll'); - $('.source').on('scroll', syncResultScroll); - }); + $('.source').on('touchstart mouseover', function () { + $('.result-html').off('scroll'); + $('.source').on('scroll', syncResultScroll); + }); - $('.result-html').on('touchstart mouseover', function () { - $('.source').off('scroll'); - $('.result-html').on('scroll', syncSrcScroll); - }); + $('.result-html').on('touchstart mouseover', function () { + $('.source').off('scroll'); + $('.result-html').on('scroll', syncSrcScroll); + }); + + $('.source-clear').on('click', function (event) { + $('.source').val(''); + updateResult(); + event.preventDefault(); + }); - $('.source-clear').on('click', function (event) { - $('.source').val(''); + $(document).on('click', '[data-result-as]', function (event) { + var view = $(this).data('resultAs'); + if (view) { + setResultView(view); + // 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(); - } - }); - - // Need to recalculate line positions on window resize - $(window).on('resize', function () { - scrollMap = null; - }); + } + }); - updateResult(); + // Need to recalculate line positions on window resize + $(window).on('resize', function () { + scrollMap = null; }); -})(); + + updateResult(); +});