From c1c0b3135bf36dacb8c79a14753d485a39f1c089 Mon Sep 17 00:00:00 2001
From: Gareth J Barnard <gjbarnard@gmail.com>
Date: Sun, 2 Sep 2012 23:05:14 +0100
Subject: [PATCH] Change to 'pix:' in css for images with css class based
 toggling.

---
 Readme.txt                          |  29 +++++++++++++++---
 format.php                          |  28 -----------------
 module.js                           |  12 ++++----
 {images => pix}/arrow_down.png      | Bin
 {images => pix}/arrow_up.png        | Bin
 {images => pix}/tc_logo_spanner.png | Bin
 renderer.php                        |   2 +-
 styles.css                          |  45 +++++++++++++++++++++++-----
 version.php                         |   2 +-
 9 files changed, 71 insertions(+), 47 deletions(-)
 rename {images => pix}/arrow_down.png (100%)
 rename {images => pix}/arrow_up.png (100%)
 rename {images => pix}/tc_logo_spanner.png (100%)

diff --git a/Readme.txt b/Readme.txt
index 90440f83..91a4b2b1 100644
--- a/Readme.txt
+++ b/Readme.txt
@@ -42,8 +42,17 @@ Installation
  8. Login as an administrator and follow standard the 'plugin' update notification.  If needed, go to
     'Site administration' -> 'Notifications' if this does not happen.
  9.  If desired, edit the colours of the 'styles.css' - which contains instructions on how to have per theme colours.
-10.  To change the arrow graphic you need to replace 'arrow_up.png' and 'arrow_down.png'.  Reuse the graphics
-     if you want.  Created in Paint.Net.
+10.  To change the arrow graphic you need to replace 'arrow_up.png' and 'arrow_down.png' in the 'pix' folder.  Or override the
+     css by using the selectors for the various images, override the 'background' attribute:
+
+     body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_open - For the 'up' arrow in the toggle - original is 24px.
+     body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_closed - For the 'down' arrow in the toggle - original is 24px.
+     .course-content ul.ctopics li.section .content .toggle a.toggle_closed - For the 'up' arrow in the toggle when JavaScript is disabled and the toggles default to open.
+     #toggle-all .content .sectionbody h4 a.on - For the 'open all sections' image - original is 24px.
+     #toggle-all .content .sectionbody h4 a.off - For the 'closed all sections' image - original is 24px.
+     #tc-set-settings - For the 'settings' image.
+
+     If in doubt, please consult 'styles.css' in the format.
 11.  Put Moodle out of Maintenance Mode.
 
 Upgrade Instructions
@@ -524,7 +533,7 @@ NOTE: If uninstallation fails, drop the table 'format_topcoll_layout' and the en
      instructions on the left.  The instructions are in the 'en' langauge file as the 'formatsettingsinformation'
      string for translation.
  
-30th August 2012 - Version 2.3.7.3
+2nd September 2012 - Version 2.3.7.3
   1. Changes to 'renderer.php' because of MDL-28207 - thus requiring Moodle 2.3.1 2012062501.09 (Build: 20120809).
   2. Implemented MDL-34798 which I reported for AJAX section moving.
   3. Integrated CONTRIB-3827 to fix proliferation of CSS styles across other course formats.
@@ -535,6 +544,18 @@ NOTE: If uninstallation fails, drop the table 'format_topcoll_layout' and the en
   8. Implemented MDL-34917 which I reported as an improvement.
   9. Make toggle titles bold and change 'all toggles' to 'all sections', from comments made on MDL-35048.
  10. Cherry picked Luiggi's change https://github.com/luiggisanso/moodle-format_topcoll/commit/9bd818f5a4efb347aef4f5154ea2930526552bfc
+ 11. Figured out how to use 'pix:' for URL's in css for the format, so have changed so that the images are now controlled by css classes.  This
+     means that it is now possible to override them in your theme in css.  The following is the selectors for the various images, override
+     the 'background' attribute:
+
+     body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_open - For the 'up' arrow in the toggle - original is 24px.
+     body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_closed - For the 'down' arrow in the toggle - original is 24px.
+     .course-content ul.ctopics li.section .content .toggle a.toggle_closed - For the 'up' arrow in the toggle when JavaScript is disabled and the toggles default to open.
+     #toggle-all .content .sectionbody h4 a.on - For the 'open all sections' image - original is 24px.
+     #toggle-all .content .sectionbody h4 a.off - For the 'closed all sections' image - original is 24px.
+     #tc-set-settings - For the 'settings' image.
+
+     If in doubt, please consult 'styles.css' in the format.
 
 Thanks
 ------
