1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10<link rel="import" href="../../../polymer/polymer.html"> 11<link rel="import" href="../../../paper-styles/shadow.html"> 12<link rel="import" href="../../neon-animation-runner-behavior.html"> 13<link rel="import" href="../../animations/scale-up-animation.html"> 14<link rel="import" href="../../animations/fade-out-animation.html"> 15 16 17<dom-module id="my-dialog"> 18 <template> 19 <style> 20 :host { 21 display: none; 22 padding: 16px; 23 background: white; 24 color: black; 25 margin: 0 auto; 26 z-index: 100; 27 position: absolute; 28 @apply(--shadow-elevation-2dp); 29 } 30 </style> 31 <content></content> 32 33 </template> 34 35</dom-module> 36 37<script> 38 39 Polymer({ 40 41 is: 'my-dialog', 42 43 behaviors: [ 44 Polymer.NeonAnimationRunnerBehavior 45 ], 46 47 properties: { 48 49 opened: { 50 type: Boolean 51 }, 52 53 animationConfig: { 54 type: Object, 55 value: function() { 56 return { 57 'entry': [{ 58 name: 'scale-up-animation', 59 node: this 60 }], 61 'exit': [{ 62 name: 'fade-out-animation', 63 node: this 64 }] 65 } 66 } 67 } 68 69 }, 70 71 listeners: { 72 'neon-animation-finish': '_onAnimationFinish' 73 }, 74 75 _onAnimationFinish: function() { 76 if (!this.opened) { 77 this.style.display = ''; 78 } 79 }, 80 81 show: function() { 82 this.opened = true; 83 this.style.display = 'inline-block'; 84 this.playAnimation('entry'); 85 }, 86 87 hide: function() { 88 this.opened = false; 89 this.playAnimation('exit'); 90 } 91 92 }); 93 94</script> 95