User:Bhsd/widget/as-song.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

//<nowiki>
// 用于[[Widget:As-song]]，可以使用ES6语法
/**
 * @Function: 使用ComboBox筛选歌曲
 * @Dependencies: oojs-ui-core
 * @Author: [[User:Bhsd]]
 */
"use strict";
/*global mw, $, OO, wgUCS*/
// 避免生成全局变量
(() => {
	const main = ($content) => {
		const $container = $content.find( '.as-song-container' );
		if ($container.length === 0) { return; }
		console.log('Hook: wikipage.content，开始添加AS歌曲下拉选单');
		const buildMap = (nodes, selector) =>
			Object.fromEntries( nodes.map(ele => [$(ele).find( selector ).text(), ele]).filter(([s]) => s) ),
			buildOptions = (map) =>
			Object.keys( map ).sort().map(data => new OO.ui.MenuOptionWidget({data, label: data}));
		mw.loader.using( ['oojs-ui-core', 'ext.gadget.site-lib'] ).then(() => {
			$container.each(function() {
				const nodes = [...$(this).find( '.as-song' )],
					mapJa = buildMap(nodes, 'big'),
					mapZh = buildMap(nodes, '.zh'),
					mapEn = buildMap(nodes, '.en'),
					optionsJa = buildOptions( mapJa ),
					optionsZh = buildOptions( mapZh ),
					optionsEn = buildOptions( mapEn ),
					select = new OO.ui.ComboBoxInputWidget({ menu: {items: [
					new OO.ui.MenuSectionOptionWidget({label: '原名'}), ...optionsJa,
					new OO.ui.MenuSectionOptionWidget({label: '中文名'}), ...optionsZh,
					new OO.ui.MenuSectionOptionWidget({label: '英文名'}), ...optionsEn
				], width: '100%', filterFromInput: true, filterMode: 'substring'},
					placeholder: wgUCS('请选择歌曲', '請選擇歌曲')
				}).on('change', val => {
					const newVal = mapJa[ val ] || mapZh[ val ] || mapEn[ val ];
					if (!newVal) { return; }
					$(oldVal).hide(); // $(undefined).hide()不会报错
					$(newVal).show();
					oldVal = newVal;
					history.replaceState(null, '', `#${ val }`);
					location.hash = `#${val}`;
				});
				let oldVal; // jshint ignore: line
				select.$element.prependTo( this );
				select.$field.find( '.oo-ui-buttonElement-button' ).click(() => {
					select.setValue('').getMenu().toggle( false ).toggle( true );
				});
				optionsJa.forEach(ele => { ele.$element.attr('lang', 'ja'); });
				$(window).on('hashchange', () => {
					const hash = location.hash.slice(1),
						name = decodeURIComponent( hash ).replaceAll('_', ' '),
						namee = decodeURIComponent( hash.replace(/\.(?=[\dA-Z]{2})/g, '%') ).replaceAll('_', ' '),
						song = mapJa[ name ] || mapEn[ name ],
						songe = mapJa[ namee ] || mapEn[ namee ];
					if (!song && !songe) { return; }
					const input = select.setValue(song ? name : namee).$element[0];
					input.closest( '.collapsible-block' )?.classList?.add( 'open-block' );
					input.scrollIntoView({behavior: 'smooth'});
				});
			});
			if (location.hash) { setTimeout(() => { $(window).trigger( 'hashchange' ); }, 1000); } // 临时处理手机版折叠
		});
	},
		handler = () => {
		mw.widget = mw.widget || {};
		if (mw.widget.asSong) { return; }
		mw.hook( 'wikipage.content' ).add(main);
		mw.widget.asSong = true;
	};
	if (window.jQuery) { handler(); }
	else { window.addEventListener('jquery', handler); }
}) ();
//</nowiki>
// [[category:jQuery小部件]] {{DEFAULTSORT:As-song}}