buzzcode2007/iViewer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fixed viewer UI

Browse source 
- Buttons have titles.
- There is an icon and the title field for the defined website.
- Sample URLs were commented.
This commit is contained in:
Saw, Hansly Kendrich 2022-09-11 16:27:46 +08:00
parent f2eedc10cd
commit 4998409f1b
1 changed files with 52 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

78
viewer.html
View file

@ -16,27 +16,23 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script> <script>
let documentData = { let documentData = {
"docName": "Document Name", /* Input the document name here. */ "docName": "", /* 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. */ "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 viewer = {
let embeddedDocument = document.getElementById("embeddedDocument"); "logo": document.getElementById('embeddedLogo'),
"name": document.getElementById('embeddedName'),
"frame": document.getElementById("embeddedDocument")
}; */
embeddedDocument.src = documentData.docURL; 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')}
documentData.docName = embeddedDocument.contentWindow.document.title; else if (documentData.docURL.includes("https://docs.google.com/presentation/")) {document.getElementById('embeddedLogo').classList.add('mdi-file-presentation-box')}
document.getElementById('embeddedName').textContent = documentData.docName; 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() { function toggleFullScreen() {
var elem = document.documentElement; var elem = document.documentElement;
@ -44,19 +40,49 @@
if (document.exitFullscreen) {document.exitFullscreen();} if (document.exitFullscreen) {document.exitFullscreen();}
else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}
else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}
} };
function openFullscreen() { function openFullscreen() {
if (elem.requestFullscreen) {elem.requestFullscreen();} if (elem.requestFullscreen) {elem.requestFullscreen();}
else if (elem.webkitRequestFullscreen) {elem.webkitRequestFullscreen();} else if (elem.webkitRequestFullscreen) {elem.webkitRequestFullscreen();}
else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();} else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();}
} };
let fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || let fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement; 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> </script>
</head> </head>
<body> <body>
@ -64,19 +90,17 @@ document.webkitFullscreenElement || document.msFullscreenElement;
<header class="nav-wrapper"> <header class="nav-wrapper">
<!-- <span class="brand-logo center" id="embeddedName"></span> --> <!-- <span class="brand-logo center" id="embeddedName"></span> -->
<ul id="nav-mobile" class="left"> <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> </ul>
<div class="brand-logo">
</div>
<ul id="nav-mobile" class="right"> <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> </ul>
<!-- <div class="progress"> <div class="progress" id="loadingBar">
<div class="indeterminate"></div> <div class="indeterminate"></div>
</div> --> </div>
</header> </header>
</nav> </nav>
<!-- Please place existing codes here if necessary. --> <!-- Please place existing codes here if necessary. -->