diff --git a/core/misc/collapse.js b/core/misc/collapse.js index 1ad89f7..e0058c3 100644 --- a/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,13 +129,13 @@ * Polyfill HTML5 details element. * * @type {Drupal~behavior} + * + * @prop {Drupal~behaviorAttach} + * Process all `
` elements on the page. */ 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 3cdf08c..d569e62 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/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; }