refactor main js bundle load sequence

weru

23.55.2023 8496fdfb1b5fc6ba28df6c6556ddb6b50343a21e

refactor main js bundle load sequence

Signed-off-by: weru <fromweru@gmail.com>

 assets/js/index.js

@@ -131,14 +131,11 @@
    }
  }

  const paragraphs = elems('p');
  if (paragraphs) {
    paragraphs.forEach(function(p){
  elems('p').forEach(function(p){
      const buttons = elems('.button', p);
      buttons.length > 1 ? pushClass(p, 'button_grid') : false;
    });
  }
}

function markExternalLinks() {
  let links = elems('a');
@@ -163,24 +160,8 @@
  }
}

function loadActions() {
  updateDate();
  customizeSidebar();
  markExternalLinks();

  let heading_nodes = [], results, link, icon, current, id,
  tags = ['h2', 'h3', 'h4', 'h5', 'h6'];

  current = document.URL;

  tags.forEach(function(tag){
    results = document.getElementsByTagName(tag);
    Array.prototype.push.apply(heading_nodes, results);
  });

  function sanitizeURL(url) {
    // removes any existing id on url
    const hash = '#';
    const position_of_hash = url.indexOf(hash);
    if(position_of_hash > -1 ) {
      const id = url.substr(position_of_hash, url.length - 1);
@@ -189,19 +170,27 @@
    return url
  }

function createDeepLinks() {
  let heading_nodes = [];

  [...Array(6).keys()].forEach(function(i){
    Array.prototype.push.apply(heading_nodes, document.getElementsByTagName(`h${i+1}`));
  });

  heading_nodes.forEach(function(node){
    link = createEl('a');
    icon = createEl('img');
    let link = createEl('a');
    let icon = createEl('img');
    icon.src = '{{ absURL "icons/link.svg" }}';
    link.className = 'link icon';
    link.appendChild(icon);
    id = node.getAttribute('id');
    let id = node.getAttribute('id');
    if(id) {
      link.href = `${sanitizeURL(current)}#${id}`;
      link.href = `${sanitizeURL(document.URL)}#${id}`;
      node.appendChild(link);
      pushClass(node, 'link_owner');
    }
  });
}

  function copyFeedback(parent) {
    const copy_txt = document.createElement('div');
@@ -220,7 +209,7 @@
    }
  }

  (function copyHeadingLink() {
function copyHeadingLink() {
    let deeplink, deeplinks, new_link, parent, target;
    deeplink = 'link';
    deeplinks = elems(`.${deeplink}`);
@@ -237,56 +226,9 @@
        }
      });
    }
  })();

  function prefersColor(mode){
    return `(prefers-color-scheme: ${mode})`;
  }

  function systemMode() {
    if (window.matchMedia) {
      const prefers = prefersColor(dark);
      return window.matchMedia(prefers).matches ? dark : light;
    }
    return light;
  }

  function currentMode() {
    let acceptable_chars = light + dark;
    acceptable_chars = [...acceptable_chars];
    let mode = getComputedStyle(doc).getPropertyValue(key).replace(/\"/g, '').trim();

    mode = [...mode].filter(function(letter){
      return acceptable_chars.includes(letter);
    });

    return mode.join('');
  }

  function changeMode(is_dark_mode) {
    if(is_dark_mode) {
      bank.setItem(storageKey, light)
      elemAttribute(doc, mode_data, light);
    } else {
      bank.setItem(storageKey, dark);
      elemAttribute(doc, mode_data, dark);
    }
  }

  (function lazy() {
    function lazyLoadMedia(element) {
      let media_items = elems(element);
      if(media_items) {
        Array.from(media_items).forEach(function(item) {
          item.loading = "lazy";
        });
      }
    }
    lazyLoadMedia('iframe');
    lazyLoadMedia('img');
  })();

  (function makeTablesResponsive(){
function makeTablesResponsive() {
    const tables = elems('table');
    if (tables) {
      tables.forEach(function(table){
@@ -295,42 +237,9 @@
        wrapEl(table, table_wrapper);
      });
    }
  })();

  function pickModePicture(mode) {
    elems('picture').forEach(function(picture){
      let source = picture.firstElementChild;
      const picture_data = picture.dataset;
      const images = [picture_data.lit, picture_data.dark];
      source.src = mode == 'dark' ? images[1] : images[0];
    });
  }

  function setUserColorMode(mode = false) {
    const is_dark_mode = currentMode() == dark;
    const stored_mode = bank.getItem(storageKey);
    const sys_mode = systemMode();
    if(stored_mode) {
      mode ? changeMode(is_dark_mode) : elemAttribute(doc, mode_data, stored_mode);
    } else {
      mode === true ? changeMode(is_dark_mode) : changeMode(sys_mode!==dark);
    }
    const user_mode = doc.dataset.mode;
    doc.dataset.systemmode = sys_mode;
    user_mode ? pickModePicture(user_mode) : false;
  }

  setUserColorMode();

  doc.addEventListener('click', function(event) {
    let target = event.target;
    let mode_class = 'color_choice';
    let is_mode_toggle = containsClass(target, mode_class);
    is_mode_toggle ? setUserColorMode(true) : false;
    toggleMenu(event);
  });

  (function backToTop(){
function backToTop(){
    const toTop = elem("#toTop");
    window.addEventListener("scroll", () => {
      const last_known_scroll_pos = window.scrollY;
@@ -341,7 +250,37 @@
        deleteClass(toTop, active);
      }
    });
  })();
}

function lazyLoadMedia(elements = []) {
  elements.forEach(element => {
    let media_items = elems(element);
    if(media_items) {
      Array.from(media_items).forEach(function(item) {
        item.loading = "lazy";
      });
    }
  })
}

function loadActions() {
  updateDate();
  customizeSidebar();
  markExternalLinks();
  createDeepLinks();
  copyHeadingLink();
  makeTablesResponsive();
  backToTop();

  lazyLoadMedia(['iframe', 'img']);

  doc.addEventListener('click', event => {
    let target = event.target;
    let mode_class = 'color_choice';
    let is_mode_toggle = containsClass(target, mode_class);
    is_mode_toggle ? setUserColorMode(true) : false;
    toggleMenu(event);
  });
}

window.addEventListener('load', loadActions());

 assets/js/mode.js

New file
@@ -0,0 +1,59 @@
function prefersColor(mode){
  return `(prefers-color-scheme: ${mode})`;
}

function systemMode() {
  if (window.matchMedia) {
    const prefers = prefersColor(dark);
    return window.matchMedia(prefers).matches ? dark : light;
  }
  return light;
}

function currentMode() {
  let acceptable_chars = light + dark;
  acceptable_chars = [...acceptable_chars];
  let mode = getComputedStyle(doc).getPropertyValue(key).replace(/\"/g, '').trim();

  mode = [...mode].filter(function(letter){
    return acceptable_chars.includes(letter);
  });

  return mode.join('');
}

function changeMode(is_dark_mode) {
  if(is_dark_mode) {
    bank.setItem(storageKey, light)
    elemAttribute(doc, mode_data, light);
  } else {
    bank.setItem(storageKey, dark);
    elemAttribute(doc, mode_data, dark);
  }
}


function pickModePicture(mode) {
  elems('picture').forEach(function(picture){
    let source = picture.firstElementChild;
    const picture_data = picture.dataset;
    const images = [picture_data.lit, picture_data.dark];
    source.src = mode == 'dark' ? images[1] : images[0];
  });
}

function setUserColorMode(mode = false) {
  const is_dark_mode = currentMode() == dark;
  const stored_mode = bank.getItem(storageKey);
  const sys_mode = systemMode();
  if(stored_mode) {
    mode ? changeMode(is_dark_mode) : elemAttribute(doc, mode_data, stored_mode);
  } else {
    mode === true ? changeMode(is_dark_mode) : changeMode(sys_mode!==dark);
  }
  const user_mode = doc.dataset.mode;
  doc.dataset.systemmode = sys_mode;
  user_mode ? pickModePicture(user_mode) : false;
}

setUserColorMode();

 assets/js/variables.js

@@ -59,6 +59,7 @@
const full_height = 'initial';
const highlight = 'highlight';
const highlight_wrap = 'highlight_wrap'
const hash = '#';

const light = 'light';
const dark = 'dark';

 layouts/partials/scripts/bundle.html

@@ -13,6 +13,9 @@
{{- $searchPath := "js/search.js" }}
{{- $search := resources.Get $searchPath | resources.ExecuteAsTemplate $searchPath . }}

{{- $modePath := "js/mode.js" }}
{{- $mode := resources.Get $modePath | resources.ExecuteAsTemplate $modePath . }}

{{- $mainScriptPath := "js/index.js" }}
{{- $main := resources.Get $mainScriptPath | resources.ExecuteAsTemplate $mainScriptPath . }}

@@ -22,14 +25,14 @@
{{ end }}
{{- $custom := resources.Get $customScriptPath | resources.ExecuteAsTemplate $customScriptPath . }}

{{- $bundle := slice $variables $functions $code $main $fuse $search $custom | resources.Concat "js/bundle.js" | resources.Fingerprint "sha512" }}
<script src="{{ $bundle.Permalink }}"></script>
{{- $bundle := slice $variables $functions $code $mode $main $fuse $search $custom | resources.Concat "js/bundle.js" | resources.Fingerprint "sha512" }}
<script src="{{ $bundle.Permalink }}" async></script>

{{- partialCached "hooks/scripts" . -}}

{{- $sp := .Site.Params }}
{{- with $sp.customJS }}
  {{- range . -}}
    <script src="{{ . }}"></script>
    <script src="{{ . }}" async></script>
  {{- end }}
{{- end -}}