diff --git a/images/collapsed.png b/images/collapsed.png new file mode 100644 index 0000000000000000000000000000000000000000..91f3fd40ede024798b6de5ea2675bb692a3cfa95 GIT binary patch literal 105 zcmeAS@N?(olHy`uVBq!ia0vp^>>$j@3?%=}IXVGIu?6^qxc>kDAIJlF_r}R y1v5B2yO9Ru2zt6WhH%Ixhb6Q*Xr>9K@iDN~Fr3*g^XWQJlEKr}&t;ucLK6T5e;aZD literal 0 HcmV?d00001 diff --git a/images/expanded.png b/images/expanded.png new file mode 100644 index 0000000000000000000000000000000000000000..46f39ecb351cff65243fa9a614a69d039e1302a5 GIT binary patch literal 106 zcmeAS@N?(olHy`uVBq!ia0vp^>>$j@3?%=}IXVGIu?6^qxc>kDAIJlF_r}R z1v5B2yO9Ru2zk0VhE&W+{&76uaKb@_0}N~oA{!VF-#vS9IZ&3t)78&qol`;+0EMF; ATL1t6 literal 0 HcmV?d00001 diff --git a/paragraphs.collapsible.css b/paragraphs.collapsible.css new file mode 100644 index 0000000000000000000000000000000000000000..b96727208a015bcf03bb741da06e3bab31926735 --- /dev/null +++ b/paragraphs.collapsible.css @@ -0,0 +1,29 @@ +/** + * Admin CSS styles for the paragraphs module. + */ +td.paragraph-bundle-content-collapsible { + position: relative; +} + +td.paragraph-bundle-content-collapsible > .paragraph-bundle-title, +td.paragraph-bundle-content-collapsible > .ajax-new-content > .paragraph-bundle-title { + cursor: pointer; + background: url(images/expanded.png) 5px 65% no-repeat; /* LTR */ + padding-left: 15px; /* LTR */ +} + +td.paragraph-bundle-content-collapsible.collapsed > .paragraph-bundle-title, +td.paragraph-bundle-content-collapsible.collapsed > .ajax-new-content > .paragraph-bundle-title { + background-image: url(images/collapsed.png); /* LTR */ + background-position: 5px 50%; /* LTR */ +} + +td.paragraph-bundle-content-collapsible.collapsed > :not(.paragraph-bundle-content-collapsible-shown), +td.paragraph-bundle-content-collapsible.collapsed > .ajax-new-content > :not(.paragraph-bundle-content-collapsible-shown) { + display: none; +} + +td.paragraph-bundle-content-collapsible.expanded > .paragraph-bundle-preview, +td.paragraph-bundle-content-collapsible.expanded > .paragraph-bundle-preview { + display: none; +} diff --git a/paragraphs.collapsible.js b/paragraphs.collapsible.js new file mode 100644 index 0000000000000000000000000000000000000000..8b8270e5af2a3aed9ff833b89df83092f68d589e --- /dev/null +++ b/paragraphs.collapsible.js @@ -0,0 +1,315 @@ +/** + * @file + * Provides JavaScript for Collapsible Paragraphs. + */ + +(function ($, Drupal, window) { + 'use strict'; + + // Stored variables. + var mStates = {}; + var mCollapsedClass = 'collapsed'; + var mCollapseAction = 'collapse'; + var mExpandedClass = 'expanded'; + var mExpandAction = 'expand'; + + /** + * Show / Hide a single paragraph. + * + * @param object item + * The element of the field item row. + * @param string action + * 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. + * + * @return boolean + * TRUE if the paragraph was toggled, + */ + var toggleParagraph = function(item, action, options) { + var $item = $(item); + var itemElement = $item.get(0); + if (itemElement.animating) { + return false; + } + + var settings = $.extend(true, + { + 'fast': false + }, + options + ); + + // Block collapse for special cases. + if (action === mCollapseAction) { + // Do not collapse deleted paragraphs. + if ($item.children('.form-actions').find('[name$="deleteconfirm_button"]').length > 0) { + if ($item.hasClass(mCollapsedClass)) { + // Expand this special item. + action = mExpandAction; + } + else { + // Exit, nothing to do. + return false; + } + } + } + + // Per action config. + var action_class, old_class, animate_effect, fast_effect, toggle_text; + if (action === mCollapseAction) { + action_class = mCollapsedClass; + old_class = mExpandedClass; + animate_effect = 'slideUp'; + fast_effect = 'hide'; + toggle_text = Drupal.t('Show'); + } + else { + action_class = mExpandedClass; + old_class = mCollapsedClass; + animate_effect = 'slideDown'; + fast_effect = 'show'; + toggle_text = Drupal.t('Hide'); + } + + // Exit early if this item is already in the correct state. + if ($item.hasClass(action_class)) { + return true; + } + + // 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)'); + } + + // Determine id to track states. + var id = createParagraphId($item); + if (id) { + // Set state to match class added for action. + mStates[id] = action_class; + } + + // Invoke collapse actions. + itemElement.animating = true; + var fn_complete = function() { + // Set classes. + $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. + if (action === mExpandAction) { + 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() { + toggleAll(this, child_settings, action); + }); + } + + // Clear animating flag. + itemElement.animating = false; + }; + + if (settings.fast) { + // Fast show child elements for expand only. + if (action === mExpandAction) { + $elements[fast_effect](); + } + + // Item complete actions. + fn_complete(); + } + else { + $elements[animate_effect]('fast', fn_complete); + } + + return true; + }; + + /** + * Create a paragraph id for the field item. + * + * @param object item + * The element of the field item row. + * + * @return string|null + * The unique id. + */ + var createParagraphId = function(item) { + var id = null; + var $title = $(item).children('.paragraph-bundle-title').first(); + if ($title.length > 0) { + id = $title.attr('id'); + if (id) { + id = id.replace(/\-paragraph\-bundle\-title(?:\-\-\d+)?$/, ''); + } + } + + return id; + }; + + /** + * Show / Hide all paragraphs. + * + * @param object triggerElement + * The trigger element to toggle all child paragraphs. + * @param string action + * The toggle action - 'collapse' or 'expand'. + * @param object options + * See toggleParagraph(). + * + * @return int + * The count of paragraphs toggled. + */ + var toggleParagraphs = function(triggerElement, action, options) { + var toggledCount = 0; + var $form_item = $(triggerElement).closest('.form-item'); + if ($form_item.length > 0) { + var paragraph_bundles = $form_item.children('.field-multiple-table').find('> tbody > tr > .paragraph-bundle-content-collapsible'); + paragraph_bundles.each(function () { + if (toggleParagraph(this, action, options)) { + toggledCount++; + } + }); + } + + return toggledCount; + }; + + /** + * Trigger show / hide for given trigger element. + * + * @param object triggerElement + * The trigger element to toggle all child paragraphs. + * @param object options + * See toggleParagraph(). + * @param string action + * The toggle action - 'collapse', 'expand'. If not defined, it will be + * derive from the class name. + * + * @return int + * The count of paragraphs toggled. + */ + var toggleAll = function(triggerElement, options, action) { + var $t = $(triggerElement); + + // Determine action. + var triggered_action = action || ($t.hasClass(mCollapsedClass) ? mExpandAction : mCollapseAction); + + // Toggle paragraphs. + var toggledCount = toggleParagraphs(triggerElement, triggered_action, options); + + // Update trigger class and label. + if (toggledCount > 0) { + updateTrigger(triggerElement, triggered_action); + } + + return toggledCount; + }; + + /** + * Update the trigger element based on the action. + * + * @param object triggerElement + * The trigger element. + * @param string action + * The toggle action - 'collapse', 'expand'. If not defined, it will be + * derive from the class name. + */ + var updateTrigger = function(triggerElement, action) { + var $t = $(triggerElement); + var triggered_action = action || ($t.hasClass(mCollapsedClass) ? mExpandAction : mCollapseAction); + + // Build triggers. + var $triggers = [$t]; + + // Add other trigger. + var $parent_table = $t.closest('table'); + if ($parent_table.length > 0) { + if ($parent_table.hasClass('field-multiple-table')) { + // Items table click, add sticky header trigger. + $triggers.push($parent_table.siblings('.sticky-header').find('.paragraphs-collapsible-trigger-link')); + } + else if ($parent_table.hasClass('sticky-header')) { + // Sticky header click, add items table click. + $triggers.push($parent_table.siblings('table.field-multiple-table').find('.paragraphs-collapsible-trigger-link')); + } + } + + $.each($triggers, function(index, $trigger) { + if ($trigger.length > 0) { + if (triggered_action === mCollapseAction) { + $trigger.removeClass(mExpandedClass).addClass(mCollapsedClass); + $trigger.text(Drupal.t('Expand All')); + } + else { + $trigger.removeClass(mCollapsedClass).addClass(mExpandedClass); + $trigger.text(Drupal.t('Collapse All')); + } + } + }); + }; + + /** + * 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 $t = $(this); + var $item = $t.closest('.paragraph-bundle-content-collapsible'); + + // Prefix title with a toggle image. + $('') + .append($item.hasClass('expanded') ? Drupal.t('Hide') : Drupal.t('Show')) + .prependTo($t) + .after(' '); + + // Update toggle state. + if ($item.find('.error:first').length > 0) { + // Expand errors. + toggleParagraph($item, mExpandAction); + } + else { + // Set stored states. + var id = createParagraphId($item); + if (id && (id in mStates) && mStates[id] && !$item.hasClass(mStates[id])) { + var action = mStates[id] === mCollapsedClass ? mCollapseAction : mExpandAction; + toggleParagraph($item, action); + } + } + }) + .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); + } + }); + + // Trigger for all paragaphs. + $('.paragraphs-collapsible-trigger-link', context).once("paragraphs") + .click(function(event) { + // Prevent the default click event. + event.preventDefault(); + toggleAll(this); + }); + } + }; + +})(jQuery, Drupal, this); diff --git a/paragraphs.field_widget.inc b/paragraphs.field_widget.inc index 921843c5da4730328349ca02bfb042ec23251261..63740829792e22de84c1768038a08e0571b1329a 100644 --- a/paragraphs.field_widget.inc +++ b/paragraphs.field_widget.inc @@ -345,6 +345,14 @@ function paragraphs_field_widget_form_build(&$form, &$form_state, $field, $insta $instance['settings']['title_multiple'] = PARAGRAPHS_DEFAULT_TITLE_MULTIPLE; } + if (!isset($instance['settings']['open_collapsible'])) { + $instance['settings']['open_collapsible'] = PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE; + } + + if (!isset($instance['settings']['open_collapsible_preview'])) { + $instance['settings']['open_collapsible_preview'] = PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE_PREVIEW; + } + // If the paragraph item form contains another paragraph, // we might ran into a recursive loop. Prevent that. if ($recursion++ > PARAGRAPHS_RECURSION_LIMIT) { @@ -445,6 +453,7 @@ function paragraphs_field_widget_form_build(&$form, &$form_state, $field, $insta $element['paragraph_bundle_title'] = array( '#type' => 'container', '#weight' => -100, + '#attributes' => array('class' => array('paragraph-bundle-title')), ); $element['paragraph_bundle_title']['info'] = array( '#markup' => t('!title type: %bundle', array('!title' => t($instance['settings']['title']), '%bundle' => $bundle_info->name)), @@ -503,6 +512,7 @@ function paragraphs_field_widget_form_build(&$form, &$form_state, $field, $insta if($default_edit_mode === 'preview' && entity_access('view', 'paragraphs_item', $paragraph_item)) { $element['paragraph_bundle_preview'] = array( '#type' => 'container', + '#attributes' => array('class' => array('paragraph-bundle-preview')), ); $preview = $paragraph_item->view('paragraphs_editor_preview'); $element['paragraph_bundle_preview']['preview'] = $preview; @@ -542,7 +552,6 @@ function paragraphs_field_widget_form_build(&$form, &$form_state, $field, $insta ); } - if (isset($paragraph_item)) { $element['actions']['remove_button'] = array( '#delta' => $delta, @@ -631,6 +640,37 @@ function paragraphs_field_widget_form_build(&$form, &$form_state, $field, $insta '#weight' => 1001, ); } + + // Collapsible open paragraphs. + if ($default_edit_mode == 'open' && !empty($instance['settings']['open_collapsible'])) { + // 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'; + + // Build preview. + if (!$deleted_paragraph && !empty($instance['settings']['open_collapsible_preview']) && + !isset($element['paragraph_bundle_preview']) && + isset($paragraph_item) && entity_access('view', 'paragraphs_item', $paragraph_item)) { + $element['paragraph_bundle_preview'] = array( + '#type' => 'container', + '#attributes' => array('class' => array('paragraph-bundle-preview')), + ); + $preview = $paragraph_item->view('paragraphs_editor_preview'); + $element['paragraph_bundle_preview']['preview'] = $preview; + } + + // Add classes to always show these elements. + $collapsible_elements_shown = array( + 'paragraph_bundle_title', + 'paragraph_bundle_preview', + 'actions', + ); + foreach ($collapsible_elements_shown as $collapsible_element_name) { + if (isset($element[$collapsible_element_name])) { + $element[$collapsible_element_name]['#attributes']['class'][] = 'paragraph-bundle-content-collapsible-shown'; + } + } + } } // Hide full item when we are confirmed delete. diff --git a/paragraphs.module b/paragraphs.module index 47093b6ca57d217ea0c88b6491dc3d4fa1447600..ca4c5da47f4400033f0485f1cab38bea6a4ca594 100644 --- a/paragraphs.module +++ b/paragraphs.module @@ -11,6 +11,9 @@ define('PARAGRAPHS_DEFAULT_TITLE_MULTIPLE', 'Paragraphs'); define('PARAGRAPHS_DEFAULT_EDIT_MODE', 'open'); define('PARAGRAPHS_DEFAULT_EDIT_MODE_OVERRIDE', 1); define('PARAGRAPHS_DEFAULT_ADD_MODE', 'select'); +define('PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE', TRUE); +define('PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE_COLLAPSED', TRUE); +define('PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE_PREVIEW', FALSE); /** * Modules should return this value from hook_paragraphs_item_access() to allow access to a paragraphs item. @@ -431,6 +434,9 @@ function paragraphs_field_info() { 'title_multiple' => PARAGRAPHS_DEFAULT_TITLE_MULTIPLE, 'allowed_bundles' => array(), 'bundle_weights' => array(), + 'open_collapsible' => PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE, + 'open_collapsible_collapsed' => PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE_COLLAPSED, + 'open_collapsible_preview' => PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE_PREVIEW, ), 'default_widget' => 'paragraphs_hidden', 'default_formatter' => 'paragraphs_view', @@ -593,6 +599,48 @@ function paragraphs_field_instance_settings_form($field, $instance) { '#required' => TRUE, ); + $element['open_collapsible'] = array( + '#type' => 'checkbox', + '#title' => t('Enable collapsible form items'), + '#description' => t('Provides client-side collapsible paragraphs via JavaScript.'), + '#default_value' => isset($settings['open_collapsible']) ? $settings['open_collapsible'] : PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE, + '#states' => array( + // Show the settings when the default edit mode is set to "Open". + 'visible' => array( + ':input[name="instance[settings][default_edit_mode]"]' => array('value' => 'open'), + ), + ), + ); + + $element['open_collapsible_collapsed'] = array( + '#type' => 'checkbox', + '#field_prefix' => '    ', + '#title' => t('Collapse all paragraphs initially'), + '#default_value' => isset($settings['open_collapsible_collapsed']) ? $settings['open_collapsible_collapsed'] : PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE_COLLAPSED, + '#states' => array( + // Show the settings when open_collapsible is enabled. + 'visible' => array( + ':input[name="instance[settings][default_edit_mode]"]' => array('value' => 'open'), + ':input[name="instance[settings][open_collapsible]"]' => array('checked' => TRUE), + ), + ), + ); + + $element['open_collapsible_preview'] = array( + '#type' => 'checkbox', + '#field_prefix' => '    ', + '#title' => t('Display paragraphs preview view mode for collapsible items'), + '#description' => t('This will display the rendered preview with the stored values when the form is built. This does not attempt to update the preview as values are changed.'), + '#default_value' => isset($settings['open_collapsible_preview']) ? $settings['open_collapsible_preview'] : PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE_PREVIEW, + '#states' => array( + // Show the settings when open_collapsible is enabled. + 'visible' => array( + ':input[name="instance[settings][default_edit_mode]"]' => array('value' => 'open'), + ':input[name="instance[settings][open_collapsible]"]' => array('checked' => TRUE), + ), + ), + ); + if (!count($bundles)) { $element['allowed_bundles_explain'] = array( '#type' => 'markup', @@ -1154,8 +1202,15 @@ function theme_paragraphs_field_multiple_value_form($variables) { if (!isset($instance['settings']['title_multiple'])) { $instance['settings']['title_multiple'] = PARAGRAPHS_DEFAULT_TITLE_MULTIPLE; } + if (!isset($instance['settings']['open_collapsible'])) { + $instance['settings']['open_collapsible'] = PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE; + } + if (!isset($instance['settings']['open_collapsible_collapsed'])) { + $instance['settings']['open_collapsible_collapsed'] = PARAGRAPHS_DEFAULT_OPEN_COLLAPSIBLE_COLLAPSED; + } $add_mode = (isset($instance['settings']['add_mode']) ? $instance['settings']['add_mode'] : PARAGRAPHS_DEFAULT_ADD_MODE); + $default_edit_mode = isset($instance['settings']['default_edit_mode']) ? $instance['settings']['default_edit_mode'] : PARAGRAPHS_DEFAULT_EDIT_MODE; $required = !empty($element['#required']) ? theme('form_required_marker', $variables) : ''; @@ -1180,25 +1235,48 @@ function theme_paragraphs_field_multiple_value_form($variables) { // If the field can hold more than one item, display it as a draggable table. if ($element['#cardinality'] != 1) { $table_id = drupal_html_id($element['#field_name'] . '_values'); - $order_class = $element['#field_name'] . '-delta-order'; + $order_class = $element['#field_name'] . '-' . $table_id . '-delta-order'; - $header = array( - array( - 'data' => '', - 'colspan' => 2, - 'class' => array('field-label'), - ), - t('Order'), - ); + // Open collapsible processing. + $open_collapsible_enabled = $default_edit_mode == 'open' && !empty($instance['settings']['open_collapsible']); + $open_collapsible_collapsed = $open_collapsible_enabled && !empty($instance['settings']['open_collapsible_collapsed']); + + // Build table rows. $rows = array(); + $collapsed_row_count = 0; // Add the items as table rows. + $item_base_classes = array('paragraph-bundle-content'); + if ($open_collapsible_enabled) { + $item_base_classes[] = 'paragraph-bundle-content-collapsible'; + } + foreach ($items as $key => $item) { + $item_classes = $item_base_classes; + + if (!empty($item['#parents'])) { + $item_parents_key = implode('][', $item['#parents']) . ']'; + } + + if ($open_collapsible_enabled) { + // If set to collapse intially and paragraph is not being edited or + // deleted. + if ($open_collapsible_collapsed && + empty($item['#entity']->being_edited) && + empty($item['#entity']->removed)) { + $item_classes[] = 'collapsed'; + $collapsed_row_count++; + } + else { + $item_classes[] = 'expanded'; + } + } + $item['_weight']['#attributes']['class'] = array($order_class); $delta_element = drupal_render($item['_weight']); $cells = array( array('data' => '', 'class' => array('field-multiple-drag')), - drupal_render($item), + array('data' => drupal_render($item), 'class' => $item_classes), array('data' => $delta_element, 'class' => array('delta-order')), ); $rows[] = array( @@ -1207,6 +1285,55 @@ function theme_paragraphs_field_multiple_value_form($variables) { ); } + // Collapsible trigger markup. + $expand_collapse_markup = ''; + if ($open_collapsible_enabled) { + $expand_collapse_link_classes = array( + 'paragraphs-collapsible-trigger-link', + ); + if ($open_collapsible_collapsed && $collapsed_row_count > 0) { + $expand_collapse_link_text = t('Expand All'); + $expand_collapse_link_classes[] = 'collapsed'; + } + else { + $expand_collapse_link_text = t('Collapse All'); + $expand_collapse_link_classes[] = 'expanded'; + } + + $expand_collapse_markup = ''; + $expand_collapse_markup .= l($expand_collapse_link_text, '#', array( + 'external' => TRUE, + 'attributes' => array( + 'class' => $expand_collapse_link_classes, + ), + )); + $expand_collapse_markup .= ''; + } + + // Build table header. + if ($expand_collapse_markup) { + $header_text = t('!title !required !collapsible', array( + '!collapsible' => $expand_collapse_markup, + '!title' => $element['#title'], + '!required' => $required, + )); + } + else { + $header_text = t('!title !required', array( + '!title' => $element['#title'], + '!required' => $required, + )); + } + + $header = array( + array( + 'data' => '', + 'colspan' => 2, + 'class' => array('field-label'), + ), + t('Order'), + ); + $field_content = theme('table', array('header' => $header, 'rows' => $rows, 'attributes' => array('id' => $table_id, 'class' => array('field-multiple-table')))); drupal_add_tabledrag($table_id, 'order', 'sibling', $order_class); @@ -1454,4 +1581,4 @@ function paragraphs_modules_uninstalled($modules) { if (in_array('entitycache', $modules)) { paragraphs_remove_entitycache_table(); } -} \ No newline at end of file +}