Author: pyaschenko Date: 2007-07-24 14:20:16 -0400 (Tue, 24 Jul 2007) New Revision: 1833 Modified: trunk/sandbox/samples/calendar-sample/src/main/java/org/richfaces/CalendarBean.java trunk/sandbox/samples/calendar-sample/src/main/webapp/pages/Calendar.jsp trunk/sandbox/ui/calendar/src/main/config/component/calendar.xml trunk/sandbox/ui/calendar/src/main/java/org/richfaces/component/UICalendar.java trunk/sandbox/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js trunk/sandbox/ui/calendar/src/main/templates/org/richfaces/htmlCalendar.jspx Log: Modified: trunk/sandbox/samples/calendar-sample/src/main/java/org/richfaces/CalendarBean.java =================================================================== --- trunk/sandbox/samples/calendar-sample/src/main/java/org/richfaces/CalendarBean.java 2007-07-24 18:19:02 UTC (rev 1832) +++ trunk/sandbox/samples/calendar-sample/src/main/java/org/richfaces/CalendarBean.java 2007-07-24 18:20:16 UTC (rev 1833) @@ -42,6 +42,8 @@ private String pattern; private Date currentDate; private Date selectedDate; + private String jointPoint; + private String direction; private boolean useCustomDayLabels; @@ -76,6 +78,8 @@ locale = Locale.US; popup = false; pattern = "MMM d, yyyy"; + jointPoint = "bottom-left"; + direction = "bottom-right"; } public void selectLocale(ValueChangeEvent event){ @@ -128,4 +132,23 @@ public void setSelectedDate(Date selectedDate) { this.selectedDate = selectedDate; } + + public String getJointPoint() { + return jointPoint; + } + public void setJointPoint(String jointPoint) { + this.jointPoint = jointPoint; + } + public void selectJointPoint(ValueChangeEvent event){ + jointPoint = (String) event.getNewValue(); + } + public String getDirection() { + return direction; + } + public void setDirection(String direction) { + this.direction = direction; + } + public void selectDirection(ValueChangeEvent event){ + direction = (String) event.getNewValue(); + } } \ No newline at end of file Modified: trunk/sandbox/samples/calendar-sample/src/main/webapp/pages/Calendar.jsp =================================================================== --- trunk/sandbox/samples/calendar-sample/src/main/webapp/pages/Calendar.jsp 2007-07-24 18:19:02 UTC (rev 1832) +++ trunk/sandbox/samples/calendar-sample/src/main/webapp/pages/Calendar.jsp 2007-07-24 18:20:16 UTC (rev 1833) @@ -35,7 +35,9 @@ datePattern="#{calendarBean.pattern}" weekDayLabelsShort="#{calendarBean.weekDayLabelsShort}" value="#{calendarBean.selectedDate}" - currentDate="#{calendarBean.currentDate}"> + currentDate="#{calendarBean.currentDate}" + jointPoint="#{calendarBean.jointPoint}" + direction="#{calendarBean.direction}"> <f:validator validatorId="org.richfaces.CalendarValidator" /> @@ -67,7 +69,24 @@ <f:selectItem itemLabel="dd/M/yy" itemValue="dd/M/yy"/> <f:selectItem itemLabel="d/MMM/y" itemValue="d/MMM/y"/> <f:selectItem itemLabel="MMM d, yyyy" itemValue="MMM d, yyyy"/> - </h:selectOneMenu> + </h:selectOneMenu> + <h:inputText id="selectdate"/><h:commandButton type="button" value="Select Date" onclick="$(this.form.id+':calendar').component.selectDate(this.form[this.form.id+':selectdate'].value);"/> + <h:outputText value="Select Popup Joint Point:" /> + <h:selectOneRadio onchange="submit()" value="#{calendarBean.jointPoint}" valueChangeListener="#{calendarBean.selectJointPoint}"> + <f:selectItem itemLabel="bottom-right" itemValue="bottom-right"/> + <f:selectItem itemLabel="bottom-left" itemValue="bottom-left"/> + <f:selectItem itemLabel="top-right" itemValue="top-right"/> + <f:selectItem itemLabel="top-left" itemValue="top-left"/> + </h:selectOneRadio> + <h:outputText value="Select Popup Direction:" /> + <h:selectOneRadio onchange="submit()" value="#{calendarBean.direction}" valueChangeListener="#{calendarBean.selectDirection}"> + <f:selectItem itemLabel="bottom-right" itemValue="bottom-right"/> + <f:selectItem itemLabel="bottom-left" itemValue="bottom-left"/> + <f:selectItem itemLabel="top-right" itemValue="top-right"/> + <f:selectItem itemLabel="top-left" itemValue="top-left"/> + </h:selectOneRadio> + + <h:commandButton id="calendarPopup" type="button" value="popup" onclick="$(this.form.id+':calendar').component.doSwitch();"/> </h:panelGrid> <h:outputText value="Current date: "/> Modified: trunk/sandbox/ui/calendar/src/main/config/component/calendar.xml =================================================================== --- trunk/sandbox/ui/calendar/src/main/config/component/calendar.xml 2007-07-24 18:19:02 UTC (rev 1832) +++ trunk/sandbox/ui/calendar/src/main/config/component/calendar.xml 2007-07-24 18:20:16 UTC (rev 1833) @@ -98,6 +98,18 @@ <description></description> <defaultvalue>true</defaultvalue> </property> + <property> + <name>jointPoint</name> + <classname>java.lang.String</classname> + <description></description> + <defaultvalue>"bottom-left"</defaultvalue> + </property> + <property> + <name>direction</name> + <classname>java.lang.String</classname> + <description></description> + <defaultvalue>"bottom-right"</defaultvalue> + </property> <property> <name>weekDayLabels</name> Modified: trunk/sandbox/ui/calendar/src/main/java/org/richfaces/component/UICalendar.java =================================================================== --- trunk/sandbox/ui/calendar/src/main/java/org/richfaces/component/UICalendar.java 2007-07-24 18:19:02 UTC (rev 1832) +++ trunk/sandbox/ui/calendar/src/main/java/org/richfaces/component/UICalendar.java 2007-07-24 18:20:16 UTC (rev 1833) @@ -105,6 +105,12 @@ public abstract Object getWeekDayLabelsShort(); public abstract void setWeekDayLabelsShort(Object labels); + public abstract String getJointPoint(); + public abstract void setJointPoint(String jointPoint); + public abstract String getDirection(); + public abstract void setDirection(String direction); + + // currentDate processing ------------------------------------------------- public String getValueAsString(FacesContext context, UIComponent component) Modified: trunk/sandbox/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js =================================================================== --- trunk/sandbox/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-07-24 18:19:02 UTC (rev 1832) +++ trunk/sandbox/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-07-24 18:20:16 UTC (rev 1833) @@ -2,8 +2,84 @@ window.LOG = {warn:function(){}}; } -//if (!window.Richfaces) window.Richfaces={}; +if (!Richfaces) Richfaces={}; +Richfaces.Calendar={}; +Richfaces.Calendar.setElementPosition = function(element, baseElement, jointPoint, direction, offset) +{ + var elementDim = {width: element.getWidth(), height: element.getHeight()}; + var baseElementDim = {width: baseElement.getWidth(), height: baseElement.getHeight()}; + var windowDim = Richfaces.Calendar.getWindowDimensions(); + var windowOffset = Richfaces.Calendar.getWindowScrollOffset(); + + var baseOffset = Position.cumulativeOffset(baseElement); + + // jointPoint Correction + var ox=0; + var oy=0; + if (jointPoint) + { + var jp = jointPoint.toLowerCase().split('-'); + if (jp[0]=='bottom') oy=baseElementDim.height; + if (jp[1]=='right') ox=baseElementDim.width; + } + + // direction Correction + if (direction) + { + var d = direction.toLowerCase().split('-'); + if (d[0]=='top') oy-=elementDim.height; + if (d[1]=='left') ox-=elementDim.width; + } + + element.style.left = baseOffset[0] + ox + 'px'; + element.style.top = baseOffset[1] + oy + 'px'; + +} +Richfaces.Calendar.getWindowDimensions = function() { + var w = self.innerWidth + || document.documentElement.clientWidth + || document.body.clientWidth + || 0; + var h = self.innerHeight + || document.documentElement.clientHeight + || document.body.clientHeight + || 0; + return {width:w, height: h}; +} + +Richfaces.Calendar.getWindowScrollOffset = function() { + var dx = window.pageXOffset + || document.documentElement.scrollLeft + || document.body.scrollLeft + || 0; + var dy = window.pageYOffset + || document.documentElement.scrollTop + || document.body.scrollTop + || 0; + return {left:dx, top: dy}; +} + +/*Richfaces.Calendar.getPageDimensions = function() { + var x,y; + var test1 = document.body.scrollHeight; + var test2 = document.body.offsetHeight; + if (test1 > test2) { + // all but Explorer Mac + x = document.body.scrollWidth; + y = document.body.scrollHeight; + } + else { + // Explorer Mac; + // would also work in Explorer 6 Strict, Mozilla and Safari + + x = document.body.offsetWidth; + y = document.body.offsetHeight; + } + + return {width:x, height:y}; +}*/ + Object.extend(Event, { findElementByAttr : function(event, tagName, attribute, value, flag) { var element = Event.findElement(event, tagName); @@ -136,8 +212,9 @@ // showWeekDaysBar - show WeekDays Bar [default value is true] // showWeeksBar - show Weeks numbers bar [default value is true] + // POPUP description // direction - [top-left, top-right, bottom-left, bottom-right, auto] - // jointPoint + // jointPoint - [top-left, top-right, bottom-left, bottom-right, auto] // popup - true // userClasses - inputClass, inputDisabledClass, inputInvalidClass, buttonClass, buttonDisabledClass // id+PopupButton, id+PopupInput, @@ -158,6 +235,7 @@ if (!this.params.footerMarkup) this.params.footerMarkup = CalendarView.footer; this.currentDate = this.params.currentDate ? this.params.currentDate : new Date(); + this.currentDate.setDate(1); this.selectedDate = this.params.selectedDate; this.todayDate = new Date(); @@ -169,10 +247,13 @@ this.calendarContext = new CalendarContext(this); - /*this.ids = { - currentYearMonthId: this.id+':currentyearmonth' - };*/ + this.DATE_ELEMENT_ID = this.params.dayListTableId+'Cell'; + this.POPUP_ID = this.id+'Popup'; + this.POPUP_BUTTON_ID = this.id+'PopupButton'; + this.POPUP_INPUT_ID = this.id+'PopupInput'; + this.firstDateIndex = 0; + this.daysData = {startDate:null, days:[]}; this.days = []; @@ -184,8 +265,23 @@ var htmlFooterOptional = (this.params.footerOptionalMarkup) ? '<tr><td class="calendar_footer" colspan="'+colspan+'" id="'+this.id+'FooterOptional"></td></tr>' : ''; var htmlControlsHeader = '<tr><td colspan="'+colspan+'" id="'+this.id+'Header"></td></tr>'; var htmlControlsFooter = '<tr><td colspan="'+colspan+'" id="'+this.id+'Footer"></td></tr>'; - var htmlTextFooter = '</tbody></table>\n'; + var htmlTextFooter = '</tbody></table>\n' + this.isVisible = true; + //if (this.params.popup==true) + { + // popup mode initialisation + var e = $(this.id); + if (e) + { + e.style.display='none'; + e.style.position = 'absolute'; + e.style.left="0px"; + e.style.top="0px"; + this.isVisible = false; + } + } + // days bar creation var styleClass; var bottomStyleClass; @@ -228,15 +324,12 @@ if (i==this.firstWeekendDayNumber || i==this.secondWeekendDayNumber) styleClass+=" calendar_holly"; if (i==6) styleClass+=" right_cell"; - htmlTextWeek+='<td class="'+styleClass+'" id="'+this.params.dayListTableId+'Cell'+p+'"></td>'; + htmlTextWeek+='<td class="'+styleClass+'" id="'+this.DATE_ELEMENT_ID+p+'"></td>'; p++; } htmlTextWeek+='</tr>'; } - // footer - - // set content var obj=$(id); obj.component = this; @@ -247,6 +340,29 @@ this.prepareEvents(); }, + doCollapse: function() { + if (/*!this.params.popup || */!this.isVisible) return; + + Element.hide(this.id); + this.isVisible = false; + }, + + doExpand: function() { + if (/*!this.params.popup || */this.isVisible) return; + + var base = $(this.POPUP_ID); + var e = $(this.id); + + Richfaces.Calendar.setElementPosition(e, base, this.params.jointPoint, this.params.direction); + + Element.show(this.id); + this.isVisible = true; + }, + + doSwitch: function() { + this.isVisible ? this.doCollapse() : this.doExpand(); + }, + getWeekDayComponentId: function (v) { return this.id+"WeekDay"+v; }, @@ -258,7 +374,7 @@ getDateComponentId: function (v) { return this.id+"Date"+v; }, - + getCurrentDate: function() { return this.currentDate; }, @@ -328,11 +444,10 @@ }, eventCellOnClick: function (e) { - var idstr = this.params.dayListTableId+'Cell'; - var obj = Event.findElementByAttr(e, "TD", "id", idstr, true); + var obj = Event.findElementByAttr(e, "TD", "id", this.DATE_ELEMENT_ID, true); if (obj) { - var daydata = this.days[parseInt(obj.id.substr(idstr.length))]; + var daydata = this.days[parseInt(obj.id.substr(this.DATE_ELEMENT_ID.length))]; if (daydata._month==0) { this.selectedDate=new Date(this.currentDate); @@ -342,6 +457,7 @@ Element.addClassName(obj, "Selecteddayclass"); $(this.id+'InputSelectedDate').value=this.getSelectedDateString(this.params.datePattern); + this.renderHeader(); this.renderFooter(); } else { if (daydata._month==-1) this.prevMonth(); else this.nextMonth(); @@ -350,21 +466,19 @@ }, eventCellOnMouseOver: function (e) { - var idstr = this.params.dayListTableId+'Cell'; - var obj = Event.findElementByAttr(e, "TD", "id", idstr, true); + var obj = Event.findElementByAttr(e, "TD", "id", this.DATE_ELEMENT_ID, true); if (obj) { - var daydata = this.days[parseInt(obj.id.substr(idstr.length))]; + var daydata = this.days[parseInt(obj.id.substr(this.DATE_ELEMENT_ID.length))]; if (daydata._month==0 && Element.hasClassName(obj,daydata._className)) Element.replaceClassName(obj,daydata._className, daydata._hoverClassName); } }, eventCellOnMouseOut: function (e) { - var idstr = this.params.dayListTableId+'Cell'; - var obj = Event.findElementByAttr(e, "TD", "id", idstr, true); + var obj = Event.findElementByAttr(e, "TD", "id", this.DATE_ELEMENT_ID, true); if (obj) { - var daydata = this.days[parseInt(obj.id.substr(idstr.length))]; + var daydata = this.days[parseInt(obj.id.substr(this.DATE_ELEMENT_ID.length))]; if (daydata._month==0 && Element.hasClassName(obj,daydata._hoverClassName)) Element.replaceClassName(obj,daydata._hoverClassName, daydata._className); } }, @@ -440,6 +554,8 @@ if (wd>0) while (dayCounter<=previousMonthDays) {this.days.push({day:dayCounter, _isWeekend: this.isWeekend(p), _month:month, _className:"Disableddayclass"}); dayCounter++; p++; } dayCounter = 1; month=0; + + this.firstDateIndex = p; // current month days if (this.daysData && this.daysData.index[currentYear+'-'+currentMonth]!=undefined) @@ -505,6 +621,11 @@ //var _d=new Date(); + if (this.selectedDateElement) { + Element.classNames(this.selectedDateElement).remove("Selecteddayclass"); + this.selectedDateElement = null; + } + for (var k=1;k<7;k++) { // @@ -644,6 +765,32 @@ help: function() { alert("Calendar help"); + }, + + selectDate: function(date) { + if (date) + { + date = new Date(date); + if (this.selectedDate && this.selectedDate == date) return; + this.selectedDate = date; + } + + if (this.selectedDate) + { + var d = new Date(this.selectedDate); + d.setDate(1); + if (d.getMonth()==this.currentDate.getMonth() && d.getFullYear()==this.currentDate.getFullYear()) + { + // find cell and call onklick event + var e = $(this.DATE_ELEMENT_ID+(this.firstDateIndex + this.selectedDate.getDate()-1)); + if (e) Richfaces.createEvent ('click', e).fire(); + } else { + // change currentDate and call this.onUpdate(); + this.currentDate = d; + this.onUpdate(); + + } + } } }); @@ -664,7 +811,7 @@ CalendarView.previousMonthControl = CalendarView.getControl("<", "prevMonth"); CalendarView.currentMonthControl = function (context) { return context.calendar.getCurrentDate().format("MMMM, y", context.monthLabels, context.monthLabelsShort);}; CalendarView.todayControl = CalendarView.getControl("Today", "today"); -CalendarView.selectedDateControl = function (context) { return CalendarView.getControl(context.calendar.getSelectedDateString(context.calendar.params.datePattern), "prevMonth");}; +CalendarView.selectedDateControl = function (context) { return CalendarView.getControl(context.calendar.getSelectedDateString(context.calendar.params.datePattern), "selectDate");}; CalendarView.helpControl = CalendarView.getControl("Help", "help"); CalendarView.header = [ @@ -706,7 +853,7 @@ [ new E('tr',{}, [ - new E('td',{'class': 'calendar_toolfooter', 'style': 'white-space:nowrap'}, + new E('td',{'class': 'calendar_toolfooter calendar_btn', 'style': 'white-space:nowrap'}, [ new ET(function (context) { return Richfaces.evalMacro("selectedDateControl", context)}) ]), Modified: trunk/sandbox/ui/calendar/src/main/templates/org/richfaces/htmlCalendar.jspx =================================================================== --- trunk/sandbox/ui/calendar/src/main/templates/org/richfaces/htmlCalendar.jspx 2007-07-24 18:19:02 UTC (rev 1832) +++ trunk/sandbox/ui/calendar/src/main/templates/org/richfaces/htmlCalendar.jspx 2007-07-24 18:20:16 UTC (rev 1833) @@ -9,11 +9,11 @@ baseclass="org.richfaces.renderkit.CalendarRendererBase" component="org.richfaces.component.UICalendar"> <f:clientid var="clientId" /> - <h:scripts>new org.ajax4jsf.javascript.PrototypeScript(),new org.ajax4jsf.javascript.AjaxScript(),/org/richfaces/renderkit/html/scripts/utils.js,/org/richfaces/renderkit/html/scripts/json/json-dom.js,/org/richfaces/renderkit/html/scripts/calendar.js</h:scripts> + <h:scripts>new org.ajax4jsf.javascript.PrototypeScript(),new org.ajax4jsf.javascript.AjaxScript(),/org/richfaces/renderkit/html/scripts/events.js,/org/richfaces/renderkit/html/scripts/utils.js,/org/richfaces/renderkit/html/scripts/json/json-dom.js,/org/richfaces/renderkit/html/scripts/calendar.js</h:scripts> <h:styles>/org/richfaces/renderkit/html/css/calendar.xcss</h:styles> <div id="#{clientId}" - style="display:inline; width: #{this:qualifySize(component.attributes['width'])}; height: #{this:qualifySize(component.attributes['height'])}; #{component.attributes['style']}" + style="#{component.attributes['style']}" class="#{component.attributes['styleClass']}" x:passThruWithExclusions="value,name,type,id"><script type="text/javascript"> @@ -28,6 +28,8 @@ currentDate: #{this:getCurrentDate(context, component)}, selectedDate: #{this:getSelectedDate(context, component)}, datePattern: '#{component.datePattern}', + jointPoint: '#{component.jointPoint}', + direction: '#{component.direction}', <f:call name="writeSymbols" />, firstWeekDay: #{this:getFirstWeekDay(context, component)}, minDaysInFirstWeek: #{this:getMinDaysInFirstWeek(context, component)}, @@ -74,7 +76,7 @@ class="#{component.attributes['class']}" onclick="#{component.attributes['onclick']}"> </input> - <button id="#{clientId}Button" + <button id="#{clientId}PopupButton" accesskey="#{component.attributes['accesskey']}" class="#{component.attributes['class']}" name="#{clientId}"