Author: pyaschenko Date: 2007-07-25 10:24:35 -0400 (Wed, 25 Jul 2007) New Revision: 1846 Modified: trunk/sandbox/samples/calendar-sample/src/main/webapp/pages/Calendar.jsp trunk/sandbox/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js Log: 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-25 14:18:13 UTC (rev 1845) +++ trunk/sandbox/samples/calendar-sample/src/main/webapp/pages/Calendar.jsp 2007-07-25 14:24:35 UTC (rev 1846) @@ -42,12 +42,12 @@ <f:validator validatorId="org.richfaces.CalendarValidator" /> <h:panelGrid columns="2"> - <f:verbatim><p style="padding: 10px;" class="largeText">{day}</p></f:verbatim> - <h:panelGrid> + <f:verbatim><p style="padding: 2px;" <%-- class="largeText"--%>>{day}</p></f:verbatim> + <%-- h:panelGrid> <h:outputText styleClass="smallText" value="{data.enLabel}" /> <h:outputText styleClass="smallText" value="{data.frLabel}" /> <h:outputText styleClass="smallText" value="{data.deLabel}" /> - </h:panelGrid> + </h:panelGrid--%> </h:panelGrid> </calendar:calendar> 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-25 14:18:13 UTC (rev 1845) +++ trunk/sandbox/ui/calendar/src/main/resources/org/richfaces/renderkit/html/scripts/calendar.js 2007-07-25 14:24:35 UTC (rev 1846) @@ -6,36 +6,106 @@ Richfaces.Calendar={}; Richfaces.Calendar.setElementPosition = function(element, baseElement, jointPoint, direction, offset) { + // parameters: + // jointPoint: {x:,y:} or ('left-top','right-top','left-bottom','right-bottom') + // direction: ('left-top','right-top','left-bottom','right-bottom', 'auto') + 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 windowRect = Richfaces.Calendar.getWindowViewport(); var baseOffset = Position.cumulativeOffset(baseElement); - // jointPoint Correction - var ox=0; - var oy=0; - if (jointPoint) + // jointPoint + var ox=baseOffset[0]; + var oy=baseOffset[1]; + var re = /^(top|bottom)-(left|right)$/; + var match; + + if (typeof jointPoint=='object') {ox = jointPoint.x; oy=jointPoint.y} + else if ( jointPoint && (match=jointPoint.toLowerCase().match(re)) ) { - var jp = jointPoint.toLowerCase().split('-'); - if (jp[0]=='bottom') oy=baseElementDim.height; - if (jp[1]=='right') ox=baseElementDim.width; + if (match[2]=='right') ox+=baseElementDim.width; + if (match[1]=='bottom') oy+=baseElementDim.height; + } else + { + // ??? auto } - // direction Correction - if (direction) + // direction + if (direction && (match=direction.toLowerCase().match(re)) ) { var d = direction.toLowerCase().split('-'); - if (d[0]=='top') oy-=elementDim.height; - if (d[1]=='left') ox-=elementDim.width; - } + if (match[2]=='left') ox-=elementDim.width; + if (match[1]=='top') oy-=elementDim.height; + } else + { + // auto + var theBest = {square:0}; + // jointPoint: right-bottom, direction: left-bottom + var rect = {right: baseOffset[0] + baseElementDim.width, top: baseOffset[1] + baseElementDim.height}; + rect.left = rect.right - elementDim.width; + rect.bottom = rect.top + elementDim.height; + ox = rect.left; oy = rect.top; + var s = Richfaces.Calendar.checkCollision(rect, windowRect); + if (s!=0) + { + if (ox>=0 && oy>=0 && theBest.square<s) theBest = {x:ox, y:oy, square:s}; + // jointPoint: right-top, direction: left-top + rect = {right: baseOffset[0] + baseElementDim.width, bottom: baseOffset[1]}; + rect.left = rect.right - elementDim.width; + rect.top = rect.bottom - elementDim.height; + ox = rect.left; oy = rect.top; + s = Richfaces.Calendar.checkCollision(rect, windowRect); + if (s!=0) + { + if (ox>=0 && oy>=0 && theBest.square<s) theBest = {x:ox, y:oy, square:s}; + // jointPoint: left-bottom, direction: right-bottom + rect = {left: baseOffset[0], top: baseOffset[1] + baseElementDim.height}; + rect.right = rect.left + elementDim.width; + rect.bottom = rect.top + elementDim.height; + ox = rect.left; oy = rect.top; + s = Richfaces.Calendar.checkCollision(rect, windowRect); + if (s!=0) + { + if (ox>=0 && oy>=0 && theBest.square<s) theBest = {x:ox, y:oy, square:s}; + // jointPoint: left-top, direction: right-top + rect = {left: baseOffset[0], bottom: baseOffset[1]}; + rect.right = rect.left + elementDim.width; + rect.top = rect.bottom - elementDim.height; + ox = rect.left; oy = rect.top; + s = Richfaces.Calendar.checkCollision(rect, windowRect); + if (s!=0) + { + // the best way selection + if (ox<0 || oy<0 || theBest.square>s) {ox=theBest.x; oy=theBest.y} + } + } + } + + } + } - element.style.left = baseOffset[0] + ox + 'px'; - element.style.top = baseOffset[1] + oy + 'px'; + element.style.left = ox + 'px'; + element.style.top = oy + 'px'; +} + +Richfaces.Calendar.checkCollision = function(elementRect, windowRect, windowOffset) +{ + if (elementRect.left >= windowRect.left && + elementRect.top >= windowRect.top && + elementRect.right <= windowRect.right && + elementRect.bottom <= windowRect.bottom) + return 0; + var rect = {left: (elementRect.left>windowRect.left ? elementRect.left : windowRect.left), + top: (elementRect.top>windowRect.top ? elementRect.top : windowRect.top), + right: (elementRect.right<windowRect.right ? elementRect.right : windowRect.right), + bottom: (elementRect.bottom<windowRect.bottom ? elementRect.bottom : windowRect.bottom)}; + return (rect.right-rect.left)* (rect.bottom-rect.top); } + Richfaces.Calendar.getWindowDimensions = function() { var w = self.innerWidth || document.documentElement.clientWidth @@ -60,6 +130,12 @@ return {left:dx, top: dy}; } +Richfaces.Calendar.getWindowViewport = function() { + var windowDim = Richfaces.Calendar.getWindowDimensions(); + var windowOffset = Richfaces.Calendar.getWindowScrollOffset(); + return {left:windowOffset.left, top:windowOffset.top, right: windowDim.width+windowOffset.left, bottom: windowDim.height+windowOffset.top}; +} + /*Richfaces.Calendar.getPageDimensions = function() { var x,y; var test1 = document.body.scrollHeight; @@ -257,8 +333,8 @@ this.daysData = {startDate:null, days:[]}; this.days = []; - var htmlTextHeader = '<input id="'+this.id+'InputSelectedDate" name="'+this.id+'InputSelectedDate" type="hidden" value="'+this.getSelectedDateString(this.params.datePattern)+'"/>\n' + - '<input id="'+this.id+'InputCurrentDate" name="'+this.id+'InputCurrentDate" type="hidden" value="'+this.getCurrentDate().format("MM/y")+'"/>\n' + + var htmlTextHeader = '<input id="'+this.id+'InputSelectedDate" name="'+this.id+'InputSelectedDate" type="hidden" style="display:none" value="'+this.getSelectedDateString(this.params.datePattern)+'"/>\n' + + '<input id="'+this.id+'InputCurrentDate" name="'+this.id+'InputCurrentDate" type="hidden" style="display:none" value="'+this.getCurrentDate().format("MM/y")+'"/>\n' + '<table border="0" cellpadding="0" cellspacing="0" class="calendar_exterior"><tbody>\n'; var colspan = (this.params.showWeeksBar ? "8" : "7"); var htmlHeaderOptional = (this.params.headerOptionalMarkup) ? '<tr><td class="calendar_header" colspan="'+colspan+'" id="'+this.id+'HeaderOptional"></td></tr>' : ''; @@ -276,8 +352,8 @@ { e.style.display='none'; e.style.position = 'absolute'; - e.style.left="0px"; - e.style.top="0px"; + //e.style.left="0px"; + //e.style.top="0px"; this.isVisible = false; } } @@ -353,7 +429,7 @@ var base = $(this.POPUP_ID); var e = $(this.id); - Richfaces.Calendar.setElementPosition(e, base, this.params.jointPoint, this.params.direction); + Richfaces.Calendar.setElementPosition(e, base, this.params.jointPoint, "");//this.params.direction); Element.show(this.id); this.isVisible = true;