From c08868297b40bf8e74e9e3cd7358b4b761ba8a8c Mon Sep 17 00:00:00 2001 From: XPoet Date: Sun, 2 Oct 2022 00:17:32 +0800 Subject: [PATCH] feat(tooltip): support image show in the tooltip (#110) --- layout/_partial/first-screen.ejs | 30 ++++++++--- source/css/common/basic.styl | 49 ++++++++++++++++- .../common/code-block/code-block-tools.styl | 7 --- source/css/common/keep-theme.styl | 7 +++ source/css/layout/_partial/first-screen.styl | 6 ++- source/js/utils.js | 54 +++++++++++++++++++ 6 files changed, 136 insertions(+), 17 deletions(-) diff --git a/layout/_partial/first-screen.ejs b/layout/_partial/first-screen.ejs index 0881b90..c7ca94c 100644 --- a/layout/_partial/first-screen.ejs +++ b/layout/_partial/first-screen.ejs @@ -4,6 +4,7 @@ const { description: c_description } = config let final_description = fs_description || c_description || '' final_description = final_description.split('||').map(desc => desc.trim()) if (final_description.length > 2) { final_description.length = 2 } +const { enable: sc_enable, links: sc_links } = theme.social_contact %>
@@ -20,21 +21,36 @@ if (final_description.length > 2) { final_description.length = 2 } > <% } %> - <% if (theme.social_contact.enable) { %> + <% if (sc_enable) { %>
- <% for (const key in theme.social_contact.links) { %> - <% if(theme.social_contact.links[key]) { %> -
+ <% if(sc_links[key]) { %> + <% + const tmpl = sc_links[key].split('|').map(x => x.trim()) + let isImg = false + let link = sc_links[key] + if (tmpl.length > 1) { + link = tmpl[1] + isImg = tmpl[0] === 'img' + } + %> +
> <% if(key === 'email') { %> - + <% } else { %> - + <% if(isImg) { %> - + <% } else { %> + + + + <% } %> <% } %>
<% } %> diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl index 2003bd8..3c764c4 100644 --- a/source/css/common/basic.styl +++ b/source/css/common/basic.styl @@ -196,9 +196,16 @@ button { } } + &.show-img { + .tooltip-content { + display none !important + } + } + .tooltip-content { position absolute - top 0 + box-sizing border-box + top -0.4rem left 50% z-index $z-index-9 display none @@ -208,7 +215,45 @@ button { white-space nowrap background var(--first-text-color) border-radius 0.3rem - transform translateX(-50%) translateY(-108%) + transform translateX(-50%) translateY(-100%) transition-t("display", "0", "0.2", "ease") + disable-user-select() } } + + +.tooltip-img { + position relative + box-sizing border-box + + &.show-img { + .tooltip-img-box { + display flex + } + } + + .tooltip-img-box { + position absolute + box-sizing border-box + top -0.4rem + left 50% + z-index $z-index-8 + display none + justify-content center + align-items center + padding 0.2rem + background var(--fourth-text-color) + border-radius 0.3rem + transform translateX(-50%) translateY(-100%) + transition-t("display", "0", "0.2", "ease") + disable-user-select() + min-height 6rem + + img { + display block + max-height 10rem + } + } +} + + diff --git a/source/css/common/code-block/code-block-tools.styl b/source/css/common/code-block/code-block-tools.styl index 5e4bf48..1ed0c9f 100644 --- a/source/css/common/code-block/code-block-tools.styl +++ b/source/css/common/code-block/code-block-tools.styl @@ -1,10 +1,3 @@ -disable-user-select() { - -moz-user-select none - -ms-user-select none - -webkit-user-select none - user-select none -} - .highlight-container { position relative box-sizing border-box diff --git a/source/css/common/keep-theme.styl b/source/css/common/keep-theme.styl index f2ade80..2327e95 100644 --- a/source/css/common/keep-theme.styl +++ b/source/css/common/keep-theme.styl @@ -51,3 +51,10 @@ keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) { border-radius $keep-container-border-radius * 0.6 } } + +disable-user-select() { + -moz-user-select none + -ms-user-select none + -webkit-user-select none + user-select none +} diff --git a/source/css/layout/_partial/first-screen.styl b/source/css/layout/_partial/first-screen.styl index d3ff565..023797c 100644 --- a/source/css/layout/_partial/first-screen.styl +++ b/source/css/layout/_partial/first-screen.styl @@ -1,5 +1,5 @@ $first-screen-font-size = 2rem -$first-screen-icon-size = 1.6rem +$first-screen-icon-size = 1.8rem $temp-img = hexo-config('style.first_screen.background_img') $first-screen-img = $temp-img ? $temp-img : '/images/bg.svg' @@ -60,6 +60,10 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(-- .s-icon-item { margin 0 1rem cursor pointer + + i { + color var(--default-text-color) + } } } } diff --git a/source/js/utils.js b/source/js/utils.js index 21a9d8d..7e9b555 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -345,6 +345,7 @@ KEEP.initUtils = () => { // insert tooltip content dom insertTooltipContent() { const init = () => { + // tooltip document.querySelectorAll('.tooltip').forEach((element) => { const { content } = element.dataset if (content) { @@ -354,6 +355,59 @@ KEEP.initUtils = () => { ) } }) + + // tooltip-img + + const imgsSet = {} + + const toggleShowImg = (dom, nameIdx) => { + document.addEventListener('click', () => { + if (imgsSet[nameIdx].isShowImg) { + dom.classList.remove('show-img') + imgsSet[nameIdx].isShowImg = false + } + }) + } + + const loadImg = (img, imgLoaded) => { + const temp = new Image() + const { src } = img.dataset + temp.src = src + temp.onload = () => { + imgLoaded = true + img.src = src + } + } + + document.querySelectorAll('.tooltip-img').forEach((dom, idx) => { + const { imgUrl, name } = dom.dataset + if (imgUrl) { + const imgDomClass = `tooltip-img-${name}` + const nameIdx = `${name}_${idx}` + const imgDom = `${name}` + const imgTooltipBox = `
${imgDom}
` + + imgsSet[nameIdx] = { + imgLoaded: false, + isShowImg: false, + } + + dom.insertAdjacentHTML( + 'afterbegin', + imgTooltipBox + ) + dom.addEventListener('click', (e) => { + if (!imgsSet[nameIdx].imgLoaded) { + loadImg(document.querySelector(`.tooltip-img-box img.${imgDomClass}`), imgsSet[nameIdx].imgLoaded) + } + imgsSet[nameIdx].isShowImg = !imgsSet[nameIdx].isShowImg + dom.classList.toggle('show-img') + e.stopPropagation() + }) + + toggleShowImg(dom, nameIdx) + } + }) } setTimeout(() => { init()