BookStack Code Mirror - bookstack/blob - resources/assets/js/directives.js

   1
   2
   3 module.exports = function (ngApp, events) {
   4
   5
   6     /**
   7      * Page Editor Toolbox
   8      * Controls all functionality for the sliding toolbox
   9      * on the page edit view.
  10      */
  11     ngApp.directive('toolbox', [function () {
  12         return {
  13             restrict: 'A',
  14             link: function (scope, elem, attrs) {
  15
  16                 // Get common elements
  17                 const $buttons = elem.find('[toolbox-tab-button]');
  18                 const $content = elem.find('[toolbox-tab-content]');
  19                 const $toggle = elem.find('[toolbox-toggle]');
  20
  21                 // Handle toolbox toggle click
  22                 $toggle.click((e) => {
  23                     elem.toggleClass('open');
  24                 });
  25
  26                 // Set an active tab/content by name
  27                 function setActive(tabName, openToolbox) {
  28                     $buttons.removeClass('active');
  29                     $content.hide();
  30                     $buttons.filter(`[toolbox-tab-button="${tabName}"]`).addClass('active');
  31                     $content.filter(`[toolbox-tab-content="${tabName}"]`).show();
  32                     if (openToolbox) elem.addClass('open');
  33                 }
  34
  35                 // Set the first tab content active on load
  36                 setActive($content.first().attr('toolbox-tab-content'), false);
  37
  38                 // Handle tab button click
  39                 $buttons.click(function (e) {
  40                     let name = $(this).attr('toolbox-tab-button');
  41                     setActive(name, true);
  42                 });
  43             }
  44         }
  45     }]);
  46 };