refactor

weru

05.12.2020 e92f6ced66fb25a6730264a7515f76099c540679

refactor

 assets/js/functions.js

New file
@@ -0,0 +1,108 @@
const parentURL = '{{ absURL "" }}';
const doc = document.documentElement;

function isObj(obj) {
  return (obj && typeof obj === 'object' && obj !== null) ? true : false;
}

function createEl(element = 'div') {
  return document.createElement(element);
}

function emptyEl(el) {
  while(el.firstChild)
  el.removeChild(el.firstChild);
}

function elem(selector, parent = document){
  let elem = isObj(parent) ? parent.querySelector(selector) : false;
  return elem ? elem : false;
}

function elems(selector, parent = document) {
  let elems = isObj(parent) ?parent.querySelectorAll(selector) : [];
  return elems.length ? elems : false;
}

function pushClass(el, targetClass) {
  if (isObj(el) && targetClass) {
    let elClass = el.classList;
    elClass.contains(targetClass) ? false : elClass.add(targetClass);
  }
}

function deleteClass(el, targetClass) {
  if (isObj(el) && targetClass) {
    let elClass = el.classList;
    elClass.contains(targetClass) ? elClass.remove(targetClass) : false;
  }
}

function modifyClass(el, targetClass) {
  if (isObj(el) && targetClass) {
    const elClass = el.classList;
    elClass.contains(targetClass) ? elClass.remove(targetClass) : elClass.add(targetClass);
  }
}

function containsClass(el, targetClass) {
  if (isObj(el) && targetClass && el !== document ) {
    return el.classList.contains(targetClass) ? true : false;
  }
}

function isChild(node, parentClass) {
  let objectsAreValid = isObj(node) && parentClass && typeof parentClass == 'string';
  return (objectsAreValid && node.closest(parentClass)) ? true : false;
}

function elemAttribute(elem, attr, value = null) {
  if (value) {
    elem.setAttribute(attr, value);
  } else {
    value = elem.getAttribute(attr);
    return value ? value : false;
  }
}

function deleteChars(str, subs) {
  let newStr = str;
  if (Array.isArray(subs)) {
    for (let i = 0; i < subs.length; i++) {
      newStr = newStr.replace(subs[i], '');
    }
  } else {
    newStr = newStr.replace(subs, '');
  }
  return newStr;
}

function isBlank(str) {
  return (!str || str.trim().length === 0);
}

function isMatch(element, selectors) {
  if(isObj(element)) {
    if(selectors.isArray) {
      let matching = selectors.map(function(selector){
        return element.matches(selector)
      })
      return matching.includes(true);
    }
    return element.matches(selectors)
  }
}

function closestInt(goal, collection) {
  const closest = collection.reduce(function(prev, curr) {
    return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);
  });
  return closest;
}

function hasClasses(el) {
  if(isObj(el)) {
    const classes = el.classList;
    return classes.length
  }
}

 assets/js/index.js

@@ -1,113 +1,7 @@
function isObj(obj) {
  return (obj && typeof obj === 'object' && obj !== null) ? true : false;
}

function createEl(element = 'div') {
  return document.createElement(element);
}

function emptyEl(el) {
  while(el.firstChild)
  el.removeChild(el.firstChild);
}

function elem(selector, parent = document){
  let elem = isObj(parent) ? parent.querySelector(selector) : false;
  return elem ? elem : false;
}

function elems(selector, parent = document) {
  let elems = isObj(parent) ?parent.querySelectorAll(selector) : [];
  return elems.length ? elems : false;
}

function pushClass(el, targetClass) {
  if (isObj(el) && targetClass) {
    let elClass = el.classList;
    elClass.contains(targetClass) ? false : elClass.add(targetClass);
  }
}

function deleteClass(el, targetClass) {
  if (isObj(el) && targetClass) {
    let elClass = el.classList;
    elClass.contains(targetClass) ? elClass.remove(targetClass) : false;
  }
}

function modifyClass(el, targetClass) {
  if (isObj(el) && targetClass) {
    const elClass = el.classList;
    elClass.contains(targetClass) ? elClass.remove(targetClass) : elClass.add(targetClass);
  }
}

