diff options
author | Jose Antonio Marquez | 2012-06-21 16:53:04 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-06-21 16:53:04 -0700 |
commit | 1e9af08f42e4ba18fc8c5a8501d8cbecec0f4fe8 (patch) | |
tree | 450532452e39d599c026bab1d329df5797aa53a8 /js/panels/color/colorpopup-manager.js | |
parent | 4b186e0c3f97f704d1ac671a63cd02084e19fe0e (diff) | |
download | ninja-1e9af08f42e4ba18fc8c5a8501d8cbecec0f4fe8.tar.gz |
Replacing temp color chip pop
This replaces the temporary color chip popup with a main popup used universally throughout the app. There are still outstanding issues to be addressed, this is just the initial set up before debugging issues.
Diffstat (limited to 'js/panels/color/colorpopup-manager.js')
-rwxr-xr-x | js/panels/color/colorpopup-manager.js | 264 |
1 files changed, 150 insertions, 114 deletions
diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index 4667f2b4..fba196e4 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js | |||
@@ -9,7 +9,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
9 | var Montage = require("montage/core/core").Montage, | 9 | var Montage = require("montage/core/core").Montage, |
10 | Component = require("montage/ui/component").Component, | 10 | Component = require("montage/ui/component").Component, |
11 | ColorChipPopup = require("js/panels/Color/colorchippopup.reel").ColorChipPopup, | 11 | ColorChipPopup = require("js/panels/Color/colorchippopup.reel").ColorChipPopup, |
12 | ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup; | 12 | ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup, |
13 | ColorModel = require("js/models/color-model").ColorModel; | ||
13 | //////////////////////////////////////////////////////////////////////// | 14 | //////////////////////////////////////////////////////////////////////// |
14 | //Exporting as ColorPopupManager | 15 | //Exporting as ColorPopupManager |
15 | exports.ColorPopupManager = Montage.create(Component, { | 16 | exports.ColorPopupManager = Montage.create(Component, { |
@@ -26,69 +27,77 @@ exports.ColorPopupManager = Montage.create(Component, { | |||
26 | //////////////////////////////////////////////////////////////////// | 27 | //////////////////////////////////////////////////////////////////// |
27 | // | 28 | // |
28 | init: { | 29 | init: { |
29 | enumerable: false, | ||
30 | value: function () { | 30 | value: function () { |
31 | //////////////////////////////////////////////////////////// | 31 | //////////////////////////////////////////////////////////// |
32 | //Closing popups on resize | 32 | //Closing popups on resize |
33 | window.addEventListener('resize', function (e) { | 33 | window.addEventListener('resize', function (e) { |
34 | this.application.ninja.colorController.colorPopupManager.hideColorPopup(); | 34 | this.application.ninja.colorController.colorPopupManager.hideColorPopup(); |
35 | }.bind(this)); | 35 | }.bind(this)); |
36 | //Storing limits of popup | 36 | |
37 | var top, bottom, left, right; | ||
38 | //Closing popups if outside limits | 37 | //Closing popups if outside limits |
39 | document.addEventListener('mousedown', function (e) { | 38 | document.addEventListener('mousedown', function (e) { |
40 | //Checking for popup to be opened otherwise nothing happens | 39 | // |
41 | if (this._popupPanel.opened && this._popupPanel.popup && this._popupPanel.popup.element && !e._event.srcElement.inputType) { | 40 | if (this._popupBase && !this._popupChipBase) { |
42 | //Getting horizontal limits | 41 | if(!this.popupHitCheck(this._popupBase, e)) { |
43 | left = parseInt(this._popupPanel.popup.element.style.left) + parseInt(this._popupPanel.popup.element.style.marginLeft); | 42 | this.hideColorPopup(); |
44 | right = left + parseInt(this._popupPanel.popup.element.offsetWidth); | 43 | } |
45 | //Getting vertical limits | 44 | } else if (!this._popupBase && this._popupChipBase) { |
46 | top = parseInt(this._popupPanel.popup.element.style.top) + parseInt(this._popupPanel.popup.element.style.marginTop); | 45 | if(!this.popupHitCheck(this._popupChipBase, e)) { |
47 | bottom = left + parseInt(this._popupPanel.popup.element.offsetHeight); | 46 | this.hideColorChipPopup(); |
48 | //Checking click position in relation to limits | 47 | } |
49 | if ((e._event.clientX < left || e._event.clientX > right) || (e._event.clientY < top || e._event.clientY > bottom)) { | 48 | } else if (this._popupBase && this._popupChipBase) { |
50 | //Hides popups since click is outside limits | 49 | if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { |
51 | this.application.ninja.colorController.colorPopupManager.hideColorPopup(); | 50 | this.hideColorPopup(); |
52 | } | 51 | } |
53 | } | 52 | } |
54 | }.bind(this)); | 53 | }.bind(this)); |
55 | //////////////////////////////////////////////////////////// | 54 | //////////////////////////////////////////////////////////// |
56 | } | 55 | } |
57 | }, | 56 | }, |
58 | //////////////////////////////////////////////////////////////////// | 57 | //////////////////////////////////////////////////////////////////// |
59 | // | 58 | // |
60 | _popupPanel: { | 59 | popupHitCheck: { |
61 | enumerable: false, | 60 | value: function (element, e) { |
62 | value: {} | 61 | //Storing limits of popup |
63 | }, | 62 | var top, bottom, left, right; |
64 | //////////////////////////////////////////////////////////////////// | 63 | //Checking for popup to be opened otherwise nothing happens |
65 | // | 64 | if (element && element.opened && element.popup && element.popup.element) { |
66 | _popupChip: { | 65 | //Getting horizontal limits |
67 | enumerable: false, | 66 | left = parseInt(element.popup.element.style.left) + parseInt(element.popup.element.style.marginLeft); |
68 | value: {} | 67 | right = left + parseInt(element.popup.element.offsetWidth); |
68 | //Getting vertical limits | ||
69 | top = parseInt(element.popup.element.style.top) + parseInt(element.popup.element.style.marginTop); | ||
70 | bottom = left + parseInt(element.popup.element.offsetHeight); | ||
71 | //Checking click position in relation to limits | ||
72 | if ((e._event.clientX < left || e._event.clientX > right) || (e._event.clientY < top || e._event.clientY > bottom)) { | ||
73 | //Hides popups since click is outside limits | ||
74 | return false; | ||
75 | } else { | ||
76 | return true; | ||
77 | } | ||
78 | } else { | ||
79 | return false; | ||
80 | } | ||
81 | } | ||
69 | }, | 82 | }, |
70 | //////////////////////////////////////////////////////////////////// | 83 | //////////////////////////////////////////////////////////////////// |
71 | // | 84 | // |
72 | _popupBase: { | 85 | _popupBase: { |
73 | enumerable: false, | ||
74 | value: null | 86 | value: null |
75 | }, | 87 | }, |
76 | //////////////////////////////////////////////////////////////////// | 88 | //////////////////////////////////////////////////////////////////// |
77 | // | 89 | // |
78 | _popupChipBase: { | 90 | _popupChipBase: { |
79 | enumerable: false, | ||
80 | value: null | 91 | value: null |
81 | }, | 92 | }, |
82 | //////////////////////////////////////////////////////////////////// | 93 | //////////////////////////////////////////////////////////////////// |
83 | //Storing color manager | 94 | //Storing color manager |
84 | _colorManager: { | 95 | _colorManager: { |
85 | enumerable: false, | ||
86 | value: null | 96 | value: null |
87 | }, | 97 | }, |
88 | //////////////////////////////////////////////////////////////////// | 98 | //////////////////////////////////////////////////////////////////// |
89 | // | 99 | // |
90 | colorManager: { | 100 | colorManager: { |
91 | enumerable: true, | ||
92 | get: function() { | 101 | get: function() { |
93 | return this._colorManager; | 102 | return this._colorManager; |
94 | }, | 103 | }, |
@@ -96,27 +105,18 @@ exports.ColorPopupManager = Montage.create(Component, { | |||
96 | this._colorManager = value; | 105 | this._colorManager = value; |
97 | } | 106 | } |
98 | }, | 107 | }, |
99 | 108 | //////////////////////////////////////////////////////////////////// | |
100 | 109 | // | |
101 | |||
102 | //TODO: Remove, figure out offset bug | ||
103 | _hackOffset: { | ||
104 | enumerable: true, | ||
105 | value: false | ||
106 | }, | ||
107 | |||
108 | |||
109 | _colorPopupDrawing: { | 110 | _colorPopupDrawing: { |
110 | enumerable: true, | 111 | enumerable: true, |
111 | value: false | 112 | value: false |
112 | }, | 113 | }, |
114 | //////////////////////////////////////////////////////////////////// | ||
115 | // | ||
113 | _colorChipPopupDrawing: { | 116 | _colorChipPopupDrawing: { |
114 | enumerable: true, | 117 | enumerable: true, |
115 | value: false | 118 | value: false |
116 | }, | 119 | }, |
117 | |||
118 | |||
119 | |||
120 | //////////////////////////////////////////////////////////////////// | 120 | //////////////////////////////////////////////////////////////////// |
121 | //TODO: Remove and use montage's built in component | 121 | //TODO: Remove and use montage's built in component |
122 | showColorPopup: { | 122 | showColorPopup: { |
@@ -125,7 +125,7 @@ exports.ColorPopupManager = Montage.create(Component, { | |||
125 | if (this._colorPopupDrawing) { | 125 | if (this._colorPopupDrawing) { |
126 | return; | 126 | return; |
127 | } | 127 | } |
128 | if (this._popupPanel.opened) { | 128 | if (this._popupBase && this._popupBase.opened) { |
129 | //Toogles if called and opened | 129 | //Toogles if called and opened |
130 | this.hideColorPopup(); | 130 | this.hideColorPopup(); |
131 | } else { | 131 | } else { |
@@ -143,15 +143,8 @@ exports.ColorPopupManager = Montage.create(Component, { | |||
143 | // | 143 | // |
144 | this._popupBase = ColorPanelPopup.create(); | 144 | this._popupBase = ColorPanelPopup.create(); |
145 | this._popupBase.element = popup; | 145 | this._popupBase.element = popup; |
146 | this._popupBase.props = {x: x, y: y, side: side, align: align}; | 146 | this._popupBase.props = {x: x, y: y, side: side, align: align, wheel: true, palette: true, gradient: true, image: true, nocolor: true, history: true}; |
147 | this._popupBase.colorManager = this.colorManager; | 147 | this._popupBase.colorManager = this.colorManager; |
148 | //TODO: Remove | ||
149 | if (this._hackOffset) { | ||
150 | this._popupBase.hack = {x: 53, y: 235}; | ||
151 | } else { | ||
152 | this._hackOffset = true; | ||
153 | this._popupBase.hack = {x: 0, y: 0}; | ||
154 | } | ||
155 | // | 148 | // |
156 | this._popupBase.addEventListener('change', this, false); | 149 | this._popupBase.addEventListener('change', this, false); |
157 | this._popupBase.addEventListener('changing', this, false); | 150 | this._popupBase.addEventListener('changing', this, false); |
@@ -166,9 +159,9 @@ exports.ColorPopupManager = Montage.create(Component, { | |||
166 | hideColorPopup: { | 159 | hideColorPopup: { |
167 | enumerable: true, | 160 | enumerable: true, |
168 | value: function () { | 161 | value: function () { |
169 | if (this._popupPanel.opened) { | 162 | if (this._popupBase && this. |