Datepicker: Improve localization handling, code style

diff --git a/tests/unit/calendar/calendar_core.js b/tests/unit/calendar/calendar_core.js
index ba424b7b8ed076a19ddd77196c65f7dbeffafaa5..0a33363c9af92904f25cd7fe6c9e60216305bc4a 100644 (file)
--- a/tests/unit/calendar/calendar_core.js
+++ b/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 );
 });
 

diff --git a/ui/calendar.js b/ui/calendar.js
index 8e228146ae410ee08d929913c567b139d6e8864f..0d96d4030b0ba7b92a63e2e7bc5ffa6ef3e8aafa 100644 (file)
--- a/ui/calendar.js
+++ b/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,6 +377,7 @@ 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
@@ -382,6 +385,10 @@ return $.widget( "ui.calendar", {
                        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",