itdominator/WebFM
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merged media container creation. Allows for multiple now.

Browse Source
This commit is contained in:
Maxim Stewart 2019-01-23 20:02:56 -06:00
parent 4c17be62b3
commit d0511bc6fb
3 changed files with 70 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -38,8 +38,6 @@
<!-- Dynamic content targets -->
<ul id="favesList" style="display: none;"> </ul>
<div id="dynDiv"></div>
<div id="imgView" style="display:none;"></div>
<div id="fileView" style="display:none;"></div>
<div id="popOutControls" style="display:none;">
<center>

107
resources/js/uiActions.js
View File

@ -48,52 +48,81 @@ const disableEdits = () => {
this.readOnly = "true";
}
const showImg = (imgLoc) => {
let path = document.getElementById("path").innerHTML;
let imgView = document.getElementById("imgView");
let fullImage = path + imgLoc;
let toPlayerButton = "<div title=\"Open In Local Program\" class=\"popOutBttn\" onclick=\"openInLocalProg('" + fullImage + "')\">&#8765;</div>";
let popButton = "<a href=\"" + fullImage + "\" target=\"_blank\"><div class=\"popOutBttn\">&#8599;</div></a>";
let CloseBttn = "<div class=\"closeBttn\" onclick=\"closeImg()\">X</div>";
imgView.style.display = "block";
imgView.innerHTML = CloseBttn + popButton + toPlayerButton;
const showMedia = (mediaLoc, type) => {
let path = document.getElementById("path").innerHTML;
let tempRef = mediaLoc.toLowerCase();
let fullMedia = path + mediaLoc;
imgView.innerHTML += "<div id=\"imgArea\"><img class=\"imgViewImg\" src=\"" + fullImage + "\" /></div>";
dragContainer(imgView); // Set for dragging events
}
let iframe = document.createElement("IFRAME");
let outterDiv = document.createElement("DIV");
let popOutDiv = document.createElement("DIV");
let closeDiv = document.createElement("DIV");
let toLocDiv = document.createElement("DIV");
let imgDiv = document.createElement("DIV");
let aTag = document.createElement("A");
let imgTag = document.createElement("IMG");
let closeText = document.createTextNode("X");
const showMedia = (media) => {
let path = document.getElementById("path").innerHTML;
let tempRef = media.toLowerCase();
let fullMedia = path + media;
if (type === "image") {
outterDiv.id = "imgView";
} else {
outterDiv.id = "fileView";
}
closeDiv.className = "closeBttn";
closeDiv.title = "Close";
closeDiv.setAttribute("onclick", "closeContainer(this)");
closeDiv.appendChild(closeText);
aTag.title = "New Tab";
aTag.target = "_blank";
aTag.href = fullMedia;
popOutDiv.className = "popOutBttn";
popOutDiv.innerHTML = "&#8599;";
aTag.appendChild(popOutDiv);
toLocDiv.title = "Open In Local Program";
toLocDiv.className = "popOutBttn";
toLocDiv.innerHTML = "&#8765;";
toLocDiv.setAttribute("onclick", "openInLocalProg('" + fullMedia + "')");
imgDiv.id = "imgArea";
imgTag.className = "imgViewImg";
imgDiv.appendChild(imgTag);
imgTag.src = fullMedia;
if (tempRef.includes(".mp4") || tempRef.includes(".webm") ||
tempRef.includes(".mp3") || tempRef.includes(".ogg") ||
tempRef.includes(".pdf") || tempRef.includes(".flac")) {
let mediaView = document.getElementById("fileView");
let toPlayerButton = "<div title=\"Open In Local Program\" class=\"popOutBttn\" onclick=\"openInLocalProg('" + fullMedia + "')\">&#8765;</div>";
let popButton = "<a title=\"New Tab\" href=\"" + fullMedia + "\" target=\"_blank\"><div class=\"popOutBttn\">&#8599;</div></a>";
let CloseBttn = "<div class=\"closeBttn\" title=\"Close\" onclick=\"closeMedia()\">X</div>";
mediaView.style.display = "block";
mediaView.innerHTML = CloseBttn + popButton + toPlayerButton;
mediaView.innerHTML += "<iframe id=\"fileViewInner\" src=\"" + fullMedia + "\"></iframe>";
dragContainer(mediaView); // Set for dragging events
} else {
openInLocalProg(fullMedia);
tempRef.includes(".mp3") || tempRef.includes(".ogg") ||
tempRef.includes(".pdf") || tempRef.includes(".flac") ||
tempRef.includes(".mkv") || tempRef.includes(".avi")) {
if (tempRef.includes(".mkv") || tempRef.includes(".avi")) {
openInLocalProg(fullMedia);
return;
// Future option to convert container and view certain media.
// fullMedia = quickRemux(fullMedia);
}
}
iframe.id = "fileViewInner";
iframe.src = fullMedia;
outterDiv.appendChild(closeDiv);
outterDiv.appendChild(aTag);
outterDiv.appendChild(toLocDiv);
if (type === "image") {
outterDiv.appendChild(imgDiv);
} else {
outterDiv.appendChild(iframe);
}
document.body.appendChild(outterDiv);
dragContainer(outterDiv); // Set for dragging events
}
const closeImg = () => {
let imgView = document.getElementById("imgView");
imgView.style.display = "none";
}
const closeMedia = () => {
let mediaView = document.getElementById("fileView");
mediaView.style.display = "none";
mediaView.children[3].src = "";
const closeContainer = (elm) => {
elm.parentElement.parentElement.removeChild(elm.parentElement);
}
const clearDirCookie = () => {

4
resources/js/uiEvents.js
View File

@ -48,8 +48,8 @@ document.ondblclick = (event) => {
let node = obj.parentNode;
showMedia(node.children[1].value);
// If clicking on image
} else if (callingID == "imageID") {
showImg(obj.alt);
} else if (callingID == "imageID", "image") {
showMedia(obj.alt);
// If clicking on text title
} else if (callingID == "titleID") {
enableEdit(obj);