diff options
Diffstat (limited to 'js/panels/css-panel/styles-view-delegate.js')
-rw-r--r-- | js/panels/css-panel/styles-view-delegate.js | 303 |
1 files changed, 303 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..078bd521 --- /dev/null +++ b/js/panels/css-panel/styles-view-delegate.js | |||
@@ -0,0 +1,303 @@ | |||
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.StylesViewDelegate = Montage.create(Component, { | ||
12 | newClassPrefix : { value: "new-class" }, | ||
13 | elementOutlineClass : { value: "nj-element-highlight" }, | ||
14 | |||
15 | stylesController : { | ||
16 | get: function() { | ||
17 | return this.application.ninja.stylesController; | ||
18 | }, | ||
19 | set: function(){ | ||
20 | return; | ||
21 | } | ||
22 | }, | ||
23 | |||
24 | ///// Selector Actions | ||
25 | //// ------------------------------------- | ||
26 | |||
27 | ///// Show the targeted elements in the document by applying a class | ||
28 | ///// temporarily | ||
29 | handleSelectorHover : { | ||
30 | value: function(selector, direction) { | ||
31 | if(!selector) { return false; } | ||
32 | |||
33 | var elements = this.stylesController._activeDocument.model.views.design.document.querySelectorAll(selector), | ||
34 | method = (direction === "out") ? "remove" : "add"; | ||
35 | |||
36 | Array.prototype.slice.call(elements).forEach(function(el) { | ||
37 | el.classList[method](this.elementOutlineClass); | ||
38 | }, this); | ||
39 | } | ||
40 | }, | ||
41 | |||
42 | ///// Apply new selector to the rule | ||
43 | //// Verify that it applies to the selected elements | ||
44 | //// Remove rule if the selector is deleted | ||
45 | handleSelectorChange : { | ||
46 | value: function(rule, newSelector, ruleComponent) { | ||
47 | if(newSelector === "") { | ||
48 | ruleComponent.parentComponent.removeRule(ruleComponent); | ||
49 | this.stylesController.deleteRule(rule); | ||
50 | ///// Remove the hover style | ||
51 | this.handleSelectorHover(rule.selectorText, 'out'); | ||
52 | this._dispatchChange(); | ||
53 | return false; | ||
54 | } | ||
55 | |||
56 | if(ruleComponent.addClassNameOnChange) { | ||
57 | var lastClass = this._getClassNameFromSelector(newSelector); | ||
58 | |||
59 | if(lastClass) { | ||
60 | ///// Add the generated class to each element in selection | ||
61 | ///// and check whether it applies to the element | ||
62 | this.ruleListContainer.displayedList.selection.forEach(function(el) { | ||
63 | this.stylesController.addClass(el, lastClass); | ||
64 | },this); | ||
65 | } | ||
66 | ruleComponent.addClassNameOnChange = false; | ||
67 | } | ||
68 | |||
69 | rule.selectorText = newSelector; | ||
70 | |||
71 | ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) { | ||
72 | return this._doesSelectorTargetElement(newSelector, el); | ||
73 | }, this); | ||
74 | |||
75 | this._dispatchChange(); | ||
76 | } | ||
77 | }, | ||
78 | |||
79 | handleSelectorStop : { | ||
80 | value: function(rule, newSelector, ruleComponent) { | ||
81 | ruleComponent.declarationComponent.repetition.childComponents[0].propertyField.start() | ||
82 | } | ||
83 | }, | ||
84 | |||
85 | _getClassNameFromSelector : { | ||
86 | value: function(selectorText) { | ||
87 | var results = /.*\.([A-Za-z0-9_-]+)\:?[A-Za-z0-9_"=-]*$/.exec(selectorText); | ||
88 | return (results) ? results[1] : null; | ||
89 | } | ||
90 | }, | ||
91 | |||
92 | ///// Returns true if the passed-in selector targets the passed-in element | ||
93 | _doesSelectorTargetElement : { | ||
94 | value: function doesSelectorTargetElement(selector, element) { | ||
95 | var doc = element.ownerDocument, | ||
96 | matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); | ||
97 | return matchingEls.indexOf(element) !== -1; | ||
98 | } | ||
99 | }, | ||
100 | |||
101 | ///// Style event handlers | ||
102 | //// ------------------------------------- | ||
103 | |||
104 | ///// Enable/Disable Style when checkbox is clicked | ||
105 | handleStyleToggle : { | ||
106 | value: function(rule, enable, style) { | ||
107 | if(enable) { | ||
108 | this.stylesController.setStyle(rule, style.propertyText, style.browserValue, style.priority); | ||
109 | } else { | ||
110 | this.stylesController.deleteStyle(rule, style.propertyText); | ||
111 | } | ||
112 | |||
113 | this._dispatchChange(); | ||
114 | } | ||
115 | }, | ||
116 | |||
117 | handlePropertyStop: { | ||
118 | value: function(e, style) { | ||
119 | var key, nextFocus; | ||
120 | |||
121 | if(e._event.detail.type === 'keydown' && !style.deleting) { | ||
122 | key = e._event.detail.keyCode; | ||
123 | |||
124 | if(key === Keyboard.ENTER || key === Keyboard.TAB) { | ||
125 | e._event.detail.preventDefault(); | ||
126 | |||
127 | if(e._event.detail.shiftKey) { | ||
128 | nextFocus = style.getSiblingStyle('prev') || style.getSiblingStyle('last'); | ||
129 | nextFocus.valueField.start(); | ||
130 | } else { | ||
131 | style.valueField.start(); | ||
132 | } | ||
133 | } | ||
134 | } | ||
135 | } | ||
136 | }, | ||
137 | handleValueStop: { | ||
138 | value: function(e, style) { | ||
139 | var key, nextFocus; | ||
140 | |||
141 | if(e._event.detail.type === 'keydown' && !style.deleting) { | ||
142 | key = e._event.detail.keyCode; | ||
143 | |||
144 | if(key === Keyboard.ENTER || key === Keyboard.TAB) { | ||
145 | e._event.detail.preventDefault(); | ||
146 | |||
147 | if(e._event.detail.shiftKey) { | ||
148 | style.propertyField.start(); | ||
149 | } else { | ||
150 | |||
151 | nextFocus = style.getSiblingStyle('next'); | ||
152 | if(nextFocus) { | ||
153 | nextFocus.propertyField.start(); | ||
154 | } else if(style.dirty) { | ||
155 | style.parentComponent.parentComponent.addNewStyle(true); | ||
156 | style.editingNewStyle = false; | ||
157 | setTimeout(function() { | ||
158 | style.getSiblingStyle('next').propertyField.start(); | ||
159 | }, 50); | ||
160 | } | ||
161 | } | ||
162 | } | ||
163 | } | ||
164 | } | ||
165 | }, | ||
166 | handlePropertyChange : { | ||
167 | value: function(rule, property, value, oldProperty, style) { | ||
168 | var browserValue; | ||
169 | |||
170 | if(style.editingNewStyle) { | ||
171 | if(property === '') { | ||
172 | style.propertyField.value = 'property'; | ||
173 | style.propertyField.isDirty = false; | ||
174 | style.editingNewStyle = false; | ||
175 | } | ||
176 | return false; | ||
177 | } | ||
178 | |||
179 | ///// Remove old property | ||
180 | this.stylesController.deleteStyle(rule, oldProperty); | ||
181 | |||
182 | if(property === '') { | ||
183 | style.deleting = true; | ||
184 | style.parentComponent.parentComponent.removeStyle(style.source); | ||
185 | this._dispatchChange(oldProperty, browserValue); | ||
186 | return false; | ||
187 | } | ||
188 | |||
189 | // now add new property | ||
190 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
191 | |||
192 | ///// Mark style as invalid if the browser doesn't accept it | ||
193 | style.invalid = (browserValue === null); | ||
194 | |||
195 | this._dispatchChange(property, browserValue); | ||
196 | } | ||
197 | }, | ||
198 | handleValueChange : { | ||
199 | value: function(rule, property, value, style) { | ||
200 | var browserValue, units; | ||
201 | |||
202 | if(value === '') { | ||
203 | ///// Remove old property | ||
204 | style.deleting = true; | ||
205 | this.stylesController.deleteStyle(rule, property); | ||
206 | style.parentComponent.parentComponent.removeStyle(style.source); | ||
207 | this._dispatchChange(property, browserValue); | ||
208 | return false; | ||
209 | } | ||
210 | |||
211 | ///// update value | ||
212 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
213 | style.browserValue = browserValue; | ||
214 | |||
215 | ///// Mark style as invalid if the browser doesn't accept it | ||
216 | style.invalid = (browserValue === null); | ||
217 | |||
218 | this._dispatchChange(property, browserValue); | ||
219 | } | ||
220 | }, | ||
221 | |||
222 | handlePaste : { | ||
223 | value: function(e) { | ||
224 |