function containsClass(el, targetClass) {
  if (isObj(el) && targetClass && el !== document ) {
    return el.classList.contains(targetClass) ? true : false;
  }
}

function isChild(node, parentClass) {
  let objectsAreValid = isObj(node) && parentClass && typeof parentClass == 'string';
  return (objectsAreValid && node.closest(parentClass)) ? true : false;
}

function elemAttribute(elem, attr, value = null) {
  if (value) {
    elem.setAttribute(attr, value);
  } else {
    value = elem.getAttribute(attr);
    return value ? value : false;
  }
}

function deleteChars(str, subs) {
  let newStr = str;
  if (Array.isArray(subs)) {
    for (let i = 0; i < subs.length; i++) {
      newStr = newStr.replace(subs[i], '');
    }
  } else {
    newStr = newStr.replace(subs, '');
  }
  return newStr;
}

function isBlank(str) {
  return (!str || str.trim().length === 0);
}

function isMatch(element, selectors) {
  if(isObj(element)) {
    if(selectors.isArray) {
      let matching = selectors.map(function(selector){
        return element.matches(selector)
      })
      return matching.includes(true);
    }
    return element.matches(selectors)
  }
}

function closestInt(goal, collection) {
  const closest = collection.reduce(function(prev, curr) {
    return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);
  });
  return closest;
}

function hasClasses(el) {
  if(isObj(el)) {
    const classes = el.classList;
    return classes.length
  }
}

(function calcNavHeight(){
  const nav = elem('.nav_header');
  const navHeight = nav.offsetHeight + 25;
  const docContent = elem('main'); 
  const docContent = elem('main');
  docContent.style.paddingTop = `${navHeight}px`;
  return navHeight;
})();
@@ -118,7 +12,7 @@
    codeBlocks.forEach(function(codeBlock){
      if(!hasClasses(codeBlock)) {
        codeBlock.children.length ? false : pushClass(codeBlock, 'noClass');
      } 
      }
    });
  }
})();
@@ -144,10 +38,6 @@
};

function loadActions() {

  const parentURL = '{{ absURL "" }}';
  const doc = document.documentElement;

  (function updateDate() {
    const date = new Date();
    const year = date.getFullYear();
@@ -165,10 +55,10 @@
        pushClass(toc, 'toc');
        if(toc.children.length >= 1) {
          const tocItems = Array.from(toc.children[0].children);
  

          const previousHeading = toc.previousElementSibling;
          previousHeading.matches('.active') ? pushClass(toc, tocActive) : false;
    

          tocItems.forEach(function(item){
            pushClass(item, 'toc_item');
            pushClass(item.firstElementChild, 'toc_link');
@@ -184,13 +74,13 @@
        const pageIds = pageInternalLinks.map(function(link){
          return link.hash;
        });
        

        const linkPositions = pageIds.map(function(id){
          const heading = elem(id);
          const position = heading.offsetTop;
          return position;
        });
        

        pageInternalLinks.forEach(function(link, index){
          link.dataset.position = linkPositions[index]
        });
@@ -206,57 +96,6 @@
    }
  })();

  function searchResults(results=[], order =[]) {
    let resultsFragment = new DocumentFragment();
    let showResults = elem('.search_results');
    emptyEl(showResults);
    let index = 0
    results.forEach(function(result){
      let item = createEl('a');
      item.href = result.link;
      item.className = 'search_result';
      item.textContent = result.title;
      item.style.order = order[index];
      resultsFragment.appendChild(item);
      index += 1
    });
    
    showResults.appendChild(resultsFragment);
  }
  
  (function search(){
    const searchField = elem('.search_field');
    
    if (searchField) {
      searchField.addEventListener('input', function() {
        let rawResults = idx.search(`${ this.value }`).slice(0,6);
        let refs = rawResults.map(function(ref){
          // return id and score in a single string
          return `${ref.ref}:${ref.score}`;
        });
        
        let ids = refs.map(function(id){
          let positionOfSeparator = id.indexOf(":");
          id = id.substring(0,positionOfSeparator)
          return Number(id);
        });
        
        let scores = refs.map(function(score){
          let positionOfSeparator = score.indexOf(":");
          score = score.substring((positionOfSeparator + 1), (score.length - 1));
          return (parseFloat(score) * 50).toFixed(0);
        });
        
        let matchedDocuments = simpleIndex.filter(function(doc){
          return ids.includes(doc.id);
        });
        
        matchedDocuments.length >= 1 ? searchResults(matchedDocuments, scores) : false;
      });
    }
    
  })();

  (function markExternalLinks(){
    let links = elems('a');
    const contentWrapperClass = '.content';
@@ -265,7 +104,6 @@
        let target, rel, blank, noopener, attr1, attr2, url, isExternal;
        url = elemAttribute(link, 'href');
        isExternal = (url && typeof url == 'string' && url.startsWith('http')) && !url.startsWith(parentURL) && link.closest(contentWrapperClass);
        index === 1 ? console.log(parentURL) : false;
        if(isExternal) {
          target = 'target';
          rel = 'rel';
@@ -290,7 +128,7 @@
    results = document.getElementsByTagName(tag);
    Array.prototype.push.apply(headingNodes, results);
  });
  

  function sanitizeURL(url) {
    // removes any existing id on url
    const hash = '#';
@@ -372,11 +210,10 @@
  (function lazyLoadImages() {
    const images = elems('img');
    images.forEach(function(image){
      // supported natively by most modern browsers. 
      // supported natively by most modern browsers.
      image.loading = "lazy";
    });
 })();

}

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

 assets/js/search.js

@@ -9,7 +9,7 @@
    "id": "{{ $index }}",
    "link": "{{ .Permalink }}",
    "title": "{{ .Title }}",
    "body": "{{ .PlainWords }}",
    "body": "{{ .PlainWords }}".toLowerCase(),
  });
  {{ end }}
});
@@ -23,3 +23,85 @@
   },
  {{ end }}
];

