From 405eaac272aafe212f1350cfc6a9732bec9ef6d7 Mon Sep 17 00:00:00 2001 From: Ruslan Kabalin Date: Tue, 8 May 2012 11:10:22 +0100 Subject: [PATCH] MDL-32744: Maintain format specific CSS selectors in the format configuration. This updates existing core formats and introduce a configuration function. --- course/format/topics/format.js | 21 +++- course/format/weeks/format.js | 21 +++- course/yui/coursebase/coursebase.js | 150 ++++++++++++++++++++++++++++ course/yui/dragdrop/dragdrop.js | 46 ++++----- course/yui/toolboxes/toolboxes.js | 22 ++-- 5 files changed, 214 insertions(+), 46 deletions(-) diff --git a/course/format/topics/format.js b/course/format/topics/format.js index 85aec6d42fc..218492df6d6 100644 --- a/course/format/topics/format.js +++ b/course/format/topics/format.js @@ -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: + * + * + * @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' + }; } /** diff --git a/course/format/weeks/format.js b/course/format/weeks/format.js index 78c20631b70..28aed42aa42 100644 --- a/course/format/weeks/format.js +++ b/course/format/weeks/format.js @@ -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: + * + * + * @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' + }; } /** diff --git a/course/yui/coursebase/coursebase.js b/course/yui/coursebase/coursebase.js index 713ad709d95..3dbbf0bf0a8 100644 --- a/course/yui/coursebase/coursebase.js +++ b/course/yui/coursebase/coursebase.js @@ -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'] diff --git a/course/yui/dragdrop/dragdrop.js b/course/yui/dragdrop/dragdrop.js index c3ed979443b..012355ece9f 100644 --- a/course/yui/dragdrop/dragdrop.js +++ b/course/yui/dragdrop/dragdrop.js @@ -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.addClass(CSS.TOPICS); - var li = Y.Node.create('
  • '); - 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()+'>'); + containernode.addClass(M.course.format.get_containerclass()); + var sectionnode = Y.Node.create('<'+ 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())); diff --git a/course/yui/toolboxes/toolboxes.js b/course/yui/toolboxes/toolboxes.js index 6dfcce0bd7d..024785ebf4b 100644 --- a/course/yui/toolboxes/toolboxes.js +++ b/course/yui/toolboxes/toolboxes.js @@ -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);