hexo-theme-solitude 1.2.1 → 1.2.3

package/source/js/extend/search/algolia-search.js

@@ -1,140 +1,164 @@
-window.addEventListener('load', () => {
+window.addEventListener("load", () => {
+    const $searchMask = document.getElementById("search-mask");
+    const $searchDialog = document.querySelector("#algolia-search .search-dialog");
+
     const openSearch = () => {
-        document.body.style.cssText = 'width: 100%;overflow: hidden'
-        document.querySelector('#algolia-search .search-dialog').style.display = 'block'
-        document.querySelector('#algolia-search .ais-SearchBox-input').focus()
-        utils.fadeIn(document.getElementById('search-mask'), 0.5)
-        // shortcut: ESC
-        document.addEventListener('keydown', function f(event) {
-            if (event.code === 'Escape') {
-                closeSearch()
-                document.removeEventListener('keydown', f)
+        utils.animateIn($searchMask, "to_show 0.5s");
+        $searchDialog.style.display = "block";
+        setTimeout(() => {
+            document.querySelector("#algolia-search .ais-SearchBox-input").focus();
+        }, 100);
+        document.addEventListener("keydown", function f(event) {
+            if (event.code === "Escape") {
+                closeSearch();
+                document.removeEventListener("keydown", f);
             }
-        })
-    }
+        });
+        fixSafariHeight();
+        window.addEventListener("resize", fixSafariHeight);
+    };
 
     const closeSearch = () => {
-        document.body.style.cssText = "width: '';overflow: ''"
-        const $searchDialog = document.querySelector('#algolia-search .search-dialog')
-        $searchDialog.style.animation = 'search_close .5s'
-        setTimeout(() => {
-            $searchDialog.style.cssText = "display: none; animation: ''"
-        }, 500)
-        utils.fadeOut(document.getElementById('search-mask'), 0.5)
-    }
+        utils.animateOut($searchDialog, "search_close .5s");
+        utils.animateOut($searchMask, "to_hide 0.5s");
+        window.removeEventListener("resize", fixSafariHeight);
+    };
 
-    const searchClickFn = () => {
-        document.querySelector('#search-button > .search').addEventListener('click', openSearch)
-        document.getElementById('search-mask').addEventListener('click', closeSearch)
-        document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
-        document.getElementById('menu-search').addEventListener('click', function () {
-            rm.hideRightMenu();
-            openSearch();
-            let t = document.querySelector('.ais-search-box--input');
-            let evt = new Event('input', {bubbles: true, cancelable: true});
-            t.value = selectTextNow;
-            t.dispatchEvent(evt);
-        });
-    }
+    const fixSafariHeight = () => {
+        if (window.innerWidth < 768) {
+            $searchDialog.style.setProperty("--search-height", window.innerHeight + "px");
+        }
+    };
 
-    searchClickFn()
+    const searchClickFn = () => {
+        utils.addEventListenerPjax(document.querySelector("#search-button > .search"), "click", openSearch);
+    };
 
-    window.addEventListener('pjax:complete', function () {
-        getComputedStyle(document.querySelector('#algolia-search .search-dialog')).display === 'block' && closeSearch()
-        searchClickFn()
-    })
+    const searchFnOnce = () => {
+        $searchMask.addEventListener("click", closeSearch);
+        document.querySelector("#algolia-search .search-close-button").addEventListener("click", closeSearch);
+    };
 
-    const algolia = GLOBAL_CONFIG.algolia
-    const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
+    const algolia = GLOBAL_CONFIG.algolia;
+    const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName;
     if (!isAlgoliaValid) {
-        return console.error('Algolia setting is invalid!')
+        return console.error("Algolia setting is invalid!");
     }
 
-    const searchClient = algoliasearch(
-        algolia.appId,
-        algolia.apiKey
-    );
-
     const search = instantsearch({
         indexName: algolia.indexName,
-        searchClient,
-        searchParameters: {
-            hitsPerPage: algolia.hits.per_page || 10
-        }
-    })
-
-    search.addWidget(
-        instantsearch.widgets.searchBox({
-            container: '#algolia-search-input',
-            showReset: false,
-            placeholder: GLOBAL_CONFIG.lang.search.placeholder,
-            showSubmit: false,
-            showLoadingIndicator: true,
-            templates: {
-                loadingIndicator: '<i class="scoicon sco-loading-line search-icon"></i>'
-            },
-            onStateChange({uiState, setUiState}) {
-                const searchInput = document.querySelector('#algolia-search-input input')
-                if (searchInput.value) {
-                    setUiState(uiState);
-                }
+        searchClient: algoliasearch(algolia.appId, algolia.apiKey),
+        searchFunction(helper) {
+            if (helper.state.query) {
+                let innerLoading = '<i class="scoicon sco-loading-line sco-spin"></i>';
+                document.getElementById("algolia-hits").innerHTML = innerLoading;
+                helper.search();
             }
-        })
-    )
-    search.addWidget(
-        instantsearch.widgets.hits({
-            container: '#algolia-hits',
-            templates: {
-                item(hit) {
-                    const link = hit.permalink ? hit.permalink : (GLOBAL_CONFIG.root + hit.path)
-                    return (
-                        `<a href="${link}" class="algolia-hit-item-link">${hit._highlightResult.title.value}</a>`
-                    )
-                },
-                empty(data) {
-                    return (
-                        '<div id="algolia-hits-empty">' +
-                        GLOBAL_CONFIG.lang.search.empty.replace(/\$\{query}/, data.query) +
-                        '</div>'
-                    )
+        },
+    });
+
+    const configure = instantsearch.widgets.configure({
+        hitsPerPage: algolia.hits.per_page ?? 5,
+    });
+
+    const searchBox = instantsearch.widgets.searchBox({
+        container: "#algolia-search-input",
+        showReset: false,
+        showSubmit: false,
+        placeholder: GLOBAL_CONFIG.lang.search.placeholder,
+        showLoadingIndicator: true,
+        searchOnEnterKeyPressOnly: true,
+        searchAsYouType: false,
+    });
+
+    const hits = instantsearch.widgets.hits({
+        container: "#algolia-hits",
+        templates: {
+            item(data) {
+                const link = data.permalink ? data.permalink : GLOBAL_CONFIG.root + data.path;
+                const result = data._highlightResult;
+                const loadingLogo = document.querySelector("#algolia-hits .sco-spin");
+                if (loadingLogo) {
+                    loadingLogo.style.display = "none";
                 }
+                setTimeout(() => {
+                    document.querySelector("#algolia-search .ais-SearchBox-input").focus();
+                }, 200);
+                return `
+          <a href="${link}" class="algolia-hit-item-link">
+          <span class="algolia-hits-item-title">${result.title.value || "no-title"}</span>
+          </a>`;
             },
-            cssClasses: {
-                item: 'algolia-hit-item'
-            }
-        })
-    )
-
-    search.addWidget(
-        instantsearch.widgets.stats({
-            container: '#algolia-stats',
-            templates: {
-                text(data) {
-                    const stats = GLOBAL_CONFIG.lang.search.hit.replace(/\$\{hits}/, data.nbHits).replace(/\$\{time}/, data.processingTimeMS);
-                    return `${stats}`;
+            empty: function (data) {
+                const loadingLogo = document.querySelector("#algolia-hits .sco-spin");
+                if (loadingLogo) {
+                    loadingLogo.style.display = "none";
                 }
-            }
-        })
-    )
-
-    search.addWidget(
-        instantsearch.widgets.pagination({
-            container: '#algolia-pagination',
-            scrollTo: false,
-            showFirst: false,
-            showPrevious: false,
-            showNext: false,
-            showLast: false,
-            cssClasses: {
-                list: 'pagination',
-                pageItem: 'pagination-item',
-                link: 'page-number',
+                setTimeout(() => {
+                    document.querySelector("#algolia-search .ais-SearchBox-input").focus();
+                }, 200);
+                return (
+                    '<div id="algolia-hits-empty">' +
+                    GLOBAL_CONFIG.lang.search.empty.replace(/\$\{query}/, data.query) +
+                    "</div>"
+                );
+            },
+        },
+        cssClasses: {
+            item: "algolia-hit-item",
+        },
+    });
+
+    const pagination = instantsearch.widgets.pagination({
+        container: "#algolia-pagination",
+        totalPages: algolia.hits.per_page ?? 5,
+        scrollTo: false,
+        showFirstLast: false,
+        templates: {
+            first: '<i class="scoicon sco-show-left-line"></i>',
+            last: '<i class="scoicon sco-show-right-line"></i>',
+            previous: '<i class="scoicon sco-arrow-left-bold"></i>',
+            next: '<i class="scoicon sco-arrow-right-bold"></i>',
+        },
+        cssClasses: {
+            root: "pagination",
+            item: "pagination-item",
+            link: "page-number",
+            active: "current",
+            disabled: "disabled-item",
+        },
+    });
+
+    const stats = instantsearch.widgets.stats({
+        container: "#algolia-tips > #algolia-stats",
+        templates: {
+            text: function (data) {
+                const stats = GLOBAL_CONFIG.lang.search.hit
+                    .replace(/\$\{hits}/, data.nbHits)
+                    .replace(/\$\{time}/, data.processingTimeMS);
+                return `<hr>${stats}`;
             },
-        })
-    )
-    search.start()
-
-    window.pjax && search.on('render', () => {
-        window.pjax.refresh(document.getElementById('algolia-hits'))
-    })
-})
+        },
+    });
+
+    const powerBy = instantsearch.widgets.poweredBy({
+        container: "#algolia-tips > #algolia-poweredBy",
+    });
+
+    search.addWidgets([configure, searchBox,stats, hits,powerBy, pagination]); // add the widgets to the instantsearch instance
+
+    search.start();
+
+    searchClickFn();
+    searchFnOnce();
+
+    window.addEventListener("pjax:complete", () => {
+        !utils.isHidden($searchMask) && closeSearch();
+        searchClickFn();
+    });
+
+    window.pjax &&
+    search.on("render", () => {
+        window.pjax.refresh(document.getElementById("algolia-hits"));
+    });
+});

package/source/js/extend/search/local-search.js

@@ -1,171 +1,146 @@
-const $searchMask = document.getElementById('search-mask'), 
-$searchDialog = document.querySelector('#local-search .search-dialog'),
-$input = document.querySelector('#search-input'),
-$resultContent = document.getElementById('search-results'),
-$loadingStatus = document.getElementById('loading-status')
-let dataObj = null
-
-class search{
-  static openSearch(){
-    utils.fadeIn($searchMask, '0.5')
-    utils.fadeIn($searchDialog, '0.5')
-    setTimeout(() => { document.querySelector('#search-input').focus() }, 100)
-    search.search()
-    document.addEventListener('keydown', function f (event) {
-      if (event.code === 'Escape') {
-        closeSearch()
-        document.removeEventListener('keydown', f)
-      }
-    })
-  }
+window.onload = () => {
+    let idx, store = [];
+    const $searchMask = document.getElementById("search-mask");
+    const $searchDialog = document.querySelector("#local-search .search-dialog");
+    const openSearch = () => {
+        utils.animateIn($searchMask, "to_show 0.5s");
+        $searchDialog.style.display = "block";
+        setTimeout(() => {
+            document.querySelector("#local-search .search-box-input").focus();
+        }, 100);
+        document.addEventListener("keydown", function f(event) {
+            if (event.code === "Escape") {
+                closeSearch();
+                document.removeEventListener("keydown", f);
+            }
+        });
+        fixSafariHeight();
+        window.addEventListener("resize", fixSafariHeight);
+    };
+    const fixSafariHeight = () => {
+        if (window.innerWidth < 768) {
+            $searchDialog.style.setProperty("--search-height", window.innerHeight + "px");
+        }
+    };
+    const closeSearch = () => {
+        utils.animateOut($searchDialog, "search_close .5s");
+        utils.animateOut($searchMask, "to_hide 0.5s");
+        window.removeEventListener("resize", fixSafariHeight);
+    };
+    utils.addEventListenerPjax(document.querySelector("#search-button > .search"), "click", openSearch);
+    utils.addEventListenerPjax(document.querySelector("#local-search .search-close-button"), "click", closeSearch);
+    function initLunr() {
+        fetch("/search.xml")
+            .then(response => response.text())
+            .then(data => {
+                let parser = new DOMParser();
+                let xmlDoc = parser.parseFromString(data, "text/xml");
+                let entries = xmlDoc.getElementsByTagName("entry");
+                for (let i = 0; i < entries.length; i++) {
+                    let entry = entries[i];
+                    let title = entry.getElementsByTagName("title")[0].textContent;
+                    let link = entry.getElementsByTagName("url")[0].textContent;
+                    let content = entry.getElementsByTagName("content")[0].textContent;
+                    store.push({
+                        'title': title,
+                        'link': link,
+                        'content': content
+                    });
+                }
 
-  static closeSearch(){
-    utils.fadeOut($searchDialog, '0.5')
-    utils.fadeOut($searchMask, '0.5')
-  }
+                idx = lunr(function () {
+                    this.ref('link');
+                    this.field('title', {boost: 10});
+                    this.field('content');
 
-  static async fetchData(path){
-    let data = []
-    const response = await fetch(path)
-    const res = await new window.DOMParser().parseFromString(await response.text(), 'text/xml')
-    data = [...res.querySelectorAll('entry')].map(item => {
-      return {
-        title: item.querySelector('title').textContent,
-        content: item.querySelector('content') && item.querySelector('content').textContent,
-        url: item.querySelector('url').textContent
-      }
-    })
-    if (response.ok) {
-      const $loadDataItem = document.getElementById('loading-database')
-      $loadDataItem.nextElementSibling.style.display = 'block'
-      $loadDataItem.remove()
+                    store.forEach(function (doc) {
+                        this.add(doc);
+                    }, this);
+                });
+            })
+            .catch(err => console.error("Error loading search data:", err));
     }
-    return data
-  }
-
-  static search(){
-    if (!GLOBAL_CONFIG.localsearch.preload && dataObj === null) dataObj = this.fetchData(GLOBAL_CONFIG.localsearch.path)
-    $input.addEventListener('input', function type() {
-      const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
-      if (keywords[0] !== '') $loadingStatus.innerHTML = '<i class="scoicon sco-loading-line"></i><span>加载中</span>'
-      else {
-        $resultContent.innerHTML = ''
-        return
-      }
+    let query = ''
+    let currentPage = 0;
+    const resultsPerPage = 10;
+    let results = [];
 
-      if (keywords.length <= 0) return
-      let count = 0, str = '<div class="search-result-list">'
-      // perform local searching
-      dataObj.then(data => {
-        data.forEach(data => {
-          let isMatch = true
-          let dataTitle = data.title ? data.title.trim().toLowerCase() : ''
-          const dataContent = data.content ? data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() : ''
-          const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url
-          let indexTitle = -1
-          let indexContent = -1
-          let firstOccur = -1
-          // only match articles with not empty titles and contents
-          if (dataTitle !== '' || dataContent !== '') {
-            keywords.forEach((keyword, i) => {
-              indexTitle = dataTitle.indexOf(keyword)
-              indexContent = dataContent.indexOf(keyword)
-              if (indexTitle < 0 && indexContent < 0) {
-                isMatch = false
-              } else {
-                if (indexContent < 0) {
-                  indexContent = 0
+    function initUI() {
+        const $results = document.getElementById("search-results");
+        const $search = document.getElementById("search-input");
+        $search.addEventListener('keydown', function (e) {
+                if (e.keyCode === 13) {
+                    $results.innerHTML = '';
+                    query = this.value;
+                    results = search(query);
+                    renderResults(results, currentPage);
+                    renderPagination(results.length);
                 }
-                if (i === 0) {
-                  firstOccur = indexContent
-                }
-              }
-            })
-          } else {
-            isMatch = false
-          }
-
-          // show search results
-          if (isMatch) {
-            if (firstOccur >= 0) {
-              // cut out 130 characters
-              let start = firstOccur - 30
-              let end = firstOccur + 100
-              let pre = ''
-              let post = ''
-
-              if (start < 0) {
-                start = 0
-              }
-
-              if (start === 0) {
-                end = 100
-              } else {
-                pre = '...'
-              }
-
-              if (end > dataContent.length) {
-                end = dataContent.length
-              } else {
-                post = '...'
-              }
-
-              let matchContent = dataContent.substring(start, end)
-              // highlight all keywords
-              keywords.forEach(keyword => {
-                const regex = new RegExp(`(?!<[^>]*?)(${keyword})(?![^<]*?>)`, 'gi')
-                matchContent = matchContent.replaceAll(regex, '<span class="search-keyword">$1</span>')
-                dataTitle = dataTitle.replaceAll(regex, '<span class="search-keyword">$1</span>')
-              })
-
-              str += '<div class="search__hit-item"><a href="' + dataUrl + '"><span class="search-result-title">' + dataTitle + '</span>'
-              count += 1
-              if (dataContent !== '') {
-                str += '<div class="search-result">' + pre + matchContent + post + '</div>'
-              }
             }
-            str += '</a></div>'
-          }
-        })
-        if (count === 0) {
-          str += `<div id="search__hits-empty">${GLOBAL_CONFIG.lang.search.empty}</div>`
-        }else{
-          str += `<div class="search__hits-count">${GLOBAL_CONFIG.lang.search.hit.replace('${query}', '<span class="search-keyword">' + count + '</span>')}</div>`
+        )
+        ;
+    }
+    function search(query) {
+        return idx.search(query).map(result => {
+            return store.filter(page => {
+                return page.link === result.ref;
+            })[0];
+        });
+    }
+    function renderResults(results, page) {
+        const $search_results = document.getElementById("search-results");
+        $search_results.innerHTML = '';
+        const $tips = document.getElementById("search-tips")
+        $tips.innerHTML = '';
+        const start = page * resultsPerPage;
+        const end = start + resultsPerPage;
+        if (!results.length) {
+            const $empty = document.createElement("span");
+            $empty.className = "search-result-empty";
+            $empty.textContent = GLOBAL_CONFIG.lang.search.empty.replace(/\$\{query}/, query);
+            $search_results.appendChild($empty);
+            return;
         }
-        str += '</div>'
-        $resultContent.innerHTML = str
-        if (keywords[0] !== '') $loadingStatus.innerHTML = ''
-      })
-    })
-  }
-}
+        results.slice(start, end).forEach(function (result) {
+            const $result = document.createElement("li");
+            $result.className = "search-result-item";
+            const $link = document.createElement("a");
+            $link.className = "search-result-title";
+            $link.href = result.link;
+            $link.textContent = result.title;
+            $result.appendChild($link);
+            $search_results.appendChild($result);
+        });
+        const count = document.createElement("span");
+        count.className = "search-result-count";
+        count.innerHTML = `共 <b>${results.length}</b> 条结果`;
+        $tips.appendChild(count);
+    }
+    function renderPagination(totalResults) {
+        const totalPages = Math.ceil(totalResults / resultsPerPage);
+        const paginationContainer = document.getElementById("search-pagination");
+        paginationContainer.innerHTML = '';
+        const paginationList = document.createElement("ul");
+        paginationList.className = "pagination-list";
 
-const searchClickFn = () => {
-  if (PAGE_CONFIG.page !== "404") document.querySelector('#search-button > .search').addEventListener('click', search.openSearch)
-  GLOBAL_CONFIG.rightmenu.enable && document.getElementById('menu-search').addEventListener('click', function() {
-    rm.hideRightMenu();
-    search.openSearch();
-    let t = document.getElementsByClassName('search-box-input')[0];
-    let evt = new Event('input', {
-      bubbles: true,
-      cancelable: true
+        for (let i = 0; i < totalPages; i++) {
+            const button = document.createElement("li");
+            button.className = "pagination-item";
+            button.textContent = i + 1;
+            if (i === currentPage) {
+                button.classList.add('select');
+            }
+            button.addEventListener('click', function () {
+                currentPage = i;
+                renderResults(results, i);
+            });
+            paginationList.appendChild(button);
+        }
+        paginationContainer.appendChild(paginationList);
+    }
+    initLunr();
+    initUI();
+    window.addEventListener('DOMContentLoaded', (event) => {
+        initUI();
     });
-    t.value = selectTextNow;
-    t.dispatchEvent(evt);
-  })
-}
-
-const searchClickFnOnce = () => {
-  document.querySelector('#local-search .search-close-button').addEventListener('click', search.closeSearch)
-  $searchMask.addEventListener('click', search.closeSearch)
-  if (GLOBAL_CONFIG.localsearch.preload) dataObj = search.fetchData(GLOBAL_CONFIG.localsearch.path)
-}
-
-window.addEventListener('load', () => {
-  searchClickFn()
-  searchClickFnOnce()
-})
-
-window.addEventListener('pjax:complete', () => {
-  searchClickFn()
-})
+}

package/source/js/utils.js

@@ -143,5 +143,34 @@ const utils = {
         })
     },
     isMobile: () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
-    isHidden: e => 0 === e.offsetHeight && 0 === e.offsetWidth
+    isHidden: e => 0 === e.offsetHeight && 0 === e.offsetWidth,
+    addEventListenerPjax: function (element, eventType, callback, useCapture = false) {
+        element.addEventListener(eventType, callback, useCapture);
+        utils.addGlobalFn("pjax", function () {
+            element.removeEventListener(eventType, callback, useCapture);
+        });
+    },
+    addGlobalFn: (key, fn, name = false, parent = window) => {
+        const globalFn = parent.globalFn || {}
+        const keyObj = globalFn[key] || {}
+
+        if (name && keyObj[name]) return
+
+        name = name || Object.keys(keyObj).length
+        keyObj[name] = fn
+        globalFn[key] = keyObj
+        parent.globalFn = globalFn
+    },
+    animateIn: (ele, text) => {
+        ele.style.display = 'block'
+        ele.style.animation = text
+    },
+    animateOut: (ele, text) => {
+        ele.addEventListener('animationend', function f() {
+            ele.style.display = ''
+            ele.style.animation = ''
+            ele.removeEventListener('animationend', f)
+        })
+        ele.style.animation = text
+    }
 }