Implement [ #314085 ] RFE: Support year navigation in calendar

orbeon · Jul 24, 2009 · bf9b3fa · bf9b3fa
1 parent c87e82c
commit bf9b3fa
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 0 deletions.
diff --git a/src/resources-packaged/config/theme/xforms.css b/src/resources-packaged/config/theme/xforms.css
@@ -246,6 +246,45 @@ a.xforms-readonly { color: gray; cursor: default }
         { border-color: orange }
 */
 
+#orbeon-calendar-div .yui-calendar .calheader {
+    padding-top: .3em;
+}
+#orbeon-calendar-div .yui-calendar .calnavleft {
+    top: 7px;
+}
+#orbeon-calendar-div .yui-calendar .calyearleft {
+    overflow: hidden;
+	position: absolute;
+	text-indent: -10000em;
+    z-index: 1;
+    background: transparent url(../../ops/images/xforms/calendar-left-double.png) no-repeat scroll;
+    bottom:0;
+	cursor: pointer;
+    height: 15px;
+    left: -10px;
+    margin-left: 0.4em;
+	top: -7px;
+	width: 25px;
+}
+#orbeon-calendar-div .yui-calendar .calnavright {
+    top: 7px;
+}
+#orbeon-calendar-div .yui-calendar .calyearright {
+    overflow: hidden;
+	position: absolute;
+	text-indent: -10000em;
+    z-index: 1;
+    background: transparent url(../../ops/images/xforms/calendar-right-double.png) no-repeat scroll;
+    bottom:0;
+	cursor: pointer;
+    height: 15px;
+    right: -10px;
+    margin-right: 0.4em;
+	top: -7px;
+	width: 25px;
+}
+
+
 /* ***** Repeats **************************************************************************************************** */
 
 .xforms-repeat-selected-item-1 {

diff --git a/src/resources-packaged/ops/images/xforms/calendar-left-double.png b/src/resources-packaged/ops/images/xforms/calendar-left-double.png
diff --git a/src/resources-packaged/ops/images/xforms/calendar-right-double.png b/src/resources-packaged/ops/images/xforms/calendar-right-double.png
diff --git a/src/resources-packaged/ops/javascript/xforms.js b/src/resources-packaged/ops/javascript/xforms.js
@@ -3454,6 +3454,43 @@ ORBEON.widgets.YUICalendar = function() {
                 // Listeners on calendar events
                 yuiCalendar.renderEvent.subscribe(setupListeners, yuiCalendar, true);
                 yuiCalendar.selectEvent.subscribe(dateSelected, yuiCalendar, true);
+
+                // Listener on render event to add our year navigator
+                window.yuiCalendar = yuiCalendar;
+                yuiCalendar.renderEvent.subscribe(function() {
+                    // Add "previous year" link
+                    var monthLeft = YAHOO.util.Dom.getElementsByClassName("calnavleft", null, calendarDiv)[0];
+                    var yearLeft = document.createElement("a");
+                    yearLeft.innerHTML = "Previous Year";
+                    yearLeft.href = "#";
+                    YAHOO.util.Dom.addClass(yearLeft, "calyearleft");
+                    YAHOO.util.Dom.insertBefore(yearLeft, monthLeft);
+                    YAHOO.util.Event.addListener(yearLeft, "click", function(event) {
+                        YAHOO.util.Event.preventDefault(event);
+                        // See comment in calendar.js doPreviousMonthNav() regarding the setTimeout()
+                        setTimeout(function() {
+                            yuiCalendar.previousYear();
+                            var newYearLeft = YAHOO.util.Dom.getElementsByClassName("calyearleft", "a", calendarDiv);
+                            if (newYearLeft && newYearLeft[0]) newYearLeft[0].focus();
+                        }, 0);
+                    });
+                    // Add "following year" link
+                    var monthRight = YAHOO.util.Dom.getElementsByClassName("calnavright", null, calendarDiv)[0];
+                    var yearRight = document.createElement("a");
+                    yearRight.innerHTML = "Next Year";
+                    yearRight.href = "#";
+                    YAHOO.util.Dom.addClass(yearRight, "calyearright");
+                    YAHOO.util.Dom.insertBefore(yearRight, monthRight);
+                    YAHOO.util.Event.addListener(yearRight, "click", function(event) {
+                        YAHOO.util.Event.preventDefault(event);
+                        // See comment in calendar.js doPreviousMonthNav() regarding the setTimeout()
+                        setTimeout(function() {
+                            yuiCalendar.nextYear();
+                            var newYearRight = YAHOO.util.Dom.getElementsByClassName("calyearright", "a", calendarDiv);
+                            if (newYearRight && newYearRight[0]) newYearRight[0].focus();
+                        }, 0);
+                    });
+                });
             }
 
             // Get language from html/@lang