MDL-42977 course: Fixed the default behaviour of the Collapse/Expand all link

This commit is contained in:
EizEddin AlKatrib
2016-11-18 14:24:42 +08:00
committed by Simey Lameze
parent b4d6669dd0
commit af28ceb945
5 changed files with 178 additions and 18 deletions
+2 -5
View File
@@ -1506,14 +1506,11 @@ class core_course_renderer extends plugin_renderer_base {
if ($coursecat->get_children_count()) {
$classes = array(
'collapseexpand',
'collapse-all',
);
if ($chelper->get_subcat_depth() == 1) {
$classes[] = 'disabled';
}
// Only show the collapse/expand if there are children to expand.
$content .= html_writer::start_tag('div', array('class' => 'collapsible-actions'));
$content .= html_writer::link('#', get_string('collapseall'),
$content .= html_writer::link('#', get_string('expandall'),
array('class' => implode(' ', $classes)));
$content .= html_writer::end_tag('div');
$this->page->requires->strings_for_js(array('collapseall', 'expandall'), 'moodle');
@@ -25,10 +25,12 @@ var CSS = {
HASCHILDREN: 'with_children'
},
SELECTORS = {
WITHCHILDRENTREES: '.with_children',
LOADEDTREES: '.with_children.loaded',
CONTENTNODE: '.content',
CATEGORYLISTENLINK: '.category .info .categoryname',
CATEGORYSPINNERLOCATION: '.categoryname',
CATEGORYWITHCOLLAPSEDCHILDREN: '.category.with_children.collapsed',
CATEGORYWITHCOLLAPSEDLOADEDCHILDREN: '.category.with_children.loaded.collapsed',
CATEGORYWITHMAXIMISEDLOADEDCHILDREN: '.category.with_children.loaded:not(.collapsed)',
COLLAPSEEXPAND: '.collapseexpand',
@@ -82,6 +84,58 @@ NS.setup_keyboard_listeners = function() {
Y.one(Y.config.doc).delegate('key', this.collapse_expand_all, 'enter', SELECTORS.COLLAPSEEXPAND, this);
};
/**
* Expand all categories.
*
* @method expand_category
* @private
* @param {Node} categorynode The node to expand
*/
NS.expand_category = function(categorynode) {
// Load the actual dependencies now that we've been called.
Y.use('io-base', 'json-parse', 'moodle-core-notification', 'anim-node-plugin', function() {
// Overload the expand_category with the _expand_category function to ensure that
// this function isn't called in the future, and call it for the first time.
NS.expand_category = NS._expand_category;
NS.expand_category(categorynode);
});
};
NS._expand_category = function(categorynode) {
var categoryid,
depth;
if (!categorynode.hasClass(CSS.HASCHILDREN)) {
// Nothing to do here - this category has no children.
return;
}
if (categorynode.hasClass(CSS.LOADED)) {
// We've already loaded this content so we just need to toggle the view of it.
this.run_expansion(categorynode);
return;
}
// We use Data attributes to store the category.
categoryid = categorynode.getData('categoryid');
depth = categorynode.getData('depth');
if (typeof categoryid === "undefined" || typeof depth === "undefined") {
return;
}
this._toggle_generic_expansion({
parentnode: categorynode,
childnode: categorynode.one(SELECTORS.CONTENTNODE),
spinnerhandle: SELECTORS.CATEGORYSPINNERLOCATION,
data: {
categoryid: categoryid,
depth: depth,
showcourses: categorynode.getData('showcourses'),
type: TYPE_CATEGORY
}
});
};
/**
* Toggle the animation of the clicked category node.
*
@@ -310,12 +364,12 @@ NS._collapse_expand_all = function(e) {
NS.expand_all = function(ancestor) {
var finalexpansions = [];
ancestor.all(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)
ancestor.all(SELECTORS.CATEGORYWITHCOLLAPSEDCHILDREN)
.each(function(c) {
if (c.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)) {
if (c.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDCHILDREN)) {
// Expand the hidden children first without animation.
c.removeClass(CSS.SECTIONCOLLAPSED);
c.all(SELECTORS.LOADEDTREES).removeClass(CSS.SECTIONCOLLAPSED);
c.all(SELECTORS.WITHCHILDRENTREES).removeClass(CSS.SECTIONCOLLAPSED);
} else {
finalexpansions.push(c);
}
@@ -323,7 +377,7 @@ NS.expand_all = function(ancestor) {
// Run the final expansion with animation on the visible items.
Y.all(finalexpansions).each(function(c) {
this.run_expansion(c);
this.expand_category(c);
}, this);
};
File diff suppressed because one or more lines are too long
@@ -25,10 +25,12 @@ var CSS = {
HASCHILDREN: 'with_children'
},
SELECTORS = {
WITHCHILDRENTREES: '.with_children',
LOADEDTREES: '.with_children.loaded',
CONTENTNODE: '.content',
CATEGORYLISTENLINK: '.category .info .categoryname',
CATEGORYSPINNERLOCATION: '.categoryname',
CATEGORYWITHCOLLAPSEDCHILDREN: '.category.with_children.collapsed',
CATEGORYWITHCOLLAPSEDLOADEDCHILDREN: '.category.with_children.loaded.collapsed',
CATEGORYWITHMAXIMISEDLOADEDCHILDREN: '.category.with_children.loaded:not(.collapsed)',
COLLAPSEEXPAND: '.collapseexpand',
@@ -81,6 +83,58 @@ NS.setup_keyboard_listeners = function() {
Y.one(Y.config.doc).delegate('key', this.collapse_expand_all, 'enter', SELECTORS.COLLAPSEEXPAND, this);
};
/**
* Expand all categories.
*
* @method expand_category
* @private
* @param {Node} categorynode The node to expand
*/
NS.expand_category = function(categorynode) {
// Load the actual dependencies now that we've been called.
Y.use('io-base', 'json-parse', 'moodle-core-notification', 'anim-node-plugin', function() {
// Overload the expand_category with the _expand_category function to ensure that
// this function isn't called in the future, and call it for the first time.
NS.expand_category = NS._expand_category;
NS.expand_category(categorynode);
});
};
NS._expand_category = function(categorynode) {
var categoryid,
depth;
if (!categorynode.hasClass(CSS.HASCHILDREN)) {
// Nothing to do here - this category has no children.
return;
}
if (categorynode.hasClass(CSS.LOADED)) {
// We've already loaded this content so we just need to toggle the view of it.
this.run_expansion(categorynode);
return;
}
// We use Data attributes to store the category.
categoryid = categorynode.getData('categoryid');
depth = categorynode.getData('depth');
if (typeof categoryid === "undefined" || typeof depth === "undefined") {
return;
}
this._toggle_generic_expansion({
parentnode: categorynode,
childnode: categorynode.one(SELECTORS.CONTENTNODE),
spinnerhandle: SELECTORS.CATEGORYSPINNERLOCATION,
data: {
categoryid: categoryid,
depth: depth,
showcourses: categorynode.getData('showcourses'),
type: TYPE_CATEGORY
}
});
};
/**
* Toggle the animation of the clicked category node.
*
@@ -309,12 +363,12 @@ NS._collapse_expand_all = function(e) {
NS.expand_all = function(ancestor) {
var finalexpansions = [];
ancestor.all(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)
ancestor.all(SELECTORS.CATEGORYWITHCOLLAPSEDCHILDREN)
.each(function(c) {
if (c.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)) {
if (c.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDCHILDREN)) {
// Expand the hidden children first without animation.
c.removeClass(CSS.SECTIONCOLLAPSED);
c.all(SELECTORS.LOADEDTREES).removeClass(CSS.SECTIONCOLLAPSED);
c.all(SELECTORS.WITHCHILDRENTREES).removeClass(CSS.SECTIONCOLLAPSED);
} else {
finalexpansions.push(c);
}
@@ -322,7 +376,7 @@ NS.expand_all = function(ancestor) {
// Run the final expansion with animation on the visible items.
Y.all(finalexpansions).each(function(c) {
this.run_expansion(c);
this.expand_category(c);
}, this);
};
+58 -4
View File
@@ -23,10 +23,12 @@ var CSS = {
HASCHILDREN: 'with_children'
},
SELECTORS = {
WITHCHILDRENTREES: '.with_children',
LOADEDTREES: '.with_children.loaded',
CONTENTNODE: '.content',
CATEGORYLISTENLINK: '.category .info .categoryname',
CATEGORYSPINNERLOCATION: '.categoryname',
CATEGORYWITHCOLLAPSEDCHILDREN: '.category.with_children.collapsed',
CATEGORYWITHCOLLAPSEDLOADEDCHILDREN: '.category.with_children.loaded.collapsed',
CATEGORYWITHMAXIMISEDLOADEDCHILDREN: '.category.with_children.loaded:not(.collapsed)',
COLLAPSEEXPAND: '.collapseexpand',
@@ -80,6 +82,58 @@ NS.setup_keyboard_listeners = function() {
Y.one(Y.config.doc).delegate('key', this.collapse_expand_all, 'enter', SELECTORS.COLLAPSEEXPAND, this);
};
/**
* Expand all categories.
*
* @method expand_category
* @private
* @param {Node} categorynode The node to expand
*/
NS.expand_category = function(categorynode) {
// Load the actual dependencies now that we've been called.
Y.use('io-base', 'json-parse', 'moodle-core-notification', 'anim-node-plugin', function() {
// Overload the expand_category with the _expand_category function to ensure that
// this function isn't called in the future, and call it for the first time.
NS.expand_category = NS._expand_category;
NS.expand_category(categorynode);
});
};
NS._expand_category = function(categorynode) {
var categoryid,
depth;
if (!categorynode.hasClass(CSS.HASCHILDREN)) {
// Nothing to do here - this category has no children.
return;
}
if (categorynode.hasClass(CSS.LOADED)) {
// We've already loaded this content so we just need to toggle the view of it.
this.run_expansion(categorynode);
return;
}
// We use Data attributes to store the category.
categoryid = categorynode.getData('categoryid');
depth = categorynode.getData('depth');
if (typeof categoryid === "undefined" || typeof depth === "undefined") {
return;
}
this._toggle_generic_expansion({
parentnode: categorynode,
childnode: categorynode.one(SELECTORS.CONTENTNODE),
spinnerhandle: SELECTORS.CATEGORYSPINNERLOCATION,
data: {
categoryid: categoryid,
depth: depth,
showcourses: categorynode.getData('showcourses'),
type: TYPE_CATEGORY
}
});
};
/**
* Toggle the animation of the clicked category node.
*
@@ -308,12 +362,12 @@ NS._collapse_expand_all = function(e) {
NS.expand_all = function(ancestor) {
var finalexpansions = [];
ancestor.all(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)
ancestor.all(SELECTORS.CATEGORYWITHCOLLAPSEDCHILDREN)
.each(function(c) {
if (c.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)) {
if (c.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDCHILDREN)) {
// Expand the hidden children first without animation.
c.removeClass(CSS.SECTIONCOLLAPSED);
c.all(SELECTORS.LOADEDTREES).removeClass(CSS.SECTIONCOLLAPSED);
c.all(SELECTORS.WITHCHILDRENTREES).removeClass(CSS.SECTIONCOLLAPSED);
} else {
finalexpansions.push(c);
}
@@ -321,7 +375,7 @@ NS.expand_all = function(ancestor) {
// Run the final expansion with animation on the visible items.
Y.all(finalexpansions).each(function(c) {
this.run_expansion(c);
this.expand_category(c);
}, this);
};