first commit

This commit is contained in:
CHIEFSOFT\ameye
2024-09-30 18:11:26 -04:00
commit e592ca6823
27270 changed files with 5002257 additions and 0 deletions
@@ -0,0 +1,513 @@
YUI.add('moodle-course-categoryexpander', function (Y, NAME) {
/**
* Adds toggling of subcategory with automatic loading using AJAX.
*
* This also includes application of an animation to improve user experience.
*
* @module moodle-course-categoryexpander
*/
/**
* The course category expander.
*
* @constructor
* @class Y.Moodle.course.categoryexpander
*/
var CSS = {
CONTENTNODE: 'content',
COLLAPSEALL: 'collapse-all',
DISABLED: 'disabled',
LOADED: 'loaded',
NOTLOADED: 'notloaded',
SECTIONCOLLAPSED: 'collapsed',
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',
COURSEBOX: '.coursebox',
COURSEBOXLISTENLINK: '.coursebox .moreinfo',
COURSEBOXSPINNERLOCATION: '.info .moreinfo',
COURSECATEGORYTREE: '.course_category_tree',
PARENTWITHCHILDREN: '.category'
},
NS = Y.namespace('Moodle.course.categoryexpander'),
TYPE_CATEGORY = 0,
TYPE_COURSE = 1,
URL = M.cfg.wwwroot + '/course/category.ajax.php';
/**
* Set up the category expander.
*
* No arguments are required.
*
* @method init
*/
NS.init = function() {
var doc = Y.one(Y.config.doc);
doc.delegate('click', this.toggle_category_expansion, SELECTORS.CATEGORYLISTENLINK, this);
doc.delegate('click', this.toggle_coursebox_expansion, SELECTORS.COURSEBOXLISTENLINK, this);
doc.delegate('click', this.collapse_expand_all, SELECTORS.COLLAPSEEXPAND, this);
// Only set up they keybaord listeners when tab is first pressed - it
// may never happen and modifying the DOM on a large number of nodes
// can be very expensive.
doc.once('key', this.setup_keyboard_listeners, 'tab', this);
};
/**
* Set up keyboard expansion for course content.
*
* This includes setting up the delegation but also adding the nodes to the
* tabflow.
*
* @method setup_keyboard_listeners
*/
NS.setup_keyboard_listeners = function() {
var doc = Y.one(Y.config.doc);
Y.log('Setting the tabindex for all expandable course nodes', 'info', 'moodle-course-categoryexpander');
doc.all(SELECTORS.CATEGORYLISTENLINK, SELECTORS.COURSEBOXLISTENLINK, SELECTORS.COLLAPSEEXPAND).setAttribute('tabindex', '0');
Y.one(Y.config.doc).delegate('key', this.toggle_category_expansion, 'enter', SELECTORS.CATEGORYLISTENLINK, this);
Y.one(Y.config.doc).delegate('key', this.toggle_coursebox_expansion, 'enter', SELECTORS.COURSEBOXLISTENLINK, this);
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.
*
* @method toggle_category_expansion
* @private
* @param {EventFacade} e
*/
NS.toggle_category_expansion = function(e) {
// 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 toggle_category_expansion with the _toggle_category_expansion function to ensure that
// this function isn't called in the future, and call it for the first time.
NS.toggle_category_expansion = NS._toggle_category_expansion;
NS.toggle_category_expansion(e);
});
};
/**
* Toggle the animation of the clicked coursebox node.
*
* @method toggle_coursebox_expansion
* @private
* @param {EventFacade} e
*/
NS.toggle_coursebox_expansion = function(e) {
// 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 toggle_coursebox_expansion with the _toggle_coursebox_expansion function to ensure that
// this function isn't called in the future, and call it for the first time.
NS.toggle_coursebox_expansion = NS._toggle_coursebox_expansion;
NS.toggle_coursebox_expansion(e);
});
e.preventDefault();
};
NS._toggle_coursebox_expansion = function(e) {
var courseboxnode;
// Grab the parent category container - this is where the new content will be added.
courseboxnode = e.target.ancestor(SELECTORS.COURSEBOX, true);
e.preventDefault();
if (courseboxnode.hasClass(CSS.LOADED)) {
// We've already loaded this content so we just need to toggle the view of it.
this.run_expansion(courseboxnode);
return;
}
this._toggle_generic_expansion({
parentnode: courseboxnode,
childnode: courseboxnode.one(SELECTORS.CONTENTNODE),
spinnerhandle: SELECTORS.COURSEBOXSPINNERLOCATION,
data: {
courseid: courseboxnode.getData('courseid'),
type: TYPE_COURSE
}
});
};
NS._toggle_category_expansion = function(e) {
var categorynode,
categoryid,
depth;
if (e.target.test('a') || e.target.test('img')) {
// Return early if either an anchor or an image were clicked.
return;
}
// Grab the parent category container - this is where the new content will be added.
categorynode = e.target.ancestor(SELECTORS.PARENTWITHCHILDREN, true);
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
}
});
};
/**
* Wrapper function to handle toggling of generic types.
*
* @method _toggle_generic_expansion
* @private
* @param {Object} config
*/
NS._toggle_generic_expansion = function(config) {
var spinner;
if (config.spinnerhandle) {
// Add a spinner to give some feedback to the user.
spinner = M.util.add_spinner(Y, config.parentnode.one(config.spinnerhandle)).show();
}
// Fetch the data.
Y.io(URL, {
method: 'POST',
context: this,
on: {
complete: this.process_results
},
data: config.data,
"arguments": {
parentnode: config.parentnode,
childnode: config.childnode,
spinner: spinner
}
});
};
/**
* Apply the animation on the supplied node.
*
* @method run_expansion
* @private
* @param {Node} categorynode The node to apply the animation to
*/
NS.run_expansion = function(categorynode) {
var categorychildren = categorynode.one(SELECTORS.CONTENTNODE),
self = this,
ancestor = categorynode.ancestor(SELECTORS.COURSECATEGORYTREE);
// Add our animation to the categorychildren.
this.add_animation(categorychildren);
// If we already have the class, remove it before showing otherwise we perform the
// animation whilst the node is hidden.
if (categorynode.hasClass(CSS.SECTIONCOLLAPSED)) {
// To avoid a jump effect, we need to set the height of the children to 0 here before removing the SECTIONCOLLAPSED class.
categorychildren.setStyle('height', '0');
categorynode.removeClass(CSS.SECTIONCOLLAPSED);
categorynode.setAttribute('aria-expanded', 'true');
categorychildren.fx.set('reverse', false);
} else {
categorychildren.fx.set('reverse', true);
categorychildren.fx.once('end', function(e, categorynode) {
categorynode.addClass(CSS.SECTIONCOLLAPSED);
categorynode.setAttribute('aria-expanded', 'false');
}, this, categorynode);
}
categorychildren.fx.once('end', function(e, categorychildren) {
// Remove the styles that the animation has set.
categorychildren.setStyles({
height: '',
opacity: ''
});
// To avoid memory gobbling, remove the animation. It will be added back if called again.
this.destroy();
self.update_collapsible_actions(ancestor);
}, categorychildren.fx, categorychildren);
// Now that everything has been set up, run the animation.
categorychildren.fx.run();
};
/**
* Toggle collapsing of all nodes.
*
* @method collapse_expand_all
* @private
* @param {EventFacade} e
*/
NS.collapse_expand_all = function(e) {
// 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 collapse_expand_all with the _collapse_expand_all function to ensure that
// this function isn't called in the future, and call it for the first time.
NS.collapse_expand_all = NS._collapse_expand_all;
NS.collapse_expand_all(e);
});
e.preventDefault();
};
NS._collapse_expand_all = function(e) {
// The collapse/expand button has no actual target but we need to prevent it's default
// action to ensure we don't make the page reload/jump.
e.preventDefault();
if (e.currentTarget.hasClass(CSS.DISABLED)) {
// The collapse/expand is currently disabled.
return;
}
var ancestor = e.currentTarget.ancestor(SELECTORS.COURSECATEGORYTREE);
if (!ancestor) {
return;
}
var collapseall = ancestor.one(SELECTORS.COLLAPSEEXPAND);
if (collapseall.hasClass(CSS.COLLAPSEALL)) {
this.collapse_all(ancestor);
} else {
this.expand_all(ancestor);
}
this.update_collapsible_actions(ancestor);
};
NS.expand_all = function(ancestor) {
var finalexpansions = [];
ancestor.all(SELECTORS.CATEGORYWITHCOLLAPSEDCHILDREN)
.each(function(c) {
if (c.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDCHILDREN)) {
// Expand the hidden children first without animation.
c.removeClass(CSS.SECTIONCOLLAPSED);
c.all(SELECTORS.WITHCHILDRENTREES).removeClass(CSS.SECTIONCOLLAPSED);
} else {
finalexpansions.push(c);
}
}, this);
// Run the final expansion with animation on the visible items.
Y.all(finalexpansions).each(function(c) {
this.expand_category(c);
}, this);
};
NS.collapse_all = function(ancestor) {
var finalcollapses = [];
ancestor.all(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN)
.each(function(c) {
if (c.ancestor(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN)) {
finalcollapses.push(c);
} else {
// Collapse the visible items first
this.run_expansion(c);
}
}, this);
// Run the final collapses now that the these are hidden hidden.
Y.all(finalcollapses).each(function(c) {
c.addClass(CSS.SECTIONCOLLAPSED);
c.all(SELECTORS.LOADEDTREES).addClass(CSS.SECTIONCOLLAPSED);
}, this);
};
NS.update_collapsible_actions = function(ancestor) {
var foundmaximisedchildren = false,
// Grab the anchor for the collapseexpand all link.
togglelink = ancestor.one(SELECTORS.COLLAPSEEXPAND);
if (!togglelink) {
// We should always have a togglelink but ensure.
return;
}
// Search for any visibly expanded children.
ancestor.all(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN).each(function(n) {
// If we can find any collapsed ancestors, skip.
if (n.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)) {
return false;
}
foundmaximisedchildren = true;
return true;
});
if (foundmaximisedchildren) {
// At least one maximised child found. Show the collapseall.
togglelink.setHTML(M.util.get_string('collapseall', 'moodle'))
.addClass(CSS.COLLAPSEALL)
.removeClass(CSS.DISABLED);
} else {
// No maximised children found but there are collapsed children. Show the expandall.
togglelink.setHTML(M.util.get_string('expandall', 'moodle'))
.removeClass(CSS.COLLAPSEALL)
.removeClass(CSS.DISABLED);
}
};
/**
* Process the data returned by Y.io.
* This includes appending it to the relevant part of the DOM, and applying our animations.
*
* @method process_results
* @private
* @param {String} tid The Transaction ID
* @param {Object} response The Reponse returned by Y.IO
* @param {Object} ioargs The additional arguments provided by Y.IO
*/
NS.process_results = function(tid, response, args) {
var newnode,
data;
try {
data = Y.JSON.parse(response.responseText);
if (data.error) {
return new M.core.ajaxException(data);
}
} catch (e) {
return new M.core.exception(e);
}
// Insert the returned data into a new Node.
newnode = Y.Node.create(data);
// Append to the existing child location.
args.childnode.appendChild(newnode);
// Now that we have content, we can swap the classes on the toggled container.
args.parentnode
.addClass(CSS.LOADED)
.removeClass(CSS.NOTLOADED);
// Toggle the open/close status of the node now that it's content has been loaded.
this.run_expansion(args.parentnode);
// Remove the spinner now that we've started to show the content.
if (args.spinner) {
args.spinner.hide().destroy();
}
};
/**
* Add our animation to the Node.
*
* @method add_animation
* @private
* @param {Node} childnode
*/
NS.add_animation = function(childnode) {
if (typeof childnode.fx !== "undefined") {
// The animation has already been plugged to this node.
return childnode;
}
childnode.plug(Y.Plugin.NodeFX, {
from: {
height: 0,
opacity: 0
},
to: {
// This sets a dynamic height in case the node content changes.
height: function(node) {
// Get expanded height (offsetHeight may be zero).
return node.get('scrollHeight');
},
opacity: 1
},
duration: 0.2
});
return childnode;
};
}, '@VERSION@', {"requires": ["node", "event-key"]});
File diff suppressed because one or more lines are too long
@@ -0,0 +1,512 @@
YUI.add('moodle-course-categoryexpander', function (Y, NAME) {
/**
* Adds toggling of subcategory with automatic loading using AJAX.
*
* This also includes application of an animation to improve user experience.
*
* @module moodle-course-categoryexpander
*/
/**
* The course category expander.
*
* @constructor
* @class Y.Moodle.course.categoryexpander
*/
var CSS = {
CONTENTNODE: 'content',
COLLAPSEALL: 'collapse-all',
DISABLED: 'disabled',
LOADED: 'loaded',
NOTLOADED: 'notloaded',
SECTIONCOLLAPSED: 'collapsed',
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',
COURSEBOX: '.coursebox',
COURSEBOXLISTENLINK: '.coursebox .moreinfo',
COURSEBOXSPINNERLOCATION: '.info .moreinfo',
COURSECATEGORYTREE: '.course_category_tree',
PARENTWITHCHILDREN: '.category'
},
NS = Y.namespace('Moodle.course.categoryexpander'),
TYPE_CATEGORY = 0,
TYPE_COURSE = 1,
URL = M.cfg.wwwroot + '/course/category.ajax.php';
/**
* Set up the category expander.
*
* No arguments are required.
*
* @method init
*/
NS.init = function() {
var doc = Y.one(Y.config.doc);
doc.delegate('click', this.toggle_category_expansion, SELECTORS.CATEGORYLISTENLINK, this);
doc.delegate('click', this.toggle_coursebox_expansion, SELECTORS.COURSEBOXLISTENLINK, this);
doc.delegate('click', this.collapse_expand_all, SELECTORS.COLLAPSEEXPAND, this);
// Only set up they keybaord listeners when tab is first pressed - it
// may never happen and modifying the DOM on a large number of nodes
// can be very expensive.
doc.once('key', this.setup_keyboard_listeners, 'tab', this);
};
/**
* Set up keyboard expansion for course content.
*
* This includes setting up the delegation but also adding the nodes to the
* tabflow.
*
* @method setup_keyboard_listeners
*/
NS.setup_keyboard_listeners = function() {
var doc = Y.one(Y.config.doc);
doc.all(SELECTORS.CATEGORYLISTENLINK, SELECTORS.COURSEBOXLISTENLINK, SELECTORS.COLLAPSEEXPAND).setAttribute('tabindex', '0');
Y.one(Y.config.doc).delegate('key', this.toggle_category_expansion, 'enter', SELECTORS.CATEGORYLISTENLINK, this);
Y.one(Y.config.doc).delegate('key', this.toggle_coursebox_expansion, 'enter', SELECTORS.COURSEBOXLISTENLINK, this);
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.
*
* @method toggle_category_expansion
* @private
* @param {EventFacade} e
*/
NS.toggle_category_expansion = function(e) {
// 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 toggle_category_expansion with the _toggle_category_expansion function to ensure that
// this function isn't called in the future, and call it for the first time.
NS.toggle_category_expansion = NS._toggle_category_expansion;
NS.toggle_category_expansion(e);
});
};
/**
* Toggle the animation of the clicked coursebox node.
*
* @method toggle_coursebox_expansion
* @private
* @param {EventFacade} e
*/
NS.toggle_coursebox_expansion = function(e) {
// 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 toggle_coursebox_expansion with the _toggle_coursebox_expansion function to ensure that
// this function isn't called in the future, and call it for the first time.
NS.toggle_coursebox_expansion = NS._toggle_coursebox_expansion;
NS.toggle_coursebox_expansion(e);
});
e.preventDefault();
};
NS._toggle_coursebox_expansion = function(e) {
var courseboxnode;
// Grab the parent category container - this is where the new content will be added.
courseboxnode = e.target.ancestor(SELECTORS.COURSEBOX, true);
e.preventDefault();
if (courseboxnode.hasClass(CSS.LOADED)) {
// We've already loaded this content so we just need to toggle the view of it.
this.run_expansion(courseboxnode);
return;
}
this._toggle_generic_expansion({
parentnode: courseboxnode,
childnode: courseboxnode.one(SELECTORS.CONTENTNODE),
spinnerhandle: SELECTORS.COURSEBOXSPINNERLOCATION,
data: {
courseid: courseboxnode.getData('courseid'),
type: TYPE_COURSE
}
});
};
NS._toggle_category_expansion = function(e) {
var categorynode,
categoryid,
depth;
if (e.target.test('a') || e.target.test('img')) {
// Return early if either an anchor or an image were clicked.
return;
}
// Grab the parent category container - this is where the new content will be added.
categorynode = e.target.ancestor(SELECTORS.PARENTWITHCHILDREN, true);
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
}
});
};
/**
* Wrapper function to handle toggling of generic types.
*
* @method _toggle_generic_expansion
* @private
* @param {Object} config
*/
NS._toggle_generic_expansion = function(config) {
var spinner;
if (config.spinnerhandle) {
// Add a spinner to give some feedback to the user.
spinner = M.util.add_spinner(Y, config.parentnode.one(config.spinnerhandle)).show();
}
// Fetch the data.
Y.io(URL, {
method: 'POST',
context: this,
on: {
complete: this.process_results
},
data: config.data,
"arguments": {
parentnode: config.parentnode,
childnode: config.childnode,
spinner: spinner
}
});
};
/**
* Apply the animation on the supplied node.
*
* @method run_expansion
* @private
* @param {Node} categorynode The node to apply the animation to
*/
NS.run_expansion = function(categorynode) {
var categorychildren = categorynode.one(SELECTORS.CONTENTNODE),
self = this,
ancestor = categorynode.ancestor(SELECTORS.COURSECATEGORYTREE);
// Add our animation to the categorychildren.
this.add_animation(categorychildren);
// If we already have the class, remove it before showing otherwise we perform the
// animation whilst the node is hidden.
if (categorynode.hasClass(CSS.SECTIONCOLLAPSED)) {
// To avoid a jump effect, we need to set the height of the children to 0 here before removing the SECTIONCOLLAPSED class.
categorychildren.setStyle('height', '0');
categorynode.removeClass(CSS.SECTIONCOLLAPSED);
categorynode.setAttribute('aria-expanded', 'true');
categorychildren.fx.set('reverse', false);
} else {
categorychildren.fx.set('reverse', true);
categorychildren.fx.once('end', function(e, categorynode) {
categorynode.addClass(CSS.SECTIONCOLLAPSED);
categorynode.setAttribute('aria-expanded', 'false');
}, this, categorynode);
}
categorychildren.fx.once('end', function(e, categorychildren) {
// Remove the styles that the animation has set.
categorychildren.setStyles({
height: '',
opacity: ''
});
// To avoid memory gobbling, remove the animation. It will be added back if called again.
this.destroy();
self.update_collapsible_actions(ancestor);
}, categorychildren.fx, categorychildren);
// Now that everything has been set up, run the animation.
categorychildren.fx.run();
};
/**
* Toggle collapsing of all nodes.
*
* @method collapse_expand_all
* @private
* @param {EventFacade} e
*/
NS.collapse_expand_all = function(e) {
// 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 collapse_expand_all with the _collapse_expand_all function to ensure that
// this function isn't called in the future, and call it for the first time.
NS.collapse_expand_all = NS._collapse_expand_all;
NS.collapse_expand_all(e);
});
e.preventDefault();
};
NS._collapse_expand_all = function(e) {
// The collapse/expand button has no actual target but we need to prevent it's default
// action to ensure we don't make the page reload/jump.
e.preventDefault();
if (e.currentTarget.hasClass(CSS.DISABLED)) {
// The collapse/expand is currently disabled.
return;
}
var ancestor = e.currentTarget.ancestor(SELECTORS.COURSECATEGORYTREE);
if (!ancestor) {
return;
}
var collapseall = ancestor.one(SELECTORS.COLLAPSEEXPAND);
if (collapseall.hasClass(CSS.COLLAPSEALL)) {
this.collapse_all(ancestor);
} else {
this.expand_all(ancestor);
}
this.update_collapsible_actions(ancestor);
};
NS.expand_all = function(ancestor) {
var finalexpansions = [];
ancestor.all(SELECTORS.CATEGORYWITHCOLLAPSEDCHILDREN)
.each(function(c) {
if (c.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDCHILDREN)) {
// Expand the hidden children first without animation.
c.removeClass(CSS.SECTIONCOLLAPSED);
c.all(SELECTORS.WITHCHILDRENTREES).removeClass(CSS.SECTIONCOLLAPSED);
} else {
finalexpansions.push(c);
}
}, this);
// Run the final expansion with animation on the visible items.
Y.all(finalexpansions).each(function(c) {
this.expand_category(c);
}, this);
};
NS.collapse_all = function(ancestor) {
var finalcollapses = [];
ancestor.all(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN)
.each(function(c) {
if (c.ancestor(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN)) {
finalcollapses.push(c);
} else {
// Collapse the visible items first
this.run_expansion(c);
}
}, this);
// Run the final collapses now that the these are hidden hidden.
Y.all(finalcollapses).each(function(c) {
c.addClass(CSS.SECTIONCOLLAPSED);
c.all(SELECTORS.LOADEDTREES).addClass(CSS.SECTIONCOLLAPSED);
}, this);
};
NS.update_collapsible_actions = function(ancestor) {
var foundmaximisedchildren = false,
// Grab the anchor for the collapseexpand all link.
togglelink = ancestor.one(SELECTORS.COLLAPSEEXPAND);
if (!togglelink) {
// We should always have a togglelink but ensure.
return;
}
// Search for any visibly expanded children.
ancestor.all(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN).each(function(n) {
// If we can find any collapsed ancestors, skip.
if (n.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)) {
return false;
}
foundmaximisedchildren = true;
return true;
});
if (foundmaximisedchildren) {
// At least one maximised child found. Show the collapseall.
togglelink.setHTML(M.util.get_string('collapseall', 'moodle'))
.addClass(CSS.COLLAPSEALL)
.removeClass(CSS.DISABLED);
} else {
// No maximised children found but there are collapsed children. Show the expandall.
togglelink.setHTML(M.util.get_string('expandall', 'moodle'))
.removeClass(CSS.COLLAPSEALL)
.removeClass(CSS.DISABLED);
}
};
/**
* Process the data returned by Y.io.
* This includes appending it to the relevant part of the DOM, and applying our animations.
*
* @method process_results
* @private
* @param {String} tid The Transaction ID
* @param {Object} response The Reponse returned by Y.IO
* @param {Object} ioargs The additional arguments provided by Y.IO
*/
NS.process_results = function(tid, response, args) {
var newnode,
data;
try {
data = Y.JSON.parse(response.responseText);
if (data.error) {
return new M.core.ajaxException(data);
}
} catch (e) {
return new M.core.exception(e);
}
// Insert the returned data into a new Node.
newnode = Y.Node.create(data);
// Append to the existing child location.
args.childnode.appendChild(newnode);
// Now that we have content, we can swap the classes on the toggled container.
args.parentnode
.addClass(CSS.LOADED)
.removeClass(CSS.NOTLOADED);
// Toggle the open/close status of the node now that it's content has been loaded.
this.run_expansion(args.parentnode);
// Remove the spinner now that we've started to show the content.
if (args.spinner) {
args.spinner.hide().destroy();
}
};
/**
* Add our animation to the Node.
*
* @method add_animation
* @private
* @param {Node} childnode
*/
NS.add_animation = function(childnode) {
if (typeof childnode.fx !== "undefined") {
// The animation has already been plugged to this node.
return childnode;
}
childnode.plug(Y.Plugin.NodeFX, {
from: {
height: 0,
opacity: 0
},
to: {
// This sets a dynamic height in case the node content changes.
height: function(node) {
// Get expanded height (offsetHeight may be zero).
return node.get('scrollHeight');
},
opacity: 1
},
duration: 0.2
});
return childnode;
};
}, '@VERSION@', {"requires": ["node", "event-key"]});
@@ -0,0 +1,240 @@
YUI.add('moodle-course-coursebase', function (Y, NAME) {
/**
* The coursebase class to provide shared functionality to Modules within
* Moodle.
*
* @module moodle-course-coursebase
*/
var COURSEBASENAME = 'course-coursebase';
var COURSEBASE = function() {
COURSEBASE.superclass.constructor.apply(this, arguments);
};
/**
* The coursebase class to provide shared functionality to Modules within
* Moodle.
*
* @class M.course.coursebase
* @constructor
*/
Y.extend(COURSEBASE, Y.Base, {
// Registered Modules
registermodules: [],
/**
* Register a new Javascript Module
*
* @method register_module
* @param {Object} The instantiated module to call functions on
* @chainable
*/
register_module: function(object) {
this.registermodules.push(object);
return this;
},
/**
* Invoke the specified function in all registered modules with the given arguments
*
* @method invoke_function
* @param {String} functionname The name of the function to call
* @param {mixed} args The argument supplied to the function
* @chainable
*/
invoke_function: function(functionname, args) {
var module;
for (module in this.registermodules) {
if (functionname in this.registermodules[module]) {
this.registermodules[module][functionname](args);
}
}
return this;
}
}, {
NAME: COURSEBASENAME,
ATTRS: {}
});
// Ensure that M.course exists and that coursebase is initialised correctly
M.course = M.course || {};
M.course.coursebase = M.course.coursebase || new COURSEBASE();
// Abstract functions that needs to be defined per format (course/format/somename/format.js)
M.course.format = M.course.format || {};
/**
* Swap section (should be defined in format.js if requred)
*
* @method M.course.format.swap_sections
* @param {YUI} Y YUI3 instance
* @param {string} node1 node to swap to
* @param {string} node2 node to swap with
* @return {NodeList} section list
*/
M.course.format.swap_sections = M.course.format.swap_sections || function() {
return null;
};
/**
* Process sections after ajax response (should be defined in format.js)
* If some response is expected, we pass it over to format, as it knows better
* hot to process it.
*
* @method M.course.format.process_sections
* @param {YUI} Y YUI3 instance
* @param {NodeList} list of sections
* @param {array} response ajax response
* @param {string} sectionfrom first affected section
* @param {string} sectionto last affected section
*/
M.course.format.process_sections = M.course.format.process_sections || function() {
return null;
};
/**
* Get sections config for this format, for examples see function definition
* in the formats.
*
* @method M.course.format.get_config
* @return {object} section list configuration
*/
M.course.format.get_config = M.course.format.get_config || function() {
return {
container_node: null, // compulsory
container_class: null, // compulsory
section_wrapper_node: null, // optional
section_wrapper_class: null, // optional
section_node: null, // compulsory
section_class: null // compulsory
};
};
/**
* Get section list for this format (usually items inside container_node.container_class selector)
*
* @method M.course.format.get_section_selector
* @param {YUI} Y YUI3 instance
* @return {string} section selector
*/
M.course.format.get_section_selector = M.course.format.get_section_selector || function() {
var config = M.course.format.get_config();
if (config.section_node && config.section_class) {
return config.section_node + '.' + config.section_class;
}
Y.log('section_node and section_class are not defined in M.course.format.get_config', 'warn', 'moodle-course-coursebase');
return null;
};
/**
* Get section wraper for this format (only used in case when each
* container_node.container_class node is wrapped in some other element).
*
* @method M.course.format.get_section_wrapper
* @param {YUI} Y YUI3 instance
* @return {string} section wrapper selector or M.course.format.get_section_selector
* if section_wrapper_node and section_wrapper_class are not defined in the format config.
*/
M.course.format.get_section_wrapper = M.course.format.get_section_wrapper || function(Y) {
var config = M.course.format.get_config();
if (config.section_wrapper_node && config.section_wrapper_class) {
return config.section_wrapper_node + '.' + config.section_wrapper_class;
}
return M.course.format.get_section_selector(Y);
};
/**
* Get the tag of container node
*
* @method M.course.format.get_containernode
* @return {string} tag of container node.
*/
M.course.format.get_containernode = M.course.format.get_containernode || function() {
var config = M.course.format.get_config();
if (config.container_node) {
return config.container_node;
} else {
Y.log('container_node is not defined in M.course.format.get_config', 'warn', 'moodle-course-coursebase');
}
};
/**
* Get the class of container node
*
* @method M.course.format.get_containerclass
* @return {string} class of the container node.
*/
M.course.format.get_containerclass = M.course.format.get_containerclass || function() {
var config = M.course.format.get_config();
if (config.container_class) {
return config.container_class;
} else {
Y.log('container_class is not defined in M.course.format.get_config', 'warn', 'moodle-course-coursebase');
}
};
/**
* Get the tag of draggable node (section wrapper if exists, otherwise section)
*
* @method M.course.format.get_sectionwrappernode
* @return {string} tag of the draggable node.
*/
M.course.format.get_sectionwrappernode = M.course.format.get_sectionwrappernode || function() {
var config = M.course.format.get_config();
if (config.section_wrapper_node) {
return config.section_wrapper_node;
} else {
return config.section_node;
}
};
/**
* Get the class of draggable node (section wrapper if exists, otherwise section)
*
* @method M.course.format.get_sectionwrapperclass
* @return {string} class of the draggable node.
*/
M.course.format.get_sectionwrapperclass = M.course.format.get_sectionwrapperclass || function() {
var config = M.course.format.get_config();
if (config.section_wrapper_class) {
return config.section_wrapper_class;
} else {
return config.section_class;
}
};
/**
* Get the tag of section node
*
* @method M.course.format.get_sectionnode
* @return {string} tag of section node.
*/
M.course.format.get_sectionnode = M.course.format.get_sectionnode || function() {
var config = M.course.format.get_config();
if (config.section_node) {
return config.section_node;
} else {
Y.log('section_node is not defined in M.course.format.get_config', 'warn', 'moodle-course-coursebase');
}
};
/**
* Get the class of section node
*
* @method M.course.format.get_sectionclass
* @return {string} class of the section node.
*/
M.course.format.get_sectionclass = M.course.format.get_sectionclass || function() {
var config = M.course.format.get_config();
if (config.section_class) {
return config.section_class;
} else {
Y.log('section_class is not defined in M.course.format.get_config', 'warn', 'moodle-course-coursebase');
}
};
}, '@VERSION@', {"requires": ["base", "node"]});
@@ -0,0 +1 @@
YUI.add("moodle-course-coursebase",function(e,o){var r=function(){r.superclass.constructor.apply(this,arguments)};e.extend(r,e.Base,{registermodules:[],register_module:function(e){return this.registermodules.push(e),this},invoke_function:function(e,o){for(var r in this.registermodules)e in this.registermodules[r]&&this.registermodules[r][e](o);return this}},{NAME:"course-coursebase",ATTRS:{}}),M.course=M.course||{},M.course.coursebase=M.course.coursebase||new r,M.course.format=M.course.format||{},M.course.format.swap_sections=M.course.format.swap_sections||function(){return null},M.course.format.process_sections=M.course.format.process_sections||function(){return null},M.course.format.get_config=M.course.format.get_config||function(){return{container_node:null,container_class:null,section_wrapper_node:null,section_wrapper_class:null,section_node:null,section_class:null}},M.course.format.get_section_selector=M.course.format.get_section_selector||function(){var e=M.course.format.get_config();return e.section_node&&e.section_class?e.section_node+"."+e.section_class:null},M.course.format.get_section_wrapper=M.course.format.get_section_wrapper||function(e){var o=M.course.format.get_config();return o.section_wrapper_node&&o.section_wrapper_class?o.section_wrapper_node+"."+o.section_wrapper_class:M.course.format.get_section_selector(e)},M.course.format.get_containernode=M.course.format.get_containernode||function(){var e=M.course.format.get_config();if(e.container_node)return e.container_node},M.course.format.get_containerclass=M.course.format.get_containerclass||function(){var e=M.course.format.get_config();if(e.container_class)return e.container_class},M.course.format.get_sectionwrappernode=M.course.format.get_sectionwrappernode||function(){var e=M.course.format.get_config();return e.section_wrapper_node||e.section_node},M.course.format.get_sectionwrapperclass=M.course.format.get_sectionwrapperclass||function(){var e=M.course.format.get_config();return e.section_wrapper_class||e.section_class},M.course.format.get_sectionnode=M.course.format.get_sectionnode||function(){var e=M.course.format.get_config();if(e.section_node)return e.section_node},M.course.format.get_sectionclass=M.course.format.get_sectionclass||function(){var e=M.course.format.get_config();if(e.section_class)return e.section_class}},"@VERSION@",{requires:["base","node"]});
@@ -0,0 +1,235 @@
YUI.add('moodle-course-coursebase', function (Y, NAME) {
/**
* The coursebase class to provide shared functionality to Modules within
* Moodle.
*
* @module moodle-course-coursebase
*/
var COURSEBASENAME = 'course-coursebase';
var COURSEBASE = function() {
COURSEBASE.superclass.constructor.apply(this, arguments);
};
/**
* The coursebase class to provide shared functionality to Modules within
* Moodle.
*
* @class M.course.coursebase
* @constructor
*/
Y.extend(COURSEBASE, Y.Base, {
// Registered Modules
registermodules: [],
/**
* Register a new Javascript Module
*
* @method register_module
* @param {Object} The instantiated module to call functions on
* @chainable
*/
register_module: function(object) {
this.registermodules.push(object);
return this;
},
/**
* Invoke the specified function in all registered modules with the given arguments
*
* @method invoke_function
* @param {String} functionname The name of the function to call
* @param {mixed} args The argument supplied to the function
* @chainable
*/
invoke_function: function(functionname, args) {
var module;
for (module in this.registermodules) {
if (functionname in this.registermodules[module]) {
this.registermodules[module][functionname](args);
}
}
return this;
}
}, {
NAME: COURSEBASENAME,
ATTRS: {}
});
// Ensure that M.course exists and that coursebase is initialised correctly
M.course = M.course || {};
M.course.coursebase = M.course.coursebase || new COURSEBASE();
// Abstract functions that needs to be defined per format (course/format/somename/format.js)
M.course.format = M.course.format || {};
/**
* Swap section (should be defined in format.js if requred)
*
* @method M.course.format.swap_sections
* @param {YUI} Y YUI3 instance
* @param {string} node1 node to swap to
* @param {string} node2 node to swap with
* @return {NodeList} section list
*/
M.course.format.swap_sections = M.course.format.swap_sections || function() {
return null;
};
/**
* Process sections after ajax response (should be defined in format.js)
* If some response is expected, we pass it over to format, as it knows better
* hot to process it.
*
* @method M.course.format.process_sections
* @param {YUI} Y YUI3 instance
* @param {NodeList} list of sections
* @param {array} response ajax response
* @param {string} sectionfrom first affected section
* @param {string} sectionto last affected section
*/
M.course.format.process_sections = M.course.format.process_sections || function() {
return null;
};
/**
* Get sections config for this format, for examples see function definition
* in the formats.
*
* @method M.course.format.get_config
* @return {object} section list configuration
*/
M.course.format.get_config = M.course.format.get_config || function() {
return {
container_node: null, // compulsory
container_class: null, // compulsory
section_wrapper_node: null, // optional
section_wrapper_class: null, // optional
section_node: null, // compulsory
section_class: null // compulsory
};
};
/**
* Get section list for this format (usually items inside container_node.container_class selector)
*
* @method M.course.format.get_section_selector
* @param {YUI} Y YUI3 instance
* @return {string} section selector
*/
M.course.format.get_section_selector = M.course.format.get_section_selector || function() {
var config = M.course.format.get_config();
if (config.section_node && config.section_class) {
return config.section_node + '.' + config.section_class;
}
return null;
};
/**
* Get section wraper for this format (only used in case when each
* container_node.container_class node is wrapped in some other element).
*
* @method M.course.format.get_section_wrapper
* @param {YUI} Y YUI3 instance
* @return {string} section wrapper selector or M.course.format.get_section_selector
* if section_wrapper_node and section_wrapper_class are not defined in the format config.
*/
M.course.format.get_section_wrapper = M.course.format.get_section_wrapper || function(Y) {
var config = M.course.format.get_config();
if (config.section_wrapper_node && config.section_wrapper_class) {
return config.section_wrapper_node + '.' + config.section_wrapper_class;
}
return M.course.format.get_section_selector(Y);
};
/**
* Get the tag of container node
*
* @method M.course.format.get_containernode
* @return {string} tag of container node.
*/
M.course.format.get_containernode = M.course.format.get_containernode || function() {
var config = M.course.format.get_config();
if (config.container_node) {
return config.container_node;
} else {
}
};
/**
* Get the class of container node
*
* @method M.course.format.get_containerclass
* @return {string} class of the container node.
*/
M.course.format.get_containerclass = M.course.format.get_containerclass || function() {
var config = M.course.format.get_config();
if (config.container_class) {
return config.container_class;
} else {
}
};
/**
* Get the tag of draggable node (section wrapper if exists, otherwise section)
*
* @method M.course.format.get_sectionwrappernode
* @return {string} tag of the draggable node.
*/
M.course.format.get_sectionwrappernode = M.course.format.get_sectionwrappernode || function() {
var config = M.course.format.get_config();
if (config.section_wrapper_node) {
return config.section_wrapper_node;
} else {
return config.section_node;
}
};
/**
* Get the class of draggable node (section wrapper if exists, otherwise section)
*
* @method M.course.format.get_sectionwrapperclass
* @return {string} class of the draggable node.
*/
M.course.format.get_sectionwrapperclass = M.course.format.get_sectionwrapperclass || function() {
var config = M.course.format.get_config();
if (config.section_wrapper_class) {
return config.section_wrapper_class;
} else {
return config.section_class;
}
};
/**
* Get the tag of section node
*
* @method M.course.format.get_sectionnode
* @return {string} tag of section node.
*/
M.course.format.get_sectionnode = M.course.format.get_sectionnode || function() {
var config = M.course.format.get_config();
if (config.section_node) {
return config.section_node;
} else {
}
};
/**
* Get the class of section node
*
* @method M.course.format.get_sectionclass
* @return {string} class of the section node.
*/
M.course.format.get_sectionclass = M.course.format.get_sectionclass || function() {
var config = M.course.format.get_config();
if (config.section_class) {
return config.section_class;
} else {
}
};
}, '@VERSION@', {"requires": ["base", "node"]});
@@ -0,0 +1,575 @@
YUI.add('moodle-course-dragdrop', function (Y, NAME) {
/* eslint-disable no-unused-vars */
/**
* Drag and Drop for course sections and course modules.
*
* @module moodle-course-dragdrop
*/
var CSS = {
ACTIONAREA: '.actions',
ACTIVITY: 'activity',
ACTIVITYINSTANCE: 'activityinstance',
CONTENT: 'content',
COURSECONTENT: 'course-content',
EDITINGMOVE: 'editing_move',
ICONCLASS: 'iconsmall',
JUMPMENU: 'jumpmenu',
LEFT: 'left',
LIGHTBOX: 'lightbox',
MOVEDOWN: 'movedown',
MOVEUP: 'moveup',
PAGECONTENT: 'page-content',
RIGHT: 'right',
SECTION: 'section',
SECTIONADDMENUS: 'section_add_menus',
SECTIONHANDLE: 'section-handle',
SUMMARY: 'summary',
SECTIONDRAGGABLE: 'sectiondraggable'
};
M.course = M.course || {};
/**
* Section drag and drop.
*
* @class M.course.dragdrop.section
* @constructor
* @extends M.core.dragdrop
*/
var DRAGSECTION = function() {
DRAGSECTION.superclass.constructor.apply(this, arguments);
};
Y.extend(DRAGSECTION, M.core.dragdrop, {
sectionlistselector: null,
initializer: function() {
// Set group for parent class
this.groups = [CSS.SECTIONDRAGGABLE];
this.samenodeclass = M.course.format.get_sectionwrapperclass();
this.parentnodeclass = M.course.format.get_containerclass();
// Detect the direction of travel.
this.detectkeyboarddirection = true;
// Check if we are in single section mode
if (Y.Node.one('.' + CSS.JUMPMENU)) {
return false;
}
// Initialise sections dragging
this.sectionlistselector = M.course.format.get_section_wrapper(Y);
if (this.sectionlistselector) {
this.sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + this.sectionlistselector;
this.setup_for_section(this.sectionlistselector);
// Make each li element in the lists of sections draggable
var del = new Y.DD.Delegate({
container: '.' + CSS.COURSECONTENT,
nodes: '.' + CSS.SECTIONDRAGGABLE,
target: true,
handles: ['.' + CSS.LEFT],
dragConfig: {groups: this.groups}
});
del.dd.plug(Y.Plugin.DDProxy, {
// Don't move the node at the end of the drag
moveOnEnd: false
});
del.dd.plug(Y.Plugin.DDConstrained, {
// Keep it inside the .course-content
constrain: '#' + CSS.PAGECONTENT,
stickY: true
});
del.dd.plug(Y.Plugin.DDWinScroll);
}
},
/**
* Apply dragdrop features to the specified selector or node that refers to section(s)
*
* @method setup_for_section
* @param {String} baseselector The CSS selector or node to limit scope to
*/
setup_for_section: function(baseselector) {
Y.Node.all(baseselector).each(function(sectionnode) {
// Determine the section ID
var sectionid = Y.Moodle.core_course.util.section.getId(sectionnode);
// We skip the top section as it is not draggable
if (sectionid > 0) {
// Remove move icons
var movedown = sectionnode.one('.' + CSS.RIGHT + ' a.' + CSS.MOVEDOWN);
var moveup = sectionnode.one('.' + CSS.RIGHT + ' a.' + CSS.MOVEUP);
// Add dragger icon
var title = M.util.get_string('movesection', 'moodle', sectionid);
var cssleft = sectionnode.one('.' + CSS.LEFT);
if ((movedown || moveup) && cssleft) {
cssleft.setStyle('cursor', 'move');
cssleft.appendChild(this.get_drag_handle(title, CSS.SECTIONHANDLE, 'icon', true));
if (moveup) {
if (moveup.previous('br')) {
moveup.previous('br').remove();
} else if (moveup.next('br')) {
moveup.next('br').remove();
}
if (moveup.ancestor('.section_action_menu') && moveup.ancestor().get('nodeName').toLowerCase() == 'li') {
moveup.ancestor().remove();
} else {
moveup.remove();
}
}
if (movedown) {
if (movedown.previous('br')) {
movedown.previous('br').remove();
} else if (movedown.next('br')) {
movedown.next('br').remove();
}
var movedownParentType = movedown.ancestor().get('nodeName').toLowerCase();
if (movedown.ancestor('.section_action_menu') && movedownParentType == 'li') {
movedown.ancestor().remove();
} else {
movedown.remove();
}
}
// This section can be moved - add the class to indicate this to Y.DD.
sectionnode.addClass(CSS.SECTIONDRAGGABLE);
}
}
}, this);
},
/*
* Drag-dropping related functions
*/
drag_start: function(e) {
// Get our drag object
var drag = e.target;
// This is the node that the user started to drag.
var node = drag.get('node');
// This is the container node that will follow the mouse around,
// or during a keyboard drag and drop the original node.
var dragnode = drag.get('dragNode');
if (node === dragnode) {
return;
}
// Creat a dummy structure of the outer elemnents for clean styles application
var containernode = Y.Node.create('<' + M.course.format.get_containernode() +
'></' + M.course.format.get_containernode() + '>');
containernode.addClass(M.course.format.get_containerclass());
var sectionnode = Y.Node.create('<' + M.course.format.get_sectionwrappernode() +
'></' + M.course.format.get_sectionwrappernode() + '>');
sectionnode.addClass(M.course.format.get_sectionwrapperclass());
sectionnode.setStyle('margin', 0);
sectionnode.setContent(node.get('innerHTML'));
containernode.appendChild(sectionnode);
dragnode.setContent(containernode);
dragnode.addClass(CSS.COURSECONTENT);
},
drag_dropmiss: function(e) {
// Missed the target, but we assume the user intended to drop it
// on the last last ghost node location, e.drag and e.drop should be
// prepared by global_drag_dropmiss parent so simulate drop_hit(e).
this.drop_hit(e);
},
get_section_index: function(node) {
var sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + M.course.format.get_section_selector(Y),
sectionList = Y.all(sectionlistselector),
nodeIndex = sectionList.indexOf(node),
zeroIndex = sectionList.indexOf(Y.one('#section-0'));
return (nodeIndex - zeroIndex);
},
drop_hit: function(e) {
var drag = e.drag;
// Get references to our nodes and their IDs.
var dragnode = drag.get('node'),
dragnodeid = Y.Moodle.core_course.util.section.getId(dragnode),
loopstart = dragnodeid,
dropnodeindex = this.get_section_index(dragnode),
loopend = dropnodeindex;
if (dragnodeid === dropnodeindex) {
Y.log("Skipping move - same location moving " + dragnodeid + " to " + dropnodeindex, 'debug', 'moodle-course-dragdrop');
return;
}
Y.log("Moving from position " + dragnodeid + " to position " + dropnodeindex, 'debug', 'moodle-course-dragdrop');
if (loopstart > loopend) {
// If we're going up, we need to swap the loop order
// because loops can't go backwards.
loopstart = dropnodeindex;
loopend = dragnodeid;
}
// Get the list of nodes.
drag.get('dragNode').removeClass(CSS.COURSECONTENT);
var sectionlist = Y.Node.all(this.sectionlistselector);
// Add a lightbox if it's not there.
var lightbox = M.util.add_lightbox(Y, dragnode);
// Handle any variables which we must pass via AJAX.
var params = {},
pageparams = this.get('config').pageparams,
varname;
for (varname in pageparams) {
if (!pageparams.hasOwnProperty(varname)) {
continue;
}
params[varname] = pageparams[varname];
}
// Prepare request parameters
params.sesskey = M.cfg.sesskey;
params.courseId = this.get('courseid');
params['class'] = 'section';
params.field = 'move';
params.id = dragnodeid;
params.value = dropnodeindex;
// Perform the AJAX request.
var uri = M.cfg.wwwroot + this.get('ajaxurl');
Y.io(uri, {
method: 'POST',
data: params,
on: {
start: function() {
lightbox.show();
},
success: function(tid, response) {
// Update section titles, we can't simply swap them as
// they might have custom title
try {
var responsetext = Y.JSON.parse(response.responseText);
if (responsetext.error) {
new M.core.ajaxException(responsetext);
}
M.course.format.process_sections(Y, sectionlist, responsetext, loopstart, loopend);
} catch (e) {
// Ignore.
}
// Update all of the section IDs - first unset them, then set them
// to avoid duplicates in the DOM.
var index;
// Classic bubble sort algorithm is applied to the section
// nodes between original drag node location and the new one.
var swapped = false;
do {
swapped = false;
for (index = loopstart; index <= loopend; index++) {
if (Y.Moodle.core_course.util.section.getId(sectionlist.item(index - 1)) >
Y.Moodle.core_course.util.section.getId(sectionlist.item(index))) {
Y.log("Swapping " + Y.Moodle.core_course.util.section.getId(sectionlist.item(index - 1)) +
" with " + Y.Moodle.core_course.util.section.getId(sectionlist.item(index)));
// Swap section id.
var sectionid = sectionlist.item(index - 1).get('id');
sectionlist.item(index - 1).set('id', sectionlist.item(index).get('id'));
sectionlist.item(index).set('id', sectionid);
// See what format needs to swap.
M.course.format.swap_sections(Y, index - 1, index);
// Update flag.
swapped = true;
}
sectionlist.item(index).setAttribute('data-sectionid',
Y.Moodle.core_course.util.section.getId(sectionlist.item(index)));
}
loopend = loopend - 1;
} while (swapped);
window.setTimeout(function() {
lightbox.hide();
}, 250);
// Update course state.
M.course.coursebase.invoke_function('updateMovedSectionState');
},
failure: function(tid, response) {
this.ajax_failure(response);
lightbox.hide();
}
},
context: this
});
}
}, {
NAME: 'course-dragdrop-section',
ATTRS: {
courseid: {
value: null
},
ajaxurl: {
value: 0
},
config: {
value: 0
}
}
});
M.course = M.course || {};
M.course.init_section_dragdrop = function(params) {
new DRAGSECTION(params);
};
/**
* Resource drag and drop.
*
* @class M.course.dragdrop.resource
* @constructor
* @extends M.core.dragdrop
*/
var DRAGRESOURCE = function() {
DRAGRESOURCE.superclass.constructor.apply(this, arguments);
};
Y.extend(DRAGRESOURCE, M.core.dragdrop, {
initializer: function() {
// Set group for parent class
this.groups = ['resource'];
this.samenodeclass = CSS.ACTIVITY;
this.parentnodeclass = CSS.SECTION;
this.samenodelabel = {
identifier: 'afterresource',
component: 'moodle'
};
this.parentnodelabel = {
identifier: 'totopofsection',
component: 'moodle'
};
// Go through all sections
var sectionlistselector = M.course.format.get_section_selector(Y);
if (sectionlistselector) {
sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + sectionlistselector;
this.setup_for_section(sectionlistselector);
// Initialise drag & drop for all resources/activities
var nodeselector = sectionlistselector.slice(CSS.COURSECONTENT.length + 2) + ' li.' + CSS.ACTIVITY;
var del = new Y.DD.Delegate({
container: '.' + CSS.COURSECONTENT,
nodes: nodeselector,
target: true,
handles: ['.' + CSS.EDITINGMOVE],
dragConfig: {groups: this.groups}
});
del.dd.plug(Y.Plugin.DDProxy, {
// Don't move the node at the end of the drag
moveOnEnd: false,
cloneNode: true
});
del.dd.plug(Y.Plugin.DDConstrained, {
// Keep it inside the .course-content
constrain: '#' + CSS.PAGECONTENT
});
del.dd.plug(Y.Plugin.DDWinScroll);
M.course.coursebase.register_module(this);
M.course.dragres = this;
}
},
/**
* Apply dragdrop features to the specified selector or node that refers to section(s)
*
* @method setup_for_section
* @param {String} baseselector The CSS selector or node to limit scope to
*/
setup_for_section: function(baseselector) {
Y.Node.all(baseselector).each(function(sectionnode) {
var resources = sectionnode.one('.' + CSS.CONTENT + ' ul.' + CSS.SECTION);
// See if resources ul exists, if not create one
if (!resources) {
resources = Y.Node.create('<ul></ul>');
resources.addClass(CSS.SECTION);
sectionnode.one('.' + CSS.CONTENT + ' div.' + CSS.SUMMARY).insert(resources, 'after');
}
resources.setAttribute('data-draggroups', this.groups.join(' '));
// Define empty ul as droptarget, so that item could be moved to empty list
new Y.DD.Drop({
node: resources,
groups: this.groups,
padding: '20 0 20 0'
});
// Initialise each resource/activity in this section
this.setup_for_resource('#' + sectionnode.get('id') + ' li.' + CSS.ACTIVITY);
}, this);
},
/**
* Apply dragdrop features to the specified selector or node that refers to resource(s)
*
* @method setup_for_resource
* @param {String} baseselector The CSS selector or node to limit scope to
*/
setup_for_resource: function(baseselector) {
Y.Node.all(baseselector).each(function(resourcesnode) {
var draggroups = resourcesnode.getData('draggroups');
if (!draggroups) {
// This Drop Node has not been set up. Configure it now.
resourcesnode.setAttribute('data-draggroups', this.groups.join(' '));
// Define empty ul as droptarget, so that item could be moved to empty list
new Y.DD.Drop({
node: resourcesnode,
groups: this.groups,
padding: '20 0 20 0'
});
}
// Replace move icons
var move = resourcesnode.one('a.' + CSS.EDITINGMOVE);
if (move) {
var sr = move.getData('sectionreturn');
move.replace(this.get_drag_handle(M.util.get_string('movecoursemodule', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true).setAttribute('data-sectionreturn', sr));
}
}, this);
},
drag_start: function(e) {
// Get our drag object
var drag = e.target;
if (drag.get('dragNode') === drag.get('node')) {
// We do not want to modify the contents of the real node.
// They will be the same during a keyboard drag and drop.
return;
}
drag.get('dragNode').setContent(drag.get('node').get('innerHTML'));
drag.get('dragNode').all('img.iconsmall').setStyle('vertical-align', 'baseline');
},
drag_dropmiss: function(e) {
// Missed the target, but we assume the user intended to drop it
// on the last last ghost node location, e.drag and e.drop should be
// prepared by global_drag_dropmiss parent so simulate drop_hit(e).
this.drop_hit(e);
},
drop_hit: function(e) {
var drag = e.drag;
// Get a reference to our drag node
var dragnode = drag.get('node');
var dropnode = e.drop.get('node');
// Add spinner if it not there
var actionarea = dragnode.one(CSS.ACTIONAREA);
var spinner = M.util.add_spinner(Y, actionarea);
var params = {};
// Handle any variables which we must pass back through to
var pageparams = this.get('config').pageparams;
var varname;
for (varname in pageparams) {
params[varname] = pageparams[varname];
}
// Variables needed to update the course state.
var cmid = Number(Y.Moodle.core_course.util.cm.getId(dragnode));
var beforeid = null;
// Prepare request parameters
params.sesskey = M.cfg.sesskey;
params.courseId = this.get('courseid');
params['class'] = 'resource';
params.field = 'move';
params.id = cmid;
params.sectionId = Y.Moodle.core_course.util.section.getId(dropnode.ancestor(M.course.format.get_section_wrapper(Y), true));
if (dragnode.next()) {
beforeid = Number(Y.Moodle.core_course.util.cm.getId(dragnode.next()));
params.beforeId = beforeid;
}
// Do AJAX request
var uri = M.cfg.wwwroot + this.get('ajaxurl');
Y.io(uri, {
method: 'POST',
data: params,
on: {
start: function() {
this.lock_drag_handle(drag, CSS.EDITINGMOVE);
spinner.show();
},
success: function(tid, response) {
var responsetext = Y.JSON.parse(response.responseText);
// Update course state.
M.course.coursebase.invoke_function(
'updateMovedCmState',
{
cmid: cmid,
beforeid: beforeid,
visible: responsetext.visible,
}
);
// Set visibility in course content.
var params = {element: dragnode, visible: responsetext.visible};
M.course.coursebase.invoke_function('set_visibility_resource_ui', params);
this.unlock_drag_handle(drag, CSS.EDITINGMOVE);
window.setTimeout(function() {
spinner.hide();
}, 250);
},
failure: function(tid, response) {
this.ajax_failure(response);
this.unlock_drag_handle(drag, CSS.SECTIONHANDLE);
spinner.hide();
// TODO: revert nodes location
}
},
context: this
});
}
}, {
NAME: 'course-dragdrop-resource',
ATTRS: {
courseid: {
value: null
},
ajaxurl: {
value: 0
},
config: {
value: 0
}
}
});
M.course = M.course || {};
M.course.init_resource_dragdrop = function(params) {
new DRAGRESOURCE(params);
};
}, '@VERSION@', {
"requires": [
"base",
"node",
"io",
"dom",
"dd",
"dd-scroll",
"moodle-core-dragdrop",
"moodle-core-notification",
"moodle-course-coursebase",
"moodle-course-util"
]
});
File diff suppressed because one or more lines are too long
@@ -0,0 +1,571 @@
YUI.add('moodle-course-dragdrop', function (Y, NAME) {
/* eslint-disable no-unused-vars */
/**
* Drag and Drop for course sections and course modules.
*
* @module moodle-course-dragdrop
*/
var CSS = {
ACTIONAREA: '.actions',
ACTIVITY: 'activity',
ACTIVITYINSTANCE: 'activityinstance',
CONTENT: 'content',
COURSECONTENT: 'course-content',
EDITINGMOVE: 'editing_move',
ICONCLASS: 'iconsmall',
JUMPMENU: 'jumpmenu',
LEFT: 'left',
LIGHTBOX: 'lightbox',
MOVEDOWN: 'movedown',
MOVEUP: 'moveup',
PAGECONTENT: 'page-content',
RIGHT: 'right',
SECTION: 'section',
SECTIONADDMENUS: 'section_add_menus',
SECTIONHANDLE: 'section-handle',
SUMMARY: 'summary',
SECTIONDRAGGABLE: 'sectiondraggable'
};
M.course = M.course || {};
/**
* Section drag and drop.
*
* @class M.course.dragdrop.section
* @constructor
* @extends M.core.dragdrop
*/
var DRAGSECTION = function() {
DRAGSECTION.superclass.constructor.apply(this, arguments);
};
Y.extend(DRAGSECTION, M.core.dragdrop, {
sectionlistselector: null,
initializer: function() {
// Set group for parent class
this.groups = [CSS.SECTIONDRAGGABLE];
this.samenodeclass = M.course.format.get_sectionwrapperclass();
this.parentnodeclass = M.course.format.get_containerclass();
// Detect the direction of travel.
this.detectkeyboarddirection = true;
// Check if we are in single section mode
if (Y.Node.one('.' + CSS.JUMPMENU)) {
return false;
}
// Initialise sections dragging
this.sectionlistselector = M.course.format.get_section_wrapper(Y);
if (this.sectionlistselector) {
this.sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + this.sectionlistselector;
this.setup_for_section(this.sectionlistselector);
// Make each li element in the lists of sections draggable
var del = new Y.DD.Delegate({
container: '.' + CSS.COURSECONTENT,
nodes: '.' + CSS.SECTIONDRAGGABLE,
target: true,
handles: ['.' + CSS.LEFT],
dragConfig: {groups: this.groups}
});
del.dd.plug(Y.Plugin.DDProxy, {
// Don't move the node at the end of the drag
moveOnEnd: false
});
del.dd.plug(Y.Plugin.DDConstrained, {
// Keep it inside the .course-content
constrain: '#' + CSS.PAGECONTENT,
stickY: true
});
del.dd.plug(Y.Plugin.DDWinScroll);
}
},
/**
* Apply dragdrop features to the specified selector or node that refers to section(s)
*
* @method setup_for_section
* @param {String} baseselector The CSS selector or node to limit scope to
*/
setup_for_section: function(baseselector) {
Y.Node.all(baseselector).each(function(sectionnode) {
// Determine the section ID
var sectionid = Y.Moodle.core_course.util.section.getId(sectionnode);
// We skip the top section as it is not draggable
if (sectionid > 0) {
// Remove move icons
var movedown = sectionnode.one('.' + CSS.RIGHT + ' a.' + CSS.MOVEDOWN);
var moveup = sectionnode.one('.' + CSS.RIGHT + ' a.' + CSS.MOVEUP);
// Add dragger icon
var title = M.util.get_string('movesection', 'moodle', sectionid);
var cssleft = sectionnode.one('.' + CSS.LEFT);
if ((movedown || moveup) && cssleft) {
cssleft.setStyle('cursor', 'move');
cssleft.appendChild(this.get_drag_handle(title, CSS.SECTIONHANDLE, 'icon', true));
if (moveup) {
if (moveup.previous('br')) {
moveup.previous('br').remove();
} else if (moveup.next('br')) {
moveup.next('br').remove();
}
if (moveup.ancestor('.section_action_menu') && moveup.ancestor().get('nodeName').toLowerCase() == 'li') {
moveup.ancestor().remove();
} else {
moveup.remove();
}
}
if (movedown) {
if (movedown.previous('br')) {
movedown.previous('br').remove();
} else if (movedown.next('br')) {
movedown.next('br').remove();
}
var movedownParentType = movedown.ancestor().get('nodeName').toLowerCase();
if (movedown.ancestor('.section_action_menu') && movedownParentType == 'li') {
movedown.ancestor().remove();
} else {
movedown.remove();
}
}
// This section can be moved - add the class to indicate this to Y.DD.
sectionnode.addClass(CSS.SECTIONDRAGGABLE);
}
}
}, this);
},
/*
* Drag-dropping related functions
*/
drag_start: function(e) {
// Get our drag object
var drag = e.target;
// This is the node that the user started to drag.
var node = drag.get('node');
// This is the container node that will follow the mouse around,
// or during a keyboard drag and drop the original node.
var dragnode = drag.get('dragNode');
if (node === dragnode) {
return;
}
// Creat a dummy structure of the outer elemnents for clean styles application
var containernode = Y.Node.create('<' + M.course.format.get_containernode() +
'></' + M.course.format.get_containernode() + '>');
containernode.addClass(M.course.format.get_containerclass());
var sectionnode = Y.Node.create('<' + M.course.format.get_sectionwrappernode() +
'></' + M.course.format.get_sectionwrappernode() + '>');
sectionnode.addClass(M.course.format.get_sectionwrapperclass());
sectionnode.setStyle('margin', 0);
sectionnode.setContent(node.get('innerHTML'));
containernode.appendChild(sectionnode);
dragnode.setContent(containernode);
dragnode.addClass(CSS.COURSECONTENT);
},
drag_dropmiss: function(e) {
// Missed the target, but we assume the user intended to drop it
// on the last last ghost node location, e.drag and e.drop should be
// prepared by global_drag_dropmiss parent so simulate drop_hit(e).
this.drop_hit(e);
},
get_section_index: function(node) {
var sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + M.course.format.get_section_selector(Y),
sectionList = Y.all(sectionlistselector),
nodeIndex = sectionList.indexOf(node),
zeroIndex = sectionList.indexOf(Y.one('#section-0'));
return (nodeIndex - zeroIndex);
},
drop_hit: function(e) {
var drag = e.drag;
// Get references to our nodes and their IDs.
var dragnode = drag.get('node'),
dragnodeid = Y.Moodle.core_course.util.section.getId(dragnode),
loopstart = dragnodeid,
dropnodeindex = this.get_section_index(dragnode),
loopend = dropnodeindex;
if (dragnodeid === dropnodeindex) {
return;
}
if (loopstart > loopend) {
// If we're going up, we need to swap the loop order
// because loops can't go backwards.
loopstart = dropnodeindex;
loopend = dragnodeid;
}
// Get the list of nodes.
drag.get('dragNode').removeClass(CSS.COURSECONTENT);
var sectionlist = Y.Node.all(this.sectionlistselector);
// Add a lightbox if it's not there.
var lightbox = M.util.add_lightbox(Y, dragnode);
// Handle any variables which we must pass via AJAX.
var params = {},
pageparams = this.get('config').pageparams,
varname;
for (varname in pageparams) {
if (!pageparams.hasOwnProperty(varname)) {
continue;
}
params[varname] = pageparams[varname];
}
// Prepare request parameters
params.sesskey = M.cfg.sesskey;
params.courseId = this.get('courseid');
params['class'] = 'section';
params.field = 'move';
params.id = dragnodeid;
params.value = dropnodeindex;
// Perform the AJAX request.
var uri = M.cfg.wwwroot + this.get('ajaxurl');
Y.io(uri, {
method: 'POST',
data: params,
on: {
start: function() {
lightbox.show();
},
success: function(tid, response) {
// Update section titles, we can't simply swap them as
// they might have custom title
try {
var responsetext = Y.JSON.parse(response.responseText);
if (responsetext.error) {
new M.core.ajaxException(responsetext);
}
M.course.format.process_sections(Y, sectionlist, responsetext, loopstart, loopend);
} catch (e) {
// Ignore.
}
// Update all of the section IDs - first unset them, then set them
// to avoid duplicates in the DOM.
var index;
// Classic bubble sort algorithm is applied to the section
// nodes between original drag node location and the new one.
var swapped = false;
do {
swapped = false;
for (index = loopstart; index <= loopend; index++) {
if (Y.Moodle.core_course.util.section.getId(sectionlist.item(index - 1)) >
Y.Moodle.core_course.util.section.getId(sectionlist.item(index))) {
// Swap section id.
var sectionid = sectionlist.item(index - 1).get('id');
sectionlist.item(index - 1).set('id', sectionlist.item(index).get('id'));
sectionlist.item(index).set('id', sectionid);
// See what format needs to swap.
M.course.format.swap_sections(Y, index - 1, index);
// Update flag.
swapped = true;
}
sectionlist.item(index).setAttribute('data-sectionid',
Y.Moodle.core_course.util.section.getId(sectionlist.item(index)));
}
loopend = loopend - 1;
} while (swapped);
window.setTimeout(function() {
lightbox.hide();
}, 250);
// Update course state.
M.course.coursebase.invoke_function('updateMovedSectionState');
},
failure: function(tid, response) {
this.ajax_failure(response);
lightbox.hide();
}
},
context: this
});
}
}, {
NAME: 'course-dragdrop-section',
ATTRS: {
courseid: {
value: null
},
ajaxurl: {
value: 0
},
config: {
value: 0
}
}
});
M.course = M.course || {};
M.course.init_section_dragdrop = function(params) {
new DRAGSECTION(params);
};
/**
* Resource drag and drop.
*
* @class M.course.dragdrop.resource
* @constructor
* @extends M.core.dragdrop
*/
var DRAGRESOURCE = function() {
DRAGRESOURCE.superclass.constructor.apply(this, arguments);
};
Y.extend(DRAGRESOURCE, M.core.dragdrop, {
initializer: function() {
// Set group for parent class
this.groups = ['resource'];
this.samenodeclass = CSS.ACTIVITY;
this.parentnodeclass = CSS.SECTION;
this.samenodelabel = {
identifier: 'afterresource',
component: 'moodle'
};
this.parentnodelabel = {
identifier: 'totopofsection',
component: 'moodle'
};
// Go through all sections
var sectionlistselector = M.course.format.get_section_selector(Y);
if (sectionlistselector) {
sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + sectionlistselector;
this.setup_for_section(sectionlistselector);
// Initialise drag & drop for all resources/activities
var nodeselector = sectionlistselector.slice(CSS.COURSECONTENT.length + 2) + ' li.' + CSS.ACTIVITY;
var del = new Y.DD.Delegate({
container: '.' + CSS.COURSECONTENT,
nodes: nodeselector,
target: true,
handles: ['.' + CSS.EDITINGMOVE],
dragConfig: {groups: this.groups}
});
del.dd.plug(Y.Plugin.DDProxy, {
// Don't move the node at the end of the drag
moveOnEnd: false,
cloneNode: true
});
del.dd.plug(Y.Plugin.DDConstrained, {
// Keep it inside the .course-content
constrain: '#' + CSS.PAGECONTENT
});
del.dd.plug(Y.Plugin.DDWinScroll);
M.course.coursebase.register_module(this);
M.course.dragres = this;
}
},
/**
* Apply dragdrop features to the specified selector or node that refers to section(s)
*
* @method setup_for_section
* @param {String} baseselector The CSS selector or node to limit scope to
*/
setup_for_section: function(baseselector) {
Y.Node.all(baseselector).each(function(sectionnode) {
var resources = sectionnode.one('.' + CSS.CONTENT + ' ul.' + CSS.SECTION);
// See if resources ul exists, if not create one
if (!resources) {
resources = Y.Node.create('<ul></ul>');
resources.addClass(CSS.SECTION);
sectionnode.one('.' + CSS.CONTENT + ' div.' + CSS.SUMMARY).insert(resources, 'after');
}
resources.setAttribute('data-draggroups', this.groups.join(' '));
// Define empty ul as droptarget, so that item could be moved to empty list
new Y.DD.Drop({
node: resources,
groups: this.groups,
padding: '20 0 20 0'
});
// Initialise each resource/activity in this section
this.setup_for_resource('#' + sectionnode.get('id') + ' li.' + CSS.ACTIVITY);
}, this);
},
/**
* Apply dragdrop features to the specified selector or node that refers to resource(s)
*
* @method setup_for_resource
* @param {String} baseselector The CSS selector or node to limit scope to
*/
setup_for_resource: function(baseselector) {
Y.Node.all(baseselector).each(function(resourcesnode) {
var draggroups = resourcesnode.getData('draggroups');
if (!draggroups) {
// This Drop Node has not been set up. Configure it now.
resourcesnode.setAttribute('data-draggroups', this.groups.join(' '));
// Define empty ul as droptarget, so that item could be moved to empty list
new Y.DD.Drop({
node: resourcesnode,
groups: this.groups,
padding: '20 0 20 0'
});
}
// Replace move icons
var move = resourcesnode.one('a.' + CSS.EDITINGMOVE);
if (move) {
var sr = move.getData('sectionreturn');
move.replace(this.get_drag_handle(M.util.get_string('movecoursemodule', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true).setAttribute('data-sectionreturn', sr));
}
}, this);
},
drag_start: function(e) {
// Get our drag object
var drag = e.target;
if (drag.get('dragNode') === drag.get('node')) {
// We do not want to modify the contents of the real node.
// They will be the same during a keyboard drag and drop.
return;
}
drag.get('dragNode').setContent(drag.get('node').get('innerHTML'));
drag.get('dragNode').all('img.iconsmall').setStyle('vertical-align', 'baseline');
},
drag_dropmiss: function(e) {
// Missed the target, but we assume the user intended to drop it
// on the last last ghost node location, e.drag and e.drop should be
// prepared by global_drag_dropmiss parent so simulate drop_hit(e).
this.drop_hit(e);
},
drop_hit: function(e) {
var drag = e.drag;
// Get a reference to our drag node
var dragnode = drag.get('node');
var dropnode = e.drop.get('node');
// Add spinner if it not there
var actionarea = dragnode.one(CSS.ACTIONAREA);
var spinner = M.util.add_spinner(Y, actionarea);
var params = {};
// Handle any variables which we must pass back through to
var pageparams = this.get('config').pageparams;
var varname;
for (varname in pageparams) {
params[varname] = pageparams[varname];
}
// Variables needed to update the course state.
var cmid = Number(Y.Moodle.core_course.util.cm.getId(dragnode));
var beforeid = null;
// Prepare request parameters
params.sesskey = M.cfg.sesskey;
params.courseId = this.get('courseid');
params['class'] = 'resource';
params.field = 'move';
params.id = cmid;
params.sectionId = Y.Moodle.core_course.util.section.getId(dropnode.ancestor(M.course.format.get_section_wrapper(Y), true));
if (dragnode.next()) {
beforeid = Number(Y.Moodle.core_course.util.cm.getId(dragnode.next()));
params.beforeId = beforeid;
}
// Do AJAX request
var uri = M.cfg.wwwroot + this.get('ajaxurl');
Y.io(uri, {
method: 'POST',
data: params,
on: {
start: function() {
this.lock_drag_handle(drag, CSS.EDITINGMOVE);
spinner.show();
},
success: function(tid, response) {
var responsetext = Y.JSON.parse(response.responseText);
// Update course state.
M.course.coursebase.invoke_function(
'updateMovedCmState',
{
cmid: cmid,
beforeid: beforeid,
visible: responsetext.visible,
}
);
// Set visibility in course content.
var params = {element: dragnode, visible: responsetext.visible};
M.course.coursebase.invoke_function('set_visibility_resource_ui', params);
this.unlock_drag_handle(drag, CSS.EDITINGMOVE);
window.setTimeout(function() {
spinner.hide();
}, 250);
},
failure: function(tid, response) {
this.ajax_failure(response);
this.unlock_drag_handle(drag, CSS.SECTIONHANDLE);
spinner.hide();
// TODO: revert nodes location
}
},
context: this
});
}
}, {
NAME: 'course-dragdrop-resource',
ATTRS: {
courseid: {
value: null
},
ajaxurl: {
value: 0
},
config: {
value: 0
}
}
});
M.course = M.course || {};
M.course.init_resource_dragdrop = function(params) {
new DRAGRESOURCE(params);
};
}, '@VERSION@', {
"requires": [
"base",
"node",
"io",
"dom",
"dd",
"dd-scroll",
"moodle-core-dragdrop",
"moodle-core-notification",
"moodle-course-coursebase",
"moodle-course-util"
]
});
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,21 @@
YUI.add('moodle-course-util-base', function (Y, NAME) {
/**
* The Moodle.core_course.util classes provide course-related utility functions.
*
* @module moodle-course-util
* @main
*/
Y.namespace('Moodle.core_course.util');
/**
* A collection of general utility functions for use in course.
*
* @class Moodle.core_course.util
* @static
*/
}, '@VERSION@');
@@ -0,0 +1 @@
YUI.add("moodle-course-util-base",function(e,o){e.namespace("Moodle.core_course.util")},"@VERSION@");
@@ -0,0 +1,21 @@
YUI.add('moodle-course-util-base', function (Y, NAME) {
/**
* The Moodle.core_course.util classes provide course-related utility functions.
*
* @module moodle-course-util
* @main
*/
Y.namespace('Moodle.core_course.util');
/**
* A collection of general utility functions for use in course.
*
* @class Moodle.core_course.util
* @static
*/
}, '@VERSION@');
@@ -0,0 +1,75 @@
YUI.add('moodle-course-util-cm', function (Y, NAME) {
/**
* A collection of utility classes for use with course modules.
*
* @module moodle-course-util
* @submodule moodle-course-util-cm
*/
Y.namespace('Moodle.core_course.util.cm');
/**
* A collection of utility classes for use with course modules.
*
* @class Moodle.core_course.util.cm
* @static
*/
Y.Moodle.core_course.util.cm = {
CONSTANTS: {
MODULEIDPREFIX: 'module-'
},
SELECTORS: {
COURSEMODULE: '.activity',
INSTANCENAME: '.instancename'
},
/**
* Retrieve the course module item from one of it's child Nodes.
*
* @method getCourseModuleNodeFromComponent
* @param coursemodulecomponent {Node} The component Node.
* @return {Node|null} The Course Module Node.
*/
getCourseModuleFromComponent: function(coursemodulecomponent) {
return Y.one(coursemodulecomponent).ancestor(this.SELECTORS.COURSEMODULE, true);
},
/**
* Determines the section ID for the provided section.
*
* @method getId
* @param coursemodule {Node} The course module to find an ID for.
* @return {Number|false} The ID of the course module in question or false if no ID was found.
*/
getId: function(coursemodule) {
// We perform a simple substitution operation to get the ID.
var id = coursemodule.get('id').replace(
this.CONSTANTS.MODULEIDPREFIX, '');
// Attempt to validate the ID.
id = parseInt(id, 10);
if (typeof id === 'number' && isFinite(id)) {
return id;
}
return false;
},
/**
* Determines the section ID for the provided section.
*
* @method getName
* @param coursemodule {Node} The course module to find an ID for.
* @return {Number|false} The ID of the course module in question or false if no ID was found.
*/
getName: function(coursemodule) {
var instance = coursemodule.one(this.SELECTORS.INSTANCENAME);
if (instance) {
return instance.get('firstChild').get('data');
}
return null;
}
};
}, '@VERSION@', {"requires": ["node", "moodle-course-util-base"]});
@@ -0,0 +1 @@
YUI.add("moodle-course-util-cm",function(t,e){t.namespace("Moodle.core_course.util.cm"),t.Moodle.core_course.util.cm={CONSTANTS:{MODULEIDPREFIX:"module-"},SELECTORS:{COURSEMODULE:".activity",INSTANCENAME:".instancename"},getCourseModuleFromComponent:function(e){return t.one(e).ancestor(this.SELECTORS.COURSEMODULE,!0)},getId:function(e){e=e.get("id").replace(this.CONSTANTS.MODULEIDPREFIX,"");return!("number"!=typeof(e=parseInt(e,10))||!isFinite(e))&&e},getName:function(e){e=e.one(this.SELECTORS.INSTANCENAME);return e?e.get("firstChild").get("data"):null}}},"@VERSION@",{requires:["node","moodle-course-util-base"]});
@@ -0,0 +1,75 @@
YUI.add('moodle-course-util-cm', function (Y, NAME) {
/**
* A collection of utility classes for use with course modules.
*
* @module moodle-course-util
* @submodule moodle-course-util-cm
*/
Y.namespace('Moodle.core_course.util.cm');
/**
* A collection of utility classes for use with course modules.
*
* @class Moodle.core_course.util.cm
* @static
*/
Y.Moodle.core_course.util.cm = {
CONSTANTS: {
MODULEIDPREFIX: 'module-'
},
SELECTORS: {
COURSEMODULE: '.activity',
INSTANCENAME: '.instancename'
},
/**
* Retrieve the course module item from one of it's child Nodes.
*
* @method getCourseModuleNodeFromComponent
* @param coursemodulecomponent {Node} The component Node.
* @return {Node|null} The Course Module Node.
*/
getCourseModuleFromComponent: function(coursemodulecomponent) {
return Y.one(coursemodulecomponent).ancestor(this.SELECTORS.COURSEMODULE, true);
},
/**
* Determines the section ID for the provided section.
*
* @method getId
* @param coursemodule {Node} The course module to find an ID for.
* @return {Number|false} The ID of the course module in question or false if no ID was found.
*/
getId: function(coursemodule) {
// We perform a simple substitution operation to get the ID.
var id = coursemodule.get('id').replace(
this.CONSTANTS.MODULEIDPREFIX, '');
// Attempt to validate the ID.
id = parseInt(id, 10);
if (typeof id === 'number' && isFinite(id)) {
return id;
}
return false;
},
/**
* Determines the section ID for the provided section.
*
* @method getName
* @param coursemodule {Node} The course module to find an ID for.
* @return {Number|false} The ID of the course module in question or false if no ID was found.
*/
getName: function(coursemodule) {
var instance = coursemodule.one(this.SELECTORS.INSTANCENAME);
if (instance) {
return instance.get('firstChild').get('data');
}
return null;
}
};
}, '@VERSION@', {"requires": ["node", "moodle-course-util-base"]});
@@ -0,0 +1,45 @@
YUI.add('moodle-course-util-section', function (Y, NAME) {
/**
* A collection of utility classes for use with course sections.
*
* @module moodle-course-util
* @submodule moodle-course-util-section
*/
Y.namespace('Moodle.core_course.util.section');
/**
* A collection of utility classes for use with course sections.
*
* @class Moodle.core_course.util.section
* @static
*/
Y.Moodle.core_course.util.section = {
CONSTANTS: {
SECTIONIDPREFIX: 'section-'
},
/**
* Determines the section ID for the provided section.
*
* @method getId
* @param section {Node} The section to find an ID for.
* @return {Number|false} The ID of the section in question or false if no ID was found.
*/
getId: function(section) {
// We perform a simple substitution operation to get the ID.
var id = section.get('id').replace(
this.CONSTANTS.SECTIONIDPREFIX, '');
// Attempt to validate the ID.
id = parseInt(id, 10);
if (typeof id === 'number' && isFinite(id)) {
return id;
}
return false;
}
};
}, '@VERSION@', {"requires": ["node", "moodle-course-util-base"]});
@@ -0,0 +1 @@
YUI.add("moodle-course-util-section",function(e,o){e.namespace("Moodle.core_course.util.section"),e.Moodle.core_course.util.section={CONSTANTS:{SECTIONIDPREFIX:"section-"},getId:function(e){e=e.get("id").replace(this.CONSTANTS.SECTIONIDPREFIX,"");return!("number"!=typeof(e=parseInt(e,10))||!isFinite(e))&&e}}},"@VERSION@",{requires:["node","moodle-course-util-base"]});
@@ -0,0 +1,45 @@
YUI.add('moodle-course-util-section', function (Y, NAME) {
/**
* A collection of utility classes for use with course sections.
*
* @module moodle-course-util
* @submodule moodle-course-util-section
*/
Y.namespace('Moodle.core_course.util.section');
/**
* A collection of utility classes for use with course sections.
*
* @class Moodle.core_course.util.section
* @static
*/
Y.Moodle.core_course.util.section = {
CONSTANTS: {
SECTIONIDPREFIX: 'section-'
},
/**
* Determines the section ID for the provided section.
*
* @method getId
* @param section {Node} The section to find an ID for.
* @return {Number|false} The ID of the section in question or false if no ID was found.
*/
getId: function(section) {
// We perform a simple substitution operation to get the ID.
var id = section.get('id').replace(
this.CONSTANTS.SECTIONIDPREFIX, '');
// Attempt to validate the ID.
id = parseInt(id, 10);
if (typeof id === 'number' && isFinite(id)) {
return id;
}
return false;
}
};
}, '@VERSION@', {"requires": ["node", "moodle-course-util-base"]});