/**
- * @file
- * Polyfill for HTML5 details elements.
- */
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
(function ($, Modernizr, Drupal) {
-
- 'use strict';
-
- /**
- * The collapsible details object represents a single details element.
- *
- * @constructor Drupal.CollapsibleDetails
- *
- * @param {HTMLElement} node
- * The details element.
- */
function CollapsibleDetails(node) {
this.$node = $(node);
this.$node.data('details', this);
- // Expand details if there are errors inside, or if it contains an
- // element that is targeted by the URI fragment identifier.
+
var anchor = location.hash && location.hash !== '#' ? ', ' + location.hash : '';
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();
}
- $.extend(CollapsibleDetails, /** @lends Drupal.CollapsibleDetails */{
-
- /**
- * Holds references to instantiated CollapsibleDetails objects.
- *
- * @type {Array.<Drupal.CollapsibleDetails>}
- */
+ $.extend(CollapsibleDetails, {
instances: []
});
- $.extend(CollapsibleDetails.prototype, /** @lends Drupal.CollapsibleDetails# */{
-
- /**
- * Initialize and setup summary events and markup.
- *
- * @fires event:summaryUpdated
- *
- * @listens event:summaryUpdated
- */
- setupSummary: function () {
+ $.extend(CollapsibleDetails.prototype, {
+ setupSummary: function setupSummary() {
this.$summary = $('<span class="summary"></span>');
- this.$node
- .on('summaryUpdated', $.proxy(this.onSummaryUpdated, this))
- .trigger('summaryUpdated');
+ this.$node.on('summaryUpdated', $.proxy(this.onSummaryUpdated, this)).trigger('summaryUpdated');
},
-
- /**
- * Initialize and setup legend markup.
- */
- setupLegend: function () {
- // Turn the summary into a clickable link.
+ 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(' '));
+ $('<span class="details-summary-prefix visually-hidden"></span>').append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show')).prependTo($legend).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);
+ $('<a class="details-title"></a>').attr('href', '#' + this.$node.attr('id')).prepend($legend.contents()).appendTo($legend);
- $legend
- .append(this.$summary)
- .on('click', $.proxy(this.onLegendClick, this));
+ $legend.append(this.$summary).on('click', $.proxy(this.onLegendClick, this));
},
-
- /**
- * Handle legend clicks.
- *
- * @param {jQuery.Event} e
- * The event triggered.
- */
- onLegendClick: function (e) {
+ onLegendClick: function onLegendClick(e) {
this.toggle();
e.preventDefault();
},
-
- /**
- * Update summary.
- */
- onSummaryUpdated: function () {
+ onSummaryUpdated: function onSummaryUpdated() {
var text = $.trim(this.$node.drupalGetSummary());
this.$summary.html(text ? ' (' + text + ')' : '');
},
+ toggle: function toggle() {
+ var _this = this;
- /**
- * Toggle the visibility of a details element using smooth animations.
- */
- toggle: function () {
var isOpen = !!this.$node.attr('open');
var $summaryPrefix = this.$node.find('> summary span.details-summary-prefix');
if (isOpen) {
$summaryPrefix.html(Drupal.t('Show'));
- }
- else {
+ } else {
$summaryPrefix.html(Drupal.t('Hide'));
}
- // Delay setting the attribute to emulate chrome behavior and make
- // details-aria.js work as expected with this polyfill.
+
setTimeout(function () {
- this.$node.attr('open', !isOpen);
- }.bind(this), 0);
+ _this.$node.attr('open', !isOpen);
+ }, 0);
}
});
- /**
- * Polyfill HTML5 details element.
- *
- * @type {Drupal~behavior}
- *
- * @prop {Drupal~behaviorAttach} attach
- * Attaches behavior for the details element.
- */
Drupal.behaviors.collapse = {
- attach: function (context) {
+ attach: function attach(context) {
if (Modernizr.details) {
return;
}
}
};
- // Expose constructor in the public space.
- Drupal.CollapsibleDetails = CollapsibleDetails;
+ var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
+ $target.parents('details').not('[open]').find('> summary').trigger('click');
+ };
-})(jQuery, Modernizr, Drupal);
+ $('body').on('formFragmentLinkClickOrHashChange.details', handleFragmentLinkClickOrHashChange);
+
+ Drupal.CollapsibleDetails = CollapsibleDetails;
+})(jQuery, Modernizr, Drupal);
\ No newline at end of file