Author: pyaschenko Date: 2007-07-17 12:06:42 -0400 (Tue, 17 Jul 2007) New Revision: 1660 Modified: branches/3.0.2/sandbox/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss branches/3.0.2/sandbox/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js branches/3.0.2/sandbox/calendar/src/main/templates/org/richfaces/htmlCalendar.jspx Log: Design update SelectedDate and CurrentDate Input fields added Support of Macrodefinition with input fields added Some additions, improvements and optimization Modified: branches/3.0.2/sandbox/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss =================================================================== --- branches/3.0.2/sandbox/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss 2007-07-17 16:03:00 UTC (rev 1659) +++ branches/3.0.2/sandbox/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss 2007-07-17 16:06:42 UTC (rev 1660) @@ -85,11 +85,11 @@ color : #ff7800; /*unknown parameter - need to add*/ } -.calendar_current{ +/*.calendar_current{ background-color : #ff7800; /*unknown parameter - need to add*/ color : #ffebda; /*unknown parameter - need to add*/ font-weight : bold; -} +}*/ .calendar_spec{ background-color : #e4f5e2; /*unknown parameter - need to add*/ @@ -201,11 +201,22 @@ background-color : #e4f5e2; /*unknown parameter - need to add } */ + <u:selector name=".calendar_current"> + <u:style name="background-color" value="#ff7800"/> /*unknown parameter - need to add*/ + <u:style name="color" value="#ffebda"/> /*unknown parameter - need to add*/ + <u:style name="font-weight" value="bold"/> + </u:selector> + <u:selector name=".calendar_select"> <u:style name="background-color" skin="headerBackgroundColor"/> <u:style name="color" skin="headerTextColor"/> </u:selector> + <u:selector name=".calendar_select"> + <u:style name="background-color" skin="headerBackgroundColor"/> + <u:style name="color" skin="headerTextColor"/> + </u:selector> + <u:selector name=".calendar_toolfooter"> <u:style name="border-top" skin="panelBorderColor"/> <u:style name="border-right" skin="panelBorderColor"/> Modified: branches/3.0.2/sandbox/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js =================================================================== --- branches/3.0.2/sandbox/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-07-17 16:03:00 UTC (rev 1659) +++ branches/3.0.2/sandbox/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-07-17 16:06:42 UTC (rev 1660) @@ -36,7 +36,7 @@ * Date: * d - 1-31 * dd+ - 01-31 */ -Object.extend(Date, { +Object.extend(Date.prototype, { format : function(pattern, monthNames, monthNamesShort) { if (!monthNames) monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December']; if (!monthNamesShort) monthNamesShort = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; @@ -58,7 +58,7 @@ } ); } -}) +}); function isLeapYear(year) { return new Date(year, 1, 29).getDate()==29; @@ -115,7 +115,6 @@ return weeknumber; } - Calendar = Class.create(); Object.extend(Calendar.prototype, { initialize: function(id,parameters) { @@ -149,6 +148,8 @@ this.firstWeekendDayNumber = 6-this.params.firstWeekDay; this.secondWeekendDayNumber = (this.params.firstWeekDay>0 ? 7-this.params.firstWeekDay : 0); + this.calendarContext = new CalendarContext(this); + /*this.ids = { currentYearMonthId: this.id+':currentyearmonth' };*/ @@ -156,32 +157,30 @@ this.daysData = {startDate:null, days:[]}; this.days = []; - var htmlTextHeader = '<input id="'+this.id+':input" type="hidden" value="'+this.getSelectedDate()+'"><table border="0" cellpadding="0" cellspacing="0" class="calendar_exterior">\n'; - var controlsHeaderContext = { - /*nextYearControl: Calendar.getNextYearControl, - previousYearControl: Calendar.getPreviousYearControl, - nextMonthControl: Calendar.getNextMonthControl, - previousMonthControl: Calendar.getPreviousMonthControl, - dateControl: Calendar.getDateControl, - componentId: id,*/ - calendar:this - }; - var htmlControlsHeader = '<thead><tr><th colspan="7" id="'+this.id+':header"></th></tr></thead>' - var htmlTextFooter = '</table><div id="div_'+this.params.dayListTableId+'_selected_date"></div>\n'; + var htmlTextHeader = '<input id="'+this.id+'InputSelectedDate" name="'+this.id+'InputSelectedDate" type="hidden" value="'+this.getSelectedDateString()+'"/>\n' + + '<input id="'+this.id+'InputCurrentDate" name="'+this.id+'InputCurrentDate" type="hidden" value="'+this.getCurrentDate().format("MM/y")+'"/>\n' + + '<table border="0" cellpadding="0" cellspacing="0" class="calendar_exterior"><tbody>\n'; + var htmlControlsHeader = '<tr><th colspan="8" id="'+this.id+':header"></th></tr>' + var htmlControlsFooter = '<tr><th colspan="8" id="'+this.id+':footer"></th></tr>' + var htmlTextFooter = '</tbody></table>\n'; // days bar creation + var styleClass; + var bottomStyleClass; var htmlTextWeekDayBar=''; if (this.params.showWeekDaysBar) { var htmlTextWeekDayBar = '<tr id="'+this.params.weekDayBarId+'">'; - if (this.params.showWeeksBar) htmlTextWeekDayBar+='<td style="border-top:0px"></td>'; + if (this.params.showWeeksBar) htmlTextWeekDayBar+='<td style="calendar_days"><br/></td>'; var weekDayCounter = this.params.firstWeekDay; for (var i=0;i<7;i++) { - var weekDayHtml = this.params.weekDayMarkup( {weekDayLabel: this.params.weekDayLabels[weekDayCounter], weekDayNumber:weekDayCounter} ); + var weekDayHtml = this.params.weekDayMarkup( {weekDayLabel: this.params.weekDayLabels[weekDayCounter], weekDayNumber:weekDayCounter, componentId:this.getWeekDayComponentId(i)} ); if (weekDayCounter==6) weekDayCounter=0; else weekDayCounter++; - - htmlTextWeekDayBar+='<td class="'+(i==this.firstWeekendDayNumber || i==this.secondWeekendDayNumber ? "Weekendclass" : "Dayclass")+'">'+weekDayHtml+'</td>'; + + styleClass = (i==this.firstWeekendDayNumber || i==this.secondWeekendDayNumber ? "Weekendclass" : "calendar_days"); + if (i==6) styleClass +=" right_cell"; + htmlTextWeekDayBar+='<td class="'+styleClass+'">'+weekDayHtml+'</td>'; } htmlTextWeekDayBar+='</tr>\n'; } @@ -195,32 +194,59 @@ htmlTextWeek+='<tr id="'+this.params.weekNumberBarId+k+'">'; if (this.params.showWeeksBar) { - var weekNumberHtml = this.params.weekNumberMarkup( {weekNumber: k} ); - htmlTextWeek+='<td>'+weekNumberHtml+'</td>'; + var weekNumberHtml = this.params.weekNumberMarkup( {weekNumber: k, componentId:this.getWeekNumberComponentId(k-1)} ); + htmlTextWeek+='<td class="calendar_week">'+weekNumberHtml+'</td>'; } + + // day cells creation + bottomStyleClass = (k==6 ? "bottom_cell " : ""); for (var i=0;i<7;i++) { - htmlTextWeek+='<td id="'+this.params.dayListTableId+':cell'+p+'" style="vertical-align:top"></td>'; + styleClass = bottomStyleClass+"cell_size calendar_cell calendar_btn"; + 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>'; p++; } htmlTextWeek+='</tr>'; } + + // footer + // set content var obj=$(id); obj.component = this; obj.richfacesComponent="richfaces:calendar"; - obj.innerHTML = htmlTextHeader+htmlControlsHeader+htmlTextWeekDayBar+htmlTextWeek+htmlTextFooter; + obj.innerHTML = htmlTextHeader+Calendar.headerOptional+htmlControlsHeader+htmlTextWeekDayBar+htmlTextWeek+htmlControlsFooter+Calendar.footerOptional+htmlTextFooter; this.submitFunction = this.params.submitFunction.bind(this); this.prepareEvents(); }, + getWeekDayComponentId: function (v) { + return this.id+"WeekDay"+v; + }, + + getWeekNumberComponentId: function (v) { + return this.id+"WeekNumber"+v; + }, + + getDateComponentId: function (v) { + return this.id+"Date"+v; + }, + + getCurrentDate: function() { + return this.currentDate; + }, getSelectedDate: function() { + if (!this.selectedDate) return null; else return this.selectedDate; + }, + getSelectedDateString: function(pattern) { if (!this.selectedDate) return ""; - var value = this.selectedDate.getMonth()+1; value = (value<10 ? "0"+value : value); - var date = this.selectedDate.getDate(); value += "/"+(date<10 ? "0"+date : date); - return value+"/"+this.selectedDate.getFullYear(); + if (!pattern) pattern = "dd/MM/y"; + return this.selectedDate.format(pattern); }, getPrevYear: function() { @@ -280,7 +306,7 @@ }, eventCellOnClick: function (e) { - var idstr = this.params.dayListTableId+':cell'; + var idstr = this.params.dayListTableId+'Cell'; var obj = Event.findElementByAttr(e, "TD", "id", idstr, true); if (obj) { @@ -293,9 +319,8 @@ this.selectedDateElement = obj; Element.addClassName(obj, "Selecteddayclass"); - var selecteddate = this.getSelectedDate(); - $('div_'+this.params.dayListTableId+'_selected_date').innerHTML=selecteddate; - $(this.id+':input').value=selecteddate; + $(this.id+'InputSelectedDate').value=this.getSelectedDateString(); + this.renderFooter(); } else { if (daydata._month==-1) this.prevMonth(); else this.nextMonth(); } @@ -303,7 +328,7 @@ }, eventCellOnMouseOver: function (e) { - var idstr = this.params.dayListTableId+':cell'; + var idstr = this.params.dayListTableId+'Cell'; var obj = Event.findElementByAttr(e, "TD", "id", idstr, true); if (obj) { @@ -313,7 +338,7 @@ }, eventCellOnMouseOut: function (e) { - var idstr = this.params.dayListTableId+':cell'; + var idstr = this.params.dayListTableId+'Cell'; var obj = Event.findElementByAttr(e, "TD", "id", idstr, true); if (obj) { @@ -322,12 +347,12 @@ } }, - load:function(daysData) { + load:function(daysData, isAjaxMode) { // startDate, // days:array[] // { // data - // enabled + // enabled boolean or function // isEnabled function // text1: 'Meeting...', // text2: 'Meeting...' @@ -337,19 +362,26 @@ // } if (daysData) { - this.daysData = this.indexData(daysData); + this.daysData = this.indexData(daysData, isAjaxMode); } else { this.daysData = null; } - this.update(); + + this.render(); }, - indexData:function(daysData) { + indexData:function(daysData, isAjaxMode) { var dateYear = daysData.startDate.getFullYear(); var dateMonth = daysData.startDate.getMonth(); daysData.index = []; daysData.index[dateYear+'-'+dateMonth] = 0; + if (isAjaxMode) + { + this.currentDate = daysData.startDate; + this.currentDate.setDate(1); + return daysData; + } var idx = daysInMonthByDate(daysData.startDate)-daysData.startDate.getDate()+1; while (daysData.days[idx]) @@ -361,7 +393,7 @@ return daysData; }, - update:function() { + render:function() { this.todayDate = new Date(); var currentYear = this.getCurrentYear(); @@ -373,9 +405,6 @@ var selectedflag = (currentYear == this.selectedDate.getFullYear() && currentMonth == this.selectedDate.getMonth()) var selecteddate = this.selectedDate.getDate(); - //var dateDiv = $(this.ids.currentYearMonthId); - //dateDiv.innerHTML = "&nbsp;" + currentYear + "/" + (currentMonth<9 ? "0" : "") + (currentMonth+1) + "&nbsp;"; - var wd = getDay(this.currentDate, this.params.firstWeekDay); var currentMonthDays = daysInMonthByDate(this.currentDate); var previousMonthDays = daysInMonth(currentYear, currentMonth-1); @@ -436,12 +465,9 @@ } // render - //header render - var header = $(this.id+":header"); - if (header) - { - header.innerHTML = Calendar.header.getContent({calendar:this}); - } + this.renderHeader(); + this.renderFooter(); + //days render p=0; var element; @@ -451,6 +477,8 @@ this.selectedDayElement=null; var weekflag=true; + var e; + //var _d=new Date(); for (var k=1;k<7;k++) @@ -471,20 +499,31 @@ wn=1; weekflag=false; } - element.innerHTML = this.params.weekNumberMarkup( {weekNumber: wn++} ); + element.innerHTML = this.params.weekNumberMarkup( {weekNumber: wn++, componentId:this.getWeekNumberComponentId(k-1)} ); if (k==1&&wn>52) wn=1; element = element.nextSibling; } while (element) { + // TODO calendar_spec class not implemented // TODO fix start/stop event's calls this.stopCellEvents(element); element.data=dataobj.day; + dataobj.componentId=this.getDateComponentId(p); element.innerHTML = this.params.dayListMarkup( dataobj ); - element.className = dataobj._className + (todayflag && dataobj._month==0 && dataobj.day==todaydate ? " Todayclass" : ""); - if (selectedflag && dataobj._month==0 && dataobj.day==selecteddate) { this.selectedDateElement = element; element.className+=" Selecteddayclass"; } + + // class styles + e = Element.classNames(element); + // ?? dataobj._className + // TODO make some optimization with calendar_current class + if (todayflag && dataobj._month==0 && dataobj.day==todaydate) e.add("calendar_current"); else e.remove("calendar_current"); + if (selectedflag && dataobj._month==0 && dataobj.day==selecteddate) { + this.selectedDateElement = element; + e.add("Selecteddayclass"); + } + this.setCellEvents(element); p++; @@ -494,27 +533,52 @@ } //alert(new Date().getTime()-_d.getTime()); }, + renderHeader: function() + { + var header = $(this.id+":header"); + if (header) + { + header.innerHTML = Calendar.header.getContent(this.calendarContext); + } + }, + renderFooter: function() + { + var footer = $(this.id+":footer"); + if (footer) + { + footer.innerHTML = Calendar.footer.getContent(this.calendarContext); + } + }, + + onUpdate: function() + { + $(this.id+'InputCurrentDate').value=this.getCurrentDate().format("MM/y"); + + if (this.submitFunction) + this.submitFunction(this.getCurrentMonth() + '/' + this.getCurrentYear()); + else + this.render(); + }, + nextMonth: function() { this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth()+1,1); - this.submitFunction(this.currentDate.getMonth() + '/' + this.currentDate.getFullYear()); - //this.update(); + this.onUpdate(); }, prevMonth: function() { this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth()-1,1); - this.submitFunction(this.currentDate.getMonth() + '/' + this.currentDate.getFullYear()); - //this.update(); + this.onUpdate(); }, nextYear: function() { this.currentDate = new Date(this.currentDate.getFullYear() + 1, this.currentDate.getMonth(),1); - this.update(); + this.onUpdate(); }, prevYear: function() { this.currentDate = new Date(this.currentDate.getFullYear() - 1, this.currentDate.getMonth(),1); - this.update(); + this.onUpdate(); }, today: function() { @@ -532,7 +596,11 @@ this.currentDate = new Date(nowyear, nowmonth, 1); } - if (updateflag) this.update(); + if (updateflag) this.onUpdate(); + }, + + help: function() { + alert("Calendar help"); } }); @@ -551,32 +619,51 @@ Calendar.getControl = function(context, attributes, text, functionName) { var attr = { - onclick: (functionName ? "Richfaces.invokeOnComponent('richfaces:calendar',this,'"+functionName+"');" : "")+"return false;" + onclick: (functionName ? "Richfaces.invokeOnComponent('richfaces:calendar',this,'"+functionName+"');" : "")+"return false;", + width: "100%" }; if (attributes) { Object.extend(attr, attributes); } - return new E('button',attr,[new T(text)]); + return new E('div',attr,[new T(text)]); }; Calendar.nextYearControl = function(context) { - return Calendar.getControl(context, null, ">> "+context.calendar.getNextYear(), "nextYear"); + //return Calendar.getControl(context, null, ">> "+context.calendar.getNextYear(), "nextYear"); + return Calendar.getControl(context, null, "��", "nextYear"); }; Calendar.previousYearControl = function(context) { - return Calendar.getControl(context, null, context.calendar.getPrevYear()+" <<", "prevYear"); + //return Calendar.getControl(context, null, context.calendar.getPrevYear()+" <<", "prevYear"); + return Calendar.getControl(context, null, "��", "prevYear"); }; Calendar.nextMonthControl = function(context) { - return Calendar.getControl(context, null, "> "+context.calendar.getNextMonth(true), "nextMonth"); + //return Calendar.getControl(context, null, "> "+context.calendar.getNextMonth(true), "nextMonth"); + return Calendar.getControl(context, null, "�", "nextMonth"); }; Calendar.previousMonthControl = function(context) { - return Calendar.getControl(context, null, context.calendar.getPrevMonth(true)+" <", "prevMonth"); + //return Calendar.getControl(context, null, context.calendar.getPrevMonth(true)+" <", "prevMonth"); + return Calendar.getControl(context, null, "�", "prevMonth"); }; -Calendar.dateControl = function(context) { - var value ="&nbsp;" + context.calendar.getCurrentYear() + ", " + context.calendar.getCurrentMonth(true) + "&nbsp;"; - return value;//new T('div',{id:context.calendar.id+":currentyearmonth"},null);//Calendar.getControl(context, {style: 'width: 100%'}, "Date", ""); +Calendar.currentMonthControl = function(context) { + var value =context.calendar.getCurrentDate().format("MMMM, y"); + return value; }; +Calendar.todayControl = function(context) { + return Calendar.getControl(context, null, "Today", "today"); +}; +Calendar.selectedDateControl = function(context) { + var value =context.calendar.getSelectedDateString("dd/MM/y"); + return value; +}; +Calendar.helpControl = function(context) +{ + return Calendar.getControl(context, null, "Help", "help"); +}; +Calendar.headerOptional ='<tr><td class="calendar_header" colspan="8">Optional Header</td></tr>'; +Calendar.footerOptional ='<tr><td class="calendar_footer" colspan="8">Optional Footer</td></tr>'; + Calendar.header = new E('table',{'border': '0', 'cellpadding': '0', 'cellspacing': '0', 'width': '100%'}, [ @@ -586,25 +673,66 @@ [ new E('td',{'class': 'calendar_tool calendar_btn'}, [ - new ET(function (context) { return Richfaces.evalMacro("Calendar.previousYearControl", context)}) + new ET(function (context) { return Richfaces.evalMacro("previousYearControl", context)}) ]), new E('td',{'class': 'calendar_tool calendar_btn'}, [ - new ET(function (context) { return Richfaces.evalMacro("Calendar.previousMonthControl", context)}) + new ET(function (context) { return Richfaces.evalMacro("previousMonthControl", context)}) ]), new E('td',{'class': 'calendar_month'}, [ - new ET(function (context) { return Richfaces.evalMacro("Calendar.dateControl", context)}) + new ET(function (context) { return Richfaces.evalMacro("currentMonthControl", context)}) ]), new E('td',{'class': 'calendar_tool calendar_btn'}, [ - new ET(function (context) { return Richfaces.evalMacro("Calendar.nextMonthControl", context)}) + new ET(function (context) { return Richfaces.evalMacro("nextMonthControl", context)}) ]), new E('td',{'class': 'calendar_tool calendar_btn'}, [ - new ET(function (context) { return Richfaces.evalMacro("Calendar.nextYearControl", context)}) + new ET(function (context) { return Richfaces.evalMacro("nextYearControl", context)}) ]) ]) ]) ] - ); \ No newline at end of file + ); + +Calendar.footer = + new E('table',{'border': '0', 'cellpadding': '0', 'cellspacing': '0', 'width': '100%'}, + [ + new E('tbody',{}, + [ + new E('tr',{}, + [ + new E('td',{'class': 'calendar_toolfooter'}, + [ + new ET(function (context) { return Richfaces.evalMacro("Calendar.selectedDateControl", context)}) + ]), + new E('td',{'class': 'calendar_toolfooter calendar_btn', 'width': '100%'}, + [ + new ET(function (context) { return Richfaces.evalMacro("Calendar.helpControl", context)}) + ]), + new E('td',{'class': 'calendar_toolfooter calendar_btn', 'align': 'right'}, + [ + new ET(function (context) { return Richfaces.evalMacro("Calendar.todayControl", context)}) + ]) + ]) + ]) + ] + ); + + +CalendarContext = Class.create(); +Object.extend(CalendarContext.prototype, { + initialize: function(calendar) { + this.calendar=calendar; + }, + + nextYearControl: Calendar.nextYearControl, + previousYearControl: Calendar.previousYearControl, + nextMonthControl: Calendar.nextMonthControl, + previousMonthControl: Calendar.previousMonthControl, + currentMonthControl: Calendar.currentMonthControl, + todayControl: Calendar.todayControl, + selectedDateControl: Calendar.selectedDateControl, + helpControl: Calendar.helpControl +}); \ No newline at end of file Modified: branches/3.0.2/sandbox/calendar/src/main/templates/org/richfaces/htmlCalendar.jspx =================================================================== --- branches/3.0.2/sandbox/calendar/src/main/templates/org/richfaces/htmlCalendar.jspx 2007-07-17 16:03:00 UTC (rev 1659) +++ branches/3.0.2/sandbox/calendar/src/main/templates/org/richfaces/htmlCalendar.jspx 2007-07-17 16:06:42 UTC (rev 1660) @@ -14,7 +14,7 @@ <h:scripts>new org.ajax4jsf.framework.resource.PrototypeScript(),new org.ajax4jsf.framework.ajax.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:styles>/org/richfaces/renderkit/html/css/calendar.xcss</h:styles> - <div id="#{clientId}" style="width: #{this:qualifySize(component.attributes['width'])}; height: #{this:qualifySize(component.attributes['height'])}; #{component.attributes['style']}" class="#{component.attributes['styleClass']}" + <div id="#{clientId}" style="display:inline; width: #{this:qualifySize(component.attributes['width'])}; height: #{this:qualifySize(component.attributes['height'])}; #{component.attributes['style']}" class="#{component.attributes['styleClass']}" x:passThruWithExclusions="value,name,type,id"