bwadmin/pear-admin-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新前端

Browse Source
This commit is contained in:
不胜舟
2023-04-06 16:41:48 +08:00
parent 2364ebb519
commit 5d10a304b3
56 changed files with 100137 additions and 95097 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/admin/component/pear/module/menu.js
+180 -83
View File
@@ -1,15 +1,15 @@
layui.define(['table', 'jquery', 'element'], function(exports) {
layui.define(['table', 'jquery', 'element'], function (exports) {
"use strict";
var MOD_NAME = 'menu',
$ = layui.jquery,
element = layui.element;
var pearMenu = function(opt) {
var pearMenu = function (opt) {
this.option = opt;
};
pearMenu.prototype.render = function(opt) {
pearMenu.prototype.render = function (opt) {
var option = {
elem: opt.elem,
@@ -20,67 +20,75 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
defaultOpen: opt.defaultOpen,
defaultSelect: opt.defaultSelect,
control: opt.control,
controlWidth: opt.controlWidth ? opt.controlWidth: 500,
controlWidth: opt.controlWidth ? opt.controlWidth : "auto",
defaultMenu: opt.defaultMenu,
accordion: opt.accordion,
height: opt.height,
theme: opt.theme,
data: opt.data ? opt.data : [],
change: opt.change ? opt.change : function() {},
done: opt.done ? opt.done : function() {}
change: opt.change ? opt.change : function () { },
done: opt.done ? opt.done : function () { }
}
var tempDone = option.done;
option.done = function(){
if (option.control) {
rationalizeHeaderControlWidthAuto(option);
}
tempDone();
}
if (option.async) {
if (option.method === "GET") {
getData(option.url).then(function(data) {
getData(option.url).then(function (data) {
option.data = data;
renderMenu(option);
});
} else {
postData(option.url).then(function(data) {
postData(option.url).then(function (data) {
option.data = data;
renderMenu(option);
});
}
} else {
//renderMenu中需要调用done事件，done事件中需要menu对象，但是此时还未返回menu对象，做个延时提前返回对象
window.setTimeout(function() { renderMenu(option);}, 500);
// 延时返回，和 javascript 执行时序关联
window.setTimeout(function () { renderMenu(option); }, 500);
}
// 处理高度
$("#"+opt.elem).height(option.height)
setTimeout(function(){
$("#"+opt.control+" .control").on("mousewheel DOMMouseScroll", function(event) {
$("#" + opt.elem).height(option.height)
setTimeout(function () {
$("#" + opt.control + " .control").on("mousewheel DOMMouseScroll", function (event) {
var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1)); // firefox
if (delta > 0) {
for (var num = 1; num < 20; num++) {
setTimeout(function() {
if ($("#"+opt.control+" .control ul").css('left').replace("px", "") < 0) {
$("#"+opt.control+" .control ul").css("left", "+=2px");
setTimeout(function () {
if ($("#" + opt.control + " .control ul").css('left').replace("px", "") < 0) {
$("#" + opt.control + " .control ul").css("left", "+=2px");
}
}, 10)
}
} else if (delta < 0) {
if(( (Number)($("#"+opt.control+" .control ul").css("left").replace("px","")) + ($("#"+opt.control+" .control ul").width() - $("#"+opt.control+" .control").width())) > 0){
if (((Number)($("#" + opt.control + " .control ul").css("left").replace("px", "")) + ($("#" + opt.control + " .control ul").width() - $("#" + opt.control + " .control").width())) > 0) {
for (var num = 1; num < 20; num++) {
setTimeout(function() {
$("#"+opt.control+" .control ul").css("left", "-=2px");
setTimeout(function () {
$("#" + opt.control + " .control ul").css("left", "-=2px");
}, 10)
}
}
}
});
},1000)
return new pearMenu(opt);
}, 1000)
return new pearMenu(option);
}
pearMenu.prototype.click = function(clickEvent) {
pearMenu.prototype.click = function (clickEvent) {
var _this = this;
$("body").on("click", "#" + _this.option.elem + " .site-demo-active", function() {
$("body").on("click", "#" + _this.option.elem + " .site-demo-active", function () {
var dom = $(this);
var data = {
menuId: dom.attr("menu-id"),
@@ -98,18 +106,19 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
}
if (doms != null) {
var domss = hash(doms);
if(domss!=null){
if (domss.text() != '') {
data['menuPath'] = domss.find("span").text() + " / " + data['menuPath'];
}}
if (domss != null) {
if (domss.text() != '') {
data['menuPath'] = domss.find("span").text() + " / " + data['menuPath'];
}
}
}
if (domss != null) {
var domsss = hash(domss);
if(domsss!=null){
if (domsss.text() != '') {
data['menuPath'] = domsss.find("span").text() + " / " + data['menuPath'];
}}
if (domsss != null) {
if (domsss.text() != '') {
data['menuPath'] = domsss.find("span").text() + " / " + data['menuPath'];
}
}
}
if ($("#" + _this.option.elem).is(".pear-nav-mini")) {
if (_this.option.accordion) {
@@ -130,14 +139,14 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
return d;
}
pearMenu.prototype.skin = function(skin) {
pearMenu.prototype.skin = function (skin) {
var menu = $(".pear-nav-tree[lay-filter='" + this.option.elem + "']").parent();
menu.removeClass("dark-theme");
menu.removeClass("light-theme");
menu.addClass(skin);
}
pearMenu.prototype.selectItem = function(pearId) {
pearMenu.prototype.selectItem = function (pearId) {
if (this.option.control != false) {
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-side-scroll ").find("ul").css({
display: "none"
@@ -153,32 +162,73 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
$("#" + this.option.control).find("[pear-id='" + controlId + "']").addClass("layui-this");
}
}
if (this.option.accordion == true) {
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-nav-itemed").removeClass(
"layui-nav-itemed");
}
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-this").removeClass(
"layui-this");
if (!$("#" + this.option.elem).is(".pear-nav-mini")) {
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-nav-item").addClass("layui-nav-itemed");
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents("dd").addClass("layui-nav-itemed");
var openEle = null;
var openEleHeight = 0;
$($("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents('.layui-nav-child').get().reverse()).each(function () {
if (!$(this).parent().is('.layui-nav-itemed')) {
if (openEleHeight == 0) {
openEle = $(this);
} else {
$(this).parent().addClass('layui-nav-itemed');
$(this).css({
height: 'auto',
});
}
openEleHeight += $(this).children("dd").length * 48;
}
});
if (this.option.accordion) {
if (openEleHeight > 0) {
var currentDom = openEle.parent().siblings('.layui-nav-itemed').children(".layui-nav-child");
currentDom.animate({
height: "0px"
}, 240, function () {
currentDom.css({
height: "auto"
});
$(this).parent().removeClass("layui-nav-itemed");
$(this).find('.layui-nav-itemed').removeClass("layui-nav-itemed");
});
}
}
if (openEleHeight > 0) {
openEle.parent().addClass("layui-nav-itemed");
openEle.height(0);
openEle.animate({
height: openEleHeight + "px"
}, 240, function () {
$(this).css({ height: 'auto' });
});
}
}
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parent().addClass("layui-this");
}
var activeMenus;
pearMenu.prototype.collaspe = function(time) {
pearMenu.prototype.collapse = function (time) {
var elem = this.option.elem;
var config = this.option;
if ($("#" + this.option.elem).is(".pear-nav-mini")) {
$.each(activeMenus, function(i, item) {
$.each(activeMenus, function (i, item) {
$("#" + elem + " a[menu-id='" + $(this).attr("menu-id") + "']").parent().addClass("layui-nav-itemed");
})
$("#" + this.option.elem).removeClass("pear-nav-mini");
$("#" + this.option.elem).animate({
width: "220px"
}, 150);
}, 180);
isHoverMenu(false, config);
var that = this;
$("#" + this.option.elem)
.promise()
.done(function () {
if (that.option.control) {
rationalizeHeaderControlWidth(that.option);
}
})
} else {
activeMenus = $("#" + this.option.elem).find(".layui-nav-itemed>a");
$("#" + this.option.elem).find(".layui-nav-itemed").removeClass("layui-nav-itemed");
@@ -186,13 +236,22 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
$("#" + this.option.elem).animate({
width: "60px"
}, 400);
isHoverMenu(true, config);
var that = this;
$("#" + this.option.elem)
.promise()
.done(function () {
isHoverMenu(true, config);
if (that.option.control) {
rationalizeHeaderControlWidth(that.option);
}
})
}
}
function getData(url) {
var defer = $.Deferred();
$.get(url + "?fresh=" + Math.random(), function(result) {
var symbol = url.indexOf('?') !== -1 ? '&' : '?';
$.get(url + symbol + "fresh=" + Math.random(), function (result) {
defer.resolve(result)
});
return defer.promise();
@@ -200,9 +259,10 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
function postData(url) {
var defer = $.Deferred();
$.post(url + "?fresh=" + Math.random(), function(result) {
var symbol = url.indexOf('?') !== -1 ? '&' : '?';
$.post(url + symbol + "fresh=" + Math.random(), function (result) {
defer.resolve(result)
});
}, "json");
return defer.promise();
}
@@ -225,7 +285,7 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
function createMenu(option) {
var menuHtml = '<div style="height:100%!important;" class="pear-side-scroll layui-side-scroll ' + option.theme + '"><ul lay-filter="' + option.elem +
'" class="layui-nav arrow pear-menu layui-nav-tree pear-nav-tree">'
$.each(option.data, function(i, item) {
$.each(option.data, function (i, item) {
var content = '<li class="layui-nav-item" >';
if (i == option.defaultOpen) {
content = '<li class="layui-nav-item layui-nav-itemed" >';
@@ -262,14 +322,14 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
}
function createMenuAndControl(option) {
var control = '<div style="width: '+ option.controlWidth +'px;white-space: nowrap;overflow-x: scroll;overflow: hidden;" class="control"><ul class="layui-nav pear-nav-control pc layui-hide-xs" style="width: fit-content;">';
var control = '<div style="width: ' + option.controlWidth + 'px;white-space: nowrap;overflow-x: scroll;overflow: hidden;" class="control"><ul class="layui-nav pear-nav-control pc layui-hide-xs" style="width: fit-content;">';
var controlPe = '<ul class="layui-nav pear-nav-control layui-hide-sm">';
// 声 明 头 部
var menu = '<div class="layui-side-scroll ' + option.theme + '">'
// 开 启 同 步 操 作
var index = 0;
var controlItemPe = '<dl class="layui-nav-child">';
$.each(option.data, function(i, item) {
$.each(option.data, function (i, item) {
var menuItem = '';
var controlItem = '';
if (i === option.defaultMenu) {
@@ -279,14 +339,14 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
'" class="layui-nav arrow layui-nav-tree pear-nav-tree">';
controlPe += '<li class="layui-nav-item"><a class="pe-title" href="javascript:;" >' + item.title + '</a>';
controlItemPe += '<dd pear-href="' + item.href + '" pear-title="' + item.title + '" pear-id="' + item.id +
'"><a href="javascript:void(0);">' + item.title + '</a></dd>';
} else {
controlItem = '<li pear-href="' + item.href + '" pear-title="' + item.title + '" pear-id="' + item.id +
'" class="layui-nav-item"><a href="#">' + item.title + '</a></li>';
menuItem = '<ul style="display:none" pear-id="' + item.id + '" lay-filter="' + option.elem +
'" class="layui-nav arrow layui-nav-tree pear-nav-tree">';
@@ -295,7 +355,7 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
}
index++;
$.each(item.children, function(i, note) {
$.each(item.children, function (i, note) {
// 创 建 每 一 个 菜 单 项
var content = '<li class="layui-nav-item" >';
var href = "javascript:;";
@@ -328,10 +388,10 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
})
controlItemPe += "</li></dl></ul>"
controlPe += controlItemPe;
$("#" + option.control).html(control+"</div>");
$("#" + option.control).html(control + "</div>");
$("#" + option.control).append(controlPe);
$("#" + option.elem).html(menu);
$("#" + option.control + " .pear-nav-control").on("click", "[pear-id]", function() {
$("#" + option.control + " .pear-nav-control").on("click", "[pear-id]", function () {
$("#" + option.elem).find(".pear-nav-tree").css({
display: 'none'
});
@@ -355,7 +415,7 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
// 如 果 嵌 套 不 等 于 空
if (obj.children != null && obj.children.length > 0) {
// 遍 历 子 项 目
$.each(obj.children, function(i, note) {
$.each(obj.children, function (i, note) {
// 创 建 子 项 结 构
content += '<dd>';
var href = "javascript:;";
@@ -391,7 +451,7 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
}
function downShow(option) {
$("body #" + option.elem).on("click", "a[menu-type='0']", function() {
$("body #" + option.elem).on("click", "a[menu-type='0']", function () {
if (!$("#" + option.elem).is(".pear-nav-mini")) {
var superEle = $(this).parent();
var ele = $(this).next('.layui-nav-child');
@@ -399,13 +459,21 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
if ($(this).parent().is(".layui-nav-itemed")) {
if (option.accordion) {
$(this).parent().parent().find(".layui-nav-itemed").removeClass("layui-nav-itemed");
$(this).parent().addClass("layui-nav-itemed");
var currentDom = $(this).parent().siblings('.layui-nav-itemed').children('.layui-nav-child');
currentDom.animate({
height: '0px'
}, 240, function () {
currentDom.css({
height: "auto",
});
$(this).parent().removeClass("layui-nav-itemed");
$(this).find('.layui-nav-itemed').removeClass("layui-nav-itemed");
});
}
ele.height(0);
ele.animate({
height: heights + "px"
}, 200, function() {
}, 240, function () {
ele.css({
height: "auto"
});
@@ -414,7 +482,7 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
$(this).parent().addClass("layui-nav-itemed");
ele.animate({
height: "0px"
}, 200, function() {
}, 240, function () {
ele.css({
height: "auto"
});
@@ -428,8 +496,11 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
/** 二 级 悬 浮 菜 单*/
function isHoverMenu(b, option) {
if (b) {
$("#" + option.elem + ".pear-nav-mini .layui-nav-item,#" + option.elem + ".pear-nav-mini dd").hover(function(e) {
e.stopPropagation();
var navItem = "#" + option.elem + ".pear-nav-mini .layui-nav-item";
var navChildDl = navItem + " .layui-nav-child>dl";
var navChildDd = navItem + " .layui-nav-child>dd";
$(navItem + "," + navChildDd).mouseenter(function () {
var _this = $(this);
_this.siblings().find(".layui-nav-child")
.removeClass("layui-nav-hover").css({
@@ -437,7 +508,6 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
top: 0
});
_this.children(".layui-nav-child").addClass("layui-nav-hover");
_this.closest('.layui-nav-item').data('time') && clearTimeout(_this.closest('.layui-nav-item').data('time'));
var height = $(window).height();
var topLength = _this.offset().top;
var thisHeight = _this.children(".layui-nav-child").height();
@@ -450,25 +520,52 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
}
_this.children(".layui-nav-child").offset({
top: topLength,
left: left + 3
left: left
});
}, function(e) {
e.stopPropagation();
});
$(navItem + "," + navChildDl).mouseleave(function () {
var _this = $(this);
_this.closest('.layui-nav-item').data('time', setTimeout(function() {
_this.closest('.layui-nav-item')
.find(".layui-nav-child")
.removeClass("layui-nav-hover")
.css({
left: 0,
top: 0
});
}, 50));
})
_this.closest('.layui-nav-item')
.find(".layui-nav-child")
.removeClass("layui-nav-hover")
.css({
left: 0,
top: 0
});
});
} else {
$("#" + option.elem + " .layui-nav-item").off('mouseenter').unbind('mouseleave');
$("#" + option.elem + " dd").off('mouseenter').unbind('mouseleave');
}
}
function rationalizeHeaderControlWidth(option) {
var $headerControl = $("#" + option.control);
var $nextEl = $headerControl.next();
var rationalizeWidth;
if ($nextEl.length) {
rationalizeWidth = $nextEl.position().left - $headerControl.position().left;
} else {
rationalizeWidth = $headerControl.parent().innerWidth() - $headerControl.position().left;
}
if (option.controlWidth && rationalizeWidth >= option.controlWidth) {
rationalizeWidth = option.controlWidth;
}
$("#" + option.control + " .control").css({ "width": rationalizeWidth, "transition": "width .15s" });
}
function rationalizeHeaderControlWidthAuto(option){
$(window).on('resize', function () {
rationalizeHeaderControlWidth(option);
})
$(document).ready(function () {
rationalizeHeaderControlWidth(option);
});
}
exports(MOD_NAME, new pearMenu());
})