* Polyfill for HTML5 details elements.
*/
-(function ($, Modernizr, Drupal) {
+(function($, Modernizr, Drupal) {
/**
* The collapsible details object represents a single details element.
*
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.
- const anchor = location.hash && location.hash !== '#' ? `, ${location.hash}` : '';
+ const anchor =
+ window.location.hash && window.location.hash !== '#'
+ ? `, ${window.location.hash}`
+ : '';
if (this.$node.find(`.error${anchor}`).length) {
this.$node.attr('open', true);
}
this.setupLegend();
}
- $.extend(CollapsibleDetails, /** @lends Drupal.CollapsibleDetails */{
-
- /**
- * Holds references to instantiated CollapsibleDetails objects.
- *
- * @type {Array.<Drupal.CollapsibleDetails>}
- */
- instances: [],
- });
-
- $.extend(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.
- */
- setupLegend() {
- // Turn the summary into a clickable link.
- const $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(' '));
-
- // .wrapInner() does not retain bound events.
- $('<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));
+ $.extend(
+ CollapsibleDetails,
+ /** @lends Drupal.CollapsibleDetails */ {
+ /**
+ * Holds references to instantiated CollapsibleDetails objects.
+ *
+ * @type {Array.<Drupal.CollapsibleDetails>}
+ */
+ instances: [],
},
-
- /**
- * Handle legend clicks.
- *
- * @param {jQuery.Event} e
- * The event triggered.
- */
- onLegendClick(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.
- */
- toggle() {
- const isOpen = !!this.$node.attr('open');
- const $summaryPrefix = this.$node.find('> summary span.details-summary-prefix');
- if (isOpen) {
- $summaryPrefix.html(Drupal.t('Show'));
- }
- 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(() => {
- this.$node.attr('open', !isOpen);
- }, 0);
+ );
+
+ $.extend(
+ 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.
+ */
+ setupLegend() {
+ // Turn the summary into a clickable link.
+ const $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(' '));
+
+ // .wrapInner() does not retain bound events.
+ $('<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));
+ },
+
+ /**
+ * Handle legend clicks.
+ *
+ * @param {jQuery.Event} e
+ * The event triggered.
+ */
+ onLegendClick(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.
+ */
+ toggle() {
+ const isOpen = !!this.$node.attr('open');
+ const $summaryPrefix = this.$node.find(
+ '> summary span.details-summary-prefix',
+ );
+ if (isOpen) {
+ $summaryPrefix.html(Drupal.t('Show'));
+ } 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(() => {
+ this.$node.attr('open', !isOpen);
+ }, 0);
+ },
},
- });
+ );
/**
* Polyfill HTML5 details element.
if (Modernizr.details) {
return;
}
- const $collapsibleDetails = $(context).find('details').once('collapse').addClass('collapse-processed');
+ const $collapsibleDetails = $(context)
+ .find('details')
+ .once('collapse')
+ .addClass('collapse-processed');
if ($collapsibleDetails.length) {
for (let i = 0; i < $collapsibleDetails.length; i++) {
- CollapsibleDetails.instances.push(new CollapsibleDetails($collapsibleDetails[i]));
+ CollapsibleDetails.instances.push(
+ new CollapsibleDetails($collapsibleDetails[i]),
+ );
}
}
},
* The targeted node as a jQuery object.
*/
const handleFragmentLinkClickOrHashChange = (e, $target) => {
- $target.parents('details').not('[open]').find('> summary').trigger('click');
+ $target
+ .parents('details')
+ .not('[open]')
+ .find('> summary')
+ .trigger('click');
};
/**
* Binds a listener to handle fragment link clicks and URL hash changes.
*/
- $('body').on('formFragmentLinkClickOrHashChange.details', handleFragmentLinkClickOrHashChange);
+ $('body').on(
+ 'formFragmentLinkClickOrHashChange.details',
+ handleFragmentLinkClickOrHashChange,
+ );
// Expose constructor in the public space.
Drupal.CollapsibleDetails = CollapsibleDetails;
-}(jQuery, Modernizr, Drupal));
+})(jQuery, Modernizr, Drupal);