https://hoshino-yumetsuki.github.io/js/main/post.js

1"use strict"
2
3window.AcrypleMainPost = (() => {
4  const addHighlightTool = () => {
5    if (typeof GLOBAL_CONFIG === "undefined") return
6
7    const highLight = GLOBAL_CONFIG.highlight
8    if (!highLight) return
9
10    const isHighlightCopy = highLight.highlightCopy
11    const isHighlightLang = highLight.highlightLang
12    const isHighlightShrink =
13      typeof GLOBAL_CONFIG_SITE !== "undefined" ? GLOBAL_CONFIG_SITE.isHighlightShrink : undefined
14    const highlightHeightLimit = highLight.highlightHeightLimit
15    const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
16    const figureHighlight =
17      highLight.plugin === "highlighjs"
18        ? document.querySelectorAll("figure.highlight")
19        : document.querySelectorAll('pre[class*="language-"]')
20
21    if (!((isShowTool || highlightHeightLimit) && figureHighlight.length)) return
22
23    const isPrismjs = highLight.plugin === "prismjs"
24
25    let highlightShrinkEle = ""
26    let highlightCopyEle = ""
27    const highlightShrinkClass = isHighlightShrink === true ? "closed" : ""
28
29    if (isHighlightShrink !== undefined) {
30      highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>`
31    }
32
33    if (isHighlightCopy) {
34      highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>'
35    }
36
37    const copy = async (text, ctx) => {
38      try {
39        await navigator.clipboard.writeText(text)
40        if (GLOBAL_CONFIG.Snackbar !== undefined) {
41          btf.snackbarShow(GLOBAL_CONFIG.copy.success)
42        } else {
43          const prevEle = ctx.previousElementSibling
44          prevEle.innerText = GLOBAL_CONFIG.copy.success
45          prevEle.classList.add("show")
46          setTimeout(() => {
47            prevEle.classList.remove("show")
48          }, 700)
49        }
50      } catch {
51        if (GLOBAL_CONFIG.Snackbar !== undefined) {
52          btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
53        } else {
54          ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport
55        }
56      }
57    }
58
59    const highlightCopyFn = (ele) => {
60      const buttonParent = ele.parentNode
61      buttonParent.classList.add("copy-true")
62      const selection = window.getSelection()
63      const range = document.createRange()
64      if (isPrismjs) {
65        range.selectNodeContents(buttonParent.querySelectorAll("pre code")[0])
66      } else {
67        range.selectNodeContents(buttonParent.querySelectorAll("table .code pre")[0])
68      }
69      selection.removeAllRanges()
70      selection.addRange(range)
71      const text = selection.toString()
72      void copy(text, ele.lastChild)
73      selection.removeAllRanges()
74      buttonParent.classList.remove("copy-true")
75    }
76
77    const highlightShrinkFn = (ele) => {
78      const nextElements = [...ele.parentNode.children].slice(1)
79      ele.firstChild.classList.toggle("closed")
80      const shouldShow = btf.isHidden(nextElements[nextElements.length - 1])
81      nextElements.forEach((element) => {
82        element.style.display = shouldShow ? "block" : "none"
83      })
84    }
85
86    const highlightToolsFn = function (e) {
87      const target = e.target.classList
88      if (target.contains("expand")) highlightShrinkFn(this)
89      else if (target.contains("copy-button")) highlightCopyFn(this)
90    }
91
92    const expandCode = function () {
93      this.classList.toggle("expand-done")
94    }
95
96    const createEle = (lang, item, service) => {
97      const fragment = document.createDocumentFragment()
98
99      if (isShowTool) {
100        const hlTools = document.createElement("div")
101        hlTools.className = `highlight-tools ${highlightShrinkClass}`
102        hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle
103        hlTools.addEventListener("click", highlightToolsFn)
104        fragment.appendChild(hlTools)
105      }
106
107      if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) {
108        const ele = document.createElement("div")
109        ele.className = "code-expand-btn"
110        ele.innerHTML = '<i class="fas fa-angle-double-down"></i>'
111        ele.addEventListener("click", expandCode)
112        fragment.appendChild(ele)
113      }
114
115      if (service === "hl") {
116        item.insertBefore(fragment, item.firstChild)
117      } else {
118        item.parentNode.insertBefore(fragment, item)
119      }
120    }
121
122    if (isHighlightLang) {

123      if (isPrismjs) {
124        figureHighlight.forEach((item) => {
125          const langName = item.getAttribute("data-language") || "Code"
126          createEle(`<div class="code-lang">${langName}</div>`, item)
127          btf.wrap(item, "figure", { class: "highlight" })
128        })
129      } else {
130        figureHighlight.forEach((item) => {
131          let langName = item.getAttribute("class").split(" ")[1]
132          if (langName === "plain" || langName === undefined) langName = "Code"
133          createEle(`<div class="code-lang">${langName}</div>`, item, "hl")
134        })
135      }
136    } else if (isPrismjs) {
137      figureHighlight.forEach((item) => {
138        btf.wrap(item, "figure", { class: "highlight" })
139        createEle("", item)
140      })
141    } else {
142      figureHighlight.forEach((item) => {
143        createEle("", item, "hl")
144      })
145    }
146  }
147
148  const addTableWrap = () => {
149    const tables = document.querySelectorAll(
150      "#article-container :not(.highlight) > table, #article-container > table"
151    )
152    tables.forEach((item) => {
153      btf.wrap(item, "div", { class: "table-wrap" })
154    })
155  }
156
157  const clickFnOfTagHide = () => {
158    const hideInline = document.querySelectorAll("#article-container .hide-button")
159    hideInline.forEach((item) => {
160      item.addEventListener("click", function () {
161        this.classList.add("open")
162        const galleries = this.nextElementSibling.querySelectorAll(".fj-gallery")
163        if (galleries.length) btf.initJustifiedGallery(galleries)
164      })
165    })
166  }
167
168  const tabs = {
169    clickFnOfTabs: () => {
170      document.querySelectorAll("#article-container .tab > button").forEach((item) => {
171        item.addEventListener("click", function () {
172          const tabItem = this.parentNode
173          if (tabItem.classList.contains("active")) return
174
175          const tabContent = tabItem.parentNode.nextElementSibling
176          const sibling = btf.siblings(tabItem, ".active")[0]
177          sibling && sibling.classList.remove("active")
178          tabItem.classList.add("active")
179
180          const tabId = this.getAttribute("data-href").replace("#", "")
181          ;[...tabContent.children].forEach((child) => {
182            child.classList.toggle("active", child.id === tabId)
183          })
184
185          const tabGallery = tabContent.querySelectorAll(`#${tabId} .fj-gallery`)
186          if (tabGallery.length > 0) {
187            btf.initJustifiedGallery(tabGallery)
188          }
189        })
190      })
191    },
192    backToTop: () => {
193      document.querySelectorAll("#article-container .tabs .tab-to-top").forEach((item) => {
194        item.addEventListener("click", function () {
195          btf.scrollToDest(btf.getEleTop(btf.getParents(this, ".tabs")), 300)
196        })
197      })
198    }
199  }
200
201  const toggleCardCategory = () => {
202    const cardCategory = document.querySelectorAll(
203      "#aside-cat-list .card-category-list-item.parent i"
204    )
205    cardCategory.forEach((item) => {
206      item.addEventListener("click", function (e) {
207        e.preventDefault()
208        this.classList.toggle("expand")
209        const parentElement = this.parentNode.nextElementSibling
210        if (btf.isHidden(parentElement)) {
211          parentElement.style.display = "block"
212        } else {
213          parentElement.style.display = "none"
214        }
215      })
216    })
217  }
218
219  const switchComments = () => {
220    let switchDone = false
221    const switchBtn = document.querySelector("#comment-switch > .switch-btn")
222    if (!switchBtn) return
223
224    switchBtn.addEventListener("click", function () {
225      this.classList.toggle("move")
226      document.querySelectorAll("#post-comment > .comment-wrap > div").forEach((item) => {
227        if (btf.isHidden(item)) {
228          item.classList.remove("comment-wrap-hide")
229          item.classList.add("comment-wrap-switch")
230        } else {
231          item.classList.remove("comment-wrap-switch")
232          item.classList.add("comment-wrap-hide")
233        }
234      })
235
236      if (!switchDone && typeof loadOtherComment === "function") {
237        switchDone = true
238        loadOtherComment()
239      }
240    })
241  }
242
243  const addPostOutdateNotice = () => {
244    const data = GLOBAL_CONFIG.noticeOutdate
245    const diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
246    if (diffDay < data.limitDay) return
247
248    const ele = document.createElement("div")
249    ele.className = "post-outdate-notice"
250    ele.textContent = `${data.messagePrev} ${diffDay} ${data.messageNext}`
251    const targetEle = document.getElementById("article-container")
252    if (data.position === "top") {
253      targetEle.insertBefore(ele, targetEle.firstChild)
254    } else {
255      targetEle.appendChild(ele)
256    }
257  }
258
259  const lazyloadImg = () => {
260    window.lazyLoadInstance = new LazyLoad({
261      elements_selector: "img",
262      threshold: 0,
263      data_src: "lazy-src"
264    })
265  }
266
267  const addCopyright = () => {}
268
269  return {
270    addHighlightTool,
271    addTableWrap,

272    clickFnOfTagHide,
273    tabs,
274    toggleCardCategory,
275    switchComments,
276    addPostOutdateNotice,
277    lazyloadImg,
278    addCopyright
279  }
280})()