musora-content-services 1.0.9 → 1.0.11

package/docs/scripts/search.js

@@ -1,265 +1,99 @@
-/* global document */
-
-const searchId = 'LiBfqbJVcV';
-const searchHash = '#' + searchId;
-const searchContainer = document.querySelector('#PkfLWpAbet');
-const searchWrapper = document.querySelector('#iCxFxjkHbP');
-const searchCloseButton = document.querySelector('#VjLlGakifb');
-const searchInput = document.querySelector('#vpcKVYIppa');
-const resultBox = document.querySelector('#fWwVHRuDuN');
-
-function showResultText(text) {
-  resultBox.innerHTML = `<span class="search-result-c-text">${text}</span>`;
-}
-
-function hideSearch() {
-  // eslint-disable-next-line no-undef
-  if (window.location.hash === searchHash) {
-    // eslint-disable-next-line no-undef
-    history.go(-1);
-  }
-
-  // eslint-disable-next-line no-undef
-  window.onhashchange = null;
-
-  if (searchContainer) {
-    searchContainer.style.display = 'none';
-  }
-}
-
-function listenCloseKey(event) {
-  if (event.key === 'Escape') {
-    hideSearch();
-    // eslint-disable-next-line no-undef
-    window.removeEventListener('keyup', listenCloseKey);
-  }
-}
-
-function showSearch() {
-  try {
-    // Closing mobile menu before opening
-    // search box.
-    // It is defined in core.js
-    // eslint-disable-next-line no-undef
-    hideMobileMenu();
-  } catch (error) {
-    console.error(error);
-  }
-
-  // eslint-disable-next-line no-undef
-  window.onhashchange = hideSearch;
-
-  // eslint-disable-next-line no-undef
-  if (window.location.hash !== searchHash) {
-    // eslint-disable-next-line no-undef
-    history.pushState(null, null, searchHash);
-  }
-
-  if (searchContainer) {
-    searchContainer.style.display = 'flex';
-    // eslint-disable-next-line no-undef
-    window.addEventListener('keyup', listenCloseKey);
-  }
-
-  if (searchInput) {
-    searchInput.focus();
-  }
-}
-
-async function fetchAllData() {
-  // eslint-disable-next-line no-undef
-  const { hostname, protocol, port } = location;
-
-  // eslint-disable-next-line no-undef
-  const base = protocol + '//' + hostname + (port !== '' ? ':' + port : '') + baseURL;
-  // eslint-disable-next-line no-undef
-  const url = new URL('data/search.json', base);
-  const result = await fetch(url);
-  const { list } = await result.json();
-
-  return list;
-}
-
-// eslint-disable-next-line no-unused-vars
-function onClickSearchItem(event) {
-  const target = event.currentTarget;
-
-  if (target) {
-    const href = target.getAttribute('href') || '';
-    let elementId = href.split('#')[1] || '';
-    let element = document.getElementById(elementId);
-
-    if (!element) {
-      elementId = decodeURI(elementId);
-      element = document.getElementById(elementId);
-    }
-
-    if (element) {
-      setTimeout(function() {
-        // eslint-disable-next-line no-undef
-        bringElementIntoView(element); // defined in core.js
-      }, 100);
-    }
-  }
-}
-
-function buildSearchResult(result) {
-  let output = '';
-  const removeHTMLTagsRegExp = /(<([^>]+)>)/ig;
-  
-  for (const res of result) {
-    const { title = '', description = '' } = res.item;
-
-    const _link = res.item.link.replace('<a href="', '').replace(/">.*/, '');
-    const _title = title.replace(removeHTMLTagsRegExp, "");
-    const _description = description.replace(removeHTMLTagsRegExp, "");
-
-    output += `
-    <a onclick="onClickSearchItem(event)" href="${_link}" class="search-result-item">
-      <div class="search-result-item-title">${_title}</div>
-      <div class="search-result-item-p">${_description || 'No description available.'}</div>
-    </a>
-    `;
-  }
-
-  return output;
-}
-
-function getSearchResult(list, keys, searchKey) {
-  const defaultOptions = {
-    shouldSort: true,
-    threshold: 0.4,
-    location: 0,
-    distance: 100,
-    maxPatternLength: 32,
-    minMatchCharLength: 1,
-    keys: keys
-  };
-
-  const options = { ...defaultOptions };
-
-  // eslint-disable-next-line no-undef
-  const searchIndex = Fuse.createIndex(options.keys, list);
-
-  // eslint-disable-next-line no-undef
-  const fuse = new Fuse(list, options, searchIndex);
-
-  const result = fuse.search(searchKey);
-
-  if (result.length > 20) {
-    return result.slice(0, 20);
-  }
-
-  return result;
-}
-
-function debounce(func, wait, immediate) {
-  let timeout;
-
-  return function() {
-    const args = arguments;
-
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      timeout = null;
-      if (!immediate) {
-        // eslint-disable-next-line consistent-this, no-invalid-this
-        func.apply(this, args);
-      }
-    }, wait);
-
-    if (immediate && !timeout) {
-      // eslint-disable-next-line consistent-this, no-invalid-this
-      func.apply(this, args);
-    }
-  };
-}
-
-let searchData;
-
-async function search(event) {
-  const value = event.target.value;
-  const keys = ['title', 'description'];
-
-  if (!resultBox) {
-    console.error('Search result container not found');
-
-    return;
-  }
-
-  if (!value) {
-    showResultText('Type anything to view search result');
-
-    return;
-  }
-
-  if (!searchData) {
-    showResultText('Loading...');
-
-    try {
-      // eslint-disable-next-line require-atomic-updates
-      searchData = await fetchAllData();
-    } catch (e) {
-      console.log(e);
-      showResultText('Failed to load result.');
-
-      return;
-    }
-  }
-
-  const result = getSearchResult(searchData, keys, value);
-
-  if (!result.length) {
-    showResultText('No result found! Try some different combination.');
-
-    return;
-  }
-
-  // eslint-disable-next-line require-atomic-updates
-  resultBox.innerHTML = buildSearchResult(result);
-}
-
-function onDomContentLoaded() {
-  const searchButton = document.querySelectorAll('.search-button');
-  const debouncedSearch = debounce(search, 300);
-
-  if (searchCloseButton) {
-    searchCloseButton.addEventListener('click', hideSearch);
-  }
-
-  if (searchButton) {
-    searchButton.forEach(function(item) {
-      item.addEventListener('click', showSearch);
-    });
-  }
-
-  if (searchContainer) {
-    searchContainer.addEventListener('click', hideSearch);
-  }
-
-  if (searchWrapper) {
-    searchWrapper.addEventListener('click', function(event) {
-      event.stopPropagation();
-    });
-  }
-
-  if (searchInput) {
-    searchInput.addEventListener('keyup', debouncedSearch);
-  }
-
-  // eslint-disable-next-line no-undef
-  if (window.location.hash === searchHash) {
-    showSearch();
-  }
-}
-
-// eslint-disable-next-line no-undef
-window.addEventListener('DOMContentLoaded', onDomContentLoaded);
-
-// eslint-disable-next-line no-undef
-window.addEventListener('hashchange', function() {
-  // eslint-disable-next-line no-undef
-  if (window.location.hash === searchHash) {
-    showSearch();
-  }
-});
+
+var searchAttr = 'data-search-mode';
+function contains(a,m){
+    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m) !== -1;
+};
+
+//on search
+document.getElementById("nav-search").addEventListener("keyup", function(event) {
+    var search = this.value.toUpperCase();
+
+    if (!search) {
+        //no search, show all results
+        document.documentElement.removeAttribute(searchAttr);
+        
+        document.querySelectorAll("nav > ul > li:not(.level-hide)").forEach(function(elem) {
+            elem.style.display = "block";
+        });
+
+        if (typeof hideAllButCurrent === "function"){
+            //let's do what ever collapse wants to do
+            hideAllButCurrent();
+        } else {
+            //menu by default should be opened
+            document.querySelectorAll("nav > ul > li > ul li").forEach(function(elem) {
+                elem.style.display = "block";
+            });
+        }
+    } else {
+        //we are searching
+        document.documentElement.setAttribute(searchAttr, '');
+
+        //show all parents
+        document.querySelectorAll("nav > ul > li").forEach(function(elem) {
+            elem.style.display = "block";
+        });
+        document.querySelectorAll("nav > ul").forEach(function(elem) {
+            elem.style.display = "block";
+        });
+        //hide all results
+        document.querySelectorAll("nav > ul > li > ul li").forEach(function(elem) {
+            elem.style.display = "none";
+        });
+        //show results matching filter
+        document.querySelectorAll("nav > ul > li > ul a").forEach(function(elem) {
+            if (!contains(elem.parentNode, search)) {
+                return;
+            }
+            elem.parentNode.style.display = "block";
+        });
+        //hide parents without children
+        document.querySelectorAll("nav > ul > li").forEach(function(parent) {
+            var countSearchA = 0;
+            parent.querySelectorAll("a").forEach(function(elem) {
+                if (contains(elem, search)) {
+                    countSearchA++;
+                }
+            });
+            
+            var countUl = 0;
+            var countUlVisible = 0;
+            parent.querySelectorAll("ul").forEach(function(ulP) {
+                // count all elements that match the search
+                if (contains(ulP, search)) {
+                    countUl++;
+                }
+                
+                // count all visible elements
+                var children = ulP.children
+                for (i=0; i<children.length; i++) {
+                    var elem = children[i];
+                    if (elem.style.display != "none") {
+                        countUlVisible++;
+                    }
+                }
+            });
+          
+            if (countSearchA == 0 && countUl === 0){
+                //has no child at all and does not contain text
+                parent.style.display = "none";
+            } else if(countSearchA == 0 && countUlVisible == 0){
+                //has no visible child and does not contain text
+                parent.style.display = "none";
+            }
+        });
+        document.querySelectorAll("nav > ul.collapse_top").forEach(function(parent) {
+            var countVisible = 0;
+            parent.querySelectorAll("li").forEach(function(elem) {
+                if (elem.style.display !== "none") {
+                    countVisible++;
+                }
+            });
+          
+            if (countVisible == 0) {
+                //has no child at all and does not contain text
+                parent.style.display = "none";
+            }
+        });
+    }
+});