From d48f086ad64badf07b5f82bf6e0216074eac7a25 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 16 May 2012 18:25:03 -0700 Subject: Initial Binding Hud Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.css | 5 +++ .../binding-hud.reel/binding-hud.html | 47 ++++++++++++++++++++++ .../binding-hud.reel/binding-hud.js | 16 ++++++++ 3 files changed, 68 insertions(+) create mode 100755 js/stage/binding-view.reel/binding-hud.reel/binding-hud.css create mode 100755 js/stage/binding-view.reel/binding-hud.reel/binding-hud.html create mode 100755 js/stage/binding-view.reel/binding-hud.reel/binding-hud.js (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 new file mode 100755 index 00000000..018448f1 --- /dev/null +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css @@ -0,0 +1,5 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ 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 new file mode 100755 index 00000000..73252de4 --- /dev/null +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + + +

+ +

+ + + 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 new file mode 100755 index 00000000..cbb4c1d7 --- /dev/null +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js @@ -0,0 +1,16 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +/** +@requires montage/core/core +@requires montage/ui/component +*/ +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.bindingHud = Montage.create(Component, { + +}); \ No newline at end of file -- cgit v1.2.3 From 3ed95247e9ea4b0a7833401ed6809647b7c4acbf Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 23 May 2012 14:26:46 -0700 Subject: Binding Visual Tool Initial setup Signed-off-by: Armen Kesablyan --- .../binding-view.reel/binding-hud.reel/binding-hud.html | 13 +++++++++++-- js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 9 +++++++-- 2 files changed, 18 insertions(+), 4 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 73252de4..c81b70d3 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 @@ -25,11 +25,20 @@ "bindings": { "objects": { "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "bindables", + "boundObjectPropertyPath": "properties", "oneway": true } } }, + "hudOption": { + "prototype": "js/stage/binding-view.reel/binding-hud-option.reel", + "properties": { + "element": {"#" : "hudOption"} + }, + "bindings": { + "title": {"<-": "@objectAtCurrentIteration.title"} + } + } } @@ -39,7 +48,7 @@

- +

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 cbb4c1d7..a63f2775 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 @@ -11,6 +11,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; -exports.bindingHud = Montage.create(Component, { - +exports.BindingHud = Montage.create(Component, { + properties: { + value: [ + {"title": "myProperty1"}, + {"title":"myproperty2"} + ] + } }); \ No newline at end of file -- cgit v1.2.3 From e8c4e98c24092a360eb2f637983fd104fbb67f66 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 25 May 2012 11:22:05 -0700 Subject: Setup up Binding View Draw Cycle Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-hud.reel/binding-hud.html | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 c81b70d3..1c73fd77 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 @@ -23,11 +23,7 @@ "element": {"#": "hudRepetition"} }, "bindings": { - "objects": { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "properties", - "oneway": true - } + "objects": {"<-": "@owner.properties"} } }, "hudOption": { @@ -36,7 +32,7 @@ "element": {"#" : "hudOption"} }, "bindings": { - "title": {"<-": "@objectAtCurrentIteration.title"} + "title": {"<-": "@repeater.objectAtCurrentIteration.title"} } } } -- cgit v1.2.3 From a581fb3c544ee2faeafbb75f7a3f5719f53cf323 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 30 May 2012 15:30:38 -0700 Subject: Visual Bindings Initial generate from Array. Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.css | 57 ++++++++++++++++++++++ .../binding-hud.reel/binding-hud.html | 16 ++++-- .../binding-hud.reel/binding-hud.js | 18 +++++++ 3 files changed, 87 insertions(+), 4 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 018448f1..626706ed 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 @@ -3,3 +3,60 @@ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ + +.bindingHud { + position: absolute; + background: #282828; + padding: 0px; + color: #FFF; + font-size: 11px; + box-shadow: 2px 2px 3px black; + border-radius: 3px; + padding: 3px; + padding-top:0px; + border:1px solid #000; +} + +.bindingHud .bindingTitle { + font-weight:bold; + background: url('/images/panels/horizontal-resize.png') no-repeat; + padding-left: 10px; + line-height: 20px; + background-position: left center; + padding-top: 2px; +} + +.bindingHud .hudRepetition { + background: #555; + padding:1px 9px; + line-height:16px; + border:1px solid #000; + box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; + min-width: 65px; +} + +.bindingHud .hudOption { + position:relative; + border-bottom:1px solid #505050; + line-height:16px; +} + +.bindingHud .hudOption:last-child { + border-bottom: 0px; +} + +.bindingHud .hudOption .connectorBubble { + position: absolute; + right: -20px; + top: 2px; + background: #555; + border: 1px solid black; + border-radius: 0px; + width: 12px; + height: 12px; + border-left: 0px; + /*border-bottom-right-radius: 50%; + border-top-right-radius: 50%;*/ + + +} \ 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 1c73fd77..1f3b181c 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 @@ -7,7 +7,7 @@ - + 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 acd072f9..5053d3bb 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 @@ -44,14 +44,75 @@ exports.BindingHud = Montage.create(Component, { ] }, - x: { + _isResizing: { + value: null + }, + + _resizedX : { + value: 0 + }, + + _resizedY: { + value: 0 + }, + + handleResizeStart: { + value:function(e) { + this.isResizing = true; + this.x = parseInt(this.x); + this.y = parseInt(this.y); + this.needsDraw = true; + } + }, + + handleResizeMove: { + value:function(e) { + this._resizedY = e._event.dY; + this._resizedX = e._event.dX; + this.needsDraw = true; + } + }, + + handleResizeEnd: { + value: function(e) { + this.x += this._resizedX; + this.y += this._resizedY; + this._resizedX = 0; + this._resizedY = 0; + this.isResizing = false; + this.needsDraw = true; + } + }, + + _x: { value: 20 }, - y: { + _y: { value: 100 }, + x: { + get: function() { + return this._x; + }, + set: function(val) { + this._x = val; + console.log(this._x); + this.needsDraw = true; + } + }, + + y: { + get: function() { + return this._y; + }, + set: function(val) { + this._y = val; + this.needsDraw = true; + } + }, + _title: { value: "default" }, @@ -81,8 +142,13 @@ exports.BindingHud = Montage.create(Component, { draw: { value: function() { this.titleElement.innerHTML = this.title; - this.element.style.top = this.y + "px"; - this.element.style.left = this.x + "px"; + +// if(this.isResizing) { +// this.timelineSplitter.collapsed = this.height - this._resizedHeight < 46; +// this.panelSplitter.collapsed = this.width - this._resizedWidth < 30; +// } + this.element.style.top = (this.y + this._resizedY) + "px"; + this.element.style.left = (this.x + this._resizedX) + "px"; console.log("hud",this); } } -- cgit v1.2.3 From 60e9ea67e0f6d0cf167b6d5068e2e01db5f67966 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 14 Jun 2012 15:00:18 -0700 Subject: Binding-Huds draw to component Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 5053d3bb..4260a66c 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 @@ -62,6 +62,7 @@ exports.BindingHud = Montage.create(Component, { this.x = parseInt(this.x); this.y = parseInt(this.y); this.needsDraw = true; + this.parentComponent.parentComponent.needsDraw = true; } }, @@ -70,6 +71,7 @@ exports.BindingHud = Montage.create(Component, { this._resizedY = e._event.dY; this._resizedX = e._event.dX; this.needsDraw = true; + this.parentComponent.parentComponent.needsDraw = true; } }, @@ -81,6 +83,7 @@ exports.BindingHud = Montage.create(Component, { this._resizedY = 0; this.isResizing = false; this.needsDraw = true; + this.parentComponent.parentComponent.needsDraw = true; } }, @@ -98,7 +101,6 @@ exports.BindingHud = Montage.create(Component, { }, set: function(val) { this._x = val; - console.log(this._x); this.needsDraw = true; } }, @@ -149,7 +151,6 @@ exports.BindingHud = Montage.create(Component, { // } this.element.style.top = (this.y + this._resizedY) + "px"; this.element.style.left = (this.x + this._resizedX) + "px"; - console.log("hud",this); } } }); \ No newline at end of file -- cgit v1.2.3 From 5bf62b3dacfff71d906286716dc0d73e2cb05bb8 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 15 Jun 2012 15:03:13 -0700 Subject: Binding Hud: Calling Option Selection to view Signed-off-by: Armen Kesablyan --- .../binding-view.reel/binding-hud.reel/binding-hud.css | 14 +++++++------- .../binding-view.reel/binding-hud.reel/binding-hud.html | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 e177963f..f7e926cb 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 @@ -38,7 +38,7 @@ position:relative; border-bottom:1px solid #505050; line-height:16px; - padding:1px 9px; + padding:1px 9px 1px 15px; } .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble { background: #5e9eff; @@ -51,14 +51,14 @@ .bindingHud .hudOption .connectorBubble { position: absolute; - right: -10px; - top: 1px; - background: rgba(0, 0, 0, 0.3); + right: 3px; + top: 3px; border-radius: 50%; - width: 16px; - height: 16px; + width: 12px; + height: 12px; border-left: 0px; - display: none; + display: block; + box-shadow: inset 0px 0px 6px #5e9eff; /*border-bottom-right-radius: 50%; border-top-right-radius: 50%;*/ 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 38d2a2ec..b8410f9b 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 @@ -65,7 +65,7 @@

-- cgit v1.2.3 From d7456b5d8f5231b7cb6df31081474cfcd5900a84 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 15 Jun 2012 16:07:20 -0700 Subject: Put Objects in front of Huds Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-hud.reel/binding-hud.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 f7e926cb..c53c82e2 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 @@ -40,11 +40,15 @@ line-height:16px; padding:1px 9px 1px 15px; } -.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble { - background: #5e9eff; +.connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble:hover { + box-shadow: inset 0px 0px 6px #5e9eff; display:block; } +.hudOption.bound, .bindingHud .hudOption.bound { + background: #5e9eff; +} + .bindingHud .hudOption:last-child { border-bottom: 0px; } -- cgit v1.2.3 From b4ab3e558f26549c63fa0d0a542e208d2be62d56 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 18 Jun 2012 20:10:34 -0700 Subject: Binding - Drop Locate connector Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-hud.reel/binding-hud.css | 11 ++++++----- js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 1 - 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 c53c82e2..1c75b03a 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 @@ -38,15 +38,16 @@ position:relative; border-bottom:1px solid #505050; line-height:16px; - padding:1px 9px 1px 15px; + padding:1px 20px 1px 10px; } -.connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble:hover { + +.bindingHud .hudOption .connectorBubble:hover { box-shadow: inset 0px 0px 6px #5e9eff; - display:block; + cursor: pointer; } .hudOption.bound, .bindingHud .hudOption.bound { - background: #5e9eff; + background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); } .bindingHud .hudOption:last-child { @@ -62,7 +63,7 @@ height: 12px; border-left: 0px; display: block; - box-shadow: inset 0px 0px 6px #5e9eff; + box-shadow: inset 0px 0px 6px #AAA; /*border-bottom-right-radius: 50%; border-top-right-radius: 50%;*/ 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 4260a66c..799c5866 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 @@ -32,7 +32,6 @@ exports.BindingHud = Montage.create(Component, { this.y = this._bindingArgs.component.element.offsetTop; this.properties = this._bindingArgs.properties; this.needsDraw = true; - console.log("Binding Args Set", val); } else { this.properties = []; } -- cgit v1.2.3 From 244e608645778746d1a3b5aa0d4c0868f7c5c272 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 19 Jun 2012 00:42:34 -0700 Subject: Binding-View: Visual Bind Item Working Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 799c5866..a8c3ae68 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 @@ -20,6 +20,17 @@ exports.BindingHud = Montage.create(Component, { value: null }, + _userComponent: { value: null }, + userComponent: { + get: function() { + return this._userComponent; + }, + set: function(val) { + this._userComponent = val; + } + }, + + bindingArgs: { get: function() { return this._bindingArgs; @@ -27,6 +38,7 @@ exports.BindingHud = Montage.create(Component, { set: function(val) { if (typeof(val) !== "undefined") { this._bindingArgs = val; + this.userComponent = this.bindingArgs.component; this.title = this.bindingArgs.component.identifier; this.x = this._bindingArgs.component.element.offsetLeft; this.y = this._bindingArgs.component.element.offsetTop; -- cgit v1.2.3 From 5260d3dfd99d79924c4aaa3ab798e90c7d328d7d Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 19 Jun 2012 01:04:26 -0700 Subject: Binding Hud CSS Change --- .../binding-hud.reel/binding-hud.css | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 1c75b03a..76b8e37e 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 @@ -6,14 +6,13 @@ .bindingHud { position: absolute; - background: rgba(0, 0, 0, 0.8); - padding: 0px; - color: #FFF; + background: rgba(0, 0, 0, 0.85); + /*padding: 0px;*/ + color: #C4C4C4; font-size: 11px; - box-shadow: 2px 2px 3px black; - border-radius: 3px; - padding: 3px; - padding-top:0px; + box-shadow: inset 0px 0px 0px 0px #CCC; + border-radius: 6px; + padding: 3px 3px 8px; border:1px solid #000; text-shadow: 1px 1px 0px #000; } @@ -25,18 +24,19 @@ line-height: 20px; background-position: left center; padding-top: 2px; + color: #EBE6E6; } .bindingHud .hudRepetition { - background: rgba(0, 0, 0, 0.3); + /*background: rgba(0, 0, 0, 0.3);*/ line-height:16px; - box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; + /*box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;*/ min-width: 80px; } .bindingHud .hudOption { position:relative; - border-bottom:1px solid #505050; + /*border-bottom:1px solid #505050;*/ line-height:16px; padding:1px 20px 1px 10px; } @@ -63,7 +63,7 @@ height: 12px; border-left: 0px; display: block; - box-shadow: inset 0px 0px 6px #AAA; + 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%;*/ -- cgit v1.2.3 From 20ea3997661b068fc6628ffa573e1b2d47e3a800 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 19 Jun 2012 22:51:04 -0700 Subject: Binding View - Mouse Over Element Pop up Hud Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.html | 2 +- .../binding-hud.reel/binding-hud.js | 39 +++++++--------------- 2 files changed, 13 insertions(+), 28 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 b8410f9b..82686c7f 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 @@ -33,7 +33,7 @@ "element": {"#" : "hudOption"} }, "bindings": { - "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"} + "title": {"<-": "@repeater.objectAtCurrentIteration"} } }, "resizer1": { 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 a8c3ae68..b03c5a06 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 @@ -25,35 +25,19 @@ exports.BindingHud = Montage.create(Component, { get: function() { return this._userComponent; }, - set: function(val) { - this._userComponent = val; - } - }, - - - bindingArgs: { - get: function() { - return this._bindingArgs; - }, set: function(val) { if (typeof(val) !== "undefined") { - this._bindingArgs = val; - this.userComponent = this.bindingArgs.component; - this.title = this.bindingArgs.component.identifier; - this.x = this._bindingArgs.component.element.offsetLeft; - this.y = this._bindingArgs.component.element.offsetTop; - this.properties = this._bindingArgs.properties; + this._userComponent = val; + this.title = val.identifier; + this.x = val.element.offsetLeft; + this.y = val.element.offsetTop; + this.properties = this.application.ninja.objectsController.getPropertiesFromObject(val, true); this.needsDraw = true; - } else { - this.properties = []; } } }, - properties: { - value: [ - ] - }, + properties: { value: [] }, _isResizing: { value: null @@ -149,19 +133,20 @@ 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)); } }, draw: { value: function() { this.titleElement.innerHTML = this.title; - -// if(this.isResizing) { -// this.timelineSplitter.collapsed = this.height - this._resizedHeight < 46; -// this.panelSplitter.collapsed = this.width - this._resizedWidth < 30; -// } this.element.style.top = (this.y + this._resizedY) + "px"; this.element.style.left = (this.x + this._resizedX) + "px"; } + }, + didDraw: { + value: function() { + + } } }); \ No newline at end of file -- cgit v1.2.3 From e506b93b285a1666999afe7cf65317cb6552db03 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 19 Jun 2012 23:36:35 -0700 Subject: Showing Bound Items in hud Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-hud.reel/binding-hud.css | 2 +- js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 76b8e37e..f15f1e50 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 @@ -46,7 +46,7 @@ cursor: pointer; } -.hudOption.bound, .bindingHud .hudOption.bound { +.bindingHud .hudOption.bound .connectorBubble { background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); } 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 b03c5a06..fddce11c 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 @@ -20,6 +20,10 @@ exports.BindingHud = Montage.create(Component, { value: null }, + boundProperties: { + value: [] + }, + _userComponent: { value: null }, userComponent: { get: function() { @@ -32,6 +36,9 @@ exports.BindingHud = Montage.create(Component, { this.x = val.element.offsetLeft; this.y = val.element.offsetTop; this.properties = this.application.ninja.objectsController.getPropertiesFromObject(val, true); + this.application.ninja.objectsController.getObjectBindings(this.userComponent).forEach(function(obj) { + this.boundProperties.push(obj.sourceObjectPropertyPath); + }.bind(this)); this.needsDraw = true; } } @@ -133,7 +140,7 @@ 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)); + //this.parentComponent.parentComponent.handleShowBinding(this.application.ninja.objectsController.getObjectBindings(this.userComponent)); } }, -- cgit v1.2.3 From 7cd6ad42bbe799a66124344a463b5a571a2e892a Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 20 Jun 2012 10:57:56 -0700 Subject: Binding View - Hover Scroll Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.css | 14 +++ .../binding-hud.reel/binding-hud.html | 7 +- .../binding-hud.reel/binding-hud.js | 114 ++++++++++++++++++++- 3 files changed, 133 insertions(+), 2 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 @@

Down

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; +// } +// } } }, didDraw: { value: function() { - +// if (this.currentScrollDirection !== null) { +// this.needsDraw=true; +// } } } }); \ No newline at end of file -- cgit v1.2.3 From 8ac2ce1566995c91fe4721df2b121ed6437b9e1c Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 20 Jun 2012 12:40:49 -0700 Subject: Binding HUD - Show hud for "off stage" objects in tray --- .../binding-hud.reel/binding-hud.js | 44 ++++++++++++++++++---- 1 file changed, 37 insertions(+), 7 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 4b40d4da..cc94e844 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 @@ -52,17 +52,35 @@ exports.BindingHud = Montage.create(Component, { return this._userComponent; }, set: function(val) { - if (typeof(val) !== "undefined") { - this._userComponent = val; + if(!val) { return; } + + var controller = this.application.ninja.objectsController, + bindingView = this.parentComponent.parentComponent, + isOffStage, icon, iconOffsets; + + this._userComponent = val; + this.properties = controller.getPropertiesFromObject(val, true); + + controller.getObjectBindings(this.userComponent).forEach(function(obj) { + this.boundProperties.push(obj.sourceObjectPropertyPath); + }, this); + + isOffStage = controller.isOffStageObject(val); + + if(isOffStage) { + icon = bindingView.getOffStageIcon(val); + iconOffsets = this.getElementOffsetToParent(icon.element, bindingView.element); + this.title = icon.name; + this.x = iconOffsets.x; + this.y = iconOffsets.y - 80; + } else { this.title = val.identifier; this.x = val.element.offsetLeft; this.y = val.element.offsetTop; - this.properties = this.application.ninja.objectsController.getPropertiesFromObject(val, true); - this.application.ninja.objectsController.getObjectBindings(this.userComponent).forEach(function(obj) { - this.boundProperties.push(obj.sourceObjectPropertyPath); - }.bind(this)); - this.needsDraw = true; } + + this.needsDraw = true; + } }, @@ -111,6 +129,18 @@ exports.BindingHud = Montage.create(Component, { } }, + getElementOffsetToParent : { + value: function(element, parent) { + var nodeToPage = webkitConvertPointFromNodeToPage(element, new WebKitPoint(0, 0)), + parentToPage = webkitConvertPointFromNodeToPage(parent, new WebKitPoint(0, 0)); + + return { + x : nodeToPage.x - parentToPage.x, + y : nodeToPage.y - parentToPage.y + } + } + }, + _x: { value: 20 }, -- cgit v1.2.3 From 5c770b772179cc2c3a0455f67025978b44e4b547 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 20 Jun 2012 13:06:11 -0700 Subject: binding-hud Scroll Up Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.js | 68 +++++++++++++--------- 1 file changed, 40 insertions(+), 28 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel') 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 4b40d4da..0893e8d8 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 @@ -175,42 +175,54 @@ exports.BindingHud = Montage.create(Component, { }, isOverScroller: { - value: function(mousePoint) { + value: function(e) { 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; - } + var isOverScroller = false; + var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); + + var scrollUpStartX = 5; + var scrollUpEndX = scrollUpStartX + this.titleElement.offsetWidth; + var scrollUpStartY = this.titleElement.offsetHeight; + var scrollUpEndY = scrollUpStartY + this.scrollUp.offsetHeight; + if(scrollUpStartX < mousePoint.x && (scrollUpEndX) > mousePoint.x) { + if(scrollUpStartY < mousePoint.y && (scrollUpEndY) > mousePoint.y) { + this.handleScroll("up"); + isOverScroller = true; } } + + var scrollDownStartX = 5; + var scrollDownEndX = scrollDownStartX + this.titleElement.offsetWidth; + var scrollDownStartY = scrollUpEndY + this.optionsRepeater.element.offsetHeight; + var scrollDownEndY = scrollDownStartY + this.scrollDown.offsetHeight; + + if(scrollDownStartX < mousePoint.x && (scrollDownEndX) > mousePoint.x) { + if(scrollDownStartY < mousePoint.y && (scrollDownEndY) > mousePoint.y) { + this.handleScroll("down"); + isOverScroller = true; + } + } + + if(!isOverScroller) { + clearInterval(this.scrollInterval); + this.scrollInterval = null; + } } } }, 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); + if (this.scrollInterval === null) { + if(direction === "down") { + this.scrollInterval = setInterval(function() { + this.optionsRepeater.element.scrollTop += 3; + }.bind(this), 50); + } else { + this.scrollInterval = setInterval(function() { + this.optionsRepeater.element.scrollTop -= 3; + }.bind(this), 50); + } } } }, @@ -232,7 +244,7 @@ exports.BindingHud = Montage.create(Component, { } } } - this.needsDraw = true; + //this.needsDraw = true; } }, -- cgit v1.2.3 From f7c14e54c52bce8875cde81db621dde6f4ff1e34 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 20 Jun 2012 14:59:49 -0700 Subject: Binding-View : Polish state Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 2 +- 1 file cha