overlib MDL-19735 Touched up panel replacement of overlib calendar

 * Created delay ContainerEffect and set some nice delays
 * Added set_url calls to calendar

diff --git a/calendar/calendar.js b/calendar/calendar.js
index 5259e121b0af3f8a5681c8553b19726158824ec8..b8d0fef44a118ea48fd14c5b16989bed827a3075 100644 (file)
--- a/calendar/calendar.js
+++ b/calendar/calendar.js
@@ -1,15 +1,212 @@
-function attach_calendar_panel(properties) {
-    YAHOO.namespace("moodle.container");
-    YAHOO.moodle.container[properties.id] = new YAHOO.widget.Panel(properties.id+'_panel', {
-        width:"320px",
+/**
+ * Some important namespaces that we really ought to have.
+ * These just help us contain and organise our JavaScript.
+ */
+YAHOO.namespace("moodle.container");
+YAHOO.namespace("moodle.container.calendarpanels");
+YAHOO.namespace("moodle.container.effects");
+YAHOO.namespace("moodle.calendar")
+YAHOO.moodle.container.calendarpanels = [];
+
+/**
+ * This function adds the YUI animation lib at run time should be for some reason
+ * not already have it.
+ * This is a hack basically until MDL-19935 and should be removed once this issue
+ * has been resolved.
+ */
+YAHOO.util.Event.onDOMReady(function () {
+    var animationlib = document.createElement('script');
+    animationlib.setAttribute('type','text/javascript');
+    animationlib.setAttribute('src',moodle_cfg.wwwroot+'/lib/yui/animation/animation-min.js');
+    document.getElementsByTagName('head')[0].appendChild(animationlib);
+});
+
+/**
+ * This function simply attaches a listener to the date block we want to attach
+ * the panel to. See the note on {@see YAHOO.moodle.calendar.show_calendar_panel} as
+ * to why we don't build the panel here.
+ */
+YAHOO.moodle.calendar.attach_calendar_panel = function(properties) {
+    YAHOO.util.Event.addListener(properties.id, 'mouseover', YAHOO.moodle.calendar.show_calendar_panel, properties);
+}
+
+/**
+ * This method prepares the panel for display the first time. It is important to
+ * note that we need to do this on a show as otherwise a bug in the way in which
+ * YUI constrain to viewport works could cause the browser to force horizonal scroll!
+ *
+ * @param {event} e The event
+ * @param {object} properties As passed in to the call to attach_calendar_event
+ */
+YAHOO.moodle.calendar.show_calendar_panel = function(e, properties) {
+    YAHOO.util.Event.removeListener(properties.id, 'mouseover', YAHOO.moodle.calendar.show_calendar_panel);
+     var panel = new YAHOO.widget.Panel(properties.id+'_panel', {
+        width:"240px",
         visible:false,
         draggable:false,
         close:false,
-        constraintoviewport:true
+        constraintoviewport:true,
+        effect:{effect:YAHOO.moodle.container.effects.DELAY,duration:0.5}
     } );
-    YAHOO.moodle.container[properties.id].setHeader(properties.title);
-    YAHOO.moodle.container[properties.id].setBody(properties.content);
-    YAHOO.moodle.container[properties.id].render(properties.id);
-    YAHOO.util.Event.addListener(properties.id, 'mouseover', YAHOO.moodle.container[properties.id].show, YAHOO.moodle.container[properties.id], true);
-    YAHOO.util.Event.addListener(properties.id, 'mouseout', YAHOO.moodle.container[properties.id].hide, YAHOO.moodle.container[properties.id], true);
+    panel.setHeader(properties.title);
+    panel.setBody(properties.content);
+    panel.render(properties.id);
+    panel.show();
+    panel.data = [];
+    panel.data['x'] = null;
+    panel.data['y'] = null;
+    YAHOO.moodle.container[properties.id] = panel;
+    YAHOO.util.Event.addListener(properties.id, 'mouseover', YAHOO.moodle.calendar.show_panel, properties);
+}
+
+/**
+ * This function calls the show method for the calendar panel
+ * @param {event} e The event
+ * @param {object} properties As passed in to the call to attach_calendar_event
+ */
+YAHOO.moodle.calendar.show_panel = function(e, properties) {
+    YAHOO.util.Event.addListener(document.body, 'mousemove', YAHOO.moodle.calendar.hide_panel, properties);
+    YAHOO.util.Event.removeListener(properties.id, 'mouseover', YAHOO.moodle.calendar.show_panel);
+    YAHOO.moodle.container[properties.id].show(e, YAHOO.moodle.container[properties.id]);
+}
+
+/**
+ * This function calls the hide method for the panel if it is appropriate to do so.
+ * It is important to note that we first check the mouse position of the event to
+ * ensure that the user is not hovering over either the date target or the associated
+ * panel.
+ * Also worth noting is that because the function is called on mouse move we do some
+ * smarts to ensure that the function doesn't execute to often.
+ * @param {event} e The event
+ * @param {object} properties As passed in to the call to attach_calendar_event
+ */
+YAHOO.moodle.calendar.hide_panel = function(e, properties) {
+    YAHOO.util.Event.removeListener(document.body, 'mousemove', YAHOO.moodle.calendar.hide_panel);
+    var callback = function() {
+        if (YAHOO.moodle.calendar.check_if_hiding(e, properties)) {
+            YAHOO.moodle.container[properties.id].hide(e, YAHOO.moodle.container[properties.id]);
+            YAHOO.util.Event.addListener(properties.id, 'mouseover', YAHOO.moodle.calendar.show_panel, properties);
+        } else {
+            YAHOO.util.Event.addListener(document.body, 'mousemove', YAHOO.moodle.calendar.hide_panel, properties);
+        }
+    }
+    setTimeout(callback, 100);
+}
+
+/**
+ * This function actually checks the mouse position against the bounds of the panel
+ * and target elements.
+ * @param {event} e The event
+ * @param {object} properties As passed in to the call to attach_calendar_event
+ */
+YAHOO.moodle.calendar.check_if_hiding = function(e, properties) {
+    if (!YAHOO.moodle.check_bounds(e, YAHOO.moodle.container[properties.id].element, 2) && !YAHOO.moodle.check_bounds(e, document.getElementById(properties.id), 2)) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+/**
+ * This awesome little function takes an event and an element and works out wether
+ * the mouse was over the element when the event was triggered.
+ * You can also supply a fuzz integer which allows you to determine a `safe` distance
+ * from the object before returning true.
+ */
+YAHOO.moodle.check_bounds = function(e, element, fuzz) {
+    if (fuzz === null) fuzz = 0;
+    var m = YAHOO.util.Event.getXY(e);
+    var p = YAHOO.util.Dom.getXY(element);
+    var o = [element.offsetWidth + p[0],element.offsetHeight + p[1]];
+    if ( m[0]>=(p[0]-fuzz) && m[1]>=(p[1]-fuzz) && m[0]<=(o[0]+fuzz) && m[1]<=(o[1]+fuzz) ) {
+        return true;
+    }
+    return false;
+}
+
+/**
+ * Thats right a delay effect !
+ *
+ * This is essentially a remodelling of the YAHOO.widget.ContainerEffect.FADE
+ * with modifications to support delay rather than fade.
+ *
+ * You will notice a couple of yui-effect-fade css classes. This class simply adds
+ * display:none for ie and given this is based of the FADE effect I figured it was
+ * ok to reuse classes.
+ */
+YAHOO.moodle.container.effects.DELAY = function(overlay, duration) {
+    var Easing = YAHOO.util.Easing;
+    var fin = {
+        attributes: null,
+        duration: duration,
+        method: Easing.easeIn
+    };
+    var fout = {
+        attributes: null,
+        duration: duration,
+        method: Easing.easeOut
+    };
+    var delay = new YAHOO.widget.ContainerEffect(overlay, fin, fout, overlay.element);
+
+    delay.handleUnderlayStart = function() {
+        var underlay = this.overlay.underlay;
+        if (underlay && YAHOO.env.ua.ie) {
+            var hasFilters = (underlay.filters && underlay.filters.length > 0);
+            if(hasFilters) {
+                YAHOO.util.Dom.addClass(overlay.element, "yui-effect-fade");
+            }
+        }
+    };
+
+    delay.handleUnderlayComplete = function() {
+        var underlay = this.overlay.underlay;
+        if (underlay && YAHOO.env.ua.ie) {
+            YAHOO.util.Dom.removeClass(overlay.element, "yui-effect-fade");
+        }
+    };
+
+    delay.handleStartAnimateIn = function (type, args, obj) {
+        YAHOO.util.Dom.addClass(obj.overlay.element, "hide-select");
+
+        if (!obj.overlay.underlay) {
+            obj.overlay.cfg.refireEvent("underlay");
+        }
+
+        obj.handleUnderlayStart();
+        obj.overlay._setDomVisibility(true);
+        YAHOO.util.Dom.setStyle(obj.overlay.element, "opacity", 0);
+    };
+
+    delay.handleCompleteAnimateIn = function (type,args,obj) {
+        YAHOO.util.Dom.removeClass(obj.overlay.element, "hide-select");
+        if (obj.overlay.element.style.filter) {
+            obj.overlay.element.style.filter = null;
+        }
+        var visible = function(){
+            YAHOO.util.Dom.setStyle(obj.overlay.element, "opacity", 1);
+        }
+        setTimeout(visible, this.duration*1000);
+        obj.handleUnderlayComplete();
+        obj.overlay.cfg.refireEvent("iframe");
+        obj.animateInCompleteEvent.fire();
+    };
+
+    delay.handleStartAnimateOut = function (type, args, obj) {
+        YAHOO.util.Dom.addClass(obj.overlay.element, "hide-select");
+        obj.handleUnderlayStart();
+    };
+
+    delay.handleCompleteAnimateOut =  function (type, args, obj) {
+        YAHOO.util.Dom.removeClass(obj.overlay.element, "hide-select");
+        if (obj.overlay.element.style.filter) {
+            obj.overlay.element.style.filter = null;
+        }
+        obj.overlay._setDomVisibility(false);
+        obj.handleUnderlayComplete();
+        obj.overlay.cfg.refireEvent("iframe");
+        obj.animateOutCompleteEvent.fire();
+    };
+
+    delay.init();
+    return delay;
 }
\ No newline at end of file

diff --git a/calendar/event.php b/calendar/event.php
index d25491023460b71ce3a285556c952aca51692013..c9089efd7b7eb63c27735759bdf032b24b2ac21f 100644 (file)
--- a/calendar/event.php
+++ b/calendar/event.php
@@ -53,6 +53,15 @@
     $cal_m = optional_param('cal_m', 0, PARAM_INT);
     $cal_d = optional_param('cal_d', 0, PARAM_INT);
 
+    $url = new moodle_url($CFG->wwwroot.'/calendar/event.php', array('action'=>$action));
+    if ($eventid !== 0) $url->param('id', $eventid);
+    if ($eventtype !== 'select') $url->param('type', $eventtype);
+    if ($urlcourse !== 0) $url->param('course', $urlcourse);
+    if ($cal_y !== 0) $url->param('cal_y', $cal_y);
+    if ($cal_m !== 0) $url->param('cal_m', $cal_m);
+    if ($cal_d !== 0) $url->param('cal_d', $cal_d);
+    $PAGE->set_url($url);
+
     if(isguest()) {
         // Guests cannot do anything with events
         redirect(CALENDAR_URL.'view.php?view=upcoming&course='.$urlcourse);
@@ -273,9 +282,12 @@
 
     $link = calendar_get_link_href(CALENDAR_URL.'view.php?view=upcoming&course='.$urlcourse.'&',
                                    $now['mday'], $now['mon'], $now['year']);
+
+    $PAGE->requires->yui_lib('animation');
+    $PAGE->requires->js('calendar/calendar.js');
+
     $PAGE->navbar->add($strcalendar, new moodle_url($link));
     $PAGE->navbar->add($title);
-
     $PAGE->set_title($site->shortname.': '.$strcalendar.': '.$title);
     $PAGE->set_heading($strcalendar);
     $PAGE->set_headingmenu(user_login_string($site));

diff --git a/calendar/lib.php b/calendar/lib.php
index dce38bd0d91a1f55cf0d8d82843d78e5c6cfad42..3b95bacc7c90b3f3768426395e1c54dc6f159d94 100644 (file)
--- a/calendar/lib.php
+++ b/calendar/lib.php
@@ -365,7 +365,7 @@ function calendar_get_popup($is_today, $event_timestart, $popupcontent='') {
     }
     $id = 'calendar_tooltip_'.$popupcount;
     $PAGE->requires->yui_lib('container');
-    $PAGE->requires->js_function_call('attach_calendar_panel', Array(Array('id'=>$id,'title'=>$popupcaption, 'content'=>$popupcontent)));
+    $PAGE->requires->js_function_call('YAHOO.moodle.calendar.attach_calendar_panel', Array(Array('id'=>$id,'title'=>$popupcaption, 'content'=>$popupcontent)));
     $popupcount++;
     return 'id="'.$id.'"';
 }

diff --git a/calendar/view.php b/calendar/view.php
index 8c17594a2f66c0323723349c96c3bccdf536d33c..255e849f6c8f0205dfde5443bf27bba46d1519ed 100644 (file)
--- a/calendar/view.php
+++ b/calendar/view.php
@@ -54,6 +54,24 @@
         redirect($CFG->wwwroot.'/'.$CFG->admin.'/index.php');
     }
 
+    $url = new moodle_url($CFG->wwwroot.'/calendar/view.php');
+    if ($courseid !== 0) {
+        $url->param('course', $courseid);
+    }
+    if ($view !== 'upcoming') {
+        $url->param('view', $view);
+    }
+    if ($day !== 0) {
+        $url->param('cal_d', $day);
+    }
+    if ($mon !== 0) {
+        $url->param('cal_m', $mon);
+    }
+    if ($yr !== 0) {
+        $url->param('cal_y', $yr);
+    }
+    $PAGE->set_url($url);
+
     if ($courseid) {
         require_login($courseid);
     } else if ($CFG->forcelogin) {
@@ -133,14 +151,15 @@
     $strcalendar = get_string('calendar', 'calendar');
     $prefsbutton = calendar_preferences_button();
 
-    $PAGE->requires->js('calendar/calendar.js');
-
     // Print title and header
     $PAGE->set_title("$site->shortname: $strcalendar: $pagetitle");
     $PAGE->set_heading($strcalendar);
     $PAGE->set_headingmenu(user_login_string($site));
     $PAGE->set_button($prefsbutton);
 
+    $PAGE->requires->yui_lib('animation');
+    $PAGE->requires->js('calendar/calendar.js');
+
     echo $OUTPUT->header();
 
     // Layout the whole page as three big columns.