diff --git a/README.md b/README.md index 403960b..905588e 100644 --- a/README.md +++ b/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) diff --git a/resources/js/uiActions.js b/resources/js/uiActions.js index 6b32dd5..e543df1 100644 --- a/resources/js/uiActions.js +++ b/resources/js/uiActions.js @@ -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) { diff --git a/resources/js/uiEvents.js b/resources/js/uiEvents.js index 8aa8f44..67e1883 100644 --- a/resources/js/uiEvents.js +++ b/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; diff --git a/resources/js/xmlParser.js b/resources/js/xmlParser.js index bca1048..4e8a737 100644 --- a/resources/js/xmlParser.js +++ b/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 , + "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 += - "" - + "\""" - + "" - + ""; + 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 += - "\"""; + !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 = "" + iconImg - + "" - + ""; + 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"; } }