addMenuToMove1stTo15thOneByOne
右メニューに第1回～第15回まで移動できるボタンの設置
Add buttons on the right menu to move from the 1st to the 15th one by one
要件
<と>のボタン2つを設置し、それぞれをクリックするとURLが第1回～第15回まで1ずつ増減する
$ \impliessettings#66eaa2b1a85984000075f235
next_script.js
code:next_script.js
const thisPageName = decodeURI(window.location.pathname).match(/(?<=\/my-knowledge\/).+(?=第)/);
const thisTimes = parseInt(decodeURI(window.location.pathname).match(/(?<=第)\d+/));
if(thisPageName && thisTimes){
scrapbox.PageMenu.addMenu({
title: 'Next',
image: '/assets/img/logo.png',
onClick: () => NextPageShow(),
});
function NextPageShow(){
if(thisTimes >= 15) return;
window.location.href = ${thisPageName}第${thisTimes + 1}回
}
}
必ず表示するなら以下のコード
code:next_backup.js
scrapbox.PageMenu.addMenu({
title: 'Next',
image: '/assets/img/logo.png',
onClick: () => NextPageShow(),
});
function NextPageShow(){
const thisPageName = decodeURI(window.location.pathname).match(/(?<=\/my-knowledge\/).+(?=第)/);
const thisTimes = parseInt(decodeURI(window.location.pathname).match(/(?<=第)\d+/));
if(!thisPageName) return;
if(!thisTimes) return;
if(thisTimes >= 15) return;
window.location.href = ${thisPageName}第${thisTimes + 1}回
}
prev_script.js
code:prev_script.js
const thisPageName = decodeURI(window.location.pathname).match(/(?<=\/my-knowledge\/).+(?=第)/);
const thisTimes = parseInt(decodeURI(window.location.pathname).match(/(?<=第)\d+/));
if(thisPageName && thisTimes){
scrapbox.PageMenu.addMenu({
title: 'Prev',
image: '/assets/img/logo.png',
onClick: () => PrevPageShow(),
});
function PrevPageShow(){
if(thisTimes >= 15) return;
window.location.href = ${thisPageName}第${thisTimes - 1}回
}
}
必ず表示するなら以下のコード
code:prev_backup.js
scrapbox.PageMenu.addMenu({
title: 'Prev',
image: '/assets/img/logo.png',
onClick: () => PrevPageShow(),
});
function PrevPageShow(){
const thisPageName = decodeURI(window.location.pathname).match(/(?<=\/my-knowledge\/).+(?=第)/);
const thisTimes = parseInt(decodeURI(window.location.pathname).match(/(?<=第)\d+/));
if(!thisPageName) return;
if(!thisTimes) return;
if(thisTimes <= 0) return;
window.location.href = ${thisPageName}第${thisTimes - 1}回
}
style.css
code:style.css
button#Next.tool-btn:hover,
button#Prev.tool-btn:hover {
text-decoration: none
}
button#Next.tool-btn::before { content: '\f054'; }
button#Prev.tool-btn::before { content: '\f053'; }
button#Next.tool-btn::before,
button#Prev.tool-btn::before {
position: absolute;
font: 400 20px/46px 'Font Awesome 5 Free';
font-weight: 501;
}
button#Next.tool-btn img,
button#Prev.tool-btn img {
opacity: 0;
}
上と意味は一緒
ただ#Nextと#Prev毎に分けているかどうかの違いだけ
code:old_style.css
button#Next.tool-btn:hover { text-decoration: none }
button#Next.tool-btn::before {
position: absolute;
content: '\f054';
font: 400 20px/46px 'Font Awesome 5 Free';
font-weight: 501;
}
button#Next.tool-btn img { opacity: 0 }
button#Prev.tool-btn:hover { text-decoration: none }
button#Prev.tool-btn::before {
position: absolute;
content: '\f053';
font: 400 20px/46px 'Font Awesome 5 Free';
font-weight: 501;
}
button#Prev.tool-btn img { opacity: 0; }
Font Awesome 5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処方法 | ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ
1行だけ記述を追加しましたが、どこの箇所か分かりますか～？
正解は、
a::beforeに記述しているfont-weight: 900;です。
どうやら、各アイコンごとに指定すべき weight があるようです。
その指定すべき weight の違いは、各アイコン詳細ページに記載されています。
参考コード（しおり記法）
code:copy_script.js
// const __bkmClass = '.deco-\\.' /* ここで記法のセレクタを設定してね。デフォルトはドットです */
const __bkmMenuTitle = 'Bookmarks'
scrapbox.PageMenu.addMenu({ title: __bkmMenuTitle, image: '/assets/img/logo.png',
onClick: function() {
const __fixedHeaderHeight = ($('.navbar').css('position') == 'fixed' ? $('.navbar').height() : 0) +
($('.navbar-pagemenu').height() || 0)
scrapbox.PageMenu(__bkmMenuTitle).removeAllItems()
$(__bkmClass).closest('.line').each(function(i, e){
scrapbox.PageMenu(__bkmMenuTitle).addItem({
title: $(e).find(__bkmClass).text(),
onClick: function() {
$('html,body').animate({
scrollTop: $(e).offset().top - $('body').offset().top - __fixedHeaderHeight
}, 150)
}
})
})
}
})
#UserScript