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