course MDL-25269 Fixed up module/resource indentation on the course v…

…iew page. Now uses div margins rather than spacer images.
abgreeve · Nov 19, 2010 · 060cd0c · 060cd0c
1 parent 32944e8
commit 060cd0c
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 36 deletions.
diff --git a/course/lib.php b/course/lib.php
@@ -1362,7 +1362,11 @@ function print_section($course, $section, $mods, $modnamesused, $absolute=false,
                 }
             }
 
-            echo '<li class="activity '.$mod->modname.' modtype_'.$mod->modname.'" id="module-'.$modnumber.'">';  // Unique ID
+            $liclasses = array();
+            $liclasses[] = 'activity';
+            $liclasses[] = $mod->modname;
+            $liclasses[] = 'modtype_'.$mod->modname;
+            echo html_writer::start_tag('li', array('class'=>join(' ', $liclasses), 'id'=>'module-'.$modnumber));
             if ($ismoving) {
                 echo '<a title="'.$strmovefull.'"'.
                      ' href="'.$CFG->wwwroot.'/course/mod.php?moveto='.$mod->id.'&amp;sesskey='.sesskey().'">'.
@@ -1371,9 +1375,14 @@ function print_section($course, $section, $mods, $modnamesused, $absolute=false,
                      ';
             }
 
-            if ($mod->indent) {
-                echo $OUTPUT->spacer(array('height'=>12, 'width'=>(20 * $mod->indent))); // should be done with CSS instead
+            $classes = array('mod-indent');
+            if (!empty($mod->indent)) {
+                $classes[] = 'mod-indent-'.$mod->indent;
+                if ($mod->indent > 15) {
+                    $classes[] = 'mod-indent-huge';
+                }
             }
+            echo html_writer::start_tag('div', array('class'=>join(' ', $classes)));
 
             $extra = '';
             if (!empty($modinfo->cms[$modnumber]->extra)) {
@@ -1572,7 +1581,8 @@ function print_section($course, $section, $mods, $modnamesused, $absolute=false,
                 }
             }
 
-            echo "</li>\n";
+            echo html_writer::end_tag('div');
+            echo html_writer::end_tag('li')."\n";
         }
 
     } elseif ($ismoving) {

diff --git a/lib/ajax/section_classes.js b/lib/ajax/section_classes.js
@@ -722,66 +722,64 @@ resource_class.prototype.init_buttons = function() {
 
 resource_class.prototype.indent_left = function() {
 
-    var spacer = YAHOO.util.Dom.getElementsByClassName('spacer',
-            'img', this.getEl())[0];
-    if (!spacer) {
+    var indentdiv = YAHOO.util.Dom.getElementsByClassName('mod-indent', 'div', this.getEl())[0];
+    if (!indentdiv) {
         if (this.debug) {
-            YAHOO.log('Could not indent left: spacer image does not exist', 'error');
+            YAHOO.log('Could not indent left: intending div does not exist', 'error');
         }
         return false;
     }
-    if (spacer.width > 20) {
-        spacer.width -= 20;
+    var oldindent = indentdiv.classList.toString().match(/mod-indent-(\d{1,})/);
+    if (oldindent && oldindent[1] > 0) {
+        oldindent = oldindent[1];
     } else {
-        // Remove the spacer.
-        resource = this.getEl();
-        resource.removeChild(spacer);
+        return false;
+    }
+    var newindent = parseFloat(oldindent) - 1;
+    YAHOO.util.Dom.replaceClass(indentdiv, 'mod-indent-'+oldindent, 'mod-indent-'+newindent);
+    main.connect('POST', 'class=resource&field=indentleft', null, 'id='+this.id);
 
+    if (newindent == 0) {
         // Remove the indent left button as well.
         var commandContainer = YAHOO.util.Dom.getElementsByClassName('commands',
                 'span', this.getEl())[0];
-
         commandContainer.removeChild(this.indentLeftButton);
         this.indentLeftButton = null;
     }
-    main.connect('POST', 'class=resource&field=indentleft', null, 'id='+this.id);
+
     return true;
 };
 
 
 resource_class.prototype.indent_right = function() {
 
-    // for RTL support
-    var isrtl = (document.getElementsByTagName("html")[0].dir=="rtl");
-
-    var spacer = YAHOO.util.Dom.getElementsByClassName('spacer',
-            'img', this.getEl())[0];
-    if (!spacer) {
-        var spacer = document.createElement('img');
-
-        spacer.setAttribute('src', main.portal.icons['spacerimg']);
-        spacer.className = 'spacer';
-        spacer.setAttribute('alt', '');
-        spacer.setAttribute('width', '20');
-        spacer.setAttribute('height', '12');
-
-        var resource = this.getEl();
-        resource.insertBefore(spacer, resource.childNodes[0]);
+    var indentdiv = YAHOO.util.Dom.getElementsByClassName('mod-indent', 'div', this.getEl())[0];
+    if (!indentdiv) {
+        if (this.debug) {
+            YAHOO.log('Could not indent left: intending div does not exist', 'error');
+        }
+        return false;
+    }
+    var oldindent = indentdiv.classList.toString().match(/mod-indent-(\d{1,})/);
+    if (oldindent && oldindent[1] >= 0) {
+        oldindent = oldindent[1];
+        var newindent = parseFloat(oldindent) + 1;
+        YAHOO.util.Dom.replaceClass(indentdiv, 'mod-indent-'+oldindent, 'mod-indent-'+newindent);
     } else {
-        spacer.width += 20;
+        YAHOO.util.Dom.addClass(indentdiv, 'mod-indent-1');
     }
-    // Add a indent left button if none is present.
-    var commandContainer = YAHOO.util.Dom.getElementsByClassName('commands',
-            'span', this.getEl())[0];
+    main.connect('POST', 'class=resource&field=indentright', null, 'id='+this.id);
 
     if (!this.indentLeftButton) {
+        // Add a indent left button if none is present.
+        var commandContainer = YAHOO.util.Dom.getElementsByClassName('commands', 'span', this.getEl())[0];
         var button = main.mk_button('a', main.portal.icons['backwards'], main.portal.strings['moveleft'],
                 [['class', 'editing_moveleft']]);
         YAHOO.util.Event.addListener(button, 'click', this.indent_left, this, true);
         commandContainer.insertBefore(button, this.indentRightButton);
         this.indentLeftButton = button;
     }
-    main.connect('POST', 'class=resource&field=indentright', null, 'id='+this.id);
+
     return true;
 };
 

diff --git a/theme/base/style/core.css b/theme/base/style/core.css
@@ -686,3 +686,20 @@ body.tag .managelink {padding: 5px;}
  */
 .yui3-skin-sam .yui3-menu-horizontal .yui3-menu-label,
 .yui3-skin-sam .yui3-menu-horizontal .yui3-menu-content {background-image:none;}
+
+.mod-indent-1 {margin-left:20px;}
+.mod-indent-2 {margin-left:40px;}
+.mod-indent-3 {margin-left:60px;}
+.mod-indent-4 {margin-left:80px;}
+.mod-indent-5 {margin-left:100px;}
+.mod-indent-6 {margin-left:120px;}
+.mod-indent-7 {margin-left:140px;}
+.mod-indent-8 {margin-left:160px;}
+.mod-indent-9 {margin-left:180px;}
+.mod-indent-10 {margin-left:200px;}
+.mod-indent-11 {margin-left:220px;}
+.mod-indent-12 {margin-left:240px;}
+.mod-indent-13 {margin-left:260px;}
+.mod-indent-14 {margin-left:280px;}
+.mod-indent-15,
+.mod-indent-huge {margin-left:300px;}