`
- result += `})
`
+ if (relatedPosts[i].cover_type === 'img') {
+ result += ``
+ } else {
+ result += ``
+ }
if (dateType === 'created') {
result += `
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
index cf79eab..21539ce 100644
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -36,11 +36,11 @@
.postImgHover
&:hover
- img
+ .cover
opacity: .8
transform: scale(1.1)
- img
+ .cover
position: absolute
width: 100%
height: 100%
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index 8296759..d7c71c3 100644
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -33,6 +33,7 @@
--pseudo-hover: $pseudo-hover
--headline-presudo: #a0a0a0
--scrollbar-color: $scrollbar-color
+ --default-bg-color: $theme-color
body
position: relative
@@ -165,7 +166,7 @@ a
if $site-name-font
#site-title,
#site-subtitle,
- #site-name,
+ .site-name,
#aside-content .author-info__name,
#aside-content .author-info__description
font-family: $site-name-font
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 5d7e6ca..5d53a34 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -115,7 +115,7 @@
width: w = 4.2em
height: w
- & > img
+ :first-child
@extend .imgHover
.content
diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl
index 3fb1d39..55cbc8c 100644
--- a/source/css/_layout/footer.styl
+++ b/source/css/_layout/footer.styl
@@ -1,6 +1,6 @@
#footer
position: relative
- background: $light-blue
+ background-color: $light-blue
background-attachment: scroll
background-position: bottom
background-size: cover
diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl
index c7d4ca3..aba4c44 100644
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -137,8 +137,20 @@
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
+ &.fixed
+ top: 0
+ transition: all .5s
+
+ #blog-info
+ color: var(--font-color)
+
+ &:hover
+ color: $light-blue
+
+ .site-name
+ text-shadow: none
+
a,
- #site-name,
#toggle-menu
color: var(--font-color)
text-shadow: none
@@ -147,7 +159,7 @@
color: $light-blue
&.nav-visible
- #nav
+ #nav:not(.fixed)
transition: all .5s
transform: translate3d(0, 100%, 0)
@@ -253,8 +265,18 @@
&.show
opacity: 1
- #blog_name
+ &.fixed
+ position: fixed
+
+ #blog-info
flex: 1
+ color: var(--light-grey)
+ @extend .limit-one-line
+
+ .site-icon
+ margin-right: 6px
+ height: 36px
+ vertical-align: middle
#toggle-menu
display: none
@@ -270,10 +292,9 @@
&:hover
color: var(--white)
- #site-name
+ .site-name
text-shadow: 2px 2px 4px rgba($dark-black, .15)
font-weight: bold
- cursor: pointer
.menus_items
display: inline
diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl
index 6daea56..0c25205 100644
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -47,3 +47,22 @@
+maxWidth900()
#hide-aside-btn
display: none
+
+ if hexo-config('rightside_scroll_percent')
+ #go-up
+ .scroll-percent
+ display: none
+
+ &.show-percent
+ .scroll-percent
+ display: block
+
+ & + i
+ display: none
+
+ &:hover
+ .scroll-percent
+ display: none
+
+ & + i
+ display: block
diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl
index 88da5d3..baca44d 100644
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -106,7 +106,7 @@ if hexo-config('readmode')
color: var(--font-color) !important
.hljs
- background: var(-highlight-bg) !important
+ background: var(--highlight-bg) !important
h1,
h2,
diff --git a/source/css/_page/archives.styl b/source/css/_page/archives.styl
index 4575fbb..309e00c 100644
--- a/source/css/_page/archives.styl
+++ b/source/css/_page/archives.styl
@@ -101,7 +101,7 @@
width: 80px
height: 80px
- img
+ :first-child
@extend .imgHover
&-info
diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl
index 9c8153c..6beba31 100644
--- a/source/css/_page/homepage.styl
+++ b/source/css/_page/homepage.styl
@@ -15,7 +15,7 @@
height: auto
&:hover
- img.post_bg
+ img.post-bg
transform: scale(1.1)
&.ads-wrap
@@ -31,7 +31,7 @@
width: 100%
height: 230px
- img.post_bg
+ .post-bg
@extend .imgHover
&.right
diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl
index e9f06ce..69530ef 100644
--- a/source/css/_search/algolia.styl
+++ b/source/css/_search/algolia.styl
@@ -28,7 +28,7 @@
.algolia-hit-item-content
margin: 0 0 8px
- word-break: break-all
+ word-break: break-word
.ais-Pagination
margin: 20px 0 0
@@ -69,6 +69,8 @@
#algolia-hits
> div
overflow-y: scroll
+ margin: 0 -20px
+ padding: 0 22px
+minWidth768()
max-height: calc(80vh - 240px)
diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl
index 36dd38d..3e707a9 100644
--- a/source/css/_search/local-search.styl
+++ b/source/css/_search/local-search.styl
@@ -51,15 +51,17 @@
color: $search-color
.search-result
- margin: 0 8px 8px 0
- word-break: break-all
+ margin: 0 0 8px
+ word-break: break-word
.search-keyword
color: $search-keyword-highlight
font-weight: bold
.search-result-list
- overflow-y: auto
+ overflow-y: overlay
+ margin: 0 -20px
+ padding: 0 22px
max-height: calc(80vh - 130px)
+maxWidth768()
diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl
index 2be3d5d..6fe035f 100644
--- a/source/css/_tags/gallery.styl
+++ b/source/css/_tags/gallery.styl
@@ -94,9 +94,46 @@
overflow: auto
padding: 0 0 16px
- .fj-gallery
+ .gallery
margin: 0 0 16px
- opacity: 0
+ text-align: center
- .img-alt
- display: none
\ No newline at end of file
+ .fj-gallery
+ opacity: 0
+
+ .img-alt
+ display: none
+
+ &.lazyload
+ + button
+ display: inline-block
+
+ .gallery-data
+ display: none
+
+ button
+ display: none
+ margin-top: 25px
+ padding: 10px
+ width: 9em
+ border-radius: 5px
+ background: var(--btn-bg)
+ color: var(--btn-color)
+ font-weight: bold
+ font-size: 1.1em
+ transition: all .3s
+
+ & > *
+ transition: all .4s
+
+ i
+ width: 0
+ opacity: 0
+
+ &:hover
+ background: var(--btn-hover-color)
+
+ i
+ margin-left: 2px
+ width: 20px
+ opacity: 1
diff --git a/source/js/main.js b/source/js/main.js
index 2e29ac8..80cff14 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,21 +1,24 @@
document.addEventListener('DOMContentLoaded', function () {
- let blogNameWidth, menusWidth, searchWidth, $nav
+ let headerContentWidth, $nav
let mobileSidebarOpen = false
- const adjustMenu = (init) => {
+ const adjustMenu = init => {
+ const getAllWidth = ele => {
+ let width = 0
+ ele.length && Array.from(ele).forEach(i => { width += i.offsetWidth })
+ return width
+ }
+
if (init) {
- blogNameWidth = document.getElementById('site-name').offsetWidth
- const $menusEle = document.querySelectorAll('#menus .menus_item')
- menusWidth = 0
- $menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth })
- const $searchEle = document.querySelector('#search-button')
- searchWidth = $searchEle ? $searchEle.offsetWidth : 0
+ const blogInfoWidth = getAllWidth(document.querySelector('#blog-info > a').children)
+ const menusWidth = getAllWidth(document.getElementById('menus').children)
+ headerContentWidth = blogInfoWidth + menusWidth
$nav = document.getElementById('nav')
}
let hideMenuIndex = ''
if (window.innerWidth <= 768) hideMenuIndex = true
- else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
+ else hideMenuIndex = headerContentWidth > $nav.offsetWidth - 120
if (hideMenuIndex) {
$nav.classList.add('hide-menu')
@@ -229,14 +232,42 @@ document.addEventListener('DOMContentLoaded', function () {
* justified-gallery 圖庫排版
*/
const runJustifiedGallery = function (ele) {
- ele.forEach(item => {
- const $imgList = item.querySelectorAll('img')
-
- $imgList.forEach(i => {
- const dataLazySrc = i.getAttribute('data-lazy-src')
- if (dataLazySrc) i.src = dataLazySrc
- btf.wrap(i, 'div', { class: 'fj-gallery-item' })
+ const htmlStr = arr => {
+ let str = ''
+ const replaceDq = str => str.replace(/"/g, '"') // replace double quotes to "
+ arr.forEach(i => {
+ const alt = i.alt ? `alt="${replaceDq(i.alt)}"` : ''
+ const title = i.title ? `title="${replaceDq(i.title)}"` : ''
+ str += `
`
})
+ return str
+ }
+
+ const lazyloadFn = (i, arr) => {
+ const loadItem = i.getAttribute('data-limit')
+ const arrLength = arr.length
+ if (arrLength > loadItem) i.insertAdjacentHTML('beforeend', htmlStr(arr.splice(0, loadItem)))
+ else {
+ i.insertAdjacentHTML('beforeend', htmlStr(arr))
+ i.classList.remove('lazyload')
+ }
+ return arrLength > loadItem ? loadItem : arrLength
+ }
+
+ ele.forEach(item => {
+ const arr = JSON.parse(item.querySelector('.gallery-data').textContent)
+ if (!item.classList.contains('lazyload')) item.innerHTML = htmlStr(arr)
+ else {
+ lazyloadFn(item, arr)
+ const limit = item.getAttribute('data-limit')
+ const clickBtnFn = () => {
+ const lastItemLength = lazyloadFn(item, arr)
+ fjGallery(item, 'appendImages', item.querySelectorAll(`.fj-gallery-item:nth-last-child(-n+${lastItemLength})`))
+ btf.loadLightbox(item.querySelectorAll('img'))
+ lastItemLength < limit && item.nextElementSibling.removeEventListener('click', clickBtnFn)
+ }
+ item.nextElementSibling.addEventListener('click', clickBtnFn)
+ }
})
if (window.fjGallery) {
@@ -244,13 +275,24 @@ document.addEventListener('DOMContentLoaded', function () {
return
}
- const newEle = document.createElement('link')
- newEle.rel = 'stylesheet'
- newEle.href = GLOBAL_CONFIG.source.justifiedGallery.css
- document.body.appendChild(newEle)
+ getCSS(`${GLOBAL_CONFIG.source.justifiedGallery.css}`)
getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) })
}
+ /**
+ * rightside scroll percent
+ */
+ const rightsideScrollPercent = currentTop => {
+ const perNum = btf.getScrollPercent(currentTop, document.body)
+ const $goUp = document.getElementById('go-up')
+ if (perNum < 95) {
+ $goUp.classList.add('show-percent')
+ $goUp.querySelector('.scroll-percent').textContent = perNum
+ } else {
+ $goUp.classList.remove('show-percent')
+ }
+ }
+
/**
* 滾動處理
*/
@@ -276,40 +318,43 @@ document.addEventListener('DOMContentLoaded', function () {
const $header = document.getElementById('page-header')
const isChatBtnHide = typeof chatBtnHide === 'function'
const isChatBtnShow = typeof chatBtnShow === 'function'
+ const isShowPercent = GLOBAL_CONFIG.percent.rightside
const scrollTask = btf.throttle(() => {
- const currentTop = window.scrollY || document.documentElement.scrollTop
- const isDown = scrollDirection(currentTop)
- if (currentTop > 56) {
- if (isDown) {
- if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
- if (isChatBtnShow && isChatShow === true) {
- chatBtnHide()
- isChatShow = false
- }
- } else {
- if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
- if (isChatBtnHide && isChatShow === false) {
- chatBtnShow()
- isChatShow = true
- }
- }
- $header.classList.add('nav-fixed')
- if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
- $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
+ const currentTop = window.scrollY || document.documentElement.scrollTop
+ const isDown = scrollDirection(currentTop)
+ if (currentTop > 56) {
+ if (isDown) {
+ if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
+ if (isChatBtnShow && isChatShow === true) {
+ chatBtnHide()
+ isChatShow = false
}
} else {
- if (currentTop === 0) {
- $header.classList.remove('nav-fixed', 'nav-visible')
+ if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
+ if (isChatBtnHide && isChatShow === false) {
+ chatBtnShow()
+ isChatShow = true
}
- $rightside.style.cssText = "opacity: ''; transform: ''"
}
-
- if (document.body.scrollHeight <= innerHeight) {
+ $header.classList.add('nav-fixed')
+ if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
$rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
}
- }, 200)
-
+ } else {
+ if (currentTop === 0) {
+ $header.classList.remove('nav-fixed', 'nav-visible')
+ }
+ $rightside.style.cssText = "opacity: ''; transform: ''"
+ }
+
+ isShowPercent && rightsideScrollPercent(currentTop)
+
+ if (document.body.scrollHeight <= innerHeight) {
+ $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
+ }
+ }, 200)
+
window.scrollCollect = scrollTask
window.addEventListener('scroll', scrollCollect)
@@ -325,26 +370,15 @@ document.addEventListener('DOMContentLoaded', function () {
if (!($article && (isToc || isAnchor))) return
- let $tocLink, $cardToc, scrollPercent, autoScrollToc, isExpand
+ let $tocLink, $cardToc, autoScrollToc, $tocPercentage, isExpand
if (isToc) {
const $cardTocLayout = document.getElementById('card-toc')
$cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
$tocLink = $cardToc.querySelectorAll('.toc-link')
- const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
+ $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
isExpand = $cardToc.classList.contains('is-expand')
- scrollPercent = currentTop => {
- const docHeight = $article.clientHeight
- const winHeight = document.documentElement.clientHeight
- const headerHeight = $article.offsetTop
- const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
- const scrollPercent = (currentTop - headerHeight) / (contentMath)
- const scrollPercentRounded = Math.round(scrollPercent * 100)
- const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
- $tocPercentage.textContent = percentage
- }
-
window.mobileToc = {
open: () => {
$cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px'
@@ -433,13 +467,14 @@ document.addEventListener('DOMContentLoaded', function () {
}
// main of scroll
- window.tocScrollFn = function () {
- return btf.throttle(function () {
- const currentTop = window.scrollY || document.documentElement.scrollTop
- isToc && scrollPercent(currentTop)
- findHeadPosition(currentTop)
- }, 100)()
- }
+ window.tocScrollFn = btf.throttle(() => {
+ const currentTop = window.scrollY || document.documentElement.scrollTop
+ if (isToc && GLOBAL_CONFIG.percent.toc) {
+ $tocPercentage.textContent = btf.getScrollPercent(currentTop, $article)
+ }
+ findHeadPosition(currentTop)
+ }, 100)
+
window.addEventListener('scroll', tocScrollFn)
}
diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js
index f0b9f3a..338c617 100644
--- a/source/js/search/algolia.js
+++ b/source/js/search/algolia.js
@@ -56,7 +56,7 @@ window.addEventListener('load', () => {
post = '...'
}
- let matchContent = pre + content.substring(start, end) + post
+ const matchContent = pre + content.substring(start, end) + post
return matchContent
}
@@ -68,10 +68,11 @@ window.addEventListener('load', () => {
const search = instantsearch({
indexName: algolia.indexName,
+ /* global algoliasearch */
searchClient: algoliasearch(algolia.appId, algolia.apiKey),
- searchFunction(helper) {
+ searchFunction (helper) {
helper.state.query && helper.search()
- },
+ }
})
const configure = instantsearch.widgets.configure({
@@ -89,16 +90,16 @@ window.addEventListener('load', () => {
const hits = instantsearch.widgets.hits({
container: '#algolia-hits',
templates: {
- item(data) {
+ 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)
- : ''
+ ? cutContent(result.contentStripTruncate.value)
+ : result.contentStrip
+ ? cutContent(result.contentStrip.value)
+ : result.content
+ ? cutContent(result.content.value)
+ : ''
return `
${result.title.value || 'no-title'}
@@ -130,7 +131,7 @@ window.addEventListener('load', () => {
})
const powerBy = instantsearch.widgets.poweredBy({
- container: '#algolia-info > .algolia-poweredBy',
+ container: '#algolia-info > .algolia-poweredBy'
})
const pagination = instantsearch.widgets.pagination({
@@ -144,8 +145,7 @@ window.addEventListener('load', () => {
}
})
-
- search.addWidgets([configure,searchBox,hits,stats,powerBy,pagination]) // add the widgets to the instantsearch instance
+ search.addWidgets([configure, searchBox, hits, stats, powerBy, pagination]) // add the widgets to the instantsearch instance
search.start()
diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js
index 6c1ca7d..11aa72a 100644
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -56,7 +56,7 @@ window.addEventListener('load', () => {
const res = await response.text()
const t = await new window.DOMParser().parseFromString(res, 'text/xml')
const a = await t
- data = [...a.querySelectorAll('entry')].map(item =>{
+ data = [...a.querySelectorAll('entry')].map(item => {
return {
title: item.querySelector('title').textContent,
content: item.querySelector('content') && item.querySelector('content').textContent,
@@ -84,8 +84,11 @@ window.addEventListener('load', () => {
$input.addEventListener('input', function () {
const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
if (keywords[0] !== '') $loadingStatus.innerHTML = ''
+ else {
+ $resultContent.innerHTML = ''
+ return
+ }
- $resultContent.innerHTML = ''
let str = '
${this.date(relatedPosts[i].created, hexoConfig.date_format)}
`
} else {
diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js
index acccd0b..e7c2d69 100644
--- a/scripts/tag/gallery.js
+++ b/scripts/tag/gallery.js
@@ -1,6 +1,8 @@
/**
* Butterfly
- * galleryGroup and allery
+ * galleryGroup and gallery
+ * {% galleryGroup [name] [descr] [url] [img] %}
+ * {% gallery [lazyload],[rowHeight],[limit] %}
*/
'use strict'
@@ -8,13 +10,38 @@
const urlFor = require('hexo-util').url_for.bind(hexo)
function gallery (args, content) {
- return `${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
-
`
+ const { data, languages } = hexo.theme.i18n
+ args = args.join(' ').split(',')
+ const rowHeight = args[1] || 220
+ const limit = args[2] || 10
+ const lazyload = args[0] === 'true'
+ const regex = /!\[(.*?)\]\((.*?)\s*(?:["'](.*?)["']?)?\s*\)/g
+ const lazyloadClass = lazyload ? 'lazyload' : ''
+ let m
+ const arr = []
+ while ((m = regex.exec(content)) !== null) {
+ if (m.index === regex.lastIndex) {
+ regex.lastIndex++
+ }
+
+ arr.push({
+ url: m[2],
+ alt: m[1],
+ title: m[3]
+ })
+ }
+
+ return `
+
`
}
function galleryGroup (args) {
const name = args[0]
- const desrc = args[1]
+ const descr = args[1]
const url = urlFor(args[2])
const img = urlFor(args[3])
@@ -23,7 +50,7 @@ function galleryGroup (args) {
+ ${JSON.stringify(arr)}
+
+
+ ${name}
- ${desrc}
+${descr}
'
if (keywords.length <= 0) return
let count = 0
@@ -150,7 +153,12 @@ window.addEventListener('load', () => {
// highlight all keywords
keywords.forEach(keyword => {
- const regS = new RegExp(keyword, 'gi')
+ let regexStr = keyword
+ const specialRegex = /[^\w\s]+/ // match special characters
+ if (keyword.length === 1 && specialRegex.test(keyword)) {
+ regexStr = `\\${keyword}`
+ }
+ const regS = new RegExp(regexStr, 'gi')
matchContent = matchContent.replace(regS, '' + keyword + '')
dataTitle = dataTitle.replace(regS, '' + keyword + '')
})
diff --git a/source/js/utils.js b/source/js/utils.js
index a1be368..42d438b 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -62,10 +62,10 @@ const btf = {
const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark
Snackbar.show({
- text: text,
+ text,
backgroundColor: bg,
- showAction: showAction,
- duration: duration,
+ showAction,
+ duration,
pos: position,
customClass: 'snackbar-css'
})
@@ -88,7 +88,7 @@ const btf = {
const minuteCount = dateDiff / minute
if (monthCount > 12) {
- result = datePost.toLocaleDateString().replace(/\//g, '-')
+ result = datePost.toISOString().slice(0, 10)
} else if (monthCount >= 1) {
result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month
} else if (dayCount >= 1) {
@@ -186,12 +186,12 @@ const btf = {
* @param {*} options object key: value
*/
wrap: (selector, eleType, options) => {
- const creatEle = document.createElement(eleType)
+ const createEle = document.createElement(eleType)
for (const [key, value] of Object.entries(options)) {
- creatEle.setAttribute(key, value)
+ createEle.setAttribute(key, value)
}
- selector.parentNode.insertBefore(creatEle, selector)
- creatEle.appendChild(selector)
+ selector.parentNode.insertBefore(createEle, selector)
+ createEle.appendChild(selector)
},
unwrap: el => {
@@ -255,7 +255,7 @@ const btf = {
if (!btf.isHidden(i)) {
fjGallery(i, {
itemSelector: '.fj-gallery-item',
- rowHeight: 220,
+ rowHeight: i.getAttribute('data-rowHeight'),
gutter: 4,
onJustify: function () {
this.$container.style.opacity = '1'
@@ -271,8 +271,19 @@ const btf = {
const title = GLOBAL_CONFIG_SITE.title
window.history.replaceState({
url: location.href,
- title: title
+ title
}, title, anchor)
}
+ },
+
+ getScrollPercent: (currentTop, ele) => {
+ const docHeight = ele.clientHeight
+ const winHeight = document.documentElement.clientHeight
+ const headerHeight = ele.offsetTop
+ const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
+ const scrollPercent = (currentTop - headerHeight) / (contentMath)
+ const scrollPercentRounded = Math.round(scrollPercent * 100)
+ const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
+ return percentage
}
}