diff -u b/core/misc/collapse.js b/core/misc/collapse.js --- b/core/misc/collapse.js +++ b/core/misc/collapse.js @@ -12,11 +12,19 @@ * * @constructor Drupal.CollapsibleDetails * - * @param {HTMLElement} node + * @param {HTMLDetailsElement} node + * The `
` tag to process. */ function CollapsibleDetails(node) { this.$node = $(node); - this.$node.data('details', this); + + // Details tag polyfill. + if (!Modernizr.details) { + this.$node.addClass('collapse-processed'); + // Initialize and setup the legend, replicate summary tag functionality. + this.setupLegend(); + } + // 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 : ''; @@ -25,8 +33,6 @@ } // Initialize and setup the summary, this.setupSummary(); - // Initialize and setup the legend. - this.setupLegend(); } $.extend(CollapsibleDetails, /** @lends Drupal.CollapsibleDetails */{ @@ -50,12 +56,24 @@ */ setupSummary: function () { this.$summary = $(''); + + this.$node.find('> summary') + .append(this.$summary); + this.$node - .on('summaryUpdated', $.proxy(this.onSummaryUpdated, this)) + .on('summaryUpdated', this.onSummaryUpdated.bind(this)) .trigger('summaryUpdated'); }, /** + * Update summary. + */ + onSummaryUpdated: function () { + var text = $.trim(this.$node.drupalGetSummary()); + this.$summary.html(text ? ' (' + text + ')' : ''); + }, + + /** * Initialize and setup legend markup. */ setupLegend: function () { @@ -73,15 +91,14 @@ .prepend($legend.contents()) .appendTo($legend); - $legend - .append(this.$summary) - .on('click', $.proxy(this.onLegendClick, this)); + $legend.on('click', this.onLegendClick.bind(this)); }, /** * Handle legend clicks. * * @param {jQuery.Event} e + * jQuery Event object. */ onLegendClick: function (e) { this.toggle(); @@ -89,15 +106,7 @@ }, /** - * Update summary. - */ - onSummaryUpdated: function () { - var text = $.trim(this.$node.drupalGetSummary()); - this.$summary.html(text ? ' (' + text + ')' : ''); - }, - - /** - * Toggle the visibility of a details element using smooth animations. + * Toggle the value of the open attribute. */ toggle: function () { var isOpen = !!this.$node.attr('open'); @@ -120,10 +129,13 @@ * Polyfill HTML5 details element. * * @type {Drupal~behavior} + * + * @prop {Drupal~behaviorAttach} + * Process all `
` elements on the page. */ Drupal.behaviors.collapse = { attach: function (context) { - var $collapsibleDetails = $(context).find('details').once('collapse').addClass('collapse-processed'); + var $collapsibleDetails = $(context).find('details').once('collapse'); if ($collapsibleDetails.length) { for (var i = 0; i < $collapsibleDetails.length; i++) { CollapsibleDetails.instances.push(new CollapsibleDetails($collapsibleDetails[i]));