ie11 support, grid bug fix

2020-01-23 22:00:38 +09:00 · 2020-01-23 22:00:38 +09:00 · 541bbd576d
parent 45fbc4c86d
commit 541bbd576d
17 changed files with 281 additions and 69 deletions
--- a/assets/sass/base/_reset.scss
+++ b/assets/sass/base/_reset.scss
@ -121,6 +121,7 @@ dfn {
 figcaption {  
  font-style: italic;
  font-size: 0.9rem;
+  margin-top: 0.5rem;
  margin-bottom: 1rem;
  @include themify($themes) {
    color: themed("figcaption-color");
--- a/assets/sass/components/_bio.scss
+++ b/assets/sass/components/_bio.scss
@ -5,11 +5,13 @@
  @include flex-direction(column);

  width: 100%;
+  max-width: 928px;
  font-family: $title-font;

  &__photo {
    border-radius: 0.25rem;
    width: 100%;
+    max-width: 250px;
    height: auto;
    @include box-shadow(0, 2px, 4px, 0, rgba(0, 0, 0, 0.25));
    @include animation('slide-in-down-little .2s .6s 1 ease-in both');
--- a/assets/sass/components/_ie.scss
+++ b/assets/sass/components/_ie.scss
@ -0,0 +1,44 @@
+@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+  .header {
+    padding-top: 3rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .showcase {
+    &__nav {
+      margin-top: 1.5rem;
+    }
+
+    &__box {
+      min-width: 270px;
+    }
+  }
+
+  .navbar {
+    &__slide-down {
+      svg {
+        display: block;
+        margin: auto;
+      }
+    }
+  }
+
+  .theme-mobile {
+    top: 3px;
+    right: 77px;
+  }
+
+  .copy-to-clipboard {
+    &::after {
+      content: 'copy';
+      font-family: $title-font;
+      font-size: 9px;
+      border: 1px solid #aaa;
+      border-radius: 0.125rem;
+      position: absolute;
+      padding: 0 0.1rem;
+      right: 1px;
+      top: -1px;
+    }
+  }
+}
--- a/assets/sass/components/_search.scss
+++ b/assets/sass/components/_search.scss
@ -2,6 +2,7 @@
  position: relative;
  border-radius: 0.25rem;
  height: 35px;
+  max-width: 928px;
  z-index: z('search');
  margin-bottom: 0.5rem;  
  
@ -36,7 +37,7 @@
    @include truncate($grid_main_side_width + $grid_main_side_unit);
    @include themify($themes) {
      color: themed("search-color");
-      background-color: inherit;
+      background-color: themed("search-background-color");
      @include input-placeholder {
        font-family: $title-font;
        color: themed("search-placeholder-color");
@ -89,10 +90,6 @@
 }

 #search-results {
-  @include themify($themes) {
-    // @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
-  }
-  
  &.dropdown {
    display: none;
    &.is-active {
@ -143,6 +140,8 @@

 .mobile-search {
  position: absolute;
+  top: 0;
+  left: 0;
  z-index: z('modal');
  width: 100%;
  overflow: hidden;
@ -169,6 +168,7 @@
      height: $grid_navbar_height;
      cursor: pointer;
      position: absolute;
+      top: 0;
      right: 0;

      @include flexbox();
@ -203,7 +203,7 @@
  }

  &__body {
-    width: 100%;
+    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    
--- a/assets/sass/components/_summary.scss
+++ b/assets/sass/components/_summary.scss
@ -79,6 +79,8 @@

 .summary-classic {
  padding: 0 1rem;
+  @include flexbox();
+  @include flex-direction(column);
  @include animation('slide-in-down .2s .3s 1 ease-in both');

  .title {
@ -116,6 +118,8 @@
  }

  &__content {
+    width: 100%;
+    
    @include flexbox();
    @include flex-direction(column);
    @include justify-content(flex-start);
@ -142,7 +146,7 @@
      padding: 0.25rem;
      margin-right: .5rem;
      
-      @include transition(all, 0.25s, ease-in);
+      @include transition(all, 0.2s, ease-out);
      @include align-self(center);
      @include on-event {
        @include box-shadow(1px, 1px, 3px, 0px, rgba(0, 0, 0, 0.25));
--- a/assets/sass/layout/_footer.scss
+++ b/assets/sass/layout/_footer.scss
@ -65,8 +65,15 @@
      border: none;
      width: 100%;
      height: 100%;
-      color: inherit;
-      background-color: inherit;
+      
+      @include themify($themes) {
+        color: themed('gtt-color');
+        background-color: themed('gtt-background-color');
+        @include on-event {
+          color: themed('gtt-hover-color');
+          background-color: themed('gtt-hover-background-color');
+        }
+      }
    }

    &-content {
--- a/assets/sass/layout/_navigation.scss
+++ b/assets/sass/layout/_navigation.scss
@ -26,6 +26,13 @@
  }

  &__slide-down {
+    @include themify($themes) {
+      background-color: themed('navbar-background-color');
+      @include on-event {
+        background-color: themed('navbar-menu-hover-background-color');
+      }
+    }
+    
    @media only screen and (min-width: 769px) {
      @for $i from 1 through 8 {
        &:nth-child(#{$i}) {
@ -93,7 +100,6 @@
        }        
      }

-      // Modifers
      &.is-active {
        display: block;
        span {
@ -205,13 +211,15 @@

    &.is-active {
      position: absolute;
-      @include flexbox();
-      @include flex-direction(column);
-      @include align-items(flex-start);
-      top: 100%;
+      top: $grid_navbar_height;
+      left: 0;
      width: 100%;
      height: auto;
      overflow: hidden;
+
+      @include flexbox();
+      @include flex-direction(column);
+      @include align-items(flex-start);
      @include themify($themes) {        
        border-top: 1px solid themed('navbar-border-bottom-color');
        background-color: themed('navbar-mobile-background-color');
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -71,6 +71,7 @@ $cursive-font: {{ .Site.Data.font.cursive_font }};
@import 'components/box';
@import 'components/modal';
@import 'components/tab';
+@import 'components/ie';

@import 'pages/404';
@import 'pages/about';
--- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
+++ b/exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -4,6 +4,7 @@
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ block "title" . }}{{ .Title }} – {{ .Site.Title }}{{ end }}</title>
    {{ partial "head/scripts" . }}    
    {{ partialCached "head/styles" . }}
@ -17,7 +18,7 @@
    <script>
        var localTheme = localStorage.getItem('theme');
        if (localTheme) {
-            document.getElementById('root').className = `theme__${localTheme}`;
+            document.getElementById('root').className = 'theme__' + localTheme;
        }        
    </script>    
    
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -33,6 +33,9 @@
 <script>
    {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
    var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
+    {{ $enableSidebar:= .Site.Params.enableSidebar }}
+    var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
+
    var listMainElem = document.querySelector('.list__main');
    var listSideElem = document.querySelector('.list__sidebar');

@ -46,16 +49,38 @@
    }
    enquire.register("screen and (max-width: 769px)", {
        match: function () {
-            listMainElem.classList.remove(gridBig);
-            listMainElem.classList.add(gridFull);
-            listSideElem.classList.remove(gridSmall);
-            listSideElem.classList.add('hide');
+            if (enableSidebar) {
+                listMainElem.classList.remove(gridBig);
+                listMainElem.classList.add(gridFull);
+                listSideElem.classList.remove(gridSmall);
+                listSideElem.classList.add('hide');
+            } else {
+                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+                    listMainElem.classList.remove(gridBig);
+                    listMainElem.classList.add(gridFull);
+                }
+
+                if (listSideElem && !listSideElem.classList.contains('hide')) {
+                    listSideElem.classList.add('hide');
+                }
+            }
        },
        unmatch: function () {
-            listMainElem.classList.remove(gridFull);
-            listMainElem.classList.add(gridBig);
-            listSideElem.classList.add(gridSmall);
-            listSideElem.classList.remove('hide');
+            if (enableSidebar) {
+                listMainElem.classList.remove(gridFull);
+                listMainElem.classList.add(gridBig);
+                listSideElem.classList.add(gridSmall);
+                listSideElem.classList.remove('hide');
+            } else {
+                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+                    listMainElem.classList.remove(gridBig);
+                    listMainElem.classList.add(gridFull);
+                }
+
+                if (listSideElem && !listSideElem.classList.contains('hide')) {
+                    listSideElem.classList.add('hide');
+                }
+            }

            document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
            document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@ -32,6 +32,9 @@
 <script>
  {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
  var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
+  {{ $enableSidebar:= .Site.Params.enableSidebar }}
+  var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
+
  var listMainElem = document.querySelector('.list__main');
  var listSideElem = document.querySelector('.list__sidebar');

@ -46,16 +49,38 @@

  enquire.register("screen and (max-width: 769px)", {
    match: function () {
-      listMainElem.classList.remove(gridBig);
-      listMainElem.classList.add(gridFull);
-      listSideElem.classList.remove(gridSmall);
-      listSideElem.classList.add('hide');
+      if (enableSidebar) {
+        listMainElem.classList.remove(gridBig);
+        listMainElem.classList.add(gridFull);
+        listSideElem.classList.remove(gridSmall);
+        listSideElem.classList.add('hide');
+      } else {
+        if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+          listMainElem.classList.remove(gridBig);
+          listMainElem.classList.add(gridFull);
+        }
+
+        if (listSideElem && !listSideElem.classList.contains('hide')) {
+          listSideElem.classList.add('hide');
+        }
+      }
    },
    unmatch: function () {
-      listMainElem.classList.remove(gridFull);
-      listMainElem.classList.add(gridBig);
-      listSideElem.classList.add(gridSmall);
-      listSideElem.classList.remove('hide');
+      if (enableSidebar) {
+        listMainElem.classList.remove(gridFull);
+        listMainElem.classList.add(gridBig);
+        listSideElem.classList.add(gridSmall);
+        listSideElem.classList.remove('hide');
+      } else {
+        if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+          listMainElem.classList.remove(gridBig);
+          listMainElem.classList.add(gridFull);
+        }
+
+        if (listSideElem && !listSideElem.classList.contains('hide')) {
+          listSideElem.classList.add('hide');
+        }
+      }
      
      document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
      document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
--- a/layouts/index.html
+++ b/layouts/index.html
@ -30,6 +30,9 @@
 <script>
    {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
    var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
+    {{ $enableSidebar:= .Site.Params.enableSidebar }}
+    var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
+    
    var listMainElem = document.querySelector('.list__main');
    var listSideElem = document.querySelector('.list__sidebar');

@ -44,16 +47,39 @@

    enquire.register("screen and (max-width: 769px)", {
        match: function () {
-            listMainElem.classList.remove(gridBig);
-            listMainElem.classList.add(gridFull);
-            listSideElem.classList.remove(gridSmall);
-            listSideElem.classList.add('hide');
+            if (enableSidebar) {
+                listMainElem.classList.remove(gridBig);
+                listMainElem.classList.add(gridFull);
+                listSideElem.classList.remove(gridSmall);
+                listSideElem.classList.add('hide');
+            } else {
+                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+                    listMainElem.classList.remove(gridBig);
+                    listMainElem.classList.add(gridFull);
+                }
+
+                if (listSideElem && !listSideElem.classList.contains('hide')) {
+                    listSideElem.classList.add('hide');
+                }
+            }
+            
        },
        unmatch: function () {
-            listMainElem.classList.remove(gridFull);
-            listMainElem.classList.add(gridBig);
-            listSideElem.classList.add(gridSmall);
-            listSideElem.classList.remove('hide');
+            if (enableSidebar) {
+                listMainElem.classList.remove(gridFull);
+                listMainElem.classList.add(gridBig);
+                listSideElem.classList.add(gridSmall);
+                listSideElem.classList.remove('hide');
+            } else {
+                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+                    listMainElem.classList.remove(gridBig);
+                    listMainElem.classList.add(gridFull);
+                }
+
+                if (listSideElem && !listSideElem.classList.contains('hide')) {
+                    listSideElem.classList.add('hide');
+                }
+            }

            if (document.getElementsByClassName('navbar__burger')[0]) {
                document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
--- a/layouts/partials/body/photoswipe.html
+++ b/layouts/partials/body/photoswipe.html
@ -122,7 +122,7 @@ document.addEventListener('DOMContentLoaded', function () {
  }

  MicroModal.init({
-    onClose: () => {
+    onClose: function () {
      if (mySwipe) {
        mySwipe.kill();
        mySwipe = null;
--- a/layouts/partials/body/share.html
+++ b/layouts/partials/body/share.html
@ -31,7 +31,7 @@
          {{ else if eq (lower .) "tumblr" }}
            <a href="http://tumblr.com/widgets/share/tool?canonicalUrl={{ $ctx.Permalink | absLangURL }}&data-title={{ $ctx.Title }}&data-content={{ $ctx.Description }}" class="donation__item" target="_blank" rel="noreferer">
              {{ partial "svgs/share/tumblr.svg" (dict "width" 22 "height" 22) }}
-              {{ i18n "linkedin" | default "LinkedIn" }}
+              {{ i18n "tumblr" | default "Tumblr" }}
            </a>
          {{ else if eq (lower .) "weibo" }}
            <a href="javascript:void(function(){var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://service.weibo.com/share/share.php?url='+e(d.location.href)+'&title='+e(d.title),x=function(){if(!window.open(r,'weibo','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()" class="donation__item" target="_blank" rel="noreferer">
--- a/layouts/partials/head/scripts.html
+++ b/layouts/partials/head/scripts.html
@ -20,6 +20,61 @@
 <script>
  "use strict";

+  // ========================== poiyfill ==========================
+  // forEach
+  if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+  }
+
+  // includes
+  if (!String.prototype.includes) {
+    String.prototype.includes = function (search, start) {
+      'use strict';
+
+      if (search instanceof RegExp) {
+        throw TypeError('first argument must not be a RegExp');
+      }
+      if (start === undefined) { start = 0; }
+      return this.indexOf(search, start) !== -1;
+    };
+  }
+
+  // append
+  Document.prototype.append = Element.prototype.append = function append() {
+    this.appendChild(_mutation(arguments));
+  };
+  function _mutation(nodes) {
+    if (!nodes.length) {
+      throw new Error('DOM Exception 8');
+    } else if (nodes.length === 1) {
+      return typeof nodes[0] === 'string' ? document.createTextNode(nodes[0]) : nodes[0];
+    } else {
+      var
+      fragment = document.createDocumentFragment(),
+      length = nodes.length,
+      index = -1,
+      node;
+
+      while (++index < length) {
+        node = nodes[index];
+
+        fragment.appendChild(typeof node === 'string' ? document.createTextNode(node) : node);
+      }
+
+      return fragment;
+    }
+  }
+
+  // startsWith
+  if (!String.prototype.startsWith) {
+    String.prototype.startsWith = function (searchString, position) {
+      position = position || 0;
+      return this.indexOf(searchString, position) === position;
+    };
+  }
+  // ===============================================================
+
+
  document.addEventListener('DOMContentLoaded', function () {
    // ============================ tab ============================
    document.querySelectorAll('.tab') ? 
@ -54,7 +109,11 @@
    var gttBtn = document.getElementById("gtt");
    gttBtn.style.display = "none";
    gttBtn.addEventListener('click', function () {
-      scrollToTop(250);
+      if (window.document.documentMode) {
+        document.documentElement.scrollTop = 0;
+      } else {
+        scrollToTop(250);
+      }
    });

    function scrollToTop(scrollDuration) {
@ -148,7 +207,7 @@
                });
              }) : null;

-              var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
+              var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
              if (curElem && curElem.nextElementSibling) {
                curElem.nextElementSibling.style.display = 'block';
              }
@ -193,7 +252,7 @@
                });
              });

-              var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
+              var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
              if (curElem && curElem.nextElementSibling) {
                curElem.nextElementSibling.style.display = 'block';
              }
@ -222,6 +281,8 @@
  // ========================== navbar ==========================
    var navbarBurgerElem = document.querySelector('.navbar__burger');
    var navbarMenuElem = document.querySelector('.navbar__menu');
+    console.log(navbarBurgerElem);
+    console.log(navbarMenuElem);
    navbarBurgerElem ?
    navbarBurgerElem.addEventListener('click', function () {
      if (navbarBurgerElem.classList.contains('is-active')) {
@ -286,7 +347,8 @@

    mobileSearchInputElem ? 
    mobileSearchInputElem.addEventListener('keydown', function(e) {
-      if (e.key === 'Escape') {
+      var keyCode = e.which || e.keyCode;
+      if (e.key === 'Escape' || keyCode === 27) {
        if (mobileSearchContainer) {
          mobileSearchContainer.style.display = 'none';
        }
@ -332,7 +394,7 @@
        localStorage.setItem('theme', selectedThemeVariant);

        rootEleme.removeAttribute('class');
-        rootEleme.classList.add(`theme__${selectedThemeVariant}`);
+        rootEleme.classList.add('theme__' + selectedThemeVariant);
        selectThemeElem.forEach(function(rootElem) {
          rootElem.querySelectorAll('a').forEach(function (elem) {
            if (elem.classList) {
@ -445,7 +507,7 @@
          });
        }
        else {
-          console.error(`[${xhr.status}]Error:`, xhr.statusText);
+          console.error('[' + xhr.status + ']Error:', xhr.statusText);
        }
      };
      xhr.send();
@ -464,7 +526,7 @@
          var item = document.createElement('a');
          item.setAttribute('href', result.uri);
          item.setAttribute('class', 'dropdown-item');
-          item.innerHTML = `<div class="menu-item"><div class="menu-item__title">📄 ${result.title}</div><div class="menu-item__desc">${result.description ? result.description : result.content}</div></div>`;
+          item.innerHTML = '<div class="menu-item"><div class="menu-item__title">📄 ' + result.title + '</div><div class="menu-item__desc">' + (result.description ? result.description : result.content) + '</div></div>';
          content.appendChild(item);
        });
      } else {
@ -495,7 +557,7 @@
          var item = document.createElement('a');
          item.setAttribute('href', result.item.uri);
          item.setAttribute('class', 'dropdown-item');
-          item.innerHTML = `<div class="menu-item"><div class="menu-item__title">📄 ${generateHighlightedText(result.item.title, result.matches[0].indices)}</div><div class="menu-item__desc">${result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : ''}</div></div>`;
+          item.innerHTML = '<div class="menu-item"><div class="menu-item__title">📄 ' + generateHighlightedText(result.item.title, result.matches[0].indices) + '</div><div class="menu-item__desc">' + (result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : '') + '</div></div>';
          content.appendChild(item);
        });
      } else {
@ -523,7 +585,7 @@
        results.forEach(function (result) {
          var item = document.createElement('a');
          item.setAttribute('href', result.uri);
-          item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ${result.title}</div><div class="mobile-search__item--desc">${result.description ? result.description : result.content}</div></div>`;
+          item.innerHTML = '<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ' + result.title + '</div><div class="mobile-search__item--desc">' + (result.description ? result.description : result.content) + '</div></div>';
          content.appendChild(item);
        });
      } else {
@ -548,7 +610,7 @@
        results.forEach(function (result) {
          var item = document.createElement('a');
          item.setAttribute('href', result.item.uri);
-          item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ${generateHighlightedText(result.item.title, result.matches[0].indices)}</div><div class="mobile-search__item--desc">${result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : ''}</div></div>`;
+          item.innerHTML = '<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ' + generateHighlightedText(result.item.title, result.matches[0].indices) + '</div><div class="mobile-search__item--desc">' + (result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : '') + '</div></div>';
          content.appendChild(item);
        });
      } else {
@ -594,6 +656,7 @@
    var searchElem = document.getElementById('search');
    var searchMobile = document.getElementById('search-mobile');

+    searchElem ? 
    searchElem.addEventListener('input', function(e) {
      if (!e.target.value) {
        document.getElementById('search-results').setAttribute('class', 'dropdown');
@ -611,8 +674,9 @@
      } else {
        renderSearchResults(results);
      }
-    });
+    }) : null;

+    searchElem ? 
    searchElem.addEventListener('blur', function() {
      if (window.innerWidth < 770) {
        return null;
@ -620,8 +684,9 @@
      setTimeout(function () {
        document.getElementById('search-results').setAttribute('class', 'dropdown');
      }, 100);
-    });
+    }) : null;

+    searchElem ? 
    searchElem.addEventListener('click', function(e) {
      if (window.innerWidth < 770) {
        return null;
@ -638,7 +703,7 @@
      } else {
        renderSearchResults(results);
      }
-    });
+    }) : null;
    
    function indexInParent(node) {
      var children = node.parentNode.childNodes;
@ -656,14 +721,16 @@
    var items = null;
    var searchContainerMaxHeight = 350;

+    searchElem ? 
    searchElem.addEventListener('keydown', function(e) {
      if (window.innerWidth < 770) {
        return null;
      }

      var items = document.querySelectorAll('#search-menu .dropdown-item');
+      var keyCode = e.which || e.keyCode;
      
-      if (e.key === 'ArrowDown') {
+      if (e.key === 'ArrowDown' || keyCode === 40) {
        if (activeIndex === null) {
          activeIndex = 0;
          items[activeIndex].classList.remove('is-active');
@ -679,7 +746,7 @@
        } else if (activeIndex === 0) {
          document.querySelector(".search-content").scrollTop = 0;
        }
-      } else if (e.key === 'ArrowUp') {
+      } else if (e.key === 'ArrowUp' || keyCode === 38) {
        if (activeIndex === null) {
          activeIndex = items.length - 1;
          items[activeIndex].classList.remove('is-active');
@ -695,19 +762,20 @@
        } else {
          document.querySelector(".search-content").scrollTop = overflowedPixel + items[activeIndex].getBoundingClientRect().height;
        }
-      } else if (e.key === 'Enter') {
+      } else if (e.key === 'Enter' || keyCode === 13) {
        var currentItemLink = items[activeIndex].getAttribute('href');
        if (currentItemLink) {
          location.href = currentItemLink;
        }
-      } else if (e.key === 'Escape') {
+      } else if (e.key === 'Escape' || keyCode === 27) {
        e.target.value = null;
        if (searchResults) {
          searchResults.classList.remove('is-active');
        }
      }
-    });
+    }) : null;

+    searchMobile ? 
    searchMobile.addEventListener('input', function(e) {
      if (!e.target.value) {
        let wrap = document.getElementById('search-mobile-results');
@ -725,7 +793,7 @@
      } else {
        renderSearchResultsMobile(results);
      }
-    });
+    }) : null;
  // ============================================================
  });
 </script>
--- a/layouts/partials/script/single-script.html
+++ b/layouts/partials/script/single-script.html
@ -145,7 +145,7 @@
            });
          }) : null;

-          var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
+          var curElem = tableOfContentsElem.querySelector('[href="#' + id + '"]');
          if (curElem && curElem.nextElementSibling) {
            curElem.nextElementSibling.style.display = 'block';
          }
@ -328,8 +328,8 @@
        var isNotAllowedIncluded = false;
        var curClassName = code.getAttribute('class');

-        for (let str of notAllowedClass) {
-          if (curClassName && curClassName.startsWith(str)) {
+        for (var i = 0; i < notAllowedClass.length; i++) {
+          if (curClassName && curClassName.startsWith(notAllowedClass[i])) {
            isNotAllowedIncluded = true;
            break;
          }