aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style-sheet.reel/style-sheet.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js')
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.js162
1 files changed, 138 insertions, 24 deletions
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js
index 4f9ad21f..9ad48a62 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.js
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js
@@ -14,8 +14,6 @@ exports.StyleSheet = Montage.create(Component, {
14 14
15 willDraw : { 15 willDraw : {
16 value: function() { 16 value: function() {
17 console.log("style sheet view - will draw");
18
19 if(this.editing) { 17 if(this.editing) {
20 document.body.addEventListener('mousedown', this, false); 18 document.body.addEventListener('mousedown', this, false);
21 this._translateDistance = this._element.offsetWidth - this.editButton._element.offsetWidth; 19 this._translateDistance = this._element.offsetWidth - this.editButton._element.offsetWidth;
@@ -28,7 +26,6 @@ exports.StyleSheet = Montage.create(Component, {
28 draw : { 26 draw : {
29 value: function() { 27 value: function() {
30 var transStr = '-webkit-transform'; 28 var transStr = '-webkit-transform';
31 console.log("styles sheet view - draw");
32 29
33 this.mediaInput.value = this._source.media.mediaText; 30 this.mediaInput.value = this._source.media.mediaText;
34 31
@@ -39,17 +36,64 @@ exports.StyleSheet = Montage.create(Component, {
39 this.editView.classList.remove('expanded'); 36 this.editView.classList.remove('expanded');
40 this.editView.style.removeProperty(transStr); 37 this.editView.style.removeProperty(transStr);
41 } 38 }
39
40 if(this._readOnly) {
41 this._element.classList.add('ss-locked');
42 this.importButton.element.classList.remove('ss-invisible');
43 } else {
44 this._element.classList.remove('ss-locked');
45 this.importButton.element.classList.add('ss-invisible');
46 }
47
42 } 48 }
43 }, 49 },
44 50
51 /* ------ Events------ */
45 52
53 handleMousedown : {
54 value: function(e) {
55 var nonBlurringElements = [
56 this.editView,
57 this.deleteButton.element,
58 this.disableButton.element,
59 this.importButton.element];
60
61 console.log("handle mousedown");
62
63 if(nonBlurringElements.indexOf(e.target) === -1) {
64 this.editing = false;
65 }
66 }
67 },
46 68
47 handleEditButtonAction: { 69 handleEditButtonAction: {
48 value: function(e) { 70 value: function(e) {
49 console.log('handle edit button action');
50 this.editing = true; 71 this.editing = true;
51 } 72 }
52 }, 73 },
74
75 handleImportButtonAction: {
76 value: function(e) {
77 e.stopPropagation();
78 }
79 },
80
81 handleDisableButtonAction: {
82 value: function(e) {
83 e.stopPropagation();
84 this.disabled = !this.disabled;
85 }
86 },
87
88 handleDeleteButtonAction : {
89 value: function(e) {
90 e.stopPropagation();
91 debugger;
92 }
93 },
94
95 /* ------ State properties ------ */
96
53 _editing : { 97 _editing : {
54 value: null 98 value: null
55 }, 99 },
@@ -63,21 +107,9 @@ exports.StyleSheet = Montage.create(Component, {
63 } 107 }
64 }, 108 },
65 109
66 handleMousedown : {
67 value: function(e) {
68 console.log("handle mousedown");
69 if(e.target !== this.editView && e.target !== this.editButton) {
70 this.editing = false;
71 }
72 }
73 },
74
75 mediaInput: {
76 value: null
77 },
78
79 _name: { 110 _name: {
80 value: null 111 value: "Style Tag",
112 distinct: true
81 }, 113 },
82 name : { 114 name : {
83 get: function() { 115 get: function() {
@@ -87,6 +119,37 @@ exports.StyleSheet = Montage.create(Component, {
87 this._name = text; 119 this._name = text;
88 } 120 }
89 }, 121 },
122 _readOnly : { value: null },
123 readOnly : {
124 get: function() {
125 return this._readOnly;
126 },
127 set: function(isReadOnly) {
128 this._readOnly = isReadOnly;
129 this.needsDraw = true;
130 }
131 },
132
133 _disabled : {
134 value: null
135 },
136 disabled: {
137 get: function() {
138 return this._disabled;
139 },
140 set: function(disable) {
141 var label = (disable) ? "Enable" : "Disable";
142 this._source.ownerNode.disabled = disable;
143 this.disableButton.label = label;
144
145 this._disabled = disable;
146 }
147 },
148
149 external : {
150 value: null
151 },
152
90 _source : { 153 _source : {
91 value: null 154 value: null
92 }, 155 },
@@ -95,13 +158,64 @@ exports.StyleSheet = Montage.create(Component, {
95 return this._source; 158 return this._source;
96 }, 159 },
97 set: function(sheet) { 160 set: function(sheet) {
98 console.log('sheet being set: ', sheet.ownerNode); 161 console.log('sheet being set: ', this);
99 if(sheet.href) { 162
100 this.name = sheet.href.substring(sheet.href.lastIndexOf('/')+1); 163 this._extractData(sheet.ownerNode);
101 } else {
102 this.name = 'Style Tag';
103 }
104 this._source = sheet; 164 this._source = sheet;
105 } 165 }
166 },
167
168 _extractData : {
169 value: function(sheetNode) {
170 var data = sheetNode.dataset, key;
171
172 for(key in data) {
173 this[key] = data[key];
174 }
175 }
176 },
177
178 /* ------ Data Attribute Properties ------ */
179
180 _ninjaExternalUrl: { value: null },
181 ninjaExternalUrl : {
182 get: function() { return this._ninjaExternalUrl; },
183 set: function(url) {
184 this.external = true;
185 this._ninjaExternalUrl = url;
186 }
187 },
188
189 _ninjaFileName: { value: null },
190 ninjaFileName : {
191 get: function() { return this._ninjaFileName; },
192 set: function(fileName) {
193 this.name = fileName;
194 this._ninjaFileName = fileName;
195 }
196 },
197
198 _ninjaFileUrl: { value: null },
199 ninjaFileUrl : {
200 get: function() { return this._ninjaFileUrl; },
201 set: function(fileUrl) {
202 this._ninjaFileUrl = fileUrl;
203 }
204 },
205
206 _ninjaFileReadOnly: { value: null },
207 ninjaFileReadOnly : {
208 get: function() { return this._ninjaFileReadOnly; },
209 set: function(isReadOnly) {
210 thi