diff options
Diffstat (limited to 'js/panels/css-panel/styles-view-mediator.js')
-rw-r--r-- | js/panels/css-panel/styles-view-mediator.js | 190 |
1 files changed, 190 insertions, 0 deletions
diff --git a/js/panels/css-panel/styles-view-mediator.js b/js/panels/css-panel/styles-view-mediator.js new file mode 100644 index 00000000..c3154db0 --- /dev/null +++ b/js/panels/css-panel/styles-view-mediator.js | |||
@@ -0,0 +1,190 @@ | |||
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 : { | ||
13 | value: "new-class" | ||
14 | }, | ||
15 | stylesController : { | ||
16 | get: function() { | ||
17 | return this.application.ninja.stylesController; | ||
18 | }, | ||
19 | set: function(){ | ||
20 | return; | ||
21 | } | ||
22 | }, | ||
23 | |||
24 | handleSelectorChange : { | ||
25 | value: function(rule, newSelector, ruleComponent) { | ||
26 | if(newSelector === "") { | ||
27 | debugger; | ||
28 | ruleComponent.parentComponent.removeRule(ruleComponent); | ||
29 | return false; | ||
30 | } | ||
31 | |||
32 | rule.selectorText = newSelector; | ||
33 | |||
34 | ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) { | ||
35 | return this._doesSelectorTargetElement(newSelector, el); | ||
36 | }, this); | ||
37 | |||
38 | } | ||
39 | }, | ||
40 | |||
41 | ///// Add rule button action | ||
42 | handleAddAction : { | ||
43 | value: function(e) { | ||
44 | var selector, | ||
45 | newRule, | ||
46 | applies = true; | ||
47 | |||
48 | ///// Get selection prefix | ||
49 | if(this.ruleListContainer.displayedList.selection.length > 1) { | ||
50 | selector = this.stylesController.generateClassName(null, true); | ||
51 | } else { | ||
52 | selector = this.stylesController.generateClassName(this.newClassPrefix); | ||
53 | } | ||
54 | |||
55 | ///// Create the rule with generated selector | ||
56 | newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }'); | ||
57 | |||
58 | ///// Add the generated class to each element in selection | ||
59 | ///// and check whether it applies to the element | ||
60 | this.ruleListContainer.displayedList.selection.forEach(function(el) { | ||
61 | this.stylesController.addClass(el, selector); | ||
62 | |||
63 | if(applies) { | ||
64 | applies = (this._doesSelectorTargetElement('.'+selector, el)); | ||
65 | } | ||
66 | },this); | ||
67 | |||
68 | ///// Add rule directly to the rule list | ||
69 | this.ruleListContainer.displayedList.component.addRule(newRule).applied = applies; | ||
70 | |||
71 | } | ||
72 | }, | ||
73 | |||
74 | _doesSelectorTargetElement : { | ||
75 | value: function doesSelectorTargetElement(selector, element) { | ||
76 | var doc = element.ownerDocument, | ||
77 | matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); | ||
78 | return matchingEls.indexOf(element) !== -1; | ||
79 | } | ||
80 | }, | ||
81 | |||
82 | ///// Enable/Disable Style when checkbox is clicked | ||
83 | handleStyleToggle : { | ||
84 | value: function(rule, enable, style) { | ||
85 | if(enable) { | ||
86 | this.stylesController.setStyle(rule, style.propertyText, style.valueText, style.priority); | ||
87 | } else { | ||
88 | this.stylesController.deleteStyle(rule, style.propertyText); | ||
89 | } | ||
90 | |||
91 | this._dispatchChange(); | ||
92 | } | ||
93 | }, | ||
94 | |||
95 | handleStyleStop: { | ||
96 | value: function(e) { | ||
97 | console.log("Handle Style Stop"); | ||
98 | //debugger; | ||
99 | if(e._event.detail.type === 'keydown') { | ||
100 | |||
101 | } | ||
102 | } | ||
103 | }, | ||
104 | handlePropertyChange : { | ||
105 | value: function(rule, property, value, oldProperty, style) { | ||
106 | var browserValue; | ||
107 | |||
108 | if(style.editingNewStyle) { | ||
109 | return false; | ||
110 | } | ||
111 | |||
112 | if(property === '') { | ||
113 | style.remove(); | ||
114 | this._dispatchChange(oldProperty, browserValue); | ||
115 | return false; | ||
116 | } | ||
117 | |||
118 | ///// Remove old property and add new one | ||
119 | this.stylesController.deleteStyle(rule, oldProperty); | ||
120 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
121 | |||
122 | ///// Mark style as invalid if the browser doesn't accept it | ||
123 | style.invalid = (browserValue === null); | ||
124 | |||
125 | console.log("BrowserValue: ", browserValue, rule); | ||
126 | |||
127 | this._dispatchChange(property, browserValue); | ||
128 | } | ||
129 | }, | ||
130 | handleValueChange : { | ||
131 | value: function(rule, property, value, style) { | ||
132 | var browserValue, units; | ||
133 | |||
134 | if(value === '') { | ||
135 | style.remove(); | ||
136 | this._dispatchChange(property, browserValue); | ||
137 | return false; | ||
138 | } | ||
139 | |||
140 | ///// Auto-fill units if not provided and units | ||
141 | ///// not previously stored | ||
142 | units = style.getUnits(value); | ||
143 | if(style.units && units === null && parseInt(value)) { | ||
144 | value += style.units; | ||
145 | style.valueField.value = value; | ||
146 | } else if (value !== '0') { | ||
147 | style.units = units; | ||
148 | } | ||
149 | |||
150 | ///// update value | ||
151 | browserValue = this.stylesController.setStyle(rule, property, value); | ||
152 | |||
153 | ///// Mark style as invalid if the browser doesn't accept it | ||
154 | style.invalid = (browserValue === null); | ||
155 | |||
156 | console.log("BrowserValue: ", browserValue, rule); | ||
157 | |||
158 | this._dispatchChange(property, browserValue); | ||
159 | |||
160 | if(style.editingNewStyle) { | ||
161 | style.treeView.parentComponent.addNewStyleAfter(style); | ||
162 | style.editingNewStyle = false; | ||
163 | } | ||
164 | } | ||
165 | }, | ||
166 | |||
167 | handlePaste : { | ||
168 | value: function(e) { | ||
169 | var text = document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")).trim(); | ||
170 | |||
171 | if(text.matches(/([a-zA-Z-]+:[a-zA-Z-]+){,1}/)) { | ||
172 | |||
173 | } | ||
174 | } | ||
175 | }, | ||
176 | |||
177 | _dispatchChange : { | ||
178 | value: function(property, value) { | ||
179 | this.application.ninja.stage.updatedStage = true; | ||
180 | NJevent('elementChange', { | ||
181 | type : 'cssChange', | ||
182 | data: { | ||
183 | "prop": property, | ||
184 | "value": value | ||
185 | }, | ||
186 | redraw: null | ||
187 | }); | ||
188 | } | ||
189 | } | ||
190 | }); \ No newline at end of file | ||