Polymer 1.0 Element Expansion - Custom Element Dialog Box
I am trying to create a custom element that plays youtube video in paper-dialog
. So videoPlayer = Polymer.dom(this.root).querySelector('video-player');
inherits / has access to this method paper-dialog
open
, I am trying to extend my custom element. It doesn't work, but hopefully I'm on the right track and someone can show me the right way.
I am using Polymer 1.0
but I have https://www.polymer-project.org/0.5/docs/polymer/polymer.html#extending-other-elements to continue elements.
<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>
<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>
</template>
<script>
Polymer({
is: "video-player"
});
</script>
<paper-dialog name="video-player" extends="video-player">
<template>
<shadow></shadow>
</template>
<script>
Polymer();
</script>
</paper-dialog>
<video-player></video-player>
source to share
As mentioned in the comments, you can't extend custom elements yet, so the existing pattern (or at least the one I'm using) is to use behavioral capabilities wherever possible and wrappers wherever they are neither were.
eg.
<dom-module id="popup-video-player">
<template>
<video-player></video-player>
</template>
<script>
Polymer({
is: 'popup-video-player',
behaviors: [Polymer.PaperDialogBehavior],
...
});
</script>
</dom-module>
Now you can use the <popup-video-player>
same way as a paper-dialog
.
I know this stinks because if it video-player
has a bunch of properties that you want to access, you need to copy them in the API popup-video-player
, which is not DRY exact.
If you look at the source paper-input
, you will see that they are doing the same. Obviously they want to expand iron-input
, but they can't get things like this:
<input is="iron-input" id="input"
aria-labelledby$="[[_ariaLabelledBy]]"
aria-describedby$="[[_ariaDescribedBy]]"
disabled$="[[disabled]]"
title$="[[title]]"
... >
As a side note, you can always hook into the <video-player>
"properties" property and make programmatic API additions programmatic.
maybe something like this will work: (untested!)
Polymer({
...
properties: (function () {
var prop = {
//special properties specific to the pop up version of video-player
//..obviously be careful to avoid name space conflicts.
};
var video_player = document.createElement('video-player');
video_player.properties.keys().forEach( function(key) {
props[key] = video_player[key];
});
return props;
}()),
});
source to share