From 7043881ae2a712487c0557926d75384a9d35b6ac Mon Sep 17 00:00:00 2001 From: olOwOlo <26087907+olOwOlo@users.noreply.github.com> Date: Mon, 12 Mar 2018 21:30:47 +0800 Subject: feat: generate flowchart diagrams from code blocks (#35) --- archetypes/default.md | 5 + exampleSite/config.toml | 4 + exampleSite/content/post/js-flowchart-diagrams.md | 131 ++++++++++++++++++++++ layouts/partials/scripts.html | 13 +++ src/js/even.js | 19 ++++ src/js/main.js | 2 + static/dist/even.min.js | 2 +- static/dist/even.min.js.map | 2 +- 8 files changed, 176 insertions(+), 2 deletions(-) create mode 100644 exampleSite/content/post/js-flowchart-diagrams.md diff --git a/archetypes/default.md b/archetypes/default.md index 2b730f4..1a437f3 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -21,6 +21,11 @@ contentCopyright: false reward: false mathjax: false mathjaxEnableSingleDollar: false + +flowchartDiagrams: + enable: false + options: "" + --- diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 6376691..4e72e0a 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -101,6 +101,10 @@ copyright = "" # default: author.name ↓ # 默认为下面配 clientId = "" # Your client ID clientSecret = "" # Your client secret + [params.flowchartDiagrams]# see https://blog.olowolo.com/example-site/post/js-sequence-diagrams/ + enable = false + options = "" + [params.busuanzi] # count web traffic by busuanzi # 是否使用不蒜子统计站点访问量 enable = false siteUV = true diff --git a/exampleSite/content/post/js-flowchart-diagrams.md b/exampleSite/content/post/js-flowchart-diagrams.md new file mode 100644 index 0000000..2111c52 --- /dev/null +++ b/exampleSite/content/post/js-flowchart-diagrams.md @@ -0,0 +1,131 @@ +--- +title: "JS Flowchart Diagrams" +date: 2015-03-04T21:57:50+08:00 +draft: false + +flowchartDiagrams: + enable: true + options: "{ + 'x': 0, + 'y': 0, + 'line-width': 3, + 'line-length': 50, + 'text-margin': 10, + 'font-size': 14, + 'font-color': 'black', + 'line-color': 'black', + 'element-color': 'black', + 'fill': 'white', + 'yes-text': 'yes', + 'no-text': 'no', + 'arrow-end': 'block', + 'scale': 1, + 'i-am-a-comment-1': 'Do not use //!', + 'i-am-a-comment-2': 'style symbol types', + 'symbols': { + 'start': { + 'font-color': 'red', + 'element-color': 'green', + 'fill': 'yellow' + }, + 'end': { + 'class': 'end-element' + } + }, + 'i-am-a-comment-3': 'even flowstate support ;-)', + 'flowstate': { + 'request': {'fill': 'blue'} + } + }" +--- + +## Usage + +```flowchart +st=>start: Start|past:>http://www.google.com[blank] +e=>end: End:>http://www.google.com +op1=>operation: My Operation|past +op2=>operation: Stuff|current +sub1=>subroutine: My Subroutine|invalid +cond=>condition: Yes +or No?|approved:>http://www.google.com +c2=>condition: Good idea|rejected +io=>inputoutput: catch something...|request + +st->op1(right)->cond +cond(yes, right)->c2 +cond(no)->sub1(left)->op1 +c2(yes)->io->e +c2(no)->op2->e +``` + + + + ```flowchart + st=>start: Start|past:>http://www.google.com[blank] + e=>end: End:>http://www.google.com + op1=>operation: My Operation|past + op2=>operation: Stuff|current + sub1=>subroutine: My Subroutine|invalid + cond=>condition: Yes + or No?|approved:>http://www.google.com + c2=>condition: Good idea|rejected + io=>inputoutput: catch something...|request + + st->op1(right)->cond + cond(yes, right)->c2 + cond(no)->sub1(left)->op1 + c2(yes)->io->e + c2(no)->op2->e + ``` + +## Configuration + +Configure for all home and regular pages: + +```toml +[params.flowchartDiagrams] + enable = true + options = "" +``` + +Configure for a single post in the front matter (**Params in front matter have higher precedence**): + +```yml +flowchartDiagrams: + enable: true + options: "{ + 'x': 0, + 'y': 0, + 'line-width': 3, + 'line-length': 50, + 'text-margin': 10, + 'font-size': 14, + 'font-color': 'black', + 'line-color': 'black', + 'element-color': 'black', + 'fill': 'white', + 'yes-text': 'yes', + 'no-text': 'no', + 'arrow-end': 'block', + 'scale': 1, + 'i-am-a-comment-1': 'Do not use /​/!', + 'i-am-a-comment-2': 'style symbol types', + 'symbols': { + 'start': { + 'font-color': 'red', + 'element-color': 'green', + 'fill': 'yellow' + }, + 'end': { + 'class': 'end-element' + } + }, + 'i-am-a-comment-3': 'even flowstate support ;-)', + 'flowstate': { + 'request': {'fill': 'blue'} + } + }" +``` + +See more information from https://github.com/adrai/flowchart.js. diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index fc254b5..01e5e16 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -8,6 +8,19 @@ {{ if .Site.Params.fancybox }}{{ end }} +{{- end -}} + + +{{- if and (or .Params.flowchartDiagrams.enable (and .Site.Params.flowchartDiagrams.enable (ne .Params.flowchartDiagrams.enable false))) (or .IsPage .IsHome) -}} + + + {{- end }} diff --git a/src/js/even.js b/src/js/even.js index 0d5813a..ca83a93 100644 --- a/src/js/even.js +++ b/src/js/even.js @@ -205,4 +205,23 @@ Even._linkToc = function () { } } +Even.flowchart = function () { + if (!window.flowchart) return + + const blocks = document.querySelectorAll('pre code.language-flowchart') + for (let i = 0; i < blocks.length; i++) { + const block = blocks[i] + const rootElement = block.parentElement + + const container = document.createElement('div') + const id = `js-flowchart-diagrams-${i}` + container.id = id + container.className = 'align-center' + rootElement.parentElement.replaceChild(container, rootElement) + + const diagram = flowchart.parse(block.childNodes[0].nodeValue) + diagram.drawSVG(id, window.flowchartDiagramsOptions ? window.flowchartDiagramsOptions : {}) + } +} + export {Even} diff --git a/src/js/main.js b/src/js/main.js index 1764dfd..bae31d9 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -9,5 +9,7 @@ $(document).ready(function () { Even.fancybox() }) +Even.flowchart() + hljs.initHighlighting() Even.highlight() diff --git a/static/dist/even.min.js b/static/dist/even.min.js index a3795bf..f6e2fd8 100644 --- a/static/dist/even.min.js +++ b/static/dist/even.min.js @@ -1,2 +1,2 @@ -!function(e){var n={};function t(o){if(n[o])return n[o].exports;var c=n[o]={i:o,l:!1,exports:{}};return e[o].call(c.exports,c,c.exports,t),c.l=!0,c.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";var o=t(1);t(2),$(document).ready(function(){o.Even.backToTop(),o.Even.mobileNavbar(),o.Even.toc(),o.Even.fancybox()}),hljs.initHighlighting(),o.Even.highlight()},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o={};o.backToTop=function(){var e=$("#back-to-top");$(window).scroll(function(){$(window).scrollTop()>100?e.fadeIn(1e3):e.fadeOut(1e3)}),e.click(function(){$("body,html").animate({scrollTop:0})})},o.mobileNavbar=function(){var e=$("#mobile-navbar"),n=$(".mobile-navbar-icon"),t=new Slideout({panel:document.getElementById("mobile-panel"),menu:document.getElementById("mobile-menu"),padding:180,tolerance:70});t.disableTouch(),n.click(function(){t.toggle()}),t.on("beforeopen",function(){e.addClass("fixed-open"),n.addClass("icon-click").removeClass("icon-out")}),t.on("beforeclose",function(){e.removeClass("fixed-open"),n.addClass("icon-out").removeClass("icon-click")}),$("#mobile-panel").on("touchend",function(){t.isOpen()&&n.click()})},o._initToc=function(){var e=$(".post-toc"),n=$(".post-footer");if(e.length){var t=e.offset().top-20,o=n.offset().top-e.height()-20,c={start:{position:"absolute",top:t},process:{position:"fixed",top:20},end:{position:"absolute",top:o}};$(window).scroll(function(){var n=$(window).scrollTop();no?e.css(c.end):e.css(c.process)})}var r=$(".toc-link"),i=$(".headerlink"),a=$(".post-toc-content li"),l=$.map(i,function(e){return $(e).offset().top}),s=$.map(l,function(e){return e-30});$(window).scroll(function(){var e=$(window).scrollTop(),n=function(e,n){for(var t=0;te[t]&&n<=e[t+1])return t;return n>e[e.length-1]?e.length-1:-1}(s,e);if($(r).removeClass("active"),$(a).removeClass("has-active"),-1!==n){$(r[n]).addClass("active");for(var t=r[n].parentNode;"NAV"!==t.tagName;)$(t).addClass("has-active"),t=t.parentNode.parentNode}})},o.fancybox=function(){$.fancybox&&($(".post-content").each(function(){$(this).find("img").each(function(){$(this).wrap('')})}),$(".fancybox").fancybox({selector:".fancybox",protect:!0}))},o.highlight=function(){for(var e=document.querySelectorAll("pre code"),n=0;n'+(a+1)+"";for(var l="",s=0;s'+c[s]+"";t.className+=" highlight";var d=document.createElement("figure");d.className=t.className,d.innerHTML='
'+i+'
'+l+"
",o.parentElement.replaceChild(d,o)}},o.toc=function(){var e=document.getElementById("post-toc");if(null!==e){var n=document.getElementById("TableOfContents");null===n?e.parentNode.removeChild(e):(this._refactorToc(n),this._linkToc(),this._initToc())}},o._refactorToc=function(e){for(var n=e.children[0],t=n,o=void 0;1===t.children.length&&"UL"===(o=t.children[0].children[0]).tagName;)t=o;t!==n&&e.replaceChild(t,n)},o._linkToc=function(){for(var e=document.querySelectorAll("#TableOfContents a:first-child"),n=0;nh"+t),c=0;c'+r.innerHTML}},n.Even=o},function(e,n){}]); +!function(e){var n={};function t(o){if(n[o])return n[o].exports;var a=n[o]={i:o,l:!1,exports:{}};return e[o].call(a.exports,a,a.exports,t),a.l=!0,a.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";var o=t(1);t(2),$(document).ready(function(){o.Even.backToTop(),o.Even.mobileNavbar(),o.Even.toc(),o.Even.fancybox()}),o.Even.flowchart(),hljs.initHighlighting(),o.Even.highlight()},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o={};o.backToTop=function(){var e=$("#back-to-top");$(window).scroll(function(){$(window).scrollTop()>100?e.fadeIn(1e3):e.fadeOut(1e3)}),e.click(function(){$("body,html").animate({scrollTop:0})})},o.mobileNavbar=function(){var e=$("#mobile-navbar"),n=$(".mobile-navbar-icon"),t=new Slideout({panel:document.getElementById("mobile-panel"),menu:document.getElementById("mobile-menu"),padding:180,tolerance:70});t.disableTouch(),n.click(function(){t.toggle()}),t.on("beforeopen",function(){e.addClass("fixed-open"),n.addClass("icon-click").removeClass("icon-out")}),t.on("beforeclose",function(){e.removeClass("fixed-open"),n.addClass("icon-out").removeClass("icon-click")}),$("#mobile-panel").on("touchend",function(){t.isOpen()&&n.click()})},o._initToc=function(){var e=$(".post-toc"),n=$(".post-footer");if(e.length){var t=e.offset().top-20,o=n.offset().top-e.height()-20,a={start:{position:"absolute",top:t},process:{position:"fixed",top:20},end:{position:"absolute",top:o}};$(window).scroll(function(){var n=$(window).scrollTop();no?e.css(a.end):e.css(a.process)})}var r=$(".toc-link"),c=$(".headerlink"),i=$(".post-toc-content li"),l=$.map(c,function(e){return $(e).offset().top}),s=$.map(l,function(e){return e-30});$(window).scroll(function(){var e=$(window).scrollTop(),n=function(e,n){for(var t=0;te[t]&&n<=e[t+1])return t;return n>e[e.length-1]?e.length-1:-1}(s,e);if($(r).removeClass("active"),$(i).removeClass("has-active"),-1!==n){$(r[n]).addClass("active");for(var t=r[n].parentNode;"NAV"!==t.tagName;)$(t).addClass("has-active"),t=t.parentNode.parentNode}})},o.fancybox=function(){$.fancybox&&($(".post-content").each(function(){$(this).find("img").each(function(){$(this).wrap('')})}),$(".fancybox").fancybox({selector:".fancybox",protect:!0}))},o.highlight=function(){for(var e=document.querySelectorAll("pre code"),n=0;n'+(i+1)+"";for(var l="",s=0;s'+a[s]+"";t.className+=" highlight";var d=document.createElement("figure");d.className=t.className,d.innerHTML='
'+c+'
'+l+"
",o.parentElement.replaceChild(d,o)}},o.toc=function(){var e=document.getElementById("post-toc");if(null!==e){var n=document.getElementById("TableOfContents");null===n?e.parentNode.removeChild(e):(this._refactorToc(n),this._linkToc(),this._initToc())}},o._refactorToc=function(e){for(var n=e.children[0],t=n,o=void 0;1===t.children.length&&"UL"===(o=t.children[0].children[0]).tagName;)t=o;t!==n&&e.replaceChild(t,n)},o._linkToc=function(){for(var e=document.querySelectorAll("#TableOfContents a:first-child"),n=0;nh"+t),a=0;a'+r.innerHTML}},o.flowchart=function(){if(window.flowchart)for(var e=document.querySelectorAll("pre code.language-flowchart"),n=0;n 100) {\r\n $backToTop.fadeIn(1000)\r\n } else {\r\n $backToTop.fadeOut(1000)\r\n }\r\n })\r\n\r\n $backToTop.click(function () {\r\n $('body,html').animate({ scrollTop: 0 })\r\n })\r\n}\r\n\r\nEven.mobileNavbar = function () {\r\n const $mobileNav = $('#mobile-navbar')\r\n const $mobileNavIcon = $('.mobile-navbar-icon')\r\n const slideout = new Slideout({\r\n 'panel': document.getElementById('mobile-panel'),\r\n 'menu': document.getElementById('mobile-menu'),\r\n 'padding': 180,\r\n 'tolerance': 70\r\n })\r\n slideout.disableTouch()\r\n\r\n $mobileNavIcon.click(function () {\r\n slideout.toggle()\r\n })\r\n\r\n slideout.on('beforeopen', function () {\r\n $mobileNav.addClass('fixed-open')\r\n $mobileNavIcon.addClass('icon-click').removeClass('icon-out')\r\n })\r\n\r\n slideout.on('beforeclose', function () {\r\n $mobileNav.removeClass('fixed-open')\r\n $mobileNavIcon.addClass('icon-out').removeClass('icon-click')\r\n })\r\n\r\n $('#mobile-panel').on('touchend', function () {\r\n slideout.isOpen() && $mobileNavIcon.click()\r\n })\r\n}\r\n\r\nEven._initToc = function () {\r\n const SPACING = 20\r\n const $toc = $('.post-toc')\r\n const $footer = $('.post-footer')\r\n\r\n if ($toc.length) {\r\n const minScrollTop = $toc.offset().top - SPACING\r\n const maxScrollTop = $footer.offset().top - $toc.height() - SPACING\r\n\r\n const tocState = {\r\n start: {\r\n 'position': 'absolute',\r\n 'top': minScrollTop\r\n },\r\n process: {\r\n 'position': 'fixed',\r\n 'top': SPACING\r\n },\r\n end: {\r\n 'position': 'absolute',\r\n 'top': maxScrollTop\r\n }\r\n }\r\n\r\n $(window).scroll(function () {\r\n const scrollTop = $(window).scrollTop()\r\n\r\n if (scrollTop < minScrollTop) {\r\n $toc.css(tocState.start)\r\n } else if (scrollTop > maxScrollTop) {\r\n $toc.css(tocState.end)\r\n } else {\r\n $toc.css(tocState.process)\r\n }\r\n })\r\n }\r\n\r\n const HEADERFIX = 30\r\n const $toclink = $('.toc-link')\r\n const $headerlink = $('.headerlink')\r\n const $tocLinkLis = $('.post-toc-content li')\r\n\r\n const headerlinkTop = $.map($headerlink, function (link) {\r\n return $(link).offset().top\r\n })\r\n\r\n const headerLinksOffsetForSearch = $.map(headerlinkTop, function (offset) {\r\n return offset - HEADERFIX\r\n })\r\n\r\n const searchActiveTocIndex = function (array, target) {\r\n for (let i = 0; i < array.length - 1; i++) {\r\n if (target > array[i] && target <= array[i + 1]) return i\r\n }\r\n if (target > array[array.length - 1]) return array.length - 1\r\n return -1\r\n }\r\n\r\n $(window).scroll(function () {\r\n const scrollTop = $(window).scrollTop()\r\n const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop)\r\n\r\n $($toclink).removeClass('active')\r\n $($tocLinkLis).removeClass('has-active')\r\n\r\n if (activeTocIndex !== -1) {\r\n $($toclink[activeTocIndex]).addClass('active')\r\n let ancestor = $toclink[activeTocIndex].parentNode\r\n while (ancestor.tagName !== 'NAV') {\r\n $(ancestor).addClass('has-active')\r\n ancestor = ancestor.parentNode.parentNode\r\n }\r\n }\r\n })\r\n}\r\n\r\nEven.fancybox = function () {\r\n if ($.fancybox) {\r\n $('.post-content').each(function () {\r\n $(this).find('img').each(function () {\r\n $(this).wrap(``)\r\n })\r\n })\r\n\r\n $('.fancybox').fancybox({\r\n selector: '.fancybox',\r\n protect: true\r\n })\r\n }\r\n}\r\n\r\nEven.highlight = function () {\r\n const blocks = document.querySelectorAll('pre code')\r\n for (let i = 0; i < blocks.length; i++) {\r\n const block = blocks[i]\r\n const rootElement = block.parentElement\r\n const lineCodes = block.innerHTML.split(/\\n/)\r\n if (lineCodes[lineCodes.length - 1] === '') lineCodes.pop()\r\n const lineLength = lineCodes.length\r\n\r\n let codeLineHtml = ''\r\n for (let i = 0; i < lineLength; i++) {\r\n codeLineHtml += `
${i + 1}
`\r\n }\r\n\r\n let codeHtml = ''\r\n for (let i = 0; i < lineLength; i++) {\r\n codeHtml += `
${lineCodes[i]}
`\r\n }\r\n\r\n block.className += ' highlight'\r\n const figure = document.createElement('figure')\r\n figure.className = block.className\r\n figure.innerHTML = `
${codeLineHtml}
${codeHtml}
`\r\n\r\n rootElement.parentElement.replaceChild(figure, rootElement)\r\n }\r\n}\r\n\r\nEven.toc = function () {\r\n const tocContainer = document.getElementById('post-toc')\r\n if (tocContainer !== null) {\r\n const toc = document.getElementById('TableOfContents')\r\n if (toc === null) {\r\n // toc = true, but there are no headings\r\n tocContainer.parentNode.removeChild(tocContainer)\r\n } else {\r\n this._refactorToc(toc)\r\n this._linkToc()\r\n this._initToc()\r\n }\r\n }\r\n}\r\n\r\nEven._refactorToc = function (toc) {\r\n // when headings do not start with `h1`\r\n const oldTocList = toc.children[0]\r\n let newTocList = oldTocList\r\n let temp\r\n while (newTocList.children.length === 1 && (temp = newTocList.children[0].children[0]).tagName === 'UL') newTocList = temp\r\n\r\n if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList)\r\n}\r\n\r\nEven._linkToc = function () {\r\n const links = document.querySelectorAll('#TableOfContents a:first-child')\r\n for (let i = 0; i < links.length; i++) links[i].className += ' toc-link'\r\n\r\n for (let num = 1; num <= 6; num++) {\r\n const headers = document.querySelectorAll('.post-content>h' + num)\r\n for (let i = 0; i < headers.length; i++) {\r\n const header = headers[i]\r\n header.innerHTML = `${header.innerHTML}`\r\n }\r\n }\r\n}\r\n\r\nexport {Even}\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/even.js"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///webpack/bootstrap b58560372f9728922690","webpack:///./js/main.js","webpack:///./js/even.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","_even","$","document","ready","Even","backToTop","mobileNavbar","toc","fancybox","flowchart","hljs","initHighlighting","highlight","$backToTop","window","scroll","scrollTop","fadeIn","fadeOut","click","animate","$mobileNav","$mobileNavIcon","slideout","Slideout","panel","getElementById","menu","padding","tolerance","disableTouch","toggle","on","addClass","removeClass","isOpen","_initToc","$toc","$footer","length","minScrollTop","offset","top","maxScrollTop","height","tocState","start","position","process","end","css","$toclink","$headerlink","$tocLinkLis","headerlinkTop","map","link","headerLinksOffsetForSearch","activeTocIndex","array","target","searchActiveTocIndex","ancestor","parentNode","tagName","each","this","find","wrap","src","title","selector","protect","blocks","querySelectorAll","block","rootElement","parentElement","lineCodes","innerHTML","split","pop","lineLength","codeLineHtml","codeHtml","className","figure","createElement","replaceChild","tocContainer","removeChild","_refactorToc","_linkToc","oldTocList","children","newTocList","temp","links","num","headers","header","id","container","parse","childNodes","nodeValue","drawSVG","flowchartDiagramsOptions"],"mappings":"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","file":"even.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap b58560372f9728922690","import {Even} from './even.js'\r\n\r\nimport '../css/style.scss'\r\n\r\n$(document).ready(function () {\r\n Even.backToTop()\r\n Even.mobileNavbar()\r\n Even.toc()\r\n Even.fancybox()\r\n})\r\n\r\nEven.flowchart()\r\n\r\nhljs.initHighlighting()\r\nEven.highlight()\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/main.js","'use strict'\r\n\r\nconst Even = {}\r\n\r\nEven.backToTop = function () {\r\n const $backToTop = $('#back-to-top')\r\n\r\n $(window).scroll(function () {\r\n if ($(window).scrollTop() > 100) {\r\n $backToTop.fadeIn(1000)\r\n } else {\r\n $backToTop.fadeOut(1000)\r\n }\r\n })\r\n\r\n $backToTop.click(function () {\r\n $('body,html').animate({ scrollTop: 0 })\r\n })\r\n}\r\n\r\nEven.mobileNavbar = function () {\r\n const $mobileNav = $('#mobile-navbar')\r\n const $mobileNavIcon = $('.mobile-navbar-icon')\r\n const slideout = new Slideout({\r\n 'panel': document.getElementById('mobile-panel'),\r\n 'menu': document.getElementById('mobile-menu'),\r\n 'padding': 180,\r\n 'tolerance': 70\r\n })\r\n slideout.disableTouch()\r\n\r\n $mobileNavIcon.click(function () {\r\n slideout.toggle()\r\n })\r\n\r\n slideout.on('beforeopen', function () {\r\n $mobileNav.addClass('fixed-open')\r\n $mobileNavIcon.addClass('icon-click').removeClass('icon-out')\r\n })\r\n\r\n slideout.on('beforeclose', function () {\r\n $mobileNav.removeClass('fixed-open')\r\n $mobileNavIcon.addClass('icon-out').removeClass('icon-click')\r\n })\r\n\r\n $('#mobile-panel').on('touchend', function () {\r\n slideout.isOpen() && $mobileNavIcon.click()\r\n })\r\n}\r\n\r\nEven._initToc = function () {\r\n const SPACING = 20\r\n const $toc = $('.post-toc')\r\n const $footer = $('.post-footer')\r\n\r\n if ($toc.length) {\r\n const minScrollTop = $toc.offset().top - SPACING\r\n const maxScrollTop = $footer.offset().top - $toc.height() - SPACING\r\n\r\n const tocState = {\r\n start: {\r\n 'position': 'absolute',\r\n 'top': minScrollTop\r\n },\r\n process: {\r\n 'position': 'fixed',\r\n 'top': SPACING\r\n },\r\n end: {\r\n 'position': 'absolute',\r\n 'top': maxScrollTop\r\n }\r\n }\r\n\r\n $(window).scroll(function () {\r\n const scrollTop = $(window).scrollTop()\r\n\r\n if (scrollTop < minScrollTop) {\r\n $toc.css(tocState.start)\r\n } else if (scrollTop > maxScrollTop) {\r\n $toc.css(tocState.end)\r\n } else {\r\n $toc.css(tocState.process)\r\n }\r\n })\r\n }\r\n\r\n const HEADERFIX = 30\r\n const $toclink = $('.toc-link')\r\n const $headerlink = $('.headerlink')\r\n const $tocLinkLis = $('.post-toc-content li')\r\n\r\n const headerlinkTop = $.map($headerlink, function (link) {\r\n return $(link).offset().top\r\n })\r\n\r\n const headerLinksOffsetForSearch = $.map(headerlinkTop, function (offset) {\r\n return offset - HEADERFIX\r\n })\r\n\r\n const searchActiveTocIndex = function (array, target) {\r\n for (let i = 0; i < array.length - 1; i++) {\r\n if (target > array[i] && target <= array[i + 1]) return i\r\n }\r\n if (target > array[array.length - 1]) return array.length - 1\r\n return -1\r\n }\r\n\r\n $(window).scroll(function () {\r\n const scrollTop = $(window).scrollTop()\r\n const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop)\r\n\r\n $($toclink).removeClass('active')\r\n $($tocLinkLis).removeClass('has-active')\r\n\r\n if (activeTocIndex !== -1) {\r\n $($toclink[activeTocIndex]).addClass('active')\r\n let ancestor = $toclink[activeTocIndex].parentNode\r\n while (ancestor.tagName !== 'NAV') {\r\n $(ancestor).addClass('has-active')\r\n ancestor = ancestor.parentNode.parentNode\r\n }\r\n }\r\n })\r\n}\r\n\r\nEven.fancybox = function () {\r\n if ($.fancybox) {\r\n $('.post-content').each(function () {\r\n $(this).find('img').each(function () {\r\n $(this).wrap(``)\r\n })\r\n })\r\n\r\n $('.fancybox').fancybox({\r\n selector: '.fancybox',\r\n protect: true\r\n })\r\n }\r\n}\r\n\r\nEven.highlight = function () {\r\n const blocks = document.querySelectorAll('pre code')\r\n for (let i = 0; i < blocks.length; i++) {\r\n const block = blocks[i]\r\n const rootElement = block.parentElement\r\n const lineCodes = block.innerHTML.split(/\\n/)\r\n if (lineCodes[lineCodes.length - 1] === '') lineCodes.pop()\r\n const lineLength = lineCodes.length\r\n\r\n let codeLineHtml = ''\r\n for (let i = 0; i < lineLength; i++) {\r\n codeLineHtml += `
${i + 1}
`\r\n }\r\n\r\n let codeHtml = ''\r\n for (let i = 0; i < lineLength; i++) {\r\n codeHtml += `
${lineCodes[i]}
`\r\n }\r\n\r\n block.className += ' highlight'\r\n const figure = document.createElement('figure')\r\n figure.className = block.className\r\n figure.innerHTML = `
${codeLineHtml}
${codeHtml}
`\r\n\r\n rootElement.parentElement.replaceChild(figure, rootElement)\r\n }\r\n}\r\n\r\nEven.toc = function () {\r\n const tocContainer = document.getElementById('post-toc')\r\n if (tocContainer !== null) {\r\n const toc = document.getElementById('TableOfContents')\r\n if (toc === null) {\r\n // toc = true, but there are no headings\r\n tocContainer.parentNode.removeChild(tocContainer)\r\n } else {\r\n this._refactorToc(toc)\r\n this._linkToc()\r\n this._initToc()\r\n }\r\n }\r\n}\r\n\r\nEven._refactorToc = function (toc) {\r\n // when headings do not start with `h1`\r\n const oldTocList = toc.children[0]\r\n let newTocList = oldTocList\r\n let temp\r\n while (newTocList.children.length === 1 && (temp = newTocList.children[0].children[0]).tagName === 'UL') newTocList = temp\r\n\r\n if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList)\r\n}\r\n\r\nEven._linkToc = function () {\r\n const links = document.querySelectorAll('#TableOfContents a:first-child')\r\n for (let i = 0; i < links.length; i++) links[i].className += ' toc-link'\r\n\r\n for (let num = 1; num <= 6; num++) {\r\n const headers = document.querySelectorAll('.post-content>h' + num)\r\n for (let i = 0; i < headers.length; i++) {\r\n const header = headers[i]\r\n header.innerHTML = `${header.innerHTML}`\r\n }\r\n }\r\n}\r\n\r\nEven.flowchart = function () {\r\n if (!window.flowchart) return\r\n\r\n const blocks = document.querySelectorAll('pre code.language-flowchart')\r\n for (let i = 0; i < blocks.length; i++) {\r\n const block = blocks[i]\r\n const rootElement = block.parentElement\r\n\r\n const container = document.createElement('div')\r\n const id = `js-flowchart-diagrams-${i}`\r\n container.id = id\r\n container.className = 'align-center'\r\n rootElement.parentElement.replaceChild(container, rootElement)\r\n\r\n const diagram = flowchart.parse(block.childNodes[0].nodeValue)\r\n diagram.drawSVG(id, window.flowchartDiagramsOptions ? window.flowchartDiagramsOptions : {})\r\n }\r\n}\r\n\r\nexport {Even}\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/even.js"],"sourceRoot":""} \ No newline at end of file -- cgit v1.2.3