layui.define(['element'], function (exports) {
let element = layui.element;
const $ = layui.jquery;
let MOD_NAME = 'tabrightmenu';
let RIGHTMENUMOD = function () {
this.v = '1.0.0';
this.author = 'TangHanF';
this.email = 'guofu_gh@163.com';
this.filter = '';//Tab选项卡的事件过滤
};
String.prototype.format = function () {
if (arguments.length == 0) return this;
let param = arguments[0];
let s = this;
if (typeof(param) == 'object') {
for (var key in param) s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
return s;
} else {
for (var i = 0; i < arguments.length; i++) s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
return s;
}
}
function createStyle(ulClassName) {
let style = '.{name} {position: absolute;width: 110px;z-index: 9999;display: none;background-color: #fff;padding: 2px;color: #333;border: 1px solid #eee;border-radius: 2px;cursor: pointer;}.{name} li {text-align: center;display: block;height: 30px;line-height: 32px;}.{name} li:hover {background-color: #666;color: #fff;}'
.format({name: ulClassName});
return style;
}
/**
* 初始化
*/
RIGHTMENUMOD.prototype.render = function (opt) {
createStyle();
if (!opt.container) {
console.error("[ERROR]使用rightmenu组件需要制定'container'属性!");
return;
}
if (!opt.filter) {
console.error("[ERROR]使用rightmenu组件需要制定'filter'属性!");
return;
}
this.filter = opt.filter;
let defaultNavArr = [
{eventName: 'closethis', title: '关闭当前'},
{eventName: 'closeall', title: '关闭所有'},
{eventName: 'closeothers', title: '关闭其它'},
{eventName: 'closeleft', title: '关闭左侧所有'},
{eventName: 'closeright', title: '关闭右侧所有'},
{eventName: 'refresh', title: '刷新当前页'},
];
opt = opt || {};
opt.navArr = opt.navArr || defaultNavArr;
CreateRightMenu(opt);
};
/**
* 创建右键菜单项目
* @param rightMenuConfig
* @constructor
*/
function CreateRightMenu(rightMenuConfig) {
// 使用"filter"属性作为css样式名称
$("").text(createStyle(rightMenuConfig.filter)).appendTo($("head"));
let li = '';
$.each(rightMenuConfig.navArr, function (index, conf) {
// li += '
' + conf.title + '';
li += '{title}'
.format({eventName:conf.eventName,icon:conf.icon?conf.icon:"",title:conf.title});
})
let tmpHtml = ''.format({liStr: li, className: rightMenuConfig.filter})
$(rightMenuConfig.container).after(tmpHtml);
_CustomRightClick(rightMenuConfig);
}
/**
* 绑定右键菜单
* @constructor
*/
function _CustomRightClick(rightMenuConfig) {
//屏蔽Tab右键
$("#" + rightmenuObj.filter + ' li').on('contextmenu', function () {
return false;
})
$('#' + rightmenuObj.filter + ',' + rightmenuObj.filter + ' li').click(function () {
$('.' + rightMenuConfig.filter).hide();
});
console.log("[事件绑定,元素]" + rightmenuObj.filter + ' li')
$("#" + rightmenuObj.filter + ' li').on('contextmenu', function (e) {
let popupmenu = $("." + rightMenuConfig.filter);
let leftValue = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
let topValue = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({left: leftValue, top: topValue}).show();
return false;
});
// 点击空白处隐藏弹出菜单
$(document).click(function (event) {
event.stopPropagation();
$("." + rightMenuConfig.filter).hide();
});
/**
* 注册tab右键菜单点击事件
*/
console.log("[注册tab右键菜单点击事件]" + '.' + rightMenuConfig.filter + ' li');
$('.' + rightMenuConfig.filter + ' li').click(function () {
let currentActiveTabID = $("#" + rightMenuConfig.filter + ">li[class='layui-this']").attr('lay-id');// 获取当前激活的选项卡ID
let tabtitle = $("#" + rightMenuConfig.filter + " li");
let allTabIDArr = [];
$.each(tabtitle, function (i) {
allTabIDArr[i] = $(this).attr("lay-id");
})
// 事件处理
switch ($(this).attr("data-type")) {
case "closethis"://关闭当前,如果开始了tab可关闭,实际意义不大
tabDelete(currentActiveTabID, rightMenuConfig.filter);
break;
case "closeall"://关闭所有
tabDeleteAll(allTabIDArr, rightMenuConfig.filter);
break;
case "closeothers"://关闭非当前
$.each(allTabIDArr, function (i) {
let tmpTabID = allTabIDArr[i];
if (currentActiveTabID != tmpTabID)
tabDelete(tmpTabID, rightMenuConfig.filter);
})
break;
case "closeleft"://关闭左侧全部
let indexCloseleft = allTabIDArr.indexOf(currentActiveTabID);
tabDeleteAll(allTabIDArr.slice(0, indexCloseleft));
break;
case "closeright"://关闭右侧全部
let indexCloseright = allTabIDArr.indexOf(currentActiveTabID);
tabDeleteAll(allTabIDArr.slice(indexCloseright + 1));
break;
case "refresh":
// 重新加载iFrame,实现更新。注意:如果你不是使用的iFrame则无效,具体刷新实现自行处理
// document.getElementById(currentActiveTabID).contentWindow.location.reload(true);
refreshiFrame();
break;
default:
let currentTitle = $("#" + rightMenuConfig.filter + ">li[class='layui-this']").text();
rightMenuConfig.registMethod[$(this).attr("data-type")](currentActiveTabID, currentTitle, rightMenuConfig.container, $(this)[0]);
}
$('.rightmenu').hide();
})
}
let tabDelete = function (id, currentNav) {
console.log("删除的TabID:" + id + ",所属组:" + currentNav);
element.tabDelete(currentNav, id);//删除
}
let tabDeleteAll = function (ids, currentNav) {
$.each(ids, function (i, item) {
element.tabDelete(currentNav, item);
})
}
/**
* 重新加载iFrame,实现更新
* @returns {boolean}
*/
let refreshiFrame = function () {
let $curFrame = $('iframe:visible');
$curFrame.attr("src", $curFrame.attr("src"));
return false;
}
let rightmenuObj = new RIGHTMENUMOD();
exports(MOD_NAME, rightmenuObj);
})