421 lines
11 KiB
JavaScript
421 lines
11 KiB
JavaScript
layui.define(['jquery', 'element', 'layer', 'loading'], function (exports) {
|
||
"use strict";
|
||
|
||
/**
|
||
* Drawer component
|
||
* */
|
||
var MOD_NAME = 'drawer',
|
||
$ = layui.jquery,
|
||
element = layui.element,
|
||
layer = layui.layer,
|
||
loading = layui.loading;
|
||
|
||
|
||
var drawer = new function () {
|
||
|
||
/**
|
||
* open drawer
|
||
* */
|
||
this.open = function (option) {
|
||
// 默认使用 legacy 模式
|
||
if (option.legacy === undefined) {
|
||
option.legacy = true;
|
||
};
|
||
if (option.legacy) {
|
||
var obj = new mSlider({
|
||
target: option.target,
|
||
dom: option.dom,
|
||
direction: option.direction,
|
||
distance: option.distance,
|
||
time: option.time ? option.time : 0,
|
||
maskClose: option.maskClose,
|
||
callback: option.success
|
||
});
|
||
obj.open();
|
||
return obj;
|
||
} else {
|
||
return layerDrawer(option);
|
||
}
|
||
}
|
||
this.title = layer.title;
|
||
this.style = layer.style;
|
||
this.close = layer.close;
|
||
this.closeAll = layer.closeAll;
|
||
}
|
||
|
||
/**
|
||
*
|
||
* 封装 layer.open
|
||
* type,anim,move,fixed不可用,其它参数和 layer.open 一致
|
||
* @param {LayerOption} option
|
||
* @returns 原生 layer 的 index
|
||
*/
|
||
function layerDrawer(option) {
|
||
var opt = normalizeOption(option)
|
||
if (opt.target) appendToTarget(opt);
|
||
if (opt.url) loadFragment(opt);
|
||
var layerIndex = layer.open(opt);
|
||
|
||
return layerIndex;
|
||
}
|
||
|
||
/**
|
||
* 加载 HTML 片段到 layer content
|
||
* @param {*} option
|
||
*/
|
||
function loadFragment(option) {
|
||
option.success = Aspect(option.success, function (layero, index) {
|
||
var layerID = "#" + layero.attr("id");
|
||
loading.block({
|
||
type: 1,
|
||
elem: layerID,
|
||
msg: ''
|
||
});
|
||
$.ajax({
|
||
url: option.url,
|
||
dataType: "html",
|
||
success: function (result) {
|
||
layero.children('.layui-layer-content').html(result);
|
||
loading.blockRemove(layerID);
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
*将 layer 挂载到指定节点
|
||
* @param {object} opt
|
||
*/
|
||
function appendToTarget(opt) {
|
||
var targetDOM = $(opt.target);
|
||
var contentDOM = $(opt.content);
|
||
contentDOM.appendTo(targetDOM);
|
||
opt.skin = getDrawerAnimationClass(opt.offset, true);
|
||
opt.offset = calcOffset(opt.offset, opt.area, targetDOM);
|
||
// 处理关闭后偶现 DOM 仍显示的问题，layer 的 BUG
|
||
opt.end = Aspect(opt.end, function () {
|
||
contentDOM.css("display", "none");
|
||
})
|
||
if (opt.shade) {
|
||
opt.success = Aspect(opt.success, function (layero, index) {
|
||
var shadeDOM = $("#layui-layer-shade" + index);
|
||
shadeDOM.css("position", "absolute");
|
||
shadeDOM.appendTo(layero.parent());
|
||
})
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 规格化 layer.open 选项，兼容原版 Drawer 所有选项
|
||
* @param {LayerOption} option layer.open 的选项
|
||
* @returns 规格化后的 layer.open 选项
|
||
*/
|
||
function normalizeOption(option) {
|
||
if (option.direction && !option.offset) {
|
||
if (option.direction === "right") {
|
||
option.offset = "r";
|
||
} else if (option.direction === "left") {
|
||
option.offset = "l";
|
||
} else if (option.direction === "top") {
|
||
option.offset = "t";
|
||
} else if (option.direction === "bottom") {
|
||
option.offset = "b";
|
||
} else {
|
||
option.offset = "r";
|
||
}
|
||
}
|
||
if (option.distance && !option.area) {
|
||
option.area = option.distance;
|
||
}
|
||
if (option.dom && !option.content) {
|
||
option.content = $(option.dom);
|
||
}
|
||
if (option.maskClose && option.shadeClose === undefined) {
|
||
option.shadeClose = (option.maskClose + "").toString() !== "false" ? true : false;
|
||
}
|
||
|
||
option.type = 1
|
||
option.anim = -1;
|
||
option.move = false;
|
||
option.fixed = true;
|
||
if (option.iframe) {
|
||
option.type = 2;
|
||
option.content = option.iframe;
|
||
}
|
||
if (option.offset === undefined) option.offset = "r";
|
||
option.area = calcDrawerArea(option.offset, option.area);
|
||
if (option.title === undefined) option.title = false;
|
||
if (option.closeBtn === undefined) option.closeBtn = false;
|
||
if (option.shade === undefined) option.shade = 0.3;
|
||
if (option.shadeClose === undefined) option.shadeClose = true;
|
||
if (option.skin === undefined) option.skin = getDrawerAnimationClass(option.offset);
|
||
if (option.resize === undefined) option.resize = false;
|
||
if (option.success === undefined) option.success = function () { }; // 处理遮罩需要
|
||
if (option.end === undefined) option.end = function () { };
|
||
|
||
return option;
|
||
}
|
||
|
||
/**
|
||
* 计算抽屉宽高
|
||
* @param {string} offset 抽屉方向 l = 左, r = 右, t = 上, b = 下
|
||
* @param {string[] | string} drawerArea 抽屉大小,字符串数组格式：[width, height]，字符串格式：百分比或单位 px。
|
||
* @returns 抽屉宽高数组
|
||
*/
|
||
function calcDrawerArea(offset, drawerArea) {
|
||
if (drawerArea instanceof Array) {
|
||
return drawerArea;
|
||
}
|
||
if (drawerArea === undefined || drawerArea === "auto") {
|
||
drawerArea = "30%";
|
||
}
|
||
if (offset === "l" || offset === "r") {
|
||
return [drawerArea, "100%"];
|
||
} else if (offset === "t" || offset === "b") {
|
||
return ["100%", drawerArea];
|
||
}
|
||
return [drawerArea, "100%"];
|
||
}
|
||
|
||
/**
|
||
* 获取抽屉动画类
|
||
* @param {string} offset 抽屉方向
|
||
* @param {boolean} 是否 absolute 布局
|
||
* @returns 抽屉入场动画类
|
||
*/
|
||
function getDrawerAnimationClass(offset, isAbsolute) {
|
||
var positionAbsoluteClass = "position-absolute ";
|
||
var prefixClass = "pear-drawer pear-drawer-anim layui-anim layer-anim-";
|
||
var suffix = "rl";
|
||
|
||
if (isAbsolute) {
|
||
prefixClass = positionAbsoluteClass + prefixClass;
|
||
}
|
||
if (offset === "l") {
|
||
suffix = "lr";
|
||
} else if (offset === "r") {
|
||
suffix = "rl";
|
||
} else if (offset === "t") {
|
||
suffix = "tb";
|
||
} else if (offset === "b") {
|
||
suffix = "bt";
|
||
}
|
||
return prefixClass + suffix;
|
||
}
|
||
|
||
/**
|
||
* 指定挂载容器重新计算 offset
|
||
* @param {*} offset 位置
|
||
* @param {*} area 范围大小
|
||
* @param {*} targetEl 挂载节点
|
||
* @returns 包含抽屉位置信息的数组，[top,left]
|
||
*/
|
||
function calcOffset(offset, area, targetEl) {
|
||
if (offset === undefined || offset === "l" || offset === "t") {
|
||
offset = "lt";
|
||
} else if (offset === "r") {
|
||
var left;
|
||
if (area instanceof Array) {
|
||
area = area[0];
|
||
}
|
||
if (area.indexOf("%") != -1) {
|
||
left = targetEl.innerWidth() * (1 - area.replace("%", "") / 100);
|
||
} else {
|
||
left = targetEl.innerWidth() - area;
|
||
}
|
||
offset = [0, left];
|
||
} else if (offset === "b") {
|
||
var top;
|
||
if (area instanceof Array) {
|
||
area = area[1];
|
||
}
|
||
if (area.indexOf("%") != -1) {
|
||
top = targetEl.innerHeight() * (1 - area.replace("%", "") / 100);
|
||
} else {
|
||
top = targetEl.innerHeight() - area;
|
||
}
|
||
offset = [top, 0];
|
||
}
|
||
|
||
return offset;
|
||
}
|
||
|
||
/**
|
||
* 简易的切面
|
||
* @param {Function} func 被通知的对象，原函数
|
||
* @param {Function | undefined} before 前置通知
|
||
* @param {Function | undefined} after 后置通知
|
||
* @returns 代理函数
|
||
*/
|
||
function Aspect(target, before, after) {
|
||
function proxyFunc() {
|
||
if (before && typeof before === "function") {
|
||
before.apply(this, arguments)
|
||
}
|
||
target.apply(this, arguments);
|
||
if (after && typeof after === "function") {
|
||
after.apply(this, arguments)
|
||
}
|
||
}
|
||
return proxyFunc;
|
||
}
|
||
|
||
exports(MOD_NAME, drawer);
|
||
});
|
||
|
||
/**
|
||
* 源码
|
||
* */
|
||
(function (b, c) {
|
||
function a(d) {
|
||
this.opts = {
|
||
"target": d.target || "body",
|
||
"direction": d.direction || "left",
|
||
"distance": d.distance || "60%",
|
||
"dom": this.Q(d.dom),
|
||
"time": d.time || "",
|
||
"maskClose": (d.maskClose + "").toString() !== "false" ? true : false,
|
||
"callback": d.callback || ""
|
||
};
|
||
this.rnd = this.rnd();
|
||
this.target = this.opts.target;
|
||
this.dom = this.opts.dom[0];
|
||
this.wrap = "";
|
||
this.inner = "";
|
||
this.mask = "";
|
||
this.init()
|
||
}
|
||
a.prototype = {
|
||
Q: function (d) {
|
||
return document.querySelectorAll(d)
|
||
},
|
||
isMobile: function () {
|
||
return navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i) ? true : false
|
||
},
|
||
addEvent: function (f, e, d) {
|
||
if (f.attachEvent) {
|
||
f.attachEvent("on" + e, d)
|
||
} else {
|
||
f.addEventListener(e, d, false)
|
||
}
|
||
},
|
||
rnd: function () {
|
||
return Math.random().toString(36).substr(2, 6)
|
||
},
|
||
init: function () {
|
||
var g = this;
|
||
if (!g.dom) {
|
||
console.log("未正确绑定弹窗容器");
|
||
return
|
||
}
|
||
g.dom.style.display = "block"; // 兼容 layer 捕获层
|
||
var d = document.createElement("div");
|
||
var e = document.createElement("div");
|
||
var f = document.createElement("div");
|
||
d.setAttribute("class", "mSlider-main ms-" + g.rnd);
|
||
e.setAttribute("class", "mSlider-inner");
|
||
f.setAttribute("class", "mSlider-mask");
|
||
g.Q(g.target)[0].appendChild(d);
|
||
g.Q(".ms-" + g.rnd)[0].appendChild(e);
|
||
g.Q(".ms-" + g.rnd)[0].appendChild(f);
|
||
g.wrap = g.Q(".ms-" + g.rnd)[0];
|
||
g.inner = g.Q(".ms-" + g.rnd + " .mSlider-inner")[0];
|
||
g.mask = g.Q(".ms-" + g.rnd + " .mSlider-mask")[0];
|
||
g.inner.appendChild(g.dom);
|
||
switch (g.opts.direction) {
|
||
case "top":
|
||
g.top = "0";
|
||
g.left = "0";
|
||
g.width = "100%";
|
||
g.height = g.opts.distance;
|
||
g.translate = "0,-100%,0";
|
||
break;
|
||
case "bottom":
|
||
g.bottom = "0";
|
||
g.left = "0";
|
||
g.width = "100%";
|
||
g.height = g.opts.distance;
|
||
g.translate = "0,100%,0";
|
||
break;
|
||
case "right":
|
||
g.top = "0";
|
||
g.right = "0";
|
||
g.width = g.opts.distance;
|
||
g.height = document.documentElement.clientHeight + "px";
|
||
g.translate = "100%,0,0";
|
||
break;
|
||
default:
|
||
g.top = "0";
|
||
g.left = "0";
|
||
g.width = g.opts.distance;
|
||
g.height = document.documentElement.clientHeight + "px";
|
||
g.translate = "-100%,0,0"
|
||
}
|
||
g.wrap.style.display = "none";
|
||
g.wrap.style.position = (g.target === "body" ? "fixed" : "absolute");
|
||
g.wrap.style.top = "0";
|
||
g.wrap.style.left = "0";
|
||
g.wrap.style.width = "100%";
|
||
g.wrap.style.height = "100%";
|
||
g.wrap.style.zIndex = 9999999;
|
||
g.inner.style.position = "absolute";
|
||
g.inner.style.top = g.top;
|
||
g.inner.style.bottom = g.bottom;
|
||
g.inner.style.left = g.left;
|
||
g.inner.style.right = g.right;
|
||
g.inner.style.width = g.width;
|
||
g.inner.style.height = (g.target === "body" ? g.height : "100%");
|
||
g.inner.style.backgroundColor = "#fff";
|
||
g.inner.style.transform = "translate3d(" + g.translate + ")";
|
||
g.inner.style.webkitTransition = "all .2s ease-out";
|
||
g.inner.style.transition = "all .2s ease-out";
|
||
g.inner.style.zIndex = 10000000;
|
||
g.mask.style.width = "100%";
|
||
g.mask.style.height = "100%";
|
||
g.mask.style.opacity = "0.1";
|
||
g.mask.style.backgroundColor = "black";
|
||
g.mask.style.zIndex = "9999998";
|
||
g.mask.style.webkitBackfaceVisibility = "hidden";
|
||
g.events()
|
||
},
|
||
open: function () {
|
||
var d = this;
|
||
d.wrap.style.display = "block";
|
||
setTimeout(function () {
|
||
d.inner.style.transform = "translate3d(0,0,0)";
|
||
d.inner.style.webkitTransform = "translate3d(0,0,0)";
|
||
d.mask.style.opacity = 0.1
|
||
}, 30);
|
||
if (d.opts.time) {
|
||
d.timer = setTimeout(function () {
|
||
d.close()
|
||
}, d.opts.time)
|
||
}
|
||
},
|
||
close: function () {
|
||
var d = this;
|
||
d.timer && clearTimeout(d.timer);
|
||
d.inner.style.webkitTransform = "translate3d(" + d.translate + ")";
|
||
d.inner.style.transform = "translate3d(" + d.translate + ")";
|
||
d.mask.style.opacity = 0;
|
||
setTimeout(function () {
|
||
d.wrap.style.display = "none";
|
||
d.timer = null;
|
||
d.opts.callback && d.opts.callback()
|
||
}, 300)
|
||
},
|
||
events: function () {
|
||
var d = this;
|
||
d.addEvent(d.mask, "touchmove", function (f) {
|
||
f.preventDefault()
|
||
});
|
||
d.addEvent(d.mask, (d.isMobile() ? "touchend" : "click"), function (f) {
|
||
if (d.opts.maskClose) {
|
||
d.close()
|
||
}
|
||
})
|
||
}
|
||
};
|
||
b.mSlider = a
|
||
})(window);
|