From d553f060303931120d40679dec17f348ead20ee5 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 13 Jun 2012 15:28:18 -0700 Subject: Clean up --- .../colorpanelpopup.reel/colorpanelpopup.html | 17 +++-- .../color/colorpanelpopup.reel/colorpanelpopup.js | 85 ++++++++-------------- 2 files changed, 40 insertions(+), 62 deletions(-) (limited to 'js/panels/color') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html index f65d5bc0..5ad5c615 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html @@ -16,7 +16,12 @@ "owner": { "prototype": "js/panels/Color/colorpanelpopup.reel[ColorPanelPopup]", "properties": { - "element": {"#": "cpp_popup"} + "element": {"#": "cpp_popup"}, + "wheel": {"#": "cntnr_wheel"}, + "images": {"#": "cntnr_images"}, + "gradients": {"#": "cntnr_gradients"}, + "palettes": {"#": "cntnr_palettes"}, + "alpha": {"#": "cntnr_alpha"} } } } @@ -47,13 +52,13 @@
-
-
-
-
+
+
+
+
-
+
Alpha
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index dd7e6192..aebbbd41 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -23,13 +23,11 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Storing color manager _colorManager: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// //Color manager colorManager: { - enumerable: true, get: function() { return this._colorManager; }, @@ -42,13 +40,11 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Storing color panel _colorPanel: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// //Color panel colorPanel: { - enumerable: true, get: function() { return this._colorPanel; }, @@ -59,7 +55,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // setNoColor: { - enumerable: true, value: function (e) { this.colorManager.applyNoColor(); } @@ -67,23 +62,14 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // prepareForDraw: { - enumerable: false, value: function () { // - this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}}; this.element._components = {wheel: null, combo: null}; - //Storing containers for reference - this.element._popups.containers.wheel = this.element.getElementsByClassName('cp_pu_wheel_container')[0]; - this.element._popups.containers.palette = this.element.getElementsByClassName('cp_pu_palette_container')[0]; - this.element._popups.containers.gradient = this.element.getElementsByClassName('cp_pu_gradient_container')[0]; - this.element._popups.containers.image = this.element.getElementsByClassName('cp_pu_image_container')[0]; - this.element._popups.containers.alpha = this.element.getElementsByClassName('cp_pu_alpha')[0]; } }, //////////////////////////////////////////////////////////////////// // willDraw: { - enumerable: false, value: function() { // this.element.style.opacity = 0; @@ -131,7 +117,7 @@ exports.ColorPanelPopup = Montage.create(Component, { this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true); // this.element._components.wheel = ColorWheel.create(); - this.element._components.wheel.element = this.element._popups.containers.wheel; + this.element._components.wheel.element = this.wheel; this.element._components.wheel.element.style.display = 'block'; this.element._components.wheel.rimWidth = 14; this.element._components.wheel.strokeWidth = 2; @@ -152,7 +138,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // draw: { - enumerable: false, value: function() { // this.drawPalette(this.defaultPalette); @@ -171,20 +156,20 @@ exports.ColorPanelPopup = Montage.create(Component, { }.bind(this), true); // this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.element._popups.containers.palette); + this.popupSwitchInputTo(this.palettes); }.bind(this), true); // this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.element._popups.containers.wheel); + this.popupSwitchInputTo(this.wheel); }.bind(this), true); // this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.element._popups.containers.gradient); + this.popupSwitchInputTo(this.gradients); }.bind(this), true); // this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () { - //this.popupSwitchInputTo(this.element._popups.containers.image); + //this.popupSwitchInputTo(this.images); }.bind(this), true); // this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); @@ -198,7 +183,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // didDraw: { - enumerable: false, value: function() { // @@ -207,7 +191,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Reworking logic, firstDraw bubbles up, so target must be checked handleFirstDraw: { - enumerable: false, value: function (e) { // if (this.element._components.wheel) { @@ -217,16 +200,16 @@ exports.ColorPanelPopup = Montage.create(Component, { //Switching to tab from previous selection switch (this.application.ninja.colorController.popupTab) { case 'wheel': - this.popupSwitchInputTo(this.element._popups.containers.wheel); + this.popupSwitchInputTo(this.wheel); break; case 'palette': - this.popupSwitchInputTo(this.element._popups.containers.palette); + this.popupSwitchInputTo(this.palettes); break; case 'image': - this.popupSwitchInputTo(this.element._popups.containers.image); + this.popupSwitchInputTo(this.images); break; default: - this.popupSwitchInputTo(this.element._popups.containers.wheel); + this.popupSwitchInputTo(this.wheel); break } //Checking for a gradient to be current color @@ -237,7 +220,7 @@ exports.ColorPanelPopup = Montage.create(Component, { } else { //Gradient has been set, so opening gradient tab with gradient this.drawGradient(this.colorManager.gradient); - this.popupSwitchInputTo(this.element._popups.containers.gradient); + this.popupSwitchInputTo(this.gradients); } } //Displaying element once it's been drawn @@ -247,40 +230,39 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // popupSwitchInputTo: { - enumerable: true, value: function (tab) { // - if (tab !== this.element._popups.containers.palette) { - this.element._popups.containers.palette.style.display = 'none'; + if (tab !== this.palettes) { + this.palettes.style.display = 'none'; } else { - this.element._popups.containers.palette.style.display = 'block'; - this.element._popups.containers.alpha.style.display = 'block'; + this.palettes.style.display = 'block'; + this.alpha.style.display = 'block'; // this.application.ninja.colorController.popupTab = 'palette'; } // - if (tab !== this.element._popups.containers.wheel && this.element._components.wheel.element) { + if (tab !== this.wheel && this.element._components.wheel.element) { this.element._components.wheel.element.style.display = 'none'; } else if (this.element._components.wheel.element && this.element._components.wheel.element.style.display !== 'block'){ this.element._components.wheel.element.style.display = 'block'; - this.element._popups.containers.alpha.style.display = 'block'; + this.alpha.style.display = 'block'; // this.application.ninja.colorController.popupTab = 'wheel'; } else { - this.element._popups.containers.wheel.style.display = 'none'; + this.wheel.style.display = 'none'; } // - if (tab !== this.element._popups.containers.image) { - this.element._popups.containers.image.style.display = 'none'; + if (tab !== this.images) { + this.images.style.display = 'none'; } else { - this.element._popups.containers.image.style.display = 'block'; - this.element._popups.containers.alpha.style.display = 'none'; + this.images.style.display = 'block'; + this.alpha.style.display = 'none'; // this.application.ninja.colorController.popupTab = 'image'; } // - if (tab !== this.element._popups.containers.gradient) { - this.element._popups.containers.gradient.style.display = 'none'; + if (tab !== this.gradients) { + this.gradients.style.display = 'none'; // if (this.element._components.wheel._value) { this.element._components.wheel.value = {h: this.element._components.wheel._value.h, s: this.element._components.wheel._value.s, v: this.element._components.wheel._value.v, wasSetByCode: false}; @@ -288,8 +270,8 @@ exports.ColorPanelPopup = Montage.create(Component, { this.element._components.wheel.value = {h: 0, s: 1, v: 1, wasSetByCode: false}; } } else { - this.element._popups.containers.gradient.style.display = 'block'; - this.element._popups.containers.alpha.style.display = 'none'; + this.gradients.style.display = 'block'; + this.alpha.style.display = 'none'; // this.application.ninja.colorController.popupTab = 'gradient'; } @@ -300,11 +282,10 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // drawPalette: { - enumerable: true, value: function (c) { var i, button; // - this.element._popups.containers.palette.style.display = 'block'; + this.palettes.style.display = 'block'; // for (i in c) { button = document.createElement('button'); @@ -312,7 +293,7 @@ exports.ColorPanelPopup = Montage.create(Component, { button.title = c[i].css.toUpperCase(); button.colorMode = c[i].mode; button.colorValue = c[i].value; - this.element._popups.containers.palette.appendChild(button); + this.palettes.appendChild(button); button.addEventListener('click', function (b) { var rgb, color; // @@ -346,13 +327,12 @@ exports.ColorPanelPopup = Montage.create(Component, { }.bind(this), true); } // - this.element._popups.containers.palette.style.display = 'none'; + this.palettes.style.display = 'none'; } }, //////////////////////////////////////////////////////////////////// // defaultPalette: { - enumerable: true, 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: '660033', css: '#660033'}, {mode: 'hex', value: '663333', css: '#663333'}, {mode: 'hex', value: '666633', css: '#666633'}, {mode: 'hex', value: '669933', css: '#669933'}, {mode: 'hex', value: '66cc33', css: '#66cc33'}, {mode: 'hex', value: '66ff33', css: '#66ff33'}, {mode: 'hex', value: '666666', css: '#666666'}, {mode: 'hex', value: '808080', css: '#808080'}, {mode: 'hex', value: '000066', css: '#000066'}, {mode: 'hex', value: '003366', css: '#003366'}, {mode: 'hex', value: '006666', css: '#006666'}, {mode: 'hex', value: '009966', css: '#009966'}, {mode: 'hex', value: '00cc66', css: '#00cc66'}, {mode: 'hex', value: '00ff66', css: '#00ff66'}, {mode: 'hex', value: '330066', css: '#330066'}, {mode: 'hex', value: '333366', css: '#333366'}, {mode: 'hex', value: '336666', css: '#336666'}, {mode: 'hex', value: '339966', css: '#339966'}, {mode: 'hex', value: '33cc66', css: '#33cc66'}, {mode: 'hex', value: '33ff66', css: '#33ff66'}, {mode: 'hex', value: '660066', css: '#660066'}, {mode: 'hex', value: '663366', css: '#663366'}, {mode: 'hex', value: '666666', css: '#666666'}, {mode: 'hex', value: '669966', css: '#669966'}, {mode: 'hex', value: '66cc66', css: '#66cc66'}, {mode: 'hex', value: '66ff66', css: '#66ff66'}, @@ -369,11 +349,10 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // drawGradient: { - enumerable: true, value: function (g) { //TODO: Remove container, insert in reel var container = document.createElement('div'), gradient = GradientPicker.create(); - this.element._popups.containers.gradient.appendChild(container); + this.gradients.appendChild(container); //Creating gradient picker from components gradient.element = container; gradient.hack = this.hack; // TODO: Remove @@ -403,13 +382,11 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // defaultGradient: { - enumerable: true, value: {mode: 'linear', gradientMode: 'linear', stops: [{mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}, position: 0}, {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}, position: 100}]} }, //////////////////////////////////////////////////////////////////// // alphaChange: { - enumerable: false, value: function (e) { if (!e._event.wasSetByCode) { var update = {value: this.element._components.combo.slider.value/100, wasSetByCode: false, type: 'change'}; @@ -420,7 +397,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChange: { - enumerable: false, value: function (e) { this.dispatchEvent(e._event); } @@ -428,7 +404,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChanging: { - enumerable: false, value: function (e) { this.dispatchEvent(e._event); } @@ -436,7 +411,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _handleWheelEvent: { - enumerable: false, value: function (e) { if (!e._event.wasSetByCode) { // @@ -448,7 +422,6 @@ exports.ColorPanelPopup = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //Garbage collection (Manual method) destroy: { - enumerable: false, value: function() { // this.application.ninja.colorController.colorView.removeButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); -- cgit v1.2.3 From 118fda42958e4dcf6d2cdbb58eb31cbc08e6ce91 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 13 Jun 2012 15:29:18 -0700 Subject: Fix: IKNINJA-1608 Changing icon, seems low res and improper size, should be hi-res PNG for future reference, using negative space offset to better display. --- .../color/colorpanelpopup.reel/css/colorpanelpopup.css | 2 +- .../color/colorpanelpopup.reel/css/colorpanelpopup.scss | 2 +- .../color/colorpanelpopup.reel/img/icon_palette.jpg | Bin 0 -> 1352 bytes 3 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg (limited to 'js/panels/color') diff --git a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css index 4db0abff..3ffcd2f5 100755 --- a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css +++ b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css @@ -56,7 +56,7 @@ /* line 62, colorpanelpopup.scss */ .cp_pu_palettes { - background: #000; + background: url(../img/icon_palette.jpg) no-repeat black -1px -1px; } /* line 67, colorpanelpopup.scss */ diff --git a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss index 1f63658a..cd9f47a2 100755 --- a/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss +++ b/js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss @@ -60,7 +60,7 @@ $grey_light: #494949; .cp_pu_palettes { - background: #000; + background: url(../img/icon_palette.jpg) no-repeat #000 -1px -1px; } .cp_pu_nocolor diff --git a/js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg b/js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg new file mode 100644 index 00000000..1ea9ac4a Binary files /dev/null and b/js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg differ -- cgit v1.2.3