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 11<link rel="import" href="../../iron-resizable-behavior.html"> 12 13<dom-module id="x-puck"> 14 <template> 15 <style> 16 :host { 17 display: inline-block; 18 border: 3px solid lightblue; 19 } 20 </style> 21 22 <b>I'm a resize-aware, thirdifying puck at (<span>{{x}}</span> x <span>{{y}}</span>).</b> 23 24 </template> 25 26</dom-module> 27 28<script> 29 30 Polymer({ 31 32 is: 'x-puck', 33 34 behaviors: [ 35 Polymer.IronResizableBehavior 36 ], 37 38 properties: { 39 x: { 40 type: Number, 41 value: 0 42 }, 43 44 y: { 45 type: Number, 46 value: 0 47 } 48 }, 49 50 listeners: { 51 'iron-resize': '_onIronResize' 52 }, 53 54 attached: function() { 55 this.async(this.notifyResize, 1); 56 }, 57 58 get parent() { 59 if (this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { 60 return this.parentNode.host; 61 } 62 63 return this.parentNode; 64 }, 65 66 _onIronResize: function() { 67 var x = this.x = Math.floor(this.parent.offsetWidth / 3); 68 var y = this.y = Math.floor(this.parent.offsetHeight / 3); 69 70 this.translate3d(x + 'px', y + 'px', 0); 71 } 72 }); 73 74</script> 75 76<dom-module id="x-app"> 77 <template> 78 <style> 79 :host { 80 display: block; 81 position: absolute; 82 top: 0; 83 right: 0; 84 bottom: 0; 85 left: 0; 86 } 87 </style> 88 <x-puck></x-puck> 89 90 </template> 91 92</dom-module> 93 94<script> 95 96 Polymer({ 97 98 is: 'x-app', 99 100 behaviors: [ 101 Polymer.IronResizableBehavior 102 ] 103 }); 104 105</script> 106