From e0d2d449d1ebc88750bc307f3a8eb461f9b7847e Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Tue, 29 Aug 2017 00:38:28 +0200
Subject: [PATCH] :sparkles: Site > Fuzzy Search > Add path highlights

---
 site/src/components/files-tree-file/script.js | 49 +++++++++-------
 .../components/files-tree-file/template.html  |  4 +-
 .../components/files-tree-folder/script.js    | 58 +++++++++++++++++--
 .../files-tree-folder/template.html           | 10 ++--
 4 files changed, 91 insertions(+), 30 deletions(-)

diff --git a/site/src/components/files-tree-file/script.js b/site/src/components/files-tree-file/script.js
index fbdbec1..430a92d 100644
--- a/site/src/components/files-tree-file/script.js
+++ b/site/src/components/files-tree-file/script.js
@@ -15,39 +15,48 @@ export default
         content: { type: Object }
     },
 
+    data()
+    {
+        return {
+            matchingPositions: []
+        }
+    },
+
     computed:
     {
         visible()
         {
+            let visible = true
+
             // Get and clean search
-            const search = this.$store.state.files.search.replace(/\ /g, '').toLowerCase()
+            const search = this.$store.state.files.search.replace(/ /g, '').toLowerCase()
 
             // If no search value, return true
-            if(search === '')
+            if(search !== '')
             {
-                return true
-            }
+                // Set up fuzzy search
+                const text = this.content.data.path.full.replace(/^\.\//, '')
+                let searchPosition = 0
+                this.matchingPositions = []
 
-            // Set up fuzzy search
-            const text = this.content.data.path.full
-            let searchPosition = 0
-
-            // Go through each character in the text
-            for(let n = 0; n < text.length; n++)
-            {
-                // If match a character in the search, highlight it
-                if(searchPosition < search.length && text[n].toLowerCase() === search[searchPosition])
+                // Go through each character in the text
+                for(let n = 0; n < text.length; n++)
                 {
-                    searchPosition += 1
+                    // If match a character in the search, highlight it
+                    if(searchPosition < search.length && text[n].toLowerCase() === search[searchPosition])
+                    {
+                        searchPosition += 1
+                        this.matchingPositions.push(n - this.content.data.path.directory.length + 1)
+                    }
+                }
+
+                if(searchPosition !== search.length)
+                {
+                    visible = false
                 }
             }
 
-            if(searchPosition !== search.length)
-            {
-                return false
-            }
-
-            return true
+            return visible
         }
     },
 
diff --git a/site/src/components/files-tree-file/template.html b/site/src/components/files-tree-file/template.html
index d96f4c7..925a402 100644
--- a/site/src/components/files-tree-file/template.html
+++ b/site/src/components/files-tree-file/template.html
@@ -2,7 +2,9 @@
     <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         <file-icon class="icon" :extension="content.data.extension"></file-icon>
         <span class="text">
-            {{ content.name }}
+            <template v-for="(letter, key) in content.name">
+                <span :style="matchingPositions.indexOf(key) !== -1 ? 'font-weight:bold;' : ''">{{ letter }}</span>
+            </template>
         </span>
     </a>
 </div>
\ No newline at end of file
diff --git a/site/src/components/files-tree-folder/script.js b/site/src/components/files-tree-folder/script.js
index 50d614f..d46e978 100644
--- a/site/src/components/files-tree-folder/script.js
+++ b/site/src/components/files-tree-folder/script.js
@@ -14,28 +14,76 @@ export default
     props:
     {
         depth: { type: Number, default: 0 },
+        directory: { type: String, default: '' },
         content: { type: Object }
     },
 
     data()
     {
         return {
-            open: true
+            open: true,
+            matchingPositions: []
         }
     },
 
     computed:
     {
+        fullPath()
+        {
+            return `${this.directory}${this.content.name}`
+        },
+
         files()
         {
             const files = this.content.files.sort((fileA, fileB) => fileA.name < fileB.name ? -1 : 1)
 
             return files
-        }
-    },
+        },
 
-    created()
-    {
+        visible()
+        {
+            let visible = false
+            const totalCount = this.content.files.length
+            let visibleCount = 0
+
+            for(const $child of this.$children)
+            {
+                if($child.visible === true)
+                {
+                    visibleCount++
+                }
+            }
+
+            if(visibleCount > 0)
+            {
+                visible = true
+            }
+
+            // Get and clean search
+            const search = this.$store.state.files.search.replace(/ /g, '').toLowerCase()
+
+            // If no search value, return true
+            if(search !== '')
+            {
+                // Set up fuzzy search
+                const text = this.fullPath.replace(/^\.\//, '')
+                let searchPosition = 0
+                this.matchingPositions = []
+
+                // Go through each character in the text
+                for(let n = 0; n < text.length; n++)
+                {
+                    // If match a character in the search, highlight it
+                    if(searchPosition < search.length && text[n].toLowerCase() === search[searchPosition])
+                    {
+                        searchPosition += 1
+                        this.matchingPositions.push(n - this.directory.length + 2)
+                    }
+                }
+            }
+
+            return visible
+        }
     },
 
     methods:
diff --git a/site/src/components/files-tree-folder/template.html b/site/src/components/files-tree-folder/template.html
index bff84eb..43576ab 100644
--- a/site/src/components/files-tree-folder/template.html
+++ b/site/src/components/files-tree-folder/template.html
@@ -1,13 +1,15 @@
-<div>
+<div v-show="visible">
     <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         <file-icon class="icon" extension="folder-active" v-show="open"></file-icon>
         <file-icon class="icon" extension="folder" v-show="!open"></file-icon>
         <span class="text">
-            {{ content.name }}
+            <template v-for="(letter, key) in content.name">
+                <span :style="matchingPositions.indexOf(key) !== -1 ? 'font-weight:bold;' : ''">{{ letter }}</span>
+            </template>
         </span>
     </a>
     <div v-show="open">
-        <files-tree-folder v-for="folder of content.folders" :key="folder.name" :content="folder" :depth="depth + 1"></files-tree-folder>
-        <files-tree-file v-for="file of files" :key="file.data.path.full" :content="file" :depth="depth + 1"></files-tree-file>
+        <files-tree-folder class="js-child" v-for="folder of content.folders" :key="folder.name" :content="folder" :depth="depth + 1" :directory="fullPath + '/'"></files-tree-folder>
+        <files-tree-file class="js-child" v-for="file of files" :key="file.data.path.full" :content="file" :depth="depth + 1"></files-tree-file>
     </div>
 </div>
\ No newline at end of file