Extract the theme logic to a separate file

src.json

@@ -27,6 +27,7 @@
     "common/DayGrid.limit.js",
     "common/TimeGrid.js",
     "common/TimeGrid.events.js",
+    "common/Theme.js",
     "common/View.js",
     "common/View.date-range.js",
     "common/Scroller.js",

src/Calendar.js

@@ -21,6 +21,8 @@ var Calendar = FC.Calendar = Class.extend(EmitterMixin, {
 		this.initMomentInternals(); // needs to happen after options hash initialized
 		this.initCurrentDate();
 
+		this.theme = new FC.Theme(this.option('theme'));
+
 		EventManager.call(this); // needs options immediately
 		this.initialize();
 	},

src/Calendar.render.js

@@ -51,6 +51,7 @@ Calendar.mixin({
 		this.optionsModel.watch('applyingThemeClasses', [ '?theme' ], function(opts) {
 			el.toggleClass('ui-widget', opts.theme);
 			el.toggleClass('fc-unthemed', !opts.theme);
+			_this.theme.setTheme(opts.theme);
 		});
 
 		// called immediately, and upon option change.

src/Toolbar.js

@@ -20,7 +20,6 @@ function Toolbar(calendar, toolbarOptions) {
 	// locals
 	var el;
 	var viewsWithButtons = [];
-	var tm;
 
 	// method to update toolbar-specific options, not calendar-wide options
 	function setToolbarOptions(newToolbarOptions) {
@@ -31,8 +30,6 @@ function Toolbar(calendar, toolbarOptions) {
 	function render() {
 		var sections = toolbarOptions.layout;
 
-		tm = calendar.opt('theme') ? 'ui' : 'fc';
-
 		if (sections) {
 			if (!el) {
 				el = this.el = $("<div class='fc-toolbar "+ toolbarOptions.extraClasses + "'/>");
@@ -140,8 +137,8 @@ function Toolbar(calendar, toolbarOptions) {
 
 							classes = [
 								'fc-' + buttonName + '-button',
-								tm + '-button',
-								tm + '-state-default'
+								calendar.theme.getClass('button'),
+								calendar.theme.getClass('stateDefault')
 							];
 
 							button = $( // type="button" so that it doesn't submit a form
@@ -151,17 +148,17 @@ function Toolbar(calendar, toolbarOptions) {
 								)
 								.click(function(ev) {
 									// don't process clicks for disabled buttons
-									if (!button.hasClass(tm + '-state-disabled')) {
+									if (!button.hasClass(calendar.theme.getClass('stateDisabled'))) {
 
 										buttonClick(ev);
 
 										// after the click action, if the button becomes the "active" tab, or disabled,
 										// it should never have a hover class, so remove it now.
 										if (
-											button.hasClass(tm + '-state-active') ||
-											button.hasClass(tm + '-state-disabled')
+											button.hasClass(calendar.theme.getClass('stateActive')) ||
+											button.hasClass(calendar.theme.getClass('stateDisabled'))
 										) {
-											button.removeClass(tm + '-state-hover');
+											button.removeClass(calendar.theme.getClass('stateHover'));
 										}
 									}
 								})
@@ -169,28 +166,28 @@ function Toolbar(calendar, toolbarOptions) {
 									// the *down* effect (mouse pressed in).
 									// only on buttons that are not the "active" tab, or disabled
 									button
-										.not('.' + tm + '-state-active')
-										.not('.' + tm + '-state-disabled')
-										.addClass(tm + '-state-down');
+										.not('.' + calendar.theme.getClass('stateActive'))
+										.not('.' + calendar.theme.getClass('stateDisabled'))
+										.addClass(calendar.theme.getClass('stateDown'));
 								})
 								.mouseup(function() {
 									// undo the *down* effect
-									button.removeClass(tm + '-state-down');
+									button.removeClass(calendar.theme.getClass('stateDown'));
 								})
 								.hover(
 									function() {
 										// the *hover* effect.
 										// only on buttons that are not the "active" tab, or disabled
 										button
-											.not('.' + tm + '-state-active')
-											.not('.' + tm + '-state-disabled')
-											.addClass(tm + '-state-hover');
+											.not('.' + calendar.theme.getClass('stateActive'))
+											.not('.' + calendar.theme.getClass('stateDisabled'))
+											.addClass(calendar.theme.getClass('stateHover'));
 									},
 									function() {
 										// undo the *hover* effect
 										button
-											.removeClass(tm + '-state-hover')
-											.removeClass(tm + '-state-down'); // if mouseleave happens before mouseup
+											.removeClass(calendar.theme.getClass('stateHover'))
+											.removeClass(calendar.theme.getClass('stateDown')); // if mouseleave happens before mouseup
 									}
 								);
 
@@ -201,8 +198,8 @@ function Toolbar(calendar, toolbarOptions) {
 
 				if (isOnlyButtons) {
 					groupChildren
-						.first().addClass(tm + '-corner-left').end()
-						.last().addClass(tm + '-corner-right').end();
+						.first().addClass(calendar.theme.getClass('cornerLeft')).end()
+						.last().addClass(calendar.theme.getClass('cornerRight')).end();
 				}
 
 				if (groupChildren.length > 1) {
@@ -233,7 +230,7 @@ function Toolbar(calendar, toolbarOptions) {
 	function activateButton(buttonName) {
 		if (el) {
 			el.find('.fc-' + buttonName + '-button')
-				.addClass(tm + '-state-active');
+				.addClass(calendar.theme.getClass('stateActive'));
 		}
 	}
 
@@ -241,7 +238,7 @@ function Toolbar(calendar, toolbarOptions) {
 	function deactivateButton(buttonName) {
 		if (el) {
 			el.find('.fc-' + buttonName + '-button')
-				.removeClass(tm + '-state-active');
+				.removeClass(calendar.theme.getClass('stateActive'));
 		}
 	}
 
@@ -250,7 +247,7 @@ function Toolbar(calendar, toolbarOptions) {
 		if (el) {
 			el.find('.fc-' + buttonName + '-button')
 				.prop('disabled', true)
-				.addClass(tm + '-state-disabled');
+				.addClass(calendar.theme.getClass('stateDisabled'));
 		}
 	}
 
@@ -259,7 +256,7 @@ function Toolbar(calendar, toolbarOptions) {
 		if (el) {
 			el.find('.fc-' + buttonName + '-button')
 				.prop('disabled', false)
-				.removeClass(tm + '-state-disabled');
+				.removeClass(calendar.theme.getClass('stateDisabled'));
 		}
 	}
 

src/common/Theme.js

@@ -0,0 +1,50 @@
+var themes = {
+	builtin: {
+		widgetHeader: 'fc-widget-header',
+		widgetContent: 'fc-widget-content',
+		stateHighlight: 'fc-state-highlight',
+		stateDefault: 'fc-state-default',
+		stateActive: 'fc-state-active',
+		stateDisabled: 'fc-state-disabled',
+		stateHover: 'fc-state-hover',
+		stateDown: 'fc-state-down',
+		button: 'fc-button',
+		cornerLeft: 'fc-corner-left',
+		cornerRight: 'fc-corner-right',
+		buttonGroup: 'fc-button-group'
+	},
+	jQueryUI: {
+		widgetHeader: 'ui-widget-header',
+		widgetContent: 'ui-widget-content',
+		stateHighlight: 'ui-state-highlight',
+		stateDefault: 'ui-state-default',
+		stateActive: 'ui-state-active',
+		stateDisabled: 'ui-state-disabled',
+		stateHover: 'ui-state-hover',
+		stateDown: 'ui-state-down',
+		button: 'ui-button',
+		cornerLeft: 'ui-corner-left',
+		cornerRight: 'ui-corner-right',
+		buttonGroup: 'fc-button-group'
+	}
+};
+
+FC.Theme = Class.extend({
+	constructor: function(theme) {
+		this.setTheme(theme);
+	},
+
+	setTheme: function(theme) {
+		if (theme === true) {
+			this.theme = 'jQueryUI';
+		} else if (themes.hasOwnProperty(theme)) {
+			this.theme = theme;
+		} else {
+			this.theme = 'builtin';
+		}
+	},
+
+	getClass: function(key) {
+		return themes[this.theme][key] || '';
+	}
+});

src/common/View.js

@@ -537,11 +537,9 @@ var View = FC.View = Model.extend({
 
 	// Initializes internal variables related to theming
 	initThemingProps: function() {
-		var tm = this.opt('theme') ? 'ui' : 'fc';
-
-		this.widgetHeaderClass = tm + '-widget-header';
-		this.widgetContentClass = tm + '-widget-content';
-		this.highlightStateClass = tm + '-state-highlight';
+		this.widgetHeaderClass = this.calendar.theme.getClass('widgetHeader');
+		this.widgetContentClass = this.calendar.theme.getClass('widgetContent');
+		this.highlightStateClass = this.calendar.theme.getClass('stateHighlight');
 	},