From f2eedc10cd6ca4f56fb0439c508c8b2060e6cf77 Mon Sep 17 00:00:00 2001
From: "Saw, Hansly Kendrich" <hkcsaw25+git@xs.edu.ph>
Date: Sun, 11 Sep 2022 11:27:55 +0800
Subject: [PATCH] initial commit on the viewer

---
 viewer.html | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 viewer.html
diff --git a/viewer.html b/viewer.html
new file mode 100644
index 0000000..3aa43fb
--- /dev/null
+++ b/viewer.html
@@ -0,0 +1,85 @@
+<html>
+	<head>
+		<title>Viewer</title><!-- Change this to the document title. If using PHP, make sure this is automatic. --!>
+
+		<!-- styles -->
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
+		<style>
+			html, body, iframe {cursor: pointer; --Xcholastika-colors-main: #1d2f6f}
+			iframe {border: none; height: 100%;}
+			nav {background-color: var(--Xcholastika-colors-main);}
+		</style>
+		
+		<!-- scripts -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+		<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. */
+			};
+
+			function loadDocument() {
+				let embeddedDocument = document.getElementById("embeddedDocument");
+
+				embeddedDocument.src = documentData.docURL;
+                
+				documentData.docName = embeddedDocument.contentWindow.document.title;
+				document.getElementById('embeddedName').textContent = documentData.docName;
+			};
+            
+			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;
+	
+				function closeFullscreen() {
+					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()}
+			}
+		</script>
+	</head>
+	<body>        
+		<nav>
+			<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>
+				</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>
+				</ul>
+				<!-- <div class="progress">
+					<div class="indeterminate"></div>
+				</div> -->
+			</header>
+		</nav>
+		<!-- Please place existing codes here if necessary. -->
+		<iframe id="embeddedDocument" src='' style="width: 100%; height: 100%;" allow="encrypted-media; picture-in-picture"></iframe>
+	</body>
+</html>
