Widget:As-song

小部件文档

这个文档是内联文档。

用于LoveLive!学园偶像祭ALL STARS歌曲列表，请使用{{AS song select}}调用。

JavaScript脚本：

window.addEventListener('load', function() {
    document.querySelectorAll( '.as-song-container' ).forEach(function(ele) {
        var select = document.createElement('select'),
            nodeList = ele.querySelectorAll('.as-song'),
            optionArray = [];
        ele.insertBefore(select, ele.firstChild);
        select.lang = 'ja';
        nodeList.forEach(function(table, i) {
            var option = new Option(table.querySelector('big').textContent, i);
            optionArray.push(option);
        });
        optionArray = optionArray.sort(function(a, b) {
            return a.text <= b.text ? -1 : 1;
        });
        optionArray.forEach(function(option) {
            select.add(option);
        });
        select.dataset.oldIndex = optionArray[0].value;
        nodeList[select.dataset.oldIndex].style.display = 'table';
        select.onchange = function() {
            nodeList[select.dataset.oldIndex].style.display = 'none';
            select.dataset.oldIndex = optionArray[select.selectedIndex].value;
            let currentNode = nodeList[select.dataset.oldIndex];
            currentNode.style.display = 'table';
            currentNode.querySelectorAll( '.lazy-image-placeholder' ).forEach(function(e) {
                let img = document.createElement('img');
                img.src = e.dataset.src;
                e.replaceWith(img);
            });
        };
    });
});
//

CSS样式表：

 */
.as-song-container select {
	font-size: 1rem;
	padding: 2px;
	margin-right: 1em;
	font-family: Arial, Helvetica, 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif;
}
@media only screen and (max-width:720px) {
	.as-song-container select {
		width:100%;
		box-sizing:border-box;
	}
}
.as-song-container select + div {
	display: inline-block;
	vertical-align: top;
}
.as-song-container .as-song {
	display: none;
}
/*