/*
作者: Funa-enpitu
更新: 2024年11月16日 (土) 08:03 (UTC)
説明: [[特別:Mobile_Menu]]からモバイルビューのサイドバーを設定できるようにする。
ドキュメント: https://funa.miraheze.org/wiki/モバイルビューのサイドバーを改造できる!スクリプト「Mobile_Menu」をご紹介
*/
(()=>{
if(mw.config.get('skin')!='minerva'){return;}
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":"settings"}]}]');
}
let mm_data = JSON.parse(localStorage.getItem("us-mm"));
mm_data.forEach(function(obj) {
const gobj = mw.util.addPortlet(`p-${obj.group}`, '', '#p-navigation');
gobj.style.display = 'block';
gobj.querySelector('div > ul').classList.add('toggle-list__list', 'mm');
gobj.querySelector('div > ul').setAttribute('id', `p-${obj.group}-list`);
// document.querySelector('#mw-mf-page-left').innerHTML += `<ul id="p-${obj.group}" class="mm"></ul>`;
obj.items.forEach(function(item) {
// document.querySelector().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>`;
const iobj = mw.util.addPortletLink(`p-${obj.group}-list`, item.url, item.text);
iobj.classList.add('toggle-list-item');
iobj.querySelector('a').classList.add('toggle-list-item__anchor');
iobj.querySelector('.minerva-icon').classList.add(`minerva-icon--${item.img}`);
});
});
console.log("== Mobile Menu ==\nhttps://ja.wikipedia.org/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 = "";
};
}
})();