merged navigationNode.php

codebase · May 3, 2011 · e268e33 · e268e33
2 parents 1ca436b + 25d96d1
commit e268e33
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 68 deletions.
diff --git a/modules/mop/MoPCore.js b/modules/mop/MoPCore.js
@@ -73,15 +73,17 @@ String.implement( "encodeUTF8", function(  ){
  		bind - {obj} a scope for the closure (what's "this")
 	    args: Single argument, or an array
 */
-Function.implement({ 
-    bindWithEvent: function(bind, args){ 
-        var self = this; 
-        if (args != null) args = Array.from(args); 
-        return function(event){ 
-            return self.apply( bind, (args == null) ? arguments : event.concat( args ) );
-        }
-    }
-});
+
+// Function.implement({
+//  bindWithEvent: function( bind, args ){
+//      console.log( "bindWithEvent", bind, args );
+//          var self = this;
+//      if ( args != null ) args = Array.from( args );
+//      return function( event ){
+//              return self.apply( bind, (args == null) ? arguments : [event].concat(args));
+//      };
+//      }
+// });
 
 /*
 	Section: MoP Package

diff --git a/modules/mopcms/views/js/mop_cms.js b/modules/mopcms/views/js/mop_cms.js
@@ -37,17 +37,17 @@ mop.modules.CMS = new Class({
 		return "[ object, mop.modules.CMS ]";
 	},
 
-	loadPage: function ( pageId ){
+    displayNode: function( nodeId ){
+        console.log( this.toString(), "displayNode", nodeId );
 //		console.log( this.toString(), "loadPage", pageId );
-		this.pageIdToLoad = pageId;
 		this.clearPage();
 		this.pageContent.spin();
-		var url = mop.util.getAppURL() + "ajax/html/cms/getPage/" + pageId;
+		var url = mop.util.getAppURL() + "ajax/html/cms/getPage/" + nodeId;
 		mop.util.JSONSend( url, null, { onSuccess: this.onPageLoaded.bind( this ) } );
 		console.log( "loadPage", url );
- 		mop.util.setObjectId( pageId );
-	},
-	
+ 		mop.util.setObjectId( nodeId );
+    },
+    
 	clearPage: function(){
 	    console.log( "clearPage" );
 		this.destroyChildModules( this.pageContent );

diff --git a/modules/navigation/views/css/navigation.css b/modules/navigation/views/css/navigation.css
@@ -1,13 +1,17 @@
 /*Navigation*/
 
 #navigation{
-	overflow: auto;
 	overflow:hidden;
 	border-top:1px #ccc solid;
 	border-bottom:1px #ccc solid;
 	height:24em;
-	background: #f8f8f8 url( images/nav_bg.gif );
-	clear: both;
+	background-image: url( images/nav_bg.gif );
+}
+
+#navigation .grid_2,
+#navigation .grid_3,
+#navigation .grid_4{
+    margin: 0 0 0 0;
 }
 
 ul.breadCrumb{
@@ -41,6 +45,12 @@ ul.breadCrumb li a:hover{
     height: 100%;
 }
 
+#navigation ul.tier{
+	overflow: auto;
+	height: 22em;
+	background: #f8f8f8 url( images/nav_bg.gif ) repeat-y;
+}
+
 #navigation ul.nodes{
     list-style: none;
     margin: 0;
@@ -55,6 +65,7 @@ ul.breadCrumb li a:hover{
     border-bottom:1px #cdf solid;    
 }
 
+
 #navigation .node.active,
 #navigation .node:hover,
 #navigation .node:hover h5,
@@ -70,6 +81,9 @@ ul.breadCrumb li a:hover{
 	margin: 0 0 0 0;
 	padding:.5em 0 .5em 2.5em;
 	float: left;
+	background-image: url( images/icon_leaf.png );
+	background-position: 1em .5em;
+	background-repeat: no-repeat;	
 }
 
 
@@ -80,36 +94,13 @@ ul.breadCrumb li a:hover{
 
 #navigation a.icon{
     text-indent: -3000px;
-}
-
-
-#navigation .grid_2,
-#navigation .grid_3,
-#navigation .grid_4{
-    margin: 0 0 0 0;
-}
-
-
-#navigation ul.tier{
-	overflow: auto;
-	height: 22em;
-	background: #f8f8f8 url( images/nav_bg.gif ) repeat-y;
-}
-
-#navigation  a.icon{
 	display:block;
 	float:left;
 	width: 12px;
 	height: 12px;
 	margin:.5em .25em;
 }
 
-/* Default is leaf */
-#navigation .node h5{
-	background-image: url( images/icon_leaf.png );
-	background-position: 1em .5em;
-	background-repeat: no-repeat;
-}
 #navigation .node.active h5,
 #navigation .node:hover h5{
 	background-image: url( images/icon_leaf_hover.png );

