aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/styles-view-mediator.js
diff options
context:
space:
mode:
authorEric Guzman2012-04-30 13:45:52 -0700
committerEric Guzman2012-04-30 13:45:52 -0700
commit4332599afffae987a18bb197fcfdd09bc2e94d2b (patch)
tree81b80385d74ba5c13e1fd4979560f0dc8cf61ad4 /js/panels/css-panel/styles-view-mediator.js
parent2b78627d5f5332d01ef9649c9596cc3689b6867b (diff)
downloadninja-4332599afffae987a18bb197fcfdd09bc2e94d2b.tar.gz
CSS Style Rule - Add code for changing selectors and showing unapplied rules
Diffstat (limited to 'js/panels/css-panel/styles-view-mediator.js')
-rw-r--r--js/panels/css-panel/styles-view-mediator.js73
1 files changed, 67 insertions, 6 deletions
diff --git a/js/panels/css-panel/styles-view-mediator.js b/js/panels/css-panel/styles-view-mediator.js
index c93a5e73..8a0e4137 100644
--- a/js/panels/css-panel/styles-view-mediator.js
+++ b/js/panels/css-panel/styles-view-mediator.js
@@ -9,6 +9,9 @@ var Montage = require("montage/core/core").Montage,
9 Keyboard = require("js/mediators/keyboard-mediator").Keyboard; 9 Keyboard = require("js/mediators/keyboard-mediator").Keyboard;
10 10
11exports.StylesViewMediator = Montage.create(Component, { 11exports.StylesViewMediator = Montage.create(Component, {
12 newClassPrefix : {
13 value: "new-class"
14 },
12 stylesController : { 15 stylesController : {
13 get: function() { 16 get: function() {
14 return this.application.ninja.stylesController; 17 return this.application.ninja.stylesController;
@@ -17,25 +20,72 @@ exports.StylesViewMediator = Montage.create(Component, {
17 return; 20 return;
18 } 21 }
19 }, 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
20 handleAddAction : { 36 handleAddAction : {
21 value: function(e) { 37 value: function(e) {
22 var selector, newRule; 38 var selector,
23 39 newRule,
24 ///// Add rule to the container 40 applies = true;
25 41
26 ///// Get selection prefix 42 ///// Get selection prefix
27 if(this.ruleListContainer.displayedList.selection.length > 1) { 43 if(this.ruleListContainer.displayedList.selection.length > 1) {
28 selector = this.stylesController.generateClassName(null, true); 44 selector = this.stylesController.generateClassName(null, true);
29 } else { 45 } else {
30 selector = this.stylesController.generateClassName(this.ruleListContainer.displayedList.selection[0].nodeName); 46 selector = this.stylesController.generateClassName(this.newClassPrefix);
31 } 47 }
32 48
49 ///// Create the rule with generated selector
33 newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }'); 50 newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }');
34 51
35 this.ruleListContainer.displayedList.component.addRule(newRule); 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 },
36 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();
37 } 86 }
38 }, 87 },
88
39 handleStyleStop: { 89 handleStyleStop: {
40 value: function(e) { 90 value: function(e) {
41 console.log("Handle Style Stop"); 91 console.log("Handle Style Stop");
@@ -90,7 +140,18 @@ exports.StylesViewMediator = Montage.create(Component, {
90 this._dispatchChange(property, browserValue); 140 this._dispatchChange(property, browserValue);
91 141
92 if(style.editingNewStyle) { 142 if(style.editingNewStyle) {
93 style.treeView.parentComponent.addNewStyle(); 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
94 } 155 }
95 } 156 }
96 }, 157 },