diff options
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.js | 162 |
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 | this._ninjaFileReadOnly = this.readOnly = isReadOnly === "true"; | ||
211 |