mirror of
https://github.com/moodle/moodle.git
synced 2025-03-14 12:40:01 +01:00
Merge branch 'MDL-55211-master' of git://github.com/damyon/moodle
This commit is contained in:
Adrian Greeve
commit
ceea116626
1
lib/form/amd/build/showadvanced.min.js
vendored
Normal file
1
lib/form/amd/build/showadvanced.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
define(["jquery","core/log","core/str","core/notification"],function(a,b,c,d){var e={FIELDSETCONTAINSADVANCED:"fieldset.containsadvancedelements",DIVFITEMADVANCED:"div.fitem.advanced",DIVFCONTAINER:"div.fcontainer",MORELESSLINK:"fieldset.containsadvancedelements .moreless-toggler"},f={SHOW:"show",MORELESSACTIONS:"moreless-actions",MORELESSTOGGLER:"moreless-toggler",SHOWLESS:"moreless-less"},g={FITEM:'<div class="fitem"></div>',FELEMENT:'<div class="felement"></div>'},h="showadvancedid-",i=0,j=function(b){this.id=b;var c=a(document.getElementById(b));this.enhanceForm(c)};return j.prototype.id="",j.prototype.enhanceForm=function(b){var c=b.find(e.FIELDSETCONTAINSADVANCED);return c.each(function(b,c){this.enhanceFieldset(a(c))}.bind(this)),b.on("click",e.MORELESSLINK,this.switchState),b.on("keydown",e.MORELESSLINK,function(a){return 13!=a.which&&32!=a.which||this.switchState(a)}.bind(this)),this},j.prototype.generateId=function(a){var b=a.prop("id");return"undefined"==typeof b&&(b=h+i++,a.prop("id",b)),b},j.prototype.enhanceFieldset=function(h){var i=a("input[name=mform_showmore_"+h.prop("id")+"]");return i.length?(c.get_strings([{key:"showmore",component:"core_form"},{key:"showless",component:"core_form"}]).then(function(b){var c=b[0],d=b[1],j=a('<a href="#"></a>');j.addClass(f.MORELESSTOGGLER),"0"===i.val()?j.html(c):(j.html(d),j.addClass(f.SHOWLESS),h.find(e.DIVFITEMADVANCED).addClass(f.SHOW));var k=[];h.find(e.DIVFITEMADVANCED).each(function(b,c){k[k.length]=this.generateId(a(c))}.bind(this)),j.attr("role","button"),j.attr("aria-controls",k.join(" "));var l=a(g.FITEM);l.addClass(f.MORELESSACTIONS);var m=a(g.FELEMENT);return m.append(j),l.append(m),h.find(e.DIVFCONTAINER).append(l),!0}.bind(this)).fail(d.exception),this):(b.debug("M.form.showadvanced::processFieldset was called on an fieldset without a status field: '"+h.prop("id")+"'"),this)},j.prototype.switchState=function(b){return b.preventDefault(),c.get_strings([{key:"showmore",component:"core_form"},{key:"showless",component:"core_form"}]).then(function(c){var d=c[0],g=c[1],h=a(b.target).closest(e.FIELDSETCONTAINSADVANCED);h.find(e.DIVFITEMADVANCED).toggleClass(f.SHOW);var i=a("input[name=mform_showmore_"+h.prop("id")+"]");return"0"===i.val()?(i.val(1),a(b.target).addClass(f.SHOWLESS),a(b.target).html(g)):(i.val(0),a(b.target).removeClass(f.SHOWLESS),a(b.target).html(d)),!0}).fail(d.exception),this},{init:function(a){return new j(a)}}});
|
||||
219
lib/form/amd/src/showadvanced.js
Normal file
219
lib/form/amd/src/showadvanced.js
Normal file
@ -0,0 +1,219 @@
|
||||
// This file is part of Moodle - http://moodle.org/
|
||||
//
|
||||
// Moodle is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// Moodle is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
/**
|
||||
* A class to help show and hide advanced form content.
|
||||
*
|
||||
* @module core_form/showadvanced
|
||||
* @class showadvanced
|
||||
* @package core_form
|
||||
* @copyright 2016 Damyon Wiese <damyon@moodle.com>
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
*/
|
||||
define(['jquery', 'core/log', 'core/str', 'core/notification'], function($, Log, Strings, Notification) {
|
||||
|
||||
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>'
|
||||
},
|
||||
IDPREFIX = 'showadvancedid-';
|
||||
|
||||
/** @type {Integer} uniqIdSeed Auto incrementing number used to generate ids. */
|
||||
var uniqIdSeed = 0;
|
||||
|
||||
/**
|
||||
* ShowAdvanced behaviour class.
|
||||
* @param {String} id The id of the form.
|
||||
*/
|
||||
var ShowAdvanced = function(id) {
|
||||
this.id = id;
|
||||
|
||||
var form = $(document.getElementById(id));
|
||||
this.enhanceForm(form);
|
||||
};
|
||||
|
||||
/** @type {String} id The form id to enhance. */
|
||||
ShowAdvanced.prototype.id = '';
|
||||
|
||||
/**
|
||||
* @method enhanceForm
|
||||
* @param {JQuery} form JQuery selector representing the form
|
||||
* @return {ShowAdvanced}
|
||||
*/
|
||||
ShowAdvanced.prototype.enhanceForm = function(form) {
|
||||
var fieldsets = form.find(SELECTORS.FIELDSETCONTAINSADVANCED);
|
||||
|
||||
// Enhance each fieldset in the form matching the selector.
|
||||
fieldsets.each(function(index, item) {
|
||||
this.enhanceFieldset($(item));
|
||||
}.bind(this));
|
||||
|
||||
// Attach some event listeners.
|
||||
// Subscribe more/less links to click event.
|
||||
form.on('click', SELECTORS.MORELESSLINK, this.switchState);
|
||||
|
||||
// Subscribe to key events but filter for space or enter.
|
||||
form.on('keydown', SELECTORS.MORELESSLINK, function(e) {
|
||||
// Enter or space.
|
||||
if (e.which == 13 || e.which == 32) {
|
||||
return this.switchState(e);
|
||||
}
|
||||
return true;
|
||||
}.bind(this));
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Generates a uniq id for the dom element it's called on unless the element already has an id.
|
||||
* The id is set on the dom node before being returned.
|
||||
*
|
||||
* @method generateId
|
||||
* @param {JQuery} node JQuery selector representing a single DOM Node.
|
||||
* @return {String}
|
||||
*/
|
||||
ShowAdvanced.prototype.generateId = function(node) {
|
||||
var id = node.prop('id');
|
||||
if (typeof id === 'undefined') {
|
||||
id = IDPREFIX + (uniqIdSeed++);
|
||||
node.prop('id', id);
|
||||
}
|
||||
return id;
|
||||
};
|
||||
|
||||
/**
|
||||
* @method enhanceFieldset
|
||||
* @param {JQuery} fieldset JQuery selector representing a fieldset
|
||||
* @return {ShowAdvanced}
|
||||
*/
|
||||
ShowAdvanced.prototype.enhanceFieldset = function(fieldset) {
|
||||
var statuselement = $('input[name=mform_showmore_' + fieldset.prop('id') + ']');
|
||||
if (!statuselement.length) {
|
||||
Log.debug("M.form.showadvanced::processFieldset was called on an fieldset without a status field: '" +
|
||||
fieldset.prop('id') + "'");
|
||||
return this;
|
||||
}
|
||||
|
||||
// Fetch some strings.
|
||||
Strings.get_strings([{
|
||||
key: 'showmore',
|
||||
component: 'core_form'
|
||||
}, {
|
||||
key: 'showless',
|
||||
component: 'core_form'
|
||||
}]).then(function(results) {
|
||||
var showmore = results[0],
|
||||
showless = results[1];
|
||||
|
||||
// Generate more/less links.
|
||||
var morelesslink = $('<a href="#"></a>');
|
||||
morelesslink.addClass(CSS.MORELESSTOGGLER);
|
||||
if (statuselement.val() === '0') {
|
||||
morelesslink.html(showmore);
|
||||
} else {
|
||||
morelesslink.html(showless);
|
||||
morelesslink.addClass(CSS.SHOWLESS);
|
||||
fieldset.find(SELECTORS.DIVFITEMADVANCED).addClass(CSS.SHOW);
|
||||
}
|
||||
// Build a list of advanced fieldsets.
|
||||
var idlist = [];
|
||||
fieldset.find(SELECTORS.DIVFITEMADVANCED).each(function(index, node) {
|
||||
idlist[idlist.length] = this.generateId($(node));
|
||||
}.bind(this));
|
||||
|
||||
// Set aria attributes.
|
||||
morelesslink.attr('role', 'button');
|
||||
morelesslink.attr('aria-controls', idlist.join(' '));
|
||||
|
||||
// Add elements to the DOM.
|
||||
var fitem = $(WRAPPERS.FITEM);
|
||||
fitem.addClass(CSS.MORELESSACTIONS);
|
||||
var felement = $(WRAPPERS.FELEMENT);
|
||||
felement.append(morelesslink);
|
||||
fitem.append(felement);
|
||||
|
||||
fieldset.find(SELECTORS.DIVFCONTAINER).append(fitem);
|
||||
return true;
|
||||
}.bind(this)).fail(Notification.exception);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @method switchState
|
||||
* @param {Event} e Event that triggered this action.
|
||||
* @return {Boolean}
|
||||
*/
|
||||
ShowAdvanced.prototype.switchState = function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Fetch some strings.
|
||||
Strings.get_strings([{
|
||||
key: 'showmore',
|
||||
component: 'core_form'
|
||||
}, {
|
||||
key: 'showless',
|
||||
component: 'core_form'
|
||||
}]).then(function(results) {
|
||||
var showmore = results[0],
|
||||
showless = results[1],
|
||||
fieldset = $(e.target).closest(SELECTORS.FIELDSETCONTAINSADVANCED);
|
||||
|
||||
// Toggle collapsed class.
|
||||
fieldset.find(SELECTORS.DIVFITEMADVANCED).toggleClass(CSS.SHOW);
|
||||
|
||||
// Get corresponding hidden variable.
|
||||
var statuselement = $('input[name=mform_showmore_' + fieldset.prop('id') + ']');
|
||||
|
||||
// Invert it and change the link text.
|
||||
if (statuselement.val() === '0') {
|
||||
statuselement.val(1);
|
||||
$(e.target).addClass(CSS.SHOWLESS);
|
||||
$(e.target).html(showless);
|
||||
} else {
|
||||
statuselement.val(0);
|
||||
$(e.target).removeClass(CSS.SHOWLESS);
|
||||
$(e.target).html(showmore);
|
||||
}
|
||||
return true;
|
||||
}).fail(Notification.exception);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
return {
|
||||
/**
|
||||
* Initialise this module.
|
||||
* @method init
|
||||
* @param {String} formid
|
||||
* @return {ShowAdvanced}
|
||||
*/
|
||||
init: function(formid) {
|
||||
return new ShowAdvanced(formid);
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -1,151 +0,0 @@
|
||||
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.util.get_string('showmore', 'form'));
|
||||
} else {
|
||||
morelesslink.setHTML(M.util.get_string('showless', 'form'));
|
||||
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"]});
|
||||
@ -1 +0,0 @@
|
||||
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.util.get_string("showmore","form")):(o.setHTML(M.util.get_string("showless","form")),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"]});
|
||||
@ -1,149 +0,0 @@
|
||||
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.util.get_string('showmore', 'form'));
|
||||
} else {
|
||||
morelesslink.setHTML(M.util.get_string('showless', 'form'));
|
||||
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"]});
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "moodle-form-showadvanced",
|
||||
"builds": {
|
||||
"moodle-form-showadvanced": {
|
||||
"jsfiles": [
|
||||
"showadvanced.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
146
lib/form/yui/src/showadvanced/js/showadvanced.js
vendored
146
lib/form/yui/src/showadvanced/js/showadvanced.js
vendored
@ -1,146 +0,0 @@
|
||||
/**
|
||||
* 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.util.get_string('showmore', 'form'));
|
||||
} else {
|
||||
morelesslink.setHTML(M.util.get_string('showless', 'form'));
|
||||
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);
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"moodle-form-showadvanced": {
|
||||
"requires": [
|
||||
"node",
|
||||
"base",
|
||||
"selector-css3"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -2919,8 +2919,7 @@ class MoodleQuickForm_Renderer extends HTML_QuickForm_Renderer_Tableless{
|
||||
$PAGE->requires->yui_module('moodle-form-shortforms', 'M.form.shortforms', array(array('formid' => $formid)));
|
||||
}
|
||||
if (!empty($this->_advancedElements)){
|
||||
$PAGE->requires->strings_for_js(array('showmore', 'showless'), 'form');
|
||||
$PAGE->requires->yui_module('moodle-form-showadvanced', 'M.form.showadvanced', array(array('formid' => $formid)));
|
||||
$PAGE->requires->js_call_amd('core_form/showadvanced', 'init', [$formid]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user