From fea875906664f12feaad0f282901fa8d9a8b054a Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 22 Mar 2012 11:52:44 -0700 Subject: Presets Panel - Adding presets controller and removing functionality from panel code --- .../animations-presets.reel/animations-presets.js | 47 +-------------------- js/panels/presets/default-animation-presets.js | 2 - js/panels/presets/default-style-presets.js | 11 ++--- js/panels/presets/default-transition-presets.js | 8 ---- .../presets/style-presets.reel/style-presets.js | 49 +--------------------- .../transitions-presets.js | 20 +-------- 6 files changed, 9 insertions(+), 128 deletions(-) (limited to 'js/panels') diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js index ab200212..6a16da54 100644 --- a/js/panels/presets/animations-presets.reel/animations-presets.js +++ b/js/panels/presets/animations-presets.reel/animations-presets.js @@ -22,52 +22,7 @@ exports.AnimationsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - //debugger; - var selection = this.application.ninja.selectedElements, - stylesController = this.application.ninja.stylesController, - selectorBase = presetData.selectorBase, - self = this; - - if(!selection || !selection.length || selection.length === 0) { - return false; - } - - selectorBase = stylesController.generateClassName(selectorBase); - - presetData.rules.forEach(function(rule) { - if(rule.isKeyFrameRule) { - this.application.ninja.stylesController.addRule( - '@-webkit-keyframes ' + presetData.selectorBase, - this.stringifyKeys(rule.keys) - ); - } else { - this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); - } - - }, this); - - selection.forEach(function(el) { - el._element.classList.add(selectorBase); - }, this); - - } - }, - - stringifyKeys : { - value: function(keysArray) { - var keysString = ''; - - keysArray.forEach(function(key) { - var styles = '', style; - - for(style in key.styles) { - styles += style + ':' + key.styles[style] + '; '; - } - - keysString += key.keyText + ' {' + styles + ' }'; - }); - - return keysString; + this.application.ninja.presetsController.applyPreset(presetData); } } }); diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index 10a3e906..fa0127c2 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -13,7 +13,6 @@ exports.animationPresets = { "text": "Border Morph", "selectorBase" : "border-morph", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-animation": "border-morph 2s infinite" } @@ -43,7 +42,6 @@ exports.animationPresets = { "text": "Rotater", "selectorBase" : "rotate-with-alpha-keyframes", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-animation-name": "rotate-with-alpha-keyframes", "-webkit-animation-duration": "5s", diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js index 3677d976..109faae2 100644 --- a/js/panels/presets/default-style-presets.js +++ b/js/panels/presets/default-style-presets.js @@ -11,9 +11,9 @@ exports.stylePresets = { "children": [ { "text": "Border-Radius", + "id": "njBorderRadius", "selectorBase" : "border-radius-preset", "rules" : [{ - "selectorSuffix" : "", "styles" : { "border-radius": "100px", "border" : "1px solid #333" @@ -22,9 +22,9 @@ exports.stylePresets = { }, { "text": "Drop Shadow", + "id": "njDropShadow", "selectorBase" : "drop-shadow", "rules" : [{ - "selectorSuffix" : "", "styles" : { "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", "border" : "1px solid #CCC" @@ -33,9 +33,10 @@ exports.stylePresets = { }, { "text": "Fancy Box", + "id": "njFancyBox", "selectorBase" : "fancy-box", "rules" : [{ - "selectorSuffix" : "", + "selectorSuffix": "", "styles" : { "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", "border" : "1px solid #FFF", @@ -50,9 +51,9 @@ exports.stylePresets = { "children": [ { "text": "Italic", + "id": "njItalic", "selectorBase" : "italicize", "rules" : [{ - "selectorSuffix" : "", "styles" : { "font-style": "italic" } @@ -60,9 +61,9 @@ exports.stylePresets = { }, { "text": "Text Shadow", + "id": "njTextShadow", "selectorBase" : "italicize", "rules" : [{ - "selectorSuffix" : "", "styles" : { "text-shadow": "1px 1px 3px #333" } diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js index 15f4882f..f8968085 100644 --- a/js/panels/presets/default-transition-presets.js +++ b/js/panels/presets/default-transition-presets.js @@ -13,7 +13,6 @@ exports.transitionPresets = { "text": "Fade In", "selectorBase" : "fade-in", "rules" : [{ - "selectorSuffix": "", "styles" : { "opacity": "0.25", "-webkit-transition": "all 0.4s ease-in" @@ -29,7 +28,6 @@ exports.transitionPresets = { "text": "Fade Out", "selectorBase" : "fade-out", "rules" : [{ - "selectorSuffix": "", "styles" : { "opacity": "1", "-webkit-transition": "all 0.4s ease-in" @@ -48,7 +46,6 @@ exports.transitionPresets = { "text": "Slide Right", "selectorBase" : "slide-right", "rules" : [{ - "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -63,7 +60,6 @@ exports.transitionPresets = { "text": "Slide Left", "selectorBase" : "slide-left", "rules" : [{ - "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -78,7 +74,6 @@ exports.transitionPresets = { "text": "Rotate", "selectorBase" : "rotate", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -92,7 +87,6 @@ exports.transitionPresets = { "text": "Scale Up", "selectorBase" : "scale-up", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -107,7 +101,6 @@ exports.transitionPresets = { "text": "Scale Down", "selectorBase" : "scale-down", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -122,7 +115,6 @@ exports.transitionPresets = { "text": "Remove 3D", "selectorBase" : "remove-3d", "rules" : [{ - "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js index 11f41822..6a28e069 100644 --- a/js/panels/presets/style-presets.reel/style-presets.js +++ b/js/panels/presets/style-presets.reel/style-presets.js @@ -22,60 +22,13 @@ exports.StylesLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - var selection = this.application.ninja.selectedElements, - stylesController = this.application.ninja.stylesController, - selectorBase = presetData.selectorBase, - self = this, className; - - if(!selection || !selection.length || selection.length === 0) { - return false; - } - - function setStopRuleSelector(selector) { - self.application.ninja - .currentDocument.documentRoot - .elementModel.controller - .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector); - } - - selectorBase = stylesController.generateClassName(selectorBase); - - presetData.rules.forEach(function(rule) { - stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles); - }, this); - - selection.forEach(function(el) { - el._element.style.webkitTransition = "all 450ms linear"; - - el._element.addEventListener("webkitTransitionEnd", function presetTransition(e) { - el._element.style.webkitTransition = ''; - setStopRuleSelector("*"); - this.removeEventListener("webkitTransitionEnd", presetTransition, true); - - }, true); - setStopRuleSelector("transitionStopRule"); - el._element.classList.add(selectorBase); - - //// Keep track of elements with presets and don't add duplicates - - }, this); - - + this.application.ninja.presetsController.applyPreset(presetData, true); } }, handleDragEnd : { value: function(sourceObject) { console.log(sourceObject); } - }, - shouldChangeSelection : { - value : function(controller, newSelection, oldSelection) { - // - //debugger; - console.log('1Handle should change selection'); - return false; - } } - }); diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js index f7d84085..ace38dbb 100644 --- a/js/panels/presets/transitions-presets.reel/transitions-presets.js +++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js @@ -22,25 +22,7 @@ exports.TransitionsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - var selection = this.application.ninja.selectedElements, - stylesController = this.application.ninja.stylesController, - selectorBase = presetData.selectorBase, - self = this; - - if(!selection || !selection.length || selection.length === 0) { - return false; - } - - selectorBase = stylesController.generateClassName(selectorBase); - - presetData.rules.forEach(function(rule) { - this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); - }, this); - - selection.forEach(function(el) { - el._element.classList.add(selectorBase); - }, this); - + this.application.ninja.presetsController.applyPreset(presetData); } } }); -- 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/panels/Splitter.js | 2 +- js/panels/resize-composer.js | 23 +++++++++++++++++++++-- 2 files changed, 22 insertions(+), 3 deletions(-) (limited to 'js/panels') 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"); } }, -- 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/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 4 ++-- js/panels/resize-composer.js | 13 +++++++------ 2 files changed, 9 insertions(+), 8 deletions(-) (limited to 'js/panels') 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 01211be8e96360dcccdc421e5cb19c7708f5dfdd Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 28 Mar 2012 14:37:49 -0700 Subject: Bug #1073: Panels interact with hottest drag drop Signed-off-by: Armen Kesablyan --- js/panels/drag-drop-composer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/drag-drop-composer.js b/js/panels/drag-drop-composer.js index b36c8334..4791bd6d 100644 --- a/js/panels/drag-drop-composer.js +++ b/js/panels/drag-drop-composer.js @@ -91,7 +91,9 @@ exports.DragDropComposer = Montage.create(Composer, { e.stopImmediatePropagation(); if (!this._dragover) { this._dragover = true; - this.component.element.classList.add("dragOver"); + if (this.component.application.ninja.componentBeingDragged) { + this.component.element.classList.add("dragOver"); + } } } }, -- cgit v1.2.3 From bff711520b7d21cfffe07c7a14fe8870243ba796 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 29 Mar 2012 14:06:22 -0700 Subject: Resizing Bugs Signed-off-by: Armen Kesablyan --- js/panels/Splitter.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js index 6791e0d5..ac45b4ba 100755 --- a/js/panels/Splitter.js +++ b/js/panels/Splitter.js @@ -94,7 +94,11 @@ exports.Splitter = Montage.create(Component, { handleClick : { value: function() { if (!this.disabled) { - this.panel.addEventListener("webkitTransitionEnd", this, false); + if(this.panel.element) { + this.panel.element.addEventListener("webkitTransitionEnd", this, false); + } else { + this.panel.addEventListener("webkitTransitionEnd", this, false); + } this.collapsed = !this.collapsed; this.needsDraw = true; } @@ -103,7 +107,12 @@ exports.Splitter = Montage.create(Component, { handleWebkitTransitionEnd: { value: function() { - this.panel.removeEventListener("webkitTransitionEnd", this, false); + if(this.panel.element) { + this.panel.element.removeEventListener("webkitTransitionEnd", this, false); + } else { + this.panel.removeEventListener("webkitTransitionEnd", this, false); + } + this.application.ninja.stage.resizeCanvases = true; } }, -- cgit v1.2.3 From 7aefa059c79c9bef5c7a8a93cdfbd1ce55f69118 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 29 Mar 2012 16:28:34 -0700 Subject: Presets - Remove style transition when transition doesn't start. Also added temporary fix for aggregating animations (from timeline/presets) --- js/panels/presets/default-animation-presets.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index b12a94b2..578c1622 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -14,7 +14,9 @@ exports.animationPresets = { "selectorBase" : "border-morph", "rules" : [{ "styles" : { - "-webkit-animation": "border-morph 2s infinite" + "-webkit-animation-name": "border-morph", + "-webkit-animation-duration": "2s", + "-webkit-animation-iteration-count": "infinite" } }, { -- cgit v1.2.3 From 32654e945c0d44e0c293ddb32c67122b64673fd1 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 29 Mar 2012 17:09:57 -0700 Subject: CSS Panel - Fix animation duration value updates from "infinite" to integer. --- js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js index 0c950ffd..ecf0f9cd 100755 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js @@ -1691,7 +1691,7 @@ NJCSSStyle.prototype.styleChange = function() { NJCSSStyle.prototype.getUnits = function(val) { if(val.split(/\s/).length > 1) { return false; - } else if(/px|em|pt|in|cm|mm|ex|pc|%/.test(val)) { + } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) { return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1'); } return null; @@ -1771,7 +1771,7 @@ NJCSSStyle.prototype.updateValue = function(newValue, bypassUndo) { this.styleChange(); return true; } - + var IMPORTANT_FLAG = ' !important', dec = this.njRule.declaration, acceptAsValid = false, -- cgit v1.2.3 From 50125608bba2ebfae24c1e13ec030fe7a7128158 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 29 Mar 2012 17:13:28 -0700 Subject: merge from main --- js/panels/Splitter.js | 2 +- .../TimelinePanel.reel/css/TimelinePanel.css | 4 +- .../animations-presets.reel/animations-presets.js | 47 ++++++++++++++++++++- js/panels/presets/default-animation-presets.js | 2 + js/panels/presets/default-style-presets.js | 11 +++-- js/panels/presets/default-transition-presets.js | 8 ++++ .../presets/style-presets.reel/style-presets.js | 49 +++++++++++++++++++++- .../transitions-presets.js | 20 ++++++++- js/panels/resize-composer.js | 34 ++++----------- 9 files changed, 138 insertions(+), 39 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js index 6791e0d5..e92cb2dd 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/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 067285ae..129b9771 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/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js index 6a16da54..ab200212 100644 --- a/js/panels/presets/animations-presets.reel/animations-presets.js +++ b/js/panels/presets/animations-presets.reel/animations-presets.js @@ -22,7 +22,52 @@ exports.AnimationsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - this.application.ninja.presetsController.applyPreset(presetData); + //debugger; + var selection = this.application.ninja.selectedElements, + stylesController = this.application.ninja.stylesController, + selectorBase = presetData.selectorBase, + self = this; + + if(!selection || !selection.length || selection.length === 0) { + return false; + } + + selectorBase = stylesController.generateClassName(selectorBase); + + presetData.rules.forEach(function(rule) { + if(rule.isKeyFrameRule) { + this.application.ninja.stylesController.addRule( + '@-webkit-keyframes ' + presetData.selectorBase, + this.stringifyKeys(rule.keys) + ); + } else { + this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); + } + + }, this); + + selection.forEach(function(el) { + el._element.classList.add(selectorBase); + }, this); + + } + }, + + stringifyKeys : { + value: function(keysArray) { + var keysString = ''; + + keysArray.forEach(function(key) { + var styles = '', style; + + for(style in key.styles) { + styles += style + ':' + key.styles[style] + '; '; + } + + keysString += key.keyText + ' {' + styles + ' }'; + }); + + return keysString; } } }); diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index b12a94b2..64f91ea6 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -13,6 +13,7 @@ exports.animationPresets = { "text": "Border Morph", "selectorBase" : "border-morph", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-animation": "border-morph 2s infinite" } @@ -90,6 +91,7 @@ exports.animationPresets = { "text": "Rotater", "selectorBase" : "rotate-with-alpha-keyframes", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-animation-name": "rotate-with-alpha-keyframes", "-webkit-animation-duration": "5s", diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js index 10b24ff4..82bec34f 100644 --- a/js/panels/presets/default-style-presets.js +++ b/js/panels/presets/default-style-presets.js @@ -11,9 +11,9 @@ exports.stylePresets = { "children": [ { "text": "Border-Radius", - "id": "njBorderRadius", "selectorBase" : "border-radius-preset", "rules" : [{ + "selectorSuffix" : "", "styles" : { "border-radius": "100px", "border" : "1px solid #333" @@ -22,9 +22,9 @@ exports.stylePresets = { }, { "text": "Drop Shadow", - "id": "njDropShadow", "selectorBase" : "drop-shadow", "rules" : [{ + "selectorSuffix" : "", "styles" : { "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", "border" : "1px solid #CCC" @@ -33,10 +33,9 @@ exports.stylePresets = { }, { "text": "Fancy Box", - "id": "njFancyBox", "selectorBase" : "fancy-box", "rules" : [{ - "selectorSuffix": "", + "selectorSuffix" : "", "styles" : { "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", "border" : "1px solid #FFF", @@ -51,9 +50,9 @@ exports.stylePresets = { "children": [ { "text": "Italic", - "id": "njItalic", "selectorBase" : "italicize", "rules" : [{ + "selectorSuffix" : "", "styles" : { "font-style": "italic" } @@ -61,9 +60,9 @@ exports.stylePresets = { }, { "text": "Text Shadow", - "id": "njTextShadow", "selectorBase" : "italicize", "rules" : [{ + "selectorSuffix" : "", "styles" : { "text-shadow": "1px 1px 3px #333" } diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js index f8968085..15f4882f 100644 --- a/js/panels/presets/default-transition-presets.js +++ b/js/panels/presets/default-transition-presets.js @@ -13,6 +13,7 @@ exports.transitionPresets = { "text": "Fade In", "selectorBase" : "fade-in", "rules" : [{ + "selectorSuffix": "", "styles" : { "opacity": "0.25", "-webkit-transition": "all 0.4s ease-in" @@ -28,6 +29,7 @@ exports.transitionPresets = { "text": "Fade Out", "selectorBase" : "fade-out", "rules" : [{ + "selectorSuffix": "", "styles" : { "opacity": "1", "-webkit-transition": "all 0.4s ease-in" @@ -46,6 +48,7 @@ exports.transitionPresets = { "text": "Slide Right", "selectorBase" : "slide-right", "rules" : [{ + "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -60,6 +63,7 @@ exports.transitionPresets = { "text": "Slide Left", "selectorBase" : "slide-left", "rules" : [{ + "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -74,6 +78,7 @@ exports.transitionPresets = { "text": "Rotate", "selectorBase" : "rotate", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -87,6 +92,7 @@ exports.transitionPresets = { "text": "Scale Up", "selectorBase" : "scale-up", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -101,6 +107,7 @@ exports.transitionPresets = { "text": "Scale Down", "selectorBase" : "scale-down", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -115,6 +122,7 @@ exports.transitionPresets = { "text": "Remove 3D", "selectorBase" : "remove-3d", "rules" : [{ + "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js index 6a28e069..11f41822 100644 --- a/js/panels/presets/style-presets.reel/style-presets.js +++ b/js/panels/presets/style-presets.reel/style-presets.js @@ -22,13 +22,60 @@ exports.StylesLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - this.application.ninja.presetsController.applyPreset(presetData, true); + var selection = this.application.ninja.selectedElements, + stylesController = this.application.ninja.stylesController, + selectorBase = presetData.selectorBase, + self = this, className; + + if(!selection || !selection.length || selection.length === 0) { + return false; + } + + function setStopRuleSelector(selector) { + self.application.ninja + .currentDocument.documentRoot + .elementModel.controller + .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector); + } + + selectorBase = stylesController.generateClassName(selectorBase); + + presetData.rules.forEach(function(rule) { + stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles); + }, this); + + selection.forEach(function(el) { + el._element.style.webkitTransition = "all 450ms linear"; + + el._element.addEventListener("webkitTransitionEnd", function presetTransition(e) { + el._element.style.webkitTransition = ''; + setStopRuleSelector("*"); + this.removeEventListener("webkitTransitionEnd", presetTransition, true); + + }, true); + setStopRuleSelector("transitionStopRule"); + el._element.classList.add(selectorBase); + + //// Keep track of elements with presets and don't add duplicates + + }, this); + + } }, handleDragEnd : { value: function(sourceObject) { console.log(sourceObject); } + }, + shouldChangeSelection : { + value : function(controller, newSelection, oldSelection) { + // + //debugger; + console.log('1Handle should change selection'); + return false; + } } + }); diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js index ace38dbb..f7d84085 100644 --- a/js/panels/presets/transitions-presets.reel/transitions-presets.js +++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js @@ -22,7 +22,25 @@ exports.TransitionsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - this.application.ninja.presetsController.applyPreset(presetData); + var selection = this.application.ninja.selectedElements, + stylesController = this.application.ninja.stylesController, + selectorBase = presetData.selectorBase, + self = this; + + if(!selection || !selection.length || selection.length === 0) { + return false; + } + + selectorBase = stylesController.generateClassName(selectorBase); + + presetData.rules.forEach(function(rule) { + this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); + }, this); + + selection.forEach(function(el) { + el._element.classList.add(selectorBase); + }, this); + } } }); diff --git a/js/panels/resize-composer.js b/js/panels/resize-composer.js index 0d1774cd..6e5e89f8 100644 --- a/js/panels/resize-composer.js +++ b/js/panels/resize-composer.js @@ -9,14 +9,6 @@ var Composer = require("montage/ui/composer/composer").Composer; exports.ResizeComposer = Montage.create(Composer, { - xAxis: { - value: true - }, - - yAxis: { - value: true - }, - enabled : { enumerable: false, value: true @@ -77,7 +69,6 @@ exports.ResizeComposer = Montage.create(Composer, { load: { value: function() { this.element.addEventListener("mousedown", this, true); - this.element.addEventListener("dblclick", this, true); } }, @@ -113,29 +104,18 @@ exports.ResizeComposer = Montage.create(Composer, { captureMousemove: { value: function(e) { - 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._deltaX = e.clientX - this._startX; + this._deltaY = e.clientY - this._startY; this._executeEvent("resizeMove"); } }, - captureDblclick: { - value:function(e) { - this._reset(); - this._executeEvent("resizeReset"); + deserializedFromTemplate: { + value: function() { + if (this.component) { + this.component.addComposer(this); + } } } - - }); \ No newline at end of file -- cgit v1.2.3 From a11ef2eed7049835c8bdfa50a2b893632c46eaa0 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 4 Apr 2012 11:11:58 -0700 Subject: Squashed commit of Preparing for the montage undo-manager: Architecture changes Reworked the add and remove elements into 1 function which can take 1 or more elements. Removed the _element from the selection array Many other changes related to those 2 changes Undo/Redo shortcuts are now using montage undo/redo manager. Signed-off-by: Valerio Virgillito --- .../CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 6 ++-- .../ComponentsPanelBase.js | 2 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 37 ++++++++++++++++------ js/panels/Timeline/Tween.reel/Tween.js | 2 +- .../animations-presets.reel/animations-presets.js | 4 +-- .../presets/style-presets.reel/style-presets.js | 4 +-- .../transitions-presets.js | 4 +-- js/panels/properties.reel/properties.js | 16 ++++------ .../sections/three-d-view.reel/three-d-view.js | 2 +- 9 files changed, 46 insertions(+), 31 deletions(-) (limited to 'js/panels') diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js index ecf0f9cd..2a3fc068 100755 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js @@ -520,9 +520,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre this.inComputedStyleMode = false; // No computed styles mode for multiple items ///// if multiple items are selected, then show common rules - var elements = items.map(function(item) { - return item._element; - }); + var elements = Array.prototype.slice.call(this.application.ninja.selectedElements, 0); ///// show toolbar, but hide computed style button this.sections.styles.toolbar.style.display = ''; @@ -538,7 +536,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre this.sections.styles.statusMsg.classList.add('nj-css-panel-hide'); this.sections.styles.showComputedEl.classList.remove('nj-css-panel-hide');// .style.display = ''; this.sections.styles.toolbar.style.display = ''; - this.showStylesForElement(items[0]._element, null); + this.showStylesForElement(items[0], null); } else { this.sections.styles.statusMsg.classList.add('nj-css-panel-hide'); this._inMultiSelectMode = false; diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 3505393c..e990551b 100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -302,7 +302,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component that.application.ninja.currentDocument.setComponentInstance(instance, element); - NJevent("elementAdding", {"el": element, "data":styles}); + that.application.ninja.elementMediator.addElements(element, styles); }); } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a1e320c4..033d0f79 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -318,7 +318,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { "newLayer", "deleteLayer", "elementAdded", - "elementDeleted", + "elementsRemoved", "selectionChange"], i, arrEventsLength = arrEvents.length; @@ -826,7 +826,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { for(var index=0;index= 0 ;length--) { - if (this.currentLayerSelected.layerData.elementsList[length] === this.deleteElement) { - this.currentLayerSelected.layerData.elementsList.splice(length, 1); - break; + + // Handling deletion of multiple elements. + // TODO: Optimize this double array loop + if(Array.isArray(this.deleteElement)) { + this.deleteElement = Array.prototype.slice.call(this.deleteElement, 0); + lengthVal = this.currentLayerSelected.layerData.elementsList.length - 1; + this.deleteElement.forEach(function(element) { + for (length = lengthVal ;length >= 0 ;length--) { + if (this.currentLayerSelected.layerData.elementsList[length] === element) { + this.currentLayerSelected.layerData.elementsList.splice(length, 1); + break; + } + //length--; + } + }, this); + } else { + lengthVal = this.currentLayerSelected.layerData.elementsList.length - 1; + for (length = lengthVal ;length >= 0 ;length--) { + if (this.currentLayerSelected.layerData.elementsList[length] === this.deleteElement) { + this.currentLayerSelected.layerData.elementsList.splice(length, 1); + break; + } + //length--; } - //length--; } + + } }, diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 2b308d9a..7339139f 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -162,7 +162,7 @@ var Tween = exports.Tween = Montage.create(Component, { if (event.detail.source && event.detail.source !== "tween") { // check for correct element selection - if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) { + if (this.application.ninja.selectedElements[0]!= this.parentComponent.parentComponent.animatedElement) { console.log("Wrong element selected for this keyframe track"); } else { // update tweenedProperties and tell containing track to update CSS rule diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js index 6a16da54..92437cfd 100644 --- a/js/panels/presets/animations-presets.reel/animations-presets.js +++ b/js/panels/presets/animations-presets.reel/animations-presets.js @@ -23,6 +23,6 @@ exports.AnimationsLibrary = Montage.create(Component, { handleNodeActivation: { value: function(presetData) { this.application.ninja.presetsController.applyPreset(presetData); - } - } + } + } }); diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js index 6a28e069..5f10bbe3 100644 --- a/js/panels/presets/style-presets.reel/style-presets.js +++ b/js/panels/presets/style-presets.reel/style-presets.js @@ -23,12 +23,12 @@ exports.StylesLibrary = Montage.create(Component, { handleNodeActivation: { value: function(presetData) { this.application.ninja.presetsController.applyPreset(presetData, true); - } + } }, handleDragEnd : { value: function(sourceObject) { console.log(sourceObject); } - } + } }); diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js index ace38dbb..4ca2a662 100644 --- a/js/panels/presets/transitions-presets.reel/transitions-presets.js +++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js @@ -23,6 +23,6 @@ exports.TransitionsLibrary = Montage.create(Component, { handleNodeActivation: { value: function(presetData) { this.application.ninja.presetsController.applyPreset(presetData); - } - } + } + } }); diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 40e9b86a..d5acd503 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -87,7 +87,7 @@ exports.Properties = Montage.create(Component, { this.displayStageProperties(); } else { if(this.application.ninja.selectedElements.length === 1) { - this.displayElementProperties(this.application.ninja.selectedElements[0]._element); + this.displayElementProperties(this.application.ninja.selectedElements[0]); } else { this.displayGroupProperties(this.application.ninja.selectedElements); } @@ -120,7 +120,6 @@ exports.Properties = Montage.create(Component, { } else if(event.target.id === "elementClass") { if(this.application.ninja.selectedElements.length) { ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, "Change", "pi"); - console.log(this.application.ninja.selectedElements[0]._element.className); } else { ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass); } @@ -138,8 +137,8 @@ exports.Properties = Montage.create(Component, { handleElementChanging: { value: function(event) { -// this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left")); -// this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top")); +// this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0], "left")); +// this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0], "top")); } }, @@ -148,23 +147,22 @@ exports.Properties = Montage.create(Component, { // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update if(event.detail.source && event.detail.source !== "pi") { // TODO - This should only update the properties that were changed. - var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; + var el = this.application.ninja.selectedElements[0]; this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); - if(this.threeD.inGlobalMode) - { + if(this.threeD.inGlobalMode) { this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D"); this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D"); this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); + } } } - } }, handleSelectionChange: { @@ -173,7 +171,7 @@ exports.Properties = Montage.create(Component, { this.displayStageProperties(); } else { if(this.application.ninja.selectedElements.length === 1) { - this.displayElementProperties(this.application.ninja.selectedElements[0]._element); + this.displayElementProperties(this.application.ninja.selectedElements[0]); } else { this.displayGroupProperties(this.application.ninja.selectedElements); } diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js index 35591afa..f72d1ff6 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js @@ -231,7 +231,7 @@ exports.ThreeD = Montage.create(Component, { _getSelectedItem: { value: function(els) { if(els.length) { - return els[0]._element || els[0]; + return els[0]; } else { return this.boundObject.application.ninja.currentDocument.documentRoot; } -- cgit v1.2.3 From 488afcf1604df3d611eca5253d57cc5a79ed80c3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 4 Apr 2012 16:17:52 -0700 Subject: Styling PI's Materials edit button. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties.reel/properties.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'js/panels') diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index f82d3660..0928da3a 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css @@ -47,6 +47,11 @@ padding-right:6px; } +.propertiesPanel button.nj-skinned { + margin-left: -12px; + margin-top: -3px; +} + .propertiesPanel hr { border: 0; border-top: 1px solid #3c3c3c; -- cgit v1.2.3