Binding View - Hover Scroll

Signed-off-by: Armen Kesablyan <armen@motorola.com>
author: Armen Kesablyan 2012-06-20 10:57:56 -0700
committer: Armen Kesablyan 2012-06-20 10:57:56 -0700
commit: 7cd6ad42bbe799a66124344a463b5a571a2e892a (patch)
tree: da99015afe290cb4e2ecc11a8fcf24c0746388d3 /js/stage
parent: e506b93b285a1666999afe7cf65317cb6552db03 (diff)
download: ninja-7cd6ad42bbe799a66124344a463b5a571a2e892a.tar.gz
4 files changed, 137 insertions, 3 deletions
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
index f15f1e50..3cc4bb0a 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
@@ -66,6 +66,20 @@
    box-shadow: inset 0px 0px 0px 4px rgba(170, 170, 170, 0.34);/*inset 0px 0px 6px #AAA;*/
    /*border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;*/
+}
+.scrollArea {
+    background-color:#666;
+    height:12px;
+    text-align: center;
+    display: none;
+}
+.scrollArea.disabled {
+    opacity: 0.5;
+}
+.hudRepetition {
+    max-height:54px;
+    overflow: hidden;
 }
 \ No newline at end of file
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
index 82686c7f..56234557 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
@@ -15,7 +15,10 @@
                "prototype": "js/stage/binding-view.reel/binding-hud.reel",
                "properties": {
                    "element": {"#": "bindingHud"},
-                    "titleElement": {"#": "title"}
+                    "titleElement": {"#": "title"},
+                    "scrollUp": {"#":"scrollUp"},
+                    "scrollDown": {"#":"scrollDown"},
+                    "optionsRepeater": {"@": "repeater"}
                }
            },
            "repeater": {
@@ -64,9 +67,11 @@
 <body>
    <section data-montage-id="bindingHud" class="bindingHud">
        <div data-montage-id="title" class="bindingTitle"></div>
+        <div data-montage-id="scrollUp" class="scrollArea scrollAreaTop disabled">Up</div>
        <div data-montage-id="hudRepetition" class="hudRepetition">
            <div data-montage-id="hudOption"></div>
        </div>
+        <div data-montage-id="scrollDown" class="scrollArea scrollAreaBottom">Down</div>
    </section>
 </body>
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
index fddce11c..4b40d4da 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
@@ -12,6 +12,24 @@ var Montage = require("montage/core/core").Montage,
    Component = require("montage/ui/component").Component;
 exports.BindingHud = Montage.create(Component, {
+    scrollUp: {
+        value: null
+    },
+    scrollable: {
+        value: false
+    },
+    scrollInterval: {
+        value: null
+    },
+    scrollDown: {
+        value: null
+    },
+    scrollSpace: {
+        value: 3
+    },
+    currentScrollDirection: {
+        value: null
+    },
    _bindingArgs: {
        value: null
    },
@@ -24,6 +42,10 @@ exports.BindingHud = Montage.create(Component, {
        value: []
    },
+    optionsRepeater: {
+        value: null
+    },
    _userComponent: { value: null  },
    userComponent: {
        get: function() {
@@ -141,6 +163,86 @@ exports.BindingHud = Montage.create(Component, {
 //                this.properties.push({"title":obj, "bound": objBound});
 //            }.bind(this));
            //this.parentComponent.parentComponent.handleShowBinding(this.application.ninja.objectsController.getObjectBindings(this.userComponent));
+            if(this.scrollSpace < this.properties.length) {
+                this.scrollUp.addEventListener("mouseover", this);
+                this.scrollDown.addEventListener("mouseover", this);
+                this.scrollUp.addEventListener("mouseout", this);
+                this.scrollDown.addEventListener("mouseout", this);
+                this.scrollUp.style.display = "block";
+                this.scrollDown.style.display = "block";
+            }
+        }
+    },
+    isOverScroller: {
+        value: function(mousePoint) {
+            if(this.scrollSpace < this.properties.length) {
+                if (this.scrollInterval === null) {
+                    var newX = mousePoint.x - this.x;
+                    var newY = mousePoint.y - this.y;
+                    var scrollUpStartX = 5;
+                    var scrollUpEndX = scrollUpStartX + this.titleElement.offsetWidth;
+                    var scrollUpStartY = this.titleElement.offsetHeight;
+                    var scrollUpEndY = scrollUpStartY + this.scrollUp.offsetHeight;
+                    var scrollDownStartX = 5;
+                    var scrollDownEndX = scrollUpStartX + this.titleElement.offsetWidth;
+                    var scrollDownStartY = scrollUpEndY + this.optionsRepeater.element.offsetHeight;
+                    //scrollDownEndy to small find out y;
+                    var scrollDownEndY = scrollUpEndY + this.scrollDown.offsetHeight;
+                    console.log(scrollDownStartX,scrollDownEndX, scrollDownStartY, scrollDownEndY, newX, newY );
+                    if(scrollDownStartX < newX && (scrollDownEndX) > newX) {
+                        if(scrollDownStartY < newY && (scrollDownEndY) > newY) {
+                            debugger;
+                        }
+                    }
+                }
+            }
+        }
+    },
+    handleScroll: {
+        value: function(direction) {
+            if(direction === "down") {
+                this.scrollInterval = setInterval(function() {
+                    self.optionsRepeater.element.scrollTop += 18;
+                }, 200);
+            } else {
+                this.scrollInterval = setInterval(function() {
+                    self.optionsRepeater.element.scrollTop -= 18;
+                }, 200);
+            }
+        }
+    },
+    handleMouseover: {
+        value: function(e) {
+            if(this.scrollSpace < this.properties.length) {
+                if (this.scrollInterval === null) {
+                    if (e._event.target.classList.contains("scrollAreaBottom")) {
+                        self = e._event.target.parentElement.controller;
+                        //e._event.target.parentElement.controller.currentScrollDirection = "down";
+                        this.scrollInterval = setInterval(function() {
+                            self.optionsRepeater.element.scrollTop += 3;
+                        }, 50);
+                    } else {
+                        this.scrollInterval = setInterval(function() {
+                            self.optionsRepeater.element.scrollTop -= 3;
+                        }, 50);
+                    }
+                }
+            }
+            this.needsDraw = true;
+        }
+    },
+    handleMouseout: {
+        value: function() {
+            clearInterval(this.scrollInterval);
+            this.scrollInterval = null;
+            this.currentScrollDirection = null;
        }
    },
@@ -149,11 +251,21 @@ exports.BindingHud = Montage.create(Component, {
            this.titleElement.innerHTML = this.title;
            this.element.style.top = (this.y + this._resizedY) + "px";
            this.element.style.left = (this.x + this._resizedX) + "px";
+//            if(this.currentScrollDirection !== null) {
+//                if(this.currentScrollDirection === "up") {
+//                    this.optionsRepeater.element.scrollTop -= 18;
+//                } else {
+//                    this.optionsRepeater.element.scrollTop += 18;
+//                }
author	Armen Kesablyan	2012-06-20 10:57:56 -0700
committer	Armen Kesablyan	2012-06-20 10:57:56 -0700
commit	7cd6ad42bbe799a66124344a463b5a571a2e892a (patch)
tree	da99015afe290cb4e2ecc11a8fcf24c0746388d3 /js/stage
parent	e506b93b285a1666999afe7cf65317cb6552db03 (diff)
download	ninja-7cd6ad42bbe799a66124344a463b5a571a2e892a.tar.gz

diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css index f15f1e50..3cc4bb0a 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
@@ -66,6 +66,20 @@
66	box-shadow: inset 0px 0px 0px 4px rgba(170, 170, 170, 0.34);/inset 0px 0px 6px #AAA;/	66	box-shadow: inset 0px 0px 0px 4px rgba(170, 170, 170, 0.34);/inset 0px 0px 6px #AAA;/
67	/*border-bottom-right-radius: 50%;	67	/*border-bottom-right-radius: 50%;
68	border-top-right-radius: 50%;*/	68	border-top-right-radius: 50%;*/
		69	}
		70
		71	.scrollArea {
		72	background-color:#666;
		73	height:12px;
		74	text-align: center;
		75	display: none;
		76	}
69		77
		78	.scrollArea.disabled {
		79	opacity: 0.5;
		80	}
70		81
		82	.hudRepetition {
		83	max-height:54px;
		84	overflow: hidden;
71	} \ No newline at end of file	85	} \ No newline at end of file


diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html index 82686c7f..56234557 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
@@ -15,7 +15,10 @@
15	"prototype": "js/stage/binding-view.reel/binding-hud.reel",	15	"prototype": "js/stage/binding-view.reel/binding-hud.reel",
16	"properties": {	16	"properties": {
17	"element": {"#": "bindingHud"},	17	"element": {"#": "bindingHud"},
18	"titleElement": {"#": "title"}	18	"titleElement": {"#": "title"},
		19	"scrollUp": {"#":"scrollUp"},
		20	"scrollDown": {"#":"scrollDown"},
		21	"optionsRepeater": {"@": "repeater"}
19	}	22	}
20	},	23	},
21	"repeater": {	24	"repeater": {
@@ -64,9 +67,11 @@
64	<body>	67	<body>
65	<section data-montage-id="bindingHud" class="bindingHud">	68	<section data-montage-id="bindingHud" class="bindingHud">
66	<div data-montage-id="title" class="bindingTitle"></div>	69	<div data-montage-id="title" class="bindingTitle"></div>
		70	<div data-montage-id="scrollUp" class="scrollArea scrollAreaTop disabled">Up</div>
67	<div data-montage-id="hudRepetition" class="hudRepetition">	71	<div data-montage-id="hudRepetition" class="hudRepetition">
68	<div data-montage-id="hudOption"></div>	72	<div data-montage-id="hudOption"></div>
69	</div>	73	</div>
		74	<div data-montage-id="scrollDown" class="scrollArea scrollAreaBottom">Down</div>
70	</section>	75	</section>
71		76
72	</body>	77	</body>


diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index fddce11c..4b40d4da 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
@@ -12,6 +12,24 @@ var Montage = require("montage/core/core").Montage,
12	Component = require("montage/ui/component").Component;	12	Component = require("montage/ui/component").Component;
13		13
14	exports.BindingHud = Montage.create(Component, {	14	exports.BindingHud = Montage.create(Component, {
		15	scrollUp: {
		16	value: null
		17	},
		18	scrollable: {
		19	value: false
		20	},
		21	scrollInterval: {
		22	value: null
		23	},
		24	scrollDown: {
		25	value: null
		26	},
		27	scrollSpace: {
		28	value: 3
		29	},
		30	currentScrollDirection: {
		31	value: null
		32	},
15	_bindingArgs: {	33	_bindingArgs: {
16	value: null	34	value: null
17	},	35	},
@@ -24,6 +42,10 @@ exports.BindingHud = Montage.create(Component, {
24	value: []	42	value: []
25	},	43	},
26		44
		45	optionsRepeater: {
		46	value: null
		47	},
		48
27	_userComponent: { value: null },	49	_userComponent: { value: null },
28	userComponent: {	50	userComponent: {
29	get: function() {	51	get: function() {
@@ -141,6 +163,86 @@ exports.BindingHud = Montage.create(Component, {
141	// this.properties.push({"title":obj, "bound": objBound});	163	// this.properties.push({"title":obj, "bound": objBound});
142	// }.bind(this));	164	// }.bind(this));
143	//this.parentComponent.parentComponent.handleShowBinding(this.application.ninja.objectsController.getObjectBindings(this.userComponent));	165	//this.parentComponent.parentComponent.handleShowBinding(this.application.ninja.objectsController.getObjectBindings(this.userComponent));
		166	if(this.scrollSpace < this.properties.length) {
		167	this.scrollUp.addEventListener("mouseover", this);
		168	this.scrollDown.addEventListener("mouseover", this);
		169	this.scrollUp.addEventListener("mouseout", this);
		170	this.scrollDown.addEventListener("mouseout", this);
		171	this.scrollUp.style.display = "block";
		172	this.scrollDown.style.display = "block";
		173	}
		174	}
		175	},
		176
		177	isOverScroller: {
		178	value: function(mousePoint) {
		179	if(this.scrollSpace < this.properties.length) {
		180	if (this.scrollInterval === null) {
		181	var newX = mousePoint.x - this.x;
		182	var newY = mousePoint.y - this.y;
		183	var scrollUpStartX = 5;
		184	var scrollUpEndX = scrollUpStartX + this.titleElement.offsetWidth;
		185	var scrollUpStartY = this.titleElement.offsetHeight;
		186	var scrollUpEndY = scrollUpStartY + this.scrollUp.offsetHeight;
		187
		188	var scrollDownStartX = 5;
		189	var scrollDownEndX = scrollUpStartX + this.titleElement.offsetWidth;
		190	var scrollDownStartY = scrollUpEndY + this.optionsRepeater.element.offsetHeight;
		191	//scrollDownEndy to small find out y;
		192	var scrollDownEndY = scrollUpEndY + this.scrollDown.offsetHeight;
		193	console.log(scrollDownStartX,scrollDownEndX, scrollDownStartY, scrollDownEndY, newX, newY );
		194	if(scrollDownStartX < newX && (scrollDownEndX) > newX) {
		195	if(scrollDownStartY < newY && (scrollDownEndY) > newY) {
		196	debugger;
		197	}
		198	}
		199	}
		200	}
		201	}
		202	},
		203
		204	handleScroll: {
		205	value: function(direction) {
		206	if(direction === "down") {
		207	this.scrollInterval = setInterval(function() {
		208	self.optionsRepeater.element.scrollTop += 18;
		209	}, 200);
		210	} else {
		211	this.scrollInterval = setInterval(function() {
		212	self.optionsRepeater.element.scrollTop -= 18;
		213	}, 200);
		214	}
		215	}
		216	},
		217
		218	handleMouseover: {
		219	value: function(e) {
		220	if(this.scrollSpace < this.properties.length) {
		221	if (this.scrollInterval === null) {
		222	if (e._event.target.classList.contains("scrollAreaBottom")) {
		223	self = e._event.target.parentElement.controller;
		224	//e._event.target.parentElement.controller.currentScrollDirection = "down";
		225	this.scrollInterval = setInterval(function() {
		226	self.optionsRepeater.element.scrollTop += 3;
		227	}, 50);
		228	} else {
		229	this.scrollInterval = setInterval(function() {
		230	self.optionsRepeater.element.scrollTop -= 3;
		231	}, 50);
		232	}
		233	}
		234	}
		235	this.needsDraw = true;
		236	}
		237	},
		238
		239
		240
		241	handleMouseout: {
		242	value: function() {
		243	clearInterval(this.scrollInterval);
		244	this.scrollInterval = null;
		245	this.currentScrollDirection = null;
144	}	246	}
145	},	247	},
146		248
@@ -149,11 +251,21 @@ exports.BindingHud = Montage.create(Component, {
149	this.titleElement.innerHTML = this.title;	251	this.titleElement.innerHTML = this.title;
150	this.element.style.top = (this.y + this._resizedY) + "px";	252	this.element.style.top = (this.y + this._resizedY) + "px";
151	this.element.style.left = (this.x + this._resizedX) + "px";	253	this.element.style.left = (this.x + this._resizedX) + "px";
		254
		255	// if(this.currentScrollDirection !== null) {
		256	// if(this.currentScrollDirection === "up") {
		257	// this.optionsRepeater.element.scrollTop -= 18;
		258	// } else {
		259	// this.optionsRepeater.element.scrollTop += 18;
		260	// }