Datepicker: Avoid flash during render in Firefox. Fixes #5493 - Datepicker: changeYea...

Thanks israelrios.

diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js
index 678129e490420e3ab2b51f1656cfd1980d8553be..110e9d6f8b67419beaa26251761c74a38f58b6c3 100644 (file)
--- a/ui/jquery.ui.datepicker.js
+++ b/ui/jquery.ui.datepicker.js
@@ -624,6 +624,8 @@ $.extend(Datepicker.prototype, {
                }
                var offset = {left: $.datepicker._pos[0], top: $.datepicker._pos[1]};
                $.datepicker._pos = null;
+               //to avoid flashes on Firefox
+               inst.dpDiv.empty();
                // determine sizing offscreen
                inst.dpDiv.css({position: 'absolute', display: 'block', top: '-1000px'});
                $.datepicker._updateDatepicker(inst);
@@ -638,10 +640,12 @@ $.extend(Datepicker.prototype, {
                        var duration = $.datepicker._get(inst, 'duration');
                        var postProcess = function() {
                                $.datepicker._datepickerShowing = true;
-                               var borders = $.datepicker._getBorders(inst.dpDiv);
-                               inst.dpDiv.find('iframe.ui-datepicker-cover'). // IE6- only
-                                       css({left: -borders[0], top: -borders[1],
+                               var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
+                               if( !! cover.length ){
+                                       var borders = $.datepicker._getBorders(inst.dpDiv);
+                                       cover.css({left: -borders[0], top: -borders[1],
                                                width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()});
+                               }
                        };
                        inst.dpDiv.zIndex($(input).zIndex()+1);
                        if ($.effects && $.effects[showAnim])
@@ -660,12 +664,12 @@ $.extend(Datepicker.prototype, {
        _updateDatepicker: function(inst) {
                var self = this;
                var borders = $.datepicker._getBorders(inst.dpDiv);
-               inst.dpDiv.empty().append(this._generateHTML(inst))
-                       .find('iframe.ui-datepicker-cover') // IE6- only
-                               .css({left: -borders[0], top: -borders[1],
-                                       width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
-                       .end()
-                       .find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a')
+               inst.dpDiv.empty().append(this._generateHTML(inst));
+               var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
+               if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6
+                       cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
+               }
+               inst.dpDiv.find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a')
                                .bind('mouseout', function(){
                                        $(this).removeClass('ui-state-hover');
                                        if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-hover');
@@ -697,6 +701,17 @@ $.extend(Datepicker.prototype, {
                if (inst == $.datepicker._curInst && $.datepicker._datepickerShowing && inst.input &&
                                inst.input.is(':visible') && !inst.input.is(':disabled'))
                        inst.input.focus();
+               // deffered render of the years select (to avoid flashes on Firefox) 
+               if( inst.yearshtml ){
+                       var origyearshtml = inst.yearshtml;
+                       setTimeout(function(){
+                               //assure that inst.yearshtml didn't change.
+                               if( origyearshtml === inst.yearshtml ){
+                                       inst.dpDiv.find('select.ui-datepicker-year:first').replaceWith(inst.yearshtml);
+                               }
+                               origyearshtml = inst.yearshtml = null;
+                       }, 0);
+               }
        },
 
        /* Retrieve the size of left and top borders for an element.
@@ -1548,6 +1563,7 @@ $.extend(Datepicker.prototype, {
                if (!showMonthAfterYear)
                        html += monthHtml + (secondary || !(changeMonth && changeYear) ? ' ' : '');
                // year selection
+               inst.yearshtml = '';
                if (secondary || !changeYear)
                        html += '<span class="ui-datepicker-year">' + drawYear + '</span>';
                else {
@@ -1564,16 +1580,24 @@ $.extend(Datepicker.prototype, {
                        var endYear = Math.max(year, determineYear(years[1] || ''));
                        year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
                        endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
-                       html += '<select class="ui-datepicker-year" ' +
+                       inst.yearshtml += '<select class="ui-datepicker-year" ' +
                                'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
                                'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
                                '>';
                        for (; year <= endYear; year++) {
-                               html += '<option value="' + year + '"' +
+                               inst.yearshtml += '<option value="' + year + '"' +
                                        (year == drawYear ? ' selected="selected"' : '') +
                                        '>' + year + '</option>';
                        }
-                       html += '</select>';
+                       inst.yearshtml += '</select>';
+                       //when showing there is no need for later update
+                       if( ! $.browser.mozilla ){
+                               html += inst.yearshtml;
+                               inst.yearshtml = null;
+                       } else {
+                               // will be replaced later with inst.yearshtml
+                               html += '<select class="ui-datepicker-year"><option value="' + drawYear + '" selected="selected">' + drawYear + '</option></select>';
+                       }
                }
                html += this._get(inst, 'yearSuffix');
                if (showMonthAfterYear)