diff --git a/paragraphs.collapsible.css b/paragraphs.collapsible.css index b967272..08c6b36 100644 --- a/paragraphs.collapsible.css +++ b/paragraphs.collapsible.css @@ -23,7 +23,17 @@ td.paragraph-bundle-content-collapsible.collapsed > .ajax-new-content > :not(.pa display: none; } +td.paragraph-bundle-content-collapsible.expanded > .form-actions .paragraphs-edit-link, +td.paragraph-bundle-content-collapsible.expanded > .ajax-new-content > .form-actions .paragraphs-edit-link { + display: none; +} + +td.paragraph-bundle-content-collapsible.collapsed > .form-actions .paragraphs-collapse-link, +td.paragraph-bundle-content-collapsible.collapsed > .ajax-new-content > .form-actions .paragraphs-collapse-link { + display: none; +} + td.paragraph-bundle-content-collapsible.expanded > .paragraph-bundle-preview, -td.paragraph-bundle-content-collapsible.expanded > .paragraph-bundle-preview { +td.paragraph-bundle-content-collapsible.expanded > .ajax-new-content > .paragraph-bundle-preview { display: none; } diff --git a/paragraphs.collapsible.js b/paragraphs.collapsible.js index cc5cd88..bebbebf 100644 --- a/paragraphs.collapsible.js +++ b/paragraphs.collapsible.js @@ -8,6 +8,7 @@ // Stored variables. var mStates = {}; + var mToolbarHeight = null; var mCollapsedClass = 'collapsed'; var mCollapseAction = 'collapse'; var mExpandedClass = 'expanded'; @@ -22,10 +23,10 @@ * The toggle action - 'collapse' or 'expand'. * @param object options * A set of options to configure the toggle: - * - excludeNew (bool): TRUE to exclude operating on new AJAX content. - * - excludeErrors (bool): TRUE to exclude operating on items with errors. * - fast (bool): If enabled, the transitions will not use the animated * slideUp / slideDown. The faster hide / show is used. + * - expandFieldsets (bool): Expand all nested fieldsets. + * - complete (function): Callback on complete. * * @return boolean * TRUE if the paragraph was toggled, @@ -122,6 +123,11 @@ }); } + // Trigger custom complete. + if (settings.complete) { + settings.complete($item); + } + // Clear animating flag. itemElement.animating = false; }; @@ -333,15 +339,34 @@ }; /** + * Scroll a given fieldset into view as much as possible. + */ + var collapseScrollIntoView = function(element) { + var $element = $(element).first(); + var offset = $element.offset(); + var slack = 55; + + if (offset.top > 0) { + if (mToolbarHeight === null) { + mToolbarHeight = $('#toolbar').outerHeight() || 0; + } + var y = Math.floor(offset.top - mToolbarHeight - slack); + y = y > 0 ? y : 0; + $(window).scrollTop(y); + } + }; + + /** * Enable Expand/Collapse feature for paragraph bundles. * Show the name & type of each bundle and hide contents inside those. */ Drupal.behaviors.paragraphsCollapsible = { attach: function (context, settings) { - // Trigger for single paragaph. - var title_selector = '.paragraph-bundle-content-collapsible > .paragraph-bundle-title, .paragraph-bundle-content-collapsible > .ajax-new-content > .paragraph-bundle-title'; - $(title_selector, context).once("paragraphs") - .each(function() { + var $new_items = $('.paragraph-bundle-content-collapsible', context).once('paragraphs'); + + if ($new_items.length > 0) { + // Trigger for a single paragaph. + $('> .paragraph-bundle-title, > .ajax-new-content > .paragraph-bundle-title', $new_items).each(function() { var $t = $(this); var $item = $t.closest('.paragraph-bundle-content-collapsible'); var is_expanded = $item.hasClass(mExpandedClass); @@ -394,7 +419,31 @@ } }); - // Trigger for all paragaphs. + // JS Only edit link. + var $fake_buttons = $('> .form-actions', $new_items).find('.paragraphs-edit-link, .paragraphs-collapse-link'); + if ($fake_buttons.length > 0) { + $fake_buttons.click(function(event) { + // Prevent the default click event. + event.preventDefault(); + var $item = $(this).closest('.paragraph-bundle-content-collapsible'); + if ($item.length) { + var action = $item.hasClass(mCollapsedClass) ? mExpandAction : mCollapseAction; + toggleParagraph($item, action, { + 'complete': function($element) { + collapseScrollIntoView($element); + } + }); + } + }); + + // Add jQuery UI button effects. + if ($.fn.button) { + $fake_buttons.button(); + } + } + } + + // Trigger for toggle all paragaphs. $('.paragraphs-collapsible-trigger-link', context).once("paragraphs") .click(function(event) { // Prevent the default click event. diff --git a/paragraphs.field_widget.inc b/paragraphs.field_widget.inc index 6374082..160b8be 100644 --- a/paragraphs.field_widget.inc +++ b/paragraphs.field_widget.inc @@ -642,11 +642,47 @@ function paragraphs_field_widget_form_build(&$form, &$form_state, $field, $insta } // Collapsible open paragraphs. - if ($default_edit_mode == 'open' && !empty($instance['settings']['open_collapsible'])) { + if (!empty($instance['settings']['open_collapsible']) && + $default_edit_mode == 'open' && $field['cardinality'] != 1) { // Attach js and css. $element['#attached']['js'][] = drupal_get_path('module', 'paragraphs') . '/paragraphs.collapsible.js'; $element['#attached']['css'][] = drupal_get_path('module', 'paragraphs') . '/paragraphs.collapsible.css'; + // Add fake edit button for open mode. + if (isset($paragraph_item) && entity_access('update', 'paragraphs_item', $paragraph_item)) { + $fake_button_links = array( + 'edit' => t('Edit'), + 'collapse' => t('Collapse'), + ); + foreach ($fake_button_links as $fake_button_action => $fake_button_label) { + if (!isset($element['actions'][$fake_button_action . '_button'])) { + $fake_button_link_name = implode('_', $parents) . '_' . $fake_button_action . '_link'; + $fake_button_link_attributes = array( + 'class' => array( + drupal_html_class($fake_button_link_name), + 'paragraphs-' . $fake_button_action . '-link', + ), + ); + + $element['actions'][$fake_button_action . '_link'] = array( + '#delta' => $delta, + '#name' => $fake_button_link_name, + '#type' => 'markup', + '#prefix' => '', + '#markup' => $fake_button_label, + '#suffix' => '', + '#access' => TRUE, + '#weight' => 999, + '#attached' => array( + 'library' => array( + array('system', 'ui.button'), + ), + ), + ); + } + } + } + // Build preview. if (!$deleted_paragraph && !empty($instance['settings']['open_collapsible_preview']) && !isset($element['paragraph_bundle_preview']) &&