4998409f1b
- Buttons have titles. - There is an icon and the title field for the defined website. - Sample URLs were commented.
109 lines
5.1 KiB
HTML
109 lines
5.1 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": "", /* 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 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')};
|
|
};
|
|
|
|
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();};
|
|
|
|
}
|
|
|
|
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>
|
|
<nav>
|
|
<header class="nav-wrapper">
|
|
<!-- <span class="brand-logo center" id="embeddedName"></span> -->
|
|
<ul id="nav-mobile" class="left">
|
|
<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>
|
|
|
|
<ul id="nav-mobile" class="right">
|
|
<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" id="loadingBar">
|
|
<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>
|