PC端阅读,如果搭建在远程Docker上(内置Ubuntu+xfce),通过noVNC访问阅读,只能按侧边翻页,不太习惯。故加入了PC端的滑动翻页,但有点小问题,后面提及
修改步骤:
1、登录host主机,进入docker的ubuntu
[Shell] 纯文本查看 复制代码docker exec -it CONTAINERID(替换为自己的) /bin/bash
2、进入阅读的相关js目录
[Shell] 纯文本查看 复制代码cd /usr/local/calibre-web/app/cps/static/js/reading/
vi epub.js
3、修改主要是上一页(prev()),下一页(next())的方法
[JavaScript] 纯文本查看 复制代码 var touchStart = 0;
var touchEnd = 0;
//新增是否触摸屏判断
var isTouchDevice = ("ontouchstart" in window) ? true : false; //判断是否触摸屏
if(!isTouchDevice){
reader.rendition.on('mousedown', function(event) {
touchStart = event.screenX;
event.preventDefault();//阻止默认事件选中文字,无效,不清楚原因
});
reader.rendition.on('mouseup', function(event) {
touchEnd = event.screenX;
if (touchStart touchEnd) {
if(reader.book.package.metadata.direction === "rtl") {
reader.rendition.prev();
} else {
reader.rendition.next();
}
// Swiped Left
}
event.preventDefault();
});
}else{
//原代码触摸屏代码,无修改
reader.rendition.on('touchstart', function(event) {
touchStart = event.changedTouches[0].screenX;
console.log("touchStart:"+touchStart);
});
reader.rendition.on('touchend', function(event) {
touchEnd = event.changedTouches[0].screenX;
if (touchStart touchEnd) {
if(reader.book.package.metadata.direction === "rtl") {
reader.rendition.prev();
} else {
reader.rendition.next();
}
// Swiped Left
}
});
}
通过上述新增非触摸屏的逻辑,可以实现PC端鼠标按下,和鼠标放开后的翻页效果,但是event.preventDefault();无法阻止文字选择,暂时无太好的办法,但也算是实现了PC端的翻页功能
以上供有类似需求的小伙伴参考使用。如果有人有阻止文字选择的idea,欢迎跟帖告知,谢谢哈