library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Datepicker: Avoid flash during render in Firefox. Fixes #5493 - Datepicker: changeYear + yearRange causes flash in Firefox.

Browse Source 
Thanks israelrios.
This commit is contained in:
Scott González 2010-11-05 10:25:06 -04:00
parent 53215ded4a
commit 7832fd8e9c
1 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
ui/jquery.ui.datepicker.js vendored
View File

@ -624,6 +624,8 @@ $.extend(Datepicker.prototype, {
} }
var offset = {left: $.datepicker._pos[0], top: $.datepicker._pos[1]}; var offset = {left: $.datepicker._pos[0], top: $.datepicker._pos[1]};
$.datepicker._pos = null; $.datepicker._pos = null;
//to avoid flashes on Firefox
inst.dpDiv.empty();
// determine sizing offscreen // determine sizing offscreen
inst.dpDiv.css({position: 'absolute', display: 'block', top: '-1000px'}); inst.dpDiv.css({position: 'absolute', display: 'block', top: '-1000px'});
$.datepicker._updateDatepicker(inst); $.datepicker._updateDatepicker(inst);
@ -638,10 +640,12 @@ $.extend(Datepicker.prototype, {
var duration = $.datepicker._get(inst, 'duration'); var duration = $.datepicker._get(inst, 'duration');
var postProcess = function() { var postProcess = function() {
$.datepicker._datepickerShowing = true; $.datepicker._datepickerShowing = true;
var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
if( !! cover.length ){
var borders = $.datepicker._getBorders(inst.dpDiv); var borders = $.datepicker._getBorders(inst.dpDiv);
inst.dpDiv.find('iframe.ui-datepicker-cover'). // IE6- only cover.css({left: -borders[0], top: -borders[1],
css({left: -borders[0], top: -borders[1],
width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()}); width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()});
}
}; };
inst.dpDiv.zIndex($(input).zIndex()+1); inst.dpDiv.zIndex($(input).zIndex()+1);
if ($.effects && $.effects[showAnim]) if ($.effects && $.effects[showAnim])
@ -660,12 +664,12 @@ $.extend(Datepicker.prototype, {
_updateDatepicker: function(inst) { _updateDatepicker: function(inst) {
var self = this; var self = this;
var borders = $.datepicker._getBorders(inst.dpDiv); var borders = $.datepicker._getBorders(inst.dpDiv);
inst.dpDiv.empty().append(this._generateHTML(inst)) inst.dpDiv.empty().append(this._generateHTML(inst));
.find('iframe.ui-datepicker-cover') // IE6- only var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
.css({left: -borders[0], top: -borders[1], if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6
width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()}) cover.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.find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a')
.bind('mouseout', function(){ .bind('mouseout', function(){
$(this).removeClass('ui-state-hover'); $(this).removeClass('ui-state-hover');
if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-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 && if (inst == $.datepicker._curInst && $.datepicker._datepickerShowing && inst.input &&
inst.input.is(':visible') && !inst.input.is(':disabled')) inst.input.is(':visible') && !inst.input.is(':disabled'))
inst.input.focus(); 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. /* Retrieve the size of left and top borders for an element.
@ -1548,6 +1563,7 @@ $.extend(Datepicker.prototype, {
if (!showMonthAfterYear) if (!showMonthAfterYear)
html += monthHtml + (secondary || !(changeMonth && changeYear) ? ' ' : ''); html += monthHtml + (secondary || !(changeMonth && changeYear) ? ' ' : '');
// year selection // year selection
inst.yearshtml = '';
if (secondary || !changeYear) if (secondary || !changeYear)
html += '<span class="ui-datepicker-year">' + drawYear + '</span>'; html += '<span class="ui-datepicker-year">' + drawYear + '</span>';
else { else {
@ -1564,16 +1580,24 @@ $.extend(Datepicker.prototype, {
var endYear = Math.max(year, determineYear(years[1] || '')); var endYear = Math.max(year, determineYear(years[1] || ''));
year = (minDate ? Math.max(year, minDate.getFullYear()) : year); year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear); 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\');" ' + 'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' + 'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
'>'; '>';
for (; year <= endYear; year++) { for (; year <= endYear; year++) {
html += '<option value="' + year + '"' + inst.yearshtml += '<option value="' + year + '"' +
(year == drawYear ? ' selected="selected"' : '') + (year == drawYear ? ' selected="selected"' : '') +
'>' + year + '</option>'; '>' + 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'); html += this._get(inst, 'yearSuffix');
if (showMonthAfterYear) if (showMonthAfterYear)