Datepicker: Improve localization handling, code style

Author: fnagel

tests/unit/calendar/calendar_core.js

@@ -64,7 +64,7 @@ test( "base structure", function() {
 });
 
 test( "Localization", function() {
-	expect( 5 );
+	expect( 10 );
 
 	var defaultLocale = Globalize.locale(),
 		element = $( "#calendar" ),
@@ -102,6 +102,12 @@ test( "Localization", function() {
 	testLocalization( "Init: " );
 	element.calendar( "destroy" );
 
+	Globalize.locale( defaultLocale.locale );
+	initCalendar();
+	Globalize.locale( "de-DE" );
+	element.calendar( "refresh" );
+	testLocalization( "After init: " );
+
 	Globalize.locale( defaultLocale.locale );
 });
 

ui/calendar.js

@@ -43,6 +43,7 @@ return $.widget( "ui.calendar", {
 
 	_create: function() {
 		this.id = this.element.uniqueId().attr( "id" );
+		this.labels = Globalize.translate( "datepicker" );
 
 		this.date = $.date( this.options.value, this.options.dateFormat ).select();
 		this.date.eachDay = this.options.eachDay;
@@ -198,41 +199,43 @@ return $.widget( "ui.calendar", {
 
 	_buildHeader: function() {
 		return "<div class='ui-calendar-header ui-widget-header ui-helper-clearfix ui-corner-all'>" +
-			this._buildPreviousLink() +
-			this._buildNextLink() +
-			this._buildTitlebar() +
-		"</div>";
+				this._buildPreviousLink() +
+				this._buildNextLink() +
+				this._buildTitlebar() +
+			"</div>";
 	},
 
 	_buildPreviousLink: function() {
-		var labels = Globalize.translate( "datepicker" );
+		var prevText = this._getTranslation( "prevText" );
 
-		return "<button class='ui-calendar-prev ui-corner-all' title='" + labels.prevText + "'>" +
+		return "<button class='ui-calendar-prev ui-corner-all' title='" +
+					prevText + "'>" +
 			"<span class='ui-icon ui-icon-circle-triangle-w'>" +
-				labels.prevText +
+				prevText +
 			"</span>" +
 		"</button>";
 	},
 
 	_buildNextLink: function() {
-		var labels = Globalize.translate( "datepicker" );
+		var nextText = this._getTranslation( "nextText" );
 
-		return "<button class='ui-calendar-next ui-corner-all' title='" + labels.nextText + "'>" +
+		return "<button class='ui-calendar-next ui-corner-all' title='" +
+					nextText + "'>" +
 			"<span class='ui-icon ui-icon-circle-triangle-e'>" +
-				labels.nextText +
+				nextText +
 			"</span>" +
 		"</button>";
 	},
 
 	_buildTitlebar: function() {
-		var labels = Globalize.translate( "datepicker" );
-
 		return "<div role='header' id='" + this.id + "-title'>" +
 			"<div id='" + this.id + "-month-label' class='ui-calendar-title'>" +
-				this._buildTitle() +
-			"</div>" +
-			"<span class='ui-helper-hidden-accessible'>, " + labels.datePickerRole + "</span>" +
-		"</div>";
+					this._buildTitle() +
+				"</div>" +
+				"<span class='ui-helper-hidden-accessible'>, " +
+					this._getTranslation( "datePickerRole" ) +
+				"</span>" +
+			"</div>";
 	},
 
 	_buildTitle: function() {
@@ -246,36 +249,36 @@ return $.widget( "ui.calendar", {
 
 	_buildGrid: function() {
 		return "<table class='ui-calendar-calendar' role='grid' aria-readonly='true' " +
-			"aria-labelledby='" + this.id + "-month-label' tabindex='0' aria-activedescendant='" + this.id + "-" + this.date.day() + "'>" +
-			this._buildGridHeading() +
-			this._buildGridBody() +
-		"</table>";
+				"aria-labelledby='" + this.id + "-month-label' tabindex='0' " +
+				"aria-activedescendant='" + this.id + "-" + this.date.day() + "'>" +
+				this._buildGridHeading() +
+				this._buildGridBody() +
+			"</table>";
 	},
 
 	_buildGridHeading: function() {
 		var cells = "",
 			i = 0,
-			labels = Globalize.translate( "datepicker" ),
 			weekDayLength = this.date.weekdays().length;
 
 		if ( this.options.showWeek ) {
-			cells += "<th class='ui-calendar-week-col'>" + labels.weekHeader + "</th>";
+			cells += "<th class='ui-calendar-week-col'>" + this._getTranslation( "weekHeader" ) + "</th>";
 		}
 		for ( ; i < weekDayLength; i++ ) {
 			cells += this._buildGridHeaderCell( this.date.weekdays()[ i ] );
 		}
 
 		return "<thead role='presentation'>" +
-			"<tr role='row'>" + cells + "</tr>" +
-		"</thead>";
+				"<tr role='row'>" + cells + "</tr>" +
+			"</thead>";
 	},
 
 	_buildGridHeaderCell: function( day ) {
 		return "<th role='columnheader' abbr='" + day.fullname + "' aria-label='" + day.fullname + "'>" +
-			"<span title='" + day.fullname + "'>" +
-				day.shortname +
-			"</span>" +
-		"</th>";
+				"<span title='" + day.fullname + "'>" +
+					day.shortname +
+				"</span>" +
+			"</th>";
 	},
 
 	_buildGridBody: function() {
@@ -330,7 +333,6 @@ return $.widget( "ui.calendar", {
 
 	_buildDayElement: function( day, selectable ) {
 		var classes = [ "ui-state-default" ],
-			labels = Globalize.translate( "datepicker" ),
 			content = "";
 
 		if ( day === this.date && selectable ) {
@@ -355,18 +357,18 @@ return $.widget( "ui.calendar", {
 		}
 
 		if ( day.today ) {
-			content += "<span class='ui-helper-hidden-accessible'>, " + labels.currentText + "</span>";
+			content += "<span class='ui-helper-hidden-accessible'>, " + this._getTranslation( "currentText" ) + "</span>";
 		}
 
 		return content;
 	},
 
 	_buildButtons: function() {
-		var labels = Globalize.translate( "datepicker" );
-
 		return "<div class='ui-calendar-buttonpane ui-widget-content'>" +
-			"<button class='ui-calendar-current'>" + labels.currentText + "</button>" +
-		"</div>";
+				"<button class='ui-calendar-current'>" +
+					this._getTranslation( "currentText" ) +
+				"</button>" +
+			"</div>";
 	},
 
 	// Refreshing the entire calendar during interaction confuses screen readers, specifically
@@ -375,13 +377,18 @@ return $.widget( "ui.calendar", {
 	// with the prev and next links would cause loss of focus issues because the links being
 	// interacted with will disappear while focused.
 	refresh: function() {
+		this.labels = Globalize.translate( "datepicker" );
 
 		// Determine which day gridcell to focus after refresh
 		// TODO: Prevent disabled cells from being focused
 		if ( this.options.numberOfMonths === 1 ) {
 			this.grid = $( this._buildGrid() );
 			this.element.find( ".ui-calendar-title" ).html( this._buildTitle() );
 			this.element.find( ".ui-calendar-calendar" ).replaceWith( this.grid );
+			$( ".ui-calendar-prev", this.element ).attr( "title", this.labels.prevText )
+				.children().html( this.labels.prevText );
+			$( ".ui-calendar-next", this.element ).attr( "title", this.labels.nextText )
+				.children().html( this.labels.nextText );
 		} else {
 			this._refreshMultiplePicker();
 		}
@@ -402,6 +409,10 @@ return $.widget( "ui.calendar", {
 		this.element.find( ".ui-state-focus" ).not( ":first" ).removeClass( "ui-state-focus" );
 	},
 
+	_getTranslation: function( key ) {
+		return $( "<a>" ).text( this.labels[ key ] ).html();
+	},
+
 	_setHiddenPicker: function() {
 		this.element.attr({
 			"aria-hidden": "true",