fix: compatibility in IE(9+) and Edge (#8)

- add classList shim for IE9
- refactor: for...of

layouts/partials/head.html

@@ -67,7 +67,11 @@
 {{- template "_internal/twitter_cards.html" . -}}
 
 <!-- Polyfill for old browsers -->
-{{ `<!--[if lt IE 9]>
-  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js" integrity="sha256-9uAoNWHdszsUDhSXf/rVcWOqKPfi5/8V5R4UdbZle2A=" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js" crossorigin="anonymous"></script>
+{{ `<!--[if lte IE 9]>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
+<![endif]-->` | safeHTML }}
+
+{{ `<!--[if lt IE 9]>
+  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
 <![endif]-->` | safeHTML }}

src/js/even.js

@@ -127,8 +127,8 @@ Even.fancybox = function () {
 
 Even.highlight = function () {
   const blocks = document.querySelectorAll('pre code')
-  for (const block of blocks) {
-    const classList = block.classList
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i]
     const rootElement = block.parentElement
     const lineCodes = block.innerHTML.split(/\n/).slice(0, -1)
     const lineLength = lineCodes.length
@@ -139,13 +139,13 @@ Even.highlight = function () {
     }
 
     let codeHtml = ''
-    for (const lineCode of lineCodes) {
-      codeHtml += `<div class="line">${lineCode}</div>`
+    for (let i = 0; i < lineLength; i++) {
+      codeHtml += `<div class="line">${lineCodes[i]}</div>`
     }
 
-    classList.add('highlight')
+    block.className += ' highlight'
     const figure = document.createElement('figure')
-    figure.classList = classList
+    figure.className = block.className
     figure.innerHTML = `<table><tbody><tr><td class="gutter"><pre>${codeLineHtml}</pre></td><td class="code"><pre>${codeHtml}</pre></td></tr></tbody></table>`
 
     rootElement.parentElement.replaceChild(figure, rootElement)
@@ -154,11 +154,12 @@ Even.highlight = function () {
 
 Even.beforeToc = function () {
   const links = document.querySelectorAll('#TableOfContents a')
-  for (const link of links) link.classList.add('toc-link')
+  for (let i = 0; i < links.length; i++) links[i].className += ' toc-link'
 
-  for (const num of [1, 2, 3, 4, 5, 6]) {
+  for (let num = 1; num <= 6; num++) {
     const headers = document.querySelectorAll('.post-content>h' + num)
-    for (const header of headers) {
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i]
       header.innerHTML = `<a href="#${header.id}" class="headerlink" title="${header.innerHTML}"></a>${header.innerHTML}`
     }
   }

src/js/main.js

@@ -2,9 +2,6 @@ import {Even} from './even.js'
 
 import '../css/style.scss'
 
-hljs.initHighlighting()
-Even.highlight()
-
 $(document).ready(function () {
   Even.backToTop()
   Even.mobileNavbar()
@@ -12,3 +9,6 @@ $(document).ready(function () {
   Even.toc()
   Even.fancybox()
 })
+
+hljs.initHighlighting()
+Even.highlight()

static/dist/even.min.js

@@ -1,2 +1,2 @@
-!function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};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,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";var o=n(1);n(2),hljs.initHighlighting(),o.Even.highlight(),$(document).ready(function(){o.Even.backToTop(),o.Even.mobileNavbar(),o.Even.beforeToc(),o.Even.toc(),o.Even.fancybox()})},function(e,t,n){"use strict";Object.defineProperty(t,"__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"),t=$(".mobile-navbar-icon"),n=new Slideout({panel:document.getElementById("mobile-panel"),menu:document.getElementById("mobile-menu"),padding:180,tolerance:70});n.disableTouch(),t.click(function(){n.toggle()}),n.on("beforeopen",function(){e.addClass("fixed-open"),t.addClass("icon-click").removeClass("icon-out")}),n.on("beforeclose",function(){e.removeClass("fixed-open"),t.addClass("icon-out").removeClass("icon-click")}),$("#mobile-panel").on("touchend",function(){n.isOpen()&&t.click()})},o.toc=function(){var e=$(".post-toc"),t=$(".post-footer");if(e.length){var n=e.offset().top-20,o=t.offset().top-e.height()-20,r={start:{position:"absolute",top:n},process:{position:"fixed",top:20},end:{position:"absolute",top:o}};$(window).scroll(function(){var t=$(window).scrollTop();t<n?e.css(r.start):t>o?e.css(r.end):e.css(r.process)})}var i=$(".toc-link"),a=$(".headerlink"),l=$.map(a,function(e){return $(e).offset().top});$(window).scroll(function(){for(var e=$(window).scrollTop(),t=0;t<i.length;t++){var n=t+1===i.length,o=l[t]-30,r=n?1/0:l[t+1]-30;o<e&&e<=r?$(i[t]).addClass("active"):$(i[t]).removeClass("active")}})},o.fancybox=function(){$.fancybox&&($(".post-content").each(function(){$(this).find("img").each(function(){$(this).wrap('<a class="fancybox" href="'+this.src+'" data-fancybox="gallery" data-caption="'+this.title+'"></a>')})}),$(".fancybox").fancybox({selector:".fancybox",protect:!0}))},o.highlight=function(){var e=document.querySelectorAll("pre code"),t=!0,n=!1,o=void 0;try{for(var r,i=e[Symbol.iterator]();!(t=(r=i.next()).done);t=!0){for(var a=r.value,l=a.classList,c=a.parentElement,s=a.innerHTML.split(/\n/).slice(0,-1),f=s.length,u="",d=0;d<f;d++)u+='<div class="line">'+(d+1)+"</div>";var v="",p=!0,b=!1,h=void 0;try{for(var y,m=s[Symbol.iterator]();!(p=(y=m.next()).done);p=!0){v+='<div class="line">'+y.value+"</div>"}}catch(e){b=!0,h=e}finally{try{!p&&m.return&&m.return()}finally{if(b)throw h}}l.add("highlight");var g=document.createElement("figure");g.classList=l,g.innerHTML='<table><tbody><tr><td class="gutter"><pre>'+u+'</pre></td><td class="code"><pre>'+v+"</pre></td></tr></tbody></table>",c.parentElement.replaceChild(g,c)}}catch(e){n=!0,o=e}finally{try{!t&&i.return&&i.return()}finally{if(n)throw o}}},o.beforeToc=function(){var e=document.querySelectorAll("#TableOfContents a"),t=!0,n=!1,o=void 0;try{for(var r,i=e[Symbol.iterator]();!(t=(r=i.next()).done);t=!0){r.value.classList.add("toc-link")}}catch(e){n=!0,o=e}finally{try{!t&&i.return&&i.return()}finally{if(n)throw o}}for(var a=[1,2,3,4,5,6],l=0;l<a.length;l++){var c=a[l],s=document.querySelectorAll(".post-content>h"+c),f=!0,u=!1,d=void 0;try{for(var v,p=s[Symbol.iterator]();!(f=(v=p.next()).done);f=!0){var b=v.value;b.innerHTML='<a href="#'+b.id+'" class="headerlink" title="'+b.innerHTML+'"></a>'+b.innerHTML}}catch(e){u=!0,d=e}finally{try{!f&&p.return&&p.return()}finally{if(u)throw d}}}},t.Even=o},function(e,t){}]);
+!function(e){function n(t){if(o[t])return o[t].exports;var c=o[t]={i:t,l:!1,exports:{}};return e[t].call(c.exports,c,c.exports,n),c.l=!0,c.exports}var o={};n.m=e,n.c=o,n.d=function(e,o,t){n.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:t})},n.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(o,"a",o),o},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=0)}([function(e,n,o){"use strict";var t=o(1);o(2),$(document).ready(function(){t.Even.backToTop(),t.Even.mobileNavbar(),t.Even.beforeToc(),t.Even.toc(),t.Even.fancybox()}),hljs.initHighlighting(),t.Even.highlight()},function(e,n,o){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t={};t.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})})},t.mobileNavbar=function(){var e=$("#mobile-navbar"),n=$(".mobile-navbar-icon"),o=new Slideout({panel:document.getElementById("mobile-panel"),menu:document.getElementById("mobile-menu"),padding:180,tolerance:70});o.disableTouch(),n.click(function(){o.toggle()}),o.on("beforeopen",function(){e.addClass("fixed-open"),n.addClass("icon-click").removeClass("icon-out")}),o.on("beforeclose",function(){e.removeClass("fixed-open"),n.addClass("icon-out").removeClass("icon-click")}),$("#mobile-panel").on("touchend",function(){o.isOpen()&&n.click()})},t.toc=function(){var e=$(".post-toc"),n=$(".post-footer");if(e.length){var o=e.offset().top-20,t=n.offset().top-e.height()-20,c={start:{position:"absolute",top:o},process:{position:"fixed",top:20},end:{position:"absolute",top:t}};$(window).scroll(function(){var n=$(window).scrollTop();n<o?e.css(c.start):n>t?e.css(c.end):e.css(c.process)})}var r=$(".toc-link"),i=$(".headerlink"),a=$.map(i,function(e){return $(e).offset().top});$(window).scroll(function(){for(var e=$(window).scrollTop(),n=0;n<r.length;n++){var o=n+1===r.length,t=a[n]-30,c=o?1/0:a[n+1]-30;t<e&&e<=c?$(r[n]).addClass("active"):$(r[n]).removeClass("active")}})},t.fancybox=function(){$.fancybox&&($(".post-content").each(function(){$(this).find("img").each(function(){$(this).wrap('<a class="fancybox" href="'+this.src+'" data-fancybox="gallery" data-caption="'+this.title+'"></a>')})}),$(".fancybox").fancybox({selector:".fancybox",protect:!0}))},t.highlight=function(){for(var e=document.querySelectorAll("pre code"),n=0;n<e.length;n++){for(var o=e[n],t=o.parentElement,c=o.innerHTML.split(/\n/).slice(0,-1),r=c.length,i="",a=0;a<r;a++)i+='<div class="line">'+(a+1)+"</div>";for(var l="",s=0;s<r;s++)l+='<div class="line">'+c[s]+"</div>";o.className+=" highlight";var f=document.createElement("figure");f.className=o.className,f.innerHTML='<table><tbody><tr><td class="gutter"><pre>'+i+'</pre></td><td class="code"><pre>'+l+"</pre></td></tr></tbody></table>",t.parentElement.replaceChild(f,t)}},t.beforeToc=function(){for(var e=document.querySelectorAll("#TableOfContents a"),n=0;n<e.length;n++)e[n].className+=" toc-link";for(var o=1;o<=6;o++)for(var t=document.querySelectorAll(".post-content>h"+o),c=0;c<t.length;c++){var r=t[c];r.innerHTML='<a href="#'+r.id+'" class="headerlink" title="'+r.innerHTML+'"></a>'+r.innerHTML}},n.Even=t},function(e,n){}]);
 //# sourceMappingURL=even.min.js.map