hexo-theme-lnote 1.2.3 → 1.2.5

package/source/js/events.js

@@ -1,72 +1,72 @@
-LNote.events = {
-    registerNavbarEvent() {
-        const $navbar = document.getElementById('navbar')
-        if (!$navbar) {
-            return
-        }
-
-        function $navUd() {
-            const top = window.scrollY || document.documentElement.scrollTop
-            if (top > 0) {
-                $navbar.classList.remove('navbar-dark')
-                if (top > 50) {
-                    $navbar.classList.add('top-nav-collapse')
-                } else {
-                    $navbar.classList.remove('top-nav-collapse')
-                }
-            } else {
-                $navbar.classList.add('navbar-dark')
-            }
-        }
-        $navUd()
-        LNote.utils.listenScroll($navUd)
-
-        document
-            .getElementById('navbar-toggler-btn')
-            .addEventListener('click', (e) => {
-                document
-                    .querySelector('.animated-icon')
-                    .classList.toggle('open')
-                $navbar.classList.toggle('navbar-col-show')
-            })
-    },
-
-    /* registerImageLoadedEvent: function () {
-        if (!('NProgress' in window)) {
-            return
-        }
-
-        var bg = document.getElementById('banner')
-        if (bg) {
-            var src = bg.style.backgroundImage
-            var url = src.match(/\((.*?)\)/)[1].replace(/(['"])/g, '')
-            var img = new Image()
-            img.onload = function () {
-                window.NProgress && window.NProgress.inc(0.2)
-            }
-            img.src = url
-            if (img.complete) {
-                img.onload()
-            }
-        }
-
-        var notLazyImages = jQuery('main img:not([lazyload])')
-        var total = notLazyImages.length
-        for (const img of notLazyImages) {
-            const old = img.onload
-            img.onload = function () {
-                old && old()
-                window.NProgress && window.NProgress.inc(0.5 / total)
-                img.onload = null
-            }
-            if (img.complete) {
-                img.onload()
-            }
-        }
-    }, */
-}
-
-document.addEventListener('DOMContentLoaded', function () {
-    LNote.events.registerNavbarEvent()
-    // LNote.events.registerImageLoadedEvent()
-})
+LNote.events = {
+    registerNavbarEvent() {
+        const $navbar = document.getElementById('navbar')
+        if (!$navbar) {
+            return
+        }
+
+        function $navUd() {
+            const top = window.scrollY || document.documentElement.scrollTop
+            if (top > 0) {
+                $navbar.classList.remove('navbar-dark')
+                if (top > 50) {
+                    $navbar.classList.add('top-nav-collapse')
+                } else {
+                    $navbar.classList.remove('top-nav-collapse')
+                }
+            } else {
+                $navbar.classList.add('navbar-dark')
+            }
+        }
+        $navUd()
+        LNote.utils.listenScroll($navUd)
+
+        document
+            .getElementById('navbar-toggler-btn')
+            .addEventListener('click', (e) => {
+                document
+                    .querySelector('.animated-icon')
+                    .classList.toggle('open')
+                $navbar.classList.toggle('navbar-col-show')
+            })
+    },
+
+    /* registerImageLoadedEvent: function () {
+        if (!('NProgress' in window)) {
+            return
+        }
+
+        var bg = document.getElementById('banner')
+        if (bg) {
+            var src = bg.style.backgroundImage
+            var url = src.match(/\((.*?)\)/)[1].replace(/(['"])/g, '')
+            var img = new Image()
+            img.onload = function () {
+                window.NProgress && window.NProgress.inc(0.2)
+            }
+            img.src = url
+            if (img.complete) {
+                img.onload()
+            }
+        }
+
+        var notLazyImages = jQuery('main img:not([lazyload])')
+        var total = notLazyImages.length
+        for (const img of notLazyImages) {
+            const old = img.onload
+            img.onload = function () {
+                old && old()
+                window.NProgress && window.NProgress.inc(0.5 / total)
+                img.onload = null
+            }
+            if (img.complete) {
+                img.onload()
+            }
+        }
+    }, */
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    LNote.events.registerNavbarEvent()
+    // LNote.events.registerImageLoadedEvent()
+})

