From 4998409f1bfc4f4e5bef6b30451e667572df8df7 Mon Sep 17 00:00:00 2001
From: "Saw, Hansly Kendrich" <hkcsaw25+git@xs.edu.ph>
Date: Sun, 11 Sep 2022 16:27:46 +0800
Subject: [PATCH] fixed viewer UI - Buttons have titles. - There is an icon and
 the title field for the defined website. - Sample URLs were commented.

---
 viewer.html | 80 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 52 insertions(+), 28 deletions(-)

diff --git a/viewer.html b/viewer.html
index 3aa43fb..78041c4 100644
--- a/viewer.html
+++ b/viewer.html
@@ -16,26 +16,22 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 		<script>
 			let documentData = {
-				"docName": "Document Name", /* Input the document name here. */
-				"docURL": "https://docs.google.com/presentation/d/1abnqM9j6zFodPHA38JG1061rG2iGj_GABxEDgZsdbJg/preview?slide=id.i0" /* Input the document URL name. Change "view" in the URL to "preview" and make sure that the link is viewable to all. */
+				"docName": "", /* Input the document name here. */
+				"docURL": "" /* Input the document URL name. Change "view" in the URL to "preview" and make sure that the link is viewable to all. Test URLs include "https://www.youtube-nocookie.com/embed/NCpzZYdiseg" and  "https://docs.google.com/presentation/d/1abnqM9j6zFodPHA38JG1061rG2iGj_GABxEDgZsdbJg/preview?slide=id.i0" */
 			};
+			
+			/* let viewer = {
+				"logo": document.getElementById('embeddedLogo'),
+				"name": document.getElementById('embeddedName'),
+				"frame": document.getElementById("embeddedDocument")
+			}; */
 
-			function loadDocument() {
-				let embeddedDocument = document.getElementById("embeddedDocument");
-
-				embeddedDocument.src = documentData.docURL;
-                
-				documentData.docName = embeddedDocument.contentWindow.document.title;
-				document.getElementById('embeddedName').textContent = documentData.docName;
+			function checkURLOrigin() {
+				if (documentData.docURL.includes("https://www.youtube.co") || documentData.docURL.includes("https://m.youtube.co") || documentData.docURL.includes("https://www.youtube-nocookie.com")) {document.getElementById('embeddedLogo').classList.add('mdi-youtube')}
+				else if (documentData.docURL.includes("https://docs.google.com/presentation/")) {document.getElementById('embeddedLogo').classList.add('mdi-file-presentation-box')}
+				else if (documentData.docURL.includes("https://docs.google.com/document/")) {document.getElementById('embeddedLogo').classList.add('mdi-text-box')}
+				else if (documentData.docURL.includes("https://docs.google.com/file/") || documentData.docURL.includes("https://docs.google.com/folder/")) {document.getElementById('embeddedLogo').classList.add('mdi-drive')};
 			};
-            
-			document.addEventListener('DOMContentLoaded', function() {
-				var elems = document.querySelectorAll('.fixed-action-btn');
-				var instances = M.FloatingActionButton.init(elems, options = '');
-
-				loadDocument(); 
-				console.clear();
-			});
 			
 			function toggleFullScreen() {
 				var elem = document.documentElement;
@@ -44,19 +40,49 @@
 					if (document.exitFullscreen) {document.exitFullscreen();}
 					else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}
 					else if (document.msExitFullscreen) {document.msExitFullscreen();}
-				}
+				};
 	
 				function openFullscreen() {
 					if (elem.requestFullscreen) {elem.requestFullscreen();}
 					else if (elem.webkitRequestFullscreen) {elem.webkitRequestFullscreen();}
 					else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();}
-				}
+				};
 	
 				let fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
 document.webkitFullscreenElement || document.msFullscreenElement;
 	
-				if (fullscreenElement != null) {closeFullscreen()} else {openFullscreen()}
+				if (fullscreenElement != null) {closeFullscreen();} else {openFullscreen();};
+				
 			}
+			
+			function toggleLoadBar(visibility = false) {
+				if (visibility == false) {
+					document.getElementById("loadingBar").style.visibility = "hidden";
+				} else {
+					document.getElementById("loadingBar").style.visibility = "visible";
+				};
+			};
+			
+			function loadDocument() {
+				checkURLOrigin(); toggleLoadBar(visibility = true)
+				document.getElementById("embeddedDocument").src = documentData.docURL; checkURLOrigin();
+				
+				$( "iframe" ).on('load',function() {
+					documentData.docName = document.getElementById("embeddedDocument").contentWindow.document.title;
+					document.getElementById("embeddedName").textContent = documentData.docName;
+				})
+			};
+			
+			document.addEventListener('DOMContentLoaded', function() {
+				let elems = document.querySelectorAll('.fixed-action-btn'); let instances = M.FloatingActionButton.init(elems, options = '');
+
+				loadDocument();
+				checkURLOrigin();
+				
+				$( "iframe" ).on('load',function() {
+					toggleLoadBar(visibility = false)
+				})
+			});
 		</script>
 	</head>
 	<body>        
@@ -64,19 +90,17 @@ document.webkitFullscreenElement || document.msFullscreenElement;
 			<header class="nav-wrapper">
 				<!-- <span class="brand-logo center" id="embeddedName"></span> -->
 				<ul id="nav-mobile" class="left">
-					<li><a class="waves-effect waves-light" onclick="history.back()" style="color: white;"><i class="mdi mdi-keyboard-backspace"></i></a></li>
+					<li><a title="Back" class="waves-effect waves-light" onclick="history.back()" style="color: white;"><i class="mdi mdi-keyboard-backspace"></i></a></li>
+					<li><a title="Reset" id="controlReset" class="waves-effect waves-light" onclick="loadDocument()"><i id="embeddedLogo" class="mdi"></i></a></li>
+					<li><strong id="embeddedName"></strong></li>
 				</ul>
 				
-				<div class="brand-logo">
-					
-				</div>
-				
 				<ul id="nav-mobile" class="right">
-					<li><a href="javascript:toggleFullScreen();" class="waves-effect waves-light" onclick="toggleFullScreen()" style="color: white;"><i class="mdi mdi-fullscreen"></i></a></li>
+					<li><a title="Toggle full screen" class="waves-effect waves-light" onclick="toggleFullScreen()" style="color: white;"><i class="mdi mdi-fullscreen"></i></a></li>
 				</ul>
-				<!-- <div class="progress">
+				<div class="progress" id="loadingBar">
 					<div class="indeterminate"></div>
-				</div> -->
+				</div>
 			</header>
 		</nav>
 		<!-- Please place existing codes here if necessary. -->