Updated to Drupal 8.5. Core Media not yet in use.
[yaffs-website] / web / modules / contrib / paragraphs / js / paragraphs.admin.js
diff --git a/web/modules/contrib/paragraphs/js/paragraphs.admin.js b/web/modules/contrib/paragraphs/js/paragraphs.admin.js
new file mode 100644 (file)
index 0000000..968d334
--- /dev/null
@@ -0,0 +1,113 @@
+(function ($, Drupal) {
+
+  'use strict';
+
+  /**
+  * Set content fields to visible when tabs are created. After an action
+  * being performed, stay on the same perspective.
+  *
+  * @param $parWidget
+  *   Paragraphs widget.
+  * @param $parTabs
+  *   Paragraphs tabs.
+  * @param $parContent
+  *   Paragraphs content tab.
+  * @param $parBehavior
+  *   Paragraphs behavior tab.
+  * @param $mainRegion
+  *   Main paragraph region.
+  */
+  var setUpTab = function ($parWidget, $parTabs, $parContent, $parBehavior, $mainRegion) {
+    var $tabContent = $parTabs.find('#content');
+    var $tabBehavior = $parTabs.find('#behavior');
+    if ($tabBehavior.hasClass('is-active')) {
+      $parWidget.removeClass('content-active').addClass('behavior-active');
+      $tabContent.removeClass('is-active');
+      $tabBehavior.addClass('is-active');
+      $parContent.hide();
+      $parBehavior.show();
+    }
+    else {
+      // Activate content tab visually if there is no previously
+      // activated tab.
+      if (!($mainRegion.hasClass('content-active'))
+        && !($mainRegion.hasClass('behavior-active'))) {
+        $tabContent.addClass('is-active');
+        $mainRegion.addClass('content-active');
+      }
+
+      $parContent.show();
+      $parBehavior.hide();
+
+      $parTabs.show();
+      if ($parBehavior.length === 0) {
+        $parTabs.hide();
+      }
+    }
+  };
+
+  /**
+  * Switching active class between tabs.
+  * @param $parTabs
+  *   Paragraphs tabs.
+  * @param $clickedTab
+  *   Clicked tab.
+  * @param $parWidget
+  *   Paragraphs widget.
+  */
+  var switchActiveClass = function ($parTabs, $clickedTab, $parWidget) {
+      $parTabs.find('li').removeClass('is-active');
+      $clickedTab.parent('li').addClass('is-active');
+      $parWidget.removeClass('behavior-active content-active is-active');
+      $($parWidget).find($clickedTab.attr('href')).addClass('is-active');
+
+      if ($parWidget.find('#content').hasClass('is-active')) {
+        $parWidget.find('.layout-region-node-main').addClass('content-active');
+        $parWidget.find('.paragraphs-content').show();
+        $parWidget.find('.paragraphs-behavior').hide();
+      }
+
+      if ($parWidget.find('#behavior').hasClass('is-active')) {
+        $parWidget.find('.layout-region-node-main').addClass('behavior-active');
+        $parWidget.find('.paragraphs-content').hide();
+        $parWidget.find('.paragraphs-behavior').show();
+      }
+  };
+
+  /**
+  * For body tag, adds tabs for selecting how the content will be displayed.
+  *
+  * @type {Drupal~behavior}
+  */
+  Drupal.behaviors.bodyTabs = {
+    attach: function (context) {
+      var $topLevelParWidgets = $('.paragraphs-tabs-wrapper', context).filter(function() {
+        return $(this).parents('.paragraphs-nested').length === 0;
+      });
+
+      // Initialization.
+      $topLevelParWidgets.once('paragraphs-bodytabs').each(function() {
+        var $parWidget = $(this);
+        var $parTabs = $parWidget.find('.paragraphs-tabs');
+
+        // Create click event.
+        $parTabs.find('a').click(function(e) {
+          e.preventDefault();
+          switchActiveClass($parTabs, $(this), $parWidget);
+        });
+      });
+
+      if ($('.paragraphs-tabs-wrapper', context).length > 0) {
+        $topLevelParWidgets.each(function() {
+          var $parWidget = $(this);
+          var $parTabs = $parWidget.find('.paragraphs-tabs');
+          var $parContent = $parWidget.find('.paragraphs-content');
+          var $parBehavior = $parWidget.find('.paragraphs-behavior');
+          var $mainRegion = $parWidget.find('.layout-region-node-main');
+          setUpTab($parWidget, $parTabs, $parContent, $parBehavior, $mainRegion);
+        });
+      }
+    }
+  };
+})(jQuery, Drupal);
+