package/source/js/img-lazyload.js

@@ -1,10 +1,10 @@
-/* global LNote, CONFIG */
-
-(function(window, document) {
-  for (const each of document.querySelectorAll('img[lazyload]')) {
-    LNote.utils.waitElementVisible(each, function() {
-      each.removeAttribute('srcset');
-      each.removeAttribute('lazyload');
-    }, 2);
-  }
-})(window, document);
+/* global LNote, CONFIG */
+
+(function(window, document) {
+  for (const each of document.querySelectorAll('img[lazyload]')) {
+    LNote.utils.waitElementVisible(each, function() {
+      each.removeAttribute('srcset');
+      each.removeAttribute('lazyload');
+    }, 2);
+  }
+})(window, document);

package/source/js/local-search.js

@@ -1,70 +1,70 @@
-;(() => {
-    const $modal = document.getElementById('modalSearch')
-    const $input = document.getElementById('modalSearchInput')
-    const $result = document.getElementById('modalSearchResult')
-    let inputThol
-
-    let dataSource
-    function fetchData() {
-        if (dataSource != null) {
-            return
-        }
-        $result.innerHTML =
-            '<div class="m-auto text-center"><div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>'
-        fetch(LNote.root + 'content.json')
-            .then((rep) => rep.json())
-            .then((res) => (dataSource = res))
-            .finally(() => ($result.innerHTML = ''))
-    }
-
-    $modal.addEventListener('show.bs.modal', () => {
-        fetchData()
-        $input.focus()
-    })
-
-    $modal.addEventListener('hidden.bs.modal', () => {
-        console.log('hide')
-    })
-
-    $input.addEventListener('input', (e) => {
-        if (dataSource == null) {
-            return
-        }
-        clearTimeout(inputThol)
-        inputThol = setTimeout(() => {
-            const kw = e.target.value.trim()
-            if (kw === '') {
-              return
-            }
-            const matchedList = dataSource.filter((item) => {
-                return item.excerpt.includes(kw) || item.title.includes(kw)
-            })
-            if (matchedList.length > 0) {
-                e.target.classList.remove('invalid')
-                e.target.classList.add('valid')
-                const { root } = LNote
-                $result.innerHTML = matchedList
-                    .map((item) => {
-                        let { excerpt, title } = item
-                        if (excerpt.includes(kw)) {
-                            excerpt = excerpt.replace(
-                                kw,
-                                `<span class="text-success-emphasis">${kw}</span>`
-                            )
-                        } else if (title.includes(kw)) {
-                            title = title.replace(
-                                kw,
-                                `<span class="text-success-emphasis">${kw}</span>`
-                            )
-                        }
-
-                        return `<div><a href="${root}${item.path}" class="fs-5 link-warning">${title}</a><p>${excerpt}</p></div>`
-                    })
-                    .join('')
-            } else {
-                e.target.classList.remove('valid')
-                e.target.classList.add('invalid')
-            }
-        }, 500)
-    })
-})()
+;(() => {
+    const $modal = document.getElementById('modalSearch')
+    const $input = document.getElementById('modalSearchInput')
+    const $result = document.getElementById('modalSearchResult')
+    let inputThol
+
+    let dataSource
+    function fetchData() {
+        if (dataSource != null) {
+            return
+        }
+        $result.innerHTML =
+            '<div class="m-auto text-center"><div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>'
+        fetch(LNote.root + 'content.json')
+            .then((rep) => rep.json())
+            .then((res) => (dataSource = res))
+            .finally(() => ($result.innerHTML = ''))
+    }
+
+    $modal.addEventListener('show.bs.modal', () => {
+        fetchData()
+        $input.focus()
+    })
+
+    $modal.addEventListener('hidden.bs.modal', () => {
+        console.log('hide')
+    })
+
+    $input.addEventListener('input', (e) => {
+        if (dataSource == null) {
+            return
+        }
+        clearTimeout(inputThol)
+        inputThol = setTimeout(() => {
+            const kw = e.target.value.trim()
+            if (kw === '') {
+              return
+            }
+            const matchedList = dataSource.filter((item) => {
+                return item.excerpt.includes(kw) || item.title.includes(kw)
+            })
+            if (matchedList.length > 0) {
+                e.target.classList.remove('invalid')
+                e.target.classList.add('valid')
+                const { root } = LNote
+                $result.innerHTML = matchedList
+                    .map((item) => {
+                        let { excerpt, title } = item
+                        if (excerpt.includes(kw)) {
+                            excerpt = excerpt.replace(
+                                kw,
+                                `<span class="text-success-emphasis">${kw}</span>`
+                            )
+                        } else if (title.includes(kw)) {
+                            title = title.replace(
+                                kw,
+                                `<span class="text-success-emphasis">${kw}</span>`
+                            )
+                        }
+
+                        return `<div><a href="${root}${item.path}" class="fs-5 link-warning">${title}</a><p>${excerpt}</p></div>`
+                    })
+                    .join('')
+            } else {
+                e.target.classList.remove('valid')
+                e.target.classList.add('invalid')
+            }
+        }, 500)
+    })
+})()

