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

Cleaned up logic and code plus set to double click to open files.

Browse Source
This commit is contained in:
Maxim Stewart 2018-05-03 03:14:28 -05:00
parent e923f87ad3
commit 07a5924e6b
4 changed files with 80 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -6,13 +6,13 @@ WebFM is a media and file viewer aspiring to become a full fledged file manager
2. Use php -S 0.0.0.0:yourDesiredPort
3. Use ufw or gufw to open the port on your computer to the network.
4. Place files or start uploading some to the folders.
5. Single click icons and thumbnails to open files.
5. Double click thumbnails and container outlines to open files.
6. Double click the text name to change the file's or folder's name and press enter to set it.
7. Right-click to get context menu options.
8. Place an image such as a jpg, png, or gif labeled "000.itsExtension" in a directory then the viewer will use it as the background image for that folder/directory.
Notes:
1. Folders and files CAN NOT have & or ' in the names. Otherwise, you can't access that item with the viewer.
2. If you place an image such as a jpg, png, or gif labeled "000.itsExtension" in a directory then the viewer will use it as the background for that folder/directory.
3. The provided folders except "resources" are optional. You can add and remove them as you please.
4. The media and image pane can be moved by dragging from the transparentish bar that has the close button and other controls.
5. Edit the resources/php/config.php file and put your own programs there.
@ -21,7 +21,7 @@ Notes:
1. Allow for move and copy.
3. Fixed the ' issue but & remains a problem.
4. Implement themes functionality.
5. Allow users and groups to password protect based on account type.
# Images
![1 Home](Images/1.png)

12
resources/js/uiActions.js
View File

