X-Git-Url: https://yaffs.net/gitweb/?a=blobdiff_plain;f=web%2Fcore%2Fmisc%2Fcollapse.es6.js;h=52fd244bc13034ff5f411731f09373fee8297bdf;hb=4e1bfbf98b844da83b18aca92ef00f11a4735806;hp=374af0c1c9aa22df5e142c8d88a00587007c6d96;hpb=9917807b03b64faf00f6a1f29dcb6eafc454efa5;p=yaffs-website diff --git a/web/core/misc/collapse.es6.js b/web/core/misc/collapse.es6.js index 374af0c1c..52fd244bc 100644 --- a/web/core/misc/collapse.es6.js +++ b/web/core/misc/collapse.es6.js @@ -3,7 +3,7 @@ * Polyfill for HTML5 details elements. */ -(function ($, Modernizr, Drupal) { +(function($, Modernizr, Drupal) { /** * The collapsible details object represents a single details element. * @@ -17,7 +17,10 @@ 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); } @@ -27,93 +30,98 @@ this.setupLegend(); } - $.extend(CollapsibleDetails, /** @lends Drupal.CollapsibleDetails */{ - - /** - * Holds references to instantiated CollapsibleDetails objects. - * - * @type {Array.} - */ - instances: [], - }); - - $.extend(CollapsibleDetails.prototype, /** @lends Drupal.CollapsibleDetails# */{ - - /** - * Initialize and setup summary events and markup. - * - * @fires event:summaryUpdated - * - * @listens event:summaryUpdated - */ - setupSummary() { - this.$summary = $(''); - 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'); - - $('') - .append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show')) - .prependTo($legend) - .after(document.createTextNode(' ')); - - // .wrapInner() does not retain bound events. - $('') - .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.} + */ + 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 = $(''); + 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'); + + $('') + .append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show')) + .prependTo($legend) + .after(document.createTextNode(' ')); + + // .wrapInner() does not retain bound events. + $('') + .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. @@ -128,10 +136,15 @@ 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]), + ); } } }, @@ -151,14 +164,21 @@ * 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);