Permalink
Browse files

MDL-32744: Maintain format specific CSS selectors in the format confi…

…guration.

This updates existing core formats and introduce a configuration function.
  • Loading branch information...
1 parent 4f7f2a8 commit 405eaac272aafe212f1350cfc6a9732bec9ef6d7 Ruslan Kabalin committed May 8, 2012
@@ -5,13 +5,24 @@ M.course = M.course || {};
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'
+ };
}
/**
@@ -5,13 +5,24 @@ M.course = M.course || {};
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'
+ };
}
/**
@@ -52,6 +52,156 @@ YUI.add('moodle-course-coursebase', function(Y) {
// 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']
@@ -17,9 +17,7 @@ YUI.add('moodle-course-dragdrop', function(Y) {
SECTION : 'section',
SECTIONADDMENUS : 'section_add_menus',
SECTIONHANDLE : 'section-handle',
- SUMMARY : 'summary',
- TOPICS : 'topics',
- WEEKDATES: 'weekdates'
+ SUMMARY : 'summary'
};
var DRAGSECTION = function() {
@@ -31,16 +29,17 @@ YUI.add('moodle-course-dragdrop', function(Y) {
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);
}
},
@@ -109,14 +108,14 @@ YUI.add('moodle-course-dragdrop', function(Y) {
// 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);
},
@@ -186,10 +185,8 @@ YUI.add('moodle-course-dragdrop', function(Y) {
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;
}
@@ -232,8 +229,9 @@ YUI.add('moodle-course-dragdrop', function(Y) {
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;
@@ -263,7 +261,7 @@ YUI.add('moodle-course-dragdrop', function(Y) {
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);
},
/**
@@ -317,8 +315,6 @@ YUI.add('moodle-course-dragdrop', function(Y) {
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));
@@ -336,7 +332,7 @@ YUI.add('moodle-course-dragdrop', function(Y) {
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()));
Oops, something went wrong.

0 comments on commit 405eaac

Please sign in to comment.