Feature/18 search by name

index.html

@@ -14,6 +14,7 @@
       </select>
     </div>
     <div class="content">
+      <span id="filter"></span>      
       <div id="directoryList">
       </div>
     </div>

main.js

@@ -55,7 +55,7 @@ const createWindow = () => {
 
   mainWindow.on('blur', function() {
     if(!isBrowsing) {
-      mainWindow.hide();
+      hideWindow();
     }
     isBrowsing = false;
   });
@@ -122,5 +122,10 @@ ipcMain.on('mark-as-browsing', () => {
 });
 
 ipcMain.on('hide-main-window', () => {
-  mainWindow.hide();
+  hideWindow();
 });
+
+function hideWindow() {
+  mainWindow.hide();
+  mainWindow.webContents.send('clear-filter');  
+}

src/app.js

@@ -3,4 +3,5 @@ const documentHelper = require('./src/helpers/document');
 documentHelper.init();
 documentHelper.appendConsoles();
 documentHelper.appendSavedDirectories();
-documentHelper.appendDirectories();
+documentHelper.appendDirectories();
+documentHelper.printSubdirectories();

src/assets/styles.css

@@ -148,3 +148,12 @@ body {
 	background: linear-gradient(0deg, #CC360C, #DB3A0D);
 	border: 1px solid #B3320E;
 }
+
+#filter {
+    text-align: center;
+    display: block;
+    font-family: Helvetica;
+	font-size: 14px;
+	color: white;
+	text-transform: uppercase;
+}

src/helpers/document.js

@@ -7,35 +7,39 @@ const command = require('../core/command');
 const consoles = require('../core/consoles');
 
 const lastDirectory = storage.getLastDirectory() || storage.getDirectories()[0];
-let currentSubDirectories = [];
+let subdirectories = [];
 
-var savedDirectories = document.getElementById('savedDirectories');
-var consoleList = document.getElementById('consoleList');
+const $savedDirectories = document.getElementById('savedDirectories');
+const $consoleList = document.getElementById('consoleList');
+const $filter = document.getElementById('filter');
+
+let dirFilter = '';
 
 const init = () => {
-    var removeButton = document.getElementById('removeButton');
-    var browseButton = document.getElementById('browseButton');
+    const removeButton = document.getElementById('removeButton');
+    const browseButton = document.getElementById('browseButton');
 
-    consoleList.addEventListener('change', (e) => {
+    $consoleList.addEventListener('change', (e) => {
         const list = e.srcElement;
         const option = list.options[list.selectedIndex].value;
         storage.setLastConsole(option);
     });
 
-    savedDirectories.addEventListener('change', (e) => {
+    $savedDirectories.addEventListener('change', (e) => {
         const list = e.srcElement;
         const option = list.options[list.selectedIndex].value;
         storage.setLastDirectory(option);
         appendDirectories(option);
+        printSubdirectories();
     });
 
     removeButton.addEventListener("click", () => {
-        storage.deleteDirectory(savedDirectories.selectedIndex);
-
+        storage.deleteDirectory($savedDirectories.selectedIndex);
         const currentDirectory = storage.getDirectories()[0];
         appendDirectories(currentDirectory);
         storage.setLastDirectory(currentDirectory);
         appendSavedDirectories();
+        printSubdirectories();
     });
 
     browseButton.addEventListener("click", () => {
@@ -44,127 +48,150 @@ const init = () => {
             properties: ['openDirectory']
         });
 
-        if(paths) {
+        if (paths) {
             storage.setDirectories(paths[0]);
             appendDirectories(paths[0]);
             storage.setLastDirectory(paths[0]);
             appendSavedDirectories();
+            printSubdirectories();
         }
     });
 
-    document.onkeyup = function(e) {
+    document.onkeyup = function (e) {
         const key = Number(e.key);
         if (key >= 0) {
-            var list = document.getElementById("consoleList");
-            var con = list.options[list.selectedIndex].value;
-            command.exec(currentSubDirectories[key], con);
+            const con = $consoleList.options[$consoleList.selectedIndex].value;
+            const sub = getFilteredSubdirectories(subdirectories, dirFilter)[key];
+            command.exec(path.join(sub.root, sub.folder), con);
         }
 
         //Esc was pressed
-        if(e.keyCode === 27) {
+        if (e.keyCode === 27) {
             ipcRenderer.send('hide-main-window');
         }
+
+        //Backspace was pressed
+        if (e.keyCode === 8) {
+            dirFilter = dirFilter.slice(0, -1);
+            $filter.innerHTML = dirFilter;
+            printSubdirectories();
+        }
+
+        // Any a-z letter was pressed
+        if (/^[A-Z]$/i.test(e.key)) {
+            dirFilter += e.key;
+            $filter.innerHTML = dirFilter;
+            printSubdirectories();
+        }
     };
 };
 
 const appendDirectories = (directory = lastDirectory) => {
-    var directoryList = document.getElementById('directoryList');
-
-    while (directoryList.hasChildNodes()) {
-        directoryList.removeChild(directoryList.lastChild);
-    }
-
     if (!directory) {
         return;
     }
 
     const allSubDirectories = fs.readdirSync(directory);
-    const subDirectories = allSubDirectories.filter(file => {
+    const currentSubDirectories = allSubDirectories.filter(file => {
         const currentPath = path.join(directory, file);
         return fs.lstatSync(currentPath).isDirectory() &&
-            fs.readdirSync(currentPath).indexOf(".git") > -1;
+            fs.readdirSync(currentPath).includes(".git");
     });
 
-    let index = 0;
+    if (allSubDirectories.includes(".git"))
+        currentSubDirectories.push(directory);
 
-    const addSubDirectoryButton = (name, directory) => {
-        const button = document.createElement('button');
-        const innerHTML = index < 10 ? `${index}- ${name}` : name;
+    subdirectories = currentSubDirectories.map(s => ({
+        root: directory,
+        folder: s,
+    }));
+};
 
-        if(index < 10){
-            index++;
-        }
+const addSubDirectoryButton = (rootElement, name, directory, buttonIndex) => {
+    const button = document.createElement('button');
+    const innerHTML = buttonIndex >= 0 ? `${buttonIndex}- ${name}` : name;
 
-        button.innerHTML = innerHTML;
-        button.className = 'directoryButton';
-        button.setAttribute('data-path', directory);
+    button.innerHTML = innerHTML;
+    button.className = 'directoryButton';
+    button.setAttribute('data-path', directory);
 
-        button.addEventListener("click", (e) => { 
-            const list = document.getElementById("consoleList");
-            const con = list.options[list.selectedIndex].value;
+    button.addEventListener("click", (e) => {
+        const con = $consoleList.options[list.selectedIndex].value;
 
-            command.exec(e.srcElement.getAttribute('data-path'), con);
-        });
+        command.exec(e.srcElement.getAttribute('data-path'), con);
+    });
 
-        directoryList.appendChild(button);
-    }
+    rootElement.appendChild(button);
+};
 
-    if (allSubDirectories.indexOf(".git") > -1) {
-        currentSubDirectories.push(directory);
+const printSubdirectories = () => {
+    const directoryList = document.getElementById('directoryList');
 
-        const index = /^win/.test(process.platform) ? directory.lastIndexOf('\\') : directory.lastIndexOf('/');
-        addSubDirectoryButton(
-            directory.substr(index > -1 ? (index + 1) : 0),
-            directory);
+    while (directoryList.hasChildNodes()) {
+        directoryList.removeChild(directoryList.lastChild);
     }
 
-    subDirectories.forEach(subDirectory => {
-        const currentPath = `${directory}/${subDirectory}`;
-        currentSubDirectories.push(currentPath);
-        addSubDirectoryButton(subDirectory, currentPath);
-    });
-};
+
+    getFilteredSubdirectories(subdirectories, dirFilter)
+        .forEach((s, i) => {
+            const currentPath = `${s.root}/${s.folder}`;
+            addSubDirectoryButton(directoryList, s.folder, currentPath, i < 10 ? i : -1);
+        });
+}
 
 const appendSavedDirectories = () => {
-    while (savedDirectories.hasChildNodes()) {
-        savedDirectories.removeChild(savedDirectories.lastChild);
+    while ($savedDirectories.hasChildNodes()) {
+        $savedDirectories.removeChild(savedDirectories.lastChild);
     }
-    
-    var directories = storage.getDirectories();
+
+    const directories = storage.getDirectories();
     const last = storage.getLastDirectory();
     directories.forEach(directory => {
-        var option = document.createElement('option');
+        const option = document.createElement('option');
         option.value = directory;
         option.innerHTML = directory;
-        
-        if(last && last === directory) {
+
+        if (last && last === directory) {
             option.selected = true;
         }
 
-        savedDirectories.appendChild(option);
+        $savedDirectories.appendChild(option);
     });
 };
 
 const appendConsoles = () => {
     const defaultConsoles = consoles.get();
     const lastConsole = storage.getLastConsole();
 
-    for(con in defaultConsoles){
+    for (con in defaultConsoles) {
         var option = document.createElement('option');
         option.value = con;
         option.innerHTML = con;
 
-        if(lastConsole && lastConsole === con) {
+        if (lastConsole && lastConsole === con) {
             option.selected = true;
         }
 
         consoleList.appendChild(option);
     }
 };
 
+const getFilteredSubdirectories = (sub, filter) => {
+    const regx = new RegExp(filter, 'i');
+    return sub.filter(s => regx.test(s.folder));
+}
+
+// When main-window is hidden, reset filter
+ipcRenderer.on('clear-filter', () => {
+    dirFilter = '';
+    $filter.innerHTML = dirFilter;
+    printSubdirectories();
+});
+
 module.exports = {
     init,
     appendConsoles,
     appendSavedDirectories,
     appendDirectories,
+    printSubdirectories,
 }