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

MDL-51038 cbe: Fixes for multi-selection of the competency tree

Browse Source 
* Added missing jsdocs
* Disable multi-select for the main competencies tree (only allow it in the popups).
* Disallow selecting the top node in the competencies picker
* When multi-select is disabled, the selectionchanged event now only passes the one node, not a list with one item.
* Removed the flash when loading the picker (by hiding the tree while it's being rendered)
This commit is contained in:
Damyon Wiese
2016-04-18 10:58:41 +08:00
committed by Frederic Massart
parent ac588bf3de
commit 04dc9983d8
10 changed files with 54 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/tool/lp/amd/build/competencyactions.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
admin/tool/lp/amd/build/competencypicker.min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
define(["jquery","core/notification","core/ajax","core/templates","tool_lp/dialogue","core/str","tool_lp/tree"],function(a,b,c,d,e,f,g){var h,i=function(b,c,d,e){h=this,h._eventNode=a("<div></div>"),h._frameworks=[],h._reset(),h._pageContextId=b,h._pageContextIncludes=d||"children",h._multiSelect="undefined"==typeof e||e===!0,c&&(h._frameworkId=c,h._singleFramework=!0)};return i.prototype._competencies=null,i.prototype._disallowedCompetencyIDs=null,i.prototype._eventNode=null,i.prototype._frameworks=null,i.prototype._frameworkId=null,i.prototype._pageContextId=null,i.prototype._pageContextIncludes=null,i.prototype._popup=null,i.prototype._searchText="",i.prototype._selectedCompetencies=null,i.prototype._singleFramework=!1,i.prototype._multiSelect=!0,i.prototype._afterRender=function(){var b=new g(h._find("[data-enhance=linktree]"),h._multiSelect);b.on("selectionchanged",function(b,c){var d=c.selected;b.preventDefault();var e=[];a.each(d,function(b,c){var d=a(c).data("id"),f=!0;a.each(h._disallowedCompetencyIDs,function(a,b){b==d&&(f=!1)}),f&&e.push(d)}),h._selectedCompetencies=e,h._selectedCompetencies.length?h._find('[data-region="competencylinktree"] [data-action="add"]').removeAttr("disabled"):h._find('[data-region="competencylinktree"] [data-action="add"]').attr("disabled","disabled")}),h._singleFramework||h._find('[data-action="chooseframework"]').change(function(b){h._frameworkId=a(b.target).val(),h._loadCompetencies().then(h._refresh)}),h._find('[data-region="filtercompetencies"] button').click(function(b){return b.preventDefault(),a(b.target).attr("disabled","disabled"),h._searchText=h._find('[data-region="filtercompetencies"] input').val()||"",h._refresh().always(function(){a(b.target).removeAttr("disabled")})}),h._find('[data-region="competencylinktree"] [data-action="cancel"]').click(function(a){a.preventDefault(),h.close()}),h._find('[data-region="competencylinktree"] [data-action="add"]').click(function(a){a.preventDefault(),h._selectedCompetencies.length&&(h._trigger("save",{competencyIds:h._selectedCompetencies}),h.close())});var c=h._selectedCompetencies.slice(0);a.each(c,function(a,c){var d=h._find("[data-id="+c+"]");d.length&&(b.toggleItem(d),b.updateFocus(d))})},i.prototype.close=function(){h._popup.close(),h._reset()},i.prototype.display=function(){return h._render().done(function(a){return f.get_string("competencypicker","tool_lp").done(function(b){h._popup=new e(b,a,h._afterRender.bind(h))})}).fail(b.exception)},i.prototype._fetchCompetencies=function(a,d){return c.call([{methodname:"tool_lp_search_competencies",args:{searchtext:d,competencyframeworkid:a}}])[0].done(function(a){function b(a,c){for(var d=0;d<c.length;d++)c[d].parentid==a.id&&(a.haschildren=!0,c[d].children=[],c[d].haschildren=!1,a.children[a.children.length]=c[d],b(c[d],c))}var c,d,e=[];for(c=0;c<a.length;c++)d=a[c],"0"==d.parentid&&(d.children=[],d.haschildren=0,e[e.length]=d,b(d,a));h._competencies=e}).fail(b.exception)},i.prototype._find=function(b){return a(h._popup.getContent()).find(b)},i.prototype._getFramework=function(b){var c;return a.each(h._frameworks,function(a,d){return d.id==b?(c=d,!1):void 0}),c},i.prototype._loadCompetencies=function(){return h._fetchCompetencies(h._frameworkId,h._searchText)},i.prototype._loadFrameworks=function(){var d;return h._frameworks.length>0?a.when():(d=h._singleFramework?c.call([{methodname:"tool_lp_read_competency_framework",args:{id:this._frameworkId}}])[0].then(function(a){return[a]}):c.call([{methodname:"tool_lp_list_competency_frameworks",args:{sort:"shortname",context:{contextid:h._pageContextId},includes:h._pageContextIncludes}}])[0],d.done(function(a){h._frameworks=a}).fail(b.exception))},i.prototype.on=function(a,b){h._eventNode.on(a,b)},i.prototype._preRender=function(){return h._loadFrameworks().then(function(){return!h._frameworkId&&h._frameworks.length>0&&(h._frameworkId=h._frameworks[0].id),h._frameworkId?h._loadCompetencies():(h._frameworks=[],a.when())})},i.prototype._refresh=function(){return h._render().then(function(a){h._find('[data-region="competencylinktree"]').replaceWith(a),h._afterRender()})},i.prototype._render=function(){return h._preRender().then(function(){h._singleFramework||a.each(h._frameworks,function(a,b){b.id==h._frameworkId?b.selected=!0:b.selected=!1});var b={competencies:h._competencies,framework:h._getFramework(h._frameworkId),frameworks:h._frameworks,search:h._searchText,singleFramework:h._singleFramework};return d.render("tool_lp/competency_picker",b)})},i.prototype._reset=function(){h._competencies=[],h._disallowedCompetencyIDs=[],h._popup=null,h._searchText="",h._selectedCompetencies=[]},i.prototype.setDisallowedCompetencyIDs=function(a){h._disallowedCompetencyIDs=a},i.prototype._trigger=function(a,b){h._eventNode.trigger(a,[b])},i});
define(["jquery","core/notification","core/ajax","core/templates","tool_lp/dialogue","core/str","tool_lp/tree"],function(a,b,c,d,e,f,g){var h,i=function(b,c,d,e){h=this,h._eventNode=a("<div></div>"),h._frameworks=[],h._reset(),h._pageContextId=b,h._pageContextIncludes=d||"children",h._multiSelect="undefined"==typeof e||e===!0,c&&(h._frameworkId=c,h._singleFramework=!0)};return i.prototype._competencies=null,i.prototype._disallowedCompetencyIDs=null,i.prototype._eventNode=null,i.prototype._frameworks=null,i.prototype._frameworkId=null,i.prototype._pageContextId=null,i.prototype._pageContextIncludes=null,i.prototype._popup=null,i.prototype._searchText="",i.prototype._selectedCompetencies=null,i.prototype._singleFramework=!1,i.prototype._multiSelect=!0,i.prototype._afterRender=function(){var b=new g(h._find("[data-enhance=linktree]"),h._multiSelect);h._find("[data-enhance=linktree]").show(),b.on("selectionchanged",function(b,c){var d=c.selected;b.preventDefault();var e=[];a.each(d,function(b,c){var d=a(c).data("id"),f=!0;"undefined"==typeof d?f=!1:a.each(h._disallowedCompetencyIDs,function(a,b){b==d&&(f=!1)}),f&&e.push(d)}),h._selectedCompetencies=e,h._selectedCompetencies.length?h._find('[data-region="competencylinktree"] [data-action="add"]').removeAttr("disabled"):h._find('[data-region="competencylinktree"] [data-action="add"]').attr("disabled","disabled")}),h._singleFramework||h._find('[data-action="chooseframework"]').change(function(b){h._frameworkId=a(b.target).val(),h._loadCompetencies().then(h._refresh)}),h._find('[data-region="filtercompetencies"] button').click(function(b){return b.preventDefault(),a(b.target).attr("disabled","disabled"),h._searchText=h._find('[data-region="filtercompetencies"] input').val()||"",h._refresh().always(function(){a(b.target).removeAttr("disabled")})}),h._find('[data-region="competencylinktree"] [data-action="cancel"]').click(function(a){a.preventDefault(),h.close()}),h._find('[data-region="competencylinktree"] [data-action="add"]').click(function(a){a.preventDefault(),h._selectedCompetencies.length&&(h._trigger("save",{competencyIds:h._selectedCompetencies}),h.close())});var c=h._selectedCompetencies.slice(0);a.each(c,function(a,c){var d=h._find("[data-id="+c+"]");d.length&&(b.toggleItem(d),b.updateFocus(d))})},i.prototype.close=function(){h._popup.close(),h._reset()},i.prototype.display=function(){return h._render().done(function(a){return f.get_string("competencypicker","tool_lp").done(function(b){h._popup=new e(b,a,h._afterRender.bind(h))})}).fail(b.exception)},i.prototype._fetchCompetencies=function(a,d){return c.call([{methodname:"tool_lp_search_competencies",args:{searchtext:d,competencyframeworkid:a}}])[0].done(function(a){function b(a,c){for(var d=0;d<c.length;d++)c[d].parentid==a.id&&(a.haschildren=!0,c[d].children=[],c[d].haschildren=!1,a.children[a.children.length]=c[d],b(c[d],c))}var c,d,e=[];for(c=0;c<a.length;c++)d=a[c],"0"==d.parentid&&(d.children=[],d.haschildren=0,e[e.length]=d,b(d,a));h._competencies=e}).fail(b.exception)},i.prototype._find=function(b){return a(h._popup.getContent()).find(b)},i.prototype._getFramework=function(b){var c;return a.each(h._frameworks,function(a,d){return d.id==b?(c=d,!1):void 0}),c},i.prototype._loadCompetencies=function(){return h._fetchCompetencies(h._frameworkId,h._searchText)},i.prototype._loadFrameworks=function(){var d;return h._frameworks.length>0?a.when():(d=h._singleFramework?c.call([{methodname:"tool_lp_read_competency_framework",args:{id:this._frameworkId}}])[0].then(function(a){return[a]}):c.call([{methodname:"tool_lp_list_competency_frameworks",args:{sort:"shortname",context:{contextid:h._pageContextId},includes:h._pageContextIncludes}}])[0],d.done(function(a){h._frameworks=a}).fail(b.exception))},i.prototype.on=function(a,b){h._eventNode.on(a,b)},i.prototype._preRender=function(){return h._loadFrameworks().then(function(){return!h._frameworkId&&h._frameworks.length>0&&(h._frameworkId=h._frameworks[0].id),h._frameworkId?h._loadCompetencies():(h._frameworks=[],a.when())})},i.prototype._refresh=function(){return h._render().then(function(a){h._find('[data-region="competencylinktree"]').replaceWith(a),h._afterRender()})},i.prototype._render=function(){return h._preRender().then(function(){h._singleFramework||a.each(h._frameworks,function(a,b){b.id==h._frameworkId?b.selected=!0:b.selected=!1});var b={competencies:h._competencies,framework:h._getFramework(h._frameworkId),frameworks:h._frameworks,search:h._searchText,singleFramework:h._singleFramework};return d.render("tool_lp/competency_picker",b)})},i.prototype._reset=function(){h._competencies=[],h._disallowedCompetencyIDs=[],h._popup=null,h._searchText="",h._selectedCompetencies=[]},i.prototype.setDisallowedCompetencyIDs=function(a){h._disallowedCompetencyIDs=a},i.prototype._trigger=function(a,b){h._eventNode.trigger(a,[b])},i});
admin/tool/lp/amd/build/competencytree.min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
define(["core/ajax","core/notification","core/templates","tool_lp/tree","jquery"],function(a,b,c,d,e){var f={},g=0,h="",i="",j="",k=function(a,b){var c=0,d=!1;for(a.haschildren=!1,a.children=[],c=0;c<b.length;c++)d=b[c],d.parentid==a.id&&(a.haschildren=!0,a.children.push(d),k(d,b))},l=function(b){var l=e.Deferred();return c.render("tool_lp/loading",{}).done(function(m,n){c.replaceNodeContents(e(i),m,n);var o=a.call([{methodname:"tool_lp_search_competencies",args:{searchtext:b,competencyframeworkid:g,includerelated:!0}}]);o[0].done(function(a){f=[];var b=0;for(b=0;b<a.length;b++)f[a[b].id]=a[b];var g=[],m=!1;for(b=0;b<a.length;b++)m=a[b],0===parseInt(m.parentid,10)&&(g.push(m),k(m,a));var n={shortname:h,competencies:g};c.render("tool_lp/competencies_tree_root",n).done(function(a,b){c.replaceNodeContents(e(i),e(a).html(),b);var g=new d(i,!1);if(j){var h=e(i).find("[data-id="+j+"]");h.length&&(g.selectItem(h),g.updateFocus(h))}l.resolve(f)}).fail(l.reject)}).fail(l.reject)}),l.promise()},m=function(a,b){var c=b.selected.first();j=c.attr("data-id")};return{init:function(a,c,d,e){g=a,h=c,i=e,l(d).fail(b.exception),this.on("selectionchanged",m)},on:function(a,b){e(i).on(a,b)},getChildren:function(a){var b=[];return e.each(f,function(c,d){d.parentid==a&&b.push(d)}),b},getCompetencyFrameworkId:function(){return g},getCompetency:function(a){return f[a]},getCompetencyLevel:function(a){var b=this.getCompetency(a),c=b.path.replace(/^\/|\/$/g,"").split("/").length;return c},hasChildren:function(a){return this.getChildren(a).length>0},reloadCompetencies:function(){return l("").fail(b.exception)},listCompetencies:function(){return f}}});
define(["core/ajax","core/notification","core/templates","tool_lp/tree","jquery"],function(a,b,c,d,e){var f={},g=0,h="",i="",j="",k=function(a,b){var c=0,d=!1;for(a.haschildren=!1,a.children=[],c=0;c<b.length;c++)d=b[c],d.parentid==a.id&&(a.haschildren=!0,a.children.push(d),k(d,b))},l=function(b){var l=e.Deferred();return c.render("tool_lp/loading",{}).done(function(m,n){c.replaceNodeContents(e(i),m,n);var o=a.call([{methodname:"tool_lp_search_competencies",args:{searchtext:b,competencyframeworkid:g,includerelated:!0}}]);o[0].done(function(a){f=[];var b=0;for(b=0;b<a.length;b++)f[a[b].id]=a[b];var g=[],m=!1;for(b=0;b<a.length;b++)m=a[b],0===parseInt(m.parentid,10)&&(g.push(m),k(m,a));var n={shortname:h,competencies:g};c.render("tool_lp/competencies_tree_root",n).done(function(a,b){c.replaceNodeContents(e(i),e(a).html(),b);var g=new d(i,!1);if(j){var h=e(i).find("[data-id="+j+"]");h.length&&(g.selectItem(h),g.updateFocus(h))}l.resolve(f)}).fail(l.reject)}).fail(l.reject)}),l.promise()},m=function(a,b){var c=b.selected;j=c.attr("data-id")};return{init:function(a,c,d,e){g=a,h=c,i=e,l(d).fail(b.exception),this.on("selectionchanged",m)},on:function(a,b){e(i).on(a,b)},getChildren:function(a){var b=[];return e.each(f,function(c,d){d.parentid==a&&b.push(d)}),b},getCompetencyFrameworkId:function(){return g},getCompetency:function(a){return f[a]},getCompetencyLevel:function(a){var b=this.getCompetency(a),c=b.path.replace(/^\/|\/$/g,"").split("/").length;return c},hasChildren:function(a){return this.getChildren(a).length>0},reloadCompetencies:function(){return l("").fail(b.exception)},listCompetencies:function(){return f}}});
admin/tool/lp/amd/build/tree.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
admin/tool/lp/amd/src/competencyactions.js
+6 -4
View File
@@ -107,13 +107,15 @@ define(['jquery',
* @param {dialogue} popup The tool_lp/dialogue that was created.
*/
var initMovePopup = function(popup) {
var tree = new Ariatree('[data-enhance=movetree]', false);
var body = $(popup.getContent());
var treeRoot = body.find('[data-enhance=movetree]');
var tree = new Ariatree(treeRoot, false);
tree.on('selectionchanged', function(evt, params) {
var target = params.selected.first();
var target = params.selected;
moveTarget = $(target).data('id');
});
treeRoot.show();
var body = $(popup.getContent());
body.on('click', '[data-action="move"]', function() { popup.close(); doMove(); });
body.on('click', '[data-action="cancel"]', function() { popup.close(); });
};
@@ -630,7 +632,7 @@ define(['jquery',
* @param {Object} params The parameters for the event. Contains a list of selected nodes.
*/
var selectionChanged = function(evt, params) {
var node = params.selected.first(),
var node = params.selected,
id = $(node).data('id'),
btn = $('[data-region="competencyactions"] [data-action="add"]'),
actionMenu = $('[data-region="competencyactionsmenu"]'),
admin/tool/lp/amd/src/competencypicker.js
+13 -5
View File
@@ -89,6 +89,9 @@ define(['jquery',
// Initialise the tree.
var tree = new Tree(self._find('[data-enhance=linktree]'), self._multiSelect);
// To prevent jiggling we only show the tree after it is enhanced.
self._find('[data-enhance=linktree]').show();
tree.on('selectionchanged', function(evt, params) {
var selected = params.selected;
evt.preventDefault();
@@ -97,11 +100,16 @@ define(['jquery',
var compId = $(item).data('id'),
valid = true;
$.each(self._disallowedCompetencyIDs, function(i, id) {
if (id == compId) {
valid = false;
}
});
if (typeof compId === 'undefined') {
// Do not allow picking nodes with no id.
valid = false;
} else {
$.each(self._disallowedCompetencyIDs, function(i, id) {
if (id == compId) {
valid = false;
}
});
}
if (valid) {
validIds.push(compId);
}
admin/tool/lp/amd/src/competencytree.js
+2 -2
View File
@@ -121,10 +121,10 @@ define(['core/ajax', 'core/notification', 'core/templates', 'tool_lp/tree', 'jqu
/**
* Whenever the current item in the tree is changed - remember the "id".
* @param {Event} evt
* @param {Object} The parameters for the event.
* @param {Object} params The parameters for the event (This is the selected node).
*/
var rememberCurrent = function(evt, params) {
var node = params.selected.first();
var node = params.selected;
currentNodeId = node.attr('data-id');
};
admin/tool/lp/amd/src/tree.js
+27 -1
View File
@@ -19,7 +19,7 @@
*
* To respond to selection changed events - use tree.on("selectionchanged", handler).
* The handler will receive an array of nodes, which are the list items that are currently
* selected.
* selected. (Or a single node if multiselect is disabled).
*
* @module tool_lp/tree
* @package core
@@ -157,11 +157,25 @@ define(['jquery', 'core/url', 'core/log'], function($, url, log) {
}
};
/**
* Whenever the currently selected node has changed, trigger an event using this function.
*
* @method triggerChange
*/
Tree.prototype.triggerChange = function() {
var allSelected = this.items.filter('[aria-selected=true]');
if (!this.multiSelect) {
allSelected = allSelected.first();
}
this.treeRoot.trigger('selectionchanged', { selected: allSelected });
};
/**
* Select all the items between the last focused item and this currently focused item.
*
* @method multiSelectItem
* @param {Object} item is the jquery id of the newly selected item.
*/
Tree.prototype.multiSelectItem = function(item) {
if (!this.multiSelect) {
this.items.attr('aria-selected', 'false');
@@ -186,6 +200,12 @@ define(['jquery', 'core/url', 'core/log'], function($, url, log) {
this.triggerChange();
};
/**
* Select a single item. Make sure all the parents are expanded. De-select all other items.
*
* @method selectItem
* @param {Object} item is the jquery id of the newly selected item.
*/
Tree.prototype.selectItem = function(item) {
// Expand all nodes up the tree.
var walk = item.parent();
@@ -201,6 +221,12 @@ define(['jquery', 'core/url', 'core/log'], function($, url, log) {
this.triggerChange();
};
/**
* Toggle the selected state for an item back and forth.
*
* @method toggleItem
* @param {Object} item is the jquery id of the item to toggle.
*/
Tree.prototype.toggleItem = function(item) {
if (!this.multiSelect) {
return this.selectItem(item);
admin/tool/lp/templates/competencies_move_tree.mustache
+1 -1
View File
@@ -29,7 +29,7 @@
<div data-region="competencymovetree" >
<label>{{#str}}selectcompetencymovetarget, tool_lp{{/str}}</label>
<ul data-enhance="movetree">
<ul data-enhance="movetree" style="display: none;">
<li>{{framework.shortname}}
<ul>
{{#competencies}}
admin/tool/lp/templates/competency_picker.mustache
+1 -1
View File
@@ -14,7 +14,7 @@
<input type="text" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">
<button>{{#pix}}a/search, ,{{#str}}search{{/str}}{{/pix}}</button>
</form>
<ul data-enhance="linktree">
<ul data-enhance="linktree" style="display: none;">
<li><span>{{framework.shortname}}</span>
<ul>
{{#competencies}}