aboutsummaryrefslogtreecommitdiff
path: root/js/panels/CSSPanel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/CSSPanel')
-rwxr-xr-xjs/panels/CSSPanel/CSSPanel.js2
-rwxr-xr-xjs/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js558
-rwxr-xr-xjs/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js30
-rwxr-xr-xjs/panels/CSSPanel/css-shorthand-map.js22
4 files changed, 306 insertions, 306 deletions
diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js
index 906da238..6d4d0bdb 100755
--- a/js/panels/CSSPanel/CSSPanel.js
+++ b/js/panels/CSSPanel/CSSPanel.js
@@ -74,4 +74,4 @@ exports.CSSPanel = Montage.create(PanelBase, {
74 value: null, 74 value: null,
75 writable:true 75 writable:true
76 } 76 }
77}); 77});
diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index f593073a..5f8b3854 100755
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
@@ -71,7 +71,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
71 71
72 ///// Set up collapsible sub sections 72 ///// Set up collapsible sub sections
73 ['sheets', 'styles'].forEach(function(section) { 73 ['sheets', 'styles'].forEach(function(section) {
74 var s = section; 74 var s = section;
75 self.sections[s].heading.addEventListener('click', function(e) { 75 self.sections[s].heading.addEventListener('click', function(e) {
76 self.toggleSectionCollapse(s); 76 self.toggleSectionCollapse(s);
77 }, false); 77 }, false);
@@ -132,24 +132,24 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
132 contEl = sect.container, 132 contEl = sect.container,
133 userDocName = nj.getFileNameFromPath(sect.doc.defaultView.location.href), 133 userDocName = nj.getFileNameFromPath(sect.doc.defaultView.location.href),
134 self = this; 134 self = this;
135 135
136 ///// Set current document name in Stylesheets section header 136 ///// Set current document name in Stylesheets section header
137 nj.empty(sect.docNameEl).appendChild(nj.textNode(' - ' + userDocName)); 137 nj.empty(sect.docNameEl).appendChild(nj.textNode(' - ' + userDocName));
138 138
139 ///// LOOP through stylesheet list 139 ///// LOOP through stylesheet list
140 ///// ------------------------------------------------------- 140 ///// -------------------------------------------------------
141 sheetsArray.forEach(function(sheet, index) { 141 sheetsArray.forEach(function(sheet, index) {
142 var isStageStyleSheet = (sheet.ownerNode.id === this._stageStyleSheetId), 142 var isStageStyleSheet = (sheet.ownerNode.id === this._stageStyleSheetId),
143 isDefaultStyleSheet = (sheet.ownerNode.id === this._defaultStyleSheetId), 143 isDefaultStyleSheet = (sheet.ownerNode.id === this._defaultStyleSheetId),
144 sheetObj; 144 sheetObj;
145 145
146 if(!isStageStyleSheet) { 146 if(!isStageStyleSheet) {
147 sheetObj = new NJStyleSheet(sheet, index); 147 sheetObj = new NJStyleSheet(sheet, index);
148 if(isDefaultStyleSheet) { 148 if(isDefaultStyleSheet) {
149 sheetObj.isProtected = sheetObj.isCurrent = true; 149 sheetObj.isProtected = sheetObj.isCurrent = true;
150 this.currentStyleSheet = this.defaultStyleSheet = sheetObj; 150 this.currentStyleSheet = this.defaultStyleSheet = sheetObj;
151 } 151 }
152 152
153 //// Add Default stylesheet selection 153 //// Add Default stylesheet selection
154 sheetObj.sheetNameEl.addEventListener('click', function(e) { 154 sheetObj.sheetNameEl.addEventListener('click', function(e) {
155 //console.log('clicking sheet'); 155 //console.log('clicking sheet');
@@ -157,27 +157,27 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
157 //e.stopPropagation(); 157 //e.stopPropagation();
158 self.currentStyleSheet = sheetObj; 158 self.currentStyleSheet = sheetObj;
159 }, false); 159 }, false);
160 160
161 sheetObj.deleteEl.addEventListener('click', function(e) { 161 sheetObj.deleteEl.addEventListener('click', function(e) {
162 if(sheetObj.isCurrent) { 162 if(sheetObj.isCurrent) {
163 self.defaultStyleSheet.makeCurrent(); 163 self.defaultStyleSheet.makeCurrent();
164 } 164 }
165 }, false); 165 }, false);
166 166
167 sheetObj.render(listEl); 167 sheetObj.render(listEl);
168 } 168 }
169 169
170 170
171 }, this); 171 }, this);
172 ///// ________________________________________________________ 172 ///// ________________________________________________________
173 173
174 ///// save height of content, and convert height from "auto" to pixels 174 ///// save height of content, and convert height from "auto" to pixels
175 //sect.height = contEl.style.height = nj.height(contEl); 175 //sect.height = contEl.style.height = nj.height(contEl);
176 176
177 177
178 178
179 //contEl.style.webkitTransition = 'all 0.15s ease-out'; 179 //contEl.style.webkitTransition = 'all 0.15s ease-out';
180 180
181 } 181 }
182 }, 182 },
183 clearStyleSheetList : { 183 clearStyleSheetList : {
@@ -195,7 +195,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
195 NJCSSStyle.prototype.onStyleChange.push(function() { 195 NJCSSStyle.prototype.onStyleChange.push(function() {
196 self._stageUpdate(); 196 self._stageUpdate();
197 }); 197 });
198 198
199 ///// Add some NJEditable functionality 199 ///// Add some NJEditable functionality
200 NJEditable.prototype.onStartEdit.push(function(e) { 200 NJEditable.prototype.onStartEdit.push(function(e) {
201 if(this.isSelector && this.el.nodeContent === 'element.style') { 201 if(this.isSelector && this.el.nodeContent === 'element.style') {
@@ -204,7 +204,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
204 var njStyle = this.el.parentNode.njcssstyle; 204 var njStyle = this.el.parentNode.njcssstyle;
205 // //console.log('added start edit'); 205 // //console.log('added start edit');
206 this.el.parentNode.classList.add('nj-editing'); 206 this.el.parentNode.classList.add('nj-editing');
207 if(this.el.nodeName === "DD") { 207 if(this.el.nodeName === "DD") {
208 this.el.parentNode.classList.add('nj-editing-val'); // controls wrapping of text 208 this.el.parentNode.classList.add('nj-editing-val'); // controls wrapping of text
209 if(cssCompletionMap[njStyle.property]) { 209 if(cssCompletionMap[njStyle.property]) {
210 this.suggestions = cssCompletionMap[njStyle.property]; 210 this.suggestions = cssCompletionMap[njStyle.property];
@@ -240,7 +240,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
240 } 240 }
241 241
242 ////console.log('NJEditable onStopEdit callback'); 242 ////console.log('NJEditable onStopEdit callback');
243 243
244 if(e && [9,13,186].indexOf(e._event.keyCode) !== -1) { // if the user is tabbing between styles 244 if(e && [9,13,186].indexOf(e._event.keyCode) !== -1) { // if the user is tabbing between styles
245 e.preventDefault(); 245 e.preventDefault();
246 sibling = (e._event.keyCode === 9 && e._event.shiftKey) ? ['previousSibling', 'lastChild'] : ['nextSibling', 'firstChild']; 246 sibling = (e._event.keyCode === 9 && e._event.shiftKey) ? ['previousSibling', 'lastChild'] : ['nextSibling', 'firstChild'];
@@ -250,9 +250,9 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
250 if(nextEl[sibling[0]]) { 250 if(nextEl[sibling[0]]) {
251 nextEl = nextEl[sibling[0]]; 251 nextEl = nextEl[sibling[0]];
252 } else { 252 } else {
253 253
254 if(!nextEl.parentNode[sibling[0]]) { // no next style element 254 if(!nextEl.parentNode[sibling[0]]) { // no next style element
255 /// get njcssrule and create add button, 255 /// get njcssrule and create add button,
256 /// and activate it if the new styles isn't dirtied 256 /// and activate it if the new styles isn't dirtied
257 // //console.log('reached the end'); 257 // //console.log('reached the end');
258 njStyle = nextEl.parentNode.njcssstyle; 258 njStyle = nextEl.parentNode.njcssstyle;
@@ -269,8 +269,8 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
269 nextEl = false; 269 nextEl = false;
270 break; 270 break;
271 } else { 271 } else {
272 nextEl = (nextEl.parentNode[sibling[0]]) ? 272 nextEl = (nextEl.parentNode[sibling[0]]) ?
273 nextEl.parentNode[sibling[0]][sibling[1]]: 273 nextEl.parentNode[sibling[0]][sibling[1]]:
274 nextEl.parentNode.parentNode[sibling[1]][sibling[1]]; 274 nextEl.parentNode.parentNode[sibling[1]][sibling[1]];
275 } 275 }
276 } 276 }
@@ -299,14 +299,14 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
299 } 299 }
300 } 300 }
301 } 301 }
302 302
303 function isEditableNode(n) { 303 function isEditableNode(n) {
304 return n && n.nodeType === 1 && (n.nodeName === 'DT' || n.nodeName === 'DD'); 304 return n && n.nodeType === 1 && (n.nodeName === 'DT' || n.nodeName === 'DD');
305 } 305 }
306 }); 306 });
307 307
308 NJEditable.prototype.onChange.push(_onEditableChange); 308 NJEditable.prototype.onChange.push(_onEditableChange);
309 309
310 ///// Event delegation for editable nodes 310 ///// Event delegation for editable nodes
311 this.sections.styles.container.addEventListener('click', function(e) { 311 this.sections.styles.container.addEventListener('click', function(e) {
312 if(!this.njedit && (this.nodeName === 'DT' || this.nodeName === 'DD') && !self._inComputedStyleMode) { 312 if(!this.njedit && (this.nodeName === 'DT' || this.nodeName === 'DD') && !self._inComputedStyleMode) {
@@ -314,22 +314,22 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
314 // //console.log('set up editable node!'); 314 // //console.log('set up editable node!');
315 var edit = new NJEditable(this, null, self.CSS_PROPERTY_NAMES); // TODO: window.propertyKeywords); 315 var edit = new NJEditable(this, null, self.CSS_PROPERTY_NAMES); // TODO: window.propertyKeywords);
316 edit.startEditable(); 316 edit.startEditable();
317 } 317 }
318 } 318 }
319 }, false); 319 }, false);