From 725bb869618b9e0ebb2820a24bca5d1cf53a4810 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 15 Mar 2012 15:14:28 -0700 Subject: Initial Data Binding Mediator Signed-off-by: Armen Kesablyan --- js/mediators/binding-mediator.js | 14 ++++++++++++++ js/mediators/keyboard-mediator.js | 2 ++ 2 files changed, 16 insertions(+) create mode 100644 js/mediators/binding-mediator.js (limited to 'js') diff --git a/js/mediators/binding-mediator.js b/js/mediators/binding-mediator.js new file mode 100644 index 00000000..10d3f7c6 --- /dev/null +++ b/js/mediators/binding-mediator.js @@ -0,0 +1,14 @@ +/* + 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. +
*/ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.bindingMediator = Montage.create(Component, { + + + +}); \ No newline at end of file diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 65dd34cd..85a46739 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js @@ -203,6 +203,8 @@ exports.KeyboardMediator = Montage.create(Component, { } + + if((evt.keyCode == Keyboard.ENTER) && (evt.ctrlKey || evt.metaKey)) { this.application.ninja.executeChromePreview(); return; -- cgit v1.2.3 From 49596f2a6b518ed0ee945006787d3c69e40a5757 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 22 Mar 2012 14:31:12 -0700 Subject: Updated Resizers for Panels and timeline Signed-off-by: Armen Kesablyan --- js/ninja.reel/ninja.html | 97 +++++++++++++++++++++--------- js/ninja.reel/ninja.js | 107 +++++++++++++++++++++++++++++++++ js/panels/Splitter.js | 2 +- js/panels/resize-composer.js | 23 ++++++- js/stage/stage-view.reel/stage-view.js | 12 ++-- 5 files changed, 207 insertions(+), 34 deletions(-) (limited to 'js') diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index f9e1efdd..b3545329 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -77,34 +77,79 @@ "name": "Splitter", "properties": { "element": {"#": "bottomSplitter"}, - "panel": {"#": "bottomPanelContainer"}, - "resizeBar": {"#": "timelineResizer"} + "panel": {"@": "timeline"} } }, "resizer1": { - "module": "js/panels/Resizer", - "name": "Resizer", + "module": "js/panels/resize-composer", + "name": "ResizeComposer", "properties": { "element": {"#": "rightPanelResizer"}, - "id": "rightPanelResizer", - "panel": {"#": "rightPanelContainer"}, - "isVertical": false, - "redrawStage": true - } + "component": {"@": "owner"}, + "yAxis": false + }, + "listeners": [ + { + "type": "resizeStart", + "listener": {"@": "owner"} + }, + { + "type": "resizeMove", + "listener": {"@": "owner"} + }, + { + "type": "resizeEnd", + "listener": {"@": "owner"} + } + ] }, "resizer2": { - "module": "js/panels/Resizer", - "name": "Resizer", + "module": "js/panels/resize-composer", + "name": "ResizeComposer", "properties": { "element": {"#": "timelineResizer"}, - "id": "timelineResizer", - "panel": {"#": "bottomPanelContainer"}, - "isVertical": true, - "isInversed": true, - "redrawStage": true - } + "component": {"@": "owner"}, + "xAxis": false + }, + "listeners": [ + { + "type": "resizeStart", + "listener": {"@": "owner"} + }, + { + "type": "resizeMove", + "listener": {"@": "owner"} + }, + { + "type": "resizeEnd", + "listener": {"@": "owner"} + } + ] + }, + + "Resizer": { + "module": "js/panels/resize-composer", + "name": "ResizeComposer", + "properties": { + "element": {"#": "pasteboardResizer"}, + "component": {"@": "owner"} + }, + "listeners": [ + { + "type": "resizeStart", + "listener": {"@": "owner"} + }, + { + "type": "resizeMove", + "listener": {"@": "owner"} + }, + { + "type": "resizeEnd", + "listener": {"@": "owner"} + } + ] }, "stageMode": { @@ -321,7 +366,10 @@ "documentBar": {"@": "documentBar"}, "ioMediator": {"@": "ioMediator"}, "timeline": {"@": "timeline"}, - "mainMenuController": {"@": "mainMenuController"} + "mainMenuController": {"@": "mainMenuController"}, + "rightPanelContainer": {"#": "rightPanelContainer" }, + "panelSplitter": {"@": "splitter3"}, + "timelineSplitter": {"@": "splitter4"} } } } @@ -374,7 +422,9 @@
+
+
@@ -382,20 +432,13 @@
- -
- -
-
-
-
-
+
-
+
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 2a6e49f7..e29c5057 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -23,6 +23,80 @@ exports.Ninja = Montage.create(Component, { value: null }, + _isResizing: { + value: false + }, + _resizedHeight : { + value: 0 + }, + _height: { + value: null + }, + + height: { + get: function() { + return this._height; + }, + set: function(val) { + if(this._height != val) { + this._height = val; + this.needsDraw = true; + } + + } + }, + + _resizedWidth : { + value: 0 + }, + _width: { + value: null + }, + + width: { + get: function() { + return this._width; + }, + set: function(val) { + if(this._width != val) { + this._width = val; + this.needsDraw = true; + } + + } + }, + + handleResizeStart: { + value:function(e) { + this.isResizing = true; + this.height = parseInt(this.timeline.element.offsetHeight); + this.width = parseInt(this.rightPanelContainer.offsetWidth); + this.needsDraw = true; + } + }, + + handleResizeMove: { + value:function(e) { + this._resizedHeight = e._event.dY; + this._resizedWidth = e._event.dX; + console.log("resizing"); + this.stage.resizeCanvases = true; + this.needsDraw = true; + } + }, + + handleResizeEnd: { + value: function(e) { + this.height -= this._resizedHeight; + this.width -= this._resizedWidth; + this.stage.resizeCanvases = true; + this._resizedHeight = 0; + this._resizedWidth = 0; + this.isResizing = false; + this.needsDraw = true; + } + }, + selectedElements: { value: [] }, @@ -78,12 +152,45 @@ exports.Ninja = Montage.create(Component, { } }, + willDraw: { + value: function() { + if (this.height === null) { + this.height = parseInt(this.timeline.element.offsetHeight); + } + if (this.width === null) { + this.width = parseInt(this.rightPanelContainer.offsetWidth); + } + } + }, + + draw: { + value: function() { + if (this.height - this._resizedHeight < 30) { + this.timelineSplitter.collapsed = true; + } else { + this.timelineSplitter.collapsed = false; + } + if (this.width - this._resizedWidth < 30) { + this.panelSplitter.collapsed = true; + } else { + this.panelSplitter.collapsed = false; + } + + this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; + this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; + } + }, + _didDraw: { value: false }, didDraw: { value: function() { + if (!this.isResizing) { + this.height = this.timeline.element.offsetHeight; + this.width = this.rightPanelContainer.offsetWidth; + } if(!this._didDraw) { if (!this.application.ninja.coreIoApi.ioServiceDetected) { var check = this.application.ninja.coreIoApi.cloudAvailable(); diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js index e92cb2dd..6791e0d5 100755 --- a/js/panels/Splitter.js +++ b/js/panels/Splitter.js @@ -55,7 +55,7 @@ exports.Splitter = Montage.create(Component, { }, set: function(value) { this._collapsed = value; - + this.needsDraw = true; this.application.localStorage.setItem(this.element.getAttribute("data-montage-id"), {"version": this.version, "value": value}); } }, diff --git a/js/panels/resize-composer.js b/js/panels/resize-composer.js index 6e5e89f8..450dc7b6 100644 --- a/js/panels/resize-composer.js +++ b/js/panels/resize-composer.js @@ -9,6 +9,14 @@ var Composer = require("montage/ui/composer/composer").Composer; exports.ResizeComposer = Montage.create(Composer, { + xAxis: { + value: true + }, + + yAxis: { + value: true + }, + enabled : { enumerable: false, value: true @@ -104,8 +112,19 @@ exports.ResizeComposer = Montage.create(Composer, { captureMousemove: { value: function(e) { - this._deltaX = e.clientX - this._startX; - this._deltaY = e.clientY - this._startY; + + if (this.xAxis) { + this._deltaX = e.clientX - this._startX; + } + else { + this._deltaX = 0; + } + if (this.yAxis) { + this._deltaY = e.clientY - this._startY; + } + else { + this._deltaY = 0; + } this._executeEvent("resizeMove"); } }, diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index ad67cada..1f471431 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -200,14 +200,18 @@ exports.StageView = Montage.create(Component, { }, showRulers:{ value:function(){ - this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')"; - this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')"; + this.application.ninja.rulerTop.style.display = "block"; + this.application.ninja.rulerLeft.style.display = "block"; +// this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')"; +// this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')"; } }, hideRulers:{ value:function(){ - this.application.ninja.rulerTop.style.background = "rgb(128,128,128)"; - this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)"; + this.application.ninja.rulerTop.style.display = "none"; + this.application.ninja.rulerLeft.style.display = "none"; +// this.application.ninja.rulerTop.style.background = "rgb(128,128,128)"; +// this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)"; } }, -- cgit v1.2.3 From 94a4be4b7b77f4c1498e8fb65e00d73ccbd56813 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 23 Mar 2012 14:33:41 -0700 Subject: Resizers updated Signed-off-by: Armen Kesablyan --- js/components/layout/bread-crumb.reel/bread-crumb.css | 10 ++++++++-- js/ninja.reel/ninja.html | 4 ++++ js/ninja.reel/ninja.js | 13 +++++++++++++ js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 4 ++-- js/panels/resize-composer.js | 13 +++++++------ 5 files changed, 34 insertions(+), 10 deletions(-) (limited to 'js') diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css index dcfd471c..26a56b45 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.css +++ b/js/components/layout/bread-crumb.reel/bread-crumb.css @@ -4,14 +4,20 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.breadcrumbTrail{ +.breadcrumbTrail { + background-color: #282828; - border-style: double; height: 26px; position:relative; -webkit-box-flex: 0; } +.mainContentContainer > section.breadcrumbTrail { + border:0; + margin:0; + border-bottom:1px solid #000; + margin-bottom:1px; +} .breadcrumbTrail button.nj-skinned { float: left; width: 60px; diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index b3545329..7b5a6e52 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -148,6 +148,10 @@ { "type": "resizeEnd", "listener": {"@": "owner"} + }, + { + "type": "resizeReset", + "listener": {"@": "owner"} } ] }, diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index e29c5057..b432755f 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -97,6 +97,19 @@ exports.Ninja = Montage.create(Component, { } }, + handleResizeReset: { + value: function(e) { + this.width = 253; + this.height = 140; + this._resizedHeight = 0; + this._resizedWidth = 0; + this.needsDraw = true; + this.timelineSplitter.collapsed = false; + this.panelSplitter.collapsed = false; + } + }, + + selectedElements: { value: [] }, diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 129b9771..067285ae 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -10,12 +10,12 @@ height: 100%; } .maintimeline{ - border-style: double; -webkit-box-flex: 1; display: -webkit-box; - -webkit-box-orient: horizontal + -webkit-box-orient: horizontal; height : 100%; position: relative; + margin-top:1px; } .leftinside{ height: 100%; diff --git a/js/panels/resize-composer.js b/js/panels/resize-composer.js index 450dc7b6..0d1774cd 100644 --- a/js/panels/resize-composer.js +++ b/js/panels/resize-composer.js @@ -77,6 +77,7 @@ exports.ResizeComposer = Montage.create(Composer, { load: { value: function() { this.element.addEventListener("mousedown", this, true); + this.element.addEventListener("dblclick", this, true); } }, @@ -112,7 +113,6 @@ exports.ResizeComposer = Montage.create(Composer, { captureMousemove: { value: function(e) { - if (this.xAxis) { this._deltaX = e.clientX - this._startX; } @@ -129,12 +129,13 @@ exports.ResizeComposer = Montage.create(Composer, { } }, - deserializedFromTemplate: { - value: function() { - if (this.component) { - this.component.addComposer(this); - } + captureDblclick: { + value:function(e) { + this._reset(); + this._executeEvent("resizeReset"); } } + + }); \ No newline at end of file -- cgit v1.2.3 From 3a4ddfc232372d2d8d956778f060d8cabe316818 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 23 Mar 2012 14:37:39 -0700 Subject: Removing old code Signed-off-by: Armen Kesablyan --- js/mediators/binding-mediator.js | 14 -------------- js/mediators/keyboard-mediator.js | 2 -- 2 files changed, 16 deletions(-) delete mode 100644 js/mediators/binding-mediator.js (limited to 'js') diff --git a/js/mediators/binding-mediator.js b/js/mediators/binding-mediator.js deleted file mode 100644 index 10d3f7c6..00000000 --- a/js/mediators/binding-mediator.js +++ /dev/null @@ -1,14 +0,0 @@ -/* - 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. -
*/ - -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; - -exports.bindingMediator = Montage.create(Component, { - - - -}); \ No newline at end of file diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 85a46739..65dd34cd 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js @@ -203,8 +203,6 @@ exports.KeyboardMediator = Montage.create(Component, { } - - if((evt.keyCode == Keyboard.ENTER) && (evt.ctrlKey || evt.metaKey)) { this.application.ninja.executeChromePreview(); return; -- cgit v1.2.3 From 28b7e870ac4cd023ddf1ffee7a1b122257f57190 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 23 Mar 2012 15:30:17 -0700 Subject: minor glitch in calculations in snap code Signed-off-by: Armen Kesablyan --- js/ninja.reel/ninja.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index b432755f..50343a18 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -178,7 +178,7 @@ exports.Ninja = Montage.create(Component, { draw: { value: function() { - if (this.height - this._resizedHeight < 30) { + if (this.height - this._resizedHeight < 46) { this.timelineSplitter.collapsed = true; } else { this.timelineSplitter.collapsed = false; -- cgit v1.2.3