[richfaces-svn-commits] JBoss Rich Faces SVN: r5041 - in trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html: scripts and 1 other directory.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Thu Dec 27 12:43:13 EST 2007
Author: pyaschenko
Date: 2007-12-27 12:43:13 -0500 (Thu, 27 Dec 2007)
New Revision: 5041
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-1725
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-27 16:31:16 UTC (rev 5040)
+++ trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/css/calendar.xcss 2007-12-27 17:43:13 UTC (rev 5041)
@@ -273,7 +273,7 @@
<u:style name="vertical-align" value="middle"/>
</u:selector>
- <u:selector name=".rich-calendar-time-shadow">
+ <u:selector name=".rich-calendar-editor-shadow">
<u:style name="background" skin="tableBackgroundColor"/>
<u:style name="opacity" value="0.5"/>
<u:style name="filter" value="alpha(opacity=50)"/>
@@ -286,7 +286,7 @@
<u:style name="position" value="relative"/>
</u:selector>
- <u:selector name=".rich-calendar-time-layout-container">
+ <u:selector name=".rich-calendar-editor-container">
</u:selector>
<u:selector name=".rich-calendar-time-layout, .rich-calendar-time-layout input">
@@ -382,11 +382,30 @@
<u:style name="border-right-color" skin="subBorderColor" />
</u:selector>
- <u:selector name=".rich-calendar-time-layout-shadow">
+ <u:selector name=".rich-calendar-editor-layout-shadow">
<u:style name="background-color" skin="shadowBackgroundColor" />
<u:style name="opacity" value="0.3" />
<u:style name="filter" value="alpha(opacity=30)"/>
<u:style name="position" value="absolute"/>
</u:selector>
+
+ <u:selector name=".rich-calendar-editor-btn">
+ <u:style name="width" value="40px" />
+ <u:style name="padding" value="2px" />
+ <u:style name="text-align" value="center"/>
+ </u:selector>
+ <u:selector name=".rich-calendar-editor-btn-over">
+ <u:style name="padding" value="1px" />
+ <u:style name="border" value="1px solid"/>
+ <u:style name="border-color" skin="panelBorderColor"/>
+ <u:style name="cursor" value="pointer"/>
+ </u:selector>
+
+ <u:selector name=".rich-calendar-editor-btn-selected">
+ <u:style name="background-color" skin="calendarCurrentBackgroundColor" />
+ <u:style name="color" skin="calendarCurrentTextColor" />
+ <u:style name="font-weight" value="bold"/>
+ </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-12-27 16:31:16 UTC (rev 5040)
+++ trunk/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-12-27 17:43:13 UTC (rev 5041)
@@ -606,12 +606,14 @@
this.POPUP_BUTTON_ID = this.id+'PopupButton';
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+'TimeEditorShadow';
+ this.EDITOR_ID = this.id+'Editor';
+ this.EDITOR_SHADOW_ID = this.id+'EditorShadow';
this.TIME_EDITOR_LAYOUT_ID = this.id+'TimeEditorLayout';
- this.TIME_EDITOR_LAYOUT_SHADOW_ID = this.id+'TimeEditorLayoutShadow';
+ this.DATE_EDITOR_LAYOUT_ID = this.id+'DateEditorLayout';
+ this.EDITOR_LAYOUT_SHADOW_ID = this.id+'EditorLayoutShadow';
+
//this.popupIntervalId=null;
this.firstDateIndex = 0;
@@ -745,7 +747,81 @@
}
},
+
+ dateEditorSelectYear: function(value)
+ {
+ if (this.dateEditorYearID)
+ {
+ Element.removeClassName(this.dateEditorYearID, 'rich-calendar-editor-btn-selected');
+ }
+ this.dateEditorYear = this.dateEditorStartYear + value;
+ this.dateEditorYearID = this.DATE_EDITOR_LAYOUT_ID+'Y'+value;
+ Element.addClassName(this.dateEditorYearID, 'rich-calendar-editor-btn-selected');
+ },
+
+ dateEditorSelectMonth: function(value)
+ {
+ this.dateEditorMonth = value;
+ Element.removeClassName(this.dateEditorMonthID, 'rich-calendar-editor-btn-selected');
+ this.dateEditorMonthID = this.DATE_EDITOR_LAYOUT_ID+'M'+value;
+ Element.addClassName(this.dateEditorMonthID, 'rich-calendar-editor-btn-selected');
+ },
+
+ scrollEditorYear: function(value)
+ {
+ var element = $(this.DATE_EDITOR_LAYOUT_ID+'TR');
+ if (this.dateEditorYearID)
+ {
+ Element.removeClassName(this.dateEditorYearID, 'rich-calendar-editor-btn-selected');
+ this.dateEditorYearID='';
+ }
+
+ if (!value)
+ {
+ // update month selection when open editor (value == 0)
+ if (this.dateEditorMonth != this.getCurrentMonth())
+ {
+ this.dateEditorMonth = this.getCurrentMonth();
+ Element.removeClassName(this.dateEditorMonthID, 'rich-calendar-editor-btn-selected');
+ this.dateEditorMonthID = this.DATE_EDITOR_LAYOUT_ID+'M'+this.dateEditorMonth;
+ Element.addClassName(this.dateEditorMonthID, 'rich-calendar-editor-btn-selected');
+ }
+ }
+
+ if (element)
+ {
+ var div;
+ var year = this.dateEditorStartYear = this.dateEditorStartYear+value*10;
+ for (var i=0;i<5;i++)
+ {
+ element = element.nextSibling;
+ div = element.firstChild.nextSibling.nextSibling;
+ div.firstChild.innerHTML=year;
+ if (year == this.dateEditorYear)
+ {
+ Element.addClassName(div.firstChild, 'rich-calendar-editor-btn-selected');
+ this.dateEditorYearID = div.firstChild.id;
+ }
+ div = div.nextSibling;
+ div.firstChild.innerHTML=year+5;
+ if (year+5 == this.dateEditorYear)
+ {
+ Element.addClassName(div.firstChild, 'rich-calendar-editor-btn-selected');
+ this.dateEditorYearID = div.firstChild.id;
+ }
+ year++;
+ }
+ }
+ },
+
+ updateDateEditor: function()
+ {
+ this.dateEditorYear = this.getCurrentYear();
+ this.dateEditorStartYear = this.getCurrentYear() - 4;
+ this.scrollEditorYear(0);
+ },
+
updateTimeEditor: function()
{
var th=$(this.id+'TimeHours');
@@ -764,18 +840,29 @@
tm.value = (m<10 ? '0'+m : m);
},
- createTimeEditor: function(element)
+
+ createEditor: function()
{
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 class="rich-calendar-time-layout-container" align="center"><div style="position:relative; width:100%">';
+ var htmlBegin = '<div id="'+this.EDITOR_SHADOW_ID+'" class="rich-calendar-editor-shadow" style="position:absolute; display:none;"></div><table border="0" cellpadding="0" cellspacing="0" id="'+this.EDITOR_ID+'" style="position:absolute; display:none;"><tbody><tr><td class="rich-calendar-editor-container" align="center"><div style="position:relative; width:100%">';
+ var htmlContent = '<div id="'+this.EDITOR_LAYOUT_SHADOW_ID+'" class="rich-calendar-editor-layout-shadow"></div>';
+
var htmlEnd = '</div></td></tr></tbody></table>';
- new Insertion.After(element, htmlBegin+this.evaluateMarkup(CalendarView.timeEditor, this.calendarContext)+htmlEnd);
- var te_shadow = $(this.TIME_EDITOR_SHADOW_ID);
- var te = $(this.TIME_EDITOR_ID);
+ new Insertion.After(element, htmlBegin+htmlContent+htmlEnd);
+ //+this.evaluateMarkup(CalendarView.timeEditor, this.calendarContext)+
+ var editor_shadow = $(this.EDITOR_SHADOW_ID);
+ var editor = $(this.EDITOR_ID);
var zindex = element.getStyle('z-index');
- te_shadow.style.zIndex = zindex;
- te.style.zIndex = parseInt(zindex,10)+1;
+ editor_shadow.style.zIndex = zindex;
+ editor.style.zIndex = parseInt(zindex,10)+1;
+ this.isEditorCreated = true;
+ },
+
+ createTimeEditorLayout: function()
+ {
+ Element.insert(this.EDITOR_LAYOUT_SHADOW_ID, {after:this.evaluateMarkup(this.calendarContext.timeEditorLayout, this.calendarContext)});
+
var th=$(this.id+'TimeHours');
var ts;
var tm=$(this.id+'TimeMinutes');
@@ -791,9 +878,57 @@
}
sbjQuery(tm).SpinButton({digits:2,min:0,max:59});
- this.isTimeEditorCreated = true;
+ this.isTimeEditorLayoutCreated = true;
},
+ createDECell: function(id, value, buttonType, param, className)
+ {
+ var onclick = (buttonType==0 ? '$(\''+this.id+'\').component.scrollEditorYear('+param+');' :
+ buttonType==1 ? '$(\''+this.id+'\').component.dateEditorSelectMonth('+param+');':
+ '$(\''+this.id+'\').component.dateEditorSelectYear('+param+');' );
+ return '<td><div id="'+id+'" class="rich-calendar-editor-btn'+(className ? ' '+className : '')+'" onmouseover="Element.addClassName(this, \'rich-calendar-editor-btn-over\');" onmouseout="Element.removeClassName(this, \'rich-calendar-editor-btn-over\');" onclick="'+onclick+'">'+value+'</div></td>';
+ },
+
+ createDateEditorLayout: function()
+ {
+ var htmlBegin = '<table id="'+this.DATE_EDITOR_LAYOUT_ID+'" class="rich-calendar-time-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 = this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+month, this.params.monthLabelsShort[month], 1, month)
+ +this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+(month+6), this.params.monthLabelsShort[month+6], 1, month+6)
+ +this.createDECell('','<', 0, -1)
+ +this.createDECell('','>', 0, 1);
+ month++;
+
+ for (var i=0;i<5;i++)
+ {
+ htmlContent+='</tr><tr>'+this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+month, this.params.monthLabelsShort[month], 1, month)
+ +this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'M'+(month+6), this.params.monthLabelsShort[month+6], 1, month+6)
+ +this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'Y'+i, year, 2, i, (i==4 ? 'rich-calendar-editor-btn-selected' : ''))
+ +this.createDECell(this.DATE_EDITOR_LAYOUT_ID+'Y'+(i+5), year+5, 2, i+5);
+ month++;
+ year++;
+ }
+ this.dateEditorYearID = this.DATE_EDITOR_LAYOUT_ID+'Y4';
+ this.dateEditorMonth = this.getCurrentMonth();
+ this.dateEditorMonthID = this.DATE_EDITOR_LAYOUT_ID+'M'+this.dateEditorMonth;
+
+ htmlContent+='</tr><tr><td colspan="2" class="rich-calendar-time-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);">OK</div>'+
+ '</td><td colspan="2" class="rich-calendar-time-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);">Cancel</div>'+
+ '</td>';
+
+
+ Element.insert(this.EDITOR_LAYOUT_SHADOW_ID, {after:htmlBegin+htmlContent+htmlEnd});
+
+ Element.addClassName(this.dateEditorMonthID, 'rich-calendar-editor-btn-selected');
+
+ this.isDateEditorLayoutCreated = true;
+ },
+
createSpinnerTable: function(id) {
return '<table cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
'<td class="rich-calendar-spinner-input-container">'+
@@ -904,7 +1039,7 @@
doCollapse: function() {
if (!this.params.popup || !this.isVisible) return;
- if (this.isTimeEditorCreated) this.hideTimeEditor();
+ if (this.isEditorVisible) this.hideEditor();
/*this.stopTimer();
this.stopPopupEvents($(this.id));
@@ -1582,22 +1717,34 @@
},
nextMonth: function() {
- this.changeCurrentDate(0,1);
+ this.changeCurrentDateOffset(0,1);
},
prevMonth: function() {
- this.changeCurrentDate(0,-1);
+ this.changeCurrentDateOffset(0,-1);
},
nextYear: function() {
- this.changeCurrentDate(1,0);
+ this.changeCurrentDateOffset(1,0);
},
prevYear: function() {
- this.changeCurrentDate(-1,0);
+ this.changeCurrentDateOffset(-1,0);
},
- changeCurrentDate: function(yearOffset, monthOffset) {
+ changeCurrentDate: function(year, month) {
+ if (this.getCurrentMonth()!=month || this.getCurrentYear()!=year)
+ {
+ var date = new Date(year, month,1);
+ if (this.invokeEvent("currentdateselect", $(this.id), null, date))
+ {
+ this.currentDate = date;
+ this.onUpdate();
+ }
+ }
+ },
+
+ changeCurrentDateOffset: function(yearOffset, monthOffset) {
var date = new Date(this.currentDate.getFullYear()+yearOffset, this.currentDate.getMonth()+monthOffset,1);
if (this.invokeEvent("currentdateselect", $(this.id), null, date))
{
@@ -1605,7 +1752,7 @@
this.onUpdate();
}
},
-
+
today: function(noUpdate, noHighlight) {
var now = new Date();
@@ -1847,35 +1994,51 @@
this.doCollapse();
},
+ setEditorPosition: function (element, editor, shadow)
+ {
+ element;
+
+ var dim = Richfaces.Calendar.getOffsetDimensions(element);
+ editor.style.width = shadow.style.width = dim.width + 'px';
+ editor.style.height = shadow.style.height = dim.height + 'px';
+
+ Richfaces.Calendar.clonePosition([editor,shadow], element);
+ },
+
showTimeEditor: function()
{
if (this.timeType==0) return;
- if (!this.isTimeEditorCreated) this.createTimeEditor();
+ if (!this.isEditorCreated) this.createEditor();
+ if (!this.isTimeEditorLayoutCreated) this.createTimeEditorLayout();
- var element = $(this.id);
+ $(this.TIME_EDITOR_LAYOUT_ID).show();
- var te = $(this.TIME_EDITOR_ID);
- var te_shadow = $(this.TIME_EDITOR_SHADOW_ID);
+ var editor = $(this.EDITOR_ID);
+ var editor_shadow = $(this.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';
+ this.setEditorPosition($(this.id), editor, editor_shadow);
- Richfaces.Calendar.clonePosition([te,te_shadow], element);
-
this.updateTimeEditor();
- te_shadow.show();
- te.show();
+ editor_shadow.show();
+ editor.show();
- Element.clonePosition(this.TIME_EDITOR_LAYOUT_SHADOW_ID, this.TIME_EDITOR_LAYOUT_ID, {offsetLeft: 3, offsetTop: 3});
+ Element.clonePosition(this.EDITOR_LAYOUT_SHADOW_ID, this.TIME_EDITOR_LAYOUT_ID, {offsetLeft: 3, offsetTop: 3});
+ this.isEditorVisible = true;
},
+
+ hideEditor: function()
+ {
+ $(this.EDITOR_ID).hide();
+ $(this.EDITOR_SHADOW_ID).hide();
+ if (this.isTimeEditorLayoutCreated) $(this.TIME_EDITOR_LAYOUT_ID).hide();
+ if (this.isDateEditorLayoutCreated) $(this.DATE_EDITOR_LAYOUT_ID).hide();
+ this.isEditorVisible = false;
+ },
hideTimeEditor: function(updateTime)
{
- $(this.TIME_EDITOR_ID).hide();
- $(this.TIME_EDITOR_SHADOW_ID).hide();
-
+ this.hideEditor();
if (updateTime && this.selectedDate)
{
var m = parseInt($(this.id+'TimeMinutes').value,10);
@@ -1897,6 +2060,36 @@
}
if (this.params.popup && !this.showApplyButton && updateTime) this.close(true);
+ },
+
+ showDateEditor: function()
+ {
+ if (!this.isEditorCreated) this.createEditor();
+ if (!this.isDateEditorLayoutCreated) this.createDateEditorLayout();
+ 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);
+
+ editor_shadow.show();
+ editor.show();
+
+ Element.clonePosition(this.EDITOR_LAYOUT_SHADOW_ID, this.DATE_EDITOR_LAYOUT_ID, {offsetLeft: 3, offsetTop: 3});
+
+ this.isEditorVisible = true;
+ },
+
+ hideDateEditor: function(updateCurrentDate)
+ {
+ this.hideEditor();
+ if (updateCurrentDate)
+ {
+ this.changeCurrentDate(this.dateEditorYear, this.dateEditorMonth);
+ }
}
});
@@ -1940,7 +2133,7 @@
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.currentMonthControl = function (context) { return CalendarView.getControl(Richfaces.Calendar.formatDate(context.calendar.getCurrentDate(), "MMMM, yyyy", context.monthLabels, context.monthLabelsShort), CalendarView.toolButtonAttributes, "showDateEditor");};
CalendarView.todayControl = function (context) { return (context.calendar.todayControlMode!='hidden' ? CalendarView.getControl(context.controlLabels.today, CalendarView.toolButtonAttributes, "today") : "");};
CalendarView.selectedDateControl = function (context) { return CalendarView.getSelectedDateControl(context.calendar);};
CalendarView.timeControl = function (context) { return CalendarView.getTimeControl(context.calendar);};
@@ -2018,10 +2211,8 @@
]
)];
-CalendarView.timeEditor = [
+CalendarView.timeEditorLayout = [
- new E('div',{'id': function(context){return context.calendar.TIME_EDITOR_LAYOUT_SHADOW_ID}, 'class': 'rich-calendar-time-layout-shadow'},null),
-
new E('table',{'id': function(context){return context.calendar.TIME_EDITOR_LAYOUT_ID}, 'border': '0', 'cellpadding': '0', 'cellspacing': '0', 'class': 'rich-calendar-time-layout'},
[
new E('tbody',{},
@@ -2081,5 +2272,6 @@
todayControl: CalendarView.todayControl,
closeControl: CalendarView.closeControl,
applyControl: CalendarView.applyControl,
- timeEditorFields: CalendarView.timeEditorFields
+ timeEditorFields: CalendarView.timeEditorFields,
+ timeEditorLayout: CalendarView.timeEditorLayout
});
\ No newline at end of file
More information about the richfaces-svn-commits
mailing list