paragraphs-8.x-1.11/js/paragraphs.add_above_button.js

/**
 * @file
 * Paragraphs actions JS code for paragraphs actions button.
 */

(function ($, Drupal, once) {

  'use strict';

  /**
   * Handle event when "Add above" button is clicked.
   *
   * @param event
   *   Click event.
   */
  var clickHandler = function (event) {
    event.preventDefault();
    // We need to stop event propagation in order to prevent triggering jQuery
    // UI dialog.js mousedown method. This method order call is not predictable.
    // When we are in dialog for editing reusable library (parent dialog) then
    // for 'Add Paragraph' button it will be called before child dialog
    // creation, but for 'Add above' button it will be called after child dialog
    // creation and this will result in moving parent dialog in front of
    // child dialog.
    event.stopPropagation();

    var $button = $(this);

    // Find delta for row without interference of unrelated table rows.
    var $anchorRow = $button.closest('tr');
    var delta = $anchorRow.parent().find('> .draggable').index($anchorRow);
    // If the form table has a layout wrapper use that (see claro / gin).
    var $table = $button.closest('.field-multiple-table');
    var $layer_wrapper = $table.closest('.layer-wrapper');
    $table = $layer_wrapper.length > 0 ? $layer_wrapper : $table;
    // We need the siblings function to avoid finding the 'Add paragraph' button inside a container.
    var $add_more_wrapper = $table.siblings('.clearfix,.form-actions,.multiple-value-form-actions,.field-actions').find('.paragraphs-add-wrapper');

    // Set delta before opening of dialog.
    $add_more_wrapper.find('.paragraph-type-add-delta').val(delta);

    // If the add mode is modal open the dialog, otherwise press the add button.
    if ($add_more_wrapper.find('.paragraph-type-add-delta').hasClass('modal')) {
      Drupal.paragraphsAddModal.openDialog($add_more_wrapper.find('.paragraphs-add-dialog'), Drupal.t('Add above'));
    }
    else {
      $add_more_wrapper.find('.field-add-more-submit').trigger('mousedown');
    }
  };

  /**
   * Process paragraph_AddAboveButton elements.
   *
   * @type {Drupal~behavior}
   */
  Drupal.behaviors.paragraphsAddAboveButton = {
    attach: function (context, settings) {
      $(once('paragraphs-add-above-button', '.paragraphs-dropdown-actions', context)).each(function () {
        var $actions = $(this);
        if ($actions.closest('.paragraph-top').hasClass('add-above-on')) {
          var $add_above = false;
          // If the form table has a layout wrapper use that (see claro / gin).
          var $table = $actions.closest('.field-multiple-table');
          var $layer_wrapper = $table.closest('.layer-wrapper');
          $table = $layer_wrapper.length > 0 ? $layer_wrapper : $table;
          var $add_more_wrapper = $table.siblings('.clearfix,.form-actions,.multiple-value-form-actions,.field-actions').find('.paragraphs-add-wrapper');
          // The Add Above button is added when the add mode is modal or when
          // there is only one add button in the other add modes.
          if ($add_more_wrapper.find('.paragraph-type-add-delta').hasClass('modal') || $add_more_wrapper.find('.field-add-more-submit').length === 1) {
            $add_above = true;
          }
          // Prepend the Add above button only if there is only one button.
          if ($add_above) {
            var $button = $('<input class="paragraphs-dropdown-action paragraphs-dropdown-action--add-above button button--small js-form-submit form-submit" type="submit" onClick="return false;" value="' + Drupal.t('Add above') + '">');
            // "Mousedown" is used since the original actions created by
            // paragraphs use the event "focusout" to hide the actions dropdown.
            $button.on('mousedown', clickHandler);

            $actions.prepend($button);
          }
        }
      });
    }
  };

})(jQuery, Drupal, once);