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 3.0.0-beta.2
ppoffice 2020-01-15 12:45:06 -05:00
parent 7b88a415d7
commit bf3b49a04b
2 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
source/css/style.styl
View File

@ -394,14 +394,11 @@ figure.highlight
background: rgba(200, 200, 200, 0.15)
figcaption
margin: 0 !important
padding: .3em .75em
text-align: left
font-style: normal
font-size: .8em
&:after
clear: both
content: " "
display: table
span
font-weight: 500
@ -412,7 +409,6 @@ figure.highlight
color: #9a9a9a
a
float: right
margin-left: 0.5em
.fold

78
source/js/main.js
View File

@ -46,52 +46,62 @@
}
});
if (typeof (ClipboardJS) !== 'undefined' && IcarusThemeSettings.article.highlight.clipboard) {
var clipboard = IcarusThemeSettings.article.highlight.clipboard;
var fold = IcarusThemeSettings.article.highlight.fold;
fold = 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 () {
var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
var button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
$(this).attr('id', id);
if ($(this).find('figcaption').length) {
$(this).find('figcaption').prepend(button);
} else {
$(this).prepend('<figcaption>' + button + '</figcaption>');
}
$(this).find('figcaption div.level-right').append(button);
});
new ClipboardJS('.highlight .copy');
}
var fold = IcarusThemeSettings.article.highlight.fold;
if (fold.trim()) {
if (fold) {
var button = '<span class="fold">' + (fold === 'unfolded' ? '<i class="fas fa-angle-down"></i>' : '<i class="fas fa-angle-right"></i>') + '</span>';
$('figure.highlight').each(function () {
if ($(this).find('figcaption').length) {
// 此处find ">folded" span,如果有自定义code头,并且">folded"进行处理
// 使用示例，.md 文件中头行标记">folded"
// ```java main.java >folded
// import main.java
// private static void main(){
// // test
// int i = 0;
// return i;
// }
// ```
if ($(this).find('figcaption').find('span').length > 0) {
let spanArr = $(this).find('figcaption').find('span');
if (spanArr[0].innerText.indexOf(">folded") > -1) {
// 去掉folded
spanArr[0].innerText = spanArr[0].innerText.replace(">folded", "")
button = '<span class="fold"><i class="fas fa-angle-right"></i></span>';
$(this).find('figcaption div.level-left').prepend(button);
// 此处find ">folded" span,如果有自定义code头,并且">folded"进行处理
// 使用示例，.md 文件中头行标记">folded"
// ```java main.java >folded
// import main.java
// private static void main(){
// // test
// int i = 0;
// return i;
// }
// ```
if ($(this).find('figcaption').find('span').length > 0) {
let spanArr = $(this).find('figcaption').find('span');
if (spanArr[0].innerText.indexOf(">folded") > -1) {
// 去掉folded
spanArr[0].innerText = spanArr[0].innerText.replace(">folded", "")
button = '<span class="fold"><i class="fas fa-angle-right"></i></span>';
$(this).find('figcaption').prepend(button);
// 收叠代码块
toggleFold(this, true);
return;
}
// 收叠代码块
toggleFold(this, true);
return;
}
$(this).find('figcaption').prepend(button);
} else {
$(this).prepend('<figcaption>' + button + '</figcaption>');
}
$(this).find('figcaption div.level-left').prepend(button);
toggleFold(this, fold === 'folded');
});