From 6b67b498b3b1eec82e7bb7f34261e2c390506616 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 30 Apr 2012 16:04:13 -0700 Subject: Updating id to data-montage-id (and associated CSS, if necessary) in some of our custom ui controls (such as hottest, slider, etc.), materials panels and three-d section of the PI. Signed-off-by: Nivesh Rajbhandari --- .../materials-library-panel.css | 43 +++++++++------------- .../materials-library-panel.html | 14 +++---- .../materials-popup.reel/materials-popup.css | 15 +++++--- .../materials-popup.reel/materials-popup.html | 26 ++++--------- .../sections/three-d-view.reel/three-d-view.html | 30 +++++++-------- 5 files changed, 57 insertions(+), 71 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css index fe88ebf6..bed3acfe 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css @@ -5,43 +5,34 @@ */ .materials_library_panel hr { - float: left; - clear: both; - width: 100%; - display: block; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242)); - border: none; - height: 2px; - margin: 4px 0px 4px 0px; + float: left; + clear: both; + width: 100%; + display: block; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242)); + border: none; + height: 2px; + margin: 4px 0 4px 0; } -#ml_buttons { +.ml_buttons { clear:both; float: left; - margin: 0px -4px 0px 4px; + margin: 0 -4px 0 4px; width: 97%; } -#ml_buttons .nj-skinned{ - height: 22px; - overflow: hidden; - display: block; - cursor: pointer; - margin: 0px 1px; -} - -#ml_add_btn { - float: left; - width: 60px; -} - -#ml_copy_btn { +.ml_buttons .nj-skinned { + height: 22px; + overflow: hidden; + display: block; + cursor: pointer; + margin: 0 1px; float: left; width: 60px; } -#ml_delete_btn { +.ml_buttons .nj-skinned:last-child { float: right; - width: 60px; } \ No newline at end of file diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html index 741ff6aa..7fc48a55 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html @@ -88,15 +88,15 @@ -
-
-
+
+
+

-
- - - +
+ + +
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css index 2d339411..943d9bcb 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.css +++ b/js/panels/Materials/materials-popup.reel/materials-popup.css @@ -21,15 +21,15 @@ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242)); border: none; height: 2px; - margin: 4px 0px 4px 0px; + margin: 4px 0 4px 0; } -#mp_title { - margin: 4px 0px 0px 0px; +.mp_title { + margin: 4px 0 0 0; text-align: center; } -#mp_preview { +.mp_preview { height: 100px; text-align: center; } @@ -84,12 +84,17 @@ width: 27px !important; height: 27px !important; overflow:hidden !important; + margin-top: -6px; +} + +.mp_properties_list .mp_property:first-child { + margin-bottom: 12px; } .mp_buttons { clear:both; float: left; - margin: 0px -4px 0px 4px; + margin: 0 -4px 4px 4px; width: 97%; } diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html index 9fdbc00d..d18599d6 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.html +++ b/js/panels/Materials/materials-popup.reel/materials-popup.html @@ -88,29 +88,19 @@ - -
-
Material Name
- +
+
Material Name

- -
Preview Pane
- +
Preview Pane

- -
-
+
+
-
- -
- - +
+ +
-
- - \ No newline at end of file diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html index b82124d0..5ef13fab 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html @@ -259,43 +259,43 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -
-
+
+
-
+
-
+

