Author: pyaschenko Date: 2007-11-30 12:47:13 -0500 (Fri, 30 Nov 2007) New Revision: 4395 Modified: trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js Log: RF-1192 Some style classes was added: .rich-calendar-tool-btn .rich-calendar-tool-btn-over .rich-calendar-tool-btn-press .rich-calendar-tool-close .rich-calendar-time-shadow .rich-calendar-time-position .rich-calendar-time-layout .rich-calendar-time-layout-fields .rich-calendar-time-layout-cancel .rich-calendar-time-layout-ok .rich-calendar-time-btn .rich-calendar-time-btn-press .rich-calendar-time-input Modified: trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss =================================================================== --- trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss 2007-11-30 16:34:00 UTC (rev 4394) +++ trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss 2007-11-30 17:47:13 UTC (rev 4395) @@ -251,5 +251,59 @@ <u:style name="vertical-align" value="middle"/> </u:selector> - + <u:selector name=".rich-calendar-time-shadow"> + <u:style name="background" skin="tableBackgroundColor"/> + <u:style name="opacity" value="0.5"/> + <u:style name="filter" value="alpha(opacity=50)"/> + </u:selector> + + <u:selector name=".rich-calendar-time-layout"> + <u:style name="background" skin="additionalBackgroundColor"/> + <u:style name="border" value="1px solid"/> + <u:style name="border-color" skin="panelBorderColor"/> + <u:style name="font-size" skin="generalSizeFont"/> + <u:style name="font-family" skin="generalFamilyFont"/> + </u:selector> + + <u:selector name=".rich-calendar-time-layout-fields"> + <u:style name="padding" value="7px 7px 5px 7px"/> + <u:style name="text-align" value="center"/> + <u:style name="white-space" value="nowrap"/> + </u:selector> + + <u:selector name=".rich-calendar-time-layout-cancel"> + <u:style name="padding" value="0px 1px 7px 7px"/> + </u:selector> + + <u:selector name=".rich-calendar-time-layout-ok"> + <u:style name="padding" value="0px 7px 7px 1px"/> + </u:selector> + + <u:selector name=".rich-calendar-time-btn"> + <u:style name="width" value="45px"/> + <u:style name="border" value="1px solid"/> + <u:style name="border-color" skin="tableBackgroundColor"/> + <u:style name="border-right-color" skin="panelBorderColor"/> + <u:style name="border-bottom-color" skin="panelBorderColor"/> + <u:style name="text-align" value="center"/> + <u:style name="padding" value="2px"/> + <u:style name="white-space" value="nowrap"/> + <u:style name="text-align" value="center"/> + <u:style name="cursor" value="pointer"/> + </u:selector> + + <u:selector name=".rich-calendar-time-btn-press"> + <u:style name="border" value="1px solid"/> + <u:style name="border-color" skin="panelBorderColor"/> + <u:style name="border-right-color" skin="tableBackgroundColor"/> + <u:style name="border-bottom-color" skin="tableBackgroundColor"/> + <u:style name="background-color" skin="calendarWeekBackgroundColor"/> + </u:selector> + + <u:selector name=".rich-calendar-time-input"> + <u:style name="width" value="22px"/> + <u:style name="margin" value="0px 2px"/> + </u:selector> + + </f:template> Modified: trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js =================================================================== --- trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-11-30 16:34:00 UTC (rev 4394) +++ trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-11-30 17:47:13 UTC (rev 4395) @@ -316,7 +316,7 @@ if ((aa!='am' && aa!='pm') || hh<1 || hh>12) return null; if (aa=='pm') { - if (hh!=12) hh+=11; + if (hh!=12) hh+=12; } else if (hh==12) hh = 0; } else if (hh<0 || hh>23) return null; @@ -529,6 +529,7 @@ this.INPUT_DATE_ID = this.id+'InputDate'; this.IFRAME_ID = this.id+'IFrame'; this.TIME_EDITOR_ID = this.id+'TimeEditor'; + this.TIME_EDITOR_SHADOW_ID = this.id+'TimeEditorShaddow'; //this.popupIntervalId=null; @@ -642,43 +643,12 @@ }, - - createTimeEditor: function(element) + updateTimeEditor: function() { - if (this.timeType==0) return false; - var div; - var hid = this.id+"Header"; - var fid = this.id+"Footer"; - while (element.id!=hid && element.id!=fid && element.parentNode) element=element.parentNode; - { - div = document.createElement('div'); - div.id = this.TIME_EDITOR_ID; - div.style.position='absolute'; - div.style.textAlign='center'; - div.style.backgroundColor='#f0f0f0'; - div.style.border='1px solid #808080'; - div.style.padding='3px'; - div.style.visibility='hidden'; - div.innerHTML = this.timePatternHtml+' <span class="rich-calendar-btn" onclick="$(\''+this.id+'\').component.hideTimeEditor(true)">[ok]</span> '+ - ' <span class="rich-calendar-btn" onclick="$(\''+this.id+'\').component.hideTimeEditor(false)">[x]</span>'; - element.appendChild(div); - - var th=$(this.id+'TimeHours'); - var ts; - var tm=$(this.id+'TimeMinutes'); - if (this.timeType==1) - { - sbjQuery(th).SpinButton({digits:this.timeHoursDigits,min:0,max:23}); - } - else - { - sbjQuery(th).SpinButton({digits:this.timeHoursDigits,min:1,max:12}); - ts=$(this.id+'TimeSign'); - sbjQuery(ts).SpinButton({}); - } - sbjQuery(tm).SpinButton({digits:2,min:0,max:59}); - } - + var th=$(this.id+'TimeHours'); + var ts=$(this.id+'TimeSign'); + var tm=$(this.id+'TimeMinutes'); + var h = this.selectedDate.getHours(); var m = this.selectedDate.getMinutes(); if (this.timeType==2) @@ -689,13 +659,34 @@ } th.value = (this.timeHoursDigits==2 && h<10 ? '0'+h : h); tm.value = (m<10 ? '0'+m : m); + }, + + createTimeEditor: function(element) + { + var element = $(this.id); + var htmlBegin = '<div id="'+this.TIME_EDITOR_SHADOW_ID+'" class="rich-calendar-time-shadow" style="position:absolute; display:none;"></div><table border="0" cellpadding="0" cellspacing="0" id="'+this.TIME_EDITOR_ID+'" style="position:absolute; display:none;"><tbody><tr><td align="center">'; + var htmlEndn = '</td></tr></tbody></table>'; + new Insertion.After(element, htmlBegin+this.evaluateMarkup(CalendarView.timeEditor, this.calendarContext)); + var te_shadow = $(this.TIME_EDITOR_SHADOW_ID); + var te = $(this.TIME_EDITOR_ID); + te.style.zIndex = te_shadow.style.zIndex = element.getStyle('z-index'); + + var th=$(this.id+'TimeHours'); + var ts; + var tm=$(this.id+'TimeMinutes'); + if (this.timeType==1) + { + sbjQuery(th).SpinButton({digits:this.timeHoursDigits,min:0,max:23}); + } + else + { + sbjQuery(th).SpinButton({digits:this.timeHoursDigits,min:1,max:12}); + ts=$(this.id+'TimeSign'); + sbjQuery(ts).SpinButton({}); + } + sbjQuery(tm).SpinButton({digits:2,min:0,max:59}); - div.style.width = element.clientWidth+'px'; - div.style.width = (element.clientWidth - (div.offsetWidth - element.clientWidth))+'px'; - div.style.top = (div.offsetTop - div.offsetHeight - element.offsetHeight)+'px'; - div.style.visibility=''; - - return true; + this.isTimeEditorCreated = true; }, setTimeProperties: function() { @@ -754,12 +745,12 @@ this.timePatternHtml = timePattern.replace(/(^|[^\\Hhm])(H{1,2}|h{1,2}|m{2}|a)/g, function($1,$2,$3) { switch ($3) { - case 'a' : return $2+'<input style="width:22px; margin: 0px 2px;" id="'+id+'TimeSign"/>'; + case 'a' : return $2+'<input class="rich-calendar-time-input" id="'+id+'TimeSign"/>'; case 'H' : case 'HH' : case 'h' : - case 'hh' : return $2+'<input style="width:22px; margin: 0px 2px;" id="'+id+'TimeHours"/>'; - case 'mm' : return $2+'<input style="width:22px; margin: 0px 2px;" id="'+id+'TimeMinutes"/>'; + case 'hh' : return $2+'<input class="rich-calendar-time-input" id="'+id+'TimeHours"/>'; + case 'mm' : return $2+'<input class="rich-calendar-time-input" id="'+id+'TimeMinutes"/>'; } } ); @@ -778,7 +769,7 @@ doCollapse: function() { if (!this.params.popup || !this.isVisible) return; - this.hideTimeEditor(); + if (this.isTimeEditorCreated) this.hideTimeEditor(); /*this.stopTimer(); this.stopPopupEvents($(this.id)); @@ -1404,10 +1395,6 @@ renderHF: function() { - if (this.isTimeEditorCreated) - { - this.isTimeEditorCreated = false; - } this.renderMarkup(this.params.headerMarkup, this.id+"Header", this.calendarContext); this.renderMarkup(this.params.footerMarkup, this.id+"Footer", this.calendarContext); }, @@ -1522,9 +1509,14 @@ var oldSelectedDate = this.selectedDate; var newSelectedDate; + var isDateParsed = false; if (date) { - if (typeof date=='string') date = Richfaces.Calendar.parseDate(date,this.params.datePattern, this.params.monthLabels, this.params.monthLabelsShort); + if (typeof date=='string') + { + date = Richfaces.Calendar.parseDate(date,this.params.datePattern, this.params.monthLabels, this.params.monthLabelsShort); + if (date) isDateParsed = true; + } newSelectedDate = date; } else @@ -1547,11 +1539,17 @@ this.selectedDate = newSelectedDate; if (this.selectedDate!=null) { - if (oldSelectedDate!=null) - { - this.selectedDate.setHours(oldSelectedDate.getHours()); - this.selectedDate.setMinutes(oldSelectedDate.getMinutes()); - } + if (!isDateParsed) + if (oldSelectedDate!=null) + { + this.selectedDate.setHours(oldSelectedDate.getHours()); + this.selectedDate.setMinutes(oldSelectedDate.getMinutes()); + } + else + { + this.selectedDate.setHours(12); + } + if (!this.showApplyButton) field.value=this.getSelectedDateString(this.params.datePattern); var d = new Date(this.selectedDate); @@ -1567,8 +1565,12 @@ this.selectedDateCellColor = this.getCellBackgroundColor(e); Element.addClassName(e, "rich-calendar-select"); - this.renderHF(); } - } else { + this.renderHF(); + } + else if (this.timeType!=0) this.renderHF(); + } + else + { // change currentDate and call this.onUpdate(); d.setDate(1); this.currentDate = d; @@ -1659,21 +1661,30 @@ this.doCollapse(); }, - showTimeEditor: function(element) + showTimeEditor: function() { - if (this.isTimeEditorCreated) - { - this.hideTimeEditor(); - return; - } - if (this.createTimeEditor(element)) - { - this.isTimeEditorCreated = true; - } + if (this.timeType==0) return; + if (!this.isTimeEditorCreated) this.createTimeEditor(); + + var element = $(this.id); + var te = $(this.TIME_EDITOR_ID); + var te_shadow = $(this.TIME_EDITOR_SHADOW_ID); + var dim = Richfaces.Calendar.getOffsetDimensions(element); + te.style.width = te_shadow.style.width = dim.width + 'px'; + te.style.height = te_shadow.style.height = dim.height + 'px'; + te.style.left = te_shadow.style.left = element.style.left; + te.style.top = te_shadow.style.top = element.style.top; + + this.updateTimeEditor(); + + te.show(); + te_shadow.show(); }, hideTimeEditor: function(updateTime) { + $(this.TIME_EDITOR_ID).hide(); + $(this.TIME_EDITOR_SHADOW_ID).hide(); if (updateTime && this.selectedDate) { var m = parseInt($(this.id+'TimeMinutes').value,10); @@ -1687,20 +1698,13 @@ } else { - if (h!=12) h+=11; + if (h!=12) h+=12; } } this.selectedDate.setHours(h); this.renderHF(); } - if (this.isTimeEditorCreated) - { - var e = $(this.TIME_EDITOR_ID); - e.parentNode.removeChild(e); - this.isTimeEditorCreated = false; - } - if (this.params.popup && !this.showApplyButton && updateTime) this.close(true); } @@ -1733,7 +1737,7 @@ var text = Richfaces.Calendar.formatDate(calendar.selectedDate, calendar.timePattern, calendar.params.monthLabels, calendar.params.monthLabelsShort); - var markup = new E('div', {'class': 'rich-calendar-tool-btn rich-calendar-tool-btn-hover rich-calendar-tool-btn-press', 'onclick': "Richfaces.getComponent('calendar',this).showTimeEditor(this);return true;", + var markup = new E('div', {'class': 'rich-calendar-tool-btn rich-calendar-tool-btn-hover rich-calendar-tool-btn-press', 'onclick': "Richfaces.getComponent('calendar',this).showTimeEditor();return true;", 'onmouseover': "Element.removeClassName(this, 'rich-calendar-tool-btn-press');", 'onmouseout' : "Element.addClassName(this, 'rich-calendar-tool-btn-press');"}, [new ET(text)]); @@ -1750,8 +1754,9 @@ CalendarView.selectedDateControl = function (context) { return CalendarView.getSelectedDateControl(context.calendar);}; CalendarView.timeControl = function (context) { return CalendarView.getTimeControl(context.calendar);}; CalendarView.closeControl = CalendarView.getControl("x", CalendarView.toolButtonAttributes, "close", "false"); -CalendarView.applyControl = function (context) { return (context.calendar.showApplyButton ? CalendarView.getControl("OK", CalendarView.toolButtonAttributes, "close", "true") : "");}; +CalendarView.applyControl = function (context) { return (context.calendar.showApplyButton ? CalendarView.getControl("Apply", CalendarView.toolButtonAttributes, "close", "true") : "");}; CalendarView.cleanControl = function (context) { return (context.calendar.selectedDate ? CalendarView.getControl("Clean", CalendarView.toolButtonAttributes, "resetSelectedDate") : "");}; +CalendarView.timeEditorFields = function (context) { return context.calendar.timePatternHtml;}; CalendarView.header = [ new E('table',{'border': '0', 'cellpadding': '0', 'cellspacing': '0', 'width': '100%'}, @@ -1821,6 +1826,39 @@ ]) ] )]; + +CalendarView.timeEditor = [ + new E('table',{'border': '0', 'cellpadding': '0', 'cellspacing': '0', 'class': 'rich-calendar-time-layout'}, + [ + new E('tbody',{}, + [ + new E('tr',{}, + [ + new E('td',{'class': 'rich-calendar-time-layout-fields', 'colspan': '2'}, + [ + new ET(function (context) { return Richfaces.evalMacro("timeEditorFields", context)}) + ]) + ]), + new E('tr',{}, + [ + new E('td',{'class': 'rich-calendar-time-layout-cancel'}, + [ + 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(false)";}}, + [ + new T('Cancel') + ]) + ]), + new E('td',{'class': 'rich-calendar-time-layout-ok'}, + [ + 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(true)";}}, + [ + new T('Ok') + ]) + ]) + ]) + ]) + ]) + ]; CalendarView.dayList = [new ET(function (context) { return context.day})]; CalendarView.weekNumber = [new ET(function (context) { return context.weekNumber})]; @@ -1846,5 +1884,6 @@ timeControl: CalendarView.timeControl, todayControl: CalendarView.todayControl, closeControl: CalendarView.closeControl, - applyControl: CalendarView.applyControl + applyControl: CalendarView.applyControl, + timeEditorFields: CalendarView.timeEditorFields }); \ No newline at end of file