Here is a example from what I am using... if I wanted a modal I would do
<video-player modal></video-player>
<link rel="import" href=
"../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html"
>
<link rel="import" href=
"../bower_components/paper-dialog-behavior/paper-dialog-behavior.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/neon-animation/animations/fade-out-animation.html">
<link rel="import" href=
"../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" type="css" href=
"../bower_components/paper-dialog-behavior/paper-dialog-common.css">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html"
>
<dom-module id="video-player">
<style>
:host {
@apply(--layout-fit);
}
</style>
<template>
<template is="dom-if" if="{{show.video}}">
<div class="layout vertical fit">
<google-youtube style="height: 100%"
video-id="YMWd7QnXY8E"
rel="1"
start="1"
playsinline="0"
controls="2"
showinfo="0"
width="100%"
height="100%"
autoplay="1">
</google-youtube>
</div>
<template is="dom-if" if="{{show.backButton}}">
<paper-button dialog-dismiss style="color: white; margin-top: 0px">
<paper-icon-button icon="arrow-back"></paper-icon-button>
</paper-button>
</template>
</template>
</template>
<script>
Polymer({
is: "video-player",
behaviors: [
Polymer.PaperDialogBehavior,
Polymer.NeonAnimationRunnerBehavior
],
properties: {
foo: { Object,
notify: true
},
entryAnimation: {
value: 'scale-up-animation'
},
exitAnimation: {
value: 'fade-out-animation'
}
},
listeners: { 'iron-overlay-opened': 'enableElement',
'iron-overlay-closed': 'stopPlayer'
},
timeWait: 300,
startPlayer: function() {
this.playAnimation('entry');
this.show = { backButton: true};
youtubePlayer = this.$$('google-youtube');
if (youtubePlayer.playbackstarted) {
youtubePlayer.play();
}
},
enableElement: function(e) {
this.show = { video: true};
setTimeout(this.startPlayer.bind(this), this.timeWait);
},
stopPlayer: function(e) {
this.timeWait = 0;
this.playAnimation('exit');
youtubePlayer = this.$$('google-youtube');
youtubePlayer.pause();
youtubePlayer.seekTo(1);
this.show = { video: false,
backButton: false }
},
ready: function() {
console.log("sssssssssssssssssSS");
}
});
</script>
</dom-module>
On Sunday, July 26, 2015 at 8:19:52 PM UTC-5, Darin Hensley wrote:
>
> This can be done also with making a custom element and
> paper-dialog-behavior.
>
> On Thursday, July 3, 2014 at 12:20:34 AM UTC-5, Anders Forsell wrote:
>>
>> I am trying to use the paper-dialog in a Polymer element as a way of
>> displaying a modal selection window. The problem is if I click outside the
>> dialog it will be hidden under the other content.
>>
>> Is it possible to make the paper-dialog modal so that it can only be
>> closed by pressing one of its' buttons?
>>
>> Thanks,
>>
>> Anders
>>
>>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/dcba70d1-11c7-4181-9204-de5d3caebeba%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
