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