Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

MDL-34119_M23 theme_splash: Added colourswitcher.js and associated co…

…de in layout files and lib.php
  • Loading branch information...
commit 3705a88629ce209aef8bb2dfb62c870efafe8867 1 parent 263e8c1
Mary Evans lazydaisy authored
2  theme/splash/config.php
View
@@ -152,3 +152,5 @@
);
$THEME->csspostprocess = 'splash_process_css';
+
+$THEME->javascripts = array('colourswitcher');
63 theme/splash/javascript/colourswitcher.js
View
@@ -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']});
1  theme/splash/layout/general.php
View
@@ -32,6 +32,7 @@
$hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
splash_check_colourswitch();
+splash_initialise_colourswitcher($PAGE);
$bodyclasses = array();
$bodyclasses[] = 'splash-'.splash_get_colour();
1  theme/splash/layout/report.php
View
@@ -32,6 +32,7 @@
$hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
splash_check_colourswitch();
+splash_initialise_colourswitcher($PAGE);
$bodyclasses = array();
$bodyclasses[] = 'splash-'.splash_get_colour();
13 theme/splash/lib.php
View
@@ -88,6 +88,19 @@ function splash_set_customcss($css, $customcss) {
}
/**
+ * 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
*
* @param string $default The default colour to use, normally red
Please sign in to comment.
Something went wrong with that request. Please try again.