diff --git a/core/misc/collapse.js b/core/misc/collapse.js index f635647..9065473 100644 --- a/core/misc/collapse.js +++ b/core/misc/collapse.js @@ -12,11 +12,18 @@ * * @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 +32,7 @@ } // 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'); @@ -123,10 +132,7 @@ */ Drupal.behaviors.collapse = { attach: function (context) { - if (Modernizr.details) { - return; - } - 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])); diff --git a/core/modules/comment/comment-entity-form.js b/core/modules/comment/comment-entity-form.js index 3ad1a3d..22cda4a 100644 --- a/core/modules/comment/comment-entity-form.js +++ b/core/modules/comment/comment-entity-form.js @@ -14,8 +14,8 @@ Drupal.behaviors.commentFieldsetSummaries = { attach: function (context) { var $context = $(context); - $context.find('fieldset.comment-entity-settings-form').drupalSetSummary(function (context) { - return Drupal.checkPlain($(context).find('.js-form-item-comment input:checked').next('label').text()); + $context.find('.comment-node-settings-form').drupalSetSummary(function (context) { + return Drupal.checkPlain($(context).find('.js-form-item-comment-0-status input:checked').next('label').text()); }); } }; diff --git a/core/themes/classy/css/components/collapse-processed.css b/core/themes/classy/css/components/collapse-processed.css index 3ed2e35..4367da3 100644 --- a/core/themes/classy/css/components/collapse-processed.css +++ b/core/themes/classy/css/components/collapse-processed.css @@ -30,3 +30,6 @@ -webkit-transform: rotate(90deg); transform: rotate(90deg); } +.collapse-processed .details-title { + color: #333; +} diff --git a/core/themes/seven/css/components/entity-meta.css b/core/themes/seven/css/components/entity-meta.css index 9877ec3..8ed3c02 100644 --- a/core/themes/seven/css/components/entity-meta.css +++ b/core/themes/seven/css/components/entity-meta.css @@ -55,5 +55,7 @@ text-shadow: 0 1px 0 white; } .entity-meta details .summary { - display: none; /* Hide JS summaries. @todo Rethink summaries. */ + color: #666; + text-transform: none; + font-size: 0.85em; }