package/source/js/post/copying-code.js

@@ -1,34 +1,34 @@
-;(() => {
-    if (!'ClipboardJS' in window) {
-        return
-    }
-
-    function genSVG(id) {
-        return `<svg width="1em" height="1em"><use xlink:href="#${id}"/></svg>`
-    }
-
-    const codes = document.querySelectorAll('.markdown-body .highlight')
-    codes.forEach((item) => {
-        const btn = document.createElement('button')
-        btn.type = 'button'
-        btn.classList.add('btn-clipboard')
-        btn.title = 'Copy to clipboard'
-        btn.innerHTML = genSVG('clipboard')
-        item.insertAdjacentElement('afterbegin', btn)
-    })
-
-    const clipboard = new ClipboardJS('.btn-clipboard', {
-        target: function (trigger) {
-            return trigger.parentNode.getElementsByTagName('code')[0]
-        },
-    })
-    clipboard.on('success', function (e) {
-        e.clearSelection()
-        e.trigger.innerHTML = genSVG('check')
-        e.trigger.title = 'Copied!'
-        setTimeout(function () {
-            e.trigger.innerHTML = genSVG('clipboard')
-            e.trigger.title = 'Copy to clipboard'
-        }, 2000)
-    })
-})()
+;(() => {
+    if (!'ClipboardJS' in window) {
+        return
+    }
+
+    function genSVG(id) {
+        return `<svg width="1em" height="1em"><use xlink:href="#${id}"/></svg>`
+    }
+
+    const codes = document.querySelectorAll('.markdown-body .highlight')
+    codes.forEach((item) => {
+        const btn = document.createElement('button')
+        btn.type = 'button'
+        btn.classList.add('btn-clipboard')
+        btn.title = 'Copy to clipboard'
+        btn.innerHTML = genSVG('clipboard')
+        item.insertAdjacentElement('afterbegin', btn)
+    })
+
+    const clipboard = new ClipboardJS('.btn-clipboard', {
+        target: function (trigger) {
+            return trigger.parentNode.getElementsByTagName('code')[0]
+        },
+    })
+    clipboard.on('success', function (e) {
+        e.clearSelection()
+        e.trigger.innerHTML = genSVG('check')
+        e.trigger.title = 'Copied!'
+        setTimeout(function () {
+            e.trigger.innerHTML = genSVG('clipboard')
+            e.trigger.title = 'Copy to clipboard'
+        }, 2000)
+    })
+})()

package/source/js/post/enable.js

