| OLD | NEW |
| (Empty) |
| 1 | |
| 2 | |
| 3 (function () { | |
| 4 | |
| 5 // create some basic transition styling data. | |
| 6 var transitions = CoreStyle.g.transitions = CoreStyle.g.transitions || {}; | |
| 7 transitions.duration = '500ms'; | |
| 8 transitions.heroDelay = '50ms'; | |
| 9 transitions.scaleDelay = '500ms'; | |
| 10 transitions.cascadeFadeDuration = '250ms'; | |
| 11 | |
| 12 Polymer('core-transition-pages',{ | |
| 13 | |
| 14 publish: { | |
| 15 /** | |
| 16 * This class will be applied to the scope element in the `prepare` function
. | |
| 17 * It is removed in the `complete` function. Used to activate a set of CSS | |
| 18 * rules that need to apply before the transition runs, e.g. a default opaci
ty | |
| 19 * or transform for the non-active pages. | |
| 20 * | |
| 21 * @attribute scopeClass | |
| 22 * @type string | |
| 23 * @default '' | |
| 24 */ | |
| 25 scopeClass: '', | |
| 26 | |
| 27 /** | |
| 28 * This class will be applied to the scope element in the `go` function. It
is | |
| 29 * remoived in the `complete' function. Generally used to apply a CSS transi
tion | |
| 30 * rule only during the transition. | |
| 31 * | |
| 32 * @attribute activeClass | |
| 33 * @type string | |
| 34 * @default '' | |
| 35 */ | |
| 36 activeClass: '', | |
| 37 | |
| 38 /** | |
| 39 * Specifies which CSS property to look for when it receives a `transitionEn
d` event | |
| 40 * to determine whether the transition is complete. If not specified, the fi
rst | |
| 41 * transitionEnd event received will complete the transition. | |
| 42 * | |
| 43 * @attribute transitionProperty | |
| 44 * @type string | |
| 45 * @default '' | |
| 46 */ | |
| 47 transitionProperty: '' | |
| 48 }, | |
| 49 | |
| 50 /** | |
| 51 * True if this transition is complete. | |
| 52 * | |
| 53 * @attribute completed | |
| 54 * @type boolean | |
| 55 * @default false | |
| 56 */ | |
| 57 completed: false, | |
| 58 | |
| 59 prepare: function(scope, options) { | |
| 60 this.boundCompleteFn = this.complete.bind(this, scope); | |
| 61 if (this.scopeClass) { | |
| 62 scope.classList.add(this.scopeClass); | |
| 63 } | |
| 64 }, | |
| 65 | |
| 66 go: function(scope, options) { | |
| 67 this.completed = false; | |
| 68 if (this.activeClass) { | |
| 69 scope.classList.add(this.activeClass); | |
| 70 } | |
| 71 scope.addEventListener('transitionend', this.boundCompleteFn, false); | |
| 72 }, | |
| 73 | |
| 74 setup: function(scope) { | |
| 75 if (!scope._pageTransitionStyles) { | |
| 76 scope._pageTransitionStyles = {}; | |
| 77 } | |
| 78 | |
| 79 var name = this.calcStyleName(); | |
| 80 | |
| 81 if (!scope._pageTransitionStyles[name]) { | |
| 82 this.installStyleInScope(scope, name); | |
| 83 scope._pageTransitionStyles[name] = true; | |
| 84 } | |
| 85 }, | |
| 86 | |
| 87 calcStyleName: function() { | |
| 88 return this.id || this.localName; | |
| 89 }, | |
| 90 | |
| 91 installStyleInScope: function(scope, id) { | |
| 92 if (!scope.shadowRoot) { | |
| 93 scope.createShadowRoot().innerHTML = '<content></content>'; | |
| 94 } | |
| 95 var root = scope.shadowRoot; | |
| 96 var scopeStyle = document.createElement('core-style'); | |
| 97 root.insertBefore(scopeStyle, root.firstChild); | |
| 98 scopeStyle.applyRef(id); | |
| 99 }, | |
| 100 | |
| 101 complete: function(scope, e) { | |
| 102 // TODO(yvonne): hack, need to manage completion better | |
| 103 if (e.propertyName !== 'box-shadow' && (!this.transitionProperty || e.proper
tyName.indexOf(this.transitionProperty) !== -1)) { | |
| 104 this.completed = true; | |
| 105 this.fire('core-transitionend', this, scope); | |
| 106 } | |
| 107 }, | |
| 108 | |
| 109 // TODO(sorvell): ideally we do this in complete. | |
| 110 ensureComplete: function(scope) { | |
| 111 scope.removeEventListener('transitionend', this.boundCompleteFn, false); | |
| 112 if (this.scopeClass) { | |
| 113 scope.classList.remove(this.scopeClass); | |
| 114 } | |
| 115 if (this.activeClass) { | |
| 116 scope.classList.remove(this.activeClass); | |
| 117 } | |
| 118 } | |
| 119 | |
| 120 }); | |
| 121 | |
| 122 })(); | |
| 123 | |
| OLD | NEW |