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.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 moveWindow;
|
|
// console.log(moveWindow)
|
