Fixed problems with the sizing of the sidemenu, as well as the animation problem (an issue caused by the lack of clear parent container sizing, since the parent was just a table cell). This is actually much cleaner, allowing us to ignore #sidecolumn in the sidemenu.css file, and simplifies jQuery accordion work as well (thus no jitter). Added a mechanism to dump javascript in a consistent place, when generated from elements included by the layout (namely, our sidemenu element). Finally, added a new event called hoverintent, since the mouseover feature works very poorly with the accordion module when animation is in use.

git-svn-id: file:///svn-source/pmgr/branches/pre_0.1_work_20090819@774 97e9348a-65ac-dc4b-aefc-98561f571b83

site/views/elements/sidemenu.ctp

@@ -11,6 +11,12 @@
 // REVISIT <AP>: 20090823
 //  Add way to slide the entire menu off the page
 
+// The sidemenu-container is necessary to define the
+// bounds as the parent of the sidemenu div, which will
+// be heavily manipulated by the accordion module.  If
+// we don't have good control over the parent, the
+// accordion will get confused and behave poorly.
+echo('<DIV ID="sidemenu-container">' . "\n");
 echo('<DIV ID="sidemenu">' . "\n");
 
 $section = 0;
@@ -53,22 +59,25 @@ foreach ($menu['areas'] AS $area_name => $area) {
   }
 }
 
-echo('</DIV>' . "\n");
-//pr(compact('section', 'active_section'));
+echo('</DIV>' . "\n"); // End #sidemenu
+echo('</DIV>' . "\n"); // End #sidemenu-container
 
-?>
-
-<script type="text/javascript"><!--
+// Uses both hoverintent, which is a more user friendly mechanism
+// than mouseover, as well as click.  This provides 1) a workable
+// solution for those browsers that don't use pointers, such as
+// a touchscreen, and 2) a means to open the menu if the animation
+// was running while the user moved the pointer to a new menu area.
+$javascript->codeBlock(
+<<<JSCB
 jQuery(document).ready(function(){ 
-    jQuery('#sidemenu').accordion
-      ({  fillSpace : true,
-	  event : 'mouseover',
-	  <?php if (isset($active_section)) echo "active : $active_section,\n"; ?>
-	  <?php /* REVISIT <AP>: 20090823
-		 * Prevent animation until we can figure out why we
-		 * get animation width jitter */ ?>
-	  animated : false,
-      });
-});
-
---></script>
+  jQuery("#sidemenu").accordion
+    ({  fillSpace : true,
+	event : "click hoverintent",
+	animated : "bounceslide",
+JSCB
+. (isset($active_section) ? "\tactive : $active_section,\n" : '') .
+<<<JSCB
+	});
+  });
+JSCB
+, array('inline' => false));

site/views/layouts/default.ctp

@@ -30,6 +30,17 @@
 		Property Manager: <?php echo $title_for_layout; ?>
 	</title>
 	<?php
+		// Reset the __scripts variable, which has already been dumped to
+		// $scripts_for_layout.  Elements/Helpers used in the layout may
+		// also have some scripts to add.  They cannot be put into the head
+		// but we can at least put them into a relatively benign place, so
+		// scripts don't have to be dumped inline in possibly awkward spots.
+		// Oh, and yes... I know we're not supposed to be using this variable
+		// directly, and will possibly get burned someday.  Oh well, Cake
+		// hasn't left us a lot of choice, besides writing our own scripts
+		// mechanism _additional_ to what Cake has provided :-/
+		$this->__scripts = array();
+
 		echo $html->meta('icon') . "\n";
 		echo $html->css('cake.generic') . "\n";
 		echo $html->css('layout') . "\n";
@@ -42,6 +53,7 @@
 		//echo $html->css('themes/dotluv/ui.all') . "\n";
 		echo $html->css('themes/start/ui.all') . "\n";
 		echo $javascript->link('jquery.form') . "\n";
+		echo $javascript->link('pmgr.jquery') . "\n";
 		echo $javascript->link('pmgr') . "\n";
 		echo $scripts_for_layout . "\n";
 	?>
@@ -89,5 +101,7 @@
 <?php echo $cakeDebug; ?>
 <?php /* pr($this); */ ?>
 
+<?php echo implode("\n", $this->__scripts) . "\n"; ?>
+
 </body>
 </html>

site/webroot/css/layout.css

@@ -15,6 +15,7 @@ table#layout   { width: 100% }
 td#sidecolumn  ,
 td#pagecolumn  { vertical-align: top; }
 td#pagecolumn  { padding-left: 4mm; }
+td#sidecolumn  { width: 1% }
 
 
 /************************************************************

site/webroot/css/sidemenu.css

@@ -3,8 +3,7 @@
  * Side Menu Layout
  */
 
-td#sidecolumn  { width: 12em; text-align: left; }
-#sidemenu      { height: 20em; }
+#sidemenu-container  { width: 12em; height: 20em; }
 
 
 /************************************************************

site/webroot/js/pmgr.jquery.js

@@ -0,0 +1,57 @@
+/* ******************************************************************************
+ * hoverintent
+ *
+ * Works like mouseover, but instead of firing immediately when an object
+ * is mouseover'ed, it tries to determine when the user actually _intends_
+ * to have the pointer hover over the object.  In other words, it's a lot
+ * like mouseover with a delay before firing, and if the pointer moves
+ * before hoverintent can fire, it doesn't fire at all.
+ *
+ * Found from jQuery UI Ticket #3614
+ * http://dev.jqueryui.com/ticket/3614
+ */
+
+var cfg = ($.hoverintent = {
+	sensitivity: 7,
+	interval: 100
+});
+	
+$.event.special.hoverintent = {
+	setup: function() {
+		$(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
+	},
+	teardown: function() {
+		$(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
+	},
+	handler: function(event) {
+		event.type = "hoverintent";
+		var self = this,
+			args = arguments,
+			target = $(event.target),
+			cX, cY, pX, pY;
+			
+
+		function track(event) {
+			cX = event.pageX;
+			cY = event.pageY;
+		};
+		pX = event.pageX;
+		pY = event.pageY;
+		function clear() {
+			target.unbind("mousemove", track).unbind("mouseout", arguments.callee);
+			clearTimeout(timeout);
+		}
+		function handler() {
+			if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
+				clear();
+				jQuery.event.handle.apply(self, args);
+			} else {
+				pX = cX; pY = cY;
+				timeout = setTimeout(handler, cfg.interval);
+			}
+		}
+		var timeout = setTimeout(handler, cfg.interval);
+		target.mousemove(track).mouseout(clear);
+		return true;
+	}
+};