85 lines
3.4 KiB
HTML
85 lines
3.4 KiB
HTML
<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>
|