hexo-theme-solitude 1.2.1 → 1.2.2

package/source/css/_search/local-search.styl

@@ -1,112 +1,131 @@
-.search-dialog 
-	position fixed
-	top 5rem
-	left 50%
-	z-index 1001
-	display none
-	margin-left -15rem
-	padding 1rem
-	width 30rem
-	box-shadow var(--sco-shadow-lightblack)
-	background var(--sco-card-bg)
-	border var(--style-border)
-	transition 0.3s
-	border-radius 12px
-
-	+maxWidth768()
-		top 0px
-		left 0px
-		margin 0px
-		width 100%
-		height 100%
-
-	.search-close-button 
-		color var(--sco-main)
-		font-size 1.2em
-		line-height 1
-		cursor pointer
-		transition color 0.2s ease-in-out 0s
-
-		&:hover 
-			color rgb(48, 122, 246)
-
-	.search-box 
-		padding-top 8px
-		max-width 100%
-
-		input 
-			height 100%
-			width 100%
-			padding 0.25rem 0.7rem
-			outline 0px
-			border var(--style-border)
-			border-radius 8px
-			background var(--sco-secondbg)
-			color var(--sco-fontcolor)
-
-			&:focus 
-				border var(--style-border-hover)
-
-#search-mask 
-	position fixed
-	inset 0px
-	z-index 1000
-	display none
-	background rgba(0, 0, 0, 0.6)
-	backdrop-filter blur(12px)
-	-webkit-backdrop-filter blur(12px)
-	transform translateZ(0)
-	background var(--sco-maskbgdeep)
-
-.search-wrap 
-	display none
-
-#loading-database,
-#loading-status 
-	text-align center
-	padding-top 10px
-
-.search-nav 
-	display flex
-	align-items center
-	justify-content space-between
-	padding 0 0.2rem 0.7rem 0.2rem
-
-.search-dialog-title 
-	font-weight bold
-	color var(--sco-main)
-	font-size 1.4em
-	line-height 1
-
-#search-results 
-	max-height calc(80vh - 130px)
-	overflow-y auto
-
-	+maxWidth768()
-		max-height 80vh !important
-
-	.search__hit-item 
-		font-weight bold
-		margin 10px 0
-
-	.search-result 
-		margin 0
-		font-weight 500
-
-	.search-keyword 
-		color var(--sco-theme)
-		font-style normal
-
-#search__hits-empty 
-	text-align center
-	font-weight 600
-
-.search__hits-count 
-	color var(--sco-gray)
-	font-size .8rem
-	font-weight bold
-
-.search-box 
-	input 
-		&::placeholder 
-			color var(--sco-gray)
+.search-dialog
+  position fixed
+  top 5rem
+  left 50%
+  z-index 1001
+  display none
+  margin-left -15rem
+  padding 1rem
+  width 30rem
+  box-shadow var(--sco-shadow-lightblack)
+  background var(--sco-card-bg)
+  border var(--style-border)
+  transition 0.3s
+  border-radius 8px
+
+  &:hover
+    border var(--style-border-hover)
+    box-shadow var(--sco-shadow-theme)
+
+  +maxWidth768()
+    top 0
+    left 0
+    margin 0
+    width 100%
+    height 100%
+
+  .search-dialog-title
+    font-weight 700
+    color var(--sco-main)
+    padding 0 0 0.7rem
+    font-size 1.4em
+    line-height 1
+
+  .search-close-button
+    position absolute
+    top 0.8rem
+    right 1rem
+    color var(--sco-gray)
+    font-size 1.4em
+    line-height 1
+    cursor pointer
+    transition color .2s ease-in-out 0s
+
+    &:hover
+      color var(--sco-main)
+
+  #search-results
+    max-height calc(80vh - 130px)
+    overflow-y auto
+    margin-top 8px
+
+    .search-result-list
+      .search-result-title
+        padding-left 0
+        font-weight 700
+        position relative
+        transition color .2s ease-in-out 0s
+
+        &:hover
+          color var(--sco-main)
+
+    +maxWidth768()
+      max-height 80vh !important
+
+  #search-pagination
+    .pagination-list
+      margin 0.2rem 0 0
+      padding 0
+      text-align center
+
+      .pagination-item
+        color var(--sco-fontcolor)
+        display inline-block
+        min-width 1.2rem
+        height 1.2rem
+        text-align center
+        line-height 1.2rem
+        cursor pointer
+
+        &:hover
+          color var(--sco-main)
+
+        &.select
+          border-radius 4px
+          background var(--sco-main)
+          color var(--sco-white)
+          cursor default
+
+          &:hover
+            color var(--sco-white)
+
+  #search-tips
+    padding-top 12px
+    color var(--sco-secondtext)
+    right 0
+    margin auto
+
+    .search-result-count
+      color var(--sco-gray)
+
+      b
+        color var(--sco-main)
+
+  .search-box
+    position relative
+    margin 0 auto
+    max-width 100%
+    width 100%
+    padding-top 8px
+    margin-bottom 8px
+
+    input
+      height 100%
+      width 100%
+      border-radius 8px
+      border var(--style-border)
+      padding 0.25rem 0.7rem;
+      outline 0
+      background var(--sco-secondbg)
+      color var(--search-input-color)
+
+#search-mask
+  position fixed
+  inset 0
+  z-index 1000
+  display none
+  background rgba(0, 0, 0, 0.6)
+  backdrop-filter blur(12px)
+  -webkit-backdrop-filter blur(12px)
+  transform translateZ(0)
+  background var(--sco-maskbgdeep)

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"));
+    });
+});