Commit 7818e2d4 authored by Dries's avatar Dries

- Patch #676800 by casey, sun, james.elliott, cosmicdreams, seutje, Jacine:...

- Patch #676800 by casey, sun, james.elliott, cosmicdreams, seutje, Jacine: made fieldsets work on all browser.
parent e824801b
......@@ -1947,8 +1947,10 @@ function theme_fieldset($variables) {
$output = '<fieldset' . drupal_attributes($element['#attributes']) . '>';
if (!empty($element['#title'])) {
$output .= '<legend>' . $element['#title'] . '</legend>';
// Always wrap fieldset legends in a SPAN for CSS positioning.
$output .= '<legend><span class="fieldset-legend">' . $element['#title'] . '</span></legend>';
}
$output .= '<div class="fieldset-wrapper">';
if (!empty($element['#description'])) {
$output .= '<div class="fieldset-description">' . $element['#description'] . '</div>';
}
......@@ -1956,6 +1958,7 @@ function theme_fieldset($variables) {
if (isset($element['#value'])) {
$output .= $element['#value'];
}
$output .= '</div>';
$output .= "</fieldset>\n";
return $output;
}
......
......@@ -5,40 +5,33 @@
* Toggle the visibility of a fieldset using smooth animations.
*/
Drupal.toggleFieldset = function (fieldset) {
if ($(fieldset).is('.collapsed')) {
// Action div containers are processed separately because of a IE bug
// that alters the default submit button behavior.
var content = $('> div:not(.action)', fieldset);
$(fieldset)
var $fieldset = $(fieldset);
if ($fieldset.is('.collapsed')) {
var $content = $('> .fieldset-wrapper', fieldset).hide();
$fieldset
.removeClass('collapsed')
.trigger({ type: 'collapsed', value: false })
.find('> legend > a > span.element-invisible')
.empty()
.append(Drupal.t('Hide'));
content.hide();
content.slideDown({
.find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide'));
$content.slideDown({
duration: 'fast',
easing: 'linear',
complete: function () {
Drupal.collapseScrollIntoView(this.parentNode);
this.parentNode.animating = false;
$('div.action', fieldset).show();
Drupal.collapseScrollIntoView(fieldset);
fieldset.animating = false;
},
step: function () {
// Scroll the fieldset into view.
Drupal.collapseScrollIntoView(this.parentNode);
Drupal.collapseScrollIntoView(fieldset);
}
});
}
else {
$('div.action', fieldset).hide();
$(fieldset).trigger({ type: 'collapsed', value: true });
var content = $('> div:not(.action)', fieldset).slideUp('fast', function () {
$(this.parentNode).addClass('collapsed')
.find('> legend > a > span.element-invisible')
.empty()
.append(Drupal.t('Show'));
this.parentNode.animating = false;
$fieldset.trigger({ type: 'collapsed', value: true });
$('> .fieldset-wrapper', fieldset).slideUp('fast', function () {
$fieldset
.addClass('collapsed')
.find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show'));
fieldset.animating = false;
});
}
};
......@@ -63,45 +56,45 @@ Drupal.collapseScrollIntoView = function (node) {
Drupal.behaviors.collapse = {
attach: function (context, settings) {
$('fieldset.collapsible > legend', context).once('collapse', function () {
var fieldset = $(this.parentNode);
$('fieldset.collapsible', context).once('collapse', function () {
var $fieldset = $(this);
// Expand if there are errors inside.
if ($('input.error, textarea.error, select.error', fieldset).size() > 0) {
fieldset.removeClass('collapsed');
if ($('.error', $fieldset).length) {
$fieldset.removeClass('collapsed');
}
var summary = $('<span class="summary"></span>');
fieldset.
$fieldset.
bind('summaryUpdated', function () {
var text = $.trim(fieldset.getSummary());
var text = $.trim($fieldset.getSummary());
summary.html(text ? ' (' + text + ')' : '');
})
.trigger('summaryUpdated');
// Turn the legend into a clickable link and wrap the contents of the
// fieldset in a div for easier animation.
var text = this.innerHTML;
$(this).empty()
.append($('<a href="#">' + text + '</a>')
.click(function () {
var fieldset = $(this).parents('fieldset:first')[0];
// Don't animate multiple times.
if (!fieldset.animating) {
fieldset.animating = true;
Drupal.toggleFieldset(fieldset);
}
return false;
})
.prepend($('<span class="element-invisible"></span>')
.append(fieldset.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
.after(' ')
)
)
.append(summary)
.after(
$('<div class="fieldset-wrapper"></div>')
.append(fieldset.children(':not(legend):not(.action)'))
);
// Turn the legend into a clickable link, but retain span.fieldset-legend
// for CSS positioning.
var $legend = $('> legend .fieldset-legend', this);
$('<span class="fieldset-legend-prefix element-invisible"></span>')
.append($fieldset.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
.prependTo($legend)
.after(' ');
// .wrapInner() does not retain bound events.
var $link = $('<a class="fieldset-title" href="#"></a>')
.prepend($legend.contents())
.appendTo($legend)
.click(function () {
var fieldset = $fieldset.get(0);
// Don't animate multiple times.
if (!fieldset.animating) {
fieldset.animating = true;
Drupal.toggleFieldset(fieldset);
}
return false;
});
$legend.append(summary);
});
}
};
......
......@@ -39,8 +39,7 @@ function comment_admin_overview($form, &$form_state, $arg) {
$form['options'] = array(
'#type' => 'fieldset',
'#title' => t('Update options'),
'#prefix' => '<div class="container-inline">',
'#suffix' => '</div>',
'#attributes' => array('class' => array('container-inline')),
);
$options = array();
foreach (comment_operations($arg == 'approval' ? 'publish' : 'unpublish') as $key => $value) {
......
......@@ -388,8 +388,7 @@ function node_admin_nodes() {
$form['options'] = array(
'#type' => 'fieldset',
'#title' => t('Update options'),
'#prefix' => '<div class="container-inline">',
'#suffix' => '</div>',
'#attributes' => array('class' => array('container-inline')),
'#access' => $admin_access,
);
$options = array();
......
......@@ -2611,7 +2611,7 @@ function node_search_validate($form, &$form_state) {
$keys .= ' "' . str_replace('"', ' ', $form_state['values']['phrase']) . '"';
}
if (!empty($keys)) {
form_set_value($form['basic']['inline']['processed_keys'], trim($keys), $form_state);
form_set_value($form['basic']['processed_keys'], trim($keys), $form_state);
}
}
......
......@@ -231,23 +231,23 @@ function path_admin_delete_confirm_submit($form, &$form_state) {
function path_admin_filter_form($form, &$form_state, $keys = '') {
$form['#attributes'] = array('class' => array('search-form'));
$form['basic'] = array('#type' => 'fieldset',
'#title' => t('Filter aliases')
'#title' => t('Filter aliases'),
'#attributes' => array('class' => array('container-inline')),
);
$form['basic']['inline'] = array('#prefix' => '<div class="container-inline">', '#suffix' => '</div>');
$form['basic']['inline']['filter'] = array(
$form['basic']['filter'] = array(
'#type' => 'textfield',
'#title' => '',
'#default_value' => $keys,
'#maxlength' => 128,
'#size' => 25,
);
$form['basic']['inline']['submit'] = array(
$form['basic']['submit'] = array(
'#type' => 'submit',
'#value' => t('Filter'),
'#submit' => array('path_admin_filter_form_submit_filter'),
);
if ($keys) {
$form['basic']['inline']['reset'] = array(
$form['basic']['reset'] = array(
'#type' => 'submit',
'#value' => t('Reset'),
'#submit' => array('path_admin_filter_form_submit_reset'),
......
......@@ -901,19 +901,18 @@ function search_form($form, &$form_state, $action = '', $keys = '', $type = NULL
$form['#action'] = $action;
$form['#attributes']['class'][] = 'search-form';
$form['module'] = array('#type' => 'value', '#value' => $type);
$form['basic'] = array('#type' => 'item', '#title' => $prompt, '#id' => 'edit-keys');
$form['basic']['inline'] = array('#prefix' => '<div class="container-inline">', '#suffix' => '</div>');
$form['basic']['inline']['keys'] = array(
$form['basic'] = array('#type' => 'container', '#attributes' => array('class' => array('container-inline')));
$form['basic']['keys'] = array(
'#type' => 'textfield',
'#title' => '',
'#title' => $prompt,
'#default_value' => $keys,
'#size' => $prompt ? 40 : 20,
'#maxlength' => 255,
);
// processed_keys is used to coordinate keyword passing between other forms
// that hook into the basic search form.
$form['basic']['inline']['processed_keys'] = array('#type' => 'value', '#value' => array());
$form['basic']['inline']['submit'] = array('#type' => 'submit', '#value' => t('Search'));
$form['basic']['processed_keys'] = array('#type' => 'value', '#value' => array());
$form['basic']['submit'] = array('#type' => 'submit', '#value' => t('Search'));
return $form;
}
......
......@@ -122,7 +122,7 @@ function template_preprocess_search_result(&$variables) {
* value for the basic search form.
*/
function search_form_validate($form, &$form_state) {
form_set_value($form['basic']['inline']['processed_keys'], trim($form_state['values']['keys']), $form_state);
form_set_value($form['basic']['processed_keys'], trim($form_state['values']['keys']), $form_state);
}
/**
......
......@@ -220,11 +220,11 @@ class SimpleTestFunctionalTest extends DrupalWebTestCase {
if ($this->parse()) {
if ($fieldset = $this->getResultFieldSet()) {
// Code assumes this is the only test in group.
$results['summary'] = $this->asText($fieldset->div[1]);
$results['summary'] = $this->asText($fieldset->div->div[1]);
$results['name'] = $this->asText($fieldset->legend);
$results['assertions'] = array();
$tbody = $fieldset->table->tbody;
$tbody = $fieldset->div->table->tbody;
foreach ($tbody->tr as $row) {
$assertion = array();
$assertion['message'] = $this->asText($row->td[0]);
......@@ -243,8 +243,6 @@ class SimpleTestFunctionalTest extends DrupalWebTestCase {
/**
* Get the fieldset containing the results for group this test is in.
*
* @return fieldset containing the results for group this test is in.
*/
function getResultFieldSet() {
$fieldsets = $this->xpath('//fieldset');
......
......@@ -14,12 +14,12 @@ html.js input.throbbing {
/**
* Collapsing fieldsets
*/
html.js fieldset.collapsible legend a {
html.js fieldset.collapsible .fieldset-legend {
padding-left: 0;
padding-right: 15px;
background-position: 98% 75%;
}
html.js fieldset.collapsed legend a {
html.js fieldset.collapsed .fieldset-legend {
background-image: url(../../misc/menu-collapsed-rtl.png);
background-position: 98% 50%;
}
......
......@@ -46,35 +46,28 @@ html.js fieldset.collapsed {
margin-bottom: 0;
height: 1em;
}
html.js fieldset.collapsed * {
html.js fieldset.collapsed .fieldset-wrapper {
display: none;
}
html.js fieldset.collapsed legend, html.js fieldset.collapsed legend a span.element-invisible {
html.js fieldset.collapsible .fieldset-legend {
display: block;
overflow: hidden;
}
html.js fieldset.collapsible legend a {
display: inline;
padding-left: 15px; /* LTR */
background: url(../../misc/menu-expanded.png) 5px 75% no-repeat; /* LTR */
}
html.js fieldset.collapsed .fieldset-legend {
background-image: url(../../misc/menu-collapsed.png); /* LTR */
background-position: 5px 50%; /* LTR */
}
html.js fieldset.collapsible legend span.summary {
display: inline;
font-size: 0.9em;
color: #999;
margin-left: 0.5em;
}
html.js fieldset.collapsed legend a {
background-image: url(../../misc/menu-collapsed.png); /* LTR */
background-position: 5px 50%; /* LTR */
}
/* Note: IE-only fix due to '* html' (breaks Konqueror otherwise). */
* html.js fieldset.collapsed legend,
* html.js fieldset.collapsed legend *,
/* IE6: Fix due to '* html' (breaks Konqueror otherwise). */
* html.js fieldset.collapsed table * {
display: inline;
}
/* For Safari 2 to prevent collapsible fieldsets containing tables from dissapearing due to tableheader.js. */
/* Safari 2: Tables in collapsible fieldsets disappear due to tableheader.js. */
html.js fieldset.collapsible {
position: relative;
}
......@@ -267,9 +260,14 @@ div.password-confirm {
/**
* Inline items (need to override above)
*/
.container-inline div, .container-inline label {
.container-inline div,
.container-inline label {
display: inline;
}
/* Fieldset contents always need to be rendered as block. */
.container-inline .fieldset-wrapper {
display: block;
}
.nowrap {
white-space: nowrap;
......
......@@ -2900,8 +2900,7 @@ function system_actions_manage_form($form, &$form_state, $options = array()) {
$form['parent'] = array(
'#type' => 'fieldset',
'#title' => t('Create an advanced action'),
'#prefix' => '<div class="container-inline">',
'#suffix' => '</div>',
'#attributes' => array('class' => array('container-inline')),
);
$form['parent']['action'] = array(
'#type' => 'select',
......
......@@ -160,8 +160,8 @@ function trigger_assign_form($form, $form_state, $module, $hook, $label) {
}
$form[$hook]['parent'] = array(
'#prefix' => "<div class='container-inline'>",
'#suffix' => '</div>',
'#type' => 'container',
'#attributes' => array('class' => array('container-inline')),
);
// List possible actions that may be assigned.
if (count($options) != 0) {
......
......@@ -168,8 +168,7 @@ function user_admin_account() {
$form['options'] = array(
'#type' => 'fieldset',
'#title' => t('Update options'),
'#prefix' => '<div class="container-inline">',
'#suffix' => '</div>',
'#attributes' => array('class' => array('container-inline')),
);
$options = array();
foreach (module_invoke_all('user_operations') as $operation => $array) {
......
......@@ -143,7 +143,7 @@ class UserRegistrationTestCase extends DrupalWebTestCase {
variable_set('user_default_timezone', DRUPAL_USER_TIMEZONE_SELECT);
$this->drupalLogout();
$this->drupalGet('user/register');
$this->assertRaw('<fieldset id="edit-account"><legend>Account information</legend>', t('Account settings fieldset was not hidden.'));
$this->assertText(t('Account information'), t('Account settings fieldset was not hidden.'));
}
}
......
......@@ -227,13 +227,13 @@ ul.links li, ul.inline li {
margin-right: 25px;
}
html.js fieldset.collapsible legend a {
html.js fieldset.collapsible .fieldset-legend {
padding-left: 0;
padding-right: 2em;
background: url("images/menu-expanded.gif") no-repeat 100% 50%;
}
html.js fieldset.collapsed legend a {
html.js fieldset.collapsed .fieldset-legend {
background: url("images/menu-collapsed-rtl.gif") no-repeat 100% 50%;
}
......
......@@ -892,38 +892,28 @@ fieldset {
background-position: 0 0;
}
*:first-child+html fieldset > .description, *:first-child+html fieldset .fieldset-wrapper .description {
*:first-child+html fieldset .fieldset-wrapper .fieldset-description {
padding-top: 1em;
}
fieldset legend {
/* Fix disappearing legend in FFox */
display: block;
}
*:first-child+html fieldset legend, *:first-child+html fieldset.collapsed legend {
display: inline;
}
html.js fieldset.collapsed {
background: transparent;
padding-top: 0;
padding-bottom: .6em;
}
html.js fieldset.collapsible legend a {
html.js fieldset.collapsible .fieldset-legend {
padding-left: 2em; /* LTR */
background: url(images/menu-expanded.gif) no-repeat 0% 50%; /* LTR */
}
html.js fieldset.collapsed .fieldset-legend {
background: url(images/menu-collapsed.gif) no-repeat 0% 50%; /* LTR */
}
html.js fieldset.collapsible legend span.summary {
color: #898989;
}
html.js fieldset.collapsed legend a {
background: url(images/menu-collapsed.gif) no-repeat 0% 50%; /* LTR */
}
/**
* Vertical tabs.
*/
......
......@@ -4,6 +4,7 @@ ul.menu li,
ul.menu li a,
ul.links li,
ul.links li a,
.action-links,
#page {
height: 1%;
}
......
......@@ -214,7 +214,6 @@ body {
* to sneak the clearfix class into Drupal's markup.
* From http://www.positioniseverything.net/easyclearing.html
*/
div.form-item:after,
ul.links:after,
div.admin-panel .body:after,
.clearfix:after {
......@@ -232,7 +231,7 @@ ul.inline:after {
clear: none;
}
div.form-item,
.form-item,
ul.links,
div.admin-panel .body,
.clearfix {
......@@ -240,14 +239,14 @@ div.admin-panel .body,
}
/* Hides from IE-mac \*/
* html div.form-item,
* html .form-item,
* html ul.links,
* html div.admin-panel .body,
* html .clearfix {
height: 1%;
}
div.form-item,
.form-item,
ul.links,
div.admin-panel .body,
.clearfix {
......
......@@ -603,88 +603,100 @@ table tr.selected td {
}
/**
* Forms.
* Fieldsets.
*
* Fieldset legends are displayed like containers in Seven. However, several
* browsers do not support styling of LEGEND elements. To achieve the desired
* styling:
* - All fieldsets use 'position: relative'.
* - All legend labels are wrapped in a single span.fieldset-legend that uses
* 'position: absolute', which means that the LEGEND element itself is not
* rendered by browsers.
* - Due to using 'position: absolute', collapsed fieldsets do not have a
* height; the fieldset requires a 'padding-top' to make the absolute
* positioned .fieldset-legend appear as though it would have a height.
* - Various browsers are positioning the legend differently if there is a
* '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.
*/
/* Fieldsets & Form items */
fieldset {
border: 1px solid #ccc;
padding: 30px 13px 13px 14px;
margin: 0 0 10px;
padding: 2.5em 0 0 0;
position: relative;
margin: 1em 0;
}
fieldset legend span,
fieldset legend a {
fieldset .fieldset-legend {
margin-top: 0.5em;
padding-left: 15px;
position: absolute;
margin-top: 9px;
text-transform: uppercase;
}
fieldset legend a span {
position: relative;
margin-top: 0;
fieldset .fieldset-wrapper {
padding: 0 13px 13px 15px;
}
fieldset.collapsed {
background: transparent;
background-color: transparent;
}
html.js fieldset.collapsed legend,
html.js fieldset.collapsed legend * {
display: block;
}
html.js fieldset.collapsed {
border-width: 1px;
height: auto;
margin-bottom: 10px;
padding: 13px;
}
fieldset fieldset {
background: #fff;
background-color: #fff;
}
fieldset fieldset fieldset {
background: #f8f8f8;
background-color: #f8f8f8;
}
html.js fieldset.collapsible .fieldset-wrapper {
overflow: visible;
}
div.form-item {
/**
* Form elements.
*/
.form-item {
padding: 9px 0;
margin: 0 0 10px;
}
.filter-wrapper div.form-item,
div.teaser-checkbox div.form-item,
div.form-item div.form-item,
fieldset div.form-item {
.filter-wrapper .form-item,
div.teaser-checkbox .form-item,
.form-item .form-item {
padding: 5px 0;
margin: 0;
border: 0;
}
.form-type-checkbox {
padding: 0;