Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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...
commit 405eaac272aafe212f1350cfc6a9732bec9ef6d7 1 parent 4f7f2a8
Ruslan Kabalin authored
21 course/format/topics/format.js
@@ -5,13 +5,24 @@ M.course = M.course || {};
5 5 M.course.format = M.course.format || {};
6 6
7 7 /**
8   - * Get section list for this format
  8 + * Get sections config for this format
9 9 *
10   - * @param {YUI} Y YUI3 instance
11   - * @return {string} section list selector
  10 + * The section structure is:
  11 + * <ul class="topics">
  12 + * <li class="section">...</li>
  13 + * <li class="section">...</li>
  14 + * ...
  15 + * </ul>
  16 + *
  17 + * @return {object} section list configuration
12 18 */
13   -M.course.format.get_section_selector = function(Y) {
14   - return 'li.section';
  19 +M.course.format.get_config = function() {
  20 + return {
  21 + container_node : 'ul',
  22 + container_class : 'topics',
  23 + section_node : 'li',
  24 + section_class : 'section'
  25 + };
15 26 }
16 27
17 28 /**
21 course/format/weeks/format.js
@@ -5,13 +5,24 @@ M.course = M.course || {};
5 5 M.course.format = M.course.format || {};
6 6
7 7 /**
8   - * Get section list for this format
  8 + * Get sections config for this format
9 9 *
10   - * @param {YUI} Y YUI3 instance
11   - * @return {string} section list selector
  10 + * The section structure is:
  11 + * <ul class="weeks">
  12 + * <li class="section">...</li>
  13 + * <li class="section">...</li>
  14 + * ...
  15 + * </ul>
  16 + *
  17 + * @return {object} section list configuration
12 18 */
13   -M.course.format.get_section_selector = function(Y) {
14   - return 'li.section';
  19 +M.course.format.get_config = function() {
  20 + return {
  21 + container_node : 'ul',
  22 + container_class : 'weeks',
  23 + section_node : 'li',
  24 + section_class : 'section'
  25 + };
15 26 }
16 27
17 28 /**
150 course/yui/coursebase/coursebase.js
@@ -52,6 +52,156 @@ YUI.add('moodle-course-coursebase', function(Y) {
52 52 // Ensure that M.course exists and that coursebase is initialised correctly
53 53 M.course = M.course || {};
54 54 M.course.coursebase = M.course.coursebase || new COURSEBASE();
  55 +
  56 + // Abstract functions that needs to be defined per format (course/format/somename/format.js)
  57 + M.course.format = M.course.format || {}
  58 +
  59 + /**
  60 + * Swap section (should be defined in format.js if requred)
  61 + *
  62 + * @param {YUI} Y YUI3 instance
  63 + * @param {string} node1 node to swap to
  64 + * @param {string} node2 node to swap with
  65 + * @return {NodeList} section list
  66 + */
  67 + M.course.format.swap_sections = M.course.format.swap_sections || function(Y, node1, node2) {
  68 + return null;
  69 + }
  70 +
  71 +
  72 + /**
  73 + * Get sections config for this format, for examples see function definition
  74 + * in the formats.
  75 + *
  76 + * @return {object} section list configuration
  77 + */
  78 + M.course.format.get_config = M.course.format.get_config || function() {
  79 + return {
  80 + container_node : null, // compulsory
  81 + container_class : null, // compulsory
  82 + section_wrapper_node : null, // optional
  83 + section_wrapper_class : null, // optional
  84 + section_node : null, // compulsory
  85 + section_class : null // compulsory
  86 + }
  87 + }
  88 +
  89 + /**
  90 + * Get section list for this format (usually items inside container_node.container_class selector)
  91 + *
  92 + * @param {YUI} Y YUI3 instance
  93 + * @return {string} section selector
  94 + */
  95 + M.course.format.get_section_selector = M.course.format.get_section_selector || function(Y) {
  96 + var config = M.course.format.get_config();
  97 + if (config.section_node && config.section_class) {
  98 + return config.section_node + '.' + config.section_class;
  99 + }
  100 + console.log('section_node and section_class are not defined in M.course.format.get_config');
  101 + return null;
  102 + }
  103 +
  104 + /**
  105 + * Get section wraper for this format (only used in case when each
  106 + * container_node.container_class node is wrapped in some other element).
  107 + *
  108 + * @param {YUI} Y YUI3 instance
  109 + * @return {string} section wrapper selector or M.course.format.get_section_selector
  110 + * if section_wrapper_node and section_wrapper_class are not defined in the format config.
  111 + */
  112 + M.course.format.get_section_wrapper = M.course.format.get_section_wrapper || function(Y) {
  113 + var config = M.course.format.get_config();
  114 + if (config.section_wrapper_node && config.section_wrapper_class) {
  115 + return config.section_wrapper_node + '.' + config.section_wrapper_class;
  116 + }
  117 + return M.course.format.get_section_selector(Y);
  118 + }
  119 +
  120 + /**
  121 + * Get the tag of container node
  122 + *
  123 + * @return {string} tag of container node.
  124 + */
  125 + M.course.format.get_containernode = M.course.format.get_containernode || function() {
  126 + var config = M.course.format.get_config();
  127 + if (config.container_node) {
  128 + return config.container_node;
  129 + } else {
  130 + console.log('container_node is not defined in M.course.format.get_config');
  131 + }
  132 + }
  133 +
  134 + /**
  135 + * Get the class of container node
  136 + *
  137 + * @return {string} class of the container node.
  138 + */
  139 + M.course.format.get_containerclass = M.course.format.get_containerclass || function() {
  140 + var config = M.course.format.get_config();
  141 + if (config.container_class) {
  142 + return config.container_class;
  143 + } else {
  144 + console.log('container_class is not defined in M.course.format.get_config');
  145 + }
  146 + }
  147 +
  148 + /**
  149 + * Get the tag of draggable node (section wrapper if exists, otherwise section)
  150 + *
  151 + * @return {string} tag of the draggable node.
  152 + */
  153 + M.course.format.get_sectionwrappernode = M.course.format.get_sectionwrappernode || function() {
  154 + var config = M.course.format.get_config();
  155 + if (config.section_wrapper_node) {
  156 + return config.section_wrapper_node;
  157 + } else {
  158 + return config.section_node;
  159 + }
  160 + }
  161 +
  162 + /**
  163 + * Get the class of draggable node (section wrapper if exists, otherwise section)
  164 + *
  165 + * @return {string} class of the draggable node.
  166 + */
  167 + M.course.format.get_sectionwrapperclass = M.course.format.get_sectionwrapperclass || function() {
  168 + var config = M.course.format.get_config();
  169 + if (config.section_wrapper_class) {
  170 + return config.section_wrapper_class;
  171 + } else {
  172 + return config.section_class;
  173 + }
  174 + }
  175 +
  176 + /**
  177 + * Get the tag of section node
  178 + *
  179 + * @return {string} tag of section node.
  180 + */
  181 + M.course.format.get_sectionnode = M.course.format.get_sectionnode || function() {
  182 + var config = M.course.format.get_config();
  183 + if (config.section_node) {
  184 + return config.section_node;
  185 + } else {
  186 + console.log('section_node is not defined in M.course.format.get_config');
  187 + }
  188 + }
  189 +
  190 + /**
  191 + * Get the class of section node
  192 + *
  193 + * @return {string} class of the section node.
  194 + */
  195 + M.course.format.get_sectionclass = M.course.format.get_sectionclass || function() {
  196 + var config = M.course.format.get_config();
  197 + if (config.section_class) {
  198 + return config.section_class;
  199 + } else {
  200 + console.log('section_class is not defined in M.course.format.get_config');
  201 + }
  202 +
  203 + }
  204 +
55 205 },
56 206 '@VERSION@', {
57 207 requires : ['base', 'node']
46 course/yui/dragdrop/dragdrop.js
@@ -17,9 +17,7 @@ YUI.add('moodle-course-dragdrop', function(Y) {
17 17 SECTION : 'section',
18 18 SECTIONADDMENUS : 'section_add_menus',
19 19 SECTIONHANDLE : 'section-handle',
20   - SUMMARY : 'summary',
21   - TOPICS : 'topics',
22   - WEEKDATES: 'weekdates'
  20 + SUMMARY : 'summary'
23 21 };
24 22
25 23 var DRAGSECTION = function() {
@@ -31,16 +29,17 @@ YUI.add('moodle-course-dragdrop', function(Y) {
31 29 initializer : function(params) {
32 30 // Set group for parent class
33 31 this.groups = ['section'];
34   - this.samenodeclass = CSS.SECTION;
35   - this.parentnodeclass = CSS.TOPICS;
  32 + this.samenodeclass = M.course.format.get_sectionwrapperclass();
  33 + this.parentnodeclass = M.course.format.get_containerclass();
36 34
37 35 // Check if we are in single section mode
38 36 if (Y.Node.one('.'+CSS.JUMPMENU)) {
39 37 return false;
40 38 }
41 39 // Initialise sections dragging
42   - if (M.course.format && M.course.format.get_section_selector && typeof(M.course.format.get_section_selector) == 'function') {
43   - this.sectionlistselector = '.'+CSS.COURSECONTENT+' '+M.course.format.get_section_selector(Y);
  40 + this.sectionlistselector = M.course.format.get_section_wrapper(Y);
  41 + if (this.sectionlistselector) {
  42 + this.sectionlistselector = '.'+CSS.COURSECONTENT+' '+this.sectionlistselector;
44 43 this.setup_for_section(this.sectionlistselector);
45 44 }
46 45 },
@@ -109,14 +108,14 @@ YUI.add('moodle-course-dragdrop', function(Y) {
109 108 // Get our drag object
110 109 var drag = e.target;
111 110 // Creat a dummy structure of the outer elemnents for clean styles application
112   - var ul = Y.Node.create('<ul></ul>');
113   - ul.addClass(CSS.TOPICS);
114   - var li = Y.Node.create('<li></li>');
115   - li.addClass(CSS.SECTION);
116   - li.setStyle('margin', 0);
117   - li.setContent(drag.get('node').get('innerHTML'));
118   - ul.appendChild(li);
119   - drag.get('dragNode').setContent(ul);
  111 + var containernode = Y.Node.create('<'+M.course.format.get_containernode()+'></'+M.course.format.get_containernode()+'>');
  112 + containernode.addClass(M.course.format.get_containerclass());
  113 + var sectionnode = Y.Node.create('<'+ M.course.format.get_sectionwrappernode()+'></'+ M.course.format.get_sectionwrappernode()+'>');
  114 + sectionnode.addClass( M.course.format.get_sectionwrapperclass());
  115 + sectionnode.setStyle('margin', 0);
  116 + sectionnode.setContent(drag.get('node').get('innerHTML'));
  117 + containernode.appendChild(sectionnode);
  118 + drag.get('dragNode').setContent(containernode);
120 119 drag.get('dragNode').addClass(CSS.COURSECONTENT);
121 120 },
122 121
@@ -186,10 +185,8 @@ YUI.add('moodle-course-dragdrop', function(Y) {
186 185 var sectionid = sectionlist.item(i-1).get('id');
187 186 sectionlist.item(i-1).set('id', sectionlist.item(i).get('id'));
188 187 sectionlist.item(i).set('id', sectionid);
189   - // See what format needs to be swapped
190   - if (M.course.format && M.course.format.swap_sections && typeof(M.course.format.swap_sections) == 'function') {
191   - M.course.format.swap_sections(Y, i-1, i);
192   - }
  188 + // See what format needs to swap
  189 + M.course.format.swap_sections(Y, i-1, i);
193 190 // Update flag
194 191 swapped = true;
195 192 }
@@ -232,8 +229,9 @@ YUI.add('moodle-course-dragdrop', function(Y) {
232 229 this.parentnodeclass = CSS.SECTION;
233 230
234 231 // Go through all sections
235   - if (M.course.format && M.course.format.get_section_selector && typeof(M.course.format.get_section_selector) == 'function') {
236   - var sectionlistselector = '.'+CSS.COURSECONTENT+' '+M.course.format.get_section_selector(Y);
  232 + var sectionlistselector = M.course.format.get_section_selector(Y);
  233 + if (sectionlistselector) {
  234 + sectionlistselector = '.'+CSS.COURSECONTENT+' '+sectionlistselector;
237 235 this.setup_for_section(sectionlistselector);
238 236 M.course.coursebase.register_module(this);
239 237 M.course.dragres = this;
@@ -263,7 +261,7 @@ YUI.add('moodle-course-dragdrop', function(Y) {
263 261 padding: '20 0 20 0'
264 262 });
265 263 // Go through each li element and make them draggable
266   - this.setup_for_resource('li#'+sectionnode.get('id')+' li.'+CSS.ACTIVITY);
  264 + this.setup_for_resource('#'+sectionnode.get('id')+' li.'+CSS.ACTIVITY);
267 265 }, this);
268 266 },
269 267 /**
@@ -317,8 +315,6 @@ YUI.add('moodle-course-dragdrop', function(Y) {
317 315 var dragnode = drag.get('node');
318 316 var dropnode = e.drop.get('node');
319 317
320   - var sectionselector = M.course.format.get_section_selector(Y);
321   -
322 318 // Add spinner if it not there
323 319 var spinner = M.util.add_spinner(Y, dragnode.one(CSS.COMMANDSPAN));
324 320
@@ -336,7 +332,7 @@ YUI.add('moodle-course-dragdrop', function(Y) {
336 332 params['class'] = 'resource';
337 333 params.field = 'move';
338 334 params.id = Number(this.get_resource_id(dragnode));
339   - params.sectionId = this.get_section_id(dropnode.ancestor(sectionselector));
  335 + params.sectionId = this.get_section_id(dropnode.ancestor(M.course.format.get_section_wrapper(Y), true));
340 336
341 337 if (dragnode.next()) {
342 338 params.beforeId = Number(this.get_resource_id(dragnode.next()));
22 course/yui/toolboxes/toolboxes.js
@@ -28,7 +28,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
28 28 MOVELEFTCLASS : 'editing_moveleft',
29 29 MOVERIGHT : 'a.editing_moveright',
30 30 PAGECONTENT : 'div#page-content',
31   - RIGHTDIV : 'div.right',
  31 + RIGHTSIDE : '.right',
32 32 SECTIONHIDDENCLASS : 'hidden',
33 33 SECTIONIDPREFIX : 'section-',
34 34 SECTIONLI : 'li.section',
@@ -384,7 +384,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
384 384 e.preventDefault();
385 385
386 386 // Return early if the current section is hidden
387   - var section = e.target.ancestor(CSS.SECTIONLI);
  387 + var section = e.target.ancestor(M.course.format.get_section_selector(Y));
388 388 if (section && section.hasClass(CSS.SECTIONHIDDENCLASS)) {
389 389 return;
390 390 }
@@ -649,17 +649,17 @@ YUI.add('moodle-course-toolboxes', function(Y) {
649 649 },
650 650 _setup_for_section : function(toolboxtarget) {
651 651 // Section Highlighting
652   - this.replace_button(toolboxtarget, CSS.RIGHTDIV + ' ' + CSS.HIGHLIGHT, this.toggle_highlight);
  652 + this.replace_button(toolboxtarget, CSS.RIGHTSIDE + ' ' + CSS.HIGHLIGHT, this.toggle_highlight);
653 653
654 654 // Section Visibility
655   - this.replace_button(toolboxtarget, CSS.RIGHTDIV + ' ' + CSS.SHOWHIDE, this.toggle_hide_section);
  655 + this.replace_button(toolboxtarget, CSS.RIGHTSIDE + ' ' + CSS.SHOWHIDE, this.toggle_hide_section);
656 656 },
657 657 toggle_hide_section : function(e) {
658 658 // Prevent the default button action
659 659 e.preventDefault();
660 660
661 661 // Get the section we're working on
662   - var section = e.target.ancestor(CSS.SECTIONLI);
  662 + var section = e.target.ancestor(M.course.format.get_section_selector(Y));
663 663 var button = e.target.ancestor('a', true);
664 664 var hideicon = button.one('img');
665 665
@@ -691,7 +691,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
691 691 var data = {
692 692 'class' : 'section',
693 693 'field' : 'visible',
694   - 'id' : this.get_section_id(section),
  694 + 'id' : this.get_section_id(section.ancestor(M.course.format.get_section_wrapper(Y), true)),
695 695 'value' : value
696 696 };
697 697
@@ -725,7 +725,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
725 725 e.preventDefault();
726 726
727 727 // Get the section we're working on
728   - var section = e.target.ancestor(CSS.SECTIONLI);
  728 + var section = e.target.ancestor(M.course.format.get_section_selector(Y));
729 729 var button = e.target.ancestor('a', true);
730 730 var buttonicon = button.one('img');
731 731
@@ -736,22 +736,22 @@ YUI.add('moodle-course-toolboxes', function(Y) {
736 736 // Set the current highlighted item text
737 737 var old_string = M.util.get_string('markthistopic', 'moodle');
738 738 Y.one(CSS.PAGECONTENT)
739   - .all(CSS.SECTIONLI + '.current ' + CSS.HIGHLIGHT)
  739 + .all(M.course.format.get_section_selector(Y) + '.current ' + CSS.HIGHLIGHT)
740 740 .set('title', old_string);
741 741 Y.one(CSS.PAGECONTENT)
742   - .all(CSS.SECTIONLI + '.current ' + CSS.HIGHLIGHT + ' img')
  742 + .all(M.course.format.get_section_selector(Y) + '.current ' + CSS.HIGHLIGHT + ' img')
743 743 .set('title', old_string)
744 744 .set('alt', old_string)
745 745 .set('src', M.util.image_url('i/marker'));
746 746
747 747 // Remove the highlighting from all sections
748   - var allsections = Y.one(CSS.PAGECONTENT).all(CSS.SECTIONLI)
  748 + var allsections = Y.one(CSS.PAGECONTENT).all(M.course.format.get_section_selector(Y))
749 749 .removeClass('current');
750 750
751 751 // Then add it if required to the selected section
752 752 if (!togglestatus) {
753 753 section.addClass('current');
754   - value = this.get_section_id(section);
  754 + value = this.get_section_id(section.ancestor(M.course.format.get_section_wrapper(Y), true));
755 755 var new_string = M.util.get_string('markedthistopic', 'moodle');
756 756 button
757 757 .set('title', new_string);

0 comments on commit 405eaac

Please sign in to comment.
Something went wrong with that request. Please try again.