- +
-
+
- +
-
+
- +
-
+
@@ -306,7 +306,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
-
+
@@ -314,7 +314,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
-
+
@@ -322,7 +322,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
-
+
@@ -336,7 +336,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
-
+
@@ -347,7 +347,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
- +
-- cgit v1.2.3 From 5a74b74e8ec76d60cadf623cabaa0b667f1c4058 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 2 May 2012 11:08:59 -0700 Subject: code cleanup Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index ee90cd64..8c2daa14 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -208,11 +208,7 @@ exports.Properties = Montage.create(Component, { this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle"); } - if(ElementsMediator.getProperty(stage, "-webkit-transform-style") === "preserve-3d") { - this.threeD.flatten = false; - } else { - this.threeD.flatten = true; - } + this.threeD.flatten = ElementsMediator.getProperty(stage, "-webkit-transform-style") !== "preserve-3d"; if(this.customPi !== stage.elementModel.pi) { // We need to unregister color chips from the previous selection from the Color Model -- cgit v1.2.3 From 4feaf41f201e56c1332208851d7dee4f060aaf89 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 3 May 2012 09:59:47 -0700 Subject: Changing ID to Montage-ID for Color Panel --- js/panels/color/colorchippopup.reel/colorchippopup.html | 2 +- js/panels/color/colorpanelbase.reel/colorpanelbase.html | 2 +- js/panels/color/colorpanelpopup.reel/colorpanelpopup.html | 2 +- js/panels/color/colortoolbar.reel/colortoolbar.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) (limited to 'js/panels') diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.html b/js/panels/color/colorchippopup.reel/colorchippopup.html index ff0c6498..cdb26894 100755 --- a/js/panels/color/colorchippopup.reel/colorchippopup.html +++ b/js/panels/color/colorchippopup.reel/colorchippopup.html @@ -28,7 +28,7 @@ -
+
#
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.html b/js/panels/color/colorpanelbase.reel/colorpanelbase.html index f40bd448..19bc4b6b 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.html +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.html @@ -26,7 +26,7 @@ -
+
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html index 0698a6dc..f65d5bc0 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html @@ -26,7 +26,7 @@ -
+
diff --git a/js/panels/color/colortoolbar.reel/colortoolbar.html b/js/panels/color/colortoolbar.reel/colortoolbar.html index e32a475c..6561ed99 100755 --- a/js/panels/color/colortoolbar.reel/colortoolbar.html +++ b/js/panels/color/colortoolbar.reel/colortoolbar.html @@ -28,7 +28,7 @@ -
+
-- cgit v1.2.3 From 2078bfa96afaef40acb4edac99848ba55e808ef1 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 15:15:21 -0700 Subject: Refactor creating elements. Removed makeNJElement and separated the model creation Signed-off-by: Valerio Virgillito --- .../components-panel.reel/components-panel.js | 64 ++++++++++------------ 1 file changed, 30 insertions(+), 34 deletions(-) (limited to 'js/panels') diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js index 79eac37b..4169423b 100755 --- a/js/panels/components-panel.reel/components-panel.js +++ b/js/panels/components-panel.reel/components-panel.js @@ -317,81 +317,77 @@ exports.ComponentsPanel = Montage.create(Component, { switch(name) { case "anchor": - el = NJUtils.makeNJElement("a", "Anchor", "component"); - el.elementModel.pi = "AnchorPi"; + el = document.application.njUtils.make("a", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Anchor"); el.setAttribute("href", "http://www.motorola.com"); el.innerHTML = "link"; break; case "button": - el = NJUtils.makeNJElement(name, "Button", "component"); - el.elementModel.pi = "ButtonPi"; + el = document.application.njUtils.make(name, null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Button"); el.setAttribute("type", "button"); el.innerHTML = "Button"; break; case "checkbox": - el = NJUtils.makeNJElement("input", "Checkbox", "component"); - el.elementModel.pi = "CheckboxPi"; + el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Checkbox"); el.setAttribute("type", "checkbox"); break; case "imageComponent": - el = NJUtils.makeNJElement("image", "Image", "component"); - el.elementModel.pi = "ImagePi"; + el = document.application.njUtils.make("image", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Image"); el.setAttribute("width", 200); el.setAttribute("height", 200); break; case "numberInput": - el = NJUtils.makeNJElement("input", "Number Input", "component"); - el.elementModel.pi = "NumberInputPi"; + el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Number Input"); el.setAttribute("type", "number"); break; case "select": - el = NJUtils.makeNJElement("select", "Select", "component"); - el.elementModel.pi = "SelectInputPi"; + el = document.application.njUtils.make("select", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Select"); break; case "radioButton": - el = NJUtils.makeNJElement("input", "Radio Button", "component"); - el.elementModel.pi = "RadioButtonPi"; + el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Radio Button"); el.setAttribute("type", "radio"); break; case "rangeInput": - el = NJUtils.makeNJElement("input", "Range Input", "component"); - el.elementModel.pi = "RangeInputPi"; + el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Range Input"); el.setAttribute("type", "range"); break; case "textfield": case "searchfield": - el = NJUtils.makeNJElement("input", "Textfield", "component"); - el.elementModel.pi = "TextfieldPi"; + el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Textfield"); el.setAttribute("type", "text"); break; case "textarea": - el = NJUtils.makeNJElement("textarea", "TextArea", "component"); - el.elementModel.pi = "TextareaPi"; + el = document.application.njUtils.make("textarea", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "TextArea"); break; case "toggleButton": - el = NJUtils.makeNJElement("button", "Toggle Button", "component"); - el.elementModel.pi = "ToggleButtonPi"; + el = document.application.njUtils.make("button", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Toggle Button"); el.innerHTML = "Off"; break; case "map": - el = NJUtils.makeNJElement("div", "Map", "component"); - el.elementModel.pi = "MapPi"; - el.elementModel.isComponent = true; + el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Map"); break; case "feedreader": - el = NJUtils.makeNJElement("div", "Feed Reader", "component"); - el.elementModel.pi = "FeedReaderPi"; - el.elementModel.isComponent = true; + el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Feed Reader"); break; case "picasa-carousel": - el = NJUtils.makeNJElement("div", "Picasa Carousel", "component"); - el.elementModel.pi = "PicasaCarouselPi"; - el.elementModel.isComponent = true; + el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Picasa Carousel"); break; case "youtube-channel": - el = NJUtils.makeNJElement("div", "Youtube Channel", "component"); - el.elementModel.pi = "YoutubeChannelPi"; - el.elementModel.isComponent = true; + el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); + document.application.njUtils.createModelForComponent(el, "Youtube Channel"); break; } -- cgit v1.2.3 From f1f2e65712d7c5a163dd6fdbd8f5911555c3f377 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 17:46:23 -0700 Subject: finishing to replace all id with data-montage-id Signed-off-by: Valerio Virgillito --- js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html | 6 +++--- .../ComputedStyleSubPanel.html | 8 ++++---- js/panels/Panel.reel/Panel.html | 14 +++++++------- js/panels/PanelContainer.reel/PanelContainer.html | 2 +- js/panels/components-panel.reel/components-panel.html | 4 ++-- .../animations-presets.reel/animations-presets.html | 4 ++-- js/panels/presets/content.reel/content.html | 12 ++++++------ .../presets/style-presets.reel/style-presets.html | 4 ++-- .../transitions-presets.reel/transitions-presets.html | 4 ++-- js/panels/properties.reel/properties.html | 16 ++++++++-------- js/panels/properties.reel/section.reel/section.html | 6 +++--- .../custom-rows/color-select.reel/color-select.html | 6 +++--- .../sections/custom-rows/dual-row.reel/dual-row.html | 6 +++--- .../custom-rows/single-row.reel/single-row.html | 4 ++-- .../properties.reel/sections/custom.reel/custom.html | 6 +++--- .../position-and-size.reel/position-and-size.html | 18 +++++++++--------- 16 files changed, 60 insertions(+), 60 deletions(-) (limited to 'js/panels') diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html index c62b2b23..1d74fab4 100755 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html @@ -38,13 +38,13 @@ -
+

Stylesheets

-
+
    @@ -59,7 +59,7 @@ 0 elements selected -
    +
    diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html index 53c243a8..25196bc6 100755 --- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html +++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html @@ -26,10 +26,10 @@ -
    +
    - - +
    -
    +
    diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html index a0e1bbe9..f0fb1044 100755 --- a/js/panels/Panel.reel/Panel.html +++ b/js/panels/Panel.reel/Panel.html @@ -135,19 +135,19 @@ -
    +
    -
    -
    +
    +
    -
    +
    diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index e5cbbe32..dfdaa6c5 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -96,7 +96,7 @@ -
    +
    diff --git a/js/panels/components-panel.reel/components-panel.html b/js/panels/components-panel.reel/components-panel.html index c78988e0..1a257957 100755 --- a/js/panels/components-panel.reel/components-panel.html +++ b/js/panels/components-panel.reel/components-panel.html @@ -53,8 +53,8 @@ -
    -
    +
    +
    diff --git a/js/panels/presets/animations-presets.reel/animations-presets.html b/js/panels/presets/animations-presets.reel/animations-presets.html index d333cf97..347e5497 100644 --- a/js/panels/presets/animations-presets.reel/animations-presets.html +++ b/js/panels/presets/animations-presets.reel/animations-presets.html @@ -48,8 +48,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -
    -
    +
    +
    \ No newline at end of file diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html index 27928670..50a48389 100644 --- a/js/panels/presets/content.reel/content.html +++ b/js/panels/presets/content.reel/content.html @@ -55,13 +55,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -
    -
    -- cgit v1.2.3 From d3288216b62621b149fa032ff8a1b415e450b61f Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 22:28:20 -0700 Subject: Fixing the lock button css Signed-off-by: Valerio Virgillito --- .../sections/position-and-size.reel/position-and-size.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html index 93aea50e..a7aac84e 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html @@ -113,7 +113,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot

    - +
    -- cgit v1.2.3 From dc93269cfa7c315d22d85c8217e2412749643f28 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 22:51:10 -0700 Subject: Removing unused components references Signed-off-by: Valerio Virgillito --- js/panels/PanelContainer.reel/PanelContainer.html | 1 - js/panels/Timeline/Layer.reel/Layer.html | 4 +--- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 1 - js/panels/presets/style-presets.reel/style-presets.html | 3 +-- 4 files changed, 2 insertions(+), 7 deletions(-) (limited to 'js/panels') diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index dfdaa6c5..ccefd3ae 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -67,7 +67,6 @@ "properties": { "element": {"#": "panelContainer"}, "panelData": {"@": "panelData" }, - "panelController" : {"@": "PanelController"}, "panel_0": {"@": "panel_0"}, "panel_1": {"@": "panel_1"}, "panel_2": {"@": "panel_2"}, diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 10334b31..9288d718 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -17,14 +17,12 @@ "styleRepetition" : {"@":"repetition1"}, "dynamicLayerName" : {"@":"dtext1"}, "dynamicLayerTag" : {"@": "dtext2"}, - "slotStyle" : {"@":"slot1"}, "mainCollapser" : {"@" : "mainCollapser"}, "positionCollapser" : {"@" : "positionCollapser"}, "transformCollapser" : {"@" : "transformCollapser"}, "styleCollapser" : {"@" : "styleCollapser"}, "clickerMain" : {"#" : "clicker-main"}, - "myLabel" : {"#" : "myLabel"}, - "dragDrop" : {"@" : "DragDrop"} + "myLabel" : {"#" : "myLabel"} } }, "dtext1" : { diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 44ad9abb..5c5a8b76 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -15,7 +15,6 @@ "properties": { "element": {"#": "track"}, "tweenRepetition" : {"@" : "tweenRepetition"}, - "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, "tween": {"@" : "tween"}, "_mainCollapser" : {"@" : "mainCollapser"}, "_positionCollapser" : {"@" : "positionCollapser"}, diff --git a/js/panels/presets/style-presets.reel/style-presets.html b/js/panels/presets/style-presets.reel/style-presets.html index 4e97de58..a3d718bb 100644 --- a/js/panels/presets/style-presets.reel/style-presets.html +++ b/js/panels/presets/style-presets.reel/style-presets.html @@ -13,8 +13,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "owner": { "prototype" : "js/panels/presets/style-presets.reel[StylesLibrary]", "properties" : { - "element" : {"#" : "stylesLibrary"}, - "treeList" : {"@" : "treeList"} + "element" : {"#" : "stylesLibrary"} } }, "presetsController" : { -- cgit v1.2.3 From 22af7613f36f3a30653060284e144830f9164c45 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 4 May 2012 00:18:33 -0700 Subject: temporary commenting a timeline bug preventing nested selection Signed-off-by: Valerio Virgillito --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 48818e44..d1cab096 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -654,7 +654,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { //debugger; if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") { - this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; +// this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; } // Are we only showing animated layers? -- cgit v1.2.3 From 5e31f3a573307ffc17a19613a604a50feb7d0d51 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 4 May 2012 14:49:47 -0700 Subject: Fixing the color popup Signed-off-by: Valerio Virgillito --- js/panels/color/colorpopup-manager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index d6d94807..529ec1c8 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -70,7 +70,7 @@ exports.ColorPopupManager = Montage.create(Component, { // document.addEventListener('mousedown', function (e) { // - if (e._event.srcElement.id === 'stageCanvas' || e._event.srcElement.id === 'mainContainer' || e._event.srcElement.id === 'drawingCanvas') { + if (e._event.srcElement.getAttribute('data-montage-id') === 'stageCanvas' || e._event.srcElement.id === 'mainContainer' || e._event.srcElement.getAttribute('data-montage-id') === 'drawingCanvas') { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); } }.bind(this)); -- cgit v1.2.3 From 4ef8ec674695fb60c9ef6668206243471a0fe347 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 7 May 2012 17:17:17 -0700 Subject: Timeline: Move keyframe dragover and drop listeners to TimelinePanel for interaction improvements. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 111 +++++++++++++++++++-- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 99 ++---------------- 2 files changed, 116 insertions(+), 94 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 03db7880..4b82814b 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -259,6 +259,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { timeMarkerHolder:{ value:null }, + + // Drag and Drop properties _dragAndDropHelper : { value: false }, @@ -328,6 +330,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _scrollTracks: { value: false }, + + // Keyframe drag and drop properties + _draggingTrackId: { + value: false + }, + draggingTrackId: { + get: function() { + return this._draggingTrackId; + }, + set: function(newVal) { + this._draggingTrackId = newVal; + } + }, + + useAbsolutePosition:{ value:true }, @@ -352,8 +369,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); - //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); + this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); + this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); // Bind the handlers for the config menu this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); @@ -1501,11 +1519,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.needsDraw = true; } }, - handleKeyframeDragover: { - value: function(event) { - - } - }, handleLayerDragEnd : { value: function(event) { this._deleteHelper = true; @@ -1521,6 +1534,92 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.needsDraw = true; } }, + + // Keyframe drag-and-drop + handleKeyframeDragover: { + value: function(event) { + event.preventDefault(); + var currPos = 0; + /* + myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; + if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) { + this._scrollTracks = (this.user_layers.scrollTop - 10) + } + if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) { + this._scrollTracks = (this.user_layers.scrollTop - 20) + } + if ((myScrollTest > (this.user_layers.clientHeight + 10))) { + this._scrollTracks = (this.user_layers.scrollTop + 10) + } + if ((myScrollTest > (this.user_layers.clientHeight + 20))) { + this._scrollTracks = (this.user_layers.scrollTop + 20) + + } + */ + //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; + currPos = event.x - 277; + + // too much or too little? + if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition; + } + if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition; + } + //debugger; + this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px"; + this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true; + return false; + } + }, + handleKeyframeDrop: { + value: function(event) { + event.stopPropagation(); + //this.element.classList.remove("dragOver"); + //if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { + //this.parentComponent.parentComponent.dropLayerID = this.layerID; + //} + + /* + * First, what keyframe is it (get the index); + * Limit keyframe position to between index-1 and index+1 keyFramePosition + * On update, be sure to update index+1's information too + * + */ + + var currPos = event.x - 274, + currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80), + currentMillisec = 0, + i = 0, + tweenIndex = this.trackRepetition.childComponents[this.draggingTrackId-1].draggingIndex; + + // too much or too little? + if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition + 3; + } + if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition + 3; + } + + currentMillisec = currentMillisecPerPixel * currPos; + + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex - 1].tweenData.keyFramePosition; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFramePosition = currPos; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanPosition = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].setData(); + if (tweenIndex < this.trackRepetition.childComponents[this.draggingTrackId-1].tweens.length -1) { + var spanWidth = this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.keyFramePosition - currPos; + var spanPosition = currPos; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanWidth = spanWidth; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanPosition = currPos; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex+1].setData(); + } + this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].selectTween(); + this.trackRepetition.childComponents[this.draggingTrackId-1].updateKeyframeRule(); + return false; + } + }, /* === END: Controllers === */ /* === BEGIN: Logging routines === */ diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 836bb60f..76d52036 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -355,6 +355,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _dragAndDropHelperCoords: { value: false }, + dragAndDropHelperCoords: { + get: function() { + return this._dragAndDropHelperCoords; + }, + set: function(newVal) { + this._dragAndDropHelperCoords = newVal; + } + }, _dragAndDropHelperOffset : { value: false }, @@ -443,10 +451,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.eventManager.addEventListener("tlZoomSlider", this, false); // Drag and Drop event handlers - this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); + //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false); - this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); + //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); } }, @@ -881,45 +889,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._keyframeMaxPosition = maxPosition-9; this._appendHelper = true; this._deleteHelper = false; + this.parentComponent.parentComponent.draggingTrackId = this.trackID; } }, - handleKeyframeDragover: { - value: function(event) { - event.preventDefault(); - var currPos = 0; - /* - myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; - if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) { - this._scrollTracks = (this.user_layers.scrollTop - 10) - } - if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) { - this._scrollTracks = (this.user_layers.scrollTop - 20) - } - if ((myScrollTest > (this.user_layers.clientHeight + 10))) { - this._scrollTracks = (this.user_layers.scrollTop + 10) - } - if ((myScrollTest > (this.user_layers.clientHeight + 20))) { - this._scrollTracks = (this.user_layers.scrollTop + 20) - - } - */ - //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; - currPos = event.x - 277; - - // too much or too little? - if (currPos < this._keyframeMinPosition) { - currPos = this._keyframeMinPosition; - } - if (currPos > this._keyframeMaxPosition) { - currPos = this._keyframeMaxPosition; - } - - this._dragAndDropHelperCoords = currPos + "px"; - this.needsDraw = true; - return false; - } - }, - handleKeyframeDragend : { value: function(event) { this._deleteHelper = true; @@ -928,55 +900,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - handleKeyframeDrop : { - value: function(event) { - event.stopPropagation(); - //this.element.classList.remove("dragOver"); - //if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { - //this.parentComponent.parentComponent.dropLayerID = this.layerID; - //} - - /* - * First, what keyframe is it (get the index); - * Limit keyframe position to between index-1 and index+1 keyFramePosition - * On update, be sure to update index+1's information too - * - */ - - var currPos = event.x - 274, - currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80), - currentMillisec = 0, - i = 0, - tweenIndex = this.draggingIndex; - - // too much or too little? - if (currPos < this._keyframeMinPosition) { - currPos = this._keyframeMinPosition + 3; - } - if (currPos > this._keyframeMaxPosition) { - currPos = this._keyframeMaxPosition + 3; - } - - currentMillisec = currentMillisecPerPixel * currPos; - - this.tweens[tweenIndex].tweenData.spanWidth = currPos - this.tweens[tweenIndex - 1].tweenData.keyFramePosition; - this.tweens[tweenIndex].tweenData.keyFramePosition = currPos; - this.tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec; - this.tweens[tweenIndex].tweenData.spanPosition = currPos - this.tweens[tweenIndex].tweenData.spanWidth; - this.tweenRepetition.childComponents[tweenIndex].setData(); - if (tweenIndex < this.tweens.length -1) { - var spanWidth = this.tweens[tweenIndex +1].tweenData.keyFramePosition - currPos; - var spanPosition = currPos; - this.tweens[tweenIndex +1].tweenData.spanWidth = spanWidth; - this.tweens[tweenIndex +1].tweenData.spanPosition = currPos; - this.tweenRepetition.childComponents[tweenIndex+1].setData(); - } - this.tweenRepetition.childComponents[tweenIndex].selectTween(); - this.updateKeyframeRule(); - return false; - } - }, - /* Begin: Logging routines */ _boolDebug: { -- cgit v1.2.3 From 307d339e45b209dab80ff88196a9f85f8d58f425 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 8 May 2012 11:48:29 -0700 Subject: Timeline: Update drag and drop handlers to be unique for drag and drop type. --- js/panels/Timeline/Layer.reel/Layer.js | 10 +++++++++ .../Timeline/TimelinePanel.reel/TimelinePanel.js | 26 ++++++++++++++++++++++ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++++ 3 files changed, 40 insertions(+) (limited to 'js/panels') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 34c300df..c213cb70 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -868,6 +868,9 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleDragleave: { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } this.element.classList.remove("dragOver"); } }, @@ -875,10 +878,14 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Layer'); + this.parentComponent.parentComponent.draggingType = "layer"; } }, handleDragover: { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } event.preventDefault(); this.element.classList.add("dragOver"); event.dataTransfer.dropEffect = "move"; @@ -888,6 +895,9 @@ var Layer = exports.Layer = Montage.create(Component, { handleDrop : { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } event.stopPropagation(); this.element.classList.remove("dragOver"); if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 4b82814b..41472359 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -273,6 +273,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _dragLayerID : { value: null }, + _draggingType: { + value: false + }, + draggingType: { + get: function() { + return this._draggingType; + }, + set: function(newVal) { + this._draggingType = newVal; + } + }, layersDragged:{ value:[], @@ -1499,6 +1510,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDragover: { value: function(event) { + if (this.draggingType !== "layer") { + return; + } var currPos = 0, myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrol