テンプレートを作成するUserScript
後からそのページがテンプレートを作るのにふさわしい場合だってある
thanks
使用例
「templateを得ることのできるページのURL」は、GETメソッドによってそのURLにアクセスした場合にevalによって文字列として評価できるJSコードが帰ってくる必要がある。
HowToUse.jsimport TemplateSideMenu from "https://scrapbox.io/api/code/appbirdNotebook-public/テンプレートを作成するUserScript/script.js"
const templates = [{
"title": "[テンプレート名]",
"templateURL": "[templateを得ることのできるページのURL]"
}];
const templateSideMenu = new TemplateSideMenu(templates);
定義
script.js/**
* テンプレートボタンを作成し、クリックしたときの動作が定義される。
* テンプレートサイドメニューのラッパーオブジェクト。
* @typedef {{"title":string,"templateURL":string}} Template
*/
export default class TemplateSideMenu{
/**
* このコンストラクターを実行すると、サイドメニューとしてテンプレートが追加される。
* @param {Array<Template>} templates
*/
constructor(templates){
this.sideMenuName = "Templates";
scrapbox.PageMenu.addMenu({
title: this.sideMenuName,
image: '/assets/img/logo.png',
onClick: () => {}
})
for (const template of templates){
this.addTemplate(template)
}
}
/**
* 新しくテンプレートを追加する。
* @param {Template} template
*/
addTemplate(template){
scrapbox.PageMenu(this.sideMenuName).addItem({
title: template.title,
onClick: () => this.loadTemplateFromProvidedURL(template.templateURL)
.then(template => this.editPageAccordingToProvideTemplete(template))
.catch(reason => alert(reason))
})
}
/**
* 指定されたURLのページに記載された文字列を得、それをテンプレートとして新たにページを作成する。
* @param {string} templateURL テンプレートデータが返されるURL
*/
loadTemplateFromProvidedURL(templateURL){
return new Promise((resolve,reject) => {
if (templateURL === undefined) throw new Error(`
読み込まれた配列のうちにプロパティtemplateURLを所持していないオブジェクトが存在します。
プロパティtemplateになっていませんか？`)
let request = new XMLHttpRequest()
request.addEventListener("loadend",() =>{
switch (request.status){
case 200:
const response = request.responseText;
resolve(templateURL.length - templateURL.lastIndexOf(".js") === 3 ? eval(response):response)
break;
case 404:
reject(`${request.status} テンプレートが存在する場所として指定されたURLのページは存在しません。`);
break;
case 500:
reject(`${request.status} サーバーエラーが発生しました。コードにエラーがあったのかもしれません。`);
break;
default:
reject(`${request.status} エラーが発生しました。`);
}
})
request.open("GET",templateURL)
request.send();
})
}
/**
* このページにテキストを適用する。
* @param {string} templateInText
*/
editPageAccordingToProvideTemplete(templateInText){
const textarea = document.getElementById("text-input");
textarea.value = templateInText;
const event = document.createEvent('Event')
event.initEvent('input', true, true)
textarea.dispatchEvent(event);
}
/**
* @param {string} msg
*/
__throwError(msg){
alert(msg);
}
}