MDL-51957: Super pimp the performance of the aria tree.

This commit is contained in:
Damyon Wiese
2016-04-18 10:58:40 +08:00
committed by Frederic Massart
parent 8ff9ae8d6f
commit fff88ad17d
6 changed files with 115 additions and 63 deletions
+1 -1
View File
@@ -1 +1 @@
define(["core/ajax","core/notification","jquery"],function(a,b,c){var d=[],e=0,f=function(b){var f=c.Deferred();b="";var g=a.call([{methodname:"tool_lp_search_competencies",args:{searchtext:b,competencyframeworkid:e,includerelated:!0}}]);return g[0].done(function(a){d=[];var b=0;for(b=0;b<a.length;b++)d[a[b].id]=a[b];f.resolve(d)}).fail(function(a){f.reject(a)}),f.promise()};return{init:function(a){e=a,f("").fail(b.exception)},getCompetencyFrameworkId:function(){return e},getCompetency:function(a){return d[a]},getCompetencyLevel:function(a){var b=this.getCompetency(a),c=b.path.replace(/^\/|\/$/g,"").split("/").length;return c},reloadCompetencies:function(){return f("").fail(b.exception)},listCompetencies:function(){return d},applySearch:function(a){return f(a)}}});
define(["core/ajax","core/notification","core/templates","tool_lp/tree","jquery"],function(a,b,c,d,e){var f=[],g=0,h="",i="",j=!1,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(l){var m=e.Deferred(),n=a.call([{methodname:"tool_lp_search_competencies",args:{searchtext:l,competencyframeworkid:g,includerelated:!0}}]);return n[0].done(function(a){f=[];var g=0;for(g=0;g<a.length;g++)f[a[g].id]=a[g];var l=[],n=!1;for(g=0;g<a.length;g++)n=a[g],0===parseInt(n.parentid,10)&&(l.push(n),k(n,a));var o={shortname:h,competencies:l};c.render("tool_lp/competencies_tree_root",o).done(function(a,b){c.replaceNode(e(i),a,b),new d(i,j),m.resolve(f)}).fail(b.exception)}).fail(function(a){m.reject(a)}),m.promise()};return{init:function(a,c,d,e,f){g=a,h=c,i=e,j=f,l(d).fail(b.exception)},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},reloadCompetencies:function(){return l("").fail(b.exception)},listCompetencies:function(){return f}}});
+94 -47
View File
@@ -21,56 +21,112 @@
* @copyright 2015 Damyon Wiese <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(['core/ajax', 'core/notification', 'jquery'], function(ajax, notification, $) {
// Private variables and functions.
/** @var {Object[]} competencies - Cached list of competencies */
var competencies = [];
define(['core/ajax', 'core/notification', 'core/templates', 'tool_lp/tree', 'jquery'],
function(ajax, notification, templates, Ariatree, $) {
/** @var {Number} competencyFrameworkId - The current framework id */
var competencyFrameworkId = 0;
// Private variables and functions.
/** @var {Object[]} competencies - Cached list of competencies */
var competencies = [];
/**
* Load the list of competencies via ajax. Competencies are filtered by the searchtext.
* @param {String} searchtext The text to filter on.
* @return {promise}
*/
var loadCompetencies = function(searchtext) {
var deferred = $.Deferred();
searchtext = '';
var promises = ajax.call([{
methodname: 'tool_lp_search_competencies',
args: {
searchtext: searchtext,
competencyframeworkid: competencyFrameworkId,
includerelated: true
}
}]);
promises[0].done(function(result) {
competencies = [];
var i = 0;
for (i = 0; i < result.length; i++) {
competencies[result[i].id] = result[i];
}
deferred.resolve(competencies);
}).fail(function(exception) {
deferred.reject(exception);
});
/** @var {Number} competencyFrameworkId - The current framework id */
var competencyFrameworkId = 0;
return deferred.promise();
};
/** @var {String} competencyFrameworkShortName - The current framework short name */
var competencyFrameworkShortName = '';
/** @var {String} treeSelector - The selector for the root of the tree. */
var treeSelector = '';
/** @var {Function} changeCallback - Handler for selection changed events. */
var changeCallback = false;
/**
* Build a tree from the flat list of competencies.
* @param {Object} parent The parent competency.
* @param {Array} all The list of all competencies.
*/
var addChildren = function(parent, all) {
var i = 0;
var current = false;
parent.haschildren = false;
parent.children = [];
for (i = 0; i < all.length; i++) {
current = all[i];
if (current.parentid == parent.id) {
parent.haschildren = true;
parent.children.push(current);
addChildren(current, all);
}
}
};
/**
* Load the list of competencies via ajax. Competencies are filtered by the searchtext.
* @param {String} searchtext The text to filter on.
* @return {promise}
*/
var loadCompetencies = function(searchtext) {
var deferred = $.Deferred();
var promises = ajax.call([{
methodname: 'tool_lp_search_competencies',
args: {
searchtext: searchtext,
competencyframeworkid: competencyFrameworkId,
includerelated: true
}
}]);
promises[0].done(function(result) {
competencies = [];
var i = 0;
for (i = 0; i < result.length; i++) {
competencies[result[i].id] = result[i];
}
var children = [];
var competency = false;
for (i = 0; i < result.length; i++) {
competency = result[i];
if (parseInt(competency.parentid, 10) === 0) {
children.push(competency);
addChildren(competency, result);
}
}
var context = {
shortname: competencyFrameworkShortName,
competencies: children
};
templates.render('tool_lp/competencies_tree_root', context).done(function(html, js) {
templates.replaceNode($(treeSelector), html, js);
new Ariatree(treeSelector, changeCallback);
deferred.resolve(competencies);
}).fail(notification.exception);
}).fail(function(exception) {
deferred.reject(exception);
});
return deferred.promise();
};
return /** @alias module:tool_lp/competencytree */ {
return /** @alias module:tool_lp/competencytree */ {
// Public variables and functions.
/**
* Initialise the tree.
*
* @param {Number} id The competency id.
* @param {String} shortname The framework shortname
* @param {String} search The current search string
* @param {String} selector The selector for the tree div
* @param {Function} changeHandler The handler to call when the selection changes.
*/
init: function(id) {
init: function(id, shortname, search, selector, changeHandler) {
competencyFrameworkId = id;
loadCompetencies('').fail(notification.exception);
},
competencyFrameworkShortName = shortname;
treeSelector = selector;
changeCallback = changeHandler;
loadCompetencies(search).fail(notification.exception);
},
/**
* Get the competency framework id this model was initiliased with.
@@ -121,14 +177,5 @@
return competencies;
},
/**
* Reload the list of competencies, filtered by the search text.
*
* @param {String} searchtext The text to filter by.
* @return {Object[]} The filtered competency list.
*/
applySearch: function(searchtext) {
return loadCompetencies(searchtext);
}
};
});
@@ -76,7 +76,7 @@ class manage_competencies_page implements renderable, templatable {
);
$this->navigation[] = $addpage;
$this->competencies = api::search_competencies($search, $framework->get_id());
// $this->competencies = api::search_competencies($search, $framework->get_id());
$this->canmanage = has_capability('tool/lp:competencymanage', $framework->get_context());
}
@@ -122,7 +122,7 @@ class manage_competencies_page implements renderable, templatable {
$data->search = $this->search;
$data->pagecontextid = $this->pagecontext->id;
foreach ($this->competencies as $competency) {
/* foreach ($this->competencies as $competency) {
if ($competency->get_parentid() == 0) {
$record = $competency->to_record();
$record->descriptionformatted = format_text($record->description, $record->descriptionformat, $options);
@@ -132,6 +132,7 @@ class manage_competencies_page implements renderable, templatable {
$this->add_competency_children($record, $this->competencies);
}
}
*/
return $data;
}
@@ -1,6 +1,6 @@
<li data-id="{{id}}" draggable="true">
{{^visible}}<span class="disabled">{{/visible}}
{{shortname}} <em>{{idnumber}}</em>
{{shortname}}
{{^visible}}</span>{{/visible}}
{{#haschildren}}
<ul>
@@ -0,0 +1,9 @@
<ul data-enhance="tree">
<li>{{shortname}}
<ul>
{{#competencies}}
{{> tool_lp/competencies_tree }}
{{/competencies}}
</ul>
</li>
</ul>
@@ -41,15 +41,8 @@
<button>{{#pix}}a/search, , {{#str}}search{{/str}}{{/pix}}</button>
</form>
</p>
<ul data-enhance="tree">
<li>{{framework.shortname}}
<ul>
{{#competencies}}
{{> tool_lp/competencies_tree }}
{{/competencies}}
</ul>
</li>
</ul>
<div data-enhance="tree">
</div>
</div>
<div class="span6 well">
@@ -113,12 +106,14 @@
// Initialise the JS.
require(['tool_lp/tree', 'tool_lp/competencytree', 'tool_lp/competencyactions' ], function(ariatree, treeModel, actions) {
treeModel.init({{framework.id}});
treeModel.init({{framework.id}},
'{{framework.shortname}}',
'{{search}}',
'[data-enhance=tree]',
actions.selectionChanged);
actions.init(treeModel, {{pagecontextid}}, {{{framework.taxonomies}}});
var competencytree = new ariatree('[data-enhance=tree]', actions.selectionChanged);
});
{{/js}}