finished tags page

tash-had · Jul 2, 2018 · 4560699 · 4560699
1 parent eac2efa
commit 4560699
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -41,7 +41,7 @@ <h5 style="text-align: center;">Previously Visited</h5>
             for (let folder of prevVisited){
                 let li = document.createElement("li");
                 li.className = "collection-item"; 
-                li.innerHTML = "<a href='javascript:void(0);'>" + folder + "</a>";
+                li.innerHTML = "<a onclick='javascript:void(0);'>" + folder + "</a>";
                 li.addEventListener("click", function(){
                     folderChosen(folder); 
                 });

diff --git a/tags.css b/tags.css
@@ -1,3 +1,33 @@
-#addTagBtn{
-    background-color: #2196fe; 
+html {
+    position: relative;
+    min-height: 100%;
+}
+
+/* body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+main {
+    flex: 1 0 auto;
+} */
+footer {
+    background-color: orange;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 100px;
+    width: 100%;
+    overflow: hidden;
+    background-color: #2196fe;
+    text-align: center;
+    padding-top: 2%; 
+}
+
+#tagInput{
+    color: white;
+    border-color: white;
+    font-size: 1.5em;
+    font-weight: lighter;
 }
diff --git a/tags.html b/tags.html
@@ -5,7 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Tags</title>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
+  <link rel="stylesheet" href="tags.css">
 </head>
 <body>
   <nav style="background-color: #2196fe;">
@@ -15,12 +17,13 @@
   </nav>
   <ul class="collection">
   </ul>
-  <form>
         <div>
-            <input type="text" id="item" autofocus>
         </div>
-        <button type="submit">Add Item</button>
-    </form>
-  <script src="tags.js"></script>
+        <script src="tags.js"></script>
+        <footer>
+            <div class="container">
+                <input type="text" id="tagInput" placeholder="New Tag..." autofocus>
+            </div>
+        </footer>
 </body>
 </html>
diff --git a/tags.js b/tags.js
@@ -4,21 +4,20 @@ const Store = require('electron-store');
 const store = new Store();
 
 function addListItem(item){
-    if (addNewTagToDB(item)){
-        const itemText = document.createTextNode(item); 
-        const li = document.createElement("li"); 
-        li.className = "collection-item"; 
-
-        li.appendChild(itemText); 
-        ul.appendChild(li);   
-        if (ul.childElementCount == 0){
-            ul.className = "collection"; 
-        }
+    const itemText = document.createTextNode(item); 
+    const li = document.createElement("li"); 
+    li.className = "collection-item"; 
+
+    li.appendChild(itemText); 
+    ul.appendChild(li);   
+    if (ul.childElementCount == 0){
+        ul.className = "collection"; 
     }
 }
 
 function addNewTagToDB(tag){
     let tags = store.get("tags"); 
+    tag = tag.toLowerCase(); 
     if (tags){
         if (tags.includes(tag)){
             return false; 
@@ -32,26 +31,63 @@ function addNewTagToDB(tag){
     return true; 
 }
 
-function processNewTag(e){
-    e.preventDefault(); 
-    const item = document.querySelector("#item").value;
-    if (item){
-        addListItem(item); 
+function removeTagFromDB(tag){
+    let tags = store.get("tags"); 
+    tag = tag.toLowerCase(); 
+    if (tags){
+        if (tags.includes(tag)){
+            tags.splice(tags.indexOf(tag), 1);
+        }else{
+            return false; 
+        }
+    }else{
+        tags = []; 
     }
+    store.set("tags", tags); 
+    return true; 
 }
 
 function removeItem(item){
-  if (item.target != ul){
-    item.target.remove(); 
-  }
-  if (ul.childElementCount == 0){
-    ul.className = ''; 
-  }
+    item = item.target; 
+    if (removeTagFromDB(item.innerHTML)){
+        if (item != ul){
+            item.remove(); 
+        }
+        if (ul.childElementCount == 0){
+            ul.className = ''; 
+        }
+    }
 }
 
 window.onload = function(){
-    const form = document.querySelector("form"); 
+    loadAllTags();
+    const newTagInput = document.getElementById("tagInput"); 
+    newTagInput.addEventListener("keypress", function(e){
+        if (e.keyCode == 13) {
+            const tag = newTagInput.value;
+            if (tag && addNewTagToDB(tag)){
+                addListItem(tag); 
+                newTagInput.value = ""; 
+            }
+        }
+    }); 
     ul.addEventListener("dblclick", removeItem);
-    form.addEventListener('submit', processNewTag);
 }
 
+function loadAllTags(){
+    let tags = store.get("tags"); 
+    if (tags){
+        for (let tag of tags){
+            addListItem(toTitleCase(tag)); 
+        }
+    }
+}
+
+function toTitleCase(str) {
+    return str.replace(
+        /\w\S*/g,
+        function(txt) {
+            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+        }
+    );
+}