Added Search

Author: ZYROUGE

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsdoc-skyceil",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A clean and minimalistic JSDoc theme",
   "main": "publish.js",
   "scripts": {

publish.js

@@ -409,6 +409,107 @@ function buildNav(members) {
     return nav;
 }
 
+function buildMemberSearch(items, itemHeading, itemsSeen, linktoFn) {
+    let search = [];
+
+    if (items.length) {
+        let itemsSearch = [];
+
+        items.forEach(item => {
+            var methods = find({ kind: "function", memberof: item.longname })
+            var members = find({ kind: "member", memberof: item.longname })
+            var hasMethods = !!(methods.length || members.length);
+            let displayName;
+
+            if ( !hasOwnProp.call(item, 'longname') ) {
+                itemsSearch.push({ name: item.name, url: linktoFn('', item.name) });
+            }
+            else if ( !hasOwnProp.call(itemsSeen, item.longname) ) {
+                if (env.conf.templates.default.useLongnameInNav) {
+                    displayName = item.longname;
+                } else {
+                    displayName = item.name;
+                }
+
+                itemsSearch.push({
+                    name: displayName,
+                    url: linktoFn(item.longname, displayName.replace(/\b(module|event):/g, ''))
+                });
+
+                if(hasMethods) {
+                    methods.forEach(meth => {
+                        itemsSearch.push({
+                            name: meth.longname,
+                            url: linktoFn(meth.longname, meth.name)
+                        });
+                    });
+                    members.forEach(meth => {
+                        itemsSearch.push({
+                            name: meth.longname,
+                            url: linktoFn(meth.longname, meth.name)
+                        });
+                    });
+                }
+            }
+        });
+
+        if (itemsSearch.length) {
+            search.push(...itemsSearch);
+        }
+    }
+
+    return search;
+}
+
+/**
+ * Create the search bar in sidebar.
+ * @param {object} members The members that will be used to create the sidebar.
+ * @param {array<object>} members.classes
+ * @param {array<object>} members.externals
+ * @param {array<object>} members.globals
+ * @param {array<object>} members.mixins
+ * @param {array<object>} members.modules
+ * @param {array<object>} members.namespaces
+ * @param {array<object>} members.tutorials
+ * @param {array<object>} members.events
+ * @param {array<object>} members.interfaces
+ * @return {string} The HTML for the navigation sidebar.
+ */
+function buildSearch(members) {
+    let globalNav;
+    let search = [{ name: "Home", url: '<a href="index.html">Home</a>' }];
+    const seen = {};
+    const seenTutorials = {};
+
+    search.push(...buildMemberSearch(members.modules, 'Modules', {}, linkto));
+    search.push(...buildMemberSearch(members.externals, 'Externals', seen, linktoExternal));
+    search.push(...buildMemberSearch(members.namespaces, 'Namespaces', seen, linkto));
+    search.push(...buildMemberSearch(members.classes, 'Classes', seen, linkto));
+    search.push(...buildMemberSearch(members.interfaces, 'Interfaces', seen, linkto));
+    search.push(...buildMemberSearch(members.events, 'Events', seen, linkto));
+    search.push(...buildMemberSearch(members.mixins, 'Mixins', seen, linkto));
+    search.push(...buildMemberSearch(members.tutorials, 'Tutorials', seenTutorials, linktoTutorial));
+
+    if (members.globals.length) {
+        globalNav = [];
+
+        members.globals.forEach(({kind, longname, name}) => {
+            if ( kind !== 'typedef' && !hasOwnProp.call(seen, longname) ) {
+                globalNav.push({ name: name, url: linkto(longname, name) });
+            }
+        });
+
+        if (!globalNav.length) {
+            search.push({ name: "Global", url: linkto('global', 'Global') });
+        }
+        else {
+            search.push(...globalNav);
+        }
+    }
+
+    return search;
+}
+
 function prettifyReadme (readme) {
     let prettifiedReadme = readme;
     prettifiedReadme = prettifiedReadme.replace(/class="prettyprint/g, "class=\"prettyprint linenums");
@@ -625,7 +726,9 @@ exports.publish = (taffyData, opts, tutorials) => {
 
     // once for all
     view.nav = buildNav(members);
-    attachModuleSymbols( find({ longname: {left: 'module:'} }), members.modules );
+    attachModuleSymbols( find({ longname: { left: 'module:'} }), members.modules );
+    view.search = buildSearch(members);
+    fs.writeFileSync(path.join(outdir, "search.json"), JSON.stringify(view.search));
 
     // generate the pretty-printed source files first so other pages can link to them
     if (outputSourceFiles) {

static/scripts/nav.js

@@ -1,5 +1,5 @@
 const init = async () => {
-    window.addEventListener("DOMContentLoaded", function () {
+    document.addEventListener("DOMContentLoaded", function () {
         const body = document.querySelector("body");
 
         // Burger
@@ -48,6 +48,7 @@ const init = async () => {
             }
         }
 
+        makeSearch();
     });
 
     function toggleClass(element, className) {
@@ -57,6 +58,40 @@ const init = async () => {
             element.classList.add(className);
         }
     }
+
+    async function makeSearch() {
+        const searchData = await fetch("search.json");
+        const data = await searchData.json();
+        const textbox = document.getElementById("search-box");
+        const results = document.getElementById("search-results");
+        const fuse = new Fuse(data, {
+            includeScore: true,
+            keys: ['name']
+        });
+        textbox.addEventListener("change", textboxhandle);
+        textbox.addEventListener("keydown", textboxhandle);
+        textbox.addEventListener("keyup", textboxhandle);
+        textbox.addEventListener("keypress", textboxhandle);
+        function textboxhandle() {
+            const val = textbox.value.trim();
+            if(val.length) {
+                const items = fuse.search(val);
+                let resHtml = "";
+                if(items.length) {
+                    items.sort((a, b) => b.score - a.score).forEach(({ item }) => {
+                        resHtml += `<p onclick="this.querySelector('a').click()">${item.name}${item.url}</p>`;
+                    });
+                } else {
+                    resHtml += "<p>No result</p>"
+                }
+                results.innerHTML = resHtml;
+                results.style.display = "block";
+            } else {
+                results.innerHTML = "";
+                results.style.display = "none";
+            }
+        }
+    }
 }
 
 init();

static/styles/skyceil.css

@@ -62,10 +62,56 @@ body[data-theme="dark"] {
     border-radius: 10px;
     outline: none;
     background: transparent !important;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     cursor: pointer;
 }
 
+.utilities {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+#search-box {
+    outline: none;
+    border: 2px solid var(--simple-code);
+    padding: 5px;
+    border-radius: 2px;
+    font-family: 'Montserrat', sans-serif;
+    background-color: var(--background);
+    color: var(--font);
+}
+
+#search-results {
+    position: absolute;
+    border: 2px solid var(--simple-code);
+    background-color: var(--background);
+    width: 75%;
+    margin-top: 6px;
+    max-height: 70%;
+    overflow-y: auto;
+}
+
+#search-results p {
+    display: block;
+    cursor: pointer;
+    padding: 5px;
+    font-size: 1.2rem;
+    color: var(--font);
+    text-decoration: none;
+    margin: 0;
+}
+
+#search-results p a {
+    font-size: 14px;
+    display: block;
+}
+
+#search-results p:hover {
+    background-color: var(--simple-code);
+}
+
 html
 {
     overflow-x: hidden;

tmpl/layout.tmpl

@@ -7,6 +7,7 @@
     <script src="scripts/prettify/prettify.js"></script>
     <script src="scripts/prettify/lang-css.js"></script>
     <script src="scripts/nav.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.4.6/fuse.min.js"></script>
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -19,9 +20,11 @@
 
 <nav class="navbar">
     <div class="utilities">
-        <center>
-            <button class="theme" data-theme="light"><i class="fas fa-moon"></i></button>
-        </center>
+        <div id="search">
+            <input type="text" id="search-box" placeholder="Search for stuffs..."><br>
+            <div id="search-results" style="display: none;"></div>
+        </div>
+        <button class="theme" data-theme="light"><i class="fas fa-moon"></i></button>
     </div>
     <hr>
     <?js= this.nav ?>