diff options
author | Kris Kowal | 2012-07-09 16:38:08 -0700 |
---|---|---|
committer | Kris Kowal | 2012-07-09 16:38:08 -0700 |
commit | 7bee50379c1df86bb571e0e8d6c08e24d25231f5 (patch) | |
tree | 5b11abd0414e0a3ab50ec6276b6334fbd168db7e /js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | |
parent | 26d4b5ce30e6e0ea6e0fde870853c1e2a673a7b4 (diff) | |
download | ninja-7bee50379c1df86bb571e0e8d6c08e24d25231f5.tar.gz |
BSD License
Diffstat (limited to 'js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js')
-rwxr-xr-x | js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 581 |
1 files changed, 291 insertions, 290 deletions
diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js index f593073a..573e165c 100755 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | |||
@@ -1,24 +1,25 @@ | |||
1 | /* <copyright> | 1 | /* <copyright> |
2 | Copyright (c) 2012, Motorola Mobility, Inc | 2 | Copyright (c) 2012, Motorola Mobility LLC. |
3 | All Rights Reserved. | 3 | All Rights Reserved. |
4 | BSD License. | ||
5 | 4 | ||
6 | Redistribution and use in source and binary forms, with or without | 5 | Redistribution and use in source and binary forms, with or without |
7 | modification, are permitted provided that the following conditions are met: | 6 | modification, are permitted provided that the following conditions are met: |
8 | 7 | ||
9 | - Redistributions of source code must retain the above copyright notice, | 8 | * Redistributions of source code must retain the above copyright notice, |
10 | this list of conditions and the following disclaimer. | 9 | this list of conditions and the following disclaimer. |
11 | - Redistributions in binary form must reproduce the above copyright | 10 | |
12 | notice, this list of conditions and the following disclaimer in the | 11 | * Redistributions in binary form must reproduce the above copyright notice, |
13 | documentation and/or other materials provided with the distribution. | 12 | this list of conditions and the following disclaimer in the documentation |
14 | - Neither the name of Motorola Mobility nor the names of its contributors | 13 | and/or other materials provided with the distribution. |
15 | may be used to endorse or promote products derived from this software | 14 | |
16 | without specific prior written permission. | 15 | * Neither the name of Motorola Mobility LLC nor the names of its |
16 | contributors may be used to endorse or promote products derived from this | ||
17 | software without specific prior written permission. | ||
17 | 18 | ||
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | 21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE | 22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE |
22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | 23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | 24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | 25 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
@@ -71,7 +72,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre | |||
71 | 72 | ||
72 | ///// Set up collapsible sub sections | 73 | ///// Set up collapsible sub sections |
73 | ['sheets', 'styles'].forEach(function(section) { | 74 | ['sheets', 'styles'].forEach(function(section) { |
74 | var s = section; | 75 | var s = section; |
75 | self.sections[s].heading.addEventListener('click', function(e) { | 76 | self.sections[s].heading.addEventListener('click', function(e) { |
76 | self.toggleSectionCollapse(s); | 77 | self.toggleSectionCollapse(s); |
77 | }, false); | 78 | }, false); |
@@ -132,24 +133,24 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre | |||
132 | contEl = sect.container, | 133 | contEl = sect.container, |
133 | userDocName = nj.getFileNameFromPath(sect.doc.defaultView.location.href), | 134 | userDocName = nj.getFileNameFromPath(sect.doc.defaultView.location.href), |
134 | self = this; | 135 | self = this; |
135 | 136 | ||
136 | ///// Set current document name in Stylesheets section header | 137 | ///// Set current document name in Stylesheets section header |
137 | nj.empty(sect.docNameEl).appendChild(nj.textNode(' - ' + userDocName)); | 138 | nj.empty(sect.docNameEl).appendChild(nj.textNode(' - ' + userDocName)); |
138 | 139 | ||
139 | ///// LOOP through stylesheet list | 140 | ///// LOOP through stylesheet list |
140 | ///// ------------------------------------------------------- | 141 | ///// ------------------------------------------------------- |
141 | sheetsArray.forEach(function(sheet, index) { | 142 | sheetsArray.forEach(function(sheet, index) { |
142 | var isStageStyleSheet = (sheet.ownerNode.id === this._stageStyleSheetId), | 143 | var isStageStyleSheet = (sheet.ownerNode.id === this._stageStyleSheetId), |
143 | isDefaultStyleSheet = (sheet.ownerNode.id === this._defaultStyleSheetId), | 144 | isDefaultStyleSheet = (sheet.ownerNode.id === this._defaultStyleSheetId), |
144 | sheetObj; | 145 | sheetObj; |
145 | 146 | ||
146 | if(!isStageStyleSheet) { | 147 | if(!isStageStyleSheet) { |
147 | sheetObj = new NJStyleSheet(sheet, index); | 148 | sheetObj = new NJStyleSheet(sheet, index); |
148 | if(isDefaultStyleSheet) { | 149 | if(isDefaultStyleSheet) { |
149 | sheetObj.isProtected = sheetObj.isCurrent = true; | 150 | sheetObj.isProtected = sheetObj.isCurrent = true; |
150 | this.currentStyleSheet = this.defaultStyleSheet = sheetObj; | 151 | this.currentStyleSheet = this.defaultStyleSheet = sheetObj; |
151 | } | 152 | } |
152 | 153 | ||
153 | //// Add Default stylesheet selection | 154 | //// Add Default stylesheet selection |
154 | sheetObj.sheetNameEl.addEventListener('click', function(e) { | 155 | sheetObj.sheetNameEl.addEventListener('click', function(e) { |
155 | //console.log('clicking sheet'); | 156 | //console.log('clicking sheet'); |
@@ -157,27 +158,27 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre | |||
157 | //e.stopPropagation(); | 158 | //e.stopPropagation(); |
158 | self.currentStyleSheet = sheetObj; | 159 | self.currentStyleSheet = sheetObj; |
159 | }, false); | 160 | }, false); |
160 | 161 | ||
161 | sheetObj.deleteEl.addEventListener('click', function(e) { | 162 | sheetObj.deleteEl.addEventListener('click', function(e) { |
162 | if(sheetObj.isCurrent) { | 163 | if(sheetObj.isCurrent) { |
163 | self.defaultStyleSheet.makeCurrent(); | 164 | self.defaultStyleSheet.makeCurrent(); |
164 | } | 165 | } |
165 | }, false); | 166 | }, false); |
166 | 167 | ||
167 | sheetObj.render(listEl); | 168 | sheetObj.render(listEl); |
168 | } | 169 | } |
169 | 170 | ||
170 | 171 | ||
171 | }, this); | 172 | }, this); |
172 | ///// ________________________________________________________ | 173 | ///// ________________________________________________________ |
173 | 174 | ||
174 | ///// save height of content, and convert height from "auto" to pixels | 175 | ///// save height of content, and convert height from "auto" to pixels |
175 | //sect.height = contEl.style.height = nj.height(contEl); | 176 | //sect.height = contEl.style.height = nj.height(contEl); |
176 | 177 | ||
177 | 178 | ||
178 | 179 | ||
179 | //contEl.style.webkitTransition = 'all 0.15s ease-out'; | 180 | //contEl.style.webkitTransition = 'all 0.15s ease-out'; |
180 | 181 | ||
181 | } | 182 | } |
182 | }, | 183 | }, |
183 | clearStyleSheetList : { | 184 | clearStyleSheetList : { |
@@ -195,7 +196,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre | |||
195 | NJCSSStyle.prototype.onStyleChange.push(function() { | 196 | NJCSSStyle.prototype.onStyleChange.push(function() { |
196 | self._stageUpdate(); | 197 | self._stageUpdate(); |
197 | }); | 198 | }); |
198 | 199 | ||
199 | ///// Add some NJEditable functionality | 200 | ///// Add some NJEditable functionality |
200 | NJEditable.prototype.onStartEdit.push(function(e) { | 201 | NJEditable.prototype.onStartEdit.push(function(e) { |
201 | if(this.isSelector && this.el.nodeContent === 'element.style') { | 202 | if(this.isSelector && this.el.nodeContent === 'element.style') { |
@@ -204,7 +205,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre | |||
204 | var njStyle = this.el.parentNode.njcssstyle; | 205 | var njStyle = this.el.parentNode.njcssstyle; |
205 | // //console.log('added start edit'); | 206 | // //console.log('added start edit'); |
206 | this.el.parentNode.classList.add('nj-editing'); | 207 | this.el.parentNode.classList.add('nj-editing'); |
207 | if(this.el.nodeName === "DD") { | 208 | if(this.el.nodeName === "DD") { |
208 | this.el.parentNode.classList.add('nj-editing-val'); // controls wrapping of text | 209 | this.el.parentNode.classList.add('nj-editing-val'); // controls wrapping of text |
209 | if(cssCompletionMap[njStyle.property]) { | 210 | if(cssCompletionMap[njStyle.property]) { |
210 | this.suggestions = cssCompletionMap[njStyle.property]; | 211 | this.suggestions = cssCompletionMap[njStyle.property]; |
@@ -240,7 +241,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre | |||
240 | } | 241 | } |
241 | 242 | ||
242 | ////console.log('NJEditable onStopEdit callback'); | 243 | ////console.log('NJEditable onStopEdit callback'); |
243 | 244 | ||
244 | if(e && [9,13,186].indexOf(e._event.keyCode) !== -1) { // if the user is tabbing between styles | 245 | if(e && [9,13,186].indexOf(e._event.keyCode) !== -1) { // if the user is tabbing between styles |
245 | e.preventDefault(); | 246 | e.preventDefault(); |
246 | sibling = (e._event.keyCode === 9 && e._event.shiftKey) ? ['previousSibling', 'lastChild'] : ['nextSibling', 'firstChild']; | 247 | sibling = (e._event.keyCode === 9 && e._event.shiftKey) ? ['previousSibling', 'lastChild'] : ['nextSibling', 'firstChild']; |
@@ -250,9 +251,9 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre | |||
250 | if(nextEl[sibling[0]]) { | 251 | if(nextEl[sibling[0]]) { |
251 | nextEl = nextEl[sibling[0]]; | 252 | nextEl = nextEl[sibling[0]]; |
252 | } else { | 253 | } else { |
253 | 254 | ||
254 | if(!nextEl.parentNode[sibling[0]]) { // no next style element | 255 | if(!nextEl.parentNode[sibling[0]]) { // no next style element |
255 | /// get njcssrule and create add button, | 256 | /// get njcssrule and create add button, |
256 | /// and activate it if the new styles isn't dirtied | 257 | /// and activate it if the new styles isn't dirtied |
257 | // //console.log('reached the end'); | 258 | // //console.log('reached the end'); |
258 | njStyle = nextEl.parentNode.njcssstyle; | 259 | njStyle = nextEl.parentNode.njcssstyle; |
@@ -269,8 +270,8 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre | |||
269 | nextEl = false; | 270 | nextEl = false; |
270 | break; | 271 | break; |
271 | } else { | 272 | } else { |
272 | nextEl = (nextEl.parentNode[sibling[0]]) ? | 273 | nextEl = (nextEl.parentNode[sibling[0]]) ? |
273 | nextEl.parentNode[sibling[0]][sibling[1]]: | 274 | nextEl.parentNode[sibling[0]][sibling[1]]: |
274 | nextEl.parentNode.parentNode[sibling[1]][sibling[1]]; | 275 | nextEl.parentNode.parentNode[sibling[1]][sibling[1]]; |
275 | } | 276 | } |
276 | } | 277 | } |
@@ -299,14 +300,14 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre | |||