7 files changed, 47 insertions, 16 deletions
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css
index 6a458cc7..d8c212e8 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.css
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -18,14 +18,15 @@
    width: 100%;
 }
 .treeRoot .branch .branch-label {
-    border-bottom: 1px solid #505050;
-    cursor: pointer;
-    padding: 3px 0 4px;
    background-repeat: no-repeat;
    background-position: 3px 2px;
-    box-shadow: 0 0 0 0 rgba(0,0,0,0);
+    border-bottom: 1px solid #505050;
-    font-weight: bold;
    box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+    color: #FFF;
+    cursor: pointer;
+    font-weight: bold;
+    padding: 3px 0 4px;
+    text-shadow: 1px 1px 0 #000;
 }
 /* First Level */
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.html b/js/components/treeview/ninja-branch.reel/ninja-branch.html
index 4d557a94..13f1c575 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.html
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.html
@@ -110,7 +110,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
            "name": "Repetition",
            "properties": {
                "element": { "#": "branchList" },
-                "contentController": {"@": "arrayController" }
+                "contentController": {"@": "arrayController" },
+                "selectionEnabled": true
            }
        },
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.js b/js/components/treeview/ninja-branch.reel/ninja-branch.js
index 6b9ebb10..0d1a1d0e 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.js
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.js
@@ -5,7 +5,6 @@
 </copyright> */
 var Montage = require("montage").Montage,
-    Component = require("montage/ui/component").Component,
    TreeNode = require("js/components/treeview/tree-node").TreeNode;
 var Branch = exports.Branch = Montage.create(TreeNode, {
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
index b2f427b5..085b11e0 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
@@ -19,6 +19,8 @@
 /* Second level */
 .branch .branch .leaf-label {
    background-position: 25px center;
+    box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+    color: #FFF;
    padding-left: 45px;
 }
 /* Third level */
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.html b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
index bd8e8acd..310274bc 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
@@ -37,7 +37,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </head>
 <body>
    <div id="leaf" class="leaf">
-        <div id="label" class="leaf-label"></div>
+        <div id="label" class="leaf-label" draggable="true"></div>
    </div>
 </body>
 </html>
 \ No newline at end of file
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
index bd566b26..0b7a171e 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
@@ -5,7 +5,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 var Montage   = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
    TreeNode = require("js/components/treeview/tree-node").TreeNode;
 exports.Leaf = Montage.create(TreeNode, {
@@ -14,19 +13,38 @@ exports.Leaf = Montage.create(TreeNode, {
    },
    templateDidLoad : {
        value: function() {
-            this.needsDraw = true;
+            var event = this.treeView.activationEvent;
+            ///// Re-set the activation event
+            if(event && event !== this.activationEvent) {
+                this.delegateEventMap[event] = this.delegateEventMap[this.activationEvent];
+                delete this.delegateEventMap[this.activationEvent];
+                this.activationEvent = this.treeView.activationEvent;
+            }
        }
    },
    prepareForDraw: {
        value : function() {
-            this.activationEvent = this.activationEvent || 'click';
+            var el = this.label._element;
-            this.label._element.addEventListener(this.activationEvent, this.handleNodeActivation.bind(this), false);
+            Object.keys(this.delegateEventMap).forEach(function(event) {
+                el.addEventListener(event, this, false);
+            }, this);
        }
    },
-    handleNodeActivation: {
+    handleEvent : {
        value: function(e) {
-            console.log(this.sourceObject);
+            var delegateMethod = this.delegateEventMap[e._event.type];
-            this.treeView.contentController.delegate.applyPresetSelection(this.sourceObject);
+            this.callDelegateMethod(delegateMethod);
+        }
+    },
+    callDelegateMethod : {
+        value: function(methodName) {
+            var delegate = this.treeView.contentController.delegate;
+            if(delegate && typeof delegate[methodName] === 'function') {
+                delegate[methodName](this.sourceObject);
+            }
        }
    },
    draw : {
@@ -35,6 +53,16 @@ exports.Leaf = Montage.create(TreeNode, {
                this._labelText = this.sourceObject[this.labelKey];
            }
        }
+    },
+    activationEvent : {
+        value : 'click'
+    },
+    delegateEventMap : {
+        value: {
+            'click'     : 'handleNodeActivation',
+            'dragstart' : 'handleDragStart',
+            'dragend'   : 'handleDragEnd'
+        }
    }
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
index d70b016c..4f9e6a72 100644
--- a/js/components/treeview/treeview.reel/treeview.html
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -26,7 +26,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                "name" : "Branch"
            },
            "defaultLeaf" : {
-                "module" : "js/components/treeview/presets-leaf.reel",
+                "module" : "js/components/treeview/leaf.reel",
                "name" : "Leaf"
            },
            "scrollview": {

diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css index 6a458cc7..d8c212e8 100644 --- a/js/components/treeview/ninja-branch.reel/ninja-branch.css +++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -18,14 +18,15 @@
18	width: 100%;	18	width: 100%;
19	}	19	}
20	.treeRoot .branch .branch-label {	20	.treeRoot .branch .branch-label {
21	border-bottom: 1px solid #505050;
22	cursor: pointer;
23	padding: 3px 0 4px;
24	background-repeat: no-repeat;	21	background-repeat: no-repeat;
25	background-position: 3px 2px;	22	background-position: 3px 2px;
26	box-shadow: 0 0 0 0 rgba(0,0,0,0);	23	border-bottom: 1px solid #505050;
27	font-weight: bold;
28	box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);	24	box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
		25	color: #FFF;
		26	cursor: pointer;
		27	font-weight: bold;
		28	padding: 3px 0 4px;
		29	text-shadow: 1px 1px 0 #000;
29	}	30	}
30		31
31	/* First Level */	32	/* First Level */


diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.html b/js/components/treeview/ninja-branch.reel/ninja-branch.html index 4d557a94..13f1c575 100644 --- a/js/components/treeview/ninja-branch.reel/ninja-branch.html +++ b/js/components/treeview/ninja-branch.reel/ninja-branch.html
@@ -110,7 +110,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
110	"name": "Repetition",	110	"name": "Repetition",
111	"properties": {	111	"properties": {
112	"element": { "#": "branchList" },	112	"element": { "#": "branchList" },
113	"contentController": {"@": "arrayController" }	113	"contentController": {"@": "arrayController" },
		114	"selectionEnabled": true
114	}	115	}
115	},	116	},
116		117


diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.js b/js/components/treeview/ninja-branch.reel/ninja-branch.js index 6b9ebb10..0d1a1d0e 100644 --- a/js/components/treeview/ninja-branch.reel/ninja-branch.js +++ b/js/components/treeview/ninja-branch.reel/ninja-branch.js
@@ -5,7 +5,6 @@
5	</copyright> */	5	</copyright> */
6		6
7	var Montage = require("montage").Montage,	7	var Montage = require("montage").Montage,
8	Component = require("montage/ui/component").Component,
9	TreeNode = require("js/components/treeview/tree-node").TreeNode;	8	TreeNode = require("js/components/treeview/tree-node").TreeNode;
10		9
11	var Branch = exports.Branch = Montage.create(TreeNode, {	10	var Branch = exports.Branch = Montage.create(TreeNode, {


diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css index b2f427b5..085b11e0 100644 --- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css +++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
@@ -19,6 +19,8 @@
19	/* Second level */	19	/* Second level */
20	.branch .branch .leaf-label {	20	.branch .branch .leaf-label {
21	background-position: 25px center;	21	background-position: 25px center;
		22	box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
		23	color: #FFF;
22	padding-left: 45px;	24	padding-left: 45px;
23	}	25	}
24	/* Third level */	26	/* Third level */


diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.html b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html index bd8e8acd..310274bc 100644 --- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.html +++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
@@ -37,7 +37,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
37	</head>	37	</head>
38	<body>	38	<body>
39	<div id="leaf" class="leaf">	39	<div id="leaf" class="leaf">
40	<div id="label" class="leaf-label"></div>	40	<div id="label" class="leaf-label" draggable="true"></div>
41	</div>	41	</div>
42	</body>	42	</body>
43	</html> \ No newline at end of file	43	</html> \ No newline at end of file


diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js index bd566b26..0b7a171e 100644 --- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js +++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
@@ -5,7 +5,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
5	</copyright> */	5	</copyright> */
6		6
7	var Montage = require("montage/core/core").Montage,	7	var Montage = require("montage/core/core").Montage,
8	Component = require("montage/ui/component").Component;
9	TreeNode = require("js/components/treeview/tree-node").TreeNode;	8	TreeNode = require("js/components/treeview/tree-node").TreeNode;
10		9
11	exports.Leaf = Montage.create(TreeNode, {	10	exports.Leaf = Montage.create(TreeNode, {
@@ -14,19 +13,38 @@ exports.Leaf = Montage.create(TreeNode, {
14	},	13	},
15	templateDidLoad : {	14	templateDidLoad : {
16	value: function() {	15	value: function() {
17	this.needsDraw = true;	16	var event = this.treeView.activationEvent;
		17
		18	///// Re-set the activation event
		19	if(event && event !== this.activationEvent) {
		20	this.delegateEventMap[event] = this.delegateEventMap[this.activationEvent];
		21	delete this.delegateEventMap[this.activationEvent];
		22	this.activationEvent = this.treeView.activationEvent;
		23	}
18	}	24	}
19	},	25	},
20	prepareForDraw: {	26	prepareForDraw: {
21	value : function() {	27	value : function() {
22	this.activationEvent = this.activationEvent \|\| 'click';	28	var el = this.label._element;
23	this.label._element.addEventListener(this.activationEvent, this.handleNodeActivation.bind(this), false);	29
		30	Object.keys(this.delegateEventMap).forEach(function(event) {
		31	el.addEventListener(event, this, false);
		32	}, this);
		33
24	}	34	}
25	},	35	},
26	handleNodeActivation: {	36	handleEvent : {
27	value: function(e) {	37	value: function(e) {
28	console.log(this.sourceObject);	38	var delegateMethod = this.delegateEventMap[e._event.type];
29	this.treeView.contentController.delegate.applyPresetSelection(this.sourceObject);	39	this.callDelegateMethod(delegateMethod);
		40	}
		41	},
		42	callDelegateMethod : {
		43	value: function(methodName) {
		44	var delegate = this.treeView.contentController.delegate;
		45	if(delegate && typeof delegate[methodName] === 'function') {
		46	delegate[methodName](this.sourceObject);
		47	}
30	}	48	}
31	},	49	},
32	draw : {	50	draw : {
@@ -35,6 +53,16 @@ exports.Leaf = Montage.create(TreeNode, {
35	this._labelText = this.sourceObject[this.labelKey];	53	this._labelText = this.sourceObject[this.labelKey];
36	}	54	}
37	}	55	}
		56	},
		57	activationEvent : {
		58	value : 'click'
		59	},
		60	delegateEventMap : {
		61	value: {
		62	'click' : 'handleNodeActivation',
		63	'dragstart' : 'handleDragStart',
		64	'dragend' : 'handleDragEnd'
		65	}
38	}	66	}
39		67
40		68


diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html index d70b016c..4f9e6a72 100644 --- a/js/components/treeview/treeview.reel/treeview.html +++ b/js/components/treeview/treeview.reel/treeview.html
@@ -26,7 +26,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
26	"name" : "Branch"	26	"name" : "Branch"
27	},	27	},
28	"defaultLeaf" : {	28	"defaultLeaf" : {
29	"module" : "js/components/treeview/presets-leaf.reel",	29	"module" : "js/components/treeview/leaf.reel",
30	"name" : "Leaf"	30	"name" : "Leaf"
31	},	31	},
32	"scrollview": {	32	"scrollview": {