@@ -1,8 +1,6 @@
-;(() => {
-    const popoverTriggerList = document.querySelectorAll(
-        '[data-bs-toggle="popover"]'
-    )
-    const popoverList = [...popoverTriggerList].map(
-        (popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl)
-    )
-})()
+const popoverTriggerList = document.querySelectorAll(
+    '[data-bs-toggle="popover"]'
+)
+const popoverList = [...popoverTriggerList].map(
+    (popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl)
+)

package/source/js/post/img-swipe-bf.js

@@ -1,47 +1,47 @@
-;(() => {
-    const imgs = document.querySelectorAll('.markdown-body img')
-    const promiseds = Array.prototype.map.call(imgs, (item) => {
-        return new Promise((resolve, reject) => {
-            const src = item.getAttribute('src')
-            const __img = new Image()
-            __img.onload = function () {
-                const a = document.createElement('a')
-                a.href = src
-                a.target = '_blank'
-                a.setAttribute('data-pswp-src', src)
-                a.setAttribute('data-pswp-width', __img.width)
-                a.setAttribute('data-pswp-height', __img.height)
-                const parentNode = item.parentNode
-                parentNode.removeChild(item)
-                a.appendChild(item)
-                parentNode.appendChild(a)
-                resolve()
-            }
-            __img.onerror = function () {
-                reject()
-            }
-            __img.src = src
-        })
-    })
-
-    Promise.allSettled(promiseds).then(() => {
-        const lightbox = new PhotoSwipeLightbox({
-            gallery: '#board',
-            children: 'a[data-pswp-src]',
-            pswpModule: () => PhotoSwipe,
-            wheelToZoom: true,
-        })
-        lightbox.init()
-        /* lightbox.on('initialLayout', () => {
-            $('.pswp').on('contextmenu.fb', function (e) {
-                if (e.button == 2) {
-                    e.preventDefault()
-                }
-                return true
-            })
-        }) */
-        /* lightbox.on('destroy', () => {
-      console.log('destroy');
-    }); */
-    })
-})()
+;(() => {
+    const imgs = document.querySelectorAll('.markdown-body img')
+    const promiseds = Array.prototype.map.call(imgs, (item) => {
+        return new Promise((resolve, reject) => {
+            const src = item.getAttribute('src')
+            const __img = new Image()
+            __img.onload = function () {
+                const a = document.createElement('a')
+                a.href = src
+                a.target = '_blank'
+                a.setAttribute('data-pswp-src', src)
+                a.setAttribute('data-pswp-width', __img.width)
+                a.setAttribute('data-pswp-height', __img.height)
+                const parentNode = item.parentNode
+                parentNode.removeChild(item)
+                a.appendChild(item)
+                parentNode.appendChild(a)
+                resolve()
+            }
+            __img.onerror = function () {
+                reject()
+            }
+            __img.src = src
+        })
+    })
+
+    Promise.allSettled(promiseds).then(() => {
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: '#board',
+            children: 'a[data-pswp-src]',
+            pswpModule: () => PhotoSwipe,
+            wheelToZoom: true,
+        })
+        lightbox.init()
+        /* lightbox.on('initialLayout', () => {
+            $('.pswp').on('contextmenu.fb', function (e) {
+                if (e.button == 2) {
+                    e.preventDefault()
+                }
+                return true
+            })
+        }) */
+        /* lightbox.on('destroy', () => {
+      console.log('destroy');
+    }); */
+    })
+})()

package/source/js/post/img-swipe.js

