diff --git a/theme/splash/config.php b/theme/splash/config.php index fbdedaf9169..c428ce5a167 100644 --- a/theme/splash/config.php +++ b/theme/splash/config.php @@ -152,3 +152,5 @@ $THEME->layouts = array( ); $THEME->csspostprocess = 'splash_process_css'; + +$THEME->javascripts = array('colourswitcher'); diff --git a/theme/splash/javascript/colourswitcher.js b/theme/splash/javascript/colourswitcher.js new file mode 100644 index 00000000000..578f96beefa --- /dev/null +++ b/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']}); diff --git a/theme/splash/layout/general.php b/theme/splash/layout/general.php index 0b940830dbf..3def7ed9012 100644 --- a/theme/splash/layout/general.php +++ b/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(); diff --git a/theme/splash/layout/report.php b/theme/splash/layout/report.php index 20a977508da..10d73901f02 100644 --- a/theme/splash/layout/report.php +++ b/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(); diff --git a/theme/splash/lib.php b/theme/splash/lib.php index 5aeb7dbb6e4..f9f1fb60a0f 100644 --- a/theme/splash/lib.php +++ b/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 *