利用者:Funa-enpitu/mobilemenu.js

/*
作者: Funa-enpitu
更新: 2023年2月28日 (火) 08:53 (UTC)
説明: [[特別:Mobile_Menu]]からモバイルビューのサイドバーを設定できるようにする。
ドキュメント: https://funa.miraheze.org/wiki/モバイルビューのサイドバーを改造できる!スクリプト「Mobile_Menu」をご紹介
*/
if(mw.config.get('skin')=='minerva'){
	document.querySelector('#mw-mf-page-left').innerHTML += '<style>#mw-mf-page-left > ul:not(.mm){display:none;}</style>';
	if(localStorage.getItem("us-mm")==null){
		localStorage.setItem("us-mm", '[{"group":"mm-setting", "items":[{"text":"サイドバーの設定", "url":"'+mw.config.get('wgArticlePath').replace("$1","特別:Mobile_Menu")+'", "img":"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCI+Cgk8dGl0bGU+CgkJc2V0dGluZ3MKCTwvdGl0bGU+Cgk8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMCAxMCkiPgoJCTxwYXRoIGlkPSJhIiBkPSJNMS41LTEwaC0zbC0xIDYuNWg1bTAgN2gtNWwxIDYuNWgzIi8+CgkJPHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIi8+CgkJPHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJyb3RhdGUoOTApIi8+CgkJPHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJyb3RhdGUoMTM1KSIvPgoJPC9nPgoJPHBhdGggZD0iTTEwIDIuNWE3LjUgNy41IDAgMCAwIDAgMTUgNy41IDcuNSAwIDAgMCAwLTE1djRhMy41IDMuNSAwIDAgMSAwIDcgMy41IDMuNSAwIDAgMSAwLTciLz4KPC9zdmc+Cg=="}]}]');
	}
	let mm_data = JSON.parse(localStorage.getItem("us-mm"));
	mm_data.forEach(function(obj) {
		document.querySelector('#mw-mf-page-left').innerHTML += `<ul id="p-${obj.group}" class="mm"></ul>`;
		obj.items.forEach(function(item) {
			document.querySelector(`#p-${obj.group}`).innerHTML += `<li class=""><a href="${item.url}" class="menu__item--${item.text}" data-mw="interface" data-event-name=""><span class="mw-ui-icon-minerva-${item.text} mw-ui-icon"></span><span>${item.text}</span></a><style>.mw-ui-icon-minerva-${item.text}:before{background-image: url('${item.img}');background-image: linear-gradient(transparent,transparent),url('${item.img}');}</style></li>`;
		});
	});
	console.log("== Mobile Menu ==\nhttps://ja-two.iwiki.icu/wiki/利用者:Funa-enpitu/mobilemenu.js");
	if(mw.config.get('wgPageName')=="特別:Mobile_Menu"){
		document.body.innerHTML += '<style>.mm-input{border:1px solid #000; padding:3px; border-radius:3px; background:#f1f1f1;}#mm-setting-text{width:100%; height:20em;}#mm-edit{margin-bottom:5px;}#mm-edit>label{border-radius:3px 3px 0 0; border-bottom-width:.5px;}#mm-edit>label:not(:last-child){margin-right:5px;}input[name="mm-tab"][type="radio"]+div{display:none;}input[name="mm-tab"][type="radio"]:checked+div{display:block; border:1px solid #000; padding:.3em;}div:has(#mm-change-group-cb:checked)>#mm-change-group{background:#ffffff;}div:has(#mm-change-item-cb:checked)>#mm-change-item{background:#ffffff;}div:has(#mm-edit-item-cb:checked)>#mm-edit-item{background:#ffffff;}div:has(#mm-delete-cb:checked)>#mm-delete{background:#ffffff;}.mm-label{margin-right:.5em;}.mm-input[type="text"]{background:#fff; width:100%;}.mm-table{margin:0 !important;margin-bottom:.5em !important;}</style>';
		document.querySelector('#firstHeading').innerText = "モバイルメニューの設定";
		document.querySelector('#mw-content-text').innerHTML = `<div>使い方の詳細やヘルプは<a href="https://funa.miraheze.org/wiki/モバイルビューのサイドバーを改造できる!スクリプト「Mobile_Menu」をご紹介">ドキュメント</a>を参照してください</div><div id="mm-edit"><label class="mm-input" for="mm-change-group-cb" id="mm-change-group">グループを追加</label><label class="mm-input" for="mm-change-item-cb" id="mm-change-item">項目を変更</label><label class="mm-input" for="mm-delete-cb" id="mm-delete">削除</label><input checked hidden="" id="mm-change-group-cb" name="mm-tab" type="radio"><div><table class="mm-table"><tbody><tr><td><label class="mm-label" for="mm-change-group-name">グループ名:</label></td><td><input class="mm-input" id="mm-change-group-name" type="text"></td></tr></tbody></table><input class="mm-input" id="mm-change-group-save" type="button" value="追加"></div><input hidden="" id="mm-change-item-cb" name="mm-tab" type="radio"><div><table class="mm-table"><tbody><tr><td><label for="mm-change-item-group">番数:</label></td><td><input class="mm-input" id="mm-change-item-group" type="text"></td></tr><tr><td><label for="mm-change-item-num">項目番数:</label></td><td><input class="mm-input" id="mm-change-item-num" type="text"><div style="font-size:.75em;">指定しない場合は項目を追加します</div></td></tr><tr><td><label class="mm-label" for="mm-change-item-text">テキスト:</label></td><td><input class="mm-input" id="mm-change-item-text" type="text"></td></tr><tr><td><label for="mm-change-item-url">URL:</label></td><td><input class="mm-input" id="mm-change-item-url" type="text"></td></tr><tr><td><label for="mm-change-item-img">画像:</label></td><td><input class="mm-input" id="mm-change-item-img" type="text"></td></tr></tbody></table><input class="mm-input" id="mm-change-item-save" type="button" value="変更"></div><input hidden="" id="mm-delete-cb" name="mm-tab" type="radio"><div><div>グループを削除する場合は<code>グループの番数</code>、項目を削除する場合は<code>グループの番数.項目の番数</code>のように入力。</div><table><tbody><tr><td><input class="mm-input" id="mm-delete-root" type="text"></td></tr></tbody></table><input class="mm-input" id="mm-delete-delete" type="button" value="削除"></div></div><textarea id="mm-setting-text">${localStorage.getItem("us-mm")}</textarea><input class="mm-input" id="mm-setting-save" type="button" value="保存">`;
		document.title = "モバイルメニューの設定 - "+mw.config.get('wgSiteName');
		if(location.hash=="#save"){
			mw.notify('設定を変更しました');
			location.href = "#";
		}
		document.querySelector('#mm-setting-save').onclick = function() {
			localStorage.setItem("us-mm", document.querySelector('#mm-setting-text').value);
			location.href = "#save";
			location.reload();
		};
		let editjson;
		document.querySelector('#mm-change-group-save').onclick = function(){
			editjson = JSON.parse(document.querySelector('#mm-setting-text').value);
			editjson[editjson.length] = {
				group: document.querySelector('#mm-change-group-name').value,
				items: []
			};
			document.querySelector('#mm-setting-text').value = JSON.stringify(editjson);
			document.querySelector('#mm-change-group-name').value = "";
		};
		document.querySelector('#mm-change-item-save').onclick = function(){
			editjson = JSON.parse(document.querySelector('#mm-setting-text').value);
			let edititems = editjson[Number(document.querySelector('#mm-change-item-group').value)-1].items.length;
			editjson[Number(document.querySelector('#mm-change-item-group').value)-1].items[(function(){if(document.querySelector('#mm-change-item-num').value==""){return edititems;}else{return Number(document.querySelector('#mm-change-item-num').value)-1;}})()] = {
				text: document.querySelector('#mm-change-item-text').value,
				url: document.querySelector('#mm-change-item-url').value,
				img: document.querySelector('#mm-change-item-img').value
			};
			document.querySelector('#mm-setting-text').value = JSON.stringify(editjson);
			document.querySelector('#mm-change-item-group').value = "";
			document.querySelector('#mm-change-item-text').value = "";
			document.querySelector('#mm-change-item-url').value = "";
			document.querySelector('#mm-change-item-img').value = "";
			document.querySelector('#mm-change-item-num').value = "";
		};
		document.querySelector('#mm-delete-delete').onclick = function(){
			editjson = JSON.parse(document.querySelector('#mm-setting-text').value);
			if(document.querySelector("#mm-delete-root").value.indexOf('.')==-1){
				editjson.splice(Number(document.querySelector("#mm-delete-root").value));
			}else{
				editjson[Number(document.querySelector("#mm-delete-root").value.replace(/(.*)\..*/,"$1"))-1].items.splice(Number(document.querySelector("#mm-delete-root").value.replace(/.*\.(.*)/,"$1"))-1,1);
			}
			document.querySelector('#mm-setting-text').value = JSON.stringify(editjson);
			document.querySelector('#mm-delete-root').value = "";
		};
	}
}