diff --git a/modules/navigation/views/js/navigation.js b/modules/navigation/views/js/navigation.js
@@ -83,61 +83,70 @@ mop.modules.navigation.Tier = new Class({
 
 	render: function( data, html ){
         // focus/blur events are good for keyboard activation/indication
-        this.element.set( 'html', html );
         console.log( this.toString(), "render", this.element, data, html );
+        this.element.set( 'html', html );
 	    this.nodes = this.element.getElements(".node");
 	    this.nodes.each( function( aNodeElement, index ){
-	        if( aNodeElement.getElement(".togglePublish") ) aNodeElement.getElement(".togglePublish").store( "nodeElement", aNodeElement );
-	        if( aNodeElement.getElement(".remove") ) aNodeElement.getElement(".removeNode").store( "nodeElement", aNodeElement );
-	    });
-	    this.element.addEvent( "focus:relay(.node)", this.indicateNode.bindWithEvent( this ) );
-	    this.element.addEvent( "blur:relay(.node)", this.deindicateNode.bindWithEvent( this ) );
-	    this.element.addEvent( "click:relay(.node)", this.onNodeClicked.bindWithEvent( this ) );
-	    this.element.addEvent( "click:relay(.node .togglePublish)", this.onTogglePublishClicked.bindWithEvent( this ) );
-	    this.element.addEvent( "click:relay(.node .remove)", this.onRemoveNodeClicked.bindWithEvent( this ) );
-
+//    	    aNodeElement.addEvent( "focus", this.indicateNode.bindWithEvent( this, aNodeElement ) );
+  //  	    aNodeElement.addEvent( "blur", this.deindicateNode.bindWithEvent( this, aNodeElement ) );
+    	    aNodeElement.addEvent( "click", this.onNodeClicked.bindWithEvent( this, aNodeElement ) );
+	        var togglePublishElement = aNodeElement.getElement(".togglePublish");
+	        if( togglePublishElement ){
+        	    togglePublishElement.addEvent( "click", this.onTogglePublishClicked.bindWithEvent( this, aNodeElement ) );
+	        }
+	        var removeNodeElement = aNodeElement.getElement(".removeNode");
+	        if( removeNodeElement ){
+        	    removeNodeElement.addEvent( "click", this.onRemoveNodeClicked.bindWithEvent( this, aNodeElement ) );
+	        }
+	    }, this );
 	},
 
+	indicateNode: function( nodeElement ){ nodeElement.addClass( "active"); },
+
+	deindicateNode: function( nodeElement ){ nodeElement.removeClass("active"); },
+
 	/**
 	 * Section: Event Handlers
 	 */
-	indicateNode: function( e, clickedElement ){
+
+	onMouseEnter: function( e, nodeElement ){
 	    mop.util.stopEvent( e );
-	    e.target.addClass("active");
+	    this.indicateNode( aNodeElement );
 	},
 
-	deindicateNode: function( e, clickedElement ){
+	onMouseLeave: function( e, nodeElement ){
 	    mop.util.stopEvent( e );
-	    if( this.activeNode != e.target ) e.target.removeClass("active");	    
+	    if( this.activeNode != nodeElement ) this.deindicateNode( nodeElement );
 	},
-
-	onNodeClicked: function( e, clickedElement ){
+		
+	onNodeClicked: function( e, nodeElement ){
 	    mop.util.stopEvent( e );
 	    console.log( "onNodeClicked" );
-	    this.displayNode( this.getNodeIdFromElement( clickedElement ) );  
+	    if( this.activeNode ) this.deindicateNode( this.activeNode );
+        this.activeNode = nodeElement;        
+	    this.indicateNode( nodeElement );
+	    this.displayNode( this.getNodeIdFromElement( nodeElement ) );  
 	},
 
-    onRemoveNodeClicked: function( e, clickedElement ){
+    onRemoveNodeClicked: function( e, nodeElement ){
 	    console.log( "onRemoveNodeClicked" );
 	    mop.util.stopEvent( e );
-        var nodeId = this.getNodeIdFromElement( clickedElement.retrieve("nodeElement") );
+        var nodeId = this.getNodeIdFromElement( nodeElement );
         clickedElement.retrieve("nodeElement").destroy();
         this.removeObject( nodeId );
     },
 
-    onTogglePublishClicked: function( e, clickedElement ){
-	    console.log( "onTogglePublishClicked" );
+    onTogglePublishClicked: function( e, nodeElement ){
+        mop.util.stopEvent( e );
+	    console.log( "onTogglePublishClicked", e, nodeElement );
     },
 
 	displayNode: function( nodeId ){
-	    if( this.activeNode ) this.activeNode.removeClass( "active" );
-	    this.indicateNode( e );
-	    this.activeNode = e.target;
-	    indicateNode( e );
-	    this.marshal.displayNode( this.getNodeIdFromElement( e.target ) );
+	    this.marshal.displayNode( nodeId );
 	},
 
 	getNodeIdFromElement: function( anElement ){
+	    console.log( "getNodeIdFromElement", anElement );
 	    return anElement.get("id").split( "_" )[1];
 	},
 

diff --git a/modules/navigation/views/navigationNode.php b/modules/navigation/views/navigationNode.php
@@ -1,4 +1,4 @@
-<li class="node nodeType contentType clearFix" id="node_<?=$content['id'];?>">
+<li class="node <?=$content['nodeType'];?> <?=$content['contentType'];?> clearFix" id="node_<?=$content['id'];?>">
 	<h5><?=$content['title'];?></h5>
 	<div class="methods">
 		<a class="icon togglePublish published" href="#" title="unpublish NodeTitle">publish</a>