[richfaces-svn-commits] JBoss Rich Faces SVN: r4411 - in trunk/ui/calendar: src/main/resources/org/richfaces/renderkit/html/css and 1 other directories.

Author: nbelaevski Date: 2007-12-02 19:11:11 -0500 (Sun, 02 Dec 2007) New Revision: 4411 Modified: trunk/ui/calendar/pom.xml trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/JQuerySpinBtn.js trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js Log: latest fixes for calendar time fields Modified: trunk/ui/calendar/pom.xml =================================================================== --- trunk/ui/calendar/pom.xml 2007-12-01 15:29:41 UTC (rev 4410) +++ trunk/ui/calendar/pom.xml 2007-12-03 00:11:11 UTC (rev 4411) @@ -47,5 +47,11 @@ <artifactId>richfaces-impl</artifactId> <version>3.2.0-SNAPSHOT</version> </dependency> + + <dependency> + <groupId>org.richfaces.ui</groupId> + <artifactId>inputnumber-spinner</artifactId> + <version>3.2.0-SNAPSHOT</version> + </dependency> </dependencies> </project> \ No newline at end of file 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-12-01 15:29:41 UTC (rev 4410) +++ trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss 2007-12-03 00:11:11 UTC (rev 4411) @@ -3,6 +3,7 @@ xmlns:u='http:/jsf.exadel.com/template/util' xmlns="http://www.w3.org/1999/xhtml" > <f:verbatim><![CDATA[ + .rich-calendar-exterior{ border : 1px solid; } @@ -88,7 +89,37 @@ border-top : 1px solid; border-right : 0px solid; } - ]]> + +.rich-calendar-spinner-input { + border: 0px; + padding: 0px 0px 0px 3px; + background: none transparent scroll repeat 0% 0%; + margin: 0px; +} + +.rich-calendar-spinner-input-container { + padding: 0px; + margin: 0px; + background-position: left top; + background-repeat: repeat-x; + border: 1px solid; + + width: 99%; +} + +.rich-calendar-spinner-buttons { + border-width: 1px; + border-style: solid; + padding: 0px; + margin: 0px; + background-position: left top; + background-repeat: repeat-x; + font-size: 0px; + + width: 1%; +} + +]]> </f:verbatim> <u:selector name=".rich-calendar-exterior"> @@ -261,6 +292,13 @@ <u:style name="background" skin="additionalBackgroundColor"/> <u:style name="border" value="1px solid"/> <u:style name="border-color" skin="panelBorderColor"/> + + <u:style name="width" value="1%"/> + <u:style name="z-index" value="2"/> + <u:style name="position" value="relative"/> + </u:selector> + + <u:selector name=".rich-calendar-time-layout, .rich-calendar-time-layout input"> <u:style name="font-size" skin="generalSizeFont"/> <u:style name="font-family" skin="generalFamilyFont"/> </u:selector> @@ -272,11 +310,11 @@ </u:selector> <u:selector name=".rich-calendar-time-layout-cancel"> - <u:style name="padding" value="0px 1px 7px 7px"/> + <u:style name="padding" value="0px 7px 7px 1px"/> </u:selector> <u:selector name=".rich-calendar-time-layout-ok"> - <u:style name="padding" value="0px 7px 7px 1px"/> + <u:style name="padding" value="0px 1px 7px 7px"/> </u:selector> <u:selector name=".rich-calendar-time-btn"> @@ -305,5 +343,62 @@ <u:style name="margin" value="0px 2px"/> </u:selector> + <u:selector name=".rich-calendar-spinner-up"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.buttons.SpinnerButtonUp" /> + </u:style> + + <u:style name="height" value="7px" /> + <u:style name="width" value="14px" /> + <u:style name="margin" value="0px 1px 1px 0px" /> + </u:selector> + <u:selector name=".rich-calendar-spinner-down"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.buttons.SpinnerButtonDown" /> + </u:style> + + <u:style name="height" value="7px"/> + <u:style name="width" value="14px"/> + <u:style name="margin" value="0px 1px 1px 0px" /> + </u:selector> + + <u:selector name=".rich-calendar-spinner-pressed"> + <u:style name="margin" value="1px 0px 0px 1px" /> + </u:selector> + + <u:selector name=".rich-calendar-spinner-buttons"> + <u:style name="background-color" skin="headerBackgroundColor" /> + <u:style name="border-color" skin="headerBackgroundColor" /> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.background.SpinnerButtonGradient" /> + </u:style> + </u:selector> + + <u:selector name=".rich-calendar-spinner-input"> + <u:style name="font-size" skin="buttonSizeFont"/> + <u:style name="font-family" skin="buttonFamilyFont"/> + + <u:style name="width" value="18px"/> + </u:selector> + + <u:selector name=".rich-calendar-spinner-input-container"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.background.SpinnerFieldGradient" /> + </u:style> + <u:style name="background-color" skin="controlBackgroundColor" /> + <u:style name="border-color" skin="panelBorderColor" /> + <u:style name="border-bottom-color" skin="subBorderColor" /> + <u:style name="border-right-color" skin="subBorderColor" /> + </u:selector> + + <u:selector name=".rich-calendar-time-editor-shadow"> + <u:style name="background" skin="additionalBackgroundColor"/> + + <u:style name="z-index" value="1"/> + <u:style name="position" value="absolute"/> + + <u:style name="opacity" value="0.3"/> + <u:style name="filter" value="alpha(opacity=30)"/> + </u:selector> </f:template> Modified: trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/JQuerySpinBtn.js =================================================================== --- trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/JQuerySpinBtn.js 2007-12-01 15:29:41 UTC (rev 4410) +++ trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/JQuerySpinBtn.js 2007-12-03 00:11:11 UTC (rev 4411) @@ -95,71 +95,71 @@ }; sbjQuery(this) - .addClass(cfg && cfg.spinClass ? cfg.spinClass : 'spin-button') +// .addClass(cfg && cfg.spinClass ? cfg.spinClass : 'spin-button') +// +// .mousemove(function(e){ +// // Determine which button mouse is over, or not (spin direction): +// var x = e.pageX || e.x; +// var y = e.pageY || e.y; +// var el = e.target || e.srcElement; +// var direction = +// (x > coord(el,'offsetLeft') + el.offsetWidth - this.spinCfg._btn_width) +// ? ((y < coord(el,'offsetTop') + this.spinCfg._btn_height) ? 1 : -1) : 0; +// +// if (direction !== this.spinCfg._direction) { +// // Style up/down buttons: +// switch(direction){ +// case 1: // Up arrow: +// sbjQuery(this).removeClass(this.spinCfg.downClass).addClass(this.spinCfg.upClass); +// break; +// case -1: // Down arrow: +// sbjQuery(this).removeClass(this.spinCfg.upClass).addClass(this.spinCfg.downClass); +// break; +// default: // Mouse is elsewhere in the textbox +// sbjQuery(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass); +// } +// +// // Set spin direction: +// this.spinCfg._direction = direction; +// } +// }) +// +// .mouseout(function(){ +// // Reset up/down buttons to their normal appearance when mouse moves away: +// sbjQuery(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass); +// this.spinCfg._direction = null; +// }) - .mousemove(function(e){ - // Determine which button mouse is over, or not (spin direction): - var x = e.pageX || e.x; - var y = e.pageY || e.y; - var el = e.target || e.srcElement; - var direction = - (x > coord(el,'offsetLeft') + el.offsetWidth - this.spinCfg._btn_width) - ? ((y < coord(el,'offsetTop') + this.spinCfg._btn_height) ? 1 : -1) : 0; - - if (direction !== this.spinCfg._direction) { - // Style up/down buttons: - switch(direction){ - case 1: // Up arrow: - sbjQuery(this).removeClass(this.spinCfg.downClass).addClass(this.spinCfg.upClass); - break; - case -1: // Down arrow: - sbjQuery(this).removeClass(this.spinCfg.upClass).addClass(this.spinCfg.downClass); - break; - default: // Mouse is elsewhere in the textbox - sbjQuery(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass); - } - - // Set spin direction: - this.spinCfg._direction = direction; - } - }) +// .mousedown(function(e){ +// if (this.spinCfg._direction != 0) { +// // Respond to click on one of the buttons: +// var self = this; +// var adjust = function() { +// self.adjustValue(self.spinCfg._direction * self.spinCfg.step); +// }; +// +// adjust(); +// +// // Initial delay before repeating adjustment +// self.spinCfg._delay = window.setTimeout(function() { +// adjust(); +// // Repeat adjust at regular intervals +// self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval); +// }, self.spinCfg.delay); +// } +// }) +// +// .mouseup(function(e){ +// // Cancel repeating adjustment +// window.clearInterval(this.spinCfg._repeat); +// window.clearTimeout(this.spinCfg._delay); +// }) +// +// .dblclick(function(e) { +// if (sbjQuery.browser.msie) +// this.adjustValue(this.spinCfg._direction * this.spinCfg.step); +// }) - .mouseout(function(){ - // Reset up/down buttons to their normal appearance when mouse moves away: - sbjQuery(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass); - this.spinCfg._direction = null; - }) - - .mousedown(function(e){ - if (this.spinCfg._direction != 0) { - // Respond to click on one of the buttons: - var self = this; - var adjust = function() { - self.adjustValue(self.spinCfg._direction * self.spinCfg.step); - }; - - adjust(); - - // Initial delay before repeating adjustment - self.spinCfg._delay = window.setTimeout(function() { - adjust(); - // Repeat adjust at regular intervals - self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval); - }, self.spinCfg.delay); - } - }) - - .mouseup(function(e){ - // Cancel repeating adjustment - window.clearInterval(this.spinCfg._repeat); - window.clearTimeout(this.spinCfg._delay); - }) - - .dblclick(function(e) { - if (sbjQuery.browser.msie) - this.adjustValue(this.spinCfg._direction * this.spinCfg.step); - }) - .keydown(function(e){ // Respond to up/down arrow keys. switch(e.keyCode){ @@ -184,6 +184,66 @@ this.adjustValue(0); }); + var self = this; + + var btnUp = $(this.id + 'BtnUp'); + sbjQuery(btnUp) + .mousedown(function(e){ + // Respond to click on one of the buttons: + var adjust = function() { + self.adjustValue(self.spinCfg.step); + }; + + adjust(); + + // Initial delay before repeating adjustment + self.spinCfg._delay = window.setTimeout(function() { + adjust(); + // Repeat adjust at regular intervals + self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval); + }, self.spinCfg.delay); + }) + + .mouseup(function(e){ + // Cancel repeating adjustment + window.clearInterval(self.spinCfg._repeat); + window.clearTimeout(self.spinCfg._delay); + }) + + .dblclick(function(e) { + if (sbjQuery.browser.msie) + self.adjustValue(self.spinCfg.step); + }); + + var btnDown = $(this.id + 'BtnDown'); + sbjQuery(btnDown) + .mousedown(function(e){ + // Respond to click on one of the buttons: + var adjust = function() { + self.adjustValue(-self.spinCfg.step); + }; + + adjust(); + + // Initial delay before repeating adjustment + self.spinCfg._delay = window.setTimeout(function() { + adjust(); + // Repeat adjust at regular intervals + self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval); + }, self.spinCfg.delay); + }) + + .mouseup(function(e){ + // Cancel repeating adjustment + window.clearInterval(self.spinCfg._repeat); + window.clearTimeout(self.spinCfg._delay); + }) + + .dblclick(function(e) { + if (sbjQuery.browser.msie) + self.adjustValue(-self.spinCfg.step); + }); + if (this.addEventListener) { // Respond to mouse wheel in Firefox this.addEventListener('DOMMouseScroll', function(e) { 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-12-01 15:29:41 UTC (rev 4410) +++ trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-12-03 00:11:11 UTC (rev 4411) @@ -529,7 +529,10 @@ 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.TIME_EDITOR_SHADOW_ID = this.id+'TimeEditorShadow'; + + this.TIME_EDITOR_PANEL_ID = this.id+'TimeEditorPanel'; + this.TIME_EDITOR_PANEL_SHADOW_ID = this.id+'TimeEditorPanelShadow'; //this.popupIntervalId=null; @@ -689,6 +692,30 @@ this.isTimeEditorCreated = true; }, + createSpinnerTable: function(id) { + return '<td><table cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+ + '<td class="rich-calendar-spinner-input-container">'+ + '<input id="' + id + '" class="rich-calendar-spinner-input" type="text" />'+ + '</td>'+ + '<td class="rich-calendar-spinner-buttons">'+ + '<table border="0" cellspacing="0" cellpadding="0"><tbody>'+ + '<tr><td>'+ + '<div id="'+id+'BtnUp" class="rich-calendar-spinner-up"'+ + 'onmousedown="this.className=\'rich-calendar-spinner-up rich-calendar-spinner-pressed\'" '+ + 'onmouseup="this.className=\'rich-calendar-spinner-up\'"'+ + 'onmouseout="this.className=\'rich-calendar-spinner-up\'" />'+ + '</td></tr>'+ + '<tr><td>'+ + '<div id="'+id+'BtnDown" class="rich-calendar-spinner-down"'+ + 'onmousedown="this.className=\'rich-calendar-spinner-down rich-calendar-spinner-pressed\'" '+ + 'onmouseup="this.className=\'rich-calendar-spinner-down\'"'+ + 'onmouseout="this.className=\'rich-calendar-spinner-down\'" />'+ + '</td></tr>'+ + '</tbody></table>'+ + '</td>'+ + '</tr></tbody></table></td>'; + }, + setTimeProperties: function() { this.timeType = 0; @@ -742,15 +769,17 @@ this.datePattern = datePattern; this.timePattern = timePattern; + var calendar = this; + 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 class="rich-calendar-time-input" id="'+id+'TimeSign"/>'; + case 'a' : return ($2 ? '<td>'+$2+'</td>' : '')+calendar.createSpinnerTable(id+'TimeSign');//'<input class="rich-calendar-time-input" id="'+id+'TimeSign"/>'; case 'H' : case 'HH' : case 'h' : - 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"/>'; + case 'hh' : return ($2 ? '<td>'+$2+'</td>' : '')+calendar.createSpinnerTable(id+'TimeHours');//'<input class="rich-calendar-time-input" id="'+id+'TimeHours"/>'; + case 'mm' : return ($2 ? '<td>'+$2+'</td>' : '')+calendar.createSpinnerTable(id+'TimeMinutes');//'<input class="rich-calendar-time-input" id="'+id+'TimeMinutes"/>'; } } ); @@ -1667,8 +1696,10 @@ 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'; @@ -1679,12 +1710,18 @@ te.show(); te_shadow.show(); + + var te_panel = $(this.TIME_EDITOR_PANEL_ID); + var te_panel_shadow = $(this.TIME_EDITOR_PANEL_SHADOW_ID); + + Element.clonePosition(te_panel_shadow, te_panel, {offsetLeft: 3, offsetTop: 3}); }, 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); @@ -1745,10 +1782,10 @@ }; CalendarView.toolButtonAttributes = {className: "rich-calendar-tool-btn", onmouseover:"this.className='rich-calendar-tool-btn rich-calendar-tool-btn-hover'", onmouseout:"this.className='rich-calendar-tool-btn'", onmousedown:"this.className='rich-calendar-tool-btn rich-calendar-tool-btn-hover rich-calendar-tool-btn-press'", onmouseup:"this.className='rich-calendar-tool-btn rich-calendar-tool-btn-hover'"}; -CalendarView.nextYearControl = CalendarView.getControl(">>", null, "nextYear"); -CalendarView.previousYearControl = CalendarView.getControl("<<", null, "prevYear"); -CalendarView.nextMonthControl = CalendarView.getControl(">", null, "nextMonth"); -CalendarView.previousMonthControl = CalendarView.getControl("<", null, "prevMonth"); +CalendarView.nextYearControl = CalendarView.getControl(">>", CalendarView.toolButtonAttributes, "nextYear"); +CalendarView.previousYearControl = CalendarView.getControl("<<", CalendarView.toolButtonAttributes, "prevYear"); +CalendarView.nextMonthControl = CalendarView.getControl(">", CalendarView.toolButtonAttributes, "nextMonth"); +CalendarView.previousMonthControl = CalendarView.getControl("<", CalendarView.toolButtonAttributes, "prevMonth"); CalendarView.currentMonthControl = function (context) { return Richfaces.Calendar.formatDate(context.calendar.getCurrentDate(), "MMMM, yyyy", context.monthLabels, context.monthLabelsShort);}; CalendarView.todayControl = CalendarView.getControl("Today", CalendarView.toolButtonAttributes, "today"); CalendarView.selectedDateControl = function (context) { return CalendarView.getSelectedDateControl(context.calendar);}; @@ -1828,7 +1865,8 @@ )]; CalendarView.timeEditor = [ - new E('table',{'border': '0', 'cellpadding': '0', 'cellspacing': '0', 'class': 'rich-calendar-time-layout'}, + new E('div', {'style': 'position: relative; width: 100%;'}, [ + new E('table',{'id': function(context) { return context.calendar.TIME_EDITOR_PANEL_ID; }, 'border': '0', 'cellpadding': '0', 'cellspacing': '0', 'class': 'rich-calendar-time-layout'}, [ new E('tbody',{}, [ @@ -1836,29 +1874,37 @@ [ new E('td',{'class': 'rich-calendar-time-layout-fields', 'colspan': '2'}, [ - new ET(function (context) { return Richfaces.evalMacro("timeEditorFields", context)}) + new E('table', null, [new E('tbody', null, [new E('tr', null, [new ET(function (context) { return Richfaces.evalMacro("timeEditorFields", context)})])])]) ]) ]), new E('tr',{}, [ - new E('td',{'class': 'rich-calendar-time-layout-cancel'}, + 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(false)";}}, + 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 T('Cancel') + new T('Ok') ]) - ]), - new E('td',{'class': 'rich-calendar-time-layout-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(true)";}}, + 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 T('Ok') + new T('Cancel') ]) ]) ]) ]) - ]) - ]; + ]), + + new E('div', + { + 'id': function(context) { return context.calendar.TIME_EDITOR_PANEL_SHADOW_ID; }, + 'class': 'rich-calendar-time-editor-shadow' + } + , null) + ])]; CalendarView.dayList = [new ET(function (context) { return context.day})]; CalendarView.weekNumber = [new ET(function (context) { return context.weekNumber})];