しおり機能
code:style.css
/** 変数 */
.deco-\. {
--bookmark-background: #f5faea;
--bookmark-icon: yellowgreen;
}
/** しおり記法 */
@media screen {
.app:not(.presentation) .line .deco-\. {
background-color: var(--bookmark-background);
}
.app:not(.presentation) .line .deco-\.::after {
position: absolute;
top: 3px;
left: -1.4em;
content: '\f02e';
font: 1.7rem/1 'Font Awesome 5 Free';
font-weight: 900;
color: var(--bookmark-icon);
}
}
@media screen and (max-width: 990px) {
.app:not(.presentation) .line .deco-\.::after {
position: static;
padding-left: .3em;
}
}
/** 栞一覧を出すページメニューボタンのスタイル */
a#Bookmarks.tool-btn:hover {
text-decoration: none;
}
a#Bookmarks.tool-btn::before {
position: absolute;
left: calc(46px/3);
content: '\f02e';
font: 20px/46px 'Font Awesome 5 Free';
}
a#Bookmarks.tool-btn img {
opacity: 0;
}
code:script.js
(() => {
// 記法のセレクタ
const bkmClass = '.deco-\\.';
const bkmMenuTitle = 'Bookmarks';
scrapbox.PageMenu.addMenu({
title: bkmMenuTitle,
image: '/assets/img/logo.png',
onClick: () => {
const fixedHeaderHeight =
($('.navbar').css('position') == 'fixed' ? $('.navbar').height() : 0)
+ ($('.navbar-pagemenu').height() || 0);
scrapbox.PageMenu(bkmMenuTitle).removeAllItems();
const $bookmarks = $(bkmClass).closest('.line');
// 何か1つでも入れないと項目が更新されなかったので、空の時は「何もない」という項目を入れて終了する
if ($bookmarks.length <= 0) {
scrapbox.PageMenu(bkmMenuTitle).addItem({
title: 'No Bookmarks',
onClick: () => {},
});
return;
}
// *で大きくなるlevelの取得
const getLevel = ($element) => {
const $level = $element.find('.level');
if ($level.length <= 0) {
return 0;
}
const className = $level.attr('class');
const match = className.match(/level-(\d)/);
if (!match) {
return 0;
}
return Number(match1);
};
const maxLevel = (() => {
let max = 0;
$bookmarks.each((index, element) => {
const level = getLevel($(element));
max = Math.max(level, max);
});
return max;
})();
// 項目に追加していく
$bookmarks.each((index, element) => {
const $element = $(element);
const level = getLevel($element);
scrapbox.PageMenu(bkmMenuTitle).addItem({
title: '_'.repeat(maxLevel - level) + $element.find(bkmClass).text(),
onClick: () => {
$('html,body').animate({
scrollTop: $element.offset().top - $('body').offset().top - fixedHeaderHeight,
}, 150);
},
});
});
},
});
})();
レベル2
レベル1
レベル0
参考
/scrasobox/しおり記法
#UserScript #UserCSS