(function(global, factory) {
"use strict";
if (typeof define === "function" && define.amd) {
// 支持 amd ， require.js 格式
define(function() {
return (global.DragBar = factory(global, global.document));
})
} else if (typeof exports === 'object') {
// 支持 exports es6模块化
module.exports = factory(global, global.document);
} else {
// 浏览器模式
global.DragBar = factory(global, global.document);
}
})((typeof window !== "undefined" ? window : this), function(window, document) {
"use strict";
var DragBar = function(container, options) {
const me = this;
const origin = {};
const mergeOptions = {};
// 一些默认参数
// 默认是水平方向放置
const _options = {
height: 500,
width: 5,
direction: "horizontal"
}
me._options = _options;
// 保存原始参数
for (let key in options) {
origin[key] = options[key];
}
// 保存合并的数据touchend
Object.assign(mergeOptions, _options, origin);
me.origin = origin;
me.mergeOptions = mergeOptions;
// 获取传递进来的元素
if (typeof container === 'string') {
me.objString = container;
me.container = document.querySelector(container);
me.bar = me.container.children[0];
} else if (typeof container == "object" && container.nodeType === 1) {
me.container = container;
me.bar = me.container.children[0];
} else {
throw new TypeError("the container must be a string for example `#container` or `.container` or a object for nodeType=1")
}
console.log(me);
console.log(container);
console.log(options);
};
// 初始化入口函数
DragBar.prototype.init = function() {
this.createMask(this.mergeOptions.cover);
this.mouseDown();
this.mouseUp();
this.mouseMove();
this.touchStart();
this.touchMove();
this.touchEnd();
};
// 创建蒙版
DragBar.prototype.createMask = function(bool = false) {
if (bool) {
var w = this.mergeOptions.direction === "horizontal" ? 0 : this.container.offsetWidth;
var h = this.mergeOptions.direction === "vertical" ? 0 : this.container.offsetHeight;
var mask = document.createElement("div");
mask.className = "mask";
mask.id = "mask";
mask.style.position = "absolute";
mask.style.left = 0;
mask.style.top = 0;
mask.style.width = w + "px";
mask.style.height = h + "px";
mask.style.background = this.mergeOptions.background;
this.mask = mask;
this.container.appendChild(mask);
}
};
// 事件绑定
DragBar.prototype.bindEvent = function(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, fn);
} else {
element["on" + type] = null;
}
};
// 事件移除
DragBar.prototype.removeEvent = function(element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, fn);
} else {
element["on" + type] = null;
}
};
// pc端 鼠标按下
DragBar.prototype.mouseDown = function() {
var me = this;
me._mousedown = function(e) {
console.log("mousedown");
me.startClientXY = {
startX: e.clientX,
startY: e.clientY,
leftVal: e.clientX - me.bar.offsetLeft,
topVal: e.clientY - me.bar.offsetTop
}
console.log(me.startClientXY);
me.mouseMove();
};
this.bindEvent(me.bar, "mousedown", me._mousedown);
};
// 移动端 手指按下
DragBar.prototype.touchStart = function() {
var me = this;
this.removeEvent(me.bar, 'mousedown', me._mousedown);
this.removeEvent(document, 'mouseup', me._mouseup);
me._touchstart = function(e) {
console.log("touchstart", e);
me.startTouchXY = {
touchX: e.touches[0].pageX,
touchY: e.touches[0].pageY,
leftVal: e.touches[0].pageX - me.bar.offsetLeft,
topVal: e.touches[0].pageY - me.bar.offsetTop
};
console.log('touchstart', me.startTouchXY);
me.touchMove();
};
this.bindEvent(me.bar, "touchstart", me._touchstart);
};
// pc端 鼠标移动
DragBar.prototype.mouseMove = function() {
var me = this;
me._mousemove = function(e) {
console.log("mousemove");
me.endClientXY = {
endX: e.clientX,
endY: e.clientY,
barLeft: e.clientX - me.startClientXY.leftVal,
barTop: e.clientY - me.startClientXY.topVal,
}
if (me.endClientXY.barLeft < 0) {
me.endClientXY.barLeft = 0;
} else if (me.endClientXY.barLeft > (me.container.offsetWidth - me.bar.offsetWidth)) {
console.log(me.container.offsetWidth, me.bar.offsetWidth);
console.log(me.endClientXY)
me.endClientXY.barLeft = me.container.offsetWidth - me.bar.offsetWidth;
}
me.mask.style.width = me.endClientXY.barLeft + 'px';
me.bar.style.left = me.endClientXY.barLeft + "px";
console.log("已经走了" + parseInt(me.endClientXY.barLeft / (me.container.offsetWidth - me.bar.offsetWidth) * 100) + "%");
console.log(me.endClientXY);
//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
this.bindEvent(document, "mousemove", me._mousemove)
};
// 移动端 手指移动
DragBar.prototype.touchMove = function() {
var me = this;
this.removeEvent(document, 'mousemove', me._mousemove);
me._touchmove = function(e) {
me.moveTouchXY = {
touchX: e.touches[0].pageX,
touchY: e.touches[0].pageY,
barLeft: e.touches[0].pageX - me.startTouchXY.leftVal,
barTop: e.touches[0].pageY - me.startTouchXY.topVal,
};
if (me.moveTouchXY.barLeft < 0) {
me.moveTouchXY.barLeft = 0;
} else if (me.moveTouchXY.barLeft > (me.container.offsetWidth - me.bar.offsetWidth)) {
me.moveTouchXY.barLeft = me.container.offsetWidth - me.bar.offsetWidth;
}
me.mask.style.width = me.moveTouchXY.barLeft + 'px';
me.bar.style.left = me.moveTouchXY.barLeft + "px";
console.log("已经走了" + parseInt(me.moveTouchXY.barLeft / (me.container.offsetWidth - me.bar.offsetWidth) * 100) + "%");
//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
console.log("touchmove", me.moveTouchXY);
};
this.bindEvent(document, "touchmove", me._touchmove);
};
// pc端鼠标抬起
DragBar.prototype.mouseUp = function() {
var me = this;
me._mouseup = function() {
me.removeEvent(document, "mousemove", me._mousemove);
};
this.bindEvent(document, "mouseup", me._mouseup);
};
// 移动端 手指停止移动
DragBar.prototype.touchEnd = function() {
var me = this;
// 在移动端移除pc端的mouseup事件
this.removeEvent(document, 'mouseup', me._mouseup);
me._touchend = function() {
me.removeEvent(document, 'touchmove', me._mousemove);
};
this.bindEvent(document, "touchend", me._touchend);
};
console.log("开干了");
// 内部初始化
DragBar.init = function(container, options) {
new DragBar(container, options).init();
}
window.DragBar = DragBar;
return window.DragBar;
});
