-
- /**
- * 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);
+ },