This updates existing core formats and introduce a configuration function.
M.course.format = M.course.format || {};
/**
- * Get section list for this format
+ * Get sections config for this format
*
- * @param {YUI} Y YUI3 instance
- * @return {string} section list selector
+ * The section structure is:
+ * <ul class="topics">
+ * <li class="section">...</li>
+ * <li class="section">...</li>
+ * ...
+ * </ul>
+ *
+ * @return {object} section list configuration
*/
-M.course.format.get_section_selector = function(Y) {
- return 'li.section';
+M.course.format.get_config = function() {
+ return {
+ container_node : 'ul',
+ container_class : 'topics',
+ section_node : 'li',
+ section_class : 'section'
+ };
}
/**
M.course.format = M.course.format || {};
/**
- * Get section list for this format
+ * Get sections config for this format
*
- * @param {YUI} Y YUI3 instance
- * @return {string} section list selector
+ * The section structure is:
+ * <ul class="weeks">
+ * <li class="section">...</li>
+ * <li class="section">...</li>
+ * ...
+ * </ul>
+ *
+ * @return {object} section list configuration
*/
-M.course.format.get_section_selector = function(Y) {
- return 'li.section';
+M.course.format.get_config = function() {
+ return {
+ container_node : 'ul',
+ container_class : 'weeks',
+ section_node : 'li',
+ section_class : 'section'
+ };
}
/**
// 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)
+ *
+ * @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(Y, node1, node2) {
+ return null;
+ }
+
+
+ /**
+ * Get sections config for this format, for examples see function definition
+ * in the formats.
+ *
+ * @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)
+ *
+ * @param {YUI} Y YUI3 instance
+ * @return {string} section selector
+ */
+ M.course.format.get_section_selector = M.course.format.get_section_selector || function(Y) {
+ var config = M.course.format.get_config();
+ if (config.section_node && config.section_class) {
+ return config.section_node + '.' + config.section_class;
+ }
+ console.log('section_node and section_class are not defined in M.course.format.get_config');
+ 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).
+ *
+ * @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
+ *
+ * @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 {
+ console.log('container_node is not defined in M.course.format.get_config');
+ }
+ }
+
+ /**
+ * Get the class of container node
+ *
+ * @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 {
+ console.log('container_class is not defined in M.course.format.get_config');
+ }
+ }
+
+ /**
+ * Get the tag of draggable node (section wrapper if exists, otherwise section)
+ *
+ * @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)
+ *
+ * @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
+ *
+ * @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 {
+ console.log('section_node is not defined in M.course.format.get_config');
+ }
+ }
+
+ /**
+ * Get the class of section node
+ *
+ * @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 {
+ console.log('section_class is not defined in M.course.format.get_config');
+ }
+
+ }
+
},
'@VERSION@', {
requires : ['base', 'node']
SECTION : 'section',
SECTIONADDMENUS : 'section_add_menus',
SECTIONHANDLE : 'section-handle',
- SUMMARY : 'summary',
- TOPICS : 'topics',
- WEEKDATES: 'weekdates'
+ SUMMARY : 'summary'
};
var DRAGSECTION = function() {
initializer : function(params) {
// Set group for parent class
this.groups = ['section'];
- this.samenodeclass = CSS.SECTION;
- this.parentnodeclass = CSS.TOPICS;
+ this.samenodeclass = M.course.format.get_sectionwrapperclass();
+ this.parentnodeclass = M.course.format.get_containerclass();
// Check if we are in single section mode
if (Y.Node.one('.'+CSS.JUMPMENU)) {
return false;
}
// Initialise sections dragging
- if (M.course.format && M.course.format.get_section_selector && typeof(M.course.format.get_section_selector) == 'function') {
- this.sectionlistselector = '.'+CSS.COURSECONTENT+' '+M.course.format.get_section_selector(Y);
+ this.sectionlistselector = M.course.format.get_section_wrapper(Y);
+ if (this.sectionlistselector) {
+ this.sectionlistselector = '.'+CSS.COURSECONTENT+' '+this.sectionlistselector;
this.setup_for_section(this.sectionlistselector);
}
},
// Get our drag object
var drag = e.target;
// Creat a dummy structure of the outer elemnents for clean styles application
- var ul = Y.Node.create('<ul></ul>');
- ul.addClass(CSS.TOPICS);
- var li = Y.Node.create('<li></li>');
- li.addClass(CSS.SECTION);
- li.setStyle('margin', 0);
- li.setContent(drag.get('node').get('innerHTML'));
- ul.appendChild(li);
- drag.get('dragNode').setContent(ul);
+ 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(drag.get('node').get('innerHTML'));
+ containernode.appendChild(sectionnode);
+ drag.get('dragNode').setContent(containernode);
drag.get('dragNode').addClass(CSS.COURSECONTENT);
},
var sectionid = sectionlist.item(i-1).get('id');
sectionlist.item(i-1).set('id', sectionlist.item(i).get('id'));
sectionlist.item(i).set('id', sectionid);
- // See what format needs to be swapped
- if (M.course.format && M.course.format.swap_sections && typeof(M.course.format.swap_sections) == 'function') {
- M.course.format.swap_sections(Y, i-1, i);
- }
+ // See what format needs to swap
+ M.course.format.swap_sections(Y, i-1, i);
// Update flag
swapped = true;
}
this.parentnodeclass = CSS.SECTION;
// Go through all sections
- if (M.course.format && M.course.format.get_section_selector && typeof(M.course.format.get_section_selector) == 'function') {
- var sectionlistselector = '.'+CSS.COURSECONTENT+' '+M.course.format.get_section_selector(Y);
+ var sectionlistselector = M.course.format.get_section_selector(Y);
+ if (sectionlistselector) {
+ sectionlistselector = '.'+CSS.COURSECONTENT+' '+sectionlistselector;
this.setup_for_section(sectionlistselector);
M.course.coursebase.register_module(this);
M.course.dragres = this;
padding: '20 0 20 0'
});
// Go through each li element and make them draggable
- this.setup_for_resource('li#'+sectionnode.get('id')+' li.'+CSS.ACTIVITY);
+ this.setup_for_resource('#'+sectionnode.get('id')+' li.'+CSS.ACTIVITY);
}, this);
},
/**
var dragnode = drag.get('node');
var dropnode = e.drop.get('node');
- var sectionselector = M.course.format.get_section_selector(Y);
-
// Add spinner if it not there
var spinner = M.util.add_spinner(Y, dragnode.one(CSS.COMMANDSPAN));
params['class'] = 'resource';
params.field = 'move';
params.id = Number(this.get_resource_id(dragnode));
- params.sectionId = this.get_section_id(dropnode.ancestor(sectionselector));
+ params.sectionId = this.get_section_id(dropnode.ancestor(M.course.format.get_section_wrapper(Y), true));
if (dragnode.next()) {
params.beforeId = Number(this.get_resource_id(dragnode.next()));
MOVELEFTCLASS : 'editing_moveleft',
MOVERIGHT : 'a.editing_moveright',
PAGECONTENT : 'div#page-content',
- RIGHTDIV : 'div.right',
+ RIGHTSIDE : '.right',
SECTIONHIDDENCLASS : 'hidden',
SECTIONIDPREFIX : 'section-',
SECTIONLI : 'li.section',
e.preventDefault();
// Return early if the current section is hidden
- var section = e.target.ancestor(CSS.SECTIONLI);
+ var section = e.target.ancestor(M.course.format.get_section_selector(Y));
if (section && section.hasClass(CSS.SECTIONHIDDENCLASS)) {
return;
}
},
_setup_for_section : function(toolboxtarget) {
// Section Highlighting
- this.replace_button(toolboxtarget, CSS.RIGHTDIV + ' ' + CSS.HIGHLIGHT, this.toggle_highlight);
+ this.replace_button(toolboxtarget, CSS.RIGHTSIDE + ' ' + CSS.HIGHLIGHT, this.toggle_highlight);
// Section Visibility
- this.replace_button(toolboxtarget, CSS.RIGHTDIV + ' ' + CSS.SHOWHIDE, this.toggle_hide_section);
+ this.replace_button(toolboxtarget, CSS.RIGHTSIDE + ' ' + CSS.SHOWHIDE, this.toggle_hide_section);
},
toggle_hide_section : function(e) {
// Prevent the default button action
e.preventDefault();
// Get the section we're working on
- var section = e.target.ancestor(CSS.SECTIONLI);
+ var section = e.target.ancestor(M.course.format.get_section_selector(Y));
var button = e.target.ancestor('a', true);
var hideicon = button.one('img');
var data = {
'class' : 'section',
'field' : 'visible',
- 'id' : this.get_section_id(section),
+ 'id' : this.get_section_id(section.ancestor(M.course.format.get_section_wrapper(Y), true)),
'value' : value
};
e.preventDefault();
// Get the section we're working on
- var section = e.target.ancestor(CSS.SECTIONLI);
+ var section = e.target.ancestor(M.course.format.get_section_selector(Y));
var button = e.target.ancestor('a', true);
var buttonicon = button.one('img');
// Set the current highlighted item text
var old_string = M.util.get_string('markthistopic', 'moodle');
Y.one(CSS.PAGECONTENT)
- .all(CSS.SECTIONLI + '.current ' + CSS.HIGHLIGHT)
+ .all(M.course.format.get_section_selector(Y) + '.current ' + CSS.HIGHLIGHT)
.set('title', old_string);
Y.one(CSS.PAGECONTENT)
- .all(CSS.SECTIONLI + '.current ' + CSS.HIGHLIGHT + ' img')
+ .all(M.course.format.get_section_selector(Y) + '.current ' + CSS.HIGHLIGHT + ' img')
.set('title', old_string)
.set('alt', old_string)
.set('src', M.util.image_url('i/marker'));
// Remove the highlighting from all sections
- var allsections = Y.one(CSS.PAGECONTENT).all(CSS.SECTIONLI)
+ var allsections = Y.one(CSS.PAGECONTENT).all(M.course.format.get_section_selector(Y))
.removeClass('current');
// Then add it if required to the selected section
if (!togglestatus) {
section.addClass('current');
- value = this.get_section_id(section);
+ value = this.get_section_id(section.ancestor(M.course.format.get_section_wrapper(Y), true));
var new_string = M.util.get_string('markedthistopic', 'moodle');
button
.set('title', new_string);
