diff options
Diffstat (limited to 'js/panels/css-panel/styles-view-delegate.js')
-rw-r--r-- | js/panels/css-panel/styles-view-delegate.js | 245 |
1 files changed, 245 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..ec0026a1 --- /dev/null +++ b/js/panels/css-panel/styles-view-delegate.js | |||
@@ -0,0 +1,245 @@ | |||
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 | handleSelectorHover : { | ||
25 | value: function(selector, direction) { | ||
26 | var elements = this.stylesController._activeDocument._document.querySelectorAll(selector), | ||
27 | method = (direction === "out") ? "remove" : "add"; | ||
28 | |||
29 | Array.prototype.slice.call(elements).forEach(function(el) { | ||
30 | el.classList[method](this.elementOutlineClass); | ||
31 | }, this); | ||
32 | } | ||
33 | }, | ||
34 | |||
35 | handleSelectorChange : { | ||
36 | value: function(rule, newSelector, ruleComponent) { | ||
37 | if(newSelector === "") { | ||
38 | //debugger; | ||
39 | ruleComponent.parentComponent.removeRule(ruleComponent); | ||
40 | return false; | ||
41 | } | ||
42 | |||
43 | rule.selectorText = newSelector; | ||
44 | |||
45 | ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) { | ||
46 | return this._doesSelectorTargetElement(newSelector, el); | ||
47 | }, this); | ||
48 | |||
49 | } | ||
50 | }, | ||
51 | |||
52 | ///// Add rule button action | ||
53 | handleAddAction : { | ||
54 | value: function(e) { | ||
55 | var selector, | ||
56 | newRule, | ||
57 | applies = true; | ||
58 | |||
59 | ///// Get selection prefix | ||
60 | if(this.ruleListContainer.displayedList.selection.length > 1) { | ||
61 | selector = this.stylesController.generateClassName(null, true); | ||
62 | } else { | ||
63 | selector = this.stylesController.generateClassName(this.newClassPrefix); | ||
64 | } | ||
65 | |||
66 | ///// Create the rule with generated selector | ||
67 | newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }'); | ||
68 | |||
69 | ///// Add the generated class to each element in selection | ||
70 | ///// and check whether it applies to the element | ||
71 | this.ruleListContainer.displayedList.selection.forEach(function(el) { | ||
72 | this.stylesController.addClass(el, selector); | ||
73 | |||
74 | if(applies) { | ||
75 | applies = (this._doesSelectorTargetElement('.'+selector, el)); | ||
76 | } | ||
77 | },this); | ||
78 | |||
79 | ///// Add rule directly to the rule list | ||
80 | this.ruleListContainer.displayedList.component.addRule(newRule).applied = applies; | ||
81 | |||
82 | } | ||
83 | }, | ||
84 | |||
85 | _doesSelectorTargetElement : { | ||
86 | value: function doesSelectorTargetElement(selector, element) { | ||
87 | var doc = element.ownerDocument, | ||
88 | matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); | ||
89 | return matchingEls.indexOf(element) !== -1; | ||
90 | } | ||
91 | }, | ||
92 | |||
93 | ///// Enable/Disable Style when checkbox is clicked | ||
94 | handleStyleToggle : { | ||
95 | value: function(rule, enable, style) { | ||
96 | if(enable) { | ||
97 | this.stylesController.setStyle(rule, style.propertyText, style.browserValue, style.priority); | ||
98 | } else { | ||
99 | this.stylesController.deleteStyle(rule, style.propertyText); | ||
100 | } | ||
101 | |||
102 | this._dispatchChange(); | ||
103 | } | ||
104 | }, | ||
105 | |||
106 | handlePropertyStop: { | ||
107 | value: function(e, style) { | ||
108 | var key, nextFocus; | ||
109 | |||
110 | console.log("Handle Style Stop"); | ||
111 | |||
112 | if(e._event.detail.type === 'keydown') { | ||
113 | key = e._event.detail.keyCode; | ||
114 | |||
115 | if(key === Keyboard.ENTER || key === Keyboard.TAB) { | ||
116 | e._event.detail.preventDefault(); | ||
117 | |||
118 | if(e._event.detail.shiftKey) { | ||
119 | nextFocus = style.getSiblingStyle('prev') || style.getSiblingStyle('last'); | ||
120 | nextFocus.valueField.start(); | ||
121 | } else { | ||
122 | style.valueField.start(); | ||
123 | } | ||
124 | } | ||
125 | } | ||
126 | } | ||
127 | }, | ||
128 | handleValueStop: { | ||
129 | value: function(e, style) { | ||
130 | var key, nextFocus | ||
131 | console.log("Handle Value Stop"); | ||
132 | console.log("Editing new style: ", style.editingNewStyle); | ||
133 | |||
134 | if(e._event.detail.type === 'keydown') { | ||
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 | nextFocus = style.getSiblingStyle('next'); | ||
144 | if(nextFocus) { | ||
145 | nextFocus.propertyField.start(); | ||
146 | } else { | ||
147 | style.treeView.parentComponent.addNewStyleAfter(style); | ||
148 | style.editingNewStyle = false; | ||
149 | setTimeout(function() { | ||
150 | style.getSiblingStyle('next').propertyField.start(); | ||
151 | }, 50); | ||
152 | } | ||
153 | } | ||
154 | } | ||
155 | } | ||
156 | } | ||
157 | }, | ||
158 | handlePropertyChange : { | ||
159 | value: function(rule, property, value, oldProperty, style) { | ||
160 | var browserValue; | ||
161 | |||
162 | if(style.editingNewStyle) { | ||
163 | return false; | ||
164 | } | ||
165 | |||
166 | if(property === '') { | ||
167 | style.remove(); | ||
168 | this._dispatchChange(oldProperty, browserValue); | ||
169 | return false; | ||
170 | } | ||
171 | |||
172 | ///// Remove old property and add new one | ||
173 | this.stylesController.deleteStyle(rule, oldProperty); | ||
174 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
175 | |||
176 | ///// Mark style as invalid if the browser doesn't accept it | ||
177 | style.invalid = (browserValue === null); | ||
178 | |||
179 | console.log("BrowserValue: ", browserValue, rule); | ||
180 | |||
181 | this._dispatchChange(property, browserValue); | ||
182 | } | ||
183 | }, | ||
184 | handleValueChange : { | ||
185 | value: function(rule, property, value, style) { | ||
186 | var browserValue, units; | ||
187 | |||
188 | if(value === '') { | ||
189 | style.remove(); | ||
190 | this._dispatchChange(property, browserValue); | ||
191 | return false; | ||
192 | } | ||
193 | |||
194 | ///// Auto-fill units if not provided and units | ||
195 | ///// not previously stored | ||
196 | units = style.getUnits(value); | ||
197 | if(style.units && units === null && parseInt(value)) { | ||
198 | value += style.units; | ||
199 | style.valueField.value = value; | ||
200 | } else if (value !== '0') { | ||
201 | style.units = units; | ||
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 | console.log("BrowserValue: ", browserValue, rule); | ||
212 | |||
213 | this._dispatchChange(property, browserValue); | ||
214 | |||
215 | if(style.editingNewStyle) { | ||
216 | style.treeView.parentComponent.addNewStyleAfter(style); | ||
217 | style.editingNewStyle = false; | ||
218 | } | ||
219 | } | ||
220 | }, | ||
221 | |||
222 | handlePaste : { | ||
223 | value: function(e) { | ||
224 | var text = document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")).trim(); | ||