--- /dev/null
+(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);
+