aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
authorEric Guzman2012-06-20 11:03:44 -0700
committerEric Guzman2012-06-20 11:03:44 -0700
commitdc642d381e951223df3ce88ae984a3bf97d82f80 (patch)
treeed03d75e91180246b0c8fb327ee2c211b968e4ef /js/stage
parente0dc3ff089904653edcf1668e537e1285fd00458 (diff)
parent7cd6ad42bbe799a66124344a463b5a571a2e892a (diff)
downloadninja-dc642d381e951223df3ce88ae984a3bf97d82f80.tar.gz
Merge branch 'binding' of github.com:dhg637/ninja-internal into binding
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.css14
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.html7
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.js114
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js5
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 @@
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
14exports.BindingHud = Montage.create(Component, { 14exports.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 {