MDL-34119_M23 theme_splash: Added colourswitcher.js and associated code in layout files and lib.php

theme/splash/config.php

@@ -152,3 +152,5 @@ $THEME->layouts = array(
 );
 
 $THEME->csspostprocess = 'splash_process_css';
+
+$THEME->javascripts = array('colourswitcher');

theme/splash/javascript/colourswitcher.js

@@ -0,0 +1,63 @@
+YUI.add('moodle-theme_splash-colourswitcher', function(Y) {
+
+// Available colours
+var COLOURS = ['red','green','blue','orange'];
+
+/**
+ * Splash theme colour switcher class.
+ * Initialise this class by calling M.theme_splash.init
+ */
+var ColourSwitcher = function() {
+    ColourSwitcher.superclass.constructor.apply(this, arguments);
+};
+ColourSwitcher.prototype = {
+    /**
+     * Constructor for this class
+     * @param {object} config
+     */
+    initializer : function(config) {
+        var i, c;
+        // Attach events to the links to change colours so we can do it with
+        // JavaScript without refreshing the page
+        for (i in COLOURS) {
+            c = COLOURS[i];
+            // Check if this is the current colour
+            if (Y.one(document.body).hasClass('splash-'+c)) {
+                this.set('colour', c);
+            }
+            Y.all(config.div+' .colour-'+c).on('click', this.setColour, this, c);
+        }
+    },
+    /**
+     * Sets the colour being used for the splash theme
+     * @param {Y.Event} e The event that fired
+     * @param {string} colour The new colour
+     */
+    setColour : function(e, colour) {
+        // Prevent the event from refreshing the page
+        e.preventDefault();
+        // Switch over the CSS classes on the body
+        Y.one(document.body).replaceClass('splash-'+this.get('colour'), 'splash-'+colour);
+        // Update the current colour
+        this.set('colour', colour);
+        // Store the users selection (Uses AJAX to save to the database)
+        M.util.set_user_preference('theme_splash_chosen_colour', colour);
+    }
+};
+// Make the colour switcher a fully fledged YUI module
+Y.extend(ColourSwitcher, Y.Base, ColourSwitcher.prototype, {
+    NAME : 'Splash theme colour switcher',
+    ATTRS : {
+        colour : {
+            value : 'red'
+        }
+    }
+});
+// Our splash theme namespace
+M.theme_splash = M.theme_splash || {};
+// Initialisation function for the colour switcher
+M.theme_splash.initColourSwitcher = function(cfg) {
+    return new ColourSwitcher(cfg);
+}
+
+}, '@VERSION@', {requires:['base','node']});

theme/splash/layout/general.php

@@ -32,6 +32,7 @@ $custommenu = $OUTPUT->custom_menu();
 $hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
 
 splash_check_colourswitch();
+splash_initialise_colourswitcher($PAGE);
 
 $bodyclasses = array();
 $bodyclasses[] = 'splash-'.splash_get_colour();

theme/splash/layout/report.php

@@ -32,6 +32,7 @@ $custommenu = $OUTPUT->custom_menu();
 $hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
 
 splash_check_colourswitch();
+splash_initialise_colourswitcher($PAGE);
 
 $bodyclasses = array();
 $bodyclasses[] = 'splash-'.splash_get_colour();

theme/splash/lib.php

@@ -87,6 +87,19 @@ function splash_set_customcss($css, $customcss) {
     return $css;
 }
 
+/**
+ * Adds the JavaScript for the colour switcher to the page.
+ *
+ * The colour switcher is a YUI moodle module that is located in
+ *     theme/splash/yui/splash/splash.js
+ *
+ * @param moodle_page $page
+ */
+function splash_initialise_colourswitcher(moodle_page $page) {
+    user_preference_allow_ajax_update('theme_splash_chosen_colour', PARAM_ALPHA);
+    $page->requires->yui_module('moodle-theme_splash-colourswitcher', 'M.theme_splash.initColourSwitcher', array(array('div'=>'#colourswitcher')));
+}
+
 /**
  * Gets the colour the user has selected, or the default if they have never changed
  *