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.js303
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
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.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// var text = document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")).trim();
225//
226// if(text.matches(/([a-zA-Z-]+:[a-zA-Z-]+){,1}/)) {