L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-38776 JavaScript: Migrate moodle-form-showadvanced to Shifter

Browse Source
This commit is contained in:
Andrew Nicols
2013-12-04 22:51:26 +08:00
parent 9b37cd72a2
commit 81cb52bb9a
7 changed files with 466 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/form/yui/build/moodle-form-showadvanced/moodle-form-showadvanced-debug.js
Vendored
+151
View File
@@ -0,0 +1,151 @@
YUI.add('moodle-form-showadvanced', function (Y, NAME) {
/**
* Provides the form showadvanced class.
*
* @module moodle-form-showadvanced
*/
/**
* A class to help show and hide advanced form content.
*
* @class M.form.showadvanced
* @constructor
* @extends Base
*/
function SHOWADVANCED() {
SHOWADVANCED.superclass.constructor.apply(this, arguments);
}
var SELECTORS = {
FIELDSETCONTAINSADVANCED: 'fieldset.containsadvancedelements',
DIVFITEMADVANCED: 'div.fitem.advanced',
DIVFCONTAINER: 'div.fcontainer',
MORELESSLINK: 'fieldset.containsadvancedelements .moreless-toggler'
},
CSS = {
SHOW: 'show',
MORELESSACTIONS: 'moreless-actions',
MORELESSTOGGLER: 'moreless-toggler',
SHOWLESS: 'moreless-less'
},
WRAPPERS = {
FITEM: '<div class="fitem"></div>',
FELEMENT: '<div class="felement"></div>'
},
ATTRS = {};
/**
* The form ID attribute definition.
*
* @attribute formid
* @type String
* @default null
* @writeOnce
*/
ATTRS.formid = {
value: null
};
Y.extend(SHOWADVANCED, Y.Base, {
/**
* The initializer for the showadvanced instance.
*
* @method initializer
* @protected
*/
initializer: function() {
var form = Y.one('#'+this.get('formid')),
fieldlist = form.all(SELECTORS.FIELDSETCONTAINSADVANCED);
// Look through fieldset divs that contain advanced elements.
fieldlist.each(this.processFieldset, this);
// Subscribe more/less links to click event.
form.delegate('click', this.switchState, SELECTORS.MORELESSLINK);
form.delegate('key', this.switchState, 'down:enter,32', SELECTORS.MORELESSLINK);
},
/**
* Process the supplied fieldset to add appropriate links, and ARIA roles.
*
* @method processFieldset
* @param {Node} fieldset The Node relating to the fieldset to add collapsing to.
* @chainable
*/
processFieldset: function(fieldset) {
var statuselement = Y.one('input[name=mform_showmore_' + fieldset.get('id') + ']');
if (!statuselement) {
Y.log("M.form.showadvanced::processFieldset was called on an fieldset without a status field: '" +
fieldset.get('id') + "'", 'debug', 'moodle-form-showadvanced');
return this;
}
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);
}
// Get list of IDs controlled by this button to set the aria-controls attribute.
var idlist = [];
fieldset.all(SELECTORS.DIVFITEMADVANCED).each(function(node) {
idlist[idlist.length] = node.generateID();
});
morelesslink.setAttribute('role', 'button');
morelesslink.setAttribute('aria-controls', idlist.join(' '));
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);
return this;
},
/**
* Toggle the state for the fieldset that was clicked.
*
* @method switchState
* @param {EventFacade} e
*/
switchState: function(e) {
e.preventDefault();
var fieldset = this.ancestor(SELECTORS.FIELDSETCONTAINSADVANCED);
// Toggle collapsed class.
fieldset.all(SELECTORS.DIVFITEMADVANCED).toggleClass(CSS.SHOW);
// Get corresponding hidden variable.
var statuselement = Y.one('input[name=mform_showmore_' + fieldset.get('id') + ']');
// 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'));
}
}
}, {
NAME: 'moodle-form-showadvanced',
ATTRS: ATTRS
});
M.form = M.form || {};
M.form.showadvanced = M.form.showadvanced || function(params) {
return new SHOWADVANCED(params);
};
}, '@VERSION@', {"requires": ["node", "base", "selector-css3"]});
lib/form/yui/build/moodle-form-showadvanced/moodle-form-showadvanced-min.js
Vendored
+1
View File
@@ -0,0 +1 @@
YUI.add("moodle-form-showadvanced",function(e,t){function n(){n.superclass.constructor.apply(this,arguments)}var r={FIELDSETCONTAINSADVANCED:"fieldset.containsadvancedelements",DIVFITEMADVANCED:"div.fitem.advanced",DIVFCONTAINER:"div.fcontainer",MORELESSLINK:"fieldset.containsadvancedelements .moreless-toggler"},i={SHOW:"show",MORELESSACTIONS:"moreless-actions",MORELESSTOGGLER:"moreless-toggler",SHOWLESS:"moreless-less"},s={FITEM:'<div class="fitem"></div>',FELEMENT:'<div class="felement"></div>'},o={};o.formid={value:null},e.extend(n,e.Base,{initializer:function(){var t=e.one("#"+this.get("formid")),n=t.all(r.FIELDSETCONTAINSADVANCED);n.each(this.processFieldset,this),t.delegate("click",this.switchState,r.MORELESSLINK),t.delegate("key",this.switchState,"down:enter,32",r.MORELESSLINK)},processFieldset:function(t){var n=e.one("input[name=mform_showmore_"+t.get("id")+"]");if(!n)return this;var o=e.Node.create('<a href="#"></a>');o.addClass(i.MORELESSTOGGLER),n.get("value")==="0"?o.setHTML(M.str.form.showmore):(o.setHTML(M.str.form.showless),o.addClass(i.SHOWLESS),t.all(r.DIVFITEMADVANCED).addClass(i.SHOW));var u=[];t.all(r.DIVFITEMADVANCED).each(function(e){u[u.length]=e.generateID()}),o.setAttribute("role","button"),o.setAttribute("aria-controls",u.join(" "));var a=e.Node.create(s.FITEM);a.addClass(i.MORELESSACTIONS);var f=e.Node.create(s.FELEMENT);return f.append(o),a.append(f),t.one(r.DIVFCONTAINER).append(a),this},switchState:function(t){t.preventDefault();var n=this.ancestor(r.FIELDSETCONTAINSADVANCED);n.all(r.DIVFITEMADVANCED).toggleClass(i.SHOW);var s=e.one("input[name=mform_showmore_"+n.get("id")+"]");s.get("value")==="0"?(s.set("value",1),this.addClass(i.SHOWLESS),this.setHTML(M.util.get_string("showless","form"))):(s.set("value",0),this.removeClass(i.SHOWLESS),this.setHTML(M.util.get_string("showmore","form")))}},{NAME:"moodle-form-showadvanced",ATTRS:o}),M.form=M.form||{},M.form.showadvanced=M.form.showadvanced||function(e){return new n(e)}},"@VERSION@",{requires:["node","base","selector-css3"]});
lib/form/yui/build/moodle-form-showadvanced/moodle-form-showadvanced.js
Vendored
+149
View File
@@ -0,0 +1,149 @@
YUI.add('moodle-form-showadvanced', function (Y, NAME) {
/**
* Provides the form showadvanced class.
*
* @module moodle-form-showadvanced
*/
/**
* A class to help show and hide advanced form content.
*
* @class M.form.showadvanced
* @constructor
* @extends Base
*/
function SHOWADVANCED() {
SHOWADVANCED.superclass.constructor.apply(this, arguments);
}
var SELECTORS = {
FIELDSETCONTAINSADVANCED: 'fieldset.containsadvancedelements',
DIVFITEMADVANCED: 'div.fitem.advanced',
DIVFCONTAINER: 'div.fcontainer',
MORELESSLINK: 'fieldset.containsadvancedelements .moreless-toggler'
},
CSS = {
SHOW: 'show',
MORELESSACTIONS: 'moreless-actions',
MORELESSTOGGLER: 'moreless-toggler',
SHOWLESS: 'moreless-less'
},
WRAPPERS = {
FITEM: '<div class="fitem"></div>',
FELEMENT: '<div class="felement"></div>'
},
ATTRS = {};
/**
* The form ID attribute definition.
*
* @attribute formid
* @type String
* @default null
* @writeOnce
*/
ATTRS.formid = {
value: null
};
Y.extend(SHOWADVANCED, Y.Base, {
/**
* The initializer for the showadvanced instance.
*
* @method initializer
* @protected
*/
initializer: function() {
var form = Y.one('#'+this.get('formid')),
fieldlist = form.all(SELECTORS.FIELDSETCONTAINSADVANCED);
// Look through fieldset divs that contain advanced elements.
fieldlist.each(this.processFieldset, this);
// Subscribe more/less links to click event.
form.delegate('click', this.switchState, SELECTORS.MORELESSLINK);
form.delegate('key', this.switchState, 'down:enter,32', SELECTORS.MORELESSLINK);
},
/**
* Process the supplied fieldset to add appropriate links, and ARIA roles.
*
* @method processFieldset
* @param {Node} fieldset The Node relating to the fieldset to add collapsing to.
* @chainable
*/
processFieldset: function(fieldset) {
var statuselement = Y.one('input[name=mform_showmore_' + fieldset.get('id') + ']');
if (!statuselement) {
return this;
}
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);
}
// Get list of IDs controlled by this button to set the aria-controls attribute.
var idlist = [];
fieldset.all(SELECTORS.DIVFITEMADVANCED).each(function(node) {
idlist[idlist.length] = node.generateID();
});
morelesslink.setAttribute('role', 'button');
morelesslink.setAttribute('aria-controls', idlist.join(' '));
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);
return this;
},
/**
* Toggle the state for the fieldset that was clicked.
*
* @method switchState
* @param {EventFacade} e
*/
switchState: function(e) {
e.preventDefault();
var fieldset = this.ancestor(SELECTORS.FIELDSETCONTAINSADVANCED);
// Toggle collapsed class.
fieldset.all(SELECTORS.DIVFITEMADVANCED).toggleClass(CSS.SHOW);
// Get corresponding hidden variable.
var statuselement = Y.one('input[name=mform_showmore_' + fieldset.get('id') + ']');
// 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'));
}
}
}, {
NAME: 'moodle-form-showadvanced',
ATTRS: ATTRS
});
M.form = M.form || {};
M.form.showadvanced = M.form.showadvanced || function(params) {
return new SHOWADVANCED(params);
};
}, '@VERSION@', {"requires": ["node", "base", "selector-css3"]});
lib/form/yui/showadvanced/showadvanced.js
Vendored
-136
View File
@@ -1,136 +0,0 @@
YUI.add('moodle-form-showadvanced', function(Y) {
/**
* Provides the form showadvanced class.
*
* @module moodle-form-showadvanced
*/
/**
* A class for a showadvanced.
*
* @param {Object} config Object literal specifying showadvanced configuration properties.
* @class M.form.showadvanced
* @constructor
* @extends Y.Base
*/
function SHOWADVANCED(config) {
SHOWADVANCED.superclass.constructor.apply(this, [config]);
}
var SELECTORS = {
FIELDSETCONTAINSADVANCED : 'fieldset.containsadvancedelements',
DIVFITEMADVANCED : 'div.fitem.advanced',
DIVFCONTAINER : 'div.fcontainer',
MORELESSLINK : 'fieldset.containsadvancedelements .moreless-toggler'
},
CSS = {
SHOW : 'show',
MORELESSACTIONS: 'moreless-actions',
MORELESSTOGGLER : 'moreless-toggler',
SHOWLESS : 'moreless-less'
},
WRAPPERS = {
FITEM : '<div class="fitem"></div>',
FELEMENT : '<div class="felement"></div>'
},
ATTRS = {};
/**
* Static property provides a string to identify the JavaScript class.
*
* @property NAME
* @type String
* @static
*/
SHOWADVANCED.NAME = 'moodle-form-showadvanced';
/**
* Static property used to define the default attribute configuration for the Showadvanced.
*
* @property ATTRS
* @type String
* @static
*/
SHOWADVANCED.ATTRS = ATTRS;
/**
* The form ID attribute definition.
*
* @attribute formid
* @type String
* @default ''
* @writeOnce
*/
ATTRS.formid = {
value : null
};
Y.extend(SHOWADVANCED, Y.Base, {
initializer : function() {
var form = Y.one('#'+this.get('formid')),
fieldlist = form.all(SELECTORS.FIELDSETCONTAINSADVANCED);
// Look through fieldset divs that contain advanced elements.
fieldlist.each(this.process_fieldset, this);
// Subscribe more/less links to click event.
form.delegate('click', this.switch_state, SELECTORS.MORELESSLINK);
form.delegate('key', this.switch_state, 'down:enter,32', SELECTORS.MORELESSLINK);
},
process_fieldset : function(fieldset) {
var statuselement = Y.one('input[name=mform_showmore_'+fieldset.get('id')+']');
if (!statuselement) {
Y.log("M.form.showadvanced::process_fieldset was called on an fieldset without a status field: '" +
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);
}
// Get list of IDs controlled by this button to set the aria-controls attribute.
var idlist = [];
fieldset.all(SELECTORS.DIVFITEMADVANCED).each(function(node) {
idlist[idlist.length] = node.generateID();
});
morelesslink.setAttribute('role', 'button');
morelesslink.setAttribute('aria-controls', idlist.join(' '));
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();
var fieldset = this.ancestor(SELECTORS.FIELDSETCONTAINSADVANCED);
// Toggle collapsed class.
fieldset.all(SELECTORS.DIVFITEMADVANCED).toggleClass(CSS.SHOW);
// Get corresponding hidden variable.
var statuselement = new Y.one('input[name=mform_showmore_'+fieldset.get('id')+']');
// 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'));
}
}
});
M.form = M.form || {};
M.form.showadvanced = M.form.showadvanced || function(params) {
return new SHOWADVANCED(params);
};
}, '@VERSION@', {requires:['base', 'node', 'selector-css3']});
lib/form/yui/src/showadvanced/build.json
+10
View File
@@ -0,0 +1,10 @@
{
"name": "moodle-form-showadvanced",
"builds": {
"moodle-form-showadvanced": {
"jsfiles": [
"showadvanced.js"
]
}
}
}
lib/form/yui/src/showadvanced/js/showadvanced.js
Vendored
+146
View File
@@ -0,0 +1,146 @@
/**
* Provides the form showadvanced class.
*
* @module moodle-form-showadvanced
*/
/**
* A class to help show and hide advanced form content.
*
* @class M.form.showadvanced
* @constructor
* @extends Base
*/
function SHOWADVANCED() {
SHOWADVANCED.superclass.constructor.apply(this, arguments);
}
var SELECTORS = {
FIELDSETCONTAINSADVANCED: 'fieldset.containsadvancedelements',
DIVFITEMADVANCED: 'div.fitem.advanced',
DIVFCONTAINER: 'div.fcontainer',
MORELESSLINK: 'fieldset.containsadvancedelements .moreless-toggler'
},
CSS = {
SHOW: 'show',
MORELESSACTIONS: 'moreless-actions',
MORELESSTOGGLER: 'moreless-toggler',
SHOWLESS: 'moreless-less'
},
WRAPPERS = {
FITEM: '<div class="fitem"></div>',
FELEMENT: '<div class="felement"></div>'
},
ATTRS = {};
/**
* The form ID attribute definition.
*
* @attribute formid
* @type String
* @default null
* @writeOnce
*/
ATTRS.formid = {
value: null
};
Y.extend(SHOWADVANCED, Y.Base, {
/**
* The initializer for the showadvanced instance.
*
* @method initializer
* @protected
*/
initializer: function() {
var form = Y.one('#'+this.get('formid')),
fieldlist = form.all(SELECTORS.FIELDSETCONTAINSADVANCED);
// Look through fieldset divs that contain advanced elements.
fieldlist.each(this.processFieldset, this);
// Subscribe more/less links to click event.
form.delegate('click', this.switchState, SELECTORS.MORELESSLINK);
form.delegate('key', this.switchState, 'down:enter,32', SELECTORS.MORELESSLINK);
},
/**
* Process the supplied fieldset to add appropriate links, and ARIA roles.
*
* @method processFieldset
* @param {Node} fieldset The Node relating to the fieldset to add collapsing to.
* @chainable
*/
processFieldset: function(fieldset) {
var statuselement = Y.one('input[name=mform_showmore_' + fieldset.get('id') + ']');
if (!statuselement) {
Y.log("M.form.showadvanced::processFieldset was called on an fieldset without a status field: '" +
fieldset.get('id') + "'", 'debug', 'moodle-form-showadvanced');
return this;
}
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);
}
// Get list of IDs controlled by this button to set the aria-controls attribute.
var idlist = [];
fieldset.all(SELECTORS.DIVFITEMADVANCED).each(function(node) {
idlist[idlist.length] = node.generateID();
});
morelesslink.setAttribute('role', 'button');
morelesslink.setAttribute('aria-controls', idlist.join(' '));
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);
return this;
},
/**
* Toggle the state for the fieldset that was clicked.
*
* @method switchState
* @param {EventFacade} e
*/
switchState: function(e) {
e.preventDefault();
var fieldset = this.ancestor(SELECTORS.FIELDSETCONTAINSADVANCED);
// Toggle collapsed class.
fieldset.all(SELECTORS.DIVFITEMADVANCED).toggleClass(CSS.SHOW);
// Get corresponding hidden variable.
var statuselement = Y.one('input[name=mform_showmore_' + fieldset.get('id') + ']');
// 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'));
}
}
}, {
NAME: 'moodle-form-showadvanced',
ATTRS: ATTRS
});
M.form = M.form || {};
M.form.showadvanced = M.form.showadvanced || function(params) {
return new SHOWADVANCED(params);
};
lib/form/yui/src/showadvanced/meta/showadvanced.json
+9
View File
@@ -0,0 +1,9 @@
{
"moodle-form-showadvanced": {
"requires": [
"node",
"base",
"selector-css3"
]
}
}