| OLD | NEW |
| 1 | 1 |
| 2 | 2 |
| 3 (function() { | 3 (function() { |
| 4 | 4 |
| 5 'use strict'; | 5 'use strict'; |
| 6 | 6 |
| 7 var SHADOW_WHEN_SCROLLING = 1; | 7 var SHADOW_WHEN_SCROLLING = 1; |
| 8 var SHADOW_ALWAYS = 2; | 8 var SHADOW_ALWAYS = 2; |
| 9 | 9 |
| 10 | 10 |
| 11 var MODE_CONFIGS = { | 11 var MODE_CONFIGS = { |
| 12 | 12 |
| 13 outerScroll: { | 13 outerScroll: { |
| 14 scroll: true | 14 'scroll': true |
| 15 }, | 15 }, |
| 16 | 16 |
| 17 shadowMode: { | 17 shadowMode: { |
| 18 standard: SHADOW_ALWAYS, | 18 'standard': SHADOW_ALWAYS, |
| 19 waterfall: SHADOW_WHEN_SCROLLING, | 19 'waterfall': SHADOW_WHEN_SCROLLING, |
| 20 'waterfall-tall': SHADOW_WHEN_SCROLLING | 20 'waterfall-tall': SHADOW_WHEN_SCROLLING |
| 21 }, | 21 }, |
| 22 | 22 |
| 23 tallMode: { | 23 tallMode: { |
| 24 'waterfall-tall': true | 24 'waterfall-tall': true |
| 25 } | 25 } |
| 26 }; | 26 }; |
| 27 | 27 |
| 28 Polymer({ | 28 Polymer({ |
| 29 | 29 |
| (...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 150 return this._getScrollerForMode(this.mode); | 150 return this._getScrollerForMode(this.mode); |
| 151 }, | 151 }, |
| 152 | 152 |
| 153 /** | 153 /** |
| 154 * Returns true if the scroller has a visible shadow. | 154 * Returns true if the scroller has a visible shadow. |
| 155 * | 155 * |
| 156 * @property visibleShadow | 156 * @property visibleShadow |
| 157 * @type Boolean | 157 * @type Boolean |
| 158 */ | 158 */ |
| 159 get visibleShadow() { | 159 get visibleShadow() { |
| 160 return this.header.classList.contains('has-shadow'); | 160 return this.$.dropShadow.classList.contains('has-shadow'); |
| 161 }, | 161 }, |
| 162 | 162 |
| 163 _computeDropShadowHidden: function(atTop, mode, shadow) { | 163 _computeDropShadowHidden: function(atTop, mode, shadow) { |
| 164 | 164 |
| 165 var shadowMode = MODE_CONFIGS.shadowMode[mode]; | 165 var shadowMode = MODE_CONFIGS.shadowMode[mode]; |
| 166 | 166 |
| 167 if (this.shadow) { | 167 if (this.shadow) { |
| 168 this.toggleClass('has-shadow', true, this.header); | 168 this.toggleClass('has-shadow', true, this.$.dropShadow); |
| 169 | 169 |
| 170 } else if (shadowMode === SHADOW_ALWAYS) { | 170 } else if (shadowMode === SHADOW_ALWAYS) { |
| 171 this.toggleClass('has-shadow', true, this.header); | 171 this.toggleClass('has-shadow', true, this.$.dropShadow); |
| 172 | 172 |
| 173 } else if (shadowMode === SHADOW_WHEN_SCROLLING && !atTop) { | 173 } else if (shadowMode === SHADOW_WHEN_SCROLLING && !atTop) { |
| 174 this.toggleClass('has-shadow', true, this.header); | 174 this.toggleClass('has-shadow', true, this.$.dropShadow); |
| 175 | 175 |
| 176 } else { | 176 } else { |
| 177 this.toggleClass('has-shadow', false, this.header); | 177 this.toggleClass('has-shadow', false, this.$.dropShadow); |
| 178 | 178 |
| 179 } | 179 } |
| 180 }, | 180 }, |
| 181 | 181 |
| 182 _computeMainContainerClass: function(mode) { | 182 _computeMainContainerClass: function(mode) { |
| 183 // TODO: It will be useful to have a utility for classes | 183 // TODO: It will be useful to have a utility for classes |
| 184 // e.g. Polymer.Utils.classes({ foo: true }); | 184 // e.g. Polymer.Utils.classes({ foo: true }); |
| 185 | 185 |
| 186 var classes = {}; | 186 var classes = {}; |
| 187 | 187 |
| (...skipping 26 matching lines...) Expand all Loading... |
| 214 this.async(function() { | 214 this.async(function() { |
| 215 header.classList.remove('animate'); | 215 header.classList.remove('animate'); |
| 216 }, animateDuration); | 216 }, animateDuration); |
| 217 } else { | 217 } else { |
| 218 header.classList.toggle('animate', configs.tallMode[newMode]); | 218 header.classList.toggle('animate', configs.tallMode[newMode]); |
| 219 } | 219 } |
| 220 } | 220 } |
| 221 this._keepScrollingState(); | 221 this._keepScrollingState(); |
| 222 }, | 222 }, |
| 223 | 223 |
| 224 _keepScrollingState: function () { | 224 _keepScrollingState: function() { |
| 225 var main = this.scroller; | 225 var main = this.scroller; |
| 226 var header = this.header; | 226 var header = this.header; |
| 227 | 227 |
| 228 this._setAtTop(main.scrollTop === 0); | 228 this._setAtTop(main.scrollTop === 0); |
| 229 | 229 |
| 230 if (header && MODE_CONFIGS.tallMode[this.mode]) { | 230 if (header && this.tallClass && MODE_CONFIGS.tallMode[this.mode]) { |
| 231 this.toggleClass(this.tallClass, this.atTop || | 231 this.toggleClass(this.tallClass, this.atTop || |
| 232 header.classList.contains(this.tallClass) && | 232 header.classList.contains(this.tallClass) && |
| 233 main.scrollHeight < this.offsetHeight, header); | 233 main.scrollHeight < this.offsetHeight, header); |
| 234 } | 234 } |
| 235 }, | 235 }, |
| 236 | 236 |
| 237 _scroll: function(e) { | 237 _scroll: function() { |
| 238 this._keepScrollingState(); | 238 this._keepScrollingState(); |
| 239 this.fire('content-scroll', {target: this.scroller}, {bubbles: false}); | 239 this.fire('content-scroll', {target: this.scroller}, {bubbles: false}); |
| 240 }, | 240 }, |
| 241 | 241 |
| 242 _getScrollerForMode: function(mode) { | 242 _getScrollerForMode: function(mode) { |
| 243 return MODE_CONFIGS.outerScroll[mode] ? | 243 return MODE_CONFIGS.outerScroll[mode] ? |
| 244 this : this.$.mainContainer; | 244 this : this.$.mainContainer; |
| 245 } | 245 } |
| 246 | 246 |
| 247 }); | 247 }); |
| 248 | 248 |
| 249 })(); | 249 })(); |
| 250 | 250 |
| OLD | NEW |