Polymer 1.0 Custom Element Using paper-dialog- better way to do this? -


i have custom element video-player uses paper-dialog.

they way now, seems kind of hacky. have external button(it has external button design) opens with:

bob = polymer.dom(this.root).queryselector('video-player'); bob.queryselector('paper-dialog').open() 

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html"> <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../bower_components/iron-icons/iron-icons.html"> <link rel="import" href="../bower_components/google-youtube/google-youtube.html"> <link rel="import" href="../bower_components/polymer/polymer.html">  <dom-module id="video-player">   <template>     <paper-dialog>       <div class="layout horizontal">         <paper-button dialog-dismiss>           <paper-icon-button icon="arrow-back"></paper-icon-button>         </paper-button>       </div>       <div style="height: 100%; width: 100%">         <google-youtube style="height: 100%;"           video-id="ymwd7qnxy8e"           rel="1"           start="5"           playsinline="0"           controls="2"           showinfo="0"           width="100%"           height="100%"           autoplay="1">         </google-youtube>       </div>     </paper-dialog>   </template>    <script>     polymer({       is: "video-player"     });   </script> </dom-module>  </paper-dialog> 

i can not inherit paper-dialog behavior(which iron-overlay because won't relate specific paper-dialog element.

since seems kind of hacky, there better way this?

please read follows:

1.the last deleted

</paper-dialog> 

2.paper-button component add

<link rel="import" href="../bower_components/paper-button/paper-button.html"> 

sources follows:

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html"> <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../bower_components/paper-button/paper-button.html"> <link rel="import" href="../bower_components/iron-icons/iron-icons.html"> <link rel="import" href="../bower_components/google-youtube/google-youtube.html"> <link rel="import" href="../bower_components/polymer/polymer.html">  <dom-module id="video-player">   <template>     <paper-dialog>       <div class="layout horizontal">         <paper-button dialog-dismiss>           <paper-icon-button icon="arrow-back"></paper-icon-button>         </paper-button>       </div>       <div style="height: 100%; width: 100%">         <google-youtube style="height: 100%;"           video-id="ymwd7qnxy8e"           rel="1"           start="5"           playsinline="0"           controls="2"           showinfo="0"           width="100%"           height="100%"           autoplay="1">         </google-youtube>       </div>     </paper-dialog>   </template>    <script>     polymer({       is: "video-player"     });   </script> </dom-module> 

Comments

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -