diff --git a/paragraphs.collapsible.js b/paragraphs.collapsible.js index 8b8270e..89b2008 100644 --- a/paragraphs.collapsible.js +++ b/paragraphs.collapsible.js @@ -39,7 +39,8 @@ var settings = $.extend(true, { - 'fast': false + 'fast': false, + 'expandFieldsets': true }, options ); @@ -82,13 +83,9 @@ } // Find elements to toggle. - var $elements; - var $ajax_content = $item.children('.ajax-new-content'); - if ($ajax_content.length > 0) { - $elements = $ajax_content.children(':not(.paragraph-bundle-content-collapsible-shown)'); - } - else { - $elements = $item.children(':not(.paragraph-bundle-content-collapsible-shown)'); + var $elements = findItemCollapsibleElements($item); + if (!$elements || $elements.length === 0) { + return false; } // Determine id to track states. @@ -99,18 +96,28 @@ } // Invoke collapse actions. - itemElement.animating = true; var fn_complete = function() { - // Set classes. + // Toggle classes on the item. $item.removeClass(old_class).addClass(action_class); + // Update hidden toggle text. $item.find('> .paragraph-bundle-title > .paragraph-bundle-title-collapsible-prefix').html(toggle_text); - // Expand nested toggles. + // Expand nested elements. if (action === mExpandAction) { + // Expand collapsible fieldsets. + if (settings.expandFieldsets) { + var $fieldsets = findCollapsibleFieldsets($elements); + $fieldsets.each(function() { + expandCollapsibleFieldset(this); + }); + } + + // Expand nested triggers. var child_settings = $.extend(settings, {'fast': true}); - // TODO: limit this to next level only since it's toggleAll will dig. - $('.paragraphs-collapsible-trigger-link', $item).each(function() { + // TODO: limit this to next level only since the toggleAll of the next + // level will keep digging with this line. + $('.field-multiple-table .paragraphs-collapsible-trigger-link', $elements).each(function() { toggleAll(this, child_settings, action); }); } @@ -119,6 +126,9 @@ itemElement.animating = false; }; + // Set animating flag. + itemElement.animating = true; + if (settings.fast) { // Fast show child elements for expand only. if (action === mExpandAction) { @@ -136,6 +146,44 @@ }; /** + * Find all collapsible elements within a field item. + * + * @param object item + * The element of the field item row. + * + * @return object + * The jQuery set of found elements. + */ + var findItemCollapsibleElements = function(item) { + var $item = $(item); + var $elements; + var $ajax_content = $item.children('.ajax-new-content'); + if ($ajax_content.length > 0) { + $elements = $ajax_content.children(':not(.paragraph-bundle-content-collapsible-shown)'); + } + else { + $elements = $item.children(':not(.paragraph-bundle-content-collapsible-shown)'); + } + + return $elements; + }; + + /** + * Find all collapsible fieldsets. + * + * @param jQuery $elements + * The jQuery elements to search. + * + * @return object + * The jQuery set of found elements. + */ + var findCollapsibleFieldsets = function($elements) { + var $fieldsets = $elements.filter('fieldset.collapsible.collapsed'); + $fieldsets.add($('*:not(.filter-guidelines-item) fieldset.collapsible.collapsed', $elements)); + return $fieldsets; + }; + + /** * Create a paragraph id for the field item. * * @param object item @@ -260,6 +308,31 @@ }; /** + * Expand a collapsible fieldset. + * + * Based on Drupal.toggleFieldset() to toggle without clicks and window + * scrolling. + * + * @param object element + * The fieldset element or jQuery. + */ + var expandCollapsibleFieldset = function(element) { + var $fieldset = $(element); + var fieldset = $fieldset.get(0); + + if (!fieldset.animating && $fieldset.is('.collapsed')) { + fieldset.animating = true; + $('> .fieldset-wrapper', fieldset).show(); + $fieldset + .removeClass('collapsed') + .trigger({ type: 'collapsed', value: false }) + .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide')); + + fieldset.animating = false; + } + }; + + /** * Enable Expand/Collapse feature for paragraph bundles. * Show the name & type of each bundle and hide contents inside those. */ @@ -274,7 +347,7 @@ // Prefix title with a toggle image. $('') - .append($item.hasClass('expanded') ? Drupal.t('Hide') : Drupal.t('Show')) + .append($item.hasClass(mExpandedClass) ? Drupal.t('Hide') : Drupal.t('Show')) .prependTo($t) .after(' '); @@ -290,6 +363,16 @@ var action = mStates[id] === mCollapsedClass ? mCollapseAction : mExpandAction; toggleParagraph($item, action); } + else if ($item.hasClass(mExpandedClass)){ + // Ensure fieldsets are toggled correctly. + var $elements = findItemCollapsibleElements($item); + if ($elements && $elements.length > 0) { + var $fieldsets = findCollapsibleFieldsets($elements); + $fieldsets.each(function() { + expandCollapsibleFieldset(this); + }); + } + } } }) .click(function(event) {