aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/styles-view-delegate.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/styles-view-delegate.js')
-rw-r--r--js/panels/css-panel/styles-view-delegate.js296
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..5229b92e
--- /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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component,
9 Keyboard = require("js/mediators/keyboard-mediator").Keyboard;
10
11exports.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._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 /// -----------------------