diff --git a/core/includes/form.inc b/core/includes/form.inc index ff94eab..f7f2f93 100644 --- a/core/includes/form.inc +++ b/core/includes/form.inc @@ -256,8 +256,8 @@ function drupal_get_form($form_id) { * handler, and is also used in Ajax handlers. * - has_file_element: Internal. If TRUE, there is a file element and Form API * will set the appropriate 'enctype' HTML attribute on the form. - * - groups: Internal. An array containing references to fieldsets to render - * them within vertical tabs. + * - groups: Internal. An array containing references to details elements to + * render them within vertical tabs. * - storage: $form_state['storage'] is not a special key, and no specific * support is provided for it in the Form API. By tradition it was * the location where application-specific data was stored for communication @@ -1706,9 +1706,9 @@ function form_error(&$element, $message = '') { * type, one of the functions in this array is form_process_date(), which adds * the individual 'year', 'month', 'day', etc. child elements. These functions * can also be used to set additional properties or implement special logic - * other than adding child elements: for example, for the 'fieldset' element - * type, one of the functions in this array is form_process_fieldset(), which - * adds the attributes and JavaScript needed to make the fieldset collapsible + * other than adding child elements: for example, for the 'details' element + * type, one of the functions in this array is form_process_details(), which + * adds the attributes and JavaScript needed to make the details collapsible * if the #collapsible property is set. The #process functions are called in * preorder traversal, meaning they are called for the parent element first, * then for the child elements. @@ -2829,7 +2829,7 @@ function theme_details($variables) { element_set_attributes($element, array('id')); _form_set_class($element, array('form-wrapper')); - $output = ''; + $output = ''; if (!empty($element['#title'])) { $output .= '' . $element['#title'] . ''; } @@ -3717,24 +3717,7 @@ function form_validate_machine_name(&$element, &$form_state) { * The processed element. */ function form_process_fieldset(&$element, &$form_state) { - $parents = implode('][', $element['#parents']); - - // Each fieldset forms a new group. The #type 'vertical_tabs' basically only - // injects a new fieldset. - $form_state['groups'][$parents]['#group_exists'] = TRUE; - $element['#groups'] = &$form_state['groups']; - - // Process vertical tabs group member fieldsets. - if (isset($element['#group'])) { - // Add this fieldset to the defined group (by reference). - $group = $element['#group']; - $form_state['groups'][$group][] = &$element; - } - - // Contains form element summary functionalities. - $element['#attached']['library'][] = array('system', 'drupal.form'); - - return $element; + return form_process_details($element, $form_state); } /** @@ -3753,14 +3736,16 @@ function form_process_fieldset(&$element, &$form_state) { function form_process_details(&$element, &$form_state) { $parents = implode('][', $element['#parents']); - // Each detail forms a new group. The #type 'vertical_tabs' basically only - // injects a new details element. + // Each details element forms a new group. The #type 'vertical_tabs' basically + // only injects a new details element. $form_state['groups'][$parents]['#group_exists'] = TRUE; $element['#groups'] = &$form_state['groups']; - // Process vertical tabs group member details. + // Process vertical tabs group member details elements. if (isset($element['#group'])) { - // Add this details to the defined group (by reference). + // REMOVEME: Temporarily force vertical-tab fieldsets into details. + $element['#theme_wrappers'] = array('details'); + // Add this details element to the defined group (by reference). $group = $element['#group']; $form_state['groups'][$group][] = &$element; } @@ -3782,64 +3767,7 @@ function form_process_details(&$element, &$form_state) { * The modified element with all group members. */ function form_pre_render_fieldset($element) { - // The .form-wrapper class is required for #states to treat fieldsets like - // containers. - if (!isset($element['#attributes']['class'])) { - $element['#attributes']['class'] = array(); - } - - // Collapsible fieldsets - if (!empty($element['#collapsible'])) { - $element['#attached']['library'][] = array('system', 'drupal.collapse'); - $element['#attributes']['class'][] = 'collapsible'; - if (!empty($element['#collapsed'])) { - $element['#attributes']['class'][] = 'collapsed'; - } - } - - // Fieldsets may be rendered outside of a Form API context. - if (!isset($element['#parents']) || !isset($element['#groups'])) { - return $element; - } - // Inject group member elements belonging to this group. - $parents = implode('][', $element['#parents']); - $children = element_children($element['#groups'][$parents]); - if (!empty($children)) { - foreach ($children as $key) { - // Break references and indicate that the element should be rendered as - // group member. - $child = (array) $element['#groups'][$parents][$key]; - $child['#group_fieldset'] = TRUE; - // Inject the element as new child element. - $element[] = $child; - - $sort = TRUE; - } - // Re-sort the element's children if we injected group member elements. - if (isset($sort)) { - $element['#sorted'] = FALSE; - } - } - - if (isset($element['#group'])) { - $group = $element['#group']; - // If this element belongs to a group, but the group-holding element does - // not exist, we need to render it (at its original location). - if (!isset($element['#groups'][$group]['#group_exists'])) { - // Intentionally empty to clarify the flow; we simply return $element. - } - // If we injected this element into the group, then we want to render it. - elseif (!empty($element['#group_fieldset'])) { - // Intentionally empty to clarify the flow; we simply return $element. - } - // Otherwise, this element belongs to a group and the group exists, so we do - // not render it. - elseif (element_children($element['#groups'][$group])) { - $element['#printed'] = TRUE; - } - } - - return $element; + return form_pre_render_details($element); } /** @@ -3859,7 +3787,7 @@ function form_pre_render_details($element) { $element['#attributes']['class'] = array(); } - // Collapsible details + // Collapsible details. if (!empty($element['#collapsible'])) { $element['#attached']['library'][] = array('system', 'drupal.collapse'); $element['#attributes']['class'][] = 'collapsible'; @@ -3868,7 +3796,7 @@ function form_pre_render_details($element) { } } - // Fieldsets may be rendered outside of a Form API context. + // Details may be rendered outside of a Form API context. if (!isset($element['#parents']) || !isset($element['#groups'])) { return $element; } @@ -3918,7 +3846,7 @@ function form_pre_render_details($element) { * * @param $element * An associative array containing the properties and children of the - * fieldset. + * details element. * @param $form_state * The $form_state array for the form this vertical tab widget belongs to. * @@ -3926,10 +3854,10 @@ function form_pre_render_details($element) { * The processed element. */ function form_process_vertical_tabs($element, &$form_state) { - // Inject a new fieldset as child, so that form_process_fieldset() processes - // this fieldset like any other fieldset. + // Inject a new details as child, so that form_process_details() processes + // this details element like any other details. $element['group'] = array( - '#type' => 'fieldset', + '#type' => 'details', '#theme_wrappers' => array(), '#parents' => $element['#parents'], ); @@ -3952,12 +3880,12 @@ function form_process_vertical_tabs($element, &$form_state) { } /** - * Returns HTML for an element's children fieldsets as vertical tabs. + * Returns HTML for an element's children details as vertical tabs. * * @param $variables * An associative array containing: * - element: An associative array containing the properties and children of - * the fieldset. Properties used: #children. + * the details element. Properties used: #children. * * @ingroup themeable */ diff --git a/core/includes/theme.inc b/core/includes/theme.inc index cc29a98..f3d6988 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -3042,6 +3042,9 @@ function drupal_common_theme() { 'fieldset' => array( 'render element' => 'element', ), + 'details' => array( + 'render element' => 'element', + ), 'radio' => array( 'render element' => 'element', ), diff --git a/core/misc/collapse.js b/core/misc/collapse.js index 80f5939..a64ce05 100644 --- a/core/misc/collapse.js +++ b/core/misc/collapse.js @@ -3,18 +3,18 @@ "use strict"; /** - * The collapsible fieldset object represents a single collapsible fieldset. + * The collapsible details object represents a single collapsible details element. */ -function CollapsibleFieldset(node, settings) { +function CollapsibleDetails(node, settings) { this.$node = $(node); - this.$node.data('fieldset', this); + this.$node.data('details', this); this.settings = $.extend({ duration:'fast', easing:'linear' }, settings ); - // Expand fieldset if there are errors inside, or if it contains an + // 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 : ''; if (this.$node.find('.error' + anchor).length) { @@ -27,19 +27,19 @@ function CollapsibleFieldset(node, settings) { } /** - * Extend CollapsibleFieldset function. + * Extend CollapsibleDetails function. */ -$.extend(CollapsibleFieldset, { +$.extend(CollapsibleDetails, { /** - * Holds references to instantiated CollapsibleFieldset objects. + * Holds references to instantiated CollapsibleDetails objects. */ - fieldsets: [] + instances: [] }); /** - * Extend CollapsibleFieldset prototype. + * Extend CollapsibleDetails prototype. */ -$.extend(CollapsibleFieldset.prototype, { +$.extend(CollapsibleDetails.prototype, { /** * Flag preventing multiple simultaneous animations. */ @@ -57,17 +57,16 @@ $.extend(CollapsibleFieldset.prototype, { * Initialize and setup legend markup. */ setupLegend: function () { - // Turn the legend into a clickable link, but retain span.fieldset-legend - // for CSS positioning. - var $legend = this.$node.find('> legend .fieldset-legend'); + // Turn the summary into a clickable link. + var $legend = this.$node.find('> summary'); - $('') + $('') .append(this.$node.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide')) .prependTo($legend) .after(' '); // .wrapInner() does not retain bound events. - var $link = $('') + var $link = $('') .prepend($legend.contents()) .appendTo($legend) .click($.proxy(this.onLegendClick, this)); @@ -88,7 +87,7 @@ $.extend(CollapsibleFieldset.prototype, { this.$summary.html(text ? ' (' + text + ')' : ''); }, /** - * Toggle the visibility of a fieldset using smooth animations. + * Toggle the visibility of a details element using smooth animations. */ toggle: function () { // Don't animate multiple times. @@ -96,11 +95,11 @@ $.extend(CollapsibleFieldset.prototype, { return; } if (this.$node.is('.collapsed')) { - var $content = this.$node.find('> .fieldset-wrapper').hide(); + var $content = this.$node.find('> .details-wrapper').hide(); this.$node .removeClass('collapsed') .trigger({ type:'collapsed', value:false }) - .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide')); + .find('> summary span.details-summary-prefix').html(Drupal.t('Hide')); $content.slideDown( $.extend(this.settings, { complete:$.proxy(this.onCompleteSlideDown, this) @@ -109,7 +108,7 @@ $.extend(CollapsibleFieldset.prototype, { } else { this.$node.trigger({ type:'collapsed', value:true }); - this.$node.find('> .fieldset-wrapper').slideUp( + this.$node.find('> .details-wrapper').slideUp( $.extend(this.settings, { complete:$.proxy(this.onCompleteSlideUp, this) }) @@ -117,19 +116,19 @@ $.extend(CollapsibleFieldset.prototype, { } }, /** - * Completed opening fieldset. + * Completed opening details element. */ onCompleteSlideDown: function () { this.$node.trigger('completeSlideDown'); this.animating = false; }, /** - * Completed closing fieldset. + * Completed closing details element. */ onCompleteSlideUp: function () { this.$node .addClass('collapsed') - .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show')); + .find('> summary span.details-summary-prefix').html(Drupal.t('Show')); this.$node.trigger('completeSlideUp'); this.animating = false; } @@ -137,16 +136,16 @@ $.extend(CollapsibleFieldset.prototype, { Drupal.behaviors.collapse = { attach: function (context, settings) { - var $collapsibleFieldsets = $(context).find('fieldset.collapsible').once('collapse'); - if ($collapsibleFieldsets.length) { - for (var i = 0; i < $collapsibleFieldsets.length; i++) { - CollapsibleFieldset.fieldsets.push(new CollapsibleFieldset($collapsibleFieldsets[i], settings.collapsibleFieldset)); + var $collapsibleDetails = $(context).find('details.collapsible').once('collapse'); + if ($collapsibleDetails.length) { + for (var i = 0; i < $collapsibleDetails.length; i++) { + CollapsibleDetails.instances.push(new CollapsibleDetails($collapsibleDetails[i], settings.collapsibleDetails)); } } } }; // Expose constructor in the public space. -Drupal.CollapsibleFieldset = CollapsibleFieldset; +Drupal.CollapsibleDetails = CollapsibleDetails; })(jQuery, Drupal); diff --git a/core/misc/states.js b/core/misc/states.js index afd922c..171bac5 100644 --- a/core/misc/states.js +++ b/core/misc/states.js @@ -538,7 +538,7 @@ $(document).bind('state:checked', function(e) { $(document).bind('state:collapsed', function(e) { if (e.trigger) { if ($(e.target).is('.collapsed') !== e.value) { - $(e.target).find('> legend a').click(); + $(e.target).find('> summary a').click(); } } }); diff --git a/core/misc/vertical-tabs.css b/core/misc/vertical-tabs.css index c946503..1f1fdf6 100644 --- a/core/misc/vertical-tabs.css +++ b/core/misc/vertical-tabs.css @@ -11,12 +11,12 @@ div.vertical-tabs { margin: -1px 0 -1px -15em; /* LTR */ float: left; /* LTR */ } -.vertical-tabs fieldset.vertical-tabs-pane { +.vertical-tabs .vertical-tabs-pane { margin: 0 !important; padding: 0 1em; border: 0; } -fieldset.vertical-tabs-pane > legend { +.vertical-tabs-pane > summary { display: none; } diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js index 303840a..f8c20ed 100644 --- a/core/misc/vertical-tabs.js +++ b/core/misc/vertical-tabs.js @@ -3,13 +3,13 @@ "use strict"; /** - * This script transforms a set of fieldsets into a stack of vertical + * This script transforms a set of details into a stack of vertical * tabs. Another tab pane can be selected by clicking on the respective * tab. * * Each tab may have a summary which can be updated by another - * script. For that to work, each fieldset has an associated - * 'verticalTabCallback' (with jQuery.data() attached to the fieldset), + * script. For that to work, each details element has an associated + * 'verticalTabCallback' (with jQuery.data() attached to the details), * which is called every time the user performs an update to a form * element inside the tab pane. */ @@ -25,9 +25,9 @@ Drupal.behaviors.verticalTabs = { var focusID = $this.find(':hidden.vertical-tabs-active-tab').val(); var tab_focus; - // Check if there are some fieldsets that can be converted to vertical-tabs - var $fieldsets = $this.find('> fieldset'); - if ($fieldsets.length === 0) { + // Check if there are some details that can be converted to vertical-tabs + var $details = $this.find('> details'); + if ($details.length === 0) { return; } @@ -35,12 +35,12 @@ Drupal.behaviors.verticalTabs = { var tab_list = $(''); $this.wrap('
').before(tab_list); - // Transform each fieldset into a tab. - $fieldsets.each(function () { + // Transform each details into a tab. + $details.each(function () { var $this = $(this); var vertical_tab = new Drupal.verticalTab({ - title: $this.find('> legend').text(), - fieldset: $this + title: $this.find('> summary').text(), + details: $this }); tab_list.append(vertical_tab.item); $this @@ -79,7 +79,7 @@ Drupal.behaviors.verticalTabs = { * @param settings * An object with the following keys: * - title: The name of the tab. - * - fieldset: The jQuery object of the fieldset that is the tab pane. + * - details: The jQuery object of the details element that is the tab pane. */ Drupal.verticalTab = function (settings) { var self = this; @@ -96,12 +96,12 @@ Drupal.verticalTab = function (settings) { event.preventDefault(); if (event.keyCode === 13) { self.focus(); - // Set focus on the first input field of the visible fieldset/tab pane. - $("fieldset.vertical-tabs-pane :input:visible:enabled:first").focus(); + // Set focus on the first input field of the visible details/tab pane. + $(".vertical-tabs-pane :input:visible:enabled:first").focus(); } }); - this.fieldset + this.details .bind('summaryUpdated', function () { self.updateSummary(); }) @@ -113,17 +113,17 @@ Drupal.verticalTab.prototype = { * Displays the tab's content pane. */ focus: function () { - this.fieldset - .siblings('fieldset.vertical-tabs-pane') + this.details + .siblings('.vertical-tabs-pane') .each(function () { var tab = $(this).data('verticalTab'); - tab.fieldset.hide(); + tab.details.hide(); tab.item.removeClass('selected'); }) .end() .show() .siblings(':hidden.vertical-tabs-active-tab') - .val(this.fieldset.attr('id')); + .val(this.details.attr('id')); this.item.addClass('selected'); // Mark the active tab for screen readers. $('#active-vertical-tab').remove(); @@ -134,7 +134,7 @@ Drupal.verticalTab.prototype = { * Updates the tab's summary. */ updateSummary: function () { - this.summary.html(this.fieldset.drupalGetSummary()); + this.summary.html(this.details.drupalGetSummary()); }, /** @@ -148,8 +148,8 @@ Drupal.verticalTab.prototype = { // method. this.item.parent().children('.vertical-tab-button').removeClass('first') .filter(':visible:first').addClass('first'); - // Display the fieldset. - this.fieldset.removeClass('vertical-tab-hidden').show(); + // Display the details element. + this.details.removeClass('vertical-tab-hidden').show(); // Focus this tab. this.focus(); return this; @@ -166,10 +166,10 @@ Drupal.verticalTab.prototype = { // method. this.item.parent().children('.vertical-tab-button').removeClass('first') .filter(':visible:first').addClass('first'); - // Hide the fieldset. - this.fieldset.addClass('vertical-tab-hidden').hide(); + // Hide the details element. + this.details.addClass('vertical-tab-hidden').hide(); // Focus the first visible tab (if there is one). - var $firstTab = this.fieldset.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first'); + var $firstTab = this.details.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first'); if ($firstTab.length) { $firstTab.data('verticalTab').focus(); } diff --git a/core/modules/book/book.js b/core/modules/book/book.js index 301c67f..d1c54c8 100644 --- a/core/modules/book/book.js +++ b/core/modules/book/book.js @@ -8,9 +8,9 @@ "use strict"; -Drupal.behaviors.bookFieldsetSummaries = { +Drupal.behaviors.bookDetailsSummaries = { attach: function (context) { - $(context).find('fieldset.book-outline-form').drupalSetSummary(function (context) { + $(context).find('.book-outline-form').drupalSetSummary(function (context) { var $select = $(context).find('.book-title-select'); var val = $select.val(); diff --git a/core/modules/comment/comment-node-form.js b/core/modules/comment/comment-node-form.js index 0249d96..67800da 100644 --- a/core/modules/comment/comment-node-form.js +++ b/core/modules/comment/comment-node-form.js @@ -7,15 +7,15 @@ "use strict"; -Drupal.behaviors.commentFieldsetSummaries = { +Drupal.behaviors.commentDetailsSummaries = { attach: function (context) { var $context = $(context); - $context.find('fieldset.comment-node-settings-form').drupalSetSummary(function (context) { + $context.find('.comment-node-settings-form').drupalSetSummary(function (context) { return Drupal.checkPlain($(context).find('.form-item-comment input:checked').next('label').text()); }); // Provide the summary for the node type form. - $context.find('fieldset.comment-node-type-settings-form').drupalSetSummary(function(context) { + $context.find('.comment-node-type-settings-form').drupalSetSummary(function(context) { var $context = $(context); var vals = []; diff --git a/core/modules/filter/filter.admin.js b/core/modules/filter/filter.admin.js index b2d7c6e..f55159a 100644 --- a/core/modules/filter/filter.admin.js +++ b/core/modules/filter/filter.admin.js @@ -38,7 +38,7 @@ Drupal.behaviors.filterStatus = { // Attach summary for configurable filters (only for screen-readers). if (tab) { - tab.fieldset.drupalSetSummary(function (tabContext) { + tab.details.drupalSetSummary(function (tabContext) { return $checkbox.is(':checked') ? Drupal.t('Enabled') : Drupal.t('Disabled'); }); } diff --git a/core/modules/locale/locale.admin.css b/core/modules/locale/locale.admin.css index 4b252b6..e5ccd61 100644 --- a/core/modules/locale/locale.admin.css +++ b/core/modules/locale/locale.admin.css @@ -37,7 +37,7 @@ position: absolute; } -#locale-translate-filter-form fieldset.form-wrapper { +#locale-translate-filter-form .form-wrapper { margin-bottom:0; } diff --git a/core/modules/menu/menu.admin.js b/core/modules/menu/menu.admin.js index d6a228a..530c8b6 100644 --- a/core/modules/menu/menu.admin.js +++ b/core/modules/menu/menu.admin.js @@ -13,10 +13,10 @@ Drupal.behaviors.menuChangeParentItems = { * Function to set the options of the menu parent item dropdown. */ Drupal.menuUpdateParentList = function () { - var $menuFieldset = $('#edit-menu'); + var $menu = $('#edit-menu'); var values = []; - $menuFieldset.find('input:checked').each(function () { + $menu.find('input:checked').each(function () { // Get the names of all checked menus. values.push(Drupal.checkPlain($.trim($(this).val()))); }); diff --git a/core/modules/menu/menu.js b/core/modules/menu/menu.js index 1990374..77baddb 100644 --- a/core/modules/menu/menu.js +++ b/core/modules/menu/menu.js @@ -2,9 +2,9 @@ "use strict"; -Drupal.behaviors.menuFieldsetSummaries = { +Drupal.behaviors.menuDetailsSummaries = { attach: function (context) { - $(context).find('fieldset.menu-link-form').drupalSetSummary(function (context) { + $(context).find('.menu-link-form').drupalSetSummary(function (context) { var $context = $(context); if ($context.find('.form-item-menu-enabled input').is(':checked')) { return Drupal.checkPlain($context.find('.form-item-menu-link-title input').val()); @@ -22,7 +22,7 @@ Drupal.behaviors.menuFieldsetSummaries = { Drupal.behaviors.menuLinkAutomaticTitle = { attach: function (context) { var $context = $(context); - $context.find('fieldset.menu-link-form').each(function () { + $context.find('.menu-link-form').each(function () { var $this = $(this); // Try to find menu settings widget elements as well as a 'title' field in // the form, but play nicely with user permissions and form alterations. @@ -53,7 +53,7 @@ Drupal.behaviors.menuLinkAutomaticTitle = { $link_title.val(''); $link_title.removeData('menuLinkAutomaticTitleOveridden'); } - $checkbox.closest('fieldset.vertical-tabs-pane').trigger('summaryUpdated'); + $checkbox.closest('.vertical-tabs-pane').trigger('summaryUpdated'); $checkbox.trigger('formUpdated'); }); // Take over any title change. diff --git a/core/modules/node/content_types.js b/core/modules/node/content_types.js index d2a63b6..f85ba7b 100644 --- a/core/modules/node/content_types.js +++ b/core/modules/node/content_types.js @@ -6,12 +6,12 @@ Drupal.behaviors.contentTypes = { attach: function (context) { var $context = $(context); // Provide the vertical tab summaries. - $context.find('fieldset#edit-submission').drupalSetSummary(function(context) { + $context.find('#edit-submission').drupalSetSummary(function(context) { var vals = []; vals.push(Drupal.checkPlain($(context).find('#edit-title-label').val()) || Drupal.t('Requires a title')); return vals.join(', '); }); - $context.find('fieldset#edit-workflow').drupalSetSummary(function(context) { + $context.find('#edit-workflow').drupalSetSummary(function(context) { var vals = []; $(context).find("input[name^='node_options']:checked").parent().each(function() { vals.push(Drupal.checkPlain($(this).text())); @@ -21,7 +21,7 @@ Drupal.behaviors.contentTypes = { } return vals.join(', '); }); - $('fieldset#edit-language', context).drupalSetSummary(function(context) { + $('#edit-language', context).drupalSetSummary(function(context) { var vals = []; vals.push($(".form-item-language-configuration-langcode select option:selected", context).text()) @@ -32,7 +32,7 @@ Drupal.behaviors.contentTypes = { return vals.join(', '); }); - $context.find('fieldset#edit-display').drupalSetSummary(function(context) { + $context.find('#edit-display').drupalSetSummary(function(context) { var vals = []; var $context = $(context); $context.find('input:checked').next('label').each(function() { diff --git a/core/modules/node/node.js b/core/modules/node/node.js index 0899d3c..d4c5dc7 100644 --- a/core/modules/node/node.js +++ b/core/modules/node/node.js @@ -2,10 +2,10 @@ "use strict"; -Drupal.behaviors.nodeFieldsetSummaries = { +Drupal.behaviors.nodeDetailsSummaries = { attach: function (context) { var $context = $(context); - $context.find('fieldset.node-form-revision-information').drupalSetSummary(function (context) { + $context.find('.node-form-revision-information').drupalSetSummary(function (context) { var $context = $(context); var revisionCheckbox = $context.find('.form-item-revision input'); @@ -20,7 +20,7 @@ Drupal.behaviors.nodeFieldsetSummaries = { return Drupal.t('No revision'); }); - $context.find('fieldset.node-form-author').drupalSetSummary(function (context) { + $context.find('.node-form-author').drupalSetSummary(function (context) { var $context = $(context); var name = $context.find('.form-item-name input').val() || Drupal.settings.anonymous, date = $context.find('.form-item-date input').val(); @@ -29,7 +29,7 @@ Drupal.behaviors.nodeFieldsetSummaries = { Drupal.t('By @name', { '@name': name }); }); - $context.find('fieldset.node-form-options').drupalSetSummary(function (context) { + $context.find('.node-form-options').drupalSetSummary(function (context) { var $context = $(context); var vals = []; diff --git a/core/modules/path/path.js b/core/modules/path/path.js index 41b6e8f..7349d12 100644 --- a/core/modules/path/path.js +++ b/core/modules/path/path.js @@ -6,9 +6,9 @@ "use strict"; -Drupal.behaviors.pathFieldsetSummaries = { +Drupal.behaviors.pathDetailsSummaries = { attach: function (context) { - $(context).find('fieldset.path-form').drupalSetSummary(function (context) { + $(context).find('.path-form').drupalSetSummary(function (context) { var path = $('.form-item-path-alias input').val(); return path ? diff --git a/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php b/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php index 8abc198..9f7f42a 100644 --- a/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php +++ b/core/modules/simpletest/lib/Drupal/simpletest/Tests/SimpleTestTest.php @@ -276,10 +276,10 @@ function assertAssertion($message, $type, $status, $file, $function) { function getTestResults() { $results = array(); if ($this->parse()) { - if ($fieldset = $this->getResultFieldSet()) { + if ($fieldset = $this->getResultFieldSet()) { // @todo // Code assumes this is the only test in group. $results['summary'] = $this->asText($fieldset->div->div[1]); - $results['name'] = $this->asText($fieldset->legend); + $results['name'] = $this->asText($fieldset->legend); // @todo $results['assertions'] = array(); $tbody = $fieldset->div->table->tbody; @@ -303,7 +303,7 @@ function getTestResults() { * Get the fieldset containing the results for group this test is in. */ function getResultFieldSet() { - $fieldsets = $this->xpath('//fieldset'); + $fieldsets = $this->xpath('//fieldset'); // @todo $info = $this->getInfo(); foreach ($fieldsets as $fieldset) { if ($this->asText($fieldset->legend) == $info['name']) { diff --git a/core/modules/simpletest/simpletest.pages.inc b/core/modules/simpletest/simpletest.pages.inc index 337a62c..8300289 100644 --- a/core/modules/simpletest/simpletest.pages.inc +++ b/core/modules/simpletest/simpletest.pages.inc @@ -437,7 +437,7 @@ function simpletest_result_status_image($status) { function simpletest_settings_form($form, &$form_state) { $config = config('simpletest.settings'); $form['general'] = array( - '#type' => 'fieldset', + '#type' => 'details', '#title' => t('General'), ); $form['general']['simpletest_clear_results'] = array( @@ -454,7 +454,7 @@ function simpletest_settings_form($form, &$form_state) { ); $form['httpauth'] = array( - '#type' => 'fieldset', + '#type' => 'details', '#title' => t('HTTP authentication'), '#description' => t('HTTP auth settings to be used by the SimpleTest browser during testing. Useful when the site requires basic HTTP authentication.'), '#collapsible' => TRUE, diff --git a/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php b/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php index adc35ba..67e0200 100644 --- a/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php +++ b/core/modules/system/lib/Drupal/system/Tests/Common/RenderTest.php @@ -246,7 +246,7 @@ function testDrupalRenderFormElements() { $this->assertRenderedElement($element, '//fieldset/legend[contains(., :title)]', array( ':title' => $element['#title'], )); - + // @todo $element = array( '#type' => 'fieldset', '#title' => $this->randomName(), diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc index 0440771..c55289c 100644 --- a/core/modules/system/system.admin.inc +++ b/core/modules/system/system.admin.inc @@ -1609,7 +1609,7 @@ function system_performance_settings($form, &$form_state) { ); $form['caching'] = array( - '#type' => 'details', + '#type' => 'fieldset', '#title' => t('Caching'), ); diff --git a/core/modules/system/system.base.css b/core/modules/system/system.base.css index c50b085..ede2339 100644 --- a/core/modules/system/system.base.css +++ b/core/modules/system/system.base.css @@ -38,23 +38,23 @@ } /** - * Collapsible fieldsets. + * Collapsible details. * * @see collapse.js */ -.js fieldset.collapsed { +.js details.collapsed { border-bottom-width: 0; border-left-width: 0; border-right-width: 0; height: 1em; } -.js fieldset.collapsed .fieldset-wrapper { +.js details.collapsed .details-wrapper { display: none; } -fieldset.collapsible { +details.collapsible { position: relative; } -fieldset.collapsible .fieldset-legend { +details.collapsible summary { display: block; } @@ -192,8 +192,8 @@ tr .ajax-progress-throbber .throbber { .container-inline label { display: inline; } -/* Fieldset contents always need to be rendered as block. */ -.container-inline .fieldset-wrapper { +/* Details contents always need to be rendered as block. */ +.container-inline .details-wrapper { display: block; } @@ -216,7 +216,7 @@ tr .ajax-progress-throbber .throbber { * Hide elements from all users. * * Used for elements which should not be immediately displayed to any user. An - * example would be a collapsible fieldset that will be expanded with a click + * example would be collapsible details that will be expanded with a click * from a user. The effect of this class can be toggled with the jQuery show() * and hide() functions. */ diff --git a/core/modules/system/system.theme-rtl.css b/core/modules/system/system.theme-rtl.css index 03c93f3..27cc759 100644 --- a/core/modules/system/system.theme-rtl.css +++ b/core/modules/system/system.theme-rtl.css @@ -39,14 +39,14 @@ th { } /** - * Collapsible fieldsets. + * Collapsible details. */ -.js fieldset.collapsible > legend .fieldset-legend { +.js details.collapsible > summary a { background-position: 98% 75%; padding-left: 0; padding-right: 15px; } -.js fieldset.collapsed > legend .fieldset-legend { +.js details.collapsed > summary a { background-image: url(../../misc/menu-collapsed-rtl.png); background-position: 98% 50%; } diff --git a/core/modules/system/system.theme.css b/core/modules/system/system.theme.css index 343a4f8..dffde40 100644 --- a/core/modules/system/system.theme.css +++ b/core/modules/system/system.theme.css @@ -7,6 +7,7 @@ /** * HTML elements. */ +details, fieldset { margin-bottom: 1em; padding: 0.5em; @@ -179,19 +180,19 @@ abbr.form-required, abbr.tabledrag-changed, abbr.ajax-changed { } /** - * Collapsible fieldsets. + * Collapsible details. * * @see collapse.js */ -.js fieldset.collapsible > legend .fieldset-legend a { +.js details.collapsible > summary a { background: url(../../misc/menu-expanded.png) 5px 65% no-repeat; /* LTR */ padding-left: 15px; /* LTR */ } -.js fieldset.collapsed > legend .fieldset-legend a { +.js details.collapsed > summary a { background-image: url(../../misc/menu-collapsed.png); /* LTR */ background-position: 5px 50%; /* LTR */ } -.fieldset-legend span.summary { +summary { color: #999; font-size: 0.9em; margin-left: 0.5em; diff --git a/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php b/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php index 9c518d7..399c62e 100644 --- a/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php +++ b/core/modules/user/lib/Drupal/user/Tests/UserRegistrationTest.php @@ -162,9 +162,9 @@ function testRegistrationDefaultValues() { variable_set('date_default_timezone', 'Europe/Brussels'); // Check that the account information fieldset's options are not displayed - // is a fieldset if there is not more than one fieldset in the form. + // as a fieldset if there is not more than one fieldset in the form. $this->drupalGet('user/register'); - $this->assertNoRaw('
Account information', 'Account settings fieldset was hidden.'); + $this->assertNoRaw('
Account information', 'Account settings fieldset was hidden.'); // @todo $edit = array(); $edit['name'] = $name = $this->randomName(); diff --git a/core/modules/user/user.css b/core/modules/user/user.css index 866ee40..29b5aae 100644 --- a/core/modules/user/user.css +++ b/core/modules/user/user.css @@ -9,7 +9,7 @@ #permissions tr.even .form-item { white-space: normal; } -#user-admin-settings fieldset .fieldset-description { +#user-admin-settings .details-description { font-size: 0.85em; padding-bottom: .5em; } diff --git a/core/themes/bartik/css/style-rtl.css b/core/themes/bartik/css/style-rtl.css index 90638eb..fdc3b98 100644 --- a/core/themes/bartik/css/style-rtl.css +++ b/core/themes/bartik/css/style-rtl.css @@ -210,7 +210,7 @@ ul.action-links li a { /* -------------- Form Elements ------------- */ -.fieldset-legend span.summary { +summary { margin-left: 0; } #user-profile-form input#edit-submit { diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css index 6f4cb14..3811ccd 100644 --- a/core/themes/bartik/css/style.css +++ b/core/themes/bartik/css/style.css @@ -1113,6 +1113,7 @@ a.button:active { /* -------------- Form Elements ------------- */ +details, fieldset { background: #ffffff; border: 1px solid #cccccc; @@ -1123,9 +1124,11 @@ fieldset { top: 12px; /* Offsets the negative margin of legends */ border-radius: 4px; } +.details-wrapper, .fieldset-wrapper { margin-top: 25px; } +.node-form .vertical-tabs .details-wrapper, .node-form .vertical-tabs .fieldset-wrapper { margin-top: 0; } @@ -1148,11 +1151,11 @@ fieldset { .filter-guidelines { padding: 0 1.5em 0 0.5em; } -fieldset.collapsed { +details.collapsed { background: transparent; border-radius: 0; } -fieldset legend { +summary { background: #dbdbdb; border: 1px solid #ccc; border-bottom: none; @@ -1171,21 +1174,21 @@ fieldset legend { border-top-left-radius: 4px; border-top-right-radius: 4px; } -fieldset.collapsed legend { +details.collapsed summary { border-radius: 4px; } -fieldset legend a { +details summary a { color: #3b3b3b; } -fieldset legend a:hover, -fieldset legend a:focus, -fieldset legend a:active { +details summary a:hover, +details summary a:focus, +details summary a:active { color: #000; } -fieldset .fieldset-wrapper { +details .details-wrapper { padding: 0 10px; } -fieldset .fieldset-description { +details .details-description { margin-top: 5px; margin-bottom: 1em; line-height: 1.4; @@ -1340,7 +1343,7 @@ input.form-button-disabled:active, border-top-left-radius: 4px; border-top-right-radius: 4px; } -.comment-form fieldset.filter-wrapper .fieldset-wrapper, +.comment-form details.filter-wrapper .details-wrapper, .comment-form .text-format-wrapper .form-item { margin-top: 0; margin-bottom: 0; @@ -1352,7 +1355,7 @@ input.form-button-disabled:active, .filter-wrapper .form-select { min-width: 120px; } -.comment-form fieldset.filter-wrapper .tips { +.comment-form details.filter-wrapper .tips { font-size: 0.786em; } #comment-body-add-more-wrapper .form-type-textarea label { @@ -1371,7 +1374,7 @@ div.password-suggestions { background: #222222; opacity: 0.7; } -div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane { +div.vertical-tabs .vertical-tabs-panes .vertical-tabs-pane { padding: 1em; } #forum .name { @@ -1491,10 +1494,10 @@ div.add-or-remove-shortcuts { margin: 0 5px; } /* Fix spacing when Seven is used in the overlay. */ -#system-theme-settings fieldset { +#system-theme-settings details { padding: 0; } -#system-theme-settings fieldset .fieldset-legend { +#system-theme-settings details summary { margin-top: 0; } /* Configuration. */ diff --git a/core/themes/seven/ie.css b/core/themes/seven/ie.css index d1a71ce..b94d381 100644 --- a/core/themes/seven/ie.css +++ b/core/themes/seven/ie.css @@ -1,5 +1,5 @@ /* IE renders absolute positioned legend where fieldset content starts. */ -fieldset .fieldset-legend { +fieldset .fieldset-legend { /* @todo */ left: 0; top: 0; } diff --git a/core/themes/seven/reset.css b/core/themes/seven/reset.css index de53f28..d83ac2d 100644 --- a/core/themes/seven/reset.css +++ b/core/themes/seven/reset.css @@ -56,6 +56,7 @@ dd, ol, ul, li, +details, fieldset, form, input, @@ -63,6 +64,7 @@ select, textarea, label, legend, +summary, table, caption, tbody, diff --git a/core/themes/seven/style-rtl.css b/core/themes/seven/style-rtl.css index 788aa36..6daef82 100644 --- a/core/themes/seven/style-rtl.css +++ b/core/themes/seven/style-rtl.css @@ -112,15 +112,18 @@ tr td:last-child { } /** - * Fieldsets. + * Details and fieldsets. */ +details, fieldset { padding: 2.5em 0 0 0; } +details summary, fieldset .fieldset-legend { padding-right: 15px; right: 0; } +details .details-wrapper, fieldset .fieldset-wrapper { padding: 0 15px 13px 13px; } diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css index 7b8ae1b..545c0ee 100644 --- a/core/themes/seven/style.css +++ b/core/themes/seven/style.css @@ -20,6 +20,7 @@ hr { height: 1px; background: #cccccc; } +summary, legend { font-weight: bold; } @@ -521,33 +522,38 @@ tr td:last-child { * 'padding-left'/'padding-right' applied on a fieldset and inherit the * positioning even to absolute positioned elements within; we therefore have * to apply all padding to the inner .fieldset-wrapper instead. + * + * @todo This incredible hack is obsolete. Yay! :) */ +details, fieldset { border: 1px solid #ccc; padding: 2.5em 0 0 0; /* LTR */ position: relative; margin: 1em 0; } +details summary, fieldset .fieldset-legend { margin-top: 0.5em; padding-left: 15px; /* LTR */ position: absolute; text-transform: uppercase; } +details .details-wrapper, fieldset .fieldset-wrapper { padding: 0 13px 13px 15px; /* LTR */ } -fieldset.collapsed { +details.collapsed { background-color: transparent; } -.js fieldset.collapsed { +.js details.collapsed { border-width: 1px; height: auto; } -fieldset fieldset { +details details { background-color: #fff; } -fieldset fieldset fieldset { +details details details { background-color: #f8f8f8; } @@ -602,7 +608,7 @@ div.teaser-checkbox .form-item, border-top: 0; padding: 10px 2px; } -.filter-wrapper .fieldset-wrapper { +.filter-wrapper .details-wrapper { padding: 0 6px; } .filter-wrapper .form-item, @@ -788,7 +794,7 @@ ul.action-links a { margin-bottom: 2px; width: 100%; } - fieldset .fieldset-legend { + details summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/core/themes/seven/vertical-tabs.css b/core/themes/seven/vertical-tabs.css index e89f3f5..6932b9a 100644 --- a/core/themes/seven/vertical-tabs.css +++ b/core/themes/seven/vertical-tabs.css @@ -8,7 +8,7 @@ div.vertical-tabs { margin: 10px 0; position: relative; } -fieldset.vertical-tabs-pane { +.vertical-tabs-pane { border: 0; padding: 0; margin: 0; @@ -69,10 +69,10 @@ div.vertical-tabs .vertical-tabs-panes { margin: 0 0 0 265px; /* LTR */ padding: 10px 15px 10px 0; /* LTR */ } -fieldset.vertical-tabs-pane > legend { +.vertical-tabs-pane > summary { display: none; } -.vertical-tabs-pane .fieldset-wrapper > div:first-child { +.vertical-tabs-pane .details-wrapper > div:first-child { padding-top: 5px; }