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

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);
}
}