2022-09-11 03:27:55 +00:00
< 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 = {
2022-09-11 08:27:46 +00:00
"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" */
2022-09-11 03:27:55 +00:00
};
2022-09-11 08:27:46 +00:00
/* let viewer = {
"logo": document.getElementById('embeddedLogo'),
"name": document.getElementById('embeddedName'),
"frame": document.getElementById("embeddedDocument")
}; */
2022-09-11 03:27:55 +00:00
2022-09-11 08:27:46 +00:00
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')};
2022-09-11 03:27:55 +00:00
};
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();}
2022-09-11 08:27:46 +00:00
};
2022-09-11 03:27:55 +00:00
function openFullscreen() {
if (elem.requestFullscreen) {elem.requestFullscreen();}
else if (elem.webkitRequestFullscreen) {elem.webkitRequestFullscreen();}
else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();}
2022-09-11 08:27:46 +00:00
};
2022-09-11 03:27:55 +00:00
let fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;
2022-09-11 08:27:46 +00:00
if (fullscreenElement != null) {closeFullscreen();} else {openFullscreen();};
2022-09-11 03:27:55 +00:00
}
2022-09-11 08:27:46 +00:00
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)
})
});
2022-09-11 03:27:55 +00:00
< / script >
< / head >
< body >
< nav >
< header class = "nav-wrapper" >
<!-- <span class="brand - logo center" id="embeddedName"></span> -->
< ul id = "nav-mobile" class = "left" >
2022-09-11 08:27:46 +00:00
< 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 >
2022-09-11 03:27:55 +00:00
< / ul >
< ul id = "nav-mobile" class = "right" >
2022-09-11 08:27:46 +00:00
< li > < a title = "Toggle full screen" class = "waves-effect waves-light" onclick = "toggleFullScreen()" style = "color: white;" > < i class = "mdi mdi-fullscreen" > < / i > < / a > < / li >
2022-09-11 03:27:55 +00:00
< / ul >
2022-09-11 08:27:46 +00:00
< div class = "progress" id = "loadingBar" >
2022-09-11 03:27:55 +00:00
< div class = "indeterminate" > < / div >
2022-09-11 08:27:46 +00:00
< / div >
2022-09-11 03:27:55 +00:00
< / 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 >