Skip to content

Instantly share code, notes, and snippets.

@hoyangtsai
Created April 13, 2020 02:27
Show Gist options
  • Save hoyangtsai/03d591d3af86c4ac29d52deeb05b57cc to your computer and use it in GitHub Desktop.
Save hoyangtsai/03d591d3af86c4ac29d52deeb05b57cc to your computer and use it in GitHub Desktop.
jQuery Simulate gesture of slide out
var mediajPlayer = {
isTouch: isMobile.any() && 'ontouchstart' in window,
eventX: null,
timeout: null,
slideStart: function(evt) {
evt.stopPropagation();
evt.preventDefault();
var playlistRight = $(window).width() - (
$('div#jp-playlist-container').offset().left +
$('div#jp-playlist-container').outerWidth()
);
if(playlistRight >= 0) return;
evt = window.event || evt;
mediajPlayer.eventX = mediajPlayer.isTouch ? evt.touches[0].pageX : evt.clientX;
},
slideTo: function(evt) {
if(!mediajPlayer.eventX)
return;
clearTimeout(mediajPlayer.timeout);
mediajPlayer.timeout = setTimeout(function() {
mediajPlayer.timeout = null;
mediajPlayer.eventX = null;
mediajPlayer.slideEnd(evt);
}, 300);
evt = window.event || evt;
var moveX = mediajPlayer.isTouch ? evt.touches[0].pageX : evt.clientX;
var offsetX = moveX - mediajPlayer.eventX;
var playlistRight = $(window).width() - (
$('div#jp-playlist-container').offset().left +
$('div#jp-playlist-container').outerWidth()
);
var moveTo = playlistRight - offsetX;
if(moveTo >= -150 || moveTo < -250) {
mediajPlayer.eventX = null;
mediajPlayer.slideEnd(evt);
return;
}
$('div#jp-playlist-container').css('right', moveTo);
mediajPlayer.eventX = moveX;
},
slideEnd: function(evt) {
var playlistRight = $(window).width() - (
$('div#jp-playlist-container').offset().left +
$('div#jp-playlist-container').outerWidth()
);
if(playlistRight >= -170) {
mediajPlayer.trayHide = true;
mediajPlayer.trayHandler();
} else if(playlistRight < -170) {
mediajPlayer.trayHide = false;
mediajPlayer.trayHandler();
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment