From 086ade64bb2f5bcc7b6126b5e83c4efccc10ef43 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 31 Jan 2012 08:35:59 +0800 Subject: Adding a version json object to Ninja Versions object to start keeping track of versions for Ninja, Montage and eventually other dependencies. Loaded before montage to use in the splash screen. Signed-off-by: Valerio Virgillito --- js/ninja.reel/ninja.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js') diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index bc31e0e1..75ec7fcc 100644 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -36,6 +36,7 @@ exports.Ninja = Montage.create(Component, { prepareForDraw: { value: function() { + console.log("Loading Ninja --> ", window.ninjaVersion.ninja.version); this.application.ninja = this; -- cgit v1.2.3 From a4fcd3237432a361e9a07c7fe3d75128e6c99d1c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 31 Jan 2012 08:36:31 +0800 Subject: Code cleanup - Removed extra log. Signed-off-by: Valerio Virgillito --- js/preloader/Preloader.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js') diff --git a/js/preloader/Preloader.js b/js/preloader/Preloader.js index f137f4b6..93d71e8f 100755 --- a/js/preloader/Preloader.js +++ b/js/preloader/Preloader.js @@ -136,7 +136,6 @@ exports.Preloader = Montage.create(Component, { deserializedFromTemplate: { value: function() { - console.log("Start Preloading"); this.filesTotal = this.ninjaJsRequire.length + this.ninjaCssRequire.length; -- cgit v1.2.3 From df018322f823392fd7da56a42cddcab5473b0f0a Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 31 Jan 2012 08:57:57 +0800 Subject: Adding the version to the main Ninja reel component. Signed-off-by: Valerio Virgillito --- js/ninja.reel/ninja.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 75ec7fcc..465533cd 100644 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -13,6 +13,10 @@ exports.Ninja = Montage.create(Component, { _appLoaded: { value: false }, _preload: { value: false }, + ninjaVersion: { + value: window.ninjaVersion.ninja.version + }, + toolsData: { value: null }, appData: { value: AppData }, @@ -36,7 +40,7 @@ exports.Ninja = Montage.create(Component, { prepareForDraw: { value: function() { - console.log("Loading Ninja --> ", window.ninjaVersion.ninja.version); + console.log("Loading Ninja --> ", this.ninjaVersion); this.application.ninja = this; -- cgit v1.2.3 From 1d8af9fb2be85c33ce6a846f97360ba2ee17ea23 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 31 Jan 2012 01:54:55 +0800 Subject: Checkbox and Combobox change/changing events were not setting wasSetByCode property correctly, causing our PI to dispatch events at improper times. Signed-off-by: Nivesh Rajbhandari --- js/components/combobox.reel/combobox.js | 2 +- js/components/radio.reel/radio.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js index f262bb06..a68a7d6b 100644 --- a/js/components/combobox.reel/combobox.js +++ b/js/components/combobox.reel/combobox.js @@ -67,7 +67,7 @@ exports.Combobox = Montage.create(Component, { var e = document.createEvent("CustomEvent"); e.initEvent("change", true, true); e.type = "change"; - e._wasSetByCode = this._wasSetByCode; + e.wasSetByCode = this._wasSetByCode; e.value = this._value; this.dispatchEvent(e); diff --git a/js/components/radio.reel/radio.js b/js/components/radio.reel/radio.js index 954da3c4..c661ec11 100644 --- a/js/components/radio.reel/radio.js +++ b/js/components/radio.reel/radio.js @@ -41,7 +41,7 @@ exports.RadioGroup = Montage.create(Component, { e = document.createEvent("CustomEvent"); e.initEvent("change", true, true); e.type = "change"; - e._wasSetByCode = this._wasSetByCode; + e.wasSetByCode = this._wasSetByCode; e.selectedIndex = i; e.selectedItem = value; this.dispatchEvent(e); @@ -77,7 +77,7 @@ exports.RadioGroup = Montage.create(Component, { { value:function(event) { - this._wasSetByCode = event._event._wasSetByCode; + this._wasSetByCode = event._event.wasSetByCode; this.selectedItem = event._event.value; } } @@ -126,7 +126,7 @@ exports.Radio = Montage.create(Component, { var e = document.createEvent("CustomEvent"); e.initEvent("change", true, true); e.type = "change"; - e._wasSetByCode = this._wasSetByCode; + e.wasSetByCode = this._wasSetByCode; e.value = this; this.dispatchEvent(e); -- cgit v1.2.3 From b01b586a26ae47d329bdd5fe005051513711fab7 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 31 Jan 2012 15:11:04 -0800 Subject: Fixing the bread-crumb background The CSS cleanup added a background to the bottom panel container which broke the bread-crumb background. Fixing by adding the background directly to the bread-crumb component. Signed-off-by: Valerio Virgillito --- js/components/layout/bread-crumb.reel/bread-crumb.css | 1 + 1 file changed, 1 insertion(+) (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 f84c6e80..cc984609 100644 --- a/js/components/layout/bread-crumb.reel/bread-crumb.css +++ b/js/components/layout/bread-crumb.reel/bread-crumb.css @@ -5,6 +5,7 @@ */ .bread_crumb{ + background-color: #282828; border-style: double; height: 26px; } -- cgit v1.2.3 From affafafc4db16e5f918c74dfc919025d4c563cc6 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 31 Jan 2012 17:30:53 -0800 Subject: Updated color code to handle shapes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/color-controller.js | 97 ++++----------------------- js/controllers/elements/element-controller.js | 43 +++++++++++- js/controllers/elements/shapes-controller.js | 2 +- js/mediators/element-mediator.js | 2 +- js/models/color-model.js | 4 +- 5 files changed, 59 insertions(+), 89 deletions(-) (limited to 'js') diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js index 87180873..925b525d 100644 --- a/js/controllers/color-controller.js +++ b/js/controllers/color-controller.js @@ -175,76 +175,21 @@ exports.ColorController = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // - setBackground: { + setColor: { enumerable: true, - value: function (type, background, selection) { - //TODO: Remove hack - var elements, i, hack = [], hackNone = []; + value: function (mode, color, isFill, selection) { + var elements; //The selection is optional, if none, it asks for the currently selected elements if (selection) { elements = selection; } else { elements = this.application.ninja.selectedElements; } - // - for (i=0; elements[i]; i++) { - hack[i] = background; - hackNone[i] = 'none'; - } - // - if (elements && elements.length > 0) { - switch (type) { - case 'image': - ElementsMediator.setProperty(elements, "background-image", hack, {"background-image": background}, "Change", "color-controller"); - ElementsMediator.setProperty(elements, "background-color", hackNone, {"background-color": 'none'}, "Change", "color-controller"); - break; - case 'color': - //TODO: Add logic to handle setting color when image (like gradients) is applied - //TODO: Handle applying to multiple items, currently, we need to create a dummy array of the same value - ElementsMediator.setProperty(elements, "background-image", hackNone, {"background-image": 'none'}, "Change", "color-controller"); - ElementsMediator.setProperty(elements, "background-color", hack, {"background-color": background}, "Change", "color-controller"); - break; - case 'background': - break; - } - // - //console.log(this.getColorObjFromCss('#333')); - } - } - }, - //////////////////////////////////////////////////////////////////// - // - setBorder: { - enumerable: true, - value: function (type, border, selection) { - // - var elements, i, hack = [], hackNone = []; - //The selection is optional, if none, it asks for the currently selected elements - if (selection) { - elements = selection; - } else { - elements = this.application.ninja.selectedElements; - } - // - for (i=0; elements[i]; i++) { - hack[i] = border; - hackNone[i] = 'none'; - } - // - if (elements && elements.length > 0) { - switch (type) { - case 'image': - //TODO: Figure out why color must be removed, might be related to the CSS - ElementsMediator.setProperty(elements, "border-color", hackNone, {"border-color": 'none'}, "Change", "color-controller"); - ElementsMediator.setProperty(elements, "border-image", hack, {"border-image": border}, "Change", "color-controller"); - break; - case 'color': - ElementsMediator.setProperty(elements, "border-image", hackNone, {"border-image": 'none'}, "Change", "color-controller"); - ElementsMediator.setProperty(elements, "border-color", hack, {"border-color": border}, "Change", "color-controller"); - break; - case 'border': - break; - } + if (elements && elements.length) { + var colorInfo = { mode:mode, + color:color + }; + ElementsMediator.setColor(elements, colorInfo, isFill, "Change", "color-controller"); } } }, @@ -264,8 +209,10 @@ exports.ColorController = Montage.create(Component, { color = {value: null, css: 'none'}; } else if (panelMode === 'rgb' && e._event.rgba && mode !== 'gradient') { color = e._event.rgba; + color.webGlColor = e._event.webGlColor; } else if (panelMode === 'hsl' && e._event.hsla && mode !== 'gradient') { color = e._event.hsla; + color.webGlColor = e._event.webGlColor; } else if (mode !== 'gradient'){ color = {value: e._event.hex, css: '#'+e._event.hex}; } else if (mode === 'gradient'){ @@ -280,32 +227,14 @@ exports.ColorController = Montage.create(Component, { // if(e._event.wasSetByCode) return; // - if (mode === 'nocolor') { - //TODO: Add a check instead of setting properties - this.setBackground('image', color.css, false); - this.setBackground('color', color.css, false); - this.setBackground('background', color.css, false); - } else if (mode === 'gradient') { - this.setBackground('image', color.css, false); - } else { - this.setBackground('color', color.css, false); - } + this.setColor(mode, color, true); } else if (input === 'stroke') { // this.stroke = color; // if(e._event.wasSetByCode) return; - // - if (mode === 'nocolor') { - //TODO: Add a check instead of setting properties - this.setBorder('image', color.css, false); - this.setBorder('color', color.css, false); - this.setBorder('border', color.css, false); - } else if (mode === 'gradient') { - this.setBorder('image', color.css, false); - } else { - this.setBorder('color', color.css, false); - } + + this.setColor(mode, color, false); } //////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////// diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index f254220c..8a0735f7 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -83,13 +83,52 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, setColor: { value: function(el, color, isFill) { + var mode = color.mode; if(isFill) { - this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); + if(mode) + { + switch (mode) { + case 'nocolor': + this.setProperty(el, "background-image", "none"); + this.setProperty(el, "background-color", "none"); + break; + case 'gradient': + this.setProperty(el, "background-image", color.color.css); + this.setProperty(el, "background-color", "none"); + break; + default: + this.setProperty(el, "background-image", "none"); + this.setProperty(el, "background-color", color.color.css); + } + } + else + { + this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); + } } else { - this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); + if(mode) + { + switch (mode) { + case 'nocolor': + this.setProperty(el, "border-image", "none"); + this.setProperty(el, "border-color", "none"); + break; + case 'gradient': + this.setProperty(el, "border-image", color.color.css); + this.setProperty(el, "border-color", "none"); + break; + default: + this.setProperty(el, "border-image", "none"); + this.setProperty(el, "border-color", color.color.css); + } + } + else + { + this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); + } } } }, diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index d34644a7..92353f28 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -168,7 +168,7 @@ exports.ShapesController = Montage.create(CanvasController, { setColor: { value: function(el, color, isFill) { // TODO - Format color for webGL before setting - color = color.webGlColor; + color = color.webGlColor || color.color.webGlColor; if(isFill) { el.elementModel.shapeModel.GLGeomObj.setFillColor(color); diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 91b09475..4c34e668 100644 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -457,7 +457,7 @@ exports.ElementMediator = Montage.create(NJComponent, { if(!currentValue) { var that = this; currentValue = els.map(function(item) { - return that.getColor(item._element); + return that.getColor(item._element, isFill); }); } diff --git a/js/models/color-model.js b/js/models/color-model.js index 7e5fee1f..b06281f8 100644 --- a/js/models/color-model.js +++ b/js/models/color-model.js @@ -415,8 +415,10 @@ exports.ColorModel = Montage.create(Component, { colorEvent.alpha = this.alpha.value; if (this.hsl) colorEvent.hsla = {h: this.hsl.h, s: this.hsl.s, l: this.hsl.l, a: this.alpha.value, css: 'hsla('+this.hsl.h+', '+this.hsl.s+'%, '+this.hsl.l+'%, '+this.alpha.value+')'}; - if (this.rgb) + if (this.rgb) { colorEvent.rgba = {r: this.rgb.r, g: this.rgb.g, b: this.rgb.b, a: this.alpha.value, css: 'rgba('+ this.rgb.r +', '+this.rgb.g+', '+this.rgb.b+', '+this.alpha.value+')'}; + colorEvent.webGlColor = [this.rgb.r/255, this.rgb.g/255, this.rgb.b/255, this.alpha.value]; + } if (this.hex) colorEvent.hex = this.hex; //Standard values that apply to any event -- cgit v1.2.3