MDL-32744: Maintain format specific CSS selectors in the format configuration.
authorRuslan Kabalin <ruslan.kabalin@luns.net.uk>
Tue, 8 May 2012 10:10:22 +0000 (11:10 +0100)
committerRuslan Kabalin <ruslan.kabalin@luns.net.uk>
Mon, 21 May 2012 12:53:04 +0000 (13:53 +0100)
This updates existing core formats and introduce a configuration function.

course/format/topics/format.js
course/format/weeks/format.js
course/yui/coursebase/coursebase.js
course/yui/dragdrop/dragdrop.js
course/yui/toolboxes/toolboxes.js

index 85aec6d..218492d 100644 (file)
@@ -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'
+    };
 }
 
 /**
index 78c2063..28aed42 100644 (file)
@@ -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'
+    };
 }
 
 /**
index 713ad70..3dbbf0b 100644 (file)
@@ -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']
index c3ed979..012355e 100644 (file)
@@ -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()));
index 6dfcce0..024785e 100644 (file)
@@ -28,7 +28,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
         MOVELEFTCLASS : 'editing_moveleft',
         MOVERIGHT : 'a.editing_moveright',
         PAGECONTENT : 'div#page-content',
-        RIGHTDIV : 'div.right',
+        RIGHTSIDE : '.right',
         SECTIONHIDDENCLASS : 'hidden',
         SECTIONIDPREFIX : 'section-',
         SECTIONLI : 'li.section',
@@ -384,7 +384,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
             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;
             }
@@ -649,17 +649,17 @@ YUI.add('moodle-course-toolboxes', function(Y) {
         },
         _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');
 
@@ -691,7 +691,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
             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
             };
 
@@ -725,7 +725,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
             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');
 
@@ -736,22 +736,22 @@ YUI.add('moodle-course-toolboxes', function(Y) {
             // 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);