fixed viewer UI
- Buttons have titles. - There is an icon and the title field for the defined website. - Sample URLs were commented.
This commit is contained in:
parent
f2eedc10cd
commit
4998409f1b
1 changed files with 52 additions and 28 deletions
78
viewer.html
78
viewer.html
|
@ -16,27 +16,23 @@
|
|||
<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. */
|
||||
"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" */
|
||||
};
|
||||
|
||||
function loadDocument() {
|
||||
let embeddedDocument = document.getElementById("embeddedDocument");
|
||||
/* let viewer = {
|
||||
"logo": document.getElementById('embeddedLogo'),
|
||||
"name": document.getElementById('embeddedName'),
|
||||
"frame": document.getElementById("embeddedDocument")
|
||||
}; */
|
||||
|
||||
embeddedDocument.src = documentData.docURL;
|
||||
|
||||
documentData.docName = embeddedDocument.contentWindow.document.title;
|
||||
document.getElementById('embeddedName').textContent = documentData.docName;
|
||||
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')};
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
|
@ -44,19 +40,49 @@
|
|||
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()}
|
||||
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>
|
||||
|
@ -64,19 +90,17 @@ document.webkitFullscreenElement || document.msFullscreenElement;
|
|||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<div class="progress" id="loadingBar">
|
||||
<div class="indeterminate"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
</header>
|
||||
</nav>
|
||||
<!-- Please place existing codes here if necessary. -->
|
||||
|
|
Loading…
Reference in a new issue