@ -25,11 +25,13 @@ function enableEdit(obj) {
formerFileName = obj.value;
}
function disableEdits(obj) {
obj.style.backgroundColor = "#ffffff00";
obj.style.color = '#ffffff';
obj.value = formerFileName;
obj.readOnly = "true";
function disableEdits() {
// this references the passed object from
// addEventListener than us passing it
this.style.backgroundColor = "#ffffff00";
this.style.color = '#ffffff';
this.value = formerFileName;
this.readOnly = "true";
}
function showImg(imgLoc) {

19
resources/js/uiEvents.js
View File

@ -1,22 +1,35 @@
// ondblclick
document.onclick = function (event) {
document.ondblclick = function (event) {
var obj = event.target;
var callingID = obj.id;
var classNM = obj.className;
// Left click detect
if (event.which == 1) {
if (callingID == "dirID") {
// If clicking on container
if (classNM == "fileStyle" || classNM == "movieStyle" ||
classNM == "dirStyle") {
if (classNM == "dirStyle") {
getDir(obj.children[1].value);
} else {
showMedia(obj.children[1].value);
}
// If clicking on dir icon
} else if (callingID == "dirID") {
var node = obj.parentNode;
getDir(node.children[1].value);
// If clicking on movie thumbnail
} else if (callingID == "movieID") {
var node = obj.parentNode;
showMedia(node.children[1].value);
// If clicking on file icon
} else if (callingID == "fileID") {
var node = obj.parentNode;
showMedia(node.children[1].value);
// If clicking on image
} else if (callingID == "imageID") {
showImg(obj.alt);
// If clicking on text title
} else if (callingID == "titleID") {
enableEdit(obj);
}
@ -49,7 +62,7 @@ document.onkeydown = function (event) {
}
}
// Drage event for container
// Drage event for the poped out image and media container
function dragContainer(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;

103
resources/js/xmlParser.js
View File

@ -1,3 +1,4 @@
const insertArea = document.getElementById('dynDiv');
function updateHTMLDirList(returnData) {
var dirPath = returnData.getElementsByTagName('PATH_HEAD')[0].innerHTML;
@ -5,29 +6,21 @@ function updateHTMLDirList(returnData) {
var videos = returnData.getElementsByTagName('VID_FILE');
var images = returnData.getElementsByTagName('IMG_FILE');
var files = returnData.getElementsByTagName('FILE');
var insertArea = document.getElementById('dynDiv');
var dirImg = "resources/images/icons/folder.png";
var i = (dirPath === "./") ? i = 2 : i = 0 ; // RM . and ../ if in "root"
var size = 0;
var i = 0;
// Insert dirs
document.getElementById("path").innerHTML = dirPath;
insertArea.innerHTML = "";
// Remove . and ../ if in "root"
if (dirPath === "./") { i = 2 }
size = dirs.length;
for (; i < size; i++) {
var dir = dirs[i].innerHTML;
if (dir != "resources/") {
insertArea.innerHTML +=
"<div class=\"dirStyle\"> <img id=\"dirID\""
+ " class=\"systemIcon\" src=\"resources/images/icons/folder.png\" />"
+ "<input type=\"text\" id=\"titleID\" class=\"dirTitle\""
+ " readonly=\"true\" value=\"" + dir + "\" "
+ " onfocusout=\"disableEdits(this)\"/>"
+ "</dir>";
createElmBlock("DIV", "dirStyle", "dirID", "systemIcon", dirImg ,
"dirTitle", dir);
}
}
@ -37,33 +30,28 @@ function updateHTMLDirList(returnData) {
size = videos .length;
for (i = 0; i < size; i++) {
thumbnail = videos[i].children[0].innerHTML;
vidNme = videos[i].children[1].innerHTML;
insertArea.innerHTML +=
"<span class=\"movieStyle\" title=\"" + vidNme + "\" >"
+ "<img id=\"movieID\" class=\"thumbnail\""
+ " src=\"" + thumbnail + "\" alt=\"" + vidNme + "\" />"
+ "<input type=\"text\" id=\"titleID\" class=\"movieTitle\""
+ " readonly=\"true\"" + " value=\"" + vidNme + "\" "
+ " onfocusout=\"disableEdits(this)\"/>"
+ "</span>";
thumbnail = videos[i].children[0].innerHTML;
vidNme = videos[i].children[1].innerHTML;
createElmBlock("SPAN", "movieStyle", "movieID", "thumbnail", thumbnail,
"movieTitle", vidNme);
}
// Insert images
var path = document.getElementById("path").innerHTML;
var thumbnail = ""
size = images.length;
var path = document.getElementById("path").innerHTML;
var thumbnail = ""
size = images.length;
for (i = 0; i < size; i++) {
thumbnail = images[i].children[0].innerHTML;
if (thumbnail.match(/000\.(jpg|png|gif)\b/) == null &&
!thumbnail.includes("favicon.png")) {
insertArea.innerHTML +=
"<img id=\"imageID\" class=\"iconImg\""
+ " src=\"" + path + thumbnail
+ "\" alt=\"" + thumbnail + "\"/>";
!thumbnail.includes("favicon.png")) {
var imgTag = document.createElement("IMG");
imgTag.id = "imageID";
imgTag.className = "iconImg";
imgTag.src = path + thumbnail;
imgTag.alt = thumbnail;
insertArea.appendChild(imgTag);
}
}
@ -78,35 +66,52 @@ function updateHTMLDirList(returnData) {
// Insert files
size = files.length;
for (i = 0; i < size; i++) {
var fileName = files[i].children[0].innerHTML;
var iconImg = "<img id=\"fileID\" class=\"systemIcon\""
+ setFileIconType(fileName);
insertArea.innerHTML +=
"<div class=\"fileStyle\">" + iconImg
+ "<input type=\"text\" id=\"titleID\" class=\"fileTitle\""
+ " readonly=\"true\"" + " value=\"" + fileName + "\" "
+ " onfocusout=\"disableEdits(this)\"/>"
+ "</dir>";
var fileName = files[i].children[0].innerHTML;
createElmBlock("DIV", "fileStyle", "fileID", "systemIcon", setFileIconType(fileName),
"fileTitle", fileName);
}
}
function createElmBlock(contnrType, contnrClass, imgID, imgClass,
imgSrc, inputClass, fileName) {
var contnrTag = document.createElement(contnrType);
var imgTag = document.createElement("IMG");
var inputTag = document.createElement("INPUT");
contnrTag.className = contnrClass;
contnrTag.title = fileName;
imgTag.id = imgID;
imgTag.className = imgClass ;
imgTag.src = imgSrc;
imgTag.alt = fileName;
inputTag.type = "text";
inputTag.id = "titleID";
inputTag.className = inputClass;
inputTag.readOnly = "true";
inputTag.value = fileName;
inputTag.addEventListener("focusout", disableEdits);
contnrTag.appendChild(imgTag);
contnrTag.appendChild(inputTag);
insertArea.appendChild(contnrTag);
}
function setFileIconType(fileName) {
if (fileName.match(/\.(doc|docx|xls|xlsx|rtf)\b/) != null) {
return " src=\"resources/images/icons/doc.png\" />";
return "resources/images/icons/doc.png";
} else if (fileName.match(/\.(7z|7zip|zip|tar.gz|tar.xz|gz|rar|jar)\b/) != null) {
return " src=\"resources/images/icons/arc.png\" />";
return "resources/images/icons/arc.png";
} else if (fileName.match(/\.(pdf)\b/) != null) {
return " src=\"resources/images/icons/pdf.png\" />";
return "resources/images/icons/pdf.png";
} else if (fileName.match(/\.(html)\b/) != null) {
return " src=\"resources/images/icons/html.png\" />";
return "resources/images/icons/html.png";
} else if (fileName.match(/\.(txt|conf)\b/) != null) {
return " src=\"resources/images/icons/text.png\" />";
return "resources/images/icons/text.png";
} else if (fileName.match(/\.(iso|img)\b/) != null) {
return " src=\"resources/images/icons/img.png\" />";
return "resources/images/icons/img.png";
} else if (fileName.match(/\.(sh|batch|exe)\b/) != null) {
return " src=\"resources/images/icons/scrip.png\" />";
return "resources/images/icons/scrip.png";
} else {
return " src=\"resources/images/icons/bin.png\" />";
return "resources/images/icons/bin.png";
}
}