function searchResults(results=[], order =[],query="") {
  let resultsFragment = new DocumentFragment();
  let showResults = elem('.search_results');
  emptyEl(showResults);
  let index = 0
  if(results.length) {
    let resultsTitle = createEl('h3');
    resultsTitle.className = 'search_title';
    resultsTitle.innerText = 'Quick Links';
    resultsFragment.appendChild(resultsTitle);
    results.slice(0,6).forEach(function(result){
      let item = createEl('a');
      item.href = `${result.link}?query=${query}`;
      item.className = 'search_result';
      item.textContent = result.title;
      item.style.order = order[index];
      resultsFragment.appendChild(item);
      index += 1
    });
  } else {
    showResults.innerHTML = "";
  }
  showResults.appendChild(resultsFragment);
}

function search(){
  const searchField = elem('.search_field');

  if (searchField) {
    searchField.addEventListener('input', function(event) {
      const searchTerm = this.value.trim().replaceAll(" ", " +").toLowerCase();
      if(searchTerm.length >= 3) {
        let rawResults = idx.search(`+${searchTerm}`);

        console.log(rawResults, searchTerm);

        if(rawResults.length) {

          let refs = rawResults.map(function(ref){
            // return id and score in a single string
            return `${ref.ref}:${ref.score}`;
          });

          let ids = refs.map(function(id){
            let positionOfSeparator = id.indexOf(":");
            id = id.substring(0,positionOfSeparator)
            return Number(id);
          });

          let scores = refs.map(function(score){
            let positionOfSeparator = score.indexOf(":");
            score = score.substring((positionOfSeparator + 1), (score.length - 1));
            return (parseFloat(score) * 50).toFixed(0);
          });

          console.log(scores, 'scores is');

          let matchedDocuments = simpleIndex.filter(function(doc){
            return ids.includes(doc.id);
          });

          console.log('matches are', matchedDocuments);

          matchedDocuments.length >= 1 ? searchResults(matchedDocuments, scores,searchTerm) : false;
        } else {
          searchResults();
        }

      } else {
        searchResults();
      }
    });
  }
}

let alltext = doc.innerHTML;
console.log(typeof alltext);
// doc.innerHTML = alltext.replaceAll('is', '<span class="is">is</span>');


window.addEventListener('load', () => search());