diff options
Diffstat (limited to 'js/panels/css-panel/styles-view-delegate.js')
-rw-r--r-- | js/panels/css-panel/styles-view-delegate.js | 285 |
1 files changed, 285 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..b5efc18c --- /dev/null +++ b/js/panels/css-panel/styles-view-delegate.js | |||
@@ -0,0 +1,285 @@ | |||
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 : { 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._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 | rule.selectorText = newSelector; | ||
57 | |||
58 | ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) { | ||
59 | return this._doesSelectorTargetElement(newSelector, el); | ||
60 | }, this); | ||
61 | |||
62 | this._dispatchChange(); | ||
63 | } | ||
64 | }, | ||
65 | |||
66 | ///// Returns true if the passed-in selector targets the passed-in element | ||
67 | _doesSelectorTargetElement : { | ||
68 | value: function doesSelectorTargetElement(selector, element) { | ||
69 | var doc = element.ownerDocument, | ||
70 | matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); | ||
71 | return matchingEls.indexOf(element) !== -1; | ||
72 | } | ||
73 | }, | ||
74 | |||
75 | ///// Style event handlers | ||
76 | //// ------------------------------------- | ||
77 | |||
78 | ///// Enable/Disable Style when checkbox is clicked | ||
79 | handleStyleToggle : { | ||
80 | value: function(rule, enable, style) { | ||
81 | if(enable) { | ||
82 | this.stylesController.setStyle(rule, style.propertyText, style.browserValue, style.priority); | ||
83 | } else { | ||
84 | this.stylesController.deleteStyle(rule, style.propertyText); | ||
85 | } | ||
86 | |||
87 | this._dispatchChange(); | ||
88 | } | ||
89 | }, | ||
90 | |||
91 | handlePropertyStop: { | ||
92 | value: function(e, style) { | ||
93 | var key, nextFocus; | ||
94 | |||
95 | if(e._event.detail.type === 'keydown') { | ||
96 | key = e._event.detail.keyCode; | ||
97 | |||
98 | if(key === Keyboard.ENTER || key === Keyboard.TAB) { | ||
99 | e._event.detail.preventDefault(); | ||
100 | |||
101 | if(e._event.detail.shiftKey) { | ||
102 | nextFocus = style.getSiblingStyle('prev') || style.getSiblingStyle('last'); | ||
103 | nextFocus.valueField.start(); | ||
104 | } else { | ||
105 | style.valueField.start(); | ||
106 | } | ||
107 | } | ||
108 | } | ||
109 | } | ||
110 | }, | ||
111 | handleValueStop: { | ||
112 | value: function(e, style) { | ||
113 | var key, nextFocus; | ||
114 | |||
115 | if(e._event.detail.type === 'keydown') { | ||
116 | key = e._event.detail.keyCode; | ||
117 | |||
118 | if(key === Keyboard.ENTER || key === Keyboard.TAB) { | ||
119 | e._event.detail.preventDefault(); | ||
120 | |||
121 | if(e._event.detail.shiftKey) { | ||
122 | style.propertyField.start(); | ||
123 | } else { | ||
124 | |||
125 | nextFocus = style.getSiblingStyle('next'); | ||
126 | if(nextFocus) { | ||
127 | nextFocus.propertyField.start(); | ||
128 | } else if(style.dirty) { | ||
129 | style.parentComponent.parentComponent.addNewStyle(); | ||
130 | style.editingNewStyle = false; | ||
131 | setTimeout(function() { | ||
132 | style.getSiblingStyle('next').propertyField.start(); | ||
133 | }, 50); | ||
134 | } | ||
135 | } | ||
136 | } | ||
137 | } | ||
138 | } | ||
139 | }, | ||
140 | handlePropertyChange : { | ||
141 | value: function(rule, property, value, oldProperty, style) { | ||
142 | var browserValue; | ||
143 | |||
144 | if(style.editingNewStyle) { | ||
145 | return false; | ||
146 | } | ||
147 | |||
148 | ///// Remove old property | ||
149 | this.stylesController.deleteStyle(rule, oldProperty); | ||
150 | |||
151 | if(property === '') { | ||
152 | style.parentComponent.parentComponent.removeStyle(style.source); | ||
153 | this._dispatchChange(oldProperty, browserValue); | ||
154 | return false; | ||
155 | } | ||
156 | |||
157 | // now add new property | ||
158 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
159 | |||
160 | ///// Mark style as invalid if the browser doesn't accept it | ||
161 | style.invalid = (browserValue === null); | ||
162 | |||
163 | this._dispatchChange(property, browserValue); | ||
164 | } | ||
165 | }, | ||
166 | handleValueChange : { | ||
167 | value: function(rule, property, value, style) { | ||
168 | var browserValue, units; | ||
169 | |||
170 | if(value === '') { | ||
171 | ///// Remove old property | ||
172 | this.stylesController.deleteStyle(rule, property); | ||
173 | style.parentComponent.parentComponent.removeStyle(style.source); | ||
174 | this._dispatchChange(property, browserValue); | ||
175 | return false; | ||
176 | } | ||
177 | |||
178 | ///// Auto-fill units if not provided and units | ||
179 | ///// not previously stored | ||
180 | units = style.getUnits(value); | ||
181 | if(style.units && units === null && parseInt(value)) { | ||
182 | value += style.units; | ||
183 | style.valueField.value = value; | ||
184 | } else if (value !== '0') { | ||
185 | style.units = units; | ||
186 | } | ||
187 | |||
188 | ///// update value | ||
189 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
190 | style.browserValue = browserValue; | ||
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 | |||
199 | handlePaste : { | ||
200 | value: function(e) { | ||
201 | // var text = document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")).trim(); | ||
202 | // | ||
203 | // if(text.matches(/([a-zA-Z-]+:[a-zA-Z-]+){,1}/)) { | ||
204 | // | ||
205 | // } | ||
206 | } | ||
207 | }, | ||
208 | |||
209 | /// Toolbar Button Actions | ||
210 | /// ----------------------- | ||
211 | |||
212 | ///// Add rule button action | ||
213 | handleAddAction : { | ||
214 | value: function(e) { | ||
215 | var selector, | ||
216 | newRule, | ||
217 | applies = true; | ||
218 | |||
219 | ///// Get selection prefix | ||
220 | if(this.ruleListContainer.displayedList.selection.length > 1) { | ||
221 | selector = this.stylesController.generateClassName(null, true); | ||
222 | } else { | ||
223 | selector = this.stylesController.generateClassName(this.newClassPrefix); | ||
224 | } | ||
225 | |||
226 | ///// Create the rule with generated selector | ||