diff --git a/js/player.js b/js/player.js index 1867497a..fc6fee9f 100644 --- a/js/player.js +++ b/js/player.js @@ -140,6 +140,7 @@ proto.activatePlayer = function() { } this.player.play(); this.element.addEventListener( 'mouseenter', this ); + this.element.addEventListener( 'focus', this ); }; // Player API, don't hate the ... thanks I know where the door is @@ -182,6 +183,17 @@ proto.onmouseleave = function() { this.element.removeEventListener( 'mouseleave', this ); }; +// ----- focus/blur ----- // +proto.onfocus = function() { + this.player.pause(); + this.element.addEventListener( 'blur', this ); +}; + +proto.onblur = function() { + this.player.unpause(); + this.element.removeEventListener( 'blur', this ); +}; + // ----- ----- // Flickity.Player = Player; diff --git a/js/prev-next-button.js b/js/prev-next-button.js index 058eef1d..a3ea2ddd 100644 --- a/js/prev-next-button.js +++ b/js/prev-next-button.js @@ -72,6 +72,7 @@ PrevNextButton.prototype._create = function() { PrevNextButton.prototype.activate = function() { this.bindStartEvent( this.element ); this.element.addEventListener( 'click', this ); + this.element.addEventListener( 'focus', this ); // add to DOM this.parent.element.appendChild( this.element ); }; @@ -127,6 +128,22 @@ PrevNextButton.prototype.onclick = function() { this.parent[ method ](); }; +PrevNextButton.prototype.onfocus = function() { + if ( !this.isEnabled ) { + return; + } + this.parent.stopPlayer(); + this.element.addEventListener( 'blur', this ); +}; + +PrevNextButton.prototype.onblur = function() { + if ( !this.isEnabled ) { + return; + } + this.parent.playPlayer(); + this.element.removeEventListener( 'blur', this ); +}; + // ----- ----- // PrevNextButton.prototype.enable = function() {