PHP Classes

File: docs/js/search.js

Recommend this page to a friend!
  Classes of Faris AL-Otabi   PHP File Uploading   docs/js/search.js   Download  
File: docs/js/search.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP File Uploading
Simple library to build your file sharing website
Author: By
Last change: Update of docs/js/search.js
Date: 4 months ago
Size: 6,867 bytes
 

Contents

Class file image Download
// Search module for phpDocumentor // // This module is a wrapper around fuse.js that will use a given index and attach itself to a // search form and to a search results pane identified by the following data attributes: // // 1. data-search-form // 2. data-search-results // // The data-search-form is expected to have a single input element of type 'search' that will trigger searching for // a series of results, were the data-search-results pane is expected to have a direct UL child that will be populated // with rendered results. // // The search has various stages, upon loading this stage the data-search-form receives the CSS class // 'phpdocumentor-search--enabled'; this indicates that JS is allowed and indices are being loaded. It is recommended // to hide the form by default and show it when it receives this class to achieve progressive enhancement for this // feature. // // After loading this module, it is expected to load a search index asynchronously, for example: // // <script defer src="js/searchIndex.js"></script> // // In this script the generated index should attach itself to the search module using the `appendIndex` function. By // doing it like this the page will continue loading, unhindered by the loading of the search. // // After the page has fully loaded, and all these deferred indexes loaded, the initialization of the search module will // be called and the form will receive the class 'phpdocumentor-search--active', indicating search is ready. At this // point, the input field will also have it's 'disabled' attribute removed. var Search = (function () { var fuse; var index = []; var options = { shouldSort: true, threshold: 0.6, location: 0, distance: 100, maxPatternLength: 32, minMatchCharLength: 1, keys: [ "fqsen", "name", "summary", "url" ] }; // Credit David Walsh (https://davidwalsh.name/javascript-debounce-function) // Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. function debounce(func, wait, immediate) { var timeout; return function executedFunction() { var context = this; var args = arguments; var later = function () { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; } function close() { // Start scroll prevention: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/ const scrollY = document.body.style.top; document.body.style.position = ''; document.body.style.top = ''; window.scrollTo(0, parseInt(scrollY || '0') * -1); // End scroll prevention var form = document.querySelector('[data-search-form]'); var searchResults = document.querySelector('[data-search-results]'); form.classList.toggle('phpdocumentor-search--has-results', false); searchResults.classList.add('phpdocumentor-search-results--hidden'); var searchField = document.querySelector('[data-search-form] input[type="search"]'); searchField.blur(); } function search(event) { // Start scroll prevention: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/ document.body.style.position = 'fixed'; document.body.style.top = `-${window.scrollY}px`; // End scroll prevention // prevent enter's from autosubmitting event.stopPropagation(); var form = document.querySelector('[data-search-form]'); var searchResults = document.querySelector('[data-search-results]'); var searchResultEntries = document.querySelector('[data-search-results] .phpdocumentor-search-results__entries'); searchResultEntries.innerHTML = ''; if (!event.target.value) { close(); return; } form.classList.toggle('phpdocumentor-search--has-results', true); searchResults.classList.remove('phpdocumentor-search-results--hidden'); var results = fuse.search(event.target.value, {limit: 25}); results.forEach(function (result) { var entry = document.createElement("li"); entry.classList.add("phpdocumentor-search-results__entry"); entry.innerHTML += '<h3><a href="' + document.baseURI + result.url + '">' + result.name + "</a></h3>\n"; entry.innerHTML += '<small>' + result.fqsen + "</small>\n"; entry.innerHTML += '<div class="phpdocumentor-summary">' + result.summary + '</div>'; searchResultEntries.appendChild(entry) }); } function appendIndex(added) { index = index.concat(added); // re-initialize search engine when appending an index after initialisation if (typeof fuse !== 'undefined') { fuse = new Fuse(index, options); } } function init() { fuse = new Fuse(index, options); var form = document.querySelector('[data-search-form]'); var searchField = document.querySelector('[data-search-form] input[type="search"]'); var closeButton = document.querySelector('.phpdocumentor-search-results__close'); closeButton.addEventListener('click', function() { close() }.bind(this)); var searchResults = document.querySelector('[data-search-results]'); searchResults.addEventListener('click', function() { close() }.bind(this)); form.classList.add('phpdocumentor-search--active'); searchField.setAttribute('placeholder', 'Search (Press "/" to focus)'); searchField.removeAttribute('disabled'); searchField.addEventListener('keyup', debounce(search, 300)); window.addEventListener('keyup', function (event) { if (event.key === '/') { searchField.focus(); } if (event.code === 'Escape') { close(); } }.bind(this)); } return { appendIndex, init } })(); window.addEventListener('DOMContentLoaded', function () { var form = document.querySelector('[data-search-form]'); // When JS is supported; show search box. Must be before including the search for it to take effect immediately form.classList.add('phpdocumentor-search--enabled'); }); window.addEventListener('load', function () { Search.init(); });