MDL-38691 form: Styling for show more/less toggle

This commit is contained in:
Frederic Massart 2013-03-26 17:18:47 +08:00
parent 83284dc962
commit c55cd6ac64
2 changed files with 22 additions and 2 deletions

View File

@ -24,7 +24,13 @@ YUI.add('moodle-form-showadvanced', function(Y) {
},
CSS = {
SHOW : 'show',
MORELESSTOGGLER : 'morelesstoggler'
MORELESSACTIONS: 'moreless-actions',
MORELESSTOGGLER : 'moreless-toggler',
SHOWLESS : 'moreless-less'
},
WRAPPERS = {
FITEM : '<div class="fitem"></div>',
FELEMENT : '<div class="felement"></div>'
},
ATTRS = {};
@ -73,15 +79,24 @@ YUI.add('moodle-form-showadvanced', function(Y) {
fieldset.get('id') + "'", 'debug');
return;
}
var morelesslink = Y.Node.create('<a href="#"></a>');
morelesslink.addClass(CSS.MORELESSTOGGLER);
if (statuselement.get('value') === '0') {
morelesslink.setHTML(M.str.form.showmore);
} else {
morelesslink.setHTML(M.str.form.showless);
morelesslink.addClass(CSS.SHOWLESS);
fieldset.all(SELECTORS.DIVFITEMADVANCED).addClass(CSS.SHOW);
}
fieldset.one(SELECTORS.DIVFCONTAINER).append(morelesslink);
var fitem = Y.Node.create(WRAPPERS.FITEM);
fitem.addClass(CSS.MORELESSACTIONS);
var felement = Y.Node.create(WRAPPERS.FELEMENT);
felement.append(morelesslink);
fitem.append(felement);
fieldset.one(SELECTORS.DIVFCONTAINER).append(fitem);
},
switch_state : function(e) {
e.preventDefault();
@ -93,9 +108,11 @@ YUI.add('moodle-form-showadvanced', function(Y) {
// Invert it and change the link text.
if (statuselement.get('value') === '0') {
statuselement.set('value', 1);
this.addClass(CSS.SHOWLESS);
this.setHTML(M.util.get_string('showless', 'form'));
} else {
statuselement.set('value', 0);
this.removeClass(CSS.SHOWLESS);
this.setHTML(M.util.get_string('showmore', 'form'));
}
}

View File

@ -270,6 +270,9 @@ a.skip:active {position: static;display: block;}
.mform fieldset.fdate_selector label {display:inline;float: none;width: auto;}
.mform .ftags label.accesshide {display: block;position: static;}
.mform .ftags select {margin-bottom: 0.7em;min-width: 22em;}
.mform .moreless-toggler {background: url([[pix:t/more]]) left center no-repeat; padding-left: 16px;}
.dir-rtl .moreless-toggler {padding-left: 0; padding-right: 16px; background-position: right center; }
.mform .moreless-less {background-image: url([[pix:t/less]]);}
.mform .helplink img { margin: 0 0 0 .45em; padding: 0;}
.dir-rtl .mform .helplink img { margin: 0 .45em 0 0; padding: 0;}
.mform legend .helplink img { margin-right: .2em; }