pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move all viewer scripts to javascript

Browse Source
This commit is contained in:
Wim Brand
2020-01-21 15:33:09 +01:00
parent 10cbc809ad
commit df278b5e7d
14 changed files with 329 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/include/script/file_viewer/ListNavigator.js
View File

@@ -83,7 +83,7 @@ class ListNavigator {
do {
rand = Math.round(Math.random() * ln.length);
console.log("rand is " + rand);
} while(ln.history.indexOf(index) > -1);
} while(ln.history.indexOf(rand) > -1);
ln.setItem(rand);
}

66
res/include/script/file_viewer/Viewer.js
View File

@@ -9,15 +9,17 @@ class Viewer {
currentFile = "";
title = ""; // Contains either the file name or list title
listId = "";
viewToken = "";
isList = false;
isFile = false;
initialized = false;
constructor(type, data) {let v = this;
constructor(type, viewToken, data) {let v = this;
if(v.initialized){
return;
}
v.viewToken = viewToken;
v.toolbar = new Toolbar(v);
v.detailsWindow = new DetailsWindow(v);
@@ -72,32 +74,52 @@ class Viewer {
// Update the file details
v.detailsWindow.setDetails(file);
// Register a new view. We don't care what this returns becasue we can't
// do anything about it anyway
fetch(apiEndpoint+"/file/"+file.id+"/view",
{
method: "POST",
headers: {"Content-Type": "application/x-www-form-urlencoded"},
body: "token="+v.viewToken
}
);
// Clear the canvas
v.divFilepreview.innerHTML = "";
if (file.mime_type.startsWith("image")) {
let nextItem = () => {
if (v.listNavigator !== null) {
v.listNavigator.nextItem();
}
};
if (
file.mime_type.startsWith("image")
) {
new ImageViewer(v, file).render(v.divFilepreview);
} else if (file.mime_type.startsWith("video")) {
new VideoViewer(v, file, () => {
if (v.listNavigator !== null) {
v.listNavigator.nextItem();
}
}).render(v.divFilepreview);
} else if (file.mime_type.startsWith("audio") || file.mime_type === "application/ogg") {
new AudioViewer(v, file, () => {
if (v.listNavigator !== null) {
v.listNavigator.nextItem();
}
}).render(v.divFilepreview);
} else if (
file.mime_type.startsWith("video") ||
file.mime_type === "application/matroska" ||
file.mime_type === "application/x-matroska"
) {
new VideoViewer(v, file, nextItem).render(v.divFilepreview);
} else if (
file.mime_type.startsWith("audio") ||
file.mime_type === "application/ogg"
) {
new AudioViewer(v, file, nextItem).render(v.divFilepreview);
} else if (
file.mime_type === "application/pdf" ||
file.mime_type === "application/x-pdf"
) {
new PDFViewer(v, file).render(v.divFilepreview);
} else if (
file.mime_type.startsWith("text") ||
file.id === "demo"
) {
new TextViewer(v, file).render(v.divFilepreview);
} else {
fetch("/u/"+file.id+"/preview").then(resp => {
if (!resp.ok) { return Promise.reject(resp.status); }
return resp.text();
}).then(resp => {
v.divFilepreview.innerHTML = resp;
}).catch(err => {
v.divFilepreview.innerText = "Error loading file: "+err;
});
new FileViewer(v, file).render(v.divFilepreview);
}
}

50
res/include/script/file_viewer/viewer_scripts/AudioViewer.js
View File

@@ -8,37 +8,37 @@ class AudioViewer {
element = null;
source = null;
constructor(viewer, file, next) {let av = this;
av.viewer = viewer;
av.file = file;
av.next = next;
constructor(viewer, file, next) {let v = this;
v.viewer = viewer;
v.file = file;
v.next = next;
av.container = document.createElement("div");
av.container.classList = "image-container";
av.container.appendChild(document.createElement("br"));
v.container = document.createElement("div");
v.container.classList = "image-container";
v.container.appendChild(document.createElement("br"));
av.icon = document.createElement("img");
av.icon.src = "/res/img/mime/audio.png";
av.container.appendChild(av.icon);
v.icon = document.createElement("img");
v.icon.src = "/res/img/mime/audio.png";
v.container.appendChild(v.icon);
av.container.appendChild(document.createElement("br"));
av.container.appendChild(document.createTextNode(file.name));
av.container.appendChild(document.createElement("br"));
av.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createTextNode(file.name));
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createElement("br"));
av.element = document.createElement("audio");
av.element.autoplay = "autoplay";
av.element.controls = "controls";
av.element.style.width = "90%";
av.element.addEventListener("ended", () => { av.next(); }, false);
v.element = document.createElement("audio");
v.element.autoplay = "autoplay";
v.element.controls = "controls";
v.element.style.width = "90%";
v.element.addEventListener("ended", () => { v.next(); }, false);
av.source = document.createElement("source");
av.source.src = apiEndpoint+"/file/"+av.file.id;
av.element.appendChild(av.source);
av.container.appendChild(av.element);
v.source = document.createElement("source");
v.source.src = apiEndpoint+"/file/"+v.file.id;
v.element.appendChild(v.source);
v.container.appendChild(v.element);
}
render(parent) {let av = this;
parent.appendChild(av.container);
render(parent) {let v = this;
parent.appendChild(v.container);
}
}

35
res/include/script/file_viewer/viewer_scripts/FileViewer.js Normal file
View File

@@ -0,0 +1,35 @@
class FileViewer {
viewer = null;
file = null;
container = null;
icon = null;
constructor(viewer, file, next) {let v = this;
v.viewer = viewer;
v.file = file;
v.next = next;
v.container = document.createElement("div");
v.container.classList = "image-container";
v.container.appendChild(document.createElement("br"));
v.icon = document.createElement("img");
v.icon.src = apiEndpoint+"/"+file.thumbnail_href;
v.container.appendChild(v.icon);
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createTextNode(file.name));
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createTextNode("Type: "+file.mime_type));
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createTextNode(
"Press the 'Download' button in the menu to download this file"
));
}
render(parent) {let v = this;
parent.appendChild(v.container);
}
}

157
res/include/script/file_viewer/viewer_scripts/ImageViewer.js
View File

@@ -2,54 +2,55 @@ class ImageViewer {
viewer = null;
file = null;
imgContainer = null;
imgElement = null;
container = null;
element = null;
zoomed = false;
x = 0;
y = 0;
dragging = false;
constructor(viewer, file) {let iv = this;
iv.viewer = viewer;
iv.file = file;
constructor(viewer, file) {let v = this;
v.viewer = viewer;
v.file = file;
iv.imgContainer = document.createElement("div");
iv.imgContainer.classList = "image-container";
v.container = document.createElement("dv");
v.container.classList = "image-container";
// v.container.style.lineHeight = "0";
iv.imgElement = document.createElement("img");
iv.imgElement.classList = "pannable drop-shadow";
iv.imgElement.src = apiEndpoint+"/file/"+iv.file.id;
iv.imgElement.addEventListener("mousedown", (e) => { return iv.mousedown(e); });
iv.imgElement.addEventListener("dblclick", (e) => { return iv.doubleclick(e); });
iv.imgElement.addEventListener("doubletap", (e) => { return iv.doubleclick(e); });
document.addEventListener("mousemove", (e) => { return iv.mousemove(e); });
document.addEventListener("mouseup", (e) => { return iv.mouseup(e); });
v.element = document.createElement("img");
v.element.classList = "pannable center drop-shadow";
v.element.src = apiEndpoint+"/file/"+v.file.id;
v.element.addEventListener("dblclick", (e) => { return v.doubleclick(e); });
v.element.addEventListener("doubletap", (e) => { return v.doubleclick(e); });
v.element.addEventListener("mousedown", (e) => { return v.mousedown(e); });
document.addEventListener("mousemove", (e) => { return v.mousemove(e); });
document.addEventListener("mouseup", (e) => { return v.mouseup(e); });
iv.imgContainer.appendChild(iv.imgElement);
v.container.appendChild(v.element);
}
render(parent) {let iv = this;
parent.appendChild(iv.imgContainer);
render(parent) {let v = this;
parent.appendChild(v.container);
}
doubleclick(e) {let iv = this;
if (iv.zoomed) {
iv.imgElement.style.maxWidth = "100%";
iv.imgElement.style.maxHeight = "100%";
iv.imgElement.style.top = "50%";
iv.imgElement.style.left = "auto";
iv.imgElement.style.transform = "translateY(-50%)";
iv.imgContainer.style.overflow = "hidden";
iv.zoomed = false;
doubleclick(e) {let v = this;
if (v.zoomed) {
v.element.style.maxWidth = "100%";
v.element.style.maxHeight = "100%";
v.element.style.top = "50%";
v.element.style.left = "auto";
v.element.style.transform = "translateY(-50%)";
v.container.style.overflow = "hidden";
v.zoomed = false;
} else {
iv.imgElement.style.maxWidth = "none";
iv.imgElement.style.maxHeight = "none";
iv.imgElement.style.top = "0";
iv.imgElement.style.left = "";
iv.imgElement.style.transform = "none";
iv.imgContainer.style.overflow = "scroll";
iv.zoomed = true;
v.element.style.maxWidth = "none";
v.element.style.maxHeight = "none";
v.element.style.top = "0";
v.element.style.left = "";
v.element.style.transform = "none";
v.container.style.overflow = "scroll";
v.zoomed = true;
}
e.preventDefault();
@@ -57,11 +58,11 @@ class ImageViewer {
return false;
}
mousedown(e) {let iv = this;
if (!iv.dragging && e.which === 1 && iv.zoomed) {
iv.x = e.pageX;
iv.y = e.pageY;
iv.dragging = true;
mousedown(e) {let v = this;
if (!v.dragging && e.which === 1 && v.zoomed) {
v.x = e.pageX;
v.y = e.pageY;
v.dragging = true;
e.preventDefault();
e.stopPropagation();
@@ -69,13 +70,13 @@ class ImageViewer {
}
}
mousemove(e) {let iv = this;
if (iv.dragging) {
iv.imgContainer.scrollLeft = iv.imgContainer.scrollLeft - (e.pageX - iv.x);
iv.imgContainer.scrollTop = iv.imgContainer.scrollTop - (e.pageY - iv.y);
mousemove(e) {let v = this;
if (v.dragging) {
v.container.scrollLeft = v.container.scrollLeft - (e.pageX - v.x);
v.container.scrollTop = v.container.scrollTop - (e.pageY - v.y);
iv.x = e.pageX;
iv.y = e.pageY;
v.x = e.pageX;
v.y = e.pageY;
e.preventDefault();
e.stopPropagation();
@@ -84,9 +85,9 @@ class ImageViewer {
}
mouseup(e) {let iv = this;
if (iv.dragging) {
iv.dragging = false;
mouseup(e) {let v = this;
if (v.dragging) {
v.dragging = false;
e.preventDefault();
e.stopPropagation();
@@ -94,63 +95,3 @@ class ImageViewer {
}
}
}
// var zoomed = false;
// // When a user clicks the image
// $("#displayImg").on("dblclick doubletap", function (event) {
// if (zoomed) {
// $("#displayImg").css("max-width", "100%");
// $("#displayImg").css("max-height", "100%");
// $("#displayImg").css("top", "50%");
// $("#displayImg").css("left", "auto");
// $("#displayImg").css("transform", "translateY(-50%)");
// $(".image-container").css("overflow", "hidden");
// zoomed = false;
// } else {
// $("#displayImg").css("max-width", "none");
// $("#displayImg").css("max-height", "none");
// $("#displayImg").css("transform", "none");
// $(".pannable").css("top", "0");
// $(".image-container").css("overflow", "scroll");
// zoomed = true;
// }
// return false;
// });
// Image dragging around the screen
// var drag = {
// x: 0,
// y: 0,
// state: false
// };
// $(".pannable").on("mousedown", function (e) {
// if (!drag.state && e.which === 1 && zoomed) {
// drag.x = e.pageX;
// drag.y = e.pageY;
// drag.state = true;
// return false;
// }
// });
// var img = $(".image-container");
// $(document).on("mousemove", function (e) {
// if (drag.state) {
// img.scrollLeft(img.scrollLeft() - (e.pageX - drag.x));
// img.scrollTop(img.scrollTop() - (e.pageY - drag.y));
// drag.x = e.pageX;
// drag.y = e.pageY;
// }
// });
// $(document).on("mouseup", function () {
// if (drag.state) {
// drag.state = false;
// }
// });

19
res/include/script/file_viewer/viewer_scripts/PDFViewer.js Normal file
View File

@@ -0,0 +1,19 @@
class PDFViewer {
viewer = null;
file = null;
container = null;
constructor(viewer, file) {let v = this;
v.viewer = viewer;
v.file = file;
v.container = document.createElement("iframe");
v.container.classList = "image-container";
v.container.style.border = "none";
v.container.src = "/res/misc/pdf-viewer/web/viewer.html?file="+apiEndpoint+"/file/"+file.id;
}
render(parent) {let v = this;
parent.appendChild(v.container);
}
}

63
res/include/script/file_viewer/viewer_scripts/TextViewer.js Normal file
View File

@@ -0,0 +1,63 @@
class TextViewer {
viewer = null;
file = null;
container = null;
pre = null;
prettyprint = null;
constructor(viewer, file) {let v = this;
v.viewer = viewer;
v.file = file;
v.container = document.createElement("div");
v.container.classList = "text-container";
if (file.name.endsWith(".md") || file.name.endsWith(".markdown") || file.id === "demo") {
v.getMarkdown();
} else {
v.getText();
}
}
getText() {let v = this;
v.pre = document.createElement("pre");
v.pre.classList = "pre-container prettyprint linenums";
v.pre.innerText = "Loading...";
v.container.appendChild(v.pre);
if (v.file.size > 1<<22) { // File larger than 4 MiB
v.pre.innerText = "File is too large to view online.\nPlease download and view it locally.";
return;
}
fetch(apiEndpoint+"/file/"+v.file.id).then(resp => {
if (!resp.ok) { return Promise.reject(resp.status); }
return resp.text();
}).then(resp => {
v.pre.innerText = resp;
// Load prettyprint script
v.prettyprint = document.createElement("script");
v.prettyprint.src = "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert";
v.container.appendChild(v.prettyprint);
}).catch(err => {
v.pre.innerText = "Error loading file: "+err;
});
}
getMarkdown() {let v = this;
fetch("/u/"+v.file.id+"/preview").then(resp => {
if (!resp.ok) { return Promise.reject(resp.status); }
return resp.text();
}).then(resp => {
v.container.innerHTML = resp;
}).catch(err => {
v.container.innerText = "Error loading file: "+err;
});
}
render(parent) {let v = this;
parent.appendChild(v.container);
}
}

34
res/include/script/file_viewer/viewer_scripts/VideoViewer.js
View File

@@ -7,28 +7,28 @@ class VideoViewer {
vidElement = null;
videoSource = null;
constructor(viewer, file, next) {let vv = this;
vv.viewer = viewer;
vv.file = file;
vv.next = next;
constructor(viewer, file, next) {let v = this;
v.viewer = viewer;
v.file = file;
v.next = next;
vv.vidContainer = document.createElement("div");
vv.vidContainer.classList = "image-container";
v.vidContainer = document.createElement("div");
v.vidContainer.classList = "image-container";
vv.vidElement = document.createElement("video");
vv.vidElement.autoplay = "autoplay";
vv.vidElement.controls = "controls";
vv.vidElement.classList = "center drop-shadow";
vv.vidElement.addEventListener("ended", () => { vv.next(); }, false);
v.vidElement = document.createElement("video");
v.vidElement.autoplay = "autoplay";
v.vidElement.controls = "controls";
v.vidElement.classList = "center drop-shadow";
v.vidElement.addEventListener("ended", () => { v.next(); }, false);
vv.videoSource = document.createElement("source");
vv.videoSource.src = apiEndpoint+"/file/"+vv.file.id;
v.videoSource = document.createElement("source");
v.videoSource.src = apiEndpoint+"/file/"+v.file.id;
vv.vidElement.appendChild(vv.videoSource);
vv.vidContainer.appendChild(vv.vidElement);
v.vidElement.appendChild(v.videoSource);
v.vidContainer.appendChild(v.vidElement);
}
render(parent) {let vv = this;
parent.appendChild(vv.vidContainer);
render(parent) {let v = this;
parent.appendChild(v.vidContainer);
}
}

25
res/include/style/viewer.css
View File

@@ -154,20 +154,13 @@
=====================*/
.image-container{
position: relative;
display: block;
height: 100%;
width: 100%;
text-align: center;
overflow: hidden;
}
.image{
position: relative;
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
.text-container{
background: #333 none;
position: relative;
@@ -184,17 +177,6 @@
overflow: hidden;
}
.pannable{
position: relative;
display: inline-block;
margin: auto;
max-width: 100%;
max-height: 100%;
cursor: move;
top: 50%;
transform: translateY(-50%);
}
.center{
position: relative;
display: block;
@@ -205,9 +187,8 @@
transform: translateY(-50%);
}
.drop-shadow{
box-shadow: var(--shadow_color) 10px 10px 50px;
}
.pannable{ cursor: move; }
.drop-shadow{ box-shadow: var(--shadow_color) 10px 10px 50px; }
/* ========================
|| TOOLBAR COMPONENTS ||