Verified Commit 6e6ad992 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #1936708 by bnjmnm, espurnes, bendev, nod_, justinchev, ayushmishra206,... 

Issue #1936708 by bnjmnm, espurnes, bendev, nod_, justinchev, ayushmishra206, vsujeetkumar, mbroere, mrinalini9, Knee-X, vacho, priyanka.sahni, jaspreetsingh31, paulocs, sokru, joum, kwoxer, yoroy, lauriii, rootwork, droplet: Current element values missing from vertical tabs when shown in 2-column layout
parent 12a3e7ba

core/core.libraries.yml

+1 −0
Original line number Diff line number Diff line
@@ -122,6 +122,7 @@ drupal.checkbox: 
drupal.collapse:

  version: VERSION

  js:

    misc/details-summarized-content.js: {}

    misc/details-aria.js: {}

    misc/collapse.js: {}

  dependencies:

core/misc/collapse.es6.js

+12 −36
Original line number Diff line number Diff line
@@ -24,10 +24,8 @@ 
    if (this.$node.find(`.error${anchor}`).length) {

      this.$node.attr('open', true);

    }

    // Initialize and setup the summary,

    this.setupSummary();

    // Initialize and setup the legend.

    this.setupLegend();

    // Initialize and set up the summary polyfill.

    this.setupSummaryPolyfill();

  }



  $.extend(
@@ -46,61 +44,39 @@ 
    CollapsibleDetails.prototype,

    /** @lends Drupal.CollapsibleDetails# */ {

      /**

       * Initialize and setup summary events and markup.

       *

       * @fires event:summaryUpdated

       *

       * @listens event:summaryUpdated

       */

      setupSummary() {

        this.$summary = $('<span class="summary"></span>');

        this.$node

          .on('summaryUpdated', $.proxy(this.onSummaryUpdated, this))

          .trigger('summaryUpdated');

      },



      /**

       * Initialize and setup legend markup.

       * Initialize and setup summary markup.

       */

      setupLegend() {

      setupSummaryPolyfill() {

        // Turn the summary into a clickable link.

        const $legend = this.$node.find('> summary');

        const $summary = this.$node.find('> summary');



        $('<span class="details-summary-prefix visually-hidden"></span>')

          .append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show'))

          .prependTo($legend)

          .prependTo($summary)

          .after(document.createTextNode(' '));



        // .wrapInner() does not retain bound events.

        $('<a class="details-title"></a>')

          .attr('href', `#${this.$node.attr('id')}`)

          .prepend($legend.contents())

          .appendTo($legend);

          .prepend($summary.contents())

          .appendTo($summary);



        $legend

        $summary

          .append(this.$summary)

          .on('click', $.proxy(this.onLegendClick, this));

          .on('click', $.proxy(this.onSummaryClick, this));

      },



      /**

       * Handle legend clicks.

       * Handle summary clicks.

       *

       * @param {jQuery.Event} e

       *   The event triggered.

       */

      onLegendClick(e) {

      onSummaryClick(e) {

        this.toggle();

        e.preventDefault();

      },



      /**

       * Update summary.

       */

      onSummaryUpdated() {

        const text = $.trim(this.$node.drupalGetSummary());

        this.$summary.html(text ? ` (${text})` : '');

      },



      /**

       * Toggle the visibility of a details element using smooth animations.

       */

core/misc/collapse.js

+7 −16
Original line number Diff line number Diff line
@@ -15,32 +15,23 @@ 
      this.$node.attr('open', true);

    }



    this.setupSummary();

    this.setupLegend();

    this.setupSummaryPolyfill();

  }



  $.extend(CollapsibleDetails, {

    instances: []

  });

  $.extend(CollapsibleDetails.prototype, {

    setupSummary: function setupSummary() {

      this.$summary = $('<span class="summary"></span>');

      this.$node.on('summaryUpdated', $.proxy(this.onSummaryUpdated, this)).trigger('summaryUpdated');

    setupSummaryPolyfill: function setupSummaryPolyfill() {

      var $summary = this.$node.find('> summary');

      $('<span class="details-summary-prefix visually-hidden"></span>').append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show')).prependTo($summary).after(document.createTextNode(' '));

      $('<a class="details-title"></a>').attr('href', "#".concat(this.$node.attr('id'))).prepend($summary.contents()).appendTo($summary);

      $summary.append(this.$summary).on('click', $.proxy(this.onSummaryClick, this));

    },

    setupLegend: function setupLegend() {

      var $legend = this.$node.find('> summary');

      $('<span class="details-summary-prefix visually-hidden"></span>').append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show')).prependTo($legend).after(document.createTextNode(' '));

      $('<a class="details-title"></a>').attr('href', "#".concat(this.$node.attr('id'))).prepend($legend.contents()).appendTo($legend);

      $legend.append(this.$summary).on('click', $.proxy(this.onLegendClick, this));

    },

    onLegendClick: function onLegendClick(e) {

    onSummaryClick: function onSummaryClick(e) {

      this.toggle();

      e.preventDefault();

    },

    onSummaryUpdated: function onSummaryUpdated() {

      var text = $.trim(this.$node.drupalGetSummary());

      this.$summary.html(text ? " (".concat(text, ")") : '');

    },

    toggle: function toggle() {

      var _this = this;

core/misc/details-summarized-content.es6.js

0 → 100644
+108 −0
Original line number Diff line number Diff line 
/**

 * @file

 * Adds a summary of a details element's contents to its summary element.

 */

(($, Drupal) => {

  /**

   * The DetailsSummarizedContent object represents a single details element.

   *

   * @constructor Drupal.DetailsSummarizedContent

   *

   * @param {HTMLElement} node

   *   A details element, the summary of which may have supplemental text.

   *   The supplemental text summarizes the details element's contents.

   */

  function DetailsSummarizedContent(node) {

    this.$node = $(node);

    this.setupSummary();

  }



  $.extend(

    DetailsSummarizedContent,

    /** @lends Drupal.DetailsSummarizedContent */ {

      /**

       * Holds references to instantiated DetailsSummarizedContent objects.

       *

       * @type {Array.<Drupal.DetailsSummarizedContent>}

       */

      instances: [],

    },

  );



  $.extend(

    DetailsSummarizedContent.prototype,

    /** @lends Drupal.DetailsSummarizedContent# */ {

      /**

       * Initialize and setup summary events and markup.

       *

       * @fires event:summaryUpdated

       *

       * @listens event:summaryUpdated

       */

      setupSummary() {

        this.$detailsSummarizedContentWrapper = $(

          Drupal.theme('detailsSummarizedContentWrapper'),

        );

        this.$node

          .on('summaryUpdated', $.proxy(this.onSummaryUpdated, this))

          .trigger('summaryUpdated')

          .find('> summary')

          .append(this.$detailsSummarizedContentWrapper);

      },



      /**

       * Update summary.

       */

      onSummaryUpdated() {

        const text = $.trim(this.$node.drupalGetSummary());

        this.$detailsSummarizedContentWrapper.html(

          Drupal.theme('detailsSummarizedContentText', text),

        );

      },

    },

  );



  /**

   * Adds a summary of a details element's contents to its summary element.

   *

   * @type {Drupal~behavior}

   *

   * @prop {Drupal~behaviorAttach} attach

   *   Attaches behavior for the details element.

   */

  Drupal.behaviors.detailsSummary = {

    attach(context) {

      const $detailsElements = $(context)

        .find('details')

        .once('details');



      DetailsSummarizedContent.instances = DetailsSummarizedContent.instances.concat(

        $detailsElements

          .map((index, details) => new DetailsSummarizedContent(details))

          .get(),

      );

    },

  };



  Drupal.DetailsSummarizedContent = DetailsSummarizedContent;



  /**

   * The element containing a wrapper for summarized details content.

   *

   * @return {string}

   *   The markup for the element that will contain the summarized content.

   */

  Drupal.theme.detailsSummarizedContentWrapper = () =>

    `<span class="summary"></span>`;



  /**

   * Formats the summarized details content text.

   *

   * @param {string|null} [text]

   *   (optional) The summarized content text displayed in the summary.

   * @return {string}

   *   The formatted summarized content text.

   */

  Drupal.theme.detailsSummarizedContentText = text =>

    text ? ` (${text})` : '';

})(jQuery, Drupal);

core/misc/details-summarized-content.js

0 → 100644
+44 −0
Original line number Diff line number Diff line 
/**

* DO NOT EDIT THIS FILE.

* See the following change record for more information,

* https://www.drupal.org/node/2815083

* @preserve

**/



(function ($, Drupal) {

  function DetailsSummarizedContent(node) {

    this.$node = $(node);

    this.setupSummary();

  }



  $.extend(DetailsSummarizedContent, {

    instances: []

  });

  $.extend(DetailsSummarizedContent.prototype, {

    setupSummary: function setupSummary() {

      this.$detailsSummarizedContentWrapper = $(Drupal.theme('detailsSummarizedContentWrapper'));

      this.$node.on('summaryUpdated', $.proxy(this.onSummaryUpdated, this)).trigger('summaryUpdated').find('> summary').append(this.$detailsSummarizedContentWrapper);

    },

    onSummaryUpdated: function onSummaryUpdated() {

      var text = $.trim(this.$node.drupalGetSummary());

      this.$detailsSummarizedContentWrapper.html(Drupal.theme('detailsSummarizedContentText', text));

    }

  });

  Drupal.behaviors.detailsSummary = {

    attach: function attach(context) {

      var $detailsElements = $(context).find('details').once('details');

      DetailsSummarizedContent.instances = DetailsSummarizedContent.instances.concat($detailsElements.map(function (index, details) {

        return new DetailsSummarizedContent(details);

      }).get());

    }

  };

  Drupal.DetailsSummarizedContent = DetailsSummarizedContent;



  Drupal.theme.detailsSummarizedContentWrapper = function () {

    return "<span class=\"summary\"></span>";

  };



  Drupal.theme.detailsSummarizedContentText = function (text) {

    return text ? " (".concat(text, ")") : '';

  };

})(jQuery, Drupal);
 
 No newline at end of file