github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(layout): code block caption bar on safari

pull/605/head
ppoffice 2020-01-17 17:37:24 -05:00
parent 8aba483fa5 bf3b49a04b
commit 7d60a3ed5e
2 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
source/css/base.styl
View File

@ -221,29 +221,25 @@ figure.highlight
background: rgba(200, 200, 200, 0.15) background: rgba(200, 200, 200, 0.15)
figcaption figcaption
margin: 0 !important
padding: .3em .75em padding: .3em .75em
text-align: left
font-style: normal font-style: normal
font-size: .8em font-size: .8em
&:after
clear: both *
content: " " color: $grey
display: table
span span
font-weight: 500 font-weight: 500
font-family: $family-code font-family: $family-code
.fold .level-left *:not(:last-child)
a margin-right: .5em
color: #9a9a9a
a .level-right *:not(:first-child)
float: right margin-left: .5em
margin-left: 0.5em
.fold .fold
margin-right: 0.5em
cursor: pointer cursor: pointer
.highlight-body .highlight-body

51
source/js/main.js
View File

@ -62,37 +62,46 @@
} }
}); });
if (typeof ClipboardJS !== 'undefined' && config.article.highlight.clipboard) {
const clipboard = config.article.highlight.clipboard;
const fold = config.article.highlight.fold.trim();
$('figure.highlight').each(function() {
if ($(this).find('figcaption').length) {
$(this).find('figcaption').addClass('level');
$(this).find('figcaption').append('<div class="level-left">');
$(this).find('figcaption').append('<div class="level-right">');
$(this).find('figcaption div.level-left').append($(this).find('figcaption').find('span'));
$(this).find('figcaption div.level-right').append($(this).find('figcaption').find('a'));
} else {
if (clipboard || fold) {
$(this).prepend('<figcaption class="level"><div class="level-left"></div><div class="level-right"></div></figcaption>');
}
}
});
if (typeof ClipboardJS !== 'undefined' && clipboard) {
$('figure.highlight').each(function() { $('figure.highlight').each(function() {
const id = 'code-' + Date.now() + (Math.random() * 1000 | 0); const id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
const button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>'; const button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
$(this).attr('id', id); $(this).attr('id', id);
if ($(this).find('figcaption').length) { $(this).find('figcaption div.level-right').append(button);
$(this).find('figcaption').prepend(button);
} else {
$(this).prepend('<figcaption>' + button + '</figcaption>');
}
}); });
new ClipboardJS('.highlight .copy'); // eslint-disable-line no-new new ClipboardJS('.highlight .copy'); // eslint-disable-line no-new
} }
const fold = config.article.highlight.fold;
if (fold.trim()) { if (fold) {
$('figure.highlight').each(function() { $('figure.highlight').each(function() {
if ($(this).find('figcaption').length) { if ($(this).find('figcaption').find('span').length > 0) {
// fold individual code block const span = $(this).find('figcaption').find('span');
if ($(this).find('figcaption').find('span').length > 0) { if (span[0].innerText.indexOf('>folded') > -1) {
const span = $(this).find('figcaption').find('span').eq(0); span[0].innerText = span[0].innerText.replace('>folded', '');
if (span[0].innerText.indexOf('>folded') > -1) { $(this).find('figcaption div.level-left').prepend(createFoldButton('folded'));
span[0].innerText = span[0].innerText.replace('>folded', ''); toggleFold(this, true);
$(this).find('figcaption').prepend(createFoldButton('folded')); return;
toggleFold(this, true);
return;
}
} }
$(this).find('figcaption').prepend(createFoldButton(fold));
} else {
$(this).prepend('<figcaption>' + createFoldButton(fold) + '</figcaption>');
} }
$(this).find('figcaption div.level-left').prepend(createFoldButton(fold));
toggleFold(this, fold === 'folded'); toggleFold(this, fold === 'folded');
}); });