From 10befe1445edaef83f3520cb195941f44e615528 Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 29 Sep 2022 16:42:09 +0800 Subject: [PATCH] feat(code-block): added tooltip function in code block --- languages/en.yml | 5 +++ languages/zh-CN.yml | 5 +++ languages/zh-TW.yml | 5 +++ layout/_partial/scripts.ejs | 1 - scripts/helpers/export-config.js | 1 + source/css/common/basic.styl | 10 ++--- .../common/code-block/code-block-tools.styl | 11 +++--- source/js/code-block-tools.js | 28 +++++++++++--- source/js/main.js | 1 - source/js/tooltip.js | 16 -------- source/js/utils.js | 37 ++++++++++++++----- 11 files changed, 76 insertions(+), 44 deletions(-) delete mode 100644 source/js/tooltip.js diff --git a/languages/en.yml b/languages/en.yml index ad65396..70c9784 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -46,6 +46,11 @@ zhihu: Zhihu twitter: Twitter facebook: Facebook email: Email +code_block: + copy: Copy code + copied: Copied + fold: Fold code block + folded: Folded copyright: author: Post author title: Post title diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 803784e..2c8d536 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -46,6 +46,11 @@ zhihu: 知乎 twitter: 推特 facebook: Facebook email: Email +code_block: + copy: 复制代码 + copied: 已复制 + fold: 折叠代码块 + folded: 已折叠 copyright: title: 本文标题 author: 本文作者 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index cc63cc6..797c373 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -46,6 +46,11 @@ zhihu: 知乎 twitter: Twitter facebook: Facebook email: Email +code_block: + copy: 復製代碼 + copied: 已復製 + fold: 折疊代碼塊 + folded: 已折疊 copyright: author: 文章作者 title: 文章標題 diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index a425a78..c07da5e 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -3,7 +3,6 @@ 'js/main.js', 'js/header-shrink.js', 'js/back2top.js', - 'js/tooltip.js', 'js/dark-light-toggle.js' ]) %> diff --git a/scripts/helpers/export-config.js b/scripts/helpers/export-config.js index b901f23..c911a43 100644 --- a/scripts/helpers/export-config.js +++ b/scripts/helpers/export-config.js @@ -53,5 +53,6 @@ hexo.extend.helper.register('export_config', function () { KEEP.hexo_config = ${JSON.stringify(hexo_config)}; KEEP.theme_config = ${JSON.stringify(theme_config)}; KEEP.language_ago = ${JSON.stringify(languageContent['ago'])}; + KEEP.language_code_block = ${JSON.stringify(languageContent['code_block'])}; `; }); diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl index b043178..14af953 100644 --- a/source/css/common/basic.styl +++ b/source/css/common/basic.styl @@ -188,13 +188,13 @@ button { &:hover { .tooltip-content { - visibility visible + display inline-block } } .tooltip-content { position absolute - top -145% + top -140% left 50% transform translateX(-50%) font-size 0.8rem @@ -202,9 +202,9 @@ button { background var(--first-text-color) color var(--fourth-text-color) border-radius 0.3rem - visibility hidden - z-index $z-index-1 + display none + z-index $z-index-9 white-space nowrap - transition-t("visibility", "0", "0.2", "ease") + transition-t("display", "0", "0.2", "ease") } } diff --git a/source/css/common/code-block/code-block-tools.styl b/source/css/common/code-block/code-block-tools.styl index 5730553..187af26 100644 --- a/source/css/common/code-block/code-block-tools.styl +++ b/source/css/common/code-block/code-block-tools.styl @@ -9,7 +9,6 @@ disable-user-select() { position relative box-sizing border-box margin 1.4rem 0 - overflow hidden .code-tools-box { box-sizing border-box @@ -49,7 +48,7 @@ disable-user-select() { .fold { font-weight bold - padding 0.1rem 0.4rem 0.1rem 0.2rem + padding 0 0.4rem 0 0.2rem } } @@ -106,7 +105,7 @@ disable-user-select() { .fold { order 2 - padding 0.1rem 0.1rem 0.1rem 0.6rem + padding 0 0.1rem 0 0.6rem i { color #ccc } @@ -115,9 +114,9 @@ disable-user-select() { .copy { position absolute - bottom 0 - right 0 - padding 0.4rem 0.5rem + bottom 0.3rem + right 0.5rem + padding 0 0.1rem font-weight bold opacity 0 transition-t("opacity", "0", "0.2", "ease-in-out") diff --git a/source/js/code-block-tools.js b/source/js/code-block-tools.js index 88f13d2..e397066 100644 --- a/source/js/code-block-tools.js +++ b/source/js/code-block-tools.js @@ -11,8 +11,8 @@ KEEP.initCodeBlockTools = () => { const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools; const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'; const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'; - - const foldDom = `` + const { copy: copyLang, copied: copiedLang, fold: foldLang, folded: foldedLang } = KEEP.language_code_block; + const foldDom = `` document.querySelectorAll('figure.highlight').forEach(element => { let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''; @@ -21,13 +21,14 @@ KEEP.initCodeBlockTools = () => { highlightContainer.classList.add('highlight-container'); element.wrap(highlightContainer); + const codeLangDom = `${codeLang ? '' + codeLang + '' : ''}` highlightContainer.insertAdjacentHTML( 'afterbegin', `
${isMac ? foldDom + codeLangDom : '' + foldDom + codeLangDom + ''} - +
` ); const codeToolsBox = element.parentNode.querySelector('.code-tools-box'); @@ -50,7 +51,17 @@ KEEP.initCodeBlockTools = () => { tta.setSelectionRange(0, code.length); tta.readOnly = false; const result = document.execCommand('copy'); - target.querySelector('i').className = result ? 'fas fa-check' : 'fas fa-times'; + + const copyIconDom = target.querySelector('i'); + const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content'); + + if (result) { + copyIconDom.className = 'fas fa-check'; + copyTooltipDom && (copyTooltipDom.innerHTML = copiedLang); + } else { + copyIconDom.className = 'fas fa-times'; + } + tta.blur(); target.blur(); if (selected) { @@ -63,6 +74,8 @@ KEEP.initCodeBlockTools = () => { copyDom.addEventListener('mouseleave', event => { setTimeout(() => { event.target.querySelector('i').className = 'fas fa-copy'; + const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content'); + copyTooltipDom && (copyTooltipDom.innerHTML = copyLang); }, 500); }); @@ -70,15 +83,18 @@ KEEP.initCodeBlockTools = () => { targetFoldDom.addEventListener('click', event => { const target = event.currentTarget; const icon = target.querySelector('i'); - isFold = !isFold + const foldTooltipDom = codeToolsBox.querySelector('.fold .tooltip-content'); + isFold = !isFold; if (isFold) { - icon.className = foldedIconClassName + icon.className = foldedIconClassName; element.classList.add('folded'); codeToolsBox.classList.add('folded'); + foldTooltipDom && (foldTooltipDom.innerHTML = foldedLang) } else { icon.className = 'fas fa-chevron-down'; element.classList.remove('folded'); codeToolsBox.classList.remove('folded'); + foldTooltipDom && (foldTooltipDom.innerHTML = foldLang) } }); }); diff --git a/source/js/main.js b/source/js/main.js index d847e63..fd4dc6b 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -49,7 +49,6 @@ window.addEventListener('DOMContentLoaded', () => { KEEP.initHeaderShrink(); KEEP.initModeToggle(); KEEP.initBack2Top(); - KEEP.initTooltip(); if (KEEP.theme_config.local_search?.enable === true) { KEEP.initLocalSearch(); diff --git a/source/js/tooltip.js b/source/js/tooltip.js deleted file mode 100644 index 6cce6e1..0000000 --- a/source/js/tooltip.js +++ /dev/null @@ -1,16 +0,0 @@ -/* global KEEP */ - -KEEP.initTooltip = () => { - KEEP.utils.insertTooltipContent = () => { - document.querySelectorAll('.tooltip').forEach(element => { - const { content } = element.dataset - if (content) { - element.insertAdjacentHTML( - 'afterbegin', - `${content}` - ); - } - }) - } - KEEP.utils.insertTooltipContent(); -} diff --git a/source/js/utils.js b/source/js/utils.js index 79c0821..3aec326 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -264,8 +264,7 @@ KEEP.initUtils = () => { }, getHowLongAgo(timestamp) { - const l = KEEP.language_ago; - + const lang = KEEP.language_ago; const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12); const __M = Math.floor(timestamp / (60 * 60 * 24 * 30)); const __W = Math.floor(timestamp / (60 * 60 * 24) / 7); @@ -275,25 +274,25 @@ KEEP.initUtils = () => { const __s = Math.floor(timestamp % 60); if (__Y > 0) { - return this.setHowLongAgoLanguage(__Y, l.year); + return this.setHowLongAgoLanguage(__Y, lang.year); } else if (__M > 0) { - return this.setHowLongAgoLanguage(__M, l.month); + return this.setHowLongAgoLanguage(__M, lang.month); } else if (__W > 0) { - return this.setHowLongAgoLanguage(__W, l.week); + return this.setHowLongAgoLanguage(__W, lang.week); } else if (__d > 0) { - return this.setHowLongAgoLanguage(__d, l.day); + return this.setHowLongAgoLanguage(__d, lang.day); } else if (__h > 0) { - return this.setHowLongAgoLanguage(__h, l.hour); + return this.setHowLongAgoLanguage(__h, lang.hour); } else if (__m > 0) { - return this.setHowLongAgoLanguage(__m, l.minute); + return this.setHowLongAgoLanguage(__m, lang.minute); } else if (__s > 0) { - return this.setHowLongAgoLanguage(__s, l.second); + return this.setHowLongAgoLanguage(__s, lang.second); } }, @@ -349,6 +348,24 @@ KEEP.initUtils = () => { }, 200); }, + + // insert tooltip content dom + insertTooltipContent() { + const init = () => { + document.querySelectorAll('.tooltip').forEach(element => { + const { content } = element.dataset; + if (content) { + element.insertAdjacentHTML( + 'afterbegin', + `${content}` + ); + } + }); + } + setTimeout(() => { + init(); + }, 1000); + } } // init data @@ -381,4 +398,6 @@ KEEP.initUtils = () => { // set how long age in home article block KEEP.utils.setHowLongAgoInHome(); + // insert tooltip content dom + KEEP.utils.insertTooltipContent(); }