OLD | NEW |
(Empty) | |
| 1 |
| 2 |
| 3 Polymer('core-transition-css', { |
| 4 |
| 5 /** |
| 6 * The class that will be applied to all animated nodes. |
| 7 * |
| 8 * @attribute baseClass |
| 9 * @type string |
| 10 * @default "core-transition" |
| 11 */ |
| 12 baseClass: 'core-transition', |
| 13 |
| 14 /** |
| 15 * The class that will be applied to nodes in the opened state. |
| 16 * |
| 17 * @attribute openedClass |
| 18 * @type string |
| 19 * @default "core-opened" |
| 20 */ |
| 21 openedClass: 'core-opened', |
| 22 |
| 23 /** |
| 24 * The class that will be applied to nodes in the closed state. |
| 25 * |
| 26 * @attribute closedClass |
| 27 * @type string |
| 28 * @default "core-closed" |
| 29 */ |
| 30 closedClass: 'core-closed', |
| 31 |
| 32 /** |
| 33 * Event to listen to for animation completion. |
| 34 * |
| 35 * @attribute completeEventName |
| 36 * @type string |
| 37 * @default "transitionEnd" |
| 38 */ |
| 39 completeEventName: 'transitionend', |
| 40 |
| 41 publish: { |
| 42 /** |
| 43 * A secondary configuration attribute for the animation. The class |
| 44 * `<baseClass>-<transitionType` is applied to the animated node during |
| 45 * `setup`. |
| 46 * |
| 47 * @attribute transitionType |
| 48 * @type string |
| 49 */ |
| 50 transitionType: null |
| 51 }, |
| 52 |
| 53 registerCallback: function(element) { |
| 54 this.transitionStyle = element.templateContent().firstElementChild; |
| 55 }, |
| 56 |
| 57 // template is just for loading styles, we don't need a shadowRoot |
| 58 fetchTemplate: function() { |
| 59 return null; |
| 60 }, |
| 61 |
| 62 go: function(node, state) { |
| 63 if (state.opened !== undefined) { |
| 64 this.transitionOpened(node, state.opened); |
| 65 } |
| 66 }, |
| 67 |
| 68 setup: function(node) { |
| 69 if (!node._hasTransitionStyle) { |
| 70 if (!node.shadowRoot) { |
| 71 node.createShadowRoot().innerHTML = '<content></content>'; |
| 72 } |
| 73 this.installScopeStyle(this.transitionStyle, 'transition', |
| 74 node.shadowRoot); |
| 75 node._hasTransitionStyle = true; |
| 76 } |
| 77 node.classList.add(this.baseClass); |
| 78 if (this.transitionType) { |
| 79 node.classList.add(this.baseClass + '-' + this.transitionType); |
| 80 } |
| 81 }, |
| 82 |
| 83 teardown: function(node) { |
| 84 node.classList.remove(this.baseClass); |
| 85 if (this.transitionType) { |
| 86 node.classList.remove(this.baseClass + '-' + this.transitionType); |
| 87 } |
| 88 }, |
| 89 |
| 90 transitionOpened: function(node, opened) { |
| 91 this.listenOnce(node, this.completeEventName, function() { |
| 92 node.classList.toggle(this.revealedClass, opened); |
| 93 if (!opened) { |
| 94 node.classList.remove(this.closedClass); |
| 95 } |
| 96 this.complete(node); |
| 97 }); |
| 98 node.classList.toggle(this.openedClass, opened); |
| 99 node.classList.toggle(this.closedClass, !opened); |
| 100 } |
| 101 |
| 102 }); |
OLD | NEW |