Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/qfqk-android

shuishen

2022-02-19 d25a69f40c327f8bd72a7a16d5090bc85f6952df

 leafletMapOur/grabOrdersMap/js/move.js

@@ -1,132 +1,173 @@
// 使用说明：（需要移动的dom，触摸块dom，跟随改变map dom）
function myDomMove(dom, div, map) {
    this.m = $(dom);
    this.div = $(div);
    this.mapId = $(map);
    this.__xx = null; //鼠标实时位置
    this.__yy = null;
    this.__sx = null; //鼠标开始位置
    this.__sy = null;
    this.__dx = null; //dom位置
    this.__dy = null;
    this.mapH = null; //地图高度
    this.__wy = null; //屏幕高度
    this.state = "up"; //dom状态默认up
class $moveWindow {
   constructor(data) {
      this.id = data.id;
      this.start = 0;
      this.end = 0;
      this.domHeight = 0;
      this.domMove = null;
      this.openValue = false;
      this.useHeight = data.minHeight;
      this.maxHeight = data.maxHeight;
      this.height = data.minHeight;
      this.critical = data.critical;
      this.openAnimation = data.openAnimation;
      let that = this;
      this.fn =
         data.fn ? (function(res) {
            // console.log("回调函数");
            data.fn(res);
            that.changeHeight(res);
            // if (res.state === true) {
            //    console.log(that.openValue, res.state)
            // } else if (res.state === false) {
            //    console.log(that.openValue, res.state)
            // }
         }) :
         (function(res) {
            console.log("未设置回调函数");
            console.log(res);
         });

    this.getMosePosition = (x, y) => { //获取鼠标位置
        this.__sx = x;
        this.__sy = y;
        // console.log(this.__sy, '鼠标开始');

    }
    this.getDomPosition = () => { //获取dom位置
        this.__dx = this.m.offset().left;
        this.__dy = this.m.offset().top;
        this.__wy = document.documentElement.clientHeight;
        // console.log(this.__dy, 'dom');
    }
    this.getMapHeight = () => { //获取地图高度
        var that = this;
        this.mapId.css("height", (index, value) => {
                that.mapH = parseFloat(value);
            })
            // console.log(that.mapH, 'map位置');
    }
    this.changeDomPosition = (x, y, dy) => { //改变dom位置
        var that = this;
        // this.mapId.css("height", (index, value) => {//改变地图高度
        //     var h = this.mapH + y;
        //     console.log(h);
        //     return h ;
        // })
        this.m.animate({ top: dy + "px" }, 10);

    }


    //begin
    this.followFinger = (map, state = 14) => { //(地图实例，dom状态判断是向上还是向下)
        // console.log('开始跟随手指');
        var that = this;
        if (state != 14) {
            that.state = state;
            // console.log(that.state);
        }
        that.getDomPosition(); //获取dom位置
        that.getMapHeight(); //获取地图高度
        var once = true;
        that.div.on('touchmove', function(e) { //获取鼠标位置
            e = e || window.event;
            that.__xx = e.touches[0].clientX;
            that.__yy = e.touches[0].clientY;
            if (once) { //获取第一次点击的位置
                once = false;
                that.getMosePosition(that.__xx, that.__yy);
            }
            // console.log(that.__yy, '鼠标');
            var h = that.__yy - that.__sy //鼠标移动距离y

            if (that.state == 'down') { //两种模式
                // console.log(that.state);
                if (h >= 0 && h + that.__dy <= that.__wy - 20) {
                    that.changeDomPosition(0, h, h + that.__dy); //改变位置
                    // console.log(that.state,h + that.__dy,112);
                }
            } else if (that.state == 'up') {
                if (h >= -that.__dy && h <= that.__wy - 20) {
                    that.changeDomPosition(0, h, h + that.__wy - 20); //改变位置
                    // console.log(that.state,h + that.__wy - 20,112);
                }
            }

        });
        that.div.on('touchend', function() { //抬起重置
            once = true; //抬起重置鼠标点击位置
            var chous = null;
            if (that.state == 'down') { //两种模式
                // var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4;
                chous = (that.__sy - that.__yy) < 0;
            } else if (that.state == 'up') {
                // var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
                chous = (that.__sy - that.__yy) < 0;
            }
            if (!chous) {
                //改变dom位置
                that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 3.999));
                // that.getDomPosition();//抬起获取dom位置/持续停留使用
                that.state = 'down';
                $('#map').css("height", (index, value) => { //改变地图高度
                    return '50%';
                })
                map.invalidateSize(true); //应用地图高度
            } else {
                // that.changeDomPosition(0, 0, that.__wy - 50); //改变位置
                that.changeDomPosition(0, 0, that.__wy); //改变位置
                // that.getDomPosition();//抬起获取dom位置/持续停留使用
                that.state = 'up';
                $('#map').css("height", (index, value) => { //改变地图高度
                    return '100%';
                })
                map.invalidateSize(true); //应用地图高度
            }
            that.getMapHeight(); //抬起获取map高度
        });
    }
    this.destruction = () => { //初始化销毁
        this.m = $(dom);
        this.div = $(div);
        this.mapId = $(map);
        this.__xx = null; //鼠标实时位置
        this.__yy = null;
        this.__sx = null; //鼠标开始位置
        this.__sy = null;
        this.__dx = null; //dom位置
        this.__dy = null;
        this.mapH = null; //地图高度
        this.__wy = null; //屏幕高度
        this.state = "up"; //dom状态默认up
        this.div.off();
    }
      this.ListenerTouchmove = function(window) {
         let moseHeight = window.changedTouches[0].clientY;
         //   let windowHeight = document.body.clientHeight; //屏幕宽度
         let endOn = moseHeight;
         // console.log(that.domHeight, that.start, endOn)
         let cha = that.domHeight + (+that.start - +endOn);
         if (cha >= that.maxHeight) {
            cha = that.maxHeight;
         } else if (cha <= that.useHeight) {
            cha = that.useHeight;
         }
         let d = {
            state: "on",
            height: cha,
         };
         that.fn(d);
      };
      this.ListenerTouchstart = function(window) {
         let moseHeight = window.changedTouches[0].clientY;
         that.start = moseHeight;
         // that.domHeight = document
         //    .getElementById(that.id)
         //    .style.cssText.split("px")[0]
         //    .split("height:")[1];
         that.domHeight = document
            .getElementById(that.id)
            .clientHeight;
      };
      this.ListenerTouchend = function(window) {
         let moseHeight = window.changedTouches[0].clientY;
         that.end = moseHeight;
         let cha, states;
         if (that.end >= that.start) {
            states = false; //方向
            cha = that.end - that.start;
         } else {
            states = true; //方向
            cha = that.start - that.end;
         }
         if (cha >= that.critical) {
            //高
            that.opens(states, true); //程度
         } else if (cha < that.critical) {
            //低
            that.opens(states, false); //程度
         }
      };
      return this;
   }
   //启动监听事件
   init() {
      // this.domMove = document.getElementById(this.id);
      let that = this;
      this.checkDom(that.id, (dom) => {
         //检测是否有dom
         that.domMove = dom;
         if (that.openAnimation) {
            that.domMove.style.transition = 'all 0.2s';
         }
         that.domMove.addEventListener("touchmove", that.ListenerTouchmove);
         // 结束位置靠滑动距离判断
         that.domMove.addEventListener("touchstart", that.ListenerTouchstart);
         that.domMove.addEventListener("touchend", that.ListenerTouchend);
      });
   }
   //关闭监听事件
   closeInit() {
      this.domMove = document.getElementById(this.id);
      this.domMove.removeEventListener("touchmove", this.ListenerTouchmove);
      // 结束位置靠滑动距离判断
      this.domMove.removeEventListener("touchstart", this.ListenerTouchstart);
      this.domMove.removeEventListener("touchend", this.ListenerTouchend);
   }
   //输出事件
   opens(val, chengdu) {
      if (chengdu) {
         this.openValue = val;
         if (val) {
            this.height = this.maxHeight;
         } else {
            this.height = this.useHeight;
         }
      } else {
         this.height = this.domHeight;
      }
      let d = {
         state: this.openValue,
         height: this.height,
      };
      this.fn(d);
   }
   changeHeight(data) {
      document
         .getElementById(this.id).style.height = data.height + "px";
   }
   checkDom(name, fn) {
      //  声明定时器
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
         // let dom = that.$refs[name];
         let dom = document.getElementById(name);
         if (dom) {
            //  执行dom加载完成后的操作
            //  清除定时器
            if (!timer) {
               clearTimeout(timer);
            }
            if (fn) {
               //回调函数
               fn(dom);
               return;
            } else {
               return dom;
            }
         } else {
            //  自我调用
            timer = setTimeout(checkDom, 100);
         }
      }
      //  首次执行
      checkDom();
   }
   // 结束位置是一半判断
   //  domMove.addEventListener("touchend", function (window) {
   //   let moseHeight = window.changedTouches[0].clientY;
   //   let windowHeight = document.body.clientHeight;
   //   let cha = windowHeight - moseHeight;
   //   console.log(cha, "最后位置");
   //   let centerPoint =
   //     (windowHeight / 2 - +that.useHeight) / 2 + +that.useHeight;
   //   if (cha >= centerPoint) {
   //     cha = windowHeight / 2;
   //   } else if (cha < centerPoint) {
   //     cha = that.useHeight;
   //   }
   //   that.height = cha;
   // });
}

// export default myDomMove;
// export default moveWindow;

// console.log(moveWindow)