Cleaned up tag edit interface

resources/assets/js/controllers.js

@@ -405,6 +405,13 @@ module.exports = function (ngApp, events) {
 
             const pageId = Number($attrs.pageId);
             $scope.tags = [];
+            
+            $scope.sortOptions = {
+                handle: '.handle',
+                items: '> tr',
+                containment: "parent",
+                axis: "y"
+            };
 
             /**
              * Push an empty tag to the end of the scope tags.
@@ -415,6 +422,7 @@ module.exports = function (ngApp, events) {
                     value: ''
                 });
             }
+            $scope.addEmptyTag = addEmptyTag;
 
             /**
              * Get all tags for the current book and add into scope.
@@ -463,6 +471,9 @@ module.exports = function (ngApp, events) {
                 }
             };
 
+            /**
+             * Save the tags to the current page.
+             */
             $scope.saveTags = function() {
                 setTagOrder();
                 let postData = {tags: $scope.tags};
@@ -473,6 +484,15 @@ module.exports = function (ngApp, events) {
                 })
             };
 
+            /**
+             * Remove a tag from the current list.
+             * @param tag
+             */
+            $scope.removeTag = function(tag) {
+                let cIndex = $scope.tags.indexOf(tag);
+                $scope.tags.splice(cIndex, 1);
+            };
+
         }]);
 
 };

resources/assets/js/directives.js

@@ -301,6 +301,42 @@ module.exports = function (ngApp, events) {
 
             }
         }
-    }])
+    }]);
+    
+    ngApp.directive('toolbox', [function() {
+        return {
+            restrict: 'A',
+            link: function(scope, elem, attrs) {
+
+                // Get common elements
+                const $buttons = elem.find('[tab-button]');
+                const $content = elem.find('[tab-content]');
+                const $toggle = elem.find('[toolbox-toggle]');
+
+                // Handle toolbox toggle click
+                $toggle.click((e) => {
+                    elem.toggleClass('open');
+                });
+                
+                // Set an active tab/content by name
+                function setActive(tabName, openToolbox) {
+                    $buttons.removeClass('active');
+                    $content.hide();
+                    $buttons.filter(`[tab-button="${tabName}"]`).addClass('active');
+                    $content.filter(`[tab-content="${tabName}"]`).show();
+                    if (openToolbox) elem.addClass('open');
+                }
+
+                // Set the first tab content active on load
+                setActive($content.first().attr('tab-content'), false);
+
+                // Handle tab button click
+                $buttons.click(function(e) {
+                    let name = $(this).attr('tab-button');
+                    setActive(name, true);
+                });
+            }
+        }
+    }]);
 
 };

resources/assets/js/global.js

@@ -5,9 +5,9 @@ var angular = require('angular');
 var ngResource = require('angular-resource');
 var ngAnimate = require('angular-animate');
 var ngSanitize = require('angular-sanitize');
+require('angular-ui-sortable');
 
-var ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize']);
-
+var ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize', 'ui.sortable']);
 
 // Global Event System
 var Events = {