Author: pyaschenko Date: 2008-04-08 12:00:51 -0400 (Tue, 08 Apr 2008) New Revision: 7668 Modified: branches/3.1.x/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js Log: http://jira.jboss.com/jira/browse/RF-3001 Modified: branches/3.1.x/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js =================================================================== --- branches/3.1.x/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2008-04-08 14:36:30 UTC (rev 7667) +++ branches/3.1.x/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2008-04-08 16:00:51 UTC (rev 7668) @@ -639,8 +639,11 @@ this.TIME_EDITOR_LAYOUT_ID = this.id+'TimeEditorLayout'; this.DATE_EDITOR_LAYOUT_ID = this.id+'DateEditorLayout'; this.EDITOR_LAYOUT_SHADOW_ID = this.id+'EditorLayoutShadow'; + this.TIME_EDITOR_BUTTON_OK = this.id+'TimeEditorButtonOk'; + this.TIME_EDITOR_BUTTON_CANCEL = this.id+'TimeEditorButtonCancel'; + this.DATE_EDITOR_BUTTON_OK = this.id+'DateEditorButtonOk'; + this.DATE_EDITOR_BUTTON_CANCEL = this.id+'DateEditorButtonCancel'; - //this.popupIntervalId=null; this.firstDateIndex = 0; @@ -891,9 +894,10 @@ editor.style.zIndex = parseInt(zindex,10)+1; this.isEditorCreated = true; + return editor; }, - createTimeEditorLayout: function() + createTimeEditorLayout: function(editor) { Element.insert(this.EDITOR_LAYOUT_SHADOW_ID, {after:this.evaluateMarkup(this.calendarContext.timeEditorLayout, this.calendarContext)}); @@ -912,9 +916,30 @@ } sbjQuery(tm).SpinButton({digits:2,min:0,max:59}); + this.correctEditorButtons(editor, this.TIME_EDITOR_BUTTON_OK, this.TIME_EDITOR_BUTTON_CANCEL); + this.isTimeEditorLayoutCreated = true; }, + correctEditorButtons: function(editor, buttonID1, buttonID2) + { + var button1 = $(buttonID1); + var button2 = $(buttonID2); + editor.style.visibility = "hidden"; + editor.style.display = ""; + var width1 = Richfaces.Calendar.getOffsetDimensions(button1.firstChild).width; + var width2 = Richfaces.Calendar.getOffsetDimensions(button2.firstChild).width; + editor.style.display = "none"; + editor.style.visibility = ""; + + var styleWidth = Richfaces.getComputedStyleSize(button1,'width') + + if (width1>styleWidth || width2>styleWidth) + { + button1.style.width = button2.style.width = (width1>width2 ? width1 : width2)+"px"; + } + }, + createDECell: function(id, value, buttonType, param, className) { if (buttonType==0) @@ -931,25 +956,25 @@ } }, - createDateEditorLayout: function() + createDateEditorLayout: function(editor) { var htmlBegin = '<table id="'+this.DATE_EDITOR_LAYOUT_ID+'" class="rich-calendar-date-layout" border="0" cellpadding="0" cellspacing="0"><tbody><tr id="'+this.DATE_EDITOR_LAYOUT_ID+'TR">'; var htmlEnd = '</tr></tbody></table>'; var month = 0; this.dateEditorYear = this.getCurrentYear(); var year = this.dateEditorStartYear = this.dateEditorYear-4; - var htmlContent = '<td>'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+month, this.params.monthLabelsShort[month], 1, month)+'</td>' - +'<td class="rich-calendar-date-layout-split">'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+(month+6), this.params.monthLabelsShort[month+6], 1, month+6)+'</td>' - +'<td>'+this.createDECell('','&lt;', 0, -1)+'</td>' - +'<td>'+this.createDECell('','&gt;', 0, 1)+'</td>'; + var htmlContent = '<td align="center">'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+month, this.params.monthLabelsShort[month], 1, month)+'</td>' + +'<td align="center" class="rich-calendar-date-layout-split">'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+(month+6), this.params.monthLabelsShort[month+6], 1, month+6)+'</td>' + +'<td align="center">'+this.createDECell('','&lt;', 0, -1)+'</td>' + +'<td align="center">'+this.createDECell('','&gt;', 0, 1)+'</td>'; month++; for (var i=0;i<5;i++) { - htmlContent+='</tr><tr><td>'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+month, this.params.monthLabelsShort[month], 1, month)+'</td>' - +'<td class="rich-calendar-date-layout-split">'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+(month+6), this.params.monthLabelsShort[month+6], 1, month+6)+'</td>' - +'<td>'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'Y'+i, year, 2, i, (i==4 ? 'rich-calendar-editor-btn-selected' : ''))+'</td>' - +'<td>'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'Y'+(i+5), year+5, 2, i+5)+'</td>'; + htmlContent+='</tr><tr><td align="center">'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+month, this.params.monthLabelsShort[month], 1, month)+'</td>' + +'<td align="center" class="rich-calendar-date-layout-split">'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+(month+6), this.params.monthLabelsShort[month+6], 1, month+6)+'</td>' + +'<td align="center">'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'Y'+i, year, 2, i, (i==4 ? 'rich-calendar-editor-btn-selected' : ''))+'</td>' + +'<td align="center">'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'Y'+(i+5), year+5, 2, i+5)+'</td>'; month++; year++; } @@ -958,16 +983,18 @@ this.dateEditorMonthID = this.DATE_EDITOR_LAYOUT_ID+'M'+this.dateEditorMonth; htmlContent+='</tr><tr><td colspan="2" class="rich-calendar-date-layout-ok">'+ - '<div class="rich-calendar-time-btn" style="float:right;" onmousedown="Element.addClassName(this, \'rich-calendar-time-btn-press\');" onmouseout="Element.removeClassName(this, \'rich-calendar-time-btn-press\');" onmouseup="Element.removeClassName(this, \'rich-calendar-time-btn-press\');" onclick="$(\''+this.id+'\').component.hideDateEditor(true);">'+this.params.labels.ok+'</div>'+ + '<div id="'+this.DATE_EDITOR_BUTTON_OK+'" class="rich-calendar-time-btn" style="float:right;" onmousedown="Element.addClassName(this, \'rich-calendar-time-btn-press\');" onmouseout="Element.removeClassName(this, \'rich-calendar-time-btn-press\');" onmouseup="Element.removeClassName(this, \'rich-calendar-time-btn-press\');" onclick="$(\''+this.id+'\').component.hideDateEditor(true);"><span>'+this.params.labels.ok+'</span></div>'+ '</td><td colspan="2" class="rich-calendar-date-layout-cancel">'+ - '<div class="rich-calendar-time-btn" style="float:left;" onmousedown="Element.addClassName(this, \'rich-calendar-time-btn-press\');" onmouseout="Element.removeClassName(this, \'rich-calendar-time-btn-press\');" onmouseup="Element.removeClassName(this, \'rich-calendar-time-btn-press\');" onclick="$(\''+this.id+'\').component.hideDateEditor(false);">'+this.params.labels.cancel+'</div>'+ + '<div id="'+this.DATE_EDITOR_BUTTON_CANCEL+'" class="rich-calendar-time-btn" style="float:left;" onmousedown="Element.addClassName(this, \'rich-calendar-time-btn-press\');" onmouseout="Element.removeClassName(this, \'rich-calendar-time-btn-press\');" onmouseup="Element.removeClassName(this, \'rich-calendar-time-btn-press\');" onclick="$(\''+this.id+'\').component.hideDateEditor(false);"><span>'+this.params.labels.cancel+'</span></div>'+ '</td>'; Element.insert(this.EDITOR_LAYOUT_SHADOW_ID, {after:htmlBegin+htmlContent+htmlEnd}); Element.addClassName(this.dateEditorMonthID, 'rich-calendar-editor-btn-selected'); - + + this.correctEditorButtons(editor, this.DATE_EDITOR_BUTTON_OK, this.DATE_EDITOR_BUTTON_CANCEL); + this.isDateEditorLayoutCreated = true; }, @@ -1981,13 +2008,14 @@ showTimeEditor: function() { + var editor; if (this.timeType==0) return; - if (!this.isEditorCreated) this.createEditor(); - if (!this.isTimeEditorLayoutCreated) this.createTimeEditorLayout(); + if (!this.isEditorCreated) editor = this.createEditor(); + else editor = $(this.EDITOR_ID); + if (!this.isTimeEditorLayoutCreated) this.createTimeEditorLayout(editor); $(this.TIME_EDITOR_LAYOUT_ID).show(); - var editor = $(this.EDITOR_ID); var editor_shadow = $(this.EDITOR_SHADOW_ID); this.setEditorPosition($(this.id), editor, editor_shadow); @@ -2042,13 +2070,14 @@ showDateEditor: function() { - if (!this.isEditorCreated) this.createEditor(); - if (!this.isDateEditorLayoutCreated) this.createDateEditorLayout(); + var editor; + if (!this.isEditorCreated) editor = this.createEditor(); + else editor = $(this.EDITOR_ID); + if (!this.isDateEditorLayoutCreated) this.createDateEditorLayout(editor); else this.updateDateEditor(); $(this.DATE_EDITOR_LAYOUT_ID).show(); - var editor = $(this.EDITOR_ID); var editor_shadow = $(this.EDITOR_SHADOW_ID); this.setEditorPosition($(this.id), editor, editor_shadow); @@ -2206,17 +2235,23 @@ [ new E('td',{'class': 'rich-calendar-time-layout-ok'}, [ - new E('div',{'class': 'rich-calendar-time-btn', 'style': 'float:right;', 'onmousedown': "Element.addClassName(this, 'rich-calendar-time-btn-press');", 'onmouseout': "Element.removeClassName(this, 'rich-calendar-time-btn-press');", 'onmouseup': "Element.removeClassName(this, 'rich-calendar-time-btn-press');", 'onclick': function(context){return "$('"+context.calendar.id+"').component.hideTimeEditor(true)";}}, + new E('div',{'id': function(context){return context.calendar.TIME_EDITOR_BUTTON_OK}, 'class': 'rich-calendar-time-btn', 'style': 'float:right;', 'onmousedown': "Element.addClassName(this, 'rich-calendar-time-btn-press');", 'onmouseout': "Element.removeClassName(this, 'rich-calendar-time-btn-press');", 'onmouseup': "Element.removeClassName(this, 'rich-calendar-time-btn-press');", 'onclick': function(context){return "$('"+context.calendar.id+"').component.hideTimeEditor(true)";}}, [ - new ET(function (context) { return context.controlLabels.ok; }) + new E('span',{}, + [ + new ET(function (context) { return context.controlLabels.ok; }) + ]) ]) ]) , new E('td',{'class': 'rich-calendar-time-layout-cancel'}, [ - new E('div',{'class': 'rich-calendar-time-btn', 'style': 'float:left;', 'onmousedown': "Element.addClassName(this, 'rich-calendar-time-btn-press');", 'onmouseout': "Element.removeClassName(this, 'rich-calendar-time-btn-press');", 'onmouseup': "Element.removeClassName(this, 'rich-calendar-time-btn-press');", 'onclick': function(context){return "$('"+context.calendar.id+"').component.hideTimeEditor(false)";}}, + new E('div',{'id': function(context){return context.calendar.TIME_EDITOR_BUTTON_CANCEL}, 'class': 'rich-calendar-time-btn', 'style': 'float:left;', 'onmousedown': "Element.addClassName(this, 'rich-calendar-time-btn-press');", 'onmouseout': "Element.removeClassName(this, 'rich-calendar-time-btn-press');", 'onmouseup': "Element.removeClassName(this, 'rich-calendar-time-btn-press');", 'onclick': function(context){return "$('"+context.calendar.id+"').component.hideTimeEditor(false)";}}, [ - new ET(function (context) { return context.controlLabels.cancel; }) + new E('span',{}, + [ + new ET(function (context) { return context.controlLabels.cancel; }) + ]) ]) ]) ])