增加三语歌词显示功能，禁止电脑黑屏，改变字体功能

book.toml

@@ -7,7 +7,7 @@ title = "教理部口袋书学习手册范例"
 
 
 [output.html]
-additional-js = ["theme/myjs/mermaid.min.js", "theme/myjs/mermaid-init.js","theme/myjs/jquery-1.12.3.min.js","theme/myjs/lrc.js"]
+additional-js = ["theme/myjs/mermaid.min.js", "theme/myjs/mermaid-init.js","theme/myjs/jquery-1.12.3.min.js","theme/myjs/lrc.js","theme/myjs/nosleep.js"]
 mathjax-support = true
 additional-css = ["theme/mycss/tai-tham-kh-new-v3.ttf","theme/mycss/font.css","theme/mycss/lrc.css"] 
 

src/chanting/evening_chanting_C.md

@@ -7,11 +7,17 @@
   <source src="http://122.114.50.251:8010/jly/audio/dhammacakka_0218.mp3" type="audio/mpeg">
 </audio>
 <button id='lyricFullscreen'>全屏播放</button>
+<button id='lyricNoslep'>禁止熄屏</button>
+
 </div>
 <div id="lyriccontainer">
-	<div id="line-last"><span></span><span></span></div>
-	<div id="line-current" class='active'><span></span><span></span></div>
-	<div id="line-next"><span></span><span></span></div>
+	<div id="line-tools">
+		<button id='lyricBigger'>加大字体</button>
+		<button id='lyricSmaller'>缩小字体</button>
+	</div>
+	<div id="line-last"><span></span><span></span><span></span></div>
+	<div id="line-current" class='active'><span></span><span></span><span></span></div>
+	<div id="line-next"><span></span><span></span><span></span></div>
 </div>
 
 Evaṃ me sutaṃ- ekaṃ samayaṃ bhagavā bārāṇasiyaṃ viharati isipatane migadāye. 

theme/mycss/lrc.css

@@ -1,25 +1,32 @@
-#lyriccontainer:fullscreen,-webkit-full-screen,-moz-full-screen,-ms-fullscreen {
+#lyriccontainer:fullscreen {
 	background-color: white;
 	align-items: center;
 	justify-content: center;
-	font-size: 5rem;
+	font-size: 4vmin;
 }
 
 #lyriccontainer:fullscreen > #line-last {
+	height: 30vh;
 	padding-left: 0rem;
 }
 
 #lyriccontainer:fullscreen > #line-current {
+	height: 40vh;
 	padding-left: 0rem;
 }
 
 #lyriccontainer:fullscreen > #line-next {
+	height: 30vh;
 	padding-left: 0rem;
 }
 
+#lyriccontainer:fullscreen > div {
+	justify-content: center;
+}
+
 #lyriccontainer {
 	background: linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(202,234,206) 50%, rgba(0,0,0,.1) 100%);
-	font-size: 4rem;
+	font-size: 1.6rem;
 	display: flex;
 	width: 100%;
 	flex-direction: column;
@@ -34,26 +41,33 @@
 	flex-direction: column;
 }
 
+#lyriccontainer #line-tools {
+	align-items: center;
+	justify-content: center;
+	flex-direction:row;
+	width:100%
+}
+
 #lyriccontainer #line-last {
-	height: 25rem;
-	padding-left: 1rem;
+	height: 8em;
+	padding-left: 1em;
 }
 
 #lyriccontainer #line-current {
-	height: 30rem;
-	padding-left: 4rem;
+	height: 8em;
+	padding-left: 1.5em;
 }
 
 #lyriccontainer #line-next {
-	height: 25rem;
-	padding-left: 6rem;
+	height: 8em;
+	padding-left: 2em;
 }
 
-#lyricFullscreen {
-	height: 3rem;
-	width: 10rem;
+#lyricFullscreen,#lyricNoslep,#lyricBigger,#lyricSmaller {
+	height: 2em;
+	width: 8em;
 	color: #fff;
-	text-shadow: 0 1px 0 rgba(0,0,0,.2);
+	text-shadow: 0 1em 0 rgba(0,0,0,.2);
 	background-color: #57a957;
 	border-color: #57a957;
 	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));

theme/myjs/lrc.js

@@ -120,6 +120,9 @@
                                     $("#line-last span:eq(0)").text(lc[0]);
                                     if (lc.length > 1) {
                                         $("#line-last span:eq(1)").text(lc[1]);
+                                    }
+									if (lc.length > 2) {
+                                        $("#line-last span:eq(2)").text(lc[2]);
                                     }
                                     $("#line-last").attr("currentLine", k);
                                     $("#line-last span").fadeIn(400,
@@ -135,6 +138,9 @@
                                     $("#line-next span:eq(0)").text(lc[0]);
                                     if (lc.length > 1) {
                                         $("#line-next span:eq(1)").text(lc[1]);
+                                    }
+									if (lc.length > 2) {
+                                        $("#line-next span:eq(2)").text(lc[2]);
                                     }
                                     $("#line-next").attr("currentLine", k);
                                     $("#line-next span").fadeIn(400,
@@ -146,11 +152,14 @@
                             fadeFinish = false;
                             $("#line-current span").fadeOut(400,
                             function() {
-                                var lc = arrLyricObj[k].lrcContent.split("<br/>");
+                                var lc = arrLyricObj[k].lrcContent.split("<br/>");//console.log(lc);
                                 $("#line-current span:eq(0)").text(lc[0]);
                                 if (lc.length > 1) {
                                     $("#line-current span:eq(1)").text(lc[1]);
                                 }
+								if (lc.length > 2) {
+                                        $("#line-current span:eq(2)").text(lc[2]);
+                                    }
                                 $("#line-current").attr("currentLine", k);
                                 $("#line-current span").fadeIn(400,
                                 function() {
@@ -240,4 +249,42 @@ $(function() {
             getPosition: fun_getPosition
         });
     });
+	
+	var noSleep = new NoSleep();
+var btn_lyricNoslep=document.getElementById("lyricNoslep");
+if(btn_lyricNoslep){
+	btn_lyricNoslep.addEventListener('click', function enableNoSleep() {
+		if(btn_lyricNoslep.innerHTML=='禁止熄屏'){
+			btn_lyricNoslep.innerHTML='允许熄屏';
+		  //btn_lyricNoslep.removeEventListener('click', enableNoSleep, false);
+		  noSleep.enable();
+		}else{
+			 btn_lyricNoslep.innerHTML='禁止熄屏';
+		  noSleep.disable();
+		 
+		}
+	}, false);
+}
+var btn_lyricBigger=document.getElementById("lyricBigger");
+if(btn_lyricBigger){
+	btn_lyricBigger.addEventListener('click', function () {
+		var size=getComputedStyle($('#lyriccontainer')[0],false)['font-size'];
+		var num=parseInt(size.substring(0,size.indexOf("px")));console.log(size);
+		num+=2;
+		var unit="px";
+		size=num+unit;
+		$('#lyriccontainer')[0].style.fontSize=size;
+	}, false);
+}
+var btn_lyricSmaller=document.getElementById("lyricSmaller");
+if(btn_lyricSmaller){
+	btn_lyricSmaller.addEventListener('click', function () {
+		var size=getComputedStyle($('#lyriccontainer')[0],false)['font-size'];
+		var num=parseInt(size.substring(0,size.indexOf("px")));console.log(size);
+		num-=2;
+		var unit="px";
+		size=num+unit;
+		$('#lyriccontainer')[0].style.fontSize=size;
+	}, false);
+}
 });