@@ -1,35 +1,81 @@
-import PhotoSwipeLightbox from 'https://lib.baomitu.com/photoswipe/5.4.2/photoswipe-lightbox.esm.min.js';
-
-const imgs = document.querySelectorAll('.markdown-body img')
-const promiseds = Array.prototype.map.call(imgs, (item) => {
-    return new Promise((resolve, reject) => {
-        const src = item.getAttribute('src')
-        const __img = new Image()
-        __img.onload = function () {
-            const a = document.createElement('a')
-            a.href = src
-            a.target = '_blank'
-            a.setAttribute('data-pswp-src', src)
-            a.setAttribute('data-pswp-width', __img.width)
-            a.setAttribute('data-pswp-height', __img.height)
-            const parentNode = item.parentNode
-            parentNode.removeChild(item)
-            a.appendChild(item)
-            parentNode.appendChild(a)
-            resolve()
-        }
-        __img.onerror = function () {
-            reject()
-        }
-        __img.src = src
-    })
-})
-Promise.allSettled(promiseds).then(() => {
-    const lightbox = new PhotoSwipeLightbox({
-        gallery: '#board',
-        children: 'a[data-pswp-src]',
-        pswpModule: () => import('//lib.baomitu.com/photoswipe/5.4.2/photoswipe.esm.min.js'),
-        wheelToZoom: true,
-    })
-    lightbox.init()
-})
+import PhotoSwipeLightbox from '//lib.baomitu.com/photoswipe/5.4.2/photoswipe-lightbox.esm.min.js'
+
+const lightbox = new PhotoSwipeLightbox({
+    pswpModule: () => import('//lib.baomitu.com/photoswipe/5.4.2/photoswipe.esm.min.js'),
+    wheelToZoom: true,
+})
+const groups = []
+
+const imgClick = (event) => {
+    const dataSwipeI = Number.parseInt(event.target.getAttribute('data-swipe-i'))
+    const dataSwipeGi = event.target.getAttribute('data-swipe-gi')
+    lightbox.loadAndOpen(dataSwipeI, groups[dataSwipeGi])
+}
+
+function imgToData($img, groupIndex, index) {
+    return new Promise((resolve, reject) => {
+        $img.setAttribute('data-swipe-gi', groupIndex)
+        $img.setAttribute('data-swipe-i', index)
+        const src = $img.getAttribute('src')
+        const alt = $img.getAttribute('alt')
+        const data = { src, alt }
+        const loadDone = () => {
+            groups[groupIndex][index] = {
+                ...data,
+                width: $img.naturalWidth,
+                height: $img.naturalHeight,
+            }
+            resolve()
+            $img.onclick = imgClick
+        }
+        if ($img.complete) {
+            loadDone()
+        } else {
+            $img.onload = loadDone
+        }
+
+        $img.onerror = () => {
+            reject()
+        }
+    })
+}
+
+const promiseds = []
+
+document.querySelectorAll('.img-swipe-single').forEach($img => {
+    const groupIndex = groups.length
+    groups.push([{}])
+    promiseds.push(imgToData($img, groupIndex, 0))
+})
+
+document.querySelectorAll('.img-swipe-group').forEach($group => {
+    const groupIndex = groups.length
+    groups.push([])
+    $group.querySelectorAll('img').forEach(($img, index) => {
+        groups[groupIndex].push({})
+        promiseds.push(imgToData($img, groupIndex, index))
+    })
+})
+
+if (promiseds.length === 0) {
+    throw new Error('empty img')
+}
+
+Promise.allSettled(promiseds).then(() => {
+    lightbox.on('uiRegister', () => {
+        lightbox.pswp.ui.registerElement({
+            name: 'custom-caption',
+            className: 'lnote-lightbox-caption',
+            order: 9,
+            isButton: false,
+            appendTo: 'root',
+            html: 'Caption text',
+            onInit(el, pswp) {
+                pswp.on('change', () => {
+                    el.innerHTML = `<div>${pswp.currSlide.data.alt}</div>`
+                })
+            },
+        })
+    })
+    lightbox.init()
+})

package/source/js/post/mermaiding.js

@@ -1,13 +1,9 @@
-;(() => {
-    if (!'mermaid' in window) {
-        return
-    }
-    let theme = document.documentElement.getAttribute('data-bs-theme')
-    if (theme !== 'dark') {
-        theme = 'forest'
-    }
-    mermaid.initialize({
-        theme,
-    })
-    mermaid.init()
-})()
+let theme = document.documentElement.getAttribute('data-bs-theme')
+if (theme !== 'dark') {
+    theme = 'forest'
+}
+mermaid.initialize({
+    theme,
+    startOnLoad: true
+})
+mermaid.init()