From ede5d0bc5db2cb27f5658ed14c78206dceb949cf Mon Sep 17 00:00:00 2001 From: ppoffice Date: Mon, 12 Aug 2019 23:41:41 -0400 Subject: [PATCH] feat(layout): code block style fix and add folding --- includes/common/ConfigValidator.js | 2 +- includes/specs/article.spec.js | 20 +++++++++++-- includes/specs/plugins.spec.js | 5 ---- layout/common/head.ejs | 2 +- layout/common/scripts.ejs | 15 ++++++++++ layout/plugin/clipboard.ejs | 6 ---- package.json | 2 +- source/css/style.styl | 30 ++++++++++++-------- source/js/clipboard.js | 10 ------- source/js/main.js | 45 ++++++++++++++++++++++++++++++ 10 files changed, 99 insertions(+), 38 deletions(-) delete mode 100644 layout/plugin/clipboard.ejs delete mode 100644 source/js/clipboard.js diff --git a/includes/common/ConfigValidator.js b/includes/common/ConfigValidator.js index f59440f..d0e89ab 100644 --- a/includes/common/ConfigValidator.js +++ b/includes/common/ConfigValidator.js @@ -103,7 +103,7 @@ function compareVersion(ver1, ver2) { } function isBreakingChange(base, ver) { - return base.major !== ver.major; + return base.major !== ver.major || base.minor !== ver.minor; } diff --git a/includes/specs/article.spec.js b/includes/specs/article.spec.js index a0f56ff..c579d99 100644 --- a/includes/specs/article.spec.js +++ b/includes/specs/article.spec.js @@ -4,9 +4,23 @@ module.exports = { [type]: 'object', [doc]: 'Article display settings', highlight: { - [type]: 'string', - [doc]: 'Code highlight theme\nhttps://github.com/highlightjs/highlight.js/tree/master/src/styles', - [defaultValue]: 'atom-one-light' + [type]: 'object', + [doc]: 'Code highlight settings', + theme: { + [type]: 'string', + [doc]: 'Code highlight themes\nhttps://github.com/highlightjs/highlight.js/tree/master/src/styles', + [defaultValue]: 'atom-one-light' + }, + clipboard: { + [type]: 'boolean', + [doc]: 'Show code copying button', + [defaultValue]: true + }, + fold: { + [type]: 'string', + [doc]: 'Default folding status of the code blocks. Can be "", "folded", "unfolded"', + [defaultValue]: 'unfolded' + } }, thumbnail: { [type]: 'boolean', diff --git a/includes/specs/plugins.spec.js b/includes/specs/plugins.spec.js index 922d8b7..2838df0 100644 --- a/includes/specs/plugins.spec.js +++ b/includes/specs/plugins.spec.js @@ -60,11 +60,6 @@ module.exports = { [doc]: 'Show a loading progress bar at top of the page', [defaultValue]: true }, - clipboard: { - [type]: 'boolean', - [doc]: 'Show the copy button in the highlighted code area', - [defaultValue]: true - }, busuanzi: { [type]: 'boolean', [doc]: 'BuSuanZi site/page view counter\nhttps://busuanzi.ibruce.info', diff --git a/layout/common/head.ejs b/layout/common/head.ejs index 25ddad6..bdbe1ab 100644 --- a/layout/common/head.ejs +++ b/layout/common/head.ejs @@ -29,7 +29,7 @@ <%- _css(cdn('bulma', '0.7.2', 'css/bulma.css')) %> <%- _css(iconcdn()) %> <%- _css(fontcdn('Ubuntu:400,600|Source+Code+Pro')) %> -<%- _css(cdn('highlight.js', '9.12.0', 'styles/' + get_config('article.highlight') + '.css')) %> +<%- _css(cdn('highlight.js', '9.12.0', 'styles/' + get_config('article.highlight.theme') + '.css')) %> <% if (has_config('plugins')) { %> <% for (let plugin in get_config('plugins')) { %> diff --git a/layout/common/scripts.ejs b/layout/common/scripts.ejs index dd8b167..6f0901c 100644 --- a/layout/common/scripts.ejs +++ b/layout/common/scripts.ejs @@ -2,6 +2,21 @@ <%- _js(cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')) %> + + +<% if (get_config('article.highlight.clipboard')) { %> + <%- _js(cdn('clipboard', '2.0.4', 'dist/clipboard.min.js'), true) %> +<% } %> + <% if (has_config('plugins')) { %> <% for (let plugin in get_config('plugins')) { %> <%- partial('plugin/' + plugin, { head: false, plugin: get_config('plugins')[plugin] }) %> diff --git a/layout/plugin/clipboard.ejs b/layout/plugin/clipboard.ejs deleted file mode 100644 index dc764e4..0000000 --- a/layout/plugin/clipboard.ejs +++ /dev/null @@ -1,6 +0,0 @@ -<% if (plugin !== false) { %> - <% if (!head) { %> - <%- _js(cdn('clipboard', '2.0.4', 'dist/clipboard.min.js'), true) %> - <%- _js('js/clipboard', true) %> - <% } %> -<% } %> \ No newline at end of file diff --git a/package.json b/package.json index da63e1a..a4f3123 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { "name": "hexo-theme-icarus", - "version": "2.3.0", + "version": "2.6.0", "private": true } diff --git a/source/css/style.styl b/source/css/style.styl index 4eac206..38f3090 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -356,6 +356,9 @@ figure.highlight width: 100% position: relative margin: 1em 0 1em !important + &.folded + .highlight-body + display: none pre, table tr:hover @@ -381,14 +384,29 @@ figure.highlight text-align: left font-style: normal font-size: .8em + &:after + clear: both + content: " " + display: table span font-weight: 500 font-family: family-mono + .fold + a + color: #9a9a9a + a float: right - color: #9a9a9a + margin-left: 0.5em + + .fold + margin-right: 0.5em + cursor: pointer + + .highlight-body + overflow: auto .gutter text-align: right @@ -408,16 +426,6 @@ figure.highlight min-width: inherit border-radius: inherit - .copy - display: none - position: absolute - bottom: 0 - right: 0 - color: white - background: rgba(0, 0, 0, 0.5) - &:hover .copy - display: block - /* --------------------------------- * Overflow Table * --------------------------------- */ diff --git a/source/js/clipboard.js b/source/js/clipboard.js deleted file mode 100644 index 2e0e4d4..0000000 --- a/source/js/clipboard.js +++ /dev/null @@ -1,10 +0,0 @@ -document.addEventListener('DOMContentLoaded', function () { - if (typeof(ClipboardJS) !== 'undefined') { - $('figure.highlight').each(function () { - var id = 'code-' + Date.now() + (Math.random() * 1000 | 0); - $(this).attr('id', id); - $(this).prepend($(``)); - }); - new ClipboardJS('.highlight .copy'); - } -}); \ No newline at end of file diff --git a/source/js/main.js b/source/js/main.js index 3c1861b..35e1375 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -32,6 +32,51 @@ adjustNavbar(); $(window).resize(adjustNavbar); + $('figure.highlight table').wrap('
'); + if (typeof (IcarusThemeSettings) !== 'undefined' && + typeof (IcarusThemeSettings.article) !== 'undefined' && + typeof (IcarusThemeSettings.article.highlight) !== 'undefined') { + if (typeof (ClipboardJS) !== 'undefined' && IcarusThemeSettings.article.highlight.clipboard) { + $('figure.highlight').each(function () { + var id = 'code-' + Date.now() + (Math.random() * 1000 | 0); + var button = ''; + $(this).attr('id', id); + if ($(this).find('figcaption').length) { + $(this).find('figcaption').prepend(button); + } else { + $(this).prepend('
' + button + '
'); + } + }); + new ClipboardJS('.highlight .copy'); + } + var fold = IcarusThemeSettings.article.highlight.fold; + if (fold.trim()) { + var button = '' + (fold === 'unfolded' ? '' : '') + ''; + $('figure.highlight').each(function () { + if ($(this).find('figcaption').length) { + $(this).find('figcaption').prepend(button); + } else { + $(this).prepend('
' + button + '
'); + } + }); + + function toggleFold(codeBlock, isFolded) { + var $toggle = $(codeBlock).find('.fold i'); + !isFolded ? $(codeBlock).removeClass('folded') : $(codeBlock).addClass('folded'); + !isFolded ? $toggle.removeClass('fa-angle-right') : $toggle.removeClass('fa-angle-down'); + !isFolded ? $toggle.addClass('fa-angle-down') : $toggle.addClass('fa-angle-right'); + } + + $('figure.highlight').each(function () { + toggleFold(this, fold === 'folded'); + }); + $('figure.highlight figcaption .fold').click(function () { + var $code = $(this).closest('figure.highlight'); + toggleFold($code.eq(0), !$code.hasClass('folded')); + }); + } + } + var $toc = $('#toc'); if ($toc.length > 0) { var $mask = $('
');