From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 11:52:06 -0700 Subject: Expand tabs --- js/panels/color/colorbutton-manager.js | 14 +- js/panels/color/colorpanel.js | 14 +- .../color/colorpanelbase.reel/colorpanelbase.html | 112 +- .../color/colorpanelbase.reel/colorpanelbase.js | 78 +- .../colorpanelbase.reel/css/colorpanelbase.scss | 338 +++--- .../colorpanelpopup.reel/colorpanelpopup.html | 98 +- .../color/colorpanelpopup.reel/colorpanelpopup.js | 716 +++++------ .../colorpanelpopup.reel/css/colorpanelpopup.scss | 180 +-- js/panels/color/colorpopup-manager.js | 1252 ++++++++++---------- 9 files changed, 1401 insertions(+), 1401 deletions(-) (limited to 'js/panels/color') diff --git a/js/panels/color/colorbutton-manager.js b/js/panels/color/colorbutton-manager.js index 7294ce93..0f793b44 100755 --- a/js/panels/color/colorbutton-manager.js +++ b/js/panels/color/colorbutton-manager.js @@ -30,15 +30,15 @@ POSSIBILITY OF SUCH DAMAGE. //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component; +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; //////////////////////////////////////////////////////////////////////// //Exporting as ColorPopupManager exports.ColorButtonManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - value: false + value: false }, //////////////////////////////////////////////////////////////////// //Storing color manager @@ -49,19 +49,19 @@ exports.ColorButtonManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // colorManager: { - enumerable: true, + enumerable: true, get: function() { return this._colorManager; }, set: function(value) { - this._colorManager = value; + this._colorManager = value; } }, //////////////////////////////////////////////////////////////////// // _buttons: { - enumerable: false, - value: {chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: []} + enumerable: false, + value: {chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: []} } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// diff --git a/js/panels/color/colorpanel.js b/js/panels/color/colorpanel.js index 7815030e..988a7230 100755 --- a/js/panels/color/colorpanel.js +++ b/js/panels/color/colorpanel.js @@ -30,18 +30,18 @@ POSSIBILITY OF SUCH DAMAGE. //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage, - PanelBase = require("js/panels/panelbase").PanelBase; +var Montage = require("montage/core/core").Montage, + PanelBase = require("js/panels/panelbase").PanelBase; //////////////////////////////////////////////////////////////////////// //Exporting as ColorPanel exports.ColorPanel = Montage.create(PanelBase, { //////////////////////////////////////////////////////////////////// //Panel Configuration - panelName: {value: "Color", writable: true, enumerable: true, configurable: true}, - panelHeaderID: {value: "colorPanelHeader", writable: true, enumerable: true, configurable: true}, - disclosureIconID: {value: "colorPanelDisclosureIcon", writable: true, enumerable: true, configurable: true}, - closeButtonID: {value: "colorPanelCloseButton", writable: true, enumerable: true, configurable: true}, - panelContentID: {value: "colorPanelContent", writable: true, enumerable: true, configurable: true}, + panelName: {value: "Color", writable: true, enumerable: true, configurable: true}, + panelHeaderID: {value: "colorPanelHeader", writable: true, enumerable: true, configurable: true}, + disclosureIconID: {value: "colorPanelDisclosureIcon", writable: true, enumerable: true, configurable: true}, + closeButtonID: {value: "colorPanelCloseButton", writable: true, enumerable: true, configurable: true}, + panelContentID: {value: "colorPanelContent", writable: true, enumerable: true, configurable: true}, //////////////////////////////////////////////////////////////////// //Creating panel from base view class init: { diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.html b/js/panels/color/colorpanelbase.reel/colorpanelbase.html index 5918a3ae..762602e5 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.html +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.html @@ -29,12 +29,12 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. --> - - - - - - - - - - + } + + + -
-
- - -
-
- -
- -
-
-
-
- -
- -
-
- - - -
-
-
R
-
G
-
B
-
A
-
-
-
-
-
-
-
-
- - - - -
-
#
-
-
+ - +
+
+ + +
+
+ +
+ +
+
+
+
+ +
+ +
+
+ + + +
+
+
R
+
G
+
B
+
A
+
+
+
+
+
+
+
+
+ + + + +
+
#
+
+
+ + diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index 0223b9d8..a3525d0f 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -30,12 +30,12 @@ POSSIBILITY OF SUCH DAMAGE. //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component, - Popup = require("js/components/popup.reel").Popup, - Slider = require("js/components/slider.reel").Slider, - HotText = require("js/components/hottext.reel").HotText, - ColorBar = require("js/components/colorbar.reel").ColorBar; +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + Popup = require("js/components/popup.reel").Popup, + Slider = require("js/components/slider.reel").Slider, + HotText = require("js/components/hottext.reel").HotText, + ColorBar = require("js/components/colorbar.reel").ColorBar; //////////////////////////////////////////////////////////////////////// //Exporting as ColorPanelBase exports.ColorPanelBase = Montage.create(Component, { @@ -47,7 +47,7 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Storing ColorPanel sliders mode _panelMode: { - value: 'rgb' + value: 'rgb' }, //////////////////////////////////////////////////////////////////// //Storing ColorPanel sliders mode @@ -505,11 +505,11 @@ exports.ColorPanelBase = Montage.create(Component, { if (c && c.css) { this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height); if (m === 'gradient') { - this.style.backgroundImage = c.css; - this.style.backgroundColor = 'transparent'; + this.style.backgroundImage = c.css; + this.style.backgroundColor = 'transparent'; } else { - this.style.backgroundColor = c.css; - this.style.backgroundImage = 'none'; + this.style.backgroundColor = c.css; + this.style.backgroundImage = 'none'; } } else { this.drawNoColor(this, this.cvs); @@ -839,7 +839,7 @@ exports.ColorPanelBase = Montage.create(Component, { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); // var stroke = this.colorManager.colorHistory.fill[this.colorManager.colorHistory.fill.length - 1], - fill = this.colorManager.colorHistory.stroke[this.colorManager.colorHistory.stroke.length - 1]; + fill = this.colorManager.colorHistory.stroke[this.colorManager.colorHistory.stroke.length - 1]; stroke.c.wasSetByCode = fill.c.wasSetByCode = false; stroke.c.type = fill.c.type = 'change'; //////////////////////////////////////////////////////////// @@ -924,18 +924,18 @@ exports.ColorPanelBase = Montage.create(Component, { var mode, max1, max2, max3, color, fColor, sColor; if (this.panelMode === 'hsl') { mode = 'hsl', - max1 = 360, - max2 = 100, - max3 = 100, - fColor = { h: 0, s: 0, l: 100 }, - sColor = { h: 0, s: 0, l: 0 }; + max1 = 360, + max2 = 100, + max3 = 100, + fColor = { h: 0, s: 0, l: 100 }, + sColor = { h: 0, s: 0, l: 0 }; } else { mode = 'rgb', - max1 = 255, - max2 = 255, - max3 = 255, - sColor = { r: 0, g: 0, b: 0 }, - fColor = { r: 255, g: 255, b: 255 }; + max1 = 255, + max2 = 255, + max3 = 255, + sColor = { r: 0, g: 0, b: 0 }, + fColor = { r: 255, g: 255, b: 255 }; } // sColor.wasSetByCode = false; @@ -1009,19 +1009,19 @@ exports.ColorPanelBase = Montage.create(Component, { var update, type; // if (!e._event.wasSetByCode) { - // - if (!e.target.cInputType) { - type = 'hottext'; + // + if (!e.target.cInputType) { + type = 'hottext'; } else { - type = 'slider' - } - // + type = 'slider' + } + // if (e.target.changesColor) { // if (this.panelMode === 'rgb') { // if (this.colorManager.rgb && Math.round(this._combo[0][type].value) === this.colorManager.rgb.r && Math.round(this._combo[1][type].value) === this.colorManager.rgb.g && Math.round(this._combo[2][type].value) === this.colorManager.rgb.b) { - return; + return; } // update = { r: Math.round(this._combo[0][type].value), g: Math.round(this._combo[1][type].value), b: Math.round(this._combo[2][type].value) }; @@ -1032,7 +1032,7 @@ exports.ColorPanelBase = Montage.create(Component, { } else if (this.panelMode === 'hsl') { // if (this.colorManager.hsl && Math.round(this._combo[0][type].value) === this.colorManager.hsl.h && Math.round(this._combo[1][type].value) === this.colorManager.hsl.s && Math.round(this._combo[2][type].value) === this.colorManager.hsl.l) { - return; + return; } // update = { h: Math.round(this._combo[0][type].value), s: Math.round(this._combo[1][type].value), l: Math.round(this._combo[2][type].value) }; @@ -1042,9 +1042,9 @@ exports.ColorPanelBase = Montage.create(Component, { this.colorManager.hsl = update; } } else { - // - update = { value: this._combo[3][type].value/100, wasSetByCode: false, type: 'change' }; - // + // + update = { value: this._combo[3][type].value/100, wasSetByCode: false, type: 'change' }; + // this.colorManager.alpha = update; } } @@ -1432,10 +1432,10 @@ exports.ColorPanelBase = Montage.create(Component, { // selectInputType: { value: function (type) { - if (this.colorManager.input === 'chip') { - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - return; - } + if (this.colorManager.input === 'chip') { + this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + return; + } //Checking for the type to be formatted as expected, otherwise we unselected all buttons try { type._event.srcElement.inputType; @@ -1479,7 +1479,7 @@ exports.ColorPanelBase = Montage.create(Component, { this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX) + 'px', (type._event.target.clientHeight / 2 + type._event.clientY - type._event.offsetY) + 'px', 'right', 'top'); //} else { // - // this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX)+parseInt(type._event.target.offsetWidth)+'px', (type._event.target.offsetHeight/2+type._event.clientY - type._event.offsetY)+'px', 'left', 'top'); + // this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX)+parseInt(type._event.target.offsetWidth)+'px', (type._event.target.offsetHeight/2+type._event.clientY - type._event.offsetY)+'px', 'left', 'top'); //} } } @@ -1580,7 +1580,7 @@ exports.ColorPanelBase = Montage.create(Component, { ctx.lineTo(2, 1); ctx.stroke(); } else { - //Adding class to buttons with no canvas + //Adding class to buttons with no canvas selected[i].className = selected[i].className + ' selected'; } } diff --git a/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss b/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss index 79461048..9317b592 100755 --- a/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss +++ b/js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss @@ -37,327 +37,327 @@ $sprite_stdbtn_spacing: 4; @mixin sprite_background ($x, $y) { - background: url(../../../../../images/SpriteSheets/NinjaSpriteSheet.png) transparent no-repeat top left !important; - background-position: $x*-1px $y*-1px !important; - border: none !important; - display: block; + background: url(../../../../../images/SpriteSheets/NinjaSpriteSheet.png) transparent no-repeat top left !important; + background-position: $x*-1px $y*-1px !important; + border: none !important; + display: block; } .cp_expanded { - font-size: 12px; - text-shadow: 1px 1px 1px #000; - color: #FFF; + font-size: 12px; + text-shadow: 1px 1px 1px #000; + color: #FFF; } .cp_expanded a:hover { - color: #CCC; + color: #CCC; } .cp_expanded hr { - float: left; - clear: both; - width: 100%; - display: block; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, rgb(29,29,29)), color-stop(0.75, rgb(66,66,66))); - 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, rgb(29,29,29)), color-stop(0.75, rgb(66,66,66))); + border: none; + height: 2px; + margin: 4px 0px 4px 0px; } .cp_history { - float: left; - margin: 4px 0px 0px 4px; - background: url(../../../../../images/colorpanel/transparent.png) repeat; + float: left; + margin: 4px 0px 0px 4px; + background: url(../../../../../images/colorpanel/transparent.png) repeat; } .cp_history button { - - width: 22px; - height: 22px; - overflow: hidden; - text-indent: -9999px; - background: #333; - float: left; - border: solid 1px #000; - cursor: pointer; - margin: 0px -1px 0px 0px; - padding: 0px 0px 0px 0px; + + width: 22px; + height: 22px; + overflow: hidden; + text-indent: -9999px; + background: #333; + float: left; + border: solid 1px #000; + cursor: pointer; + margin: 0px -1px 0px 0px; + padding: 0px 0px 0px 0px; } .cp_expanded .cp_inputs { - float: left; - margin: 0px 4px 0px 4px; + float: left; + margin: 0px 4px 0px 4px; } .cp_expanded .cp_input_button { - background: url(../../../../../images/colorpanel/transparent.png) repeat; - float: left; - clear: left; - margin: 0px 0px 6px 0px; + background: url(../../../../../images/colorpanel/transparent.png) repeat; + float: left; + clear: left; + margin: 0px 0px 6px 0px; } .cp_expanded .cp_inputs button, .cpe_fill, .cpe_stroke, .cpe_fill_icon, .cpe_stroke_icon { - - width: 22px; - height: 22px; - overflow: hidden; - text-indent: -9999px; - padding: 0px 0px 0px 0px; - display: block; - float: left; - cursor: pointer; + + width: 22px; + height: 22px; + overflow: hidden; + text-indent: -9999px; + padding: 0px 0px 0px 0px; + display: block; + float: left; + cursor: pointer; } .cpe_fill, .cpe_stroke { - clear: left; - background-color: #333; - border: solid 1px #000; + clear: left; + background-color: #333; + border: solid 1px #000; } .cpe_fill_icon, .cpe_fill_icon -{ - @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*10, 0); +{ + @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*10, 0); } .cpe_fill_icon:hover, .cpe_fill_icon.selected, .cpe_fill_icon:hover, .cpe_fill_icon.selected -{ - @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*11, 0); +{ + @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*11, 0); } .cpe_stroke_icon, .cpe_stroke_icon -{ - @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*8, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1); +{ + @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*8, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1); } .cpe_stroke_icon:hover, .cpe_stroke_icon.selected, .cpe_stroke_icon:hover, .cpe_stroke_icon.selected -{ - @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*9, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1); +{ + @include sprite_background (($sprite_stdbtn_width+$sprite_stdbtn_spacing)*9, ($sprite_stdbtn_height+$sprite_stdbtn_spacing)*1); } .cp_modes { - float: right; - margin: 4px 6px 0px 0px; - min-width: 73px; + float: right; + margin: 4px 6px 0px 0px; + min-width: 73px; } .cp_modes button { - font-size: 14px; - line-height: 22px; - vertical-align: middle; - float: left; - background: none; - border: none; - margin: 0px; - padding: 0px; - color: #FFF; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; + font-size: 14px; + line-height: 22px; + vertical-align: middle; + float: left; + background: none; + border: none; + margin: 0px; + padding: 0px; + color: #FFF; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; } .cp_modes button:hover { - cursor: pointer; - color: #CCC; + cursor: pointer; + color: #CCC; } .cp_rgb_mode, .cp_hsl_mode { - color: #888 !important; + color: #888 !important; } .cp_rgb_mode:hover/* , .cp_hsl_mode:hover */ { - color: #CCC !important; + color: #CCC !important; } .cp_rgb_mode.selected/* , .cp_hsl_mode.selected */ { - color: #FFF !important; + color: #FFF !important; } .cp_modes hr { - display: block; - float: left; - width: 2px; - height: 14px; - border: none; - clear: none; - background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0.5, rgb(29,29,29)), color-stop(0.75, rgb(66,66,66))); - margin: 4px 8px 0px 9px + display: block; + float: left; + width: 2px; + height: 14px; + border: none; + clear: none; + background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0.5, rgb(29,29,29)), color-stop(0.75, rgb(66,66,66))); + margin: 4px 8px 0px 9px } .cp_options { - float: left; - margin: 56px 0px 0px -48px; - + float: left; + margin: 56px 0px 0px -48px; + } .cp_options button { - width: 14px; - height: 15px; - overflow: hidden; - text-indent: -9999px; - float: left; - cursor: pointer; - margin: 0px 2px 0px 0px; - border: none; - opacity: .7; + width: 14px; + height: 15px; + overflow: hidden; + text-indent: -9999px; + float: left; + cursor: pointer; + margin: 0px 2px 0px 0px; + border: none; + opacity: .7; } .cp_options button:hover { - background-position: 0px 1px; - opacity: 1; + background-position: 0px 1px; + opacity: 1; } .cp_reset { - background: url(../img/icon_default.png) transparent no-repeat 0px 0px; + background: url(../img/icon_default.png) transparent no-repeat 0px 0px; } .cp_nocolor { - background: url(../img/icon_nocolor.png) transparent no-repeat 0px 0px; + background: url(../img/icon_nocolor.png) transparent no-repeat 0px 0px; } .cp_swap { - background: url(../img/icon_swap.png) transparent no-repeat 0px 0px; + background: url(../img/icon_swap.png) transparent no-repeat 0px 0px; } .cp_sliders { - float: left; - width: 127px; - margin: 0px 0px 0px 0px; + float: left; + width: 127px; + margin: 0px 0px 0px 0px; } .cp_labels { - float: left; - margin: 0px 8px 2px 5px; - font-family: 'Droid Sans', sans-serif; - font-size: 12px; + float: left; + margin: 0px 8px 2px 5px; + font-family: 'Droid Sans', sans-serif; + font-size: 12px; } .cp_labels div { - float: left; - clear: left; - width: 12px; - margin: 0px 0px 3px 0px; + float: left; + clear: left; + width: 12px; + margin: 0px 0px 3px 0px; } .cp_hottext { - float: left; - width: 24px; - margin: 0px -8px 0px 10px; + float: left; + width: 24px; + margin: 0px -8px 0px 10px; } .cp_hex { - float: left; - clear: both; - margin: 6px 0px 0px 58px; + float: left; + clear: both; + margin: 6px 0px 0px 58px; } .cp_hex input { - width: 127px; - background: #555; - border: 1px solid #333; - color: #FFF; - padding: 1px 0px 1px 0px; - margin: 0px 0px 0px 10px; - text-transform: uppercase; - text-decoration: none !important; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - letter-spacing: 1px; + width: 127px; + background: #555; + border: 1px solid #333; + color: #FFF; + padding: 1px 0px 1px 0px; + margin: 0px 0px 0px 10px; + text-transform: uppercase; + text-decoration: none !important; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; + font-size: 11px; + letter-spacing: 1px; } .cp_hex input:focus { - outline: none; - padding: 2px 0px 2px 0px; - margin: -1px 0px -1px 11px; - background: #FFF; - color: #000; - text-shadow: none; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - letter-spacing: 1px; + outline: none; + padding: 2px 0px 2px 0px; + margin: -1px 0px -1px 11px; + background: #FFF; + color: #000; + text-shadow: none; + font-family: 'Droid Sans', sans-serif; + font-size: 11px; + letter-spacing: 1px; } .cp_spectrum { - float: left; - width: 234px; - background: #333; - height: 20px; - clear: both; - margin: 12px 4px 0px 4px; - border: solid 1px #000; + float: left; + width: 234px; + background: #333; + height: 20px; + clear: both; + margin: 12px 4px 0px 4px; + border: solid 1px #000; } .cp_slider1, .cp_slider2, .cp_slider3, .cp_slider4 { - width: 127px; + width: 127px; height: 12px; - float: left; - clear: none; - margin: 0px 0px 5px 0px; + float: left; + clear: none; + margin: 0px 0px 5px 0px; } .cp_hottext input.hottext { - background: none; - float: right; - margin: -1px 0px 4px 0px; - padding: 0px; - width: 23px; - color: #FFF; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - text-align: center; + background: none; + float: right; + margin: -1px 0px 4px 0px; + padding: 0px; + width: 23px; + color: #FFF; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; + font-size: 11px; + text-align: center; } .cp_hottext input.hottextInput { - background: #FFF; - color: #000; - text-shadow: none; - border: 1px solid #333; - margin: -1px -2px 1px 1px; - padding: 1px; - text-decoration: none; - outline: none; + background: #FFF; + color: #000; + text-shadow: none; + border: 1px solid #333; + margin: -1px -2px 1px 1px; + padding: 1px; + text-decoration: none; + outline: none; } .cp_sliders .slider-track { - background: none; + background: none; } .cp_sliders .knob { - background: url(../img/knob.png) no-repeat transparent center center; + background: url(../img/knob.png) no-repeat transparent center center; } diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html index bf6a83b4..99b781ab 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html @@ -29,14 +29,14 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. --> - - - - - - - - - - - + + + -
-
- -
- - - - -
- -
#
- - - - - - - -
- -
-
-
-
-
-
- -
-
Alpha
-
- -
%
-
- -
+ - +
+
+ +
+ + + + +
+ +
#
+ + + + + + + +
+ +
+
+
+
+
+
+ +
+
Alpha
+
+ +
%
+
+ +
+ + diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 83d4e6ed..6511cddc 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -30,18 +30,18 @@ POSSIBILITY OF SUCH DAMAGE. //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component, - Slider = require("js/components/slider.reel").Slider, - HotText = require("js/components/hottext.reel").HotText, - ColorWheel = require("js/components/colorwheel.reel").ColorWheel, - GradientPicker = require("js/components/gradientpicker.reel").GradientPicker; +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + Slider = require("js/components/slider.reel").Slider, + HotText = require("js/components/hottext.reel").HotText, + ColorWheel = require("js/components/colorwheel.reel").ColorWheel, + GradientPicker = require("js/components/gradientpicker.reel").GradientPicker; //////////////////////////////////////////////////////////////////////// //Exporting as ColorPanelPopup exports.ColorPanelPopup = Montage.create(Component, { - //////////////////////////////////////////////////////////////////// - // - hasTemplate: { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { value: true }, //////////////////////////////////////////////////////////////////// @@ -58,424 +58,424 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _components: { - value: null + value: null }, //////////////////////////////////////////////////////////////////// // setNoColor: { - value: function (code) { - if (this.colorManager) this.colorManager.applyNoColor(code); - // - if (!code && !this.props.panel) { - this.dispatchEvent({type: 'change', wasSetByCode: code, mode: 'nocolor', value: null}); - } - } + value: function (code) { + if (this.colorManager) this.colorManager.applyNoColor(code); + // + if (!code && !this.props.panel) { + this.dispatchEvent({type: 'change', wasSetByCode: code, mode: 'nocolor', value: null}); + } + } }, //////////////////////////////////////////////////////////////////// // prepareForDraw: { - value: function () { - // - this._components = null; - this._components = {wheel: null, combo: null, gradient: null, hex: null}; - } + value: function () { + // + this._components = null; + this._components = {wheel: null, combo: null, gradient: null, hex: null}; + } }, //////////////////////////////////////////////////////////////////// // willDraw: { - value: function() { - // - this.element.style.opacity = 0; - // - this._components.combo = {}; - this._components.combo.slider = Slider.create(); - this._components.combo.hottext = HotText.create(); - this._components.combo.slider.element = this.alphaSlider; - this._components.combo.hottext.element = this.alphaHottext; - // - Object.defineBinding(this._components.combo.hottext, "value", { - boundObject: this._components.combo.slider, - boundObjectPropertyPath: "value", - oneway: false, - boundValueMutator: function(value) { - return Math.round(value); + value: function() { + // + this.element.style.opacity = 0; + // + this._components.combo = {}; + this._components.combo.slider = Slider.create(); + this._components.combo.hottext = HotText.create(); + this._components.combo.slider.element = this.alphaSlider; + this._components.combo.hottext.element = this.alphaHottext; + // + Object.defineBinding(this._components.combo.hottext, "value", { + boundObject: this._components.combo.slider, + boundObjectPropertyPath: "value", + oneway: false, + boundValueMutator: function(value) { + return Math.round(value); } - }); - // - if (this.application.ninja.colorController.colorView && this.props.panel) { - Object.defineBinding(this._components.combo.slider, "value", { - boundObject: this.application.ninja.colorController.colorView._combo[3].slider, - boundObjectPropertyPath: "value", - oneway: false, - boundValueMutator: function(value) { - return Math.round(value); - } - }); - } - // - this._components.combo.slider.maxValue = this._components.combo.hottext.maxValue = 100; - // - if (this.application.ninja.colorController.colorView) { - this._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView); - } - // - this._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true); - this._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); - // - this._components.wheel = ColorWheel.create(); - this._components.wheel.element = this.wheel; - this._components.wheel.element.style.display = 'block'; - this._components.wheel.rimWidth = 14; - this._components.wheel.strokeWidth = 2; - // - this._components.wheel.value = this.colorManager.hsv; - this._components.wheel.addEventListener('change', this, true); - this._components.wheel.addEventListener('changing', this, true); - // - Object.defineBinding(this._components.wheel, "value", { - boundObject: this.colorManager, - boundObjectPropertyPath: "_hsv", - boundValueMutator: function(value) { - return value; + }); + // + if (this.application.ninja.colorController.colorView && this.props.panel) { + Object.defineBinding(this._components.combo.slider, "value", { + boundObject: this.application.ninja.colorController.colorView._combo[3].slider, + boundObjectPropertyPath: "value", + oneway: false, + boundValueMutator: function(value) { + return Math.round(value); + } + }); + } + // + this._components.combo.slider.maxValue = this._components.combo.hottext.maxValue = 100; + // + if (this.application.ninja.colorController.colorView) { + this._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView); + } + // + this._components.combo.slider.addEventListener('change', this.alphaChange.bind(this), true); + this._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); + // + this._components.wheel = ColorWheel.create(); + this._components.wheel.element = this.wheel; + this._components.wheel.element.style.display = 'block'; + this._components.wheel.rimWidth = 14; + this._components.wheel.strokeWidth = 2; + // + this._components.wheel.value = this.colorManager.hsv; + this._components.wheel.addEventListener('change', this, true); + this._components.wheel.addEventListener('changing', this, true); + // + Object.defineBinding(this._components.wheel, "value", { + boundObject: this.colorManager, + boundObjectPropertyPath: "_hsv", + boundValueMutator: function(value) { + return value; } - }); - } + }); + } }, //////////////////////////////////////////////////////////////////// // draw: { - value: function() { - // - if (!this.props || (this.props && this.props.palette)) { - // - this.btnPalette.addEventListener('click', function () { - this.popupSwitchInputTo(this.palettes); - }.bind(this), true); - // - this.drawPalette(this.defaultPalette, this.colorManager); - } else { - this.btnPalette.style.display = 'none'; - } - // - if (!this.props || (this.props && this.props.gradient)) { - // - this.btnGradient.addEventListener('click', function () { - this.popupSwitchInputTo(this.gradients); - }.bind(this), true); - // - if (!this.colorManager.gradient) { - this.drawGradient(this.defaultGradient); - } - } else { - this.btnGradient.style.display = 'none'; - } - // - this._components.hex = this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex, this.colorManager); - // - this._components.combo.slider.needsDraw = true; - this._components.combo.hottext.needsDraw = true; - // - if (!this.props || (this.props && this.props.nocolor)) { - // - this.btnNocolor.addEventListener('click', function () { - this.setNoColor(false); - }.bind(this), true); - } else { - this.btnNocolor.style.display = 'none'; - } - // - if (!this.props || (this.props && this.props.wheel)) { - // - this.btnWheel.addEventListener('click', function () { - this.popupSwitchInputTo(this.wheel); - }.bind(this), true); - // - this._components.wheel.addEventListener('firstDraw', this, false); - this._components.wheel.needsDraw = true; - } else { - this.btnWheel.style.display = 'none'; - } - // - if (!this.props || (this.props && this.props.image)) { - // - this.btnImage.style.opacity = .2;//TODO: Remove, visual feedback for disable button - this.btnImage.addEventListener('click', function () { - //this.popupSwitchInputTo(this.images); - }.bind(this), true); - } else { - this.btnImage.style.display = 'none'; - } - // - if (!this.props || (this.props && this.props.history)) { - this.application.ninja.colorController.colorView.addButton('current', this.btnCurrent); - this.application.ninja.colorController.colorView.addButton('previous', this.btnPrevious); - } else { - this.btnCurrent.style.display = 'none'; - this.btnPrevious.style.display = 'none'; - } - } + value: function() { + // + if (!this.props || (this.props && this.props.palette)) { + // + this.btnPalette.addEventListener('click', function () { + this.popupSwitchInputTo(this.palettes); + }.bind(this), true); + // + this.drawPalette(this.defaultPalette, this.colorManager); + } else { + this.btnPalette.style.display = 'none'; + } + // + if (!this.props || (this.props && this.props.gradient)) { + // + this.btnGradient.addEventListener('click', function () { + this.popupSwitchInputTo(this.gradients); + }.bind(this), true); + // + if (!this.colorManager.gradient) { + this.drawGradient(this.defaultGradient); + } + } else { + this.btnGradient.style.display = 'none'; + } + // + this._components.hex = this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex, this.colorManager); + // + this._components.combo.slider.needsDraw = true; + this._components.combo.hottext.needsDraw = true; + // + if (!this.props || (this.props && this.props.nocolor)) { + // + this.btnNocolor.addEventListener('click', function () { + this.setNoColor(false); + }.bind(this), true); + } else { + this.btnNocolor.style.display = 'none'; + } + // + if (!this.props || (this.props && this.props.wheel)) { + // + this.btnWheel.addEventListener('click', function () { + this.popupSwitchInputTo(this.wheel); + }.bind(this), true); + // + this._components.wheel.addEventListener('firstDraw', this, false); + this._components.wheel.needsDraw = true; + } else { + this.btnWheel.style.display = 'none'; + } + // + if (!this.props || (this.props && this.props.image)) { + // + this.btnImage.style.opacity = .2;//TODO: Remove, visual feedback for disable button + this.btnImage.addEventListener('click', function () { + //this.popupSwitchInputTo(this.images); + }.bind(this), true); + } else { + this.btnImage.style.display = 'none'; + } + // + if (!this.props || (this.props && this.props.history)) { + this.application.ninja.colorController.colorView.addButton('current', this.btnCurrent); + this.application.ninja.colorController.colorView.addButton('previous', this.btnPrevious); + } else { + this.btnCurrent.style.display = 'none'; + this.btnPrevious.style.display = 'none'; + } + } }, //////////////////////////////////////////////////////////////////// // didDraw: { - value: function() { - // - - } + value: function() { + // + + } }, //////////////////////////////////////////////////////////////////// //Reworking logic, firstDraw bubbles up, so target must be checked handleFirstDraw: { - value: function (e) { - // - if (this._components.wheel) { - //Only using it for one instance, no need to check target - this._components.wheel.removeEventListener('firstDraw', this, false); - } - //Switching to tab from previous selection - switch (this.application.ninja.colorController.popupTab) { - case 'wheel': - this.popupSwitchInputTo(this.wheel); - break; - case 'palette': - this.popupSwitchInputTo(this.palettes); - break; - case 'image': - this.popupSwitchInputTo(this.images); - break; - default: - this.popupSwitchInputTo(this.wheel); - break - } - //Checking for a gradient to be current color - if (this.colorManager.gradient && (!this.props || (this.props && this.props.gradient))) { - if (this.colorManager.colorHistory[this.colorManager.input] && this.colorManager.colorHistory[this.colorManager.input][this.colorManager.colorHistory[this.colorManager.input].length-1].m !== 'gradient') { - //If no gradient set, using default - this.drawGradient(this.defaultGradient); - } else { - //Gradient has been set, so opening gradient tab with gradient - this.drawGradient(this.colorManager.gradient); - this.popupSwitchInputTo(this.gradients); - } - } - //Displaying element once it's been drawn - this.element.style.opacity = 1; - } + value: function (e) { + // + if (this._components.wheel) { + //Only using it for one instance, no need to check target + this._components.wheel.removeEventListener('firstDraw', this, false); + } + //Switching to tab from previous selection + switch (this.application.ninja.colorController.popupTab) { + case 'wheel': + this.popupSwitchInputTo(this.wheel); + break; + case 'palette': + this.popupSwitchInputTo(this.palettes); + break; + case 'image': + this.popupSwitchInputTo(this.images); + break; + default: + this.popupSwitchInputTo(this.wheel); + break + } + //Checking for a gradient to be current color + if (this.colorManager.gradient && (!this.props || (this.props && this.props.gradient))) { + if (this.colorManager.colorHistory[this.colorManager.input] && this.colorManager.colorHistory[this.colorManager.input][this.colorManager.colorHistory[this.colorManager.input].length-1].m !== 'gradient') { + //If no gradient set, using default + this.drawGradient(this.defaultGradient); + } else { + //Gradient has been set, so opening gradient tab with gradient + this.drawGradient(this.colorManager.gradient); + this.popupSwitchInputTo(this.gradients); + } + } + //Displaying element once it's been drawn + this.element.style.opacity = 1; + } }, //////////////////////////////////////////////////////////////////// // popupSwitchInputTo: { - value: function (tab) { - // - if (tab !== this.palettes) { - this.palettes.style.display = 'none'; - } else { - this.palettes.style.display = 'block'; - this.alpha.style.display = 'block'; - // - this.application.ninja.colorController.popupTab = 'palette'; - } - // - if (tab !== this.wheel && this._components.wheel.element) { - this._components.wheel.element.style.display = 'none'; - } else if (this._components.wheel.element && this._components.wheel.element.style.display !== 'block'){ - this._components.wheel.element.style.display = 'block'; - this.alpha.style.display = 'block'; - // - this.application.ninja.colorController.popupTab = 'wheel'; - } else { - this.wheel.style.display = 'none'; - } - // - if (tab !== this.images) { - this.images.style.display = 'none'; - } else { - this.images.style.display = 'block'; - this.alpha.style.display = 'none'; - // - this.application.ninja.colorController.popupTab = 'image'; - } - // - if (tab !== this.gradients) { - this.gradients.style.display = 'none'; - // - /* + value: function (tab) { + // + if (tab !== this.palettes) { + this.palettes.style.display = 'none'; + } else { + this.palettes.style.display = 'block'; + this.alpha.style.display = 'block'; + // + this.application.ninja.colorController.popupTab = 'palette'; + } + // + if (tab !== this.wheel && this._components.wheel.element) { + this._components.wheel.element.style.display = 'none'; + } else if (this._components.wheel.element && this._components.wheel.element.style.display !== 'block'){ + this._components.wheel.element.style.display = 'block'; + this.alpha.style.display = 'block'; + // + this.application.ninja.colorController.popupTab = 'wheel'; + } else { + this.wheel.style.display = 'none'; + } + // + if (tab !== this.images) { + this.images.style.display = 'none'; + } else { + this.images.style.display = 'block'; + this.alpha.style.display = 'none'; + // + this.application.ninja.colorController.popupTab = 'image'; + } + // + if (tab !== this.gradients) { + this.gradients.style.display = 'none'; + // + /* if (this._components.wheel._value) { - this._components.wheel.value = {h: this._components.wheel._value.h, s: this._components.wheel._value.s, v: this._components.wheel._value.v, wasSetByCode: false}; - } else { - this._components.wheel.value = {h: 0, s: 1, v: 1, wasSetByCode: false}; - } + this._components.wheel.value = {h: this._components.wheel._value.h, s: this._components.wheel._value.s, v: this._components.wheel._value.v, wasSetByCode: false}; + } else { + this._components.wheel.value = {h: 0, s: 1, v: 1, wasSetByCode: false}; + } */ - } else { - this.gradients.style.display = 'block'; - this.alpha.style.display = 'none'; - // - this.application.ninja.colorController.popupTab = 'gradient'; - } - // - if (!this.isPopupChip) this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); - // - this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); - } + } else { + this.gradients.style.display = 'block'; + this.alpha.style.display = 'none'; + // + this.application.ninja.colorController.popupTab = 'gradient'; + } + // + if (!this.isPopupChip) this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); + // + this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); + } }, //////////////////////////////////////////////////////////////////// // drawPalette: { - value: function (c, m) { - var i, button; - // - this.palettes.style.display = 'block'; - // - for (i in c) { - button = document.createElement('button'); - button.style.background = c[i].css; - button.title = c[i].css.toUpperCase(); - button.colorMode = c[i].mode; - button.colorValue = c[i].value; - this.palettes.appendChild(button); - button.addEventListener('click', function (b) { - var rgb, color; - // - if (b._event.srcElement.colorMode !== 'hex') { - color = b._event.srcElement.colorValue; - color.wasSetByCode = false; - color.type = 'change'; - m[b._event.srcElement.colorMode] = color; - } else { - if (m.mode === 'hsl') { - rgb = m.hexToRgb(b._event.srcElement.colorValue); - if (rgb) { - color = m.rgbToHsl(rgb.r, rgb.g, rgb.b); - color.wasSetByCode = false; - color.type = 'change'; - m.hsl = color; - } else { - m.applyNoColor(false); - } - } else { - color = m.hexToRgb(b._event.srcElement.colorValue); - if (color) { - color.wasSetByCode = false; - color.type = 'change'; - m.rgb = color; - } else { - m.applyNoColor(false); - } - //TODO: Remove this is a hack - if (!this.props.panel) { - this.dispatchEvent({type: 'change', wasSetByCode: false, mode: 'hex', value: b._event.srcElement.colorValue}); - } - } - } - }.bind(this), true); - } - // - this.palettes.style.display = 'none'; - } + value: function (c, m) { + var i, button; + // + this.palettes.style.display = 'block'; + // + for (i in c) { + button = document.createElement('button'); + button.style.background = c[i].css; + button.title = c[i].css.toUpperCase(); + button.colorMode = c[i].mode; + button.colorValue = c[i].value; + this.palettes.appendChild(button); + button.addEventListener('click', function (b) { + var rgb, color; + // + if (b._event.srcElement.colorMode !== 'hex') { + color = b._event.srcElement.colorValue; + color.wasSetByCode = false; + color.type = 'change'; + m[b._event.srcElement.colorMode] = color; + } else { + if (m.mode === 'hsl') { + rgb = m.hexToRgb(b._event.srcElement.colorValue); + if (rgb) { + color = m.rgbToHsl(rgb.r, rgb.g, rgb.b); + color.wasSetByCode = false; + color.type = 'change'; + m.hsl = color; + } else { + m.applyNoColor(false); + } + } else { + color = m.hexToRgb(b._event.srcElement.colorValue); + if (color) { + color.wasSetByCode = false; + color.type = 'change'; + m.rgb = color; + } else { + m.applyNoColor(false); + } + //TODO: Remove this is a hack + if (!this.props.panel) { + this.dispatchEvent({type: 'change', wasSetByCode: false, mode: 'hex', value: b._event.srcElement.colorValue}); + } + } + } + }.bind(this), true); + } + // + this.palettes.style.display = 'none'; + } }, //////////////////////////////////////////////////////////////////// // defaultPalette: { - value: [{mode: 'hex', value: '000000', css: '#000000'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000000', css: '#000000'}, {mode: 'hex', value: '003300', css: '#003300'}, {mode: 'hex', value: '006600', css: '#006600'}, {mode: 'hex', value: '009900', css: '#009900'}, {mode: 'hex', value: '00cc00', css: '#00cc00'}, {mode: 'hex', value: '00ff00', css: '#00ff00'}, {mode: 'hex', value: '330000', css: '#330000'}, {mode: 'hex', value: '333300', css: '#333300'}, {mode: 'hex', value: '336600', css: '#336600'}, {mode: 'hex', value: '339900', css: '#339900'}, {mode: 'hex', value: '33cc00', css: '#33cc00'}, {mode: 'hex', value: '33ff00', css: '#33ff00'}, {mode: 'hex', value: '660000', css: '#660000'}, {mode: 'hex', value: '663300', css: '#663300'}, {mode: 'hex', value: '666600', css: '#666600'}, {mode: 'hex', value: '669900', css: '#669900'}, {mode: 'hex', value: '66cc00', css: '#66cc00'}, {mode: 'hex', value: '66ff00', css: '#66ff00'}, - {mode: 'hex', value: '333333', css: '#333333'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000033', css: '#000033'}, {mode: 'hex', value: '003333', css: '#003333'}, {mode: 'hex', value: '006633', css: '#006633'}, {mode: 'hex', value: '009933', css: '#009933'}, {mode: 'hex', value: '00cc33', css: '#00cc33'}, {mode: 'hex', value: '00ff33', css: '#00ff33'}, {mode: 'hex', value: '330033', css: '#330033'}, {mode: 'hex', value: '333333', css: '#333333'}, {mode: 'hex', value: '336633', css: '#336633'}, {mode: 'hex', value: '339933', css: '#339933'}, {mode: 'hex', value: '33cc33', css: '#33cc33'}, {mode: 'hex', value: '33ff33', css: '#33ff33'}, {mode: 'hex', value