Site updated: 2024-01-04 00:44:53

js/custom/fixed_card_widget.js

@@ -1 +1,47 @@
-function FixedCardWidget(e,d,i){if("id"===e)var t=document.getElementById(d);else t=document.getElementsByClassName(d)[i];t&&(t.className.indexOf("fixed-card-widget")>-1?RemoveFixedCardWidget():(RemoveFixedCardWidget(),CreateQuitBox(),t.classList.add("fixed-card-widget")))}function CreateQuitBox(){document.getElementById("aside-content").insertAdjacentHTML("beforebegin",'<div id="quit-box" onclick="RemoveFixedCardWidget()"></div>')}function RemoveFixedCardWidget(){var e=document.querySelectorAll(".fixed-card-widget");if(e)for(i=0;i<e.length;i++)e[i].classList.remove("fixed-card-widget");var d=document.getElementById("quit-box");d&&d.remove()}RemoveFixedCardWidget();
+// 固定卡片点击动作
+function FixedCardWidget(type,name,index){
+    // 根据id或class选择元素
+    if (type === "id"){
+      var tempcard = document.getElementById(name);
+    }
+    else{
+      var tempcard = document.getElementsByClassName(name)[index];
+    }
+    // 若元素存在
+    if (tempcard) {
+        // 首先判断是否存在fixed-card-widget类
+        if (tempcard.className.indexOf('fixed-card-widget') > -1){
+          // 存在则移除
+          RemoveFixedCardWidget();
+        }
+        else{
+          // 不存在则先初始化防止卡片叠加
+          RemoveFixedCardWidget();
+          //新建退出蒙版
+          CreateQuitBox();
+          // 再添加固定卡片样式
+          tempcard.classList.add('fixed-card-widget');
+        }
+    }
+  }
+  //创建一个蒙版，作为退出键使用
+  function CreateQuitBox(){
+    var quitBox = `<div id="quit-box" onclick="RemoveFixedCardWidget()"></div>`
+    var asideContent = document.getElementById('aside-content');
+    asideContent.insertAdjacentHTML("beforebegin",quitBox)
+  }
+  // 移除卡片方法
+  function RemoveFixedCardWidget(){
+    var activedItems = document.querySelectorAll('.fixed-card-widget');
+    if (activedItems) {
+      for (i = 0; i < activedItems.length; i++) {
+        activedItems[i].classList.remove('fixed-card-widget');
+      }
+    }
+    //移除退出蒙版
+    var quitBox = document.getElementById('quit-box');
+    if (quitBox) quitBox.remove();
+  }
+  // 常规先初始化，确保切换页面后不会有固定卡片留存
+  RemoveFixedCardWidget()
+

js/search/algolia.js

