buzz-lightsnack-2007/iViewer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

initial commit on the viewer

Browse source
This commit is contained in:
Saw, Hansly Kendrich 2022-09-11 11:27:55 +08:00
commit f2eedc10cd
1 changed files with 85 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
viewer.html Normal file
View file

@ -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>