diff --git a/assets/main.js b/assets/main.js index e38a95c..7c84172 100644 --- a/assets/main.js +++ b/assets/main.js @@ -57,6 +57,8 @@ function sidebarToggle() { } if (window.innerWidth > 1000) { sidebarToggle(); } +EventUtil.bindEvent(itemSidebar, 'swipeleft', sidebarToggle) + window.onload = function () { diff --git a/assets/utils-touchscreen-event.js b/assets/utils-touchscreen-event.js new file mode 100644 index 0000000..47e8bff --- /dev/null +++ b/assets/utils-touchscreen-event.js @@ -0,0 +1,115 @@ +/** + * 用touch事件模拟点击、左滑、右滑、上拉、下拉等时间, + * 是利用touchstart和touchend两个事件发生的位置来确定是什么操作。 + * 例如: + * 1、touchstart和touchend两个事件的位置基本一致,也就是没发生位移,那么可以确定用户是想点击按钮等。 + * 2、touchend在touchstart正左侧,说明用户是向左滑动的。 + * 利用上面的原理,可以模拟移动端的各类事件。 + **/ +const EventUtil = (function() { + + //支持事件列表 + let eventArr = ['eventswipeleft', 'eventswiperight', 'eventslideup', 'eventslidedown', 'eventclick', 'eventlongpress']; + + //touchstart事件,delta记录开始触摸位置 + function touchStart(event) { + this.delta = {}; + this.delta.x = event.touches[0].pageX; + this.delta.y = event.touches[0].pageY; + this.delta.time = new Date().getTime(); + } + + /** + * touchend事件,计算两个事件之间的位移量 + * 1、如果位移量很小或没有位移,看做点击事件 + * 2、如果位移量较大,x大于y,可以看做平移,x>0,向右滑,反之向左滑。 + * 3、如果位移量较大,x小于y,看做上下移动,y>0,向下滑,反之向上滑 + * 这样就模拟的移动端几个常见的时间。 + * */ + function touchEnd(event) { + let delta = this.delta; + delete this.delta; + let timegap = new Date().getTime() - delta.time; + delta.x -= event.changedTouches[0].pageX; + delta.y -= event.changedTouches[0].pageY; + if (Math.abs(delta.x) < 5 && Math.abs(delta.y) < 5) { + if (timegap < 1000) { + if (this['eventclick']) { + this['eventclick'].map(function(fn){ + fn(event); + }); + } + } else { + if (this['eventlongpress']) { + this['eventlongpress'].map(function(fn){ + fn(event); + }); + } + } + return; + } + if (Math.abs(delta.x) > Math.abs(delta.y)) { + if (delta.x > 0) { + if (this['eventswipeleft']) { + this['eventswipeleft'].map(function(fn){ + fn(event); + }); + } + } else { + this['eventswiperight'].map(function(fn){ + fn(event); + }); + } + } else { + if (delta.y > 0) { + if (this['eventslidedown']) { + this['eventslidedown'].map(function(fn){ + fn(event); + }); + } + } else { + this['eventslideup'].map(function(fn){ + fn(event); + }); + } + } + } + + function bindEvent(dom, type, callback) { + if (!dom) { + console.error('dom is null or undefined'); + } + let flag = eventArr.some(key => dom[key]); + if (!flag) { + dom.addEventListener('touchstart', touchStart); + dom.addEventListener('touchend', touchEnd); + } + if (!dom['event' + type]) { + dom['event' + type] = []; + } + dom['event' + type].push(callback); + } + + function removeEvent(dom, type, callback) { + if (dom['event' + type]) { + for(let i = 0; i < dom['event' + type].length; i++) { + if (dom['event' + type][i] === callback) { + dom['event' + type].splice(i, 1); + i--; + } + } + if (dom['event' + type] && dom['event' + type].length === 0) { + delete dom['event' + type]; + let flag = eventArr.every(key => !dom[key]); + if (flag) { + dom.removeEventListener('touchstart', touchStart); + dom.removeEventListener('touchend', touchEnd); + } + } + } + } + return { + bindEvent, + removeEvent + } +})(); diff --git a/constant.php b/constant.php index 7f3b50b..421eed3 100644 --- a/constant.php +++ b/constant.php @@ -2,6 +2,6 @@ const APP_NAME = "ph-Bookshelf"; -const VERSION = "0.3.0.3"; +const VERSION = "0.3.0.6"; const CHANNEL = "suk-ws"; const BRANCH = "master"; diff --git a/src/Data/SiteMeta.php b/src/Data/SiteMeta.php index 0b567d7..a8c55b7 100644 --- a/src/Data/SiteMeta.php +++ b/src/Data/SiteMeta.php @@ -46,6 +46,7 @@ class SiteMeta { // "/assets/gitbook-fix.js", // "https://cdn.jsdelivr.net/npm/marked/marked.min.js", // "/assets/ref.js", + "/assets/utils-touchscreen-event.js", "/assets/main.js", ); }