www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/paragraphs/js/paragraphs.admin.js

   1 (function ($, Drupal) {
   2
   3   'use strict';
   4
   5   /**
   6   * Set content fields to visible when tabs are created. After an action
   7   * being performed, stay on the same perspective.
   8   *
   9   * @param $parWidget
  10   *   Paragraphs widget.
  11   * @param $parTabs
  12   *   Paragraphs tabs.
  13   * @param $parContent
  14   *   Paragraphs content tab.
  15   * @param $parBehavior
  16   *   Paragraphs behavior tab.
  17   * @param $mainRegion
  18   *   Main paragraph region.
  19   */
  20   var setUpTab = function ($parWidget, $parTabs, $parContent, $parBehavior, $mainRegion) {
  21     var $tabContent = $parTabs.find('#content');
  22     var $tabBehavior = $parTabs.find('#behavior');
  23     if ($tabBehavior.hasClass('is-active')) {
  24       $parWidget.removeClass('content-active').addClass('behavior-active');
  25       $tabContent.removeClass('is-active');
  26       $tabBehavior.addClass('is-active');
  27       $parContent.hide();
  28       $parBehavior.show();
  29     }
  30     else {
  31       // Activate content tab visually if there is no previously
  32       // activated tab.
  33       if (!($mainRegion.hasClass('content-active'))
  34         && !($mainRegion.hasClass('behavior-active'))) {
  35         $tabContent.addClass('is-active');
  36         $mainRegion.addClass('content-active');
  37       }
  38
  39       $parContent.show();
  40       $parBehavior.hide();
  41
  42       $parTabs.show();
  43       if ($parBehavior.length === 0) {
  44         $parTabs.hide();
  45       }
  46     }
  47   };
  48
  49   /**
  50   * Switching active class between tabs.
  51   * @param $parTabs
  52   *   Paragraphs tabs.
  53   * @param $clickedTab
  54   *   Clicked tab.
  55   * @param $parWidget
  56   *   Paragraphs widget.
  57   */
  58   var switchActiveClass = function ($parTabs, $clickedTab, $parWidget) {
  59       $parTabs.find('li').removeClass('is-active');
  60       $clickedTab.parent('li').addClass('is-active');
  61       $parWidget.removeClass('behavior-active content-active is-active');
  62       $($parWidget).find($clickedTab.attr('href')).addClass('is-active');
  63
  64       if ($parWidget.find('#content').hasClass('is-active')) {
  65         $parWidget.find('.layout-region-node-main').addClass('content-active');
  66         $parWidget.find('.paragraphs-content').show();
  67         $parWidget.find('.paragraphs-behavior').hide();
  68       }
  69
  70       if ($parWidget.find('#behavior').hasClass('is-active')) {
  71         $parWidget.find('.layout-region-node-main').addClass('behavior-active');
  72         $parWidget.find('.paragraphs-content').hide();
  73         $parWidget.find('.paragraphs-behavior').show();
  74       }
  75   };
  76
  77   /**
  78   * For body tag, adds tabs for selecting how the content will be displayed.
  79   *
  80   * @type {Drupal~behavior}
  81   */
  82   Drupal.behaviors.bodyTabs = {
  83     attach: function (context) {
  84       var $topLevelParWidgets = $('.paragraphs-tabs-wrapper', context).filter(function() {
  85         return $(this).parents('.paragraphs-nested').length === 0;
  86       });
  87
  88       // Initialization.
  89       $topLevelParWidgets.once('paragraphs-bodytabs').each(function() {
  90         var $parWidget = $(this);
  91         var $parTabs = $parWidget.find('.paragraphs-tabs');
  92
  93         // Create click event.
  94         $parTabs.find('a').click(function(e) {
  95           e.preventDefault();
  96           switchActiveClass($parTabs, $(this), $parWidget);
  97         });
  98       });
  99
 100       if ($('.paragraphs-tabs-wrapper', context).length > 0) {
 101         $topLevelParWidgets.each(function() {
 102           var $parWidget = $(this);
 103           var $parTabs = $parWidget.find('.paragraphs-tabs');
 104           var $parContent = $parWidget.find('.paragraphs-content');
 105           var $parBehavior = $parWidget.find('.paragraphs-behavior');
 106           var $mainRegion = $parWidget.find('.layout-region-node-main');
 107           setUpTab($parWidget, $parTabs, $parContent, $parBehavior, $mainRegion);
 108         });
 109       }
 110     }
 111   };
 112 })(jQuery, Drupal);
 113