@@ -1 +1,177 @@
-window.addEventListener("load",(()=>{const e=document.getElementById("search-mask"),t=document.querySelector("#algolia-search .search-dialog"),a=()=>{const a=document.body.style;a.width="100%",a.overflow="hidden",btf.animateIn(e,"to_show 0.5s"),btf.animateIn(t,"titleScale 0.5s"),setTimeout((()=>{document.querySelector("#algolia-search .ais-SearchBox-input").focus()}),100),document.addEventListener("keydown",(function e(t){"Escape"===t.code&&(n(),document.removeEventListener("keydown",e))})),i(),window.addEventListener("resize",i)},n=()=>{const a=document.body.style;a.width="",a.overflow="",btf.animateOut(t,"search_close .5s"),btf.animateOut(e,"to_hide 0.5s"),window.removeEventListener("resize",i)},i=()=>{window.innerWidth<768&&t.style.setProperty("--search-height",window.innerHeight+"px")},s=()=>{btf.addEventListenerPjax(document.querySelector("#search-button > .search"),"click",a)},o=e=>{if(""===e)return"";const t=e.indexOf("<mark>");let a=t-30,n=t+120,i="",s="";a<=0?(a=0,n=140):i="...",n>e.length?n=e.length:s="...";return i+e.substring(a,n)+s},l=GLOBAL_CONFIG.algolia;if(!(l.appId&&l.apiKey&&l.indexName))return console.error("Algolia setting is invalid!");const r=instantsearch({indexName:l.indexName,searchClient:algoliasearch(l.appId,l.apiKey),searchFunction(e){e.state.query&&e.search()}}),c=instantsearch.widgets.configure({hitsPerPage:5}),d=instantsearch.widgets.searchBox({container:"#algolia-search-input",showReset:!1,showSubmit:!1,placeholder:GLOBAL_CONFIG.algolia.languages.input_placeholder,showLoadingIndicator:!0}),h=instantsearch.widgets.hits({container:"#algolia-hits",templates:{item(e){const t=e.permalink?e.permalink:GLOBAL_CONFIG.root+e.path,a=e._highlightResult,n=a.contentStripTruncate?o(a.contentStripTruncate.value):a.contentStrip?o(a.contentStrip.value):a.content?o(a.content.value):"";return`\n          <a href="${t}" class="algolia-hit-item-link">\n          <span class="algolia-hits-item-title">${a.title.value||"no-title"}</span>\n          <p class="algolia-hit-item-content">${n}</p>\n          </a>`},empty:function(e){return'<div id="algolia-hits-empty">'+GLOBAL_CONFIG.algolia.languages.hits_empty.replace(/\$\{query}/,e.query)+"</div>"}}}),g=instantsearch.widgets.stats({container:"#algolia-info > .algolia-stats",templates:{text:function(e){return`<hr>${GLOBAL_CONFIG.algolia.languages.hits_stats.replace(/\$\{hits}/,e.nbHits).replace(/\$\{time}/,e.processingTimeMS)}`}}}),u=instantsearch.widgets.poweredBy({container:"#algolia-info > .algolia-poweredBy"}),p=instantsearch.widgets.pagination({container:"#algolia-pagination",totalPages:5,templates:{first:'<i class="fas fa-angle-double-left"></i>',last:'<i class="fas fa-angle-double-right"></i>',previous:'<i class="fas fa-angle-left"></i>',next:'<i class="fas fa-angle-right"></i>'}});r.addWidgets([c,d,h,g,u,p]),r.start(),s(),e.addEventListener("click",n),document.querySelector("#algolia-search .search-close-button").addEventListener("click",n),window.addEventListener("pjax:complete",(()=>{!btf.isHidden(e)&&n(),s()})),window.pjax&&r.on("render",(()=>{window.pjax.refresh(document.getElementById("algolia-hits"))}))}));
+window.addEventListener('load', () => {
+  const $searchMask = document.getElementById('search-mask')
+  const $searchDialog = document.querySelector('#algolia-search .search-dialog')
+
+  const openSearch = () => {
+    const bodyStyle = document.body.style
+    bodyStyle.width = '100%'
+    bodyStyle.overflow = 'hidden'
+    btf.animateIn($searchMask, 'to_show 0.5s')
+    btf.animateIn($searchDialog, 'titleScale 0.5s')
+    setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100)
+
+    // shortcut: ESC
+    document.addEventListener('keydown', function f (event) {
+      if (event.code === 'Escape') {
+        closeSearch()
+        document.removeEventListener('keydown', f)
+      }
+    })
+
+    fixSafariHeight()
+    window.addEventListener('resize', fixSafariHeight)
+  }
+
+  const closeSearch = () => {
+    const bodyStyle = document.body.style
+    bodyStyle.width = ''
+    bodyStyle.overflow = ''
+    btf.animateOut($searchDialog, 'search_close .5s')
+    btf.animateOut($searchMask, 'to_hide 0.5s')
+    window.removeEventListener('resize', fixSafariHeight)
+  }
+
+  // fix safari
+  const fixSafariHeight = () => {
+    if (window.innerWidth < 768) {
+      $searchDialog.style.setProperty('--search-height', window.innerHeight + 'px')
+    }
+  }
+
+  const searchClickFn = () => {
+    btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', openSearch)
+  }
+
+  const searchFnOnce = () => {
+    $searchMask.addEventListener('click', closeSearch)
+    document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
+  }
+
+  const cutContent = content => {
+    if (content === '') return ''
+
+    const firstOccur = content.indexOf('<mark>')
+
+    let start = firstOccur - 30
+    let end = firstOccur + 120
+    let pre = ''
+    let post = ''
+
+    if (start <= 0) {
+      start = 0
+      end = 140
+    } else {
+      pre = '...'
+    }
+
+    if (end > content.length) {
+      end = content.length
+    } else {
+      post = '...'
+    }
+
+    const matchContent = pre + content.substring(start, end) + post
+    return matchContent
+  }
+
+  const algolia = GLOBAL_CONFIG.algolia
+  const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
+  if (!isAlgoliaValid) {
+    return console.error('Algolia setting is invalid!')
+  }
+
+  const search = instantsearch({
+    indexName: algolia.indexName,
+    /* global algoliasearch */
+    searchClient: algoliasearch(algolia.appId, algolia.apiKey),
+    searchFunction (helper) {
+      helper.state.query && helper.search()
+    }
+  })
+
+  const configure = instantsearch.widgets.configure({
+    hitsPerPage: 5
+  })
+
+  const searchBox = instantsearch.widgets.searchBox({
+    container: '#algolia-search-input',
+    showReset: false,
+    showSubmit: false,
+    placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder,
+    showLoadingIndicator: true
+  })
+
+  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 content = result.contentStripTruncate
+          ? cutContent(result.contentStripTruncate.value)
+          : result.contentStrip
+            ? cutContent(result.contentStrip.value)
+            : result.content
+              ? cutContent(result.content.value)
+              : ''
+        return `
+          <a href="${link}" class="algolia-hit-item-link">
+          <span class="algolia-hits-item-title">${result.title.value || 'no-title'}</span>
+          <p class="algolia-hit-item-content">${content}</p>
+          </a>`
+      },
+      empty: function (data) {
+        return (
+          '<div id="algolia-hits-empty">' +
+          GLOBAL_CONFIG.algolia.languages.hits_empty.replace(/\$\{query}/, data.query) +
+          '</div>'
+        )
+      }
+    }
+  })
+
+  const stats = instantsearch.widgets.stats({
+    container: '#algolia-info > .algolia-stats',
+    templates: {
+      text: function (data) {
+        const stats = GLOBAL_CONFIG.algolia.languages.hits_stats
+          .replace(/\$\{hits}/, data.nbHits)
+          .replace(/\$\{time}/, data.processingTimeMS)
+        return (
+          `<hr>${stats}`
+        )
+      }
+    }
+  })
+
+  const powerBy = instantsearch.widgets.poweredBy({
+    container: '#algolia-info > .algolia-poweredBy'
+  })
+
+  const pagination = instantsearch.widgets.pagination({
+    container: '#algolia-pagination',
+    totalPages: 5,
+    templates: {
+      first: '<i class="fas fa-angle-double-left"></i>',
+      last: '<i class="fas fa-angle-double-right"></i>',
+      previous: '<i class="fas fa-angle-left"></i>',
+      next: '<i class="fas fa-angle-right"></i>'
+    }
+  })
+
+  search.addWidgets([configure, searchBox, hits, stats, powerBy, pagination]) // add the widgets to the instantsearch instance
+
+  search.start()
+
+  searchClickFn()
+  searchFnOnce()
+
+  window.addEventListener('pjax:complete', () => {
+    !btf.isHidden($searchMask) && closeSearch()
+    searchClickFn()
+  })
+
+  window.pjax && search.on('render', () => {
+    window.pjax.refresh(document.getElementById('algolia-hits'))
+  })
+})