calibre-web添加PC端滑动翻页

查看 25|回复 0
作者:hx66947218   
calibre-web(johngong的版本)目前是支持触摸屏滑动的,一般安卓访问阅读,是直接支持触摸滑动翻页的,但是PC端不支持,查询谷歌在Windows上配置--touch 的参数貌似可以支持,未尝试
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,欢迎跟帖告知,谢谢哈

翻页, 触摸屏

您需要登录后才可以回帖 登录 | 立即注册

返回顶部