@@ -587,6 +608,6 @@ Desired Enhancements
 --------------------
 1. Smoother animated toggle action.
 
-G J Barnard MSc. BSc(Hons)(Sndw). MBCS. CEng. CITP. PGCE. - 30th August 2012.
+G J Barnard MSc. BSc(Hons)(Sndw). MBCS. CEng. CITP. PGCE. - 2nd September 2012.
 Moodle profile: moodle.org/user/profile.php?id=442195.
 Web profile   : about.me/gjbarnard
\ No newline at end of file
diff --git a/format.php b/format.php
index f8452b8e..8735fe7d 100644
--- a/format.php
+++ b/format.php
@@ -86,34 +86,6 @@
     ?>
     <style type="text/css" media="screen">
         /* <![CDATA[ */
-        /* -- Images here as need to know the full url due to [[pix:****]] not working with course formats in the css file and the relative position changes between theme designer mode on / off.  -- */
-
-        /* -- The clickable element of the Toggle -- */
-        .course-content ul.ctopics li.section .content .toggle a.cps_a {
-            background: transparent url(<?php echo $CFG->wwwroot ?>/course/format/topcoll/images/arrow_up.png) no-repeat 5px 45%; /* Position the arrow roughly in the centre of the Toggle.  This is shown by default when JavaScript is disabled. */
-        }
-
-        body.jsenabled .course-content ul.ctopics li.section .content .toggle a.cps_a {
-            background: transparent url(<?php echo $CFG->wwwroot ?>/course/format/topcoll/images/arrow_down.png) no-repeat 5px 45%; /* Position the arrow roughly in the centre of the Toggle.   This is shown by default when JavaScript is enabled. */
-        }
-
-        #toggle-all .content .sectionbody h4 a.on {
-            background: transparent url(<?php echo $CFG->wwwroot ?>/course/format/topcoll/images/arrow_down.png) no-repeat 0px 45%; 
-        }
-
-        #toggle-all .content .sectionbody h4 a.off {
-            background: transparent url(<?php echo $CFG->wwwroot ?>/course/format/topcoll/images/arrow_up.png) no-repeat 0px 45%; 
-        }
-
-        /* Set settings */
-        #tc-set-settings {
-            background: transparent url(<?php echo $CFG->wwwroot ?>/course/format/topcoll/images/tc_logo_spanner.png) no-repeat 0px 0px; 
-            width: 96px;
-            height: 75px;
-            float: right;
-            margin: 4px;
-            vertical-align: text-top;
-        }
 
         /* -- Toggle -- */
         .course-content ul.ctopics li.section .content .toggle {
diff --git a/module.js b/module.js
index 895d3cc4..8c05c013 100644
--- a/module.js
+++ b/module.js
@@ -135,9 +135,9 @@ function toggleexacttopic(target,image,toggleNum,reloading,savetoggles)  // Togg
 
             if (mymobiletheme == true) {
                 image.className = image.className.replace(/\b opencps\b/,''); //remove the class name
-                image.style.backgroundImage = "url(" + thewwwroot + "/course/format/topcoll/images/arrow_down.png)";  // Temporary until MyMobile is fixed - MDL-33115.
+                image.className = image.className.replace('toggle_open','toggle_closed');  // Temporary until MyMobile is fixed - MDL-33115.
             } else {
-                image.style.backgroundImage = "url(" + thewwwroot + "/course/format/topcoll/images/arrow_down.png)";
+                image.className = image.className.replace('toggle_open','toggle_closed'); //change the class name
             }
 
             // Save the toggle!
@@ -151,15 +151,15 @@ function toggleexacttopic(target,image,toggleNum,reloading,savetoggles)  // Togg
 
             if (mymobiletheme == true) {
                 image.className += " opencps";  //add the class name
-                image.style.backgroundImage = "url(" + thewwwroot + "/course/format/topcoll/images/arrow_up.png)";  // Temporary until MyMobile is fixed - MDL-33115.
+                image.className = image.className.replace('toggle_closed','toggle_open');  // Temporary until MyMobile is fixed - MDL-33115.
             } else {
-                image.style.backgroundImage = "url(" + thewwwroot + "/course/format/topcoll/images/arrow_up.png)";
+                image.className = image.className.replace('toggle_closed','toggle_open'); //change the class name
             }
 
             // Save the toggle!
             if (reloading == false) {
-			    togglebinary(toggleNum,"1",savetoggles);
-			}
+                togglebinary(toggleNum,"1",savetoggles);
+            }
         }
     }
 }
