Browse Source

Move button icon handling to the themes

Joan Karadimov 8 years ago
parent
commit
a875c91e64
4 changed files with 54 additions and 33 deletions
  1. 4 17
      src/Toolbar.js
  2. 1 4
      src/common/DayGrid.limit.js
  3. 47 0
      src/common/Theme.js
  4. 2 12
      src/defaults.js

+ 4 - 17
src/Toolbar.js

@@ -74,8 +74,7 @@ function Toolbar(calendar, toolbarOptions) {
 					var buttonClick;
 					var overrideText; // text explicitly set by calendar's constructor options. overcomes icons
 					var defaultText;
-					var themeIcon;
-					var normalIcon;
+					var iconClass;
 					var innerHtml;
 					var classes;
 					var button; // the element
@@ -111,25 +110,13 @@ function Toolbar(calendar, toolbarOptions) {
 						}
 
 						if (buttonClick) {
-
-							themeIcon =
-								customButtonProps ?
-									customButtonProps.themeIcon :
-									calendar.opt('themeButtonIcons')[buttonName];
-
-							normalIcon =
-								customButtonProps ?
-									customButtonProps.icon :
-									calendar.opt('buttonIcons')[buttonName];
+							iconClass = calendar.theme.getIconClassWithOverride(buttonName, customButtonProps, calendar);
 
 							if (overrideText) {
 								innerHtml = htmlEscape(overrideText);
 							}
-							else if (themeIcon && calendar.opt('theme')) {
-								innerHtml = "<span class='ui-icon ui-icon-" + themeIcon + "'></span>";
-							}
-							else if (normalIcon && !calendar.opt('theme')) {
-								innerHtml = "<span class='fc-icon fc-icon-" + normalIcon + "'></span>";
+							else if (iconClass) {
+								innerHtml = "<span class='" + iconClass + "'></span>";
 							}
 							else {
 								innerHtml = htmlEscape(defaultText);

+ 1 - 4
src/common/DayGrid.limit.js

@@ -282,13 +282,10 @@ DayGrid.mixin({
 	// Builds the inner DOM contents of the segment popover
 	renderSegPopoverContent: function(row, col, segs) {
 		var view = this.view;
-		var isTheme = view.opt('theme');
 		var title = this.getCellDate(row, col).format(view.opt('dayPopoverFormat'));
 		var content = $(
 			'<div class="fc-header ' + view.calendar.theme.getClass('popoverHeader') + '">' +
-				'<span class="fc-close ' +
-					(isTheme ? 'ui-icon ui-icon-closethick' : 'fc-icon fc-icon-x') +
-				'"></span>' +
+				'<span class="fc-close ' + view.calendar.theme.getIconClass('close') + '"></span>' +
 				'<span class="fc-title">' +
 					htmlEscape(title) +
 				'</span>' +

+ 47 - 0
src/common/Theme.js

@@ -18,6 +18,13 @@ var themes = {
 			buttonGroup: 'fc-button-group',
 			tableHeader: 'fc-widget-header',
 			tableContent: 'fc-widget-content'
+		},
+		iconClasses: {
+			close: 'fc-icon fc-icon-x',
+			prev: 'fc-icon fc-icon-left-single-arrow',
+			next: 'fc-icon fc-icon-right-single-arrow',
+			prevYear: 'fc-icon fc-icon-left-double-arrow',
+			nextYear: 'fc-icon fc-icon-right-double-arrow'
 		}
 	},
 	jQueryUI: {
@@ -39,6 +46,13 @@ var themes = {
 			buttonGroup: 'fc-button-group',
 			tableHeader: 'ui-widget-header',
 			tableContent: 'ui-widget-content'
+		},
+		iconClasses: {
+			close: 'ui-icon ui-icon-closethick',
+			prev: 'ui-icon ui-icon-circle-triangle-w',
+			next: 'ui-icon ui-icon-circle-triangle-e',
+			prevYear: 'ui-icon ui-icon-seek-prev',
+			nextYear: 'ui-icon ui-icon-seek-next'
 		}
 	},
 	bootstrap3: {
@@ -55,6 +69,13 @@ var themes = {
 			tableContent: 'panel-default',
 			tableGrid: 'table-bordered',
 			tableList: 'table'
+		},
+		iconClasses: {
+			close: 'fc-icon fc-icon-x',
+			prev: 'fc-icon fc-icon-left-single-arrow',
+			next: 'fc-icon fc-icon-right-single-arrow',
+			prevYear: 'fc-icon fc-icon-left-double-arrow',
+			nextYear: 'fc-icon fc-icon-right-double-arrow'
 		}
 	}
 };
@@ -76,5 +97,31 @@ FC.Theme = Class.extend({
 
 	getClass: function(key) {
 		return themes[this.theme].classes[key] || '';
+	},
+
+	getIconClass: function(buttonName) {
+		return themes[this.theme].iconClasses[buttonName] || '';
+	},
+
+	getIconClassWithOverride: function(buttonName, customButtonProps, calendar) {
+		if (this.theme === 'builtin') {
+			if (customButtonProps) {
+				return customButtonProps.icon;
+			} else if (!calendar.opt('buttonIcons')) {
+				return undefined;
+			} else if (calendar.opt('buttonIcons')[buttonName]) {
+				return 'fc-icon fc-icon-' + calendar.opt('buttonIcons')[buttonName];
+			}
+		} else if (this.theme === 'jQueryUI') {
+			if (customButtonProps) {
+				return customButtonProps.themeIcon;
+			} else if (!calendar.opt('themeButtonIcons')) {
+				return undefined;
+			} else if (calendar.opt('themeButtonIcons')[buttonName]) {
+				return 'ui-icon ui-icon-' + calendar.opt('themeButtonIcons')[buttonName];
+			}
+		}
+
+		return this.getIconClass(buttonName);
 	}
 });

+ 2 - 12
src/defaults.js

@@ -56,23 +56,13 @@ Calendar.defaults = {
 		day: 'day'
 	},
 
-	buttonIcons: {
-		prev: 'left-single-arrow',
-		next: 'right-single-arrow',
-		prevYear: 'left-double-arrow',
-		nextYear: 'right-double-arrow'
-	},
+	buttonIcons: {},
 
 	allDayText: 'all-day',
 	
 	// jquery-ui theming
 	theme: false,
-	themeButtonIcons: {
-		prev: 'circle-triangle-w',
-		next: 'circle-triangle-e',
-		prevYear: 'seek-prev',
-		nextYear: 'seek-next'
-	},
+	themeButtonIcons: {},
 
 	//eventResizableFromStart: false,
 	dragOpacity: .75,