fixing bug where video kept playing when closing lightbox

This commit is contained in:
Sacha Greif 2015-07-07 10:55:09 +09:00
parent 570e99cdc0
commit 2b7f573217
5 changed files with 41 additions and 27 deletions

View file

@ -8,7 +8,14 @@
{{else}}
<div class="post-thumbnail-empty"></div>
{{/if}}
{{#if media}}
{{> post_video}}
{{/if}}
{{#with media}}
{{#if showVideo}}
<div class="post-video-lightbox hidden">
<a class="post-video-lightbox-hide" href="#">×</a>
<div class="post-video-lightbox-inner">
{{{html}}}
</div>
</div>
{{/if}}
{{/with}}
</template>

View file

@ -1,3 +1,8 @@
Template.post_thumbnail.onCreated(function () {
var instance = this;
instance.showVideo = new ReactiveVar(false);
});
Template.post_thumbnail.helpers({
postLink: function () {
return Posts.getLink(this);
@ -7,13 +12,34 @@ Template.post_thumbnail.helpers({
},
playVideoClass: function () {
return !!this.media ? 'post-thumbnail-has-video': '';
},
showVideo: function () {
return Template.instance().showVideo.get();
}
});
Template.post_thumbnail.events({
'click .post-thumbnail-has-video': function (e) {
'click .post-thumbnail-has-video': function (e, instance) {
e.preventDefault();
$('body').addClass('showing-lightbox');
$(e.target).parents('.post').find('.post-video-lightbox').fadeIn('fast');
}
instance.showVideo.set(true);
// use Meteor.defer to make sure the elements are rendered by Blaze
Meteor.defer(function () {
$('body').addClass('showing-lightbox');
$(e.target).parents('.post').find('.post-video-lightbox').fadeIn('fast');
});
},
'click .post-video-lightbox-hide, click .post-video-lightbox': function (e, instance) {
e.preventDefault();
$(e.target).parents('.post').find('.post-video-lightbox').fadeOut('fast');
$('body').removeClass('showing-lightbox');
Meteor.defer(function () {
instance.showVideo.set(false);
});
}
});

View file

@ -1,10 +0,0 @@
<template name="post_video">
{{#with media}}
<div class="post-video-lightbox hidden">
<a class="post-video-lightbox-hide" href="#">×</a>
<div class="post-video-lightbox-inner">
{{{html}}}
</div>
</div>
{{/with}}
</template>

View file

@ -1,7 +0,0 @@
Template.post_video.events({
'click .post-video-lightbox-hide, click .post-video-lightbox': function (e) {
e.preventDefault();
$(e.target).parents('.post').find('.post-video-lightbox').fadeOut('fast');
$('body').removeClass('showing-lightbox');
}
});

View file

@ -25,9 +25,7 @@ Package.onUse( function(api) {
'lib/client/autoform-postthumbnail.js',
'lib/client/post_thumbnail.html',
'lib/client/post_thumbnail.js',
'lib/client/post_thumbnail.scss',
'lib/client/post_video.html',
'lib/client/post_video.js'
'lib/client/post_thumbnail.scss'
], ['client']);
api.addFiles([