templateを使ってページを作成
/icons/hr.icon
使用しているtemplate
code:style.css
/* ボタンを文字で置き換える */
a#Templates.tool-btn:hover { text-decoration: none }
a#Templates.tool-btn::before { position: absolute; left: calc(46px/3 - 1px); content: '\f067'; font: 21px/46px 'FontAwesome' }
a#Templates.tool-btn img { opacity: 0 }
code:script.js
addTemplateItemsToPageMenu()
function addTemplateItemsToPageMenu() {
// テンプレートメニューの定義ここから ---------- 下の解説を見てね！！ ----------
const __templates = [
{ title: '🥗 今日のあさごはん', template: '/api/code/takker/%E9%A3%9F%E3%81%B9%E3%81%9F%E3%82%82%E3%81%AE%E8%A8%98%E9%8C%B2%E7%94%A8template/breakfast.js' },
{ title: '🍱 今日のひるごはん', template: '/api/code/takker/%E9%A3%9F%E3%81%B9%E3%81%9F%E3%82%82%E3%81%AE%E8%A8%98%E9%8C%B2%E7%94%A8template/lunch.js' },
{ title: '🍽 今日のよるごはん', template: '/api/code/takker/%E9%A3%9F%E3%81%B9%E3%81%9F%E3%82%82%E3%81%AE%E8%A8%98%E9%8C%B2%E7%94%A8template/dinner.js' },
{ title: '☕ その他食べたもの', template: '/api/code/takker-memex/%E9%A3%9F%E3%81%B9%E3%81%9F%E3%82%82%E3%81%AE%E8%A8%98%E9%8C%B2%E7%94%A8template/snack.js' },
{ title: '🎞作業内容メモ', template: '/api/code/takker/日刊記録sheet_template/record.js' },
{ title: '🚧予定の組み立て', template: '/api/code/takker/予定の組み立てtemplate/planning.js' },
{ title: '📈失敗の分析', template: '/api/code/takker/失敗の分析template/analysis.js' },
];
// テンプレートメニューの定義ここまで ----------
// template menuを追加する
const __templMenuTitle = 'Templates';
scrapbox.PageMenu.addMenu({
title: __templMenuTitle,
image: '/assets/img/logo.png',
onClick: () => { }
});
__templates.forEach((i) => {
scrapbox.PageMenu(__templMenuTitle).addItem({
title: i.title,
onClick: () => { __loadTemplate(i.template) }
})
});
// templateを読み込む函数
var __loadTemplate = (templateUrl) => {
// マウスクリックしたと誤認させるための函数
const __mimicClick = (targetId, left, top) => {
const genEvent = type => {
const event = document.createEvent("MouseEvents");
event.initMouseEvent(type, true, true, window, 1, 0, 0,
left, top, false, false, false, false, 0, null);
return event;
};
const elm = document.getElementById(targetId);
elm.dispatchEvent(genEvent("mousedown"));
elm.dispatchEvent(genEvent("mouseup"));
elm.dispatchEvent(genEvent("click"));
};
if (!(scrapbox.Page.lines && scrapbox.Page.lines.length == 1)) return;
// タイトル行をクリックしたことにする
const line = document.getElementById(L${scrapbox.Page.lines[0].id});
const lastChar = $(line).find('spanclass^="c-"').last().get(0); __mimicClick(line.id, line.offsetWidth, lastChar.offsetTop + 10);
// テンプレートを読み込む
$('#text-input')
.load(templateUrl, (response, status, xhr) => {
if (status != "success") {
console.log(だめでした>< \n${status});
return;
}
try {
// 読み込んだテンプレートをテキストエリアにセットしまして
const textarea = document.getElementById('text-input');
textarea.value = /\.js$/.test(templateUrl) ? eval(response) : response;
// テキストエリアのinputイベントを出しまして
const event = document.createEvent('Event');
event.initEvent('input', true, true);
textarea.dispatchEvent(event);
// 選択状態を解除したいのでもう1回クリックしとく
__mimicClick(line.id, line.offsetWidth, lastChar.offsetTop + 10);
} catch (ex) {
console.log(だめでした>< \n${ex});
}
});
};
}
projectの名前を/takkerに変えただけ
テンプレートを追加
テンプレートを追加
UserScriptに追加