Added search fuunctionality.

index.html

@@ -21,24 +21,26 @@
     </menu>
 
     <!-- Uploader -->
-    <h2 id="fullPathHeader">
+    <h2 id="controls">
         <button type="button" title="Other Options" onclick="tgglElmView('popOutControls')">&#9881;</button>
         <button type="button" title="Refresh" onclick="getDir('./')">&#8635;</button>
         <button type="button" title="Back" onclick="getDir('../')">&lArr;</button>
-        <button type="button" id="faves" title="Favorites" onclick="faveManager(this)">&#9734;</button>
-        <span id="faves-constraint" >
-            <button onclick="getFavesList(); tgglElmView(this.parentElement.children[1].id)">Faves List &#8597;</button>
-            <ol id="favesList" style="display: none;"> </ol>
-        </span>
-        &nbsp;&nbsp;&nbsp;&nbsp;Path:&nbsp;&nbsp;<span id="path"></span>
+        <input type="text" placeholder="Search..." onkeyup="searchPage(this)" name="" value="">
+        <button type="button" onclick="clearSearch()" title="Clears search..." >Clear Search</button>
+        <button onclick="getFavesList(); tgglElmView('favesList')">Faves List &#8597;</button>
+    </h2>
+
+    <h2 id="fullPathHeader">
+        <button type="button" id="faves" onclick="faveManager(this)" title="Add/Delete from favorites..." >&#9734;</button>
+        Path:<span id="path"></span>
     </h2>
 
     <!-- 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>
         <form>

resources/css/base.css

@@ -2,3 +2,7 @@ html {
     margin: 0em;
     padding: 0em;
 }
+
+ol, ul, li {
+    list-style: none;
+}

resources/css/main.css

@@ -25,7 +25,7 @@
     z-index: -999;
 }
 
-#fullPathHeader, #dynDiv,
+#controls, #fullPathHeader, #dynDiv,
 .errorStyling, .dirStyle, .movieStyle, .fileStyle {
     display: block;
     width: 100%;
@@ -49,6 +49,7 @@
     overflow-y: scroll;
     padding: 1.5em;
     max-height: 632px;
+    color: #ffffff;
 }
 
 #favesList > li:hover {
@@ -58,16 +59,15 @@
     padding-right: 1em;
 }
 
-
-#fullPathHeader {
+#fullPathHeader,
+#controls {
     display: block;
     position: fixed;
-    top: 0.5em;
 }
 
-#dynDiv {
-    margin-top: 5em;
-}
+#controls { top: 0em; }
+#fullPathHeader { top: 2em; }
+#dynDiv { margin-top: 5em; }
 
 #imgView, #imgArea, #fileView {
    width: 800px;
@@ -101,7 +101,10 @@
     overflow-y: scroll;
 }
 
-#imgView { overflow: hidden; left: 15em; }
+#imgView {
+    overflow: hidden;
+    left: 15em;
+}
 
 #NewItem {
     background-color: #ffffff;

resources/js/favorites.js

@@ -19,7 +19,7 @@ const faveManager = (elm) => {
 // Basically resetting path nodes and setting them up
 // to the new path and just doing a refresh
 const loadFave = (elm) => {
-    let path  = elm.innerHTML;
+    let path  = elm.getAttribute("name");
     let parts = path.split("/");
     let size  = parts.length;
     pathNodes = [];

resources/js/uiActions.js

@@ -9,6 +9,29 @@ const tgglElmView = (id) => {
     }
 }
 
+const searchPage = (elm) => {
+    let query = elm.value.toLowerCase();
+    let list  = document.getElementById("dynDiv").childNodes;
+    let size  = list.length;
+
+    for (var i = 0; i < size; i++) {
+        if (!list[i].title.toLowerCase().includes(query)) {
+            list[i].style.display = "none";
+        } else {
+            list[i].style.display = "";
+        }
+    }
+}
+
+const clearSearch = () => {
+    let list = document.getElementById("dynDiv").childNodes;
+    let size = list.length;
+
+    for (var i = 0; i < size; i++) {
+        list[i].style.display = "";
+    }
+}
+
 const enableEdit = (obj) => {
     obj.style.backgroundColor  = "#ffffffff";
     obj.style.color            = '#000000ff';

resources/js/xmlParser.js

@@ -17,13 +17,17 @@ const handleXMLReturnData = (data) => {
 const generateFavesList = (data) => {
     let listView        = document.getElementById("favesList");
     let favesList       = data.getElementsByTagName("FAVE_LINK");
-    let size            = favesList .length;
+    let size            = favesList.length;
     listView.innerHTML  = "";
 
     for (i = 0; i < size; i++) {
-        let liTag  = document.createElement("LI");
-        let txtNode = document.createTextNode(favesList[i].innerHTML);
+        let liTag   = document.createElement("LI");
+        let name    = favesList[i].innerHTML;
+        let parts   = (name.includes("/")) ? name.split("/") : name.split("\\");
+        let txtNode = document.createTextNode(parts[parts.length - 2]);
 
+        liTag.setAttribute("name", name);
+        liTag.setAttribute("title", name);
         liTag.setAttribute("onclick", "loadFave(this)");
         liTag.appendChild(txtNode);
         listView.appendChild(liTag);