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

README.md

@@ -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)

resources/js/uiActions.js

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

resources/js/uiEvents.js

@@ -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;

resources/js/xmlParser.js

@@ -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 +=
+            createElmBlock("DIV", "dirStyle", "dirID", "systemIcon", dirImg ,
-                "<div class=\"dirStyle\"> <img id=\"dirID\""
+                                                            "dirTitle", dir);
-                    + " class=\"systemIcon\" src=\"resources/images/icons/folder.png\" />"
-                    + "<input type=\"text\" id=\"titleID\" class=\"dirTitle\""
-                    + " readonly=\"true\" value=\"" + dir + "\" "
-                    + " onfocusout=\"disableEdits(this)\"/>"
-                + "</dir>";
         }
     }
 
@@ -37,33 +30,28 @@ function updateHTMLDirList(returnData) {
     size             = videos .length;
 
     for (i = 0; i < size; i++) {
-        thumbnail    = videos[i].children[0].innerHTML;
+        thumbnail     = videos[i].children[0].innerHTML;
-        vidNme       = videos[i].children[1].innerHTML;
+        vidNme        = videos[i].children[1].innerHTML;
-
+        createElmBlock("SPAN", "movieStyle", "movieID", "thumbnail", thumbnail,
-        insertArea.innerHTML +=
+                                                         "movieTitle", vidNme);
-            "<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>";
     }
 
     // Insert images
-    var path          = document.getElementById("path").innerHTML;
+    var path       = document.getElementById("path").innerHTML;
-    var thumbnail     = ""
+    var thumbnail  = ""
-    size              = images.length;
+    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")) {
+                             !thumbnail.includes("favicon.png")) {
-                insertArea.innerHTML +=
+            var imgTag       = document.createElement("IMG");
-                    "<img id=\"imageID\" class=\"iconImg\""
+            imgTag.id        = "imageID";
-                        + " src=\"" + path + thumbnail
+            imgTag.className = "iconImg";
-                        + "\" alt=\"" + thumbnail + "\"/>";
+            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 fileName   = files[i].children[0].innerHTML;
-        var iconImg = "<img id=\"fileID\"  class=\"systemIcon\""
+        createElmBlock("DIV", "fileStyle", "fileID", "systemIcon", setFileIconType(fileName),
-                        + setFileIconType(fileName);
+                                                                      "fileTitle", fileName);
-
-        insertArea.innerHTML +=
-            "<div class=\"fileStyle\">" + iconImg
-            + "<input type=\"text\" id=\"titleID\" class=\"fileTitle\""
-                + " readonly=\"true\"" + " value=\"" + fileName + "\" "
-                + " onfocusout=\"disableEdits(this)\"/>"
-            + "</dir>";
     }
 }
 
+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";
     }
 }