css/js: improve form field rendering behaviour

This commit is contained in:
Thomas Gelf 2016-03-18 11:59:55 +01:00
parent 6bd8a492b6
commit d71585ad59
2 changed files with 23 additions and 3 deletions

View File

@ -105,7 +105,8 @@ form input[type=submit]:first-of-type {
form p.description { form p.description {
padding: 1em 1em; padding: 1em 1em;
margin: 0; margin: 0;
display: none; font-style: italic;
width: 100%;
} }
input, select, select option, textarea { input, select, select option, textarea {
@ -480,8 +481,8 @@ form dt.active label {
form dd.active { form dd.active {
p.description { p.description {
display: block; color: inherit;
width: 100%; font-style: normal;
} }
} }

View File

@ -95,6 +95,7 @@
{ {
var $input = $(ev.currentTarget); var $input = $(ev.currentTarget);
var $dd = $input.closest('dd'); var $dd = $input.closest('dd');
$dd.find('p.description').show();
if ($dd.attr('id') && $dd.attr('id').match(/button/)) { if ($dd.attr('id') && $dd.attr('id').match(/button/)) {
return; return;
} }
@ -105,6 +106,19 @@
$li.addClass('active'); $li.addClass('active');
$dt.addClass('active'); $dt.addClass('active');
$dd.addClass('active'); $dd.addClass('active');
$dd.find('p.description.fading-out')
.stop(true)
.removeClass('fading-out')
.fadeIn('fast');
$form.find('dd').not($dd)
.find('p.description')
.not('.fading-out')
.addClass('fading-out')
.delay(2000)
.fadeOut('slow', function() {
$(this).removeClass('fading-out').hide()
});
}, },
highlightFormErrors: function($container) highlightFormErrors: function($container)
@ -127,12 +141,17 @@
this.openedFieldsets[$fieldset.attr('id')] = ! $fieldset.hasClass('collapsed'); this.openedFieldsets[$fieldset.attr('id')] = ! $fieldset.hasClass('collapsed');
}, },
hideInactiveFormDescriptions: function($container) {
$container.find('dd').not('.active').find('p.description').hide();
},
rendered: function(ev) { rendered: function(ev) {
var $container = $(ev.currentTarget); var $container = $(ev.currentTarget);
this.restoreContainerFieldsets($container); this.restoreContainerFieldsets($container);
this.backupAllExtensibleSetDefaultValues($container); this.backupAllExtensibleSetDefaultValues($container);
this.putFocusOnFirstObjectTypeElement($container); this.putFocusOnFirstObjectTypeElement($container);
this.highlightFormErrors($container); this.highlightFormErrors($container);
this.hideInactiveFormDescriptions($container);
}, },
restoreContainerFieldsets: function($container) restoreContainerFieldsets: function($container)