diff --git a/images/arrow_down.png b/pix/arrow_down.png
similarity index 100%
rename from images/arrow_down.png
rename to pix/arrow_down.png
diff --git a/images/arrow_up.png b/pix/arrow_up.png
similarity index 100%
rename from images/arrow_up.png
rename to pix/arrow_up.png
diff --git a/images/tc_logo_spanner.png b/pix/tc_logo_spanner.png
similarity index 100%
rename from images/tc_logo_spanner.png
rename to pix/tc_logo_spanner.png
diff --git a/renderer.php b/renderer.php
index 2e56ea83..113b81ac 100644
--- a/renderer.php
+++ b/renderer.php
@@ -236,7 +236,7 @@ protected function section_header($section, $course, $onsectionpage, $sectionret
             $o .= html_writer::start_tag('div', array('class' => 'sectionhead toggle', 'id' => 'toggle-' . $section->section));
 
             $title = get_section_name($course, $section);
-            $toggleclass = 'cps_a';
+            $toggleclass = 'toggle_closed';
             if ((string) $section->name == '') { // Name is empty.
                 $toggleclass .= ' cps_noname';
             }
diff --git a/styles.css b/styles.css
index d66e6022..d1bca85d 100644
--- a/styles.css
+++ b/styles.css
@@ -42,6 +42,26 @@
     padding: 0px;
 }
 
+
+/* -- Set the clickable element of the Toggle -- */
+.course-content ul.ctopics li.section .content .toggle a {
+    display: block;
+    width: auto;
+    padding: 7px 0 7px 35px; /* The 35px allows the arrow to be on the left and the text next to it. */
+}
+
+.course-content ul.ctopics li.section .content .toggle a.toggle_closed {
+    background: transparent url([[pix:format_topcoll|arrow_up]]) no-repeat 5px 45%; /* Position the arrow roughly in the centre of the Toggle.  This is shown by default when JavaScript is disabled. */
+}
+
+body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_open {
+    background: transparent url([[pix:format_topcoll|arrow_up]]) no-repeat 5px 45%; /* Position the arrow roughly in the centre of the Toggle.  This is shown by default when JavaScript is disabled. */
+}
+
+body.jsenabled .course-content ul.ctopics li.section .content .toggle a.toggle_closed {
+    background: transparent url([[pix:format_topcoll|arrow_down]]) no-repeat 5px 45%; /* Position the arrow roughly in the centre of the Toggle.   This is shown by default when JavaScript is enabled. */
+}
+
 #mymobile .course-content ul.ctopics li.tcsection .content {
     margin: 0;
 }
@@ -108,13 +128,6 @@
     width: 100%;
 }
 
-/* -- Set the clickable element of the Toggle -- */
-.course-content ul.ctopics li.section .content .toggle a.cps_a {
-    display: block;
-    width: auto;
-    padding: 7px 0 7px 35px; /* The 35px allows the arrow to be on the left and the text next to it. */
-}
-
 /* -- Toggle text -- */
 .course-content ul.ctopics li.section .content .toggle a {
     text-decoration: none;
@@ -153,9 +166,27 @@ body.jsenabled .toggledsection {
   background: none repeat scroll 0 0 transparent;
 }
 
+#toggle-all .content .sectionbody h4 a.on {
+    background: transparent url([[pix:format_topcoll|arrow_down]]) no-repeat 0px 45%; 
+}
+
+#toggle-all .content .sectionbody h4 a.off {
+    background: transparent url([[pix:format_topcoll|arrow_up]]) no-repeat 0px 45%; 
+}
+
 /* Settings */
 div.tcsettingscontainer {
   width:100%;
   float:left;
   display: block;
 }
+
+/* Set settings */
+#tc-set-settings {
+    background: transparent url([[pix:format_topcoll|tc_logo_spanner]]) no-repeat 0px 0px; 
+    width: 96px;
+    height: 75px;
+    float: right;
+    margin: 4px;
+    vertical-align: text-top;
+}
diff --git a/version.php b/version.php
index fcd6ec42..435f0b91 100644
--- a/version.php
+++ b/version.php
@@ -31,7 +31,7 @@
  */
 defined('MOODLE_INTERNAL') || die();
 
-$plugin->version = 2012083000;
+$plugin->version = 2012090200;
 $plugin->maturity = MATURITY_STABLE;
 $plugin->requires = 2012062501.09; // 2.3.1 (Build: 20120809)
 $plugin->component = 'format_topcoll';