show tag editor when adding bookmark

PalmerAL · PalmerAL · commit 6c4c2c1b5397 · 2019-12-24T16:09:42.000-06:00
diff --git a/css/bookmarkManager.css b/css/bookmarkManager.css
@@ -1,9 +1,15 @@
+.bookmark-tag-bar {
+    margin-top: 0.5em;
+}
+
 .bookmark-editor {
+    background: transparent !important;
+}
+.bookmark-editor:not(.simplified) {
     box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
     border-radius: 3px;
-    background: transparent !important;
 }
-.dark-theme .bookmark-editor {
+.dark-theme .bookmark-editor:not(.simplified) {
     box-shadow: 0 0 0 1px rgba(255, 255, 255 ,0.2);
 }
 
@@ -15,12 +21,12 @@
 .bookmark-editor .bookmark-url {
     opacity: 0.66;
     font-size: 0.95em;
+    margin-bottom: 0.55em;
 }
 
 #searchbar .tag {
     display: inline-block;
     padding: 0.33em 0.5em;
-    margin-top: 0.5em;
     border-radius: 3px;
     background-color: rgba(0, 0, 0, 0.075);
     border: 2px transparent solid;
@@ -66,7 +72,6 @@
 .tag-edit-area .tag-input {
     -webkit-appearance: none;
     padding: 0.35em 0.5em;
-    margin-top: 0.5em;
     border-radius: 3px;
     background: transparent;
     color: inherit;
diff --git a/js/keybindings.js b/js/keybindings.js
@@ -200,7 +200,7 @@ function initialize () {
 
   defineShortcut('addToFavorites', function (e) {
     tabBar.getTab(tabs.getSelected()).querySelector('.bookmarks-button').click()
-    tabBar.enterEditMode(tabs.getSelected()) // we need to show the bookmarks button, which is only visible in edit mode
+    tabBar.enterEditMode(tabs.getSelected(), null, false) // we need to show the bookmarks button, which is only visible in edit mode
   })
 
   // cmd+x should switch to tab x. Cmd+9 should switch to the last tab
diff --git a/js/navbar/bookmarkStar.js b/js/navbar/bookmarkStar.js
@@ -1,5 +1,8 @@
 const db = require('util/database.js').db
 const places = require('places/places.js')
+const bookmarkEditor = require('searchbar/bookmarkEditor.js')
+const searchbar = require('searchbar/searchbar.js')
+const searchbarPlugins = require('searchbar/searchbarPlugins.js')
 
 const bookmarkStar = {
   create: function (tabId) {
@@ -17,10 +20,20 @@ const bookmarkStar = {
     return star
   },
   onClick: function (tabId, star) {
+    searchbarPlugins.clearAll()
+
     star.classList.toggle('fa-star')
     star.classList.toggle('fa-star-o')
 
-    places.toggleBookmarked(tabId)
+    places.toggleBookmarked(tabId, function (isBookmarked) {
+      if (isBookmarked) {
+        var editorInsertionPoint = document.createElement('div')
+        searchbarPlugins.getContainer('simpleBookmarkTagInput').appendChild(editorInsertionPoint)
+        bookmarkEditor.show(tabs.get(tabs.getSelected()).url, editorInsertionPoint, null, {simplified: true})
+      } else {
+        searchbar.showResults('')
+      }
+    })
   },
   update: function (tabId, star) {
     const currentURL = tabs.get(tabId).url
@@ -45,4 +58,8 @@ const bookmarkStar = {
   }
 }
 
+searchbarPlugins.register('simpleBookmarkTagInput', {
+  index: 0
+})
+
 module.exports = bookmarkStar
diff --git a/js/navbar/tabBar.js b/js/navbar/tabBar.js
@@ -38,7 +38,7 @@ window.tabBar = {
       timeout: 1500
     })
   },
-  enterEditMode: function (tabId, editingValue) {
+  enterEditMode: function (tabId, editingValue, showSearchbar) {
     // editingValue: an optional string to show in the searchbar instead of the current URL
 
     webviews.requestPlaceholder('editMode')
@@ -64,10 +64,12 @@ window.tabBar = {
 
     searchbar.show(input)
 
-    if (editingValue) {
-      searchbar.showResults(editingValue, null)
-    } else {
-      searchbar.showResults('', null)
+    if (showSearchbar !== false) {
+      if (editingValue) {
+        searchbar.showResults(editingValue, null)
+      } else {
+        searchbar.showResults('', null)
+      }
     }
 
     tabBar.editingTab = tabId
@@ -155,11 +157,11 @@ window.tabBar = {
 
     tabEl.appendChild(ec)
 
-    var vc = document.createElement('div')
-    vc.className = 'tab-view-contents'
+    var viewContents = document.createElement('div')
+    viewContents.className = 'tab-view-contents'
 
-    vc.appendChild(readerView.getButton(data.id))
-    vc.appendChild(progressBar.create())
+    viewContents.appendChild(readerView.getButton(data.id))
+    viewContents.appendChild(progressBar.create())
 
     // icons
 
@@ -193,17 +195,17 @@ window.tabBar = {
     secIcon.hidden = data.secure !== false
     iconArea.appendChild(secIcon)
 
-    vc.appendChild(iconArea)
+    viewContents.appendChild(iconArea)
 
     // title
 
     var title = document.createElement('span')
     title.className = 'title'
     title.textContent = tabTitle
 
-    vc.appendChild(title)
+    viewContents.appendChild(title)
 
-    tabEl.appendChild(vc)
+    tabEl.appendChild(viewContents)
 
     input.addEventListener('keydown', function (e) {
       if (e.keyCode === 9 || e.keyCode === 40) { // if the tab or arrow down key was pressed
@@ -253,7 +255,7 @@ window.tabBar = {
     })
 
     // click to enter edit mode or switch to a tab
-    tabEl.addEventListener('click', function (e) {
+    viewContents.addEventListener('click', function (e) {
       if (tabs.getSelected() !== data.id) { // else switch to tab if it isn't focused
         browserUI.switchToTab(data.id)
       } else { // the tab is focused, edit tab instead
diff --git a/js/places/places.js b/js/places/places.js
@@ -119,23 +119,29 @@ const places = {
   onMessage: function (e) { // assumes this is from a search operation
     places.runWorkerCallback(e.data.callbackId, e.data.result)
   },
-  updateItem: function (url, fields) {
+  updateItem: function (url, fields, callback) {
+    const callbackId = places.addWorkerCallback(callback)
     places.worker.postMessage({
       action: 'updatePlace',
       pageData: {
         url: url,
         ...fields
-      }
+      },
+      callbackId: callbackId
     })
   },
-  toggleBookmarked: function (tabId) { // Toggles whether a URL is bookmarked or not
+  toggleBookmarked: function (tabId, callback) { // Toggles whether a URL is bookmarked or not
     const url = tabs.get(tabId).url
 
     db.places.where('url').equals(url).first(function (item) {
       if (item && item.isBookmarked) {
-        places.updateItem(url, {isBookmarked: false})
+        places.updateItem(url, {isBookmarked: false}, function () {
+          callback(false)
+        })
       } else {
-        places.updateItem(url, {isBookmarked: true})
+        places.updateItem(url, {isBookmarked: true}, function () {
+          callback(true)
+        })
       }
     })
   },
diff --git a/js/places/placesWorker.js b/js/places/placesWorker.js
@@ -179,6 +179,10 @@ onmessage = function (e) {
         } else {
           addOrUpdateHistoryCache(item)
         }
+        postMessage({
+          result: null,
+          callbackId: callbackId
+        })
       }).catch(function (err) {
         console.warn('failed to update history.')
         console.warn('page url was: ' + pageData.url)
diff --git a/js/searchbar/bookmarkEditor.js b/js/searchbar/bookmarkEditor.js
@@ -25,46 +25,52 @@ const bookmarkEditor = {
         })
         return el
       },
-    render: async function (url) {
+    render: async function (url, options = {}) {
         bookmarkEditor.currentInstance = {};
         bookmarkEditor.currentInstance.bookmark = await db.places.where('url').equals(url).first();
   
         var editor = document.createElement('div')
         editor.className = 'bookmark-editor searchbar-item'
+
+        if (options.simplified) {
+          editor.className += " simplified"
+        }
       
-        //title input
-        var title = document.createElement("span")
-        title.className = "title wide";
-        title.textContent = bookmarkEditor.currentInstance.bookmark.title;
-        editor.appendChild(title);
-      
-        //URL
-        var URLSpan = document.createElement("div")
-        URLSpan.className = "bookmark-url";
-        URLSpan.textContent = bookmarkEditor.currentInstance.bookmark.url;
-        editor.appendChild(URLSpan);
-      
-        //save button
-        var saveButton = document.createElement('button')
-        saveButton.className = "fa fa-check action-button always-visible";
-        saveButton.tabIndex = -1
-        editor.appendChild(saveButton);
-        saveButton.addEventListener("click", function() {
-          editor.remove();
-          bookmarkEditor.currentInstance.onClose(bookmarkEditor.currentInstance.bookmark);
-         bookmarkEditor.currentInstance = null;
-        });
-      
-        //delete button
-        var delButton = document.createElement('button')
-        delButton.className = "fa fa-trash action-button always-visible bookmark-delete-button";
-        delButton.tabIndex = -1
-        editor.appendChild(delButton);
-        delButton.addEventListener("click", function() {
-          editor.remove();
-          bookmarkEditor.currentInstance.onClose(null);
+        if (!options.simplified) {
+          //title input
+          var title = document.createElement("span")
+          title.className = "title wide";
+          title.textContent = bookmarkEditor.currentInstance.bookmark.title;
+          editor.appendChild(title);
+        
+          //URL
+          var URLSpan = document.createElement("div")
+          URLSpan.className = "bookmark-url";
+          URLSpan.textContent = bookmarkEditor.currentInstance.bookmark.url;
+          editor.appendChild(URLSpan);
+        
+          //save button
+          var saveButton = document.createElement('button')
+          saveButton.className = "fa fa-check action-button always-visible";
+          saveButton.tabIndex = -1
+          editor.appendChild(saveButton);
+          saveButton.addEventListener("click", function() {
+            editor.remove();
+            bookmarkEditor.currentInstance.onClose(bookmarkEditor.currentInstance.bookmark);
           bookmarkEditor.currentInstance = null;
-        });
+          });
+        
+          //delete button
+          var delButton = document.createElement('button')
+          delButton.className = "fa fa-trash action-button always-visible bookmark-delete-button";
+          delButton.tabIndex = -1
+          editor.appendChild(delButton);
+          delButton.addEventListener("click", function() {
+            editor.remove();
+            bookmarkEditor.currentInstance.onClose(null);
+            bookmarkEditor.currentInstance = null;
+          });
+        }
       
         //tag area
         var tagArea = document.createElement('div')
@@ -114,15 +120,17 @@ const bookmarkEditor = {
       
         return editor;
     },
-    show: function (url, replaceItem, onClose) {
+    show: function (url, replaceItem, onClose, options) {
         if (bookmarkEditor.currentInstance) {
             if (bookmarkEditor.currentInstance.editor.parentNode) {
-                bookmarkEditor.currentInstance.onClose(bookmarkEditor.currentInstance.bookmark);
                 bookmarkEditor.currentInstance.editor.remove();
+                if (bookmark.currentInstance.onClose) {
+                  bookmarkEditor.currentInstance.onClose(bookmarkEditor.currentInstance.bookmark);
+                }
             }
             bookmarkEditor.currentInstance = null;
         }
-        bookmarkEditor.render(url).then(function (editor) {
+        bookmarkEditor.render(url, options).then(function (editor) {
             replaceItem.hidden = true;
             replaceItem.parentNode.insertBefore(editor, replaceItem);
             bookmarkEditor.currentInstance.editor = editor;
diff --git a/js/searchbar/bookmarkManager.js b/js/searchbar/bookmarkManager.js
@@ -78,6 +78,7 @@ function showBookmarks (text, input, event) {
       searchbarPlugins.reset('bangs')
 
       var tagBar = document.createElement('div')
+      tagBar.className = 'bookmark-tag-bar'
       container.appendChild(tagBar)
 
       parsedText.tags.forEach(function (tag) {
diff --git a/js/searchbar/searchbarPlugins.js b/js/searchbar/searchbarPlugins.js
@@ -131,7 +131,7 @@ const searchbarPlugins = {
   run: function (text, input, event) {
     for (var i = 0; i < plugins.length; i++) {
       try {
-        if ((!plugins[i].trigger || plugins[i].trigger(text))) {
+        if (plugins[i].showResults && (!plugins[i].trigger || plugins[i].trigger(text))) {
           plugins[i].showResults(text, input, event)
         } else {
           searchbarPlugins.reset(plugins[i].name)
