Cleaned up tag edit interface

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);
+                });
+            }
+        }
+    }]);
 
 };