Widget:Lyrics

小部件文档

这个文档是内联文档。

{{Lyrics}}。

Javascript脚本：

window.addEventListener('load', function () {
	//get the lyrics
	var lyrics_original_s=document.getElementsByClassName("lyrics_original")[0].innerHTML;
	var lyrics_translated_s=document.getElementsByClassName("lyrics_translated")[0].innerHTML;

	//replace <p> to \n
	lyrics_original_s=lyrics_original_s.replace(/<p>/g,"").replace(/<\/p>/g,"\n").replace(/<br[^<>]*?>/g,"").trim().split("\n");
	lyrics_translated_s=lyrics_translated_s.replace(/<p>/g,"").replace(/<\/p>/g,"\n").replace(/<br[^<>]*?>/g,"").trim().split("\n");

	//arrange lyrics and put into page
	var lyrics_result=""
	for(var i=0;i<Math.max(lyrics_original_s.length,lyrics_translated_s.length);i++){
		if(lyrics_original_s[i]==undefined)lyrics_original_s[i]="";
		if(lyrics_translated_s[i]==undefined)lyrics_translated_s[i]="";
		lyrics_original_s[i]=lyrics_original_s[i].replace(/{([^,]+?)}(.+?)(?=$|{)/g,"<span style=\"color:$1;\">$2</span>");
		lyrics_original_s[i]=lyrics_original_s[i].replace(/{(.+?)}(.+?)(?=$|{)/g,"<span style=\"background:-webkit-linear-gradient(left,$1);-webkit-background-clip:text;background-clip:text;\"><span style=\"-webkit-text-fill-color:transparent;text-fill-color:transparent\">$2</span></span>");
		lyrics_original_s[i]=lyrics_original_s[i].replace(/{}/g,"");
		lyrics_result+="<div lang=\"ja\" class=\"Lyrics_original\">"+lyrics_original_s[i]+"</div><div class=\"Lyrics_translated\">"+lyrics_translated_s[i]+"</div>";
	}
	document.getElementsByClassName("Lyrics_box")[0].innerHTML=lyrics_result;
});
//

CSS样式表：

 */
.Lyrics_box {
	width: 100%;
	max-width: 1080px;
	display: inline-block;
}
.Lyrics_box .Lyrics_original,
.Lyrics_box .Lyrics_translated {
	width: 49.85%;
	min-width: 480px;
	display: inline-block;
	white-space: pre-wrap;
}
/*