diff options
Diffstat (limited to 'js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js')
-rwxr-xr-x | js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 558 |
1 files changed, 279 insertions, 279 deletions
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); |
320 | 320 | ||
321 | function _onEditableChange(val, oldVal) { | 321 | function _onEditableChange(val, oldVal) { |
322 | if(this.isSelector) { | 322 | if(this.isSelector) { |
323 | ////console.log('selector val = ' + val); | 323 | ////console.log('selector val = ' + val); |
324 | return false; | 324 | return false; |
325 | } | 325 | } |
326 | 326 | ||
327 | var parent = this.el.parentNode, | 327 | var parent = this.el.parentNode, |
328 | oldValue = oldVal, | 328 |