aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/entity_browser/js/entity_browser.tabs.js

   1 /**
   2  * @file Entity_browser.admin.js.
   3  *
   4  * Defines the behavior of the entity browser's tab display.
   5  */
   6
   7 (function ($, Drupal, drupalSettings) {
   8
   9   'use strict';
  10
  11   /**
  12    * Registers behaviours related to tab display.
  13    */
  14   Drupal.behaviors.entityBrowserTabs = {
  15     attach: function (context) {
  16       var $form = $(context).find('.entity-browser-form').once('entity-browser-admin');
  17       if (!$form.length) {
  18         return;
  19       }
  20
  21       var $nav = $('<nav class="eb-tabs"></nav>');
  22       var $tabs = $(Drupal.theme('entityTabs'));
  23
  24       $form.find('.tab').each(function (index, element) {
  25         var $element = $(element);
  26         var classesArray = [];
  27         classesArray.push($element.attr('disabled') ? 'is-active active' : '');
  28         var text = $element.text();
  29         var textClass = text.toLowerCase().replace(/ /g, '-');
  30         classesArray.push(textClass);
  31         var classes = classesArray.join(' ');
  32         var tabSettings = {
  33           class: classes,
  34           id: $element.attr('id'),
  35           title: $(this)[0].value
  36         };
  37         var $tab = $(Drupal.theme('entityTab', tabSettings));
  38
  39         // Add a click event handler that submits the hidden input buttons.
  40         $tab.find('a').on('click', function (event) {
  41           var buttonID = $(event.currentTarget).data().buttonId;
  42           $form.find('#' + buttonID).trigger('click');
  43           event.preventDefault();
  44         });
  45         $tab.appendTo($tabs);
  46       });
  47       $tabs.appendTo($nav);
  48       $nav.prependTo($form);
  49       $form.find('.tab').css('display', 'none');
  50     }
  51   };
  52
  53   /**
  54    * Theme function for entity browser tabs.
  55    *
  56    * @return {object}
  57    *   This function returns a jQuery object.
  58    */
  59   Drupal.theme.entityTabs = function () {
  60     return $('<ul role="navigation" aria-label="Tabs"></ul>');
  61   };
  62
  63   /**
  64    * Theme function for an entity browser tab.
  65    *
  66    * @param {object} settings
  67    *   An object with the following keys:
  68    * @param {string} settings.title
  69    *   The name of the tab.
  70    * @param {string} settings.class
  71    *   Classes for the tab.
  72    * @param {string} settings.id
  73    *   ID for the data- button ID.
  74    *
  75    * @return {object}
  76    *   This function returns a jQuery object.
  77    */
  78   Drupal.theme.entityTab = function (settings) {
  79     return $('<li tabindex="-1"></li>')
  80       .addClass(settings.class)
  81       .append($('<a href="#"></a>').addClass(settings.class).attr('data-button-id', settings.id)
  82       .append(settings.title)
  83     );
  84   };
  85
  86 }(jQuery, Drupal, drupalSettings));