mirror of
https://github.com/cnodejs/nodeclub.git
synced 2025-12-08 19:55:55 +00:00
70 lines
2.6 KiB
JavaScript
70 lines
2.6 KiB
JavaScript
$(document).ready(function(){
|
||
var $responsiveBtn = $('#responsive-sidebar-trigger'),
|
||
$sidebarMask = $('#sidebar-mask'),
|
||
$sidebar = $('#sidebar'),
|
||
$main = $('#main'),
|
||
winWidth = $(window).width(),
|
||
startX = 0,
|
||
startY = 0,
|
||
delta = {
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
swipeThreshold = winWidth/3,
|
||
toggleSideBar = function(){
|
||
var isShow = $responsiveBtn.data('is-show'),
|
||
mainHeight = $main.height(),
|
||
sidebarHeight = $sidebar.outerHeight();
|
||
$sidebar.css({right:isShow?-300:0});
|
||
$responsiveBtn.data('is-show', !isShow);
|
||
if(!isShow && mainHeight < sidebarHeight){
|
||
$main.height(sidebarHeight);
|
||
}
|
||
$sidebarMask[isShow?'fadeOut':'fadeIn']().height($('body').height());
|
||
},
|
||
touchstart = function(e){
|
||
var touchs = e.targetTouches;
|
||
startX = +touchs[0].pageX;
|
||
startY = +touchs[0].pageY;
|
||
delta.x = delta.y = 0;
|
||
document.body.addEventListener('touchmove', touchmove, false);
|
||
document.body.addEventListener('touchend', touchend, false);
|
||
},
|
||
touchmove = function(e){
|
||
var touchs = e.changedTouches;
|
||
delta.x = +touchs[0].pageX - startX;
|
||
delta.y = +touchs[0].pageY - startY;
|
||
//当水平距离大于垂直距离时，才认为是用户想滑动打开右侧栏
|
||
if(Math.abs(delta.x) > Math.abs(delta.y)){
|
||
e.preventDefault();
|
||
}
|
||
},
|
||
touchend = function(e){
|
||
var touchs = e.changedTouches,
|
||
isShow = $responsiveBtn.data('is-show');
|
||
delta.x = +touchs[0].pageX - startX;
|
||
//右侧栏未显示&&用户touch点在屏幕右侧1/4区域内&&move距离大于阀值时，打开右侧栏
|
||
if(!isShow && (startX > winWidth*3/4) && Math.abs(delta.x) > swipeThreshold){
|
||
$responsiveBtn.trigger('click');
|
||
}
|
||
//右侧栏显示中&&用户touch点在屏幕左侧侧1/4区域内&&move距离大于阀值时，关闭右侧栏
|
||
if(isShow && (startX < winWidth*1/4) && Math.abs(delta.x) > swipeThreshold){
|
||
$responsiveBtn.trigger('click');
|
||
}
|
||
startX = startY = 0;
|
||
delta.x = delta.y = 0;
|
||
document.body.removeEventListener('touchmove', touchmove, false);
|
||
document.body.removeEventListener('touchend', touchend, false);
|
||
};
|
||
|
||
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch){
|
||
document.body.addEventListener('touchstart', touchstart);
|
||
}
|
||
|
||
$responsiveBtn.on('click', toggleSideBar);
|
||
|
||
$sidebarMask.on('click', function() {
|
||
$responsiveBtn.trigger('click');
|
||
});
|
||
|
||
}); |