diff options
Diffstat (limited to 'js/panels/css-panel/styles-view-delegate.js')
-rw-r--r-- | js/panels/css-panel/styles-view-delegate.js | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js new file mode 100644 index 00000000..a76d25ad --- /dev/null +++ b/js/panels/css-panel/styles-view-delegate.js | |||
@@ -0,0 +1,233 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component, | ||
9 | Keyboard = require("js/mediators/keyboard-mediator").Keyboard; | ||
10 | |||
11 | exports.StylesViewMediator = Montage.create(Component, { | ||
12 | newClassPrefix : { | ||
13 | value: "new-class" | ||
14 | }, | ||
15 | stylesController : { | ||
16 | get: function() { | ||
17 | return this.application.ninja.stylesController; | ||
18 | }, | ||
19 | set: function(){ | ||
20 | return; | ||
21 | } | ||
22 | }, | ||
23 | |||
24 | handleSelectorChange : { | ||
25 | value: function(rule, newSelector, ruleComponent) { | ||
26 | if(newSelector === "") { | ||
27 | //debugger; | ||
28 | ruleComponent.parentComponent.removeRule(ruleComponent); | ||
29 | return false; | ||
30 | } | ||
31 | |||
32 | rule.selectorText = newSelector; | ||
33 | |||
34 | ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) { | ||
35 | return this._doesSelectorTargetElement(newSelector, el); | ||
36 | }, this); | ||
37 | |||
38 | } | ||
39 | }, | ||
40 | |||
41 | ///// Add rule button action | ||
42 | handleAddAction : { | ||
43 | value: function(e) { | ||
44 | var selector, | ||
45 | newRule, | ||
46 | applies = true; | ||
47 | |||
48 | ///// Get selection prefix | ||
49 | if(this.ruleListContainer.displayedList.selection.length > 1) { | ||
50 | selector = this.stylesController.generateClassName(null, true); | ||
51 | } else { | ||
52 | selector = this.stylesController.generateClassName(this.newClassPrefix); | ||
53 | } | ||
54 | |||
55 | ///// Create the rule with generated selector | ||
56 | newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }'); | ||
57 | |||
58 | ///// Add the generated class to each element in selection | ||
59 | ///// and check whether it applies to the element | ||
60 | this.ruleListContainer.displayedList.selection.forEach(function(el) { | ||
61 | this.stylesController.addClass(el, selector); | ||
62 | |||
63 | if(applies) { | ||
64 | applies = (this._doesSelectorTargetElement('.'+selector, el)); | ||
65 | } | ||
66 | },this); | ||
67 | |||
68 | ///// Add rule directly to the rule list | ||
69 | this.ruleListContainer.displayedList.component.addRule(newRule).applied = applies; | ||
70 | |||
71 | } | ||
72 | }, | ||
73 | |||
74 | _doesSelectorTargetElement : { | ||
75 | value: function doesSelectorTargetElement(selector, element) { | ||
76 | var doc = element.ownerDocument, | ||
77 | matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); | ||
78 | return matchingEls.indexOf(element) !== -1; | ||
79 | } | ||
80 | }, | ||
81 | |||
82 | ///// Enable/Disable Style when checkbox is clicked | ||
83 | handleStyleToggle : { | ||
84 | value: function(rule, enable, style) { | ||
85 | if(enable) { | ||
86 | this.stylesController.setStyle(rule, style.propertyText, style.valueText, style.priority); | ||
87 | } else { | ||
88 | this.stylesController.deleteStyle(rule, style.propertyText); | ||
89 | } | ||
90 | |||
91 | this._dispatchChange(); | ||
92 | } | ||
93 | }, | ||
94 | |||
95 | handlePropertyStop: { | ||
96 | value: function(e, style) { | ||
97 | var key, nextFocus; | ||
98 | |||
99 | console.log("Handle Style Stop"); | ||
100 | |||
101 | if(e._event.detail.type === 'keydown') { | ||
102 | key = e._event.detail.keyCode; | ||
103 | |||
104 | if(key === Keyboard.ENTER || key === Keyboard.TAB) { | ||
105 | e._event.detail.preventDefault(); | ||
106 | |||
107 | if(e._event.detail.shiftKey) { | ||
108 | nextFocus = style.getSiblingStyle('prev') || style.getSiblingStyle('last'); | ||
109 | nextFocus.valueField.start(); | ||
110 | } else { | ||
111 | style.valueField.start(); | ||
112 | } | ||
113 | } | ||
114 | } | ||
115 | } | ||
116 | }, | ||
117 | handleValueStop: { | ||
118 | value: function(e, style) { | ||
119 | var key, nextFocus | ||
120 | console.log("Handle Value Stop"); | ||
121 | console.log("Editing new style: ", style.editingNewStyle); | ||
122 | |||
123 | if(e._event.detail.type === 'keydown') { | ||
124 | key = e._event.detail.keyCode; | ||
125 | |||
126 | if(key === Keyboard.ENTER || key === Keyboard.TAB) { | ||
127 | e._event.detail.preventDefault(); | ||
128 | |||
129 | if(e._event.detail.shiftKey) { | ||
130 | style.propertyField.start(); | ||
131 | } else { | ||
132 | nextFocus = style.getSiblingStyle('next'); | ||
133 | if(nextFocus) { | ||
134 | nextFocus.propertyField.start(); | ||
135 | } else { | ||
136 | style.treeView.parentComponent.addNewStyleAfter(style); | ||
137 | style.editingNewStyle = false; | ||
138 | setTimeout(function() { | ||
139 | style.getSiblingStyle('next').propertyField.start(); | ||
140 | }, 50); | ||
141 | } | ||
142 | } | ||
143 | } | ||
144 | } | ||
145 | } | ||
146 | }, | ||
147 | handlePropertyChange : { | ||
148 | value: function(rule, property, value, oldProperty, style) { | ||
149 | var browserValue; | ||
150 | |||
151 | if(style.editingNewStyle) { | ||
152 | return false; | ||
153 | } | ||
154 | |||
155 | if(property === '') { | ||
156 | style.remove(); | ||
157 | this._dispatchChange(oldProperty, browserValue); | ||
158 | return false; | ||
159 | } | ||
160 | |||
161 | ///// Remove old property and add new one | ||
162 | this.stylesController.deleteStyle(rule, oldProperty); | ||
163 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
164 | |||
165 | ///// Mark style as invalid if the browser doesn't accept it | ||
166 | style.invalid = (browserValue === null); | ||
167 | |||
168 | console.log("BrowserValue: ", browserValue, rule); | ||
169 | |||
170 | this._dispatchChange(property, browserValue); | ||
171 | } | ||
172 | }, | ||
173 | handleValueChange : { | ||
174 | value: function(rule, property, value, style) { | ||
175 | var browserValue, units; | ||
176 | |||
177 | if(value === '') { | ||
178 | style.remove(); | ||
179 | this._dispatchChange(property, browserValue); | ||
180 | return false; | ||
181 | } | ||
182 | |||
183 | ///// Auto-fill units if not provided and units | ||
184 | ///// not previously stored | ||
185 | units = style.getUnits(value); | ||
186 | if(style.units && units === null && parseInt(value)) { | ||
187 | value += style.units; | ||
188 | style.valueField.value = value; | ||
189 | } else if (value !== '0') { | ||
190 | style.units = units; | ||
191 | } | ||
192 | |||
193 | ///// update value | ||
194 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
195 | |||
196 | ///// Mark style as invalid if the browser doesn't accept it | ||
197 | style.invalid = (browserValue === null); | ||
198 | |||
199 | console.log("BrowserValue: ", browserValue, rule); | ||
200 | |||
201 | this._dispatchChange(property, browserValue); | ||
202 | |||
203 | if(style.editingNewStyle) { | ||
204 | style.treeView.parentComponent.addNewStyleAfter(style); | ||
205 | style.editingNewStyle = false; | ||
206 | } | ||
207 | } | ||
208 | }, | ||
209 | |||
210 | handlePaste : { | ||
211 | value: function(e) { | ||
212 | var text = document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")).trim(); | ||
213 | |||
214 | if(text.matches(/([a-zA-Z-]+:[a-zA-Z-]+){,1}/)) { | ||
215 | |||
216 | } | ||
217 | } | ||
218 | }, | ||
219 | |||
220 | _dispatchChange : { | ||
221 | value: function(property, value) { | ||
222 | this.application.ninja.stage.updatedStage = true; | ||
223 | NJevent('elementChange', { | ||
224 | type : 'cssChange', | ||
225 | data: { | ||
226 | "prop": property, | ||
227 | "value": value | ||
228 | }, | ||