diff options
Diffstat (limited to 'js/panels/css-panel/styles-view-delegate.js')
-rw-r--r-- | js/panels/css-panel/styles-view-delegate.js | 296 |
1 files changed, 296 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..454008fa --- /dev/null +++ b/js/panels/css-panel/styles-view-delegate.js | |||
@@ -0,0 +1,296 @@ | |||
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 | _getClassNameFromSelector : { | ||
79 | value: function(selectorText) { | ||
80 | var results = /.*\.([A-Za-z0-9_-]+)\:?[A-Za-z0-9_"=-]*$/.exec(selectorText); | ||
81 | return (results) ? results[1] : null; | ||
82 | } | ||
83 | }, | ||
84 | |||
85 | ///// Returns true if the passed-in selector targets the passed-in element | ||
86 | _doesSelectorTargetElement : { | ||
87 | value: function doesSelectorTargetElement(selector, element) { | ||
88 | var doc = element.ownerDocument, | ||
89 | matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); | ||
90 | return matchingEls.indexOf(element) !== -1; | ||
91 | } | ||
92 | }, | ||
93 | |||
94 | ///// Style event handlers | ||
95 | //// ------------------------------------- | ||
96 | |||
97 | ///// Enable/Disable Style when checkbox is clicked | ||
98 | handleStyleToggle : { | ||
99 | value: function(rule, enable, style) { | ||
100 | if(enable) { | ||
101 | this.stylesController.setStyle(rule, style.propertyText, style.browserValue, style.priority); | ||
102 | } else { | ||
103 | this.stylesController.deleteStyle(rule, style.propertyText); | ||
104 | } | ||
105 | |||
106 | this._dispatchChange(); | ||
107 | } | ||
108 | }, | ||
109 | |||
110 | handlePropertyStop: { | ||
111 | value: function(e, style) { | ||
112 | var key, nextFocus; | ||
113 | |||
114 | if(e._event.detail.type === 'keydown' && !style.deleting) { | ||
115 | key = e._event.detail.keyCode; | ||
116 | |||
117 | if(key === Keyboard.ENTER || key === Keyboard.TAB) { | ||
118 | e._event.detail.preventDefault(); | ||
119 | |||
120 | if(e._event.detail.shiftKey) { | ||
121 | nextFocus = style.getSiblingStyle('prev') || style.getSiblingStyle('last'); | ||
122 | nextFocus.valueField.start(); | ||
123 | } else { | ||
124 | style.valueField.start(); | ||
125 | } | ||
126 | } | ||
127 | } | ||
128 | } | ||
129 | }, | ||
130 | handleValueStop: { | ||
131 | value: function(e, style) { | ||
132 | var key, nextFocus; | ||
133 | |||
134 | if(e._event.detail.type === 'keydown' && !style.deleting) { | ||
135 | key = e._event.detail.keyCode; | ||
136 | |||
137 | if(key === Keyboard.ENTER || key === Keyboard.TAB) { | ||
138 | e._event.detail.preventDefault(); | ||
139 | |||
140 | if(e._event.detail.shiftKey) { | ||
141 | style.propertyField.start(); | ||
142 | } else { | ||
143 | |||
144 | nextFocus = style.getSiblingStyle('next'); | ||
145 | if(nextFocus) { | ||
146 | nextFocus.propertyField.start(); | ||
147 | } else if(style.dirty) { | ||
148 | style.parentComponent.parentComponent.addNewStyle(); | ||
149 | style.editingNewStyle = false; | ||
150 | setTimeout(function() { | ||
151 | style.getSiblingStyle('next').propertyField.start(); | ||
152 | }, 50); | ||
153 | } | ||
154 | } | ||
155 | } | ||
156 | } | ||
157 | } | ||
158 | }, | ||
159 | handlePropertyChange : { | ||
160 | value: function(rule, property, value, oldProperty, style) { | ||
161 | var browserValue; | ||
162 | |||
163 | if(style.editingNewStyle) { | ||
164 | if(property === '') { | ||
165 | style.propertyField.value = 'property'; | ||
166 | style.propertyField.isDirty = false; | ||
167 | style.editingNewStyle = false; | ||
168 | } | ||
169 | return false; | ||
170 | } | ||
171 | |||
172 | ///// Remove old property | ||
173 | this.stylesController.deleteStyle(rule, oldProperty); | ||
174 | |||
175 | if(property === '') { | ||
176 | style.deleting = true; | ||
177 | style.parentComponent.parentComponent.removeStyle(style.source); | ||
178 | this._dispatchChange(oldProperty, browserValue); | ||
179 | return false; | ||
180 | } | ||
181 | |||
182 | // now add new property | ||
183 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
184 | |||
185 | ///// Mark style as invalid if the browser doesn't accept it | ||
186 | style.invalid = (browserValue === null); | ||
187 | |||
188 | this._dispatchChange(property, browserValue); | ||
189 | } | ||
190 | }, | ||
191 | handleValueChange : { | ||
192 | value: function(rule, property, value, style) { | ||
193 | var browserValue, units; | ||
194 | |||
195 | if(value === '') { | ||
196 | ///// Remove old property | ||
197 | style.deleting = true; | ||
198 | this.stylesController.deleteStyle(rule, property); | ||
199 | style.parentComponent.parentComponent.removeStyle(style.source); | ||
200 | this._dispatchChange(property, browserValue); | ||
201 | return false; | ||
202 | } | ||
203 | |||
204 | ///// update value | ||
205 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
206 | style.browserValue = browserValue; | ||
207 | |||
208 | ///// Mark style as invalid if the browser doesn't accept it | ||
209 | style.invalid = (browserValue === null); | ||
210 | |||
211 | this._dispatchChange(property, browserValue); | ||
212 | } | ||
213 | }, | ||
214 | |||
215 | handlePaste : { | ||
216 | value: function(e) { | ||
217 | // var text = document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")).trim(); | ||
218 | // | ||
219 | // if(text.matches(/([a-zA-Z-]+:[a-zA-Z-]+){,1}/)) { | ||
220 | // | ||
221 | // } | ||
222 | } | ||
223 | }, | ||
224 | |||
225 | /// Toolbar Button Actions | ||
226 | /// ----------------------- | ||