master

分支 (2)

标签 (1)

管理

管理

master

develop

dev-0.1移除后台代码

html-box
/
index.js

/* 根路径 */
var APP_HOST = window.location.href;
APP_HOST = APP_HOST.replace('/index.html', '/');

/* 页面高度 */
var APP_HEIGHT = $('.layui-tab-content').height();

/* 选项卡右键 */
var TAB_RIGHT_CLICK_ID;
/* 查找右键信息 */
function findTabsByRightId() {
	let index = -1
	let ids = []
	$.each($(".layui-tab-title li"), function (i) {
		let id = $(this).attr("lay-id")
		if (id === TAB_RIGHT_CLICK_ID) {
			index = i;
		}
		ids.push(id)
	})
	return { index, ids }
}
/* ----------------------ui 切换-------------------------------------- */

/* 切换显示 */
$('#toggleSider').dblclick(function (e) {
	let _header = $('.layui-header');
	let _sider = $('.layui-side');
	let _body = $('.layui-body');
	/* 隐藏header和sider 设置body */
	if (_header.is(':hidden')) {
		_header.show();
		_sider.show();
		_body.css('left', '200px');
	} else {
		_header.hide();
		_sider.hide();
		_body.css('left', '0px');
	}
});

/* ----------------------选项卡和菜单-------------------------------------- */

var element;
var layer;
layui.use(['jquery', 'element', 'layer'], function () {
	element = layui.element;
	layer = layui.layer;
	loadMenu($('#siderMenu'), window.menuJson)
	element.render();

	/* 右键点击 */
	$(".rightmenu li").click(function () {
		if ($(this).hasClass('disabled')) {
			return
		}
		let colseType = $(this).attr("data-type")
		let tabs = findTabsByRightId()
		let ids = tabs.ids
		let index = tabs.index

		switch (colseType) {
			case 'closeLeft':
				ids = ids.slice(0, index)
				removeTabs(ids)
				break;
			case 'closeRight':
				ids = ids.slice(index + 1, ids.length)
				removeTabs(ids)
				break;
			case 'closeOther':
				ids.splice(index, 1)
				ids.map(function (layid) {
					removeTab(layid);
				})
				break;
			case 'closeAll':
				removeTabs(ids)
				break;
			default:
				showError(`未知的关闭类型:${colseType}`);
				break;

		}
		$('.rightmenu').hide();

		/* 移除选项卡 */
		function removeTab(layid) {
			if (layid !== '0') {
				element.tabDelete('noteTab', layid);
			}
		}
		/* 移除多个选项卡 */
		function removeTabs(ids) {
			for (let i in ids) {
				removeTab(ids[i])
			}
		}
	});
});


/* 加载菜单 */
function loadMenu($menu, menuJson) {
	/* 加载菜单列表  */
	console.log('加载菜单...', window.menuJson);
	toLayerMenu($menu, 'left', menuJson);

	/* 	菜单点击 */
	$('.menuAdd').click(function () {
		let othis = $(this);
		let type = othis.data('type');
		menuActive[type] ? menuActive[type].call(this, othis) : '';
	})

	/* 菜单选项卡配置	 */
	const menuActive = {
		/* 选项卡frame */
		createTabFrame: function (title, url, layid) {

			let layTitle = `${title}<i class="layui-icon layui-unselect layui-tab-close" data-id=${layid} >&#x1006;</i>`
			let layContent = `<iframe data-frameid="${layid}" name=${layid}  id=${layid}  src="${url}" frameborder="0" class="layadmin-iframe" width="100%" height="${APP_HEIGHT}"  scrolling="auto"  > </iframe>`
			return {
				title: layTitle,
				content: layContent,
				id: layid
			}
		},
		/* 外部打开 */
		_target: function (othis) {
			let v_url = APP_HOST + othis.data('url');
			window.open(v_url);
		},
		/* 内部打开 */
		_frame: function (othis) {
			let v_id = othis.attr('lay-id');
			if (menuActive.valOpen(v_id)) {
				return;
			}
			let v_url = othis.data('url');

			// v_url 存在才打开, fix bug 20220829
			if (v_url !== undefined && v_url !== null && v_url !== 'undefined') {
				let v_title = othis.data('title');

				if (APP_HOST.startsWith("file://")) {
					let frameUrl = APP_HOST + v_url
					loadUrlPage(v_title, frameUrl, v_id)
				} else {
					/* 加载url */
					$.get(v_url, function (data, status) {
						loadUrlPage(v_title, v_url, v_id)
					}).fail(function () {
						showError(`路径不正确,url:${v_url}`)
						return;
					});
				}
			}

			/* 加载页面 */
			function loadUrlPage(title, url, layid) {
				console.log('open Url==>', url)
				element.tabAdd('noteTab', menuActive.createTabFrame(title, url, layid));
				menuActive.activeOpen(layid);
			}

		},
		/* 激活打开选项 */
		activeOpen: function (layid) {
			let $li = $("#menuTitle").find("li");
			let lastIndex = $li.length - 1 || 0
			/* 关闭当前页面 */
			$li.eq(lastIndex).children("i").on("click", function () {
				// element.tabChange("noteTab", $(this).parent("li").last().data('id'));
				element.tabDelete("noteTab", $(this).data('id'));
			});
			menuActive.customRightClick(layid)
			element.tabChange("noteTab", layid);
		},
		/* 验证是否打开,打开则激活当前选项 */
		valOpen: function (layid) {
			let isOpen = false;
			$('#menuTitle li').each(function () {
				if ($(this).attr('lay-id') == layid) {
					// $(this).addClass('layui-this');
					element.tabChange('noteTab', layid);
					isOpen = true;
					return;
				}
			});
			return isOpen;
		},
		/* 右键点击 */
		customRightClick: function (layid) {
			$(document).click(function () {
				$('.rightmenu').hide();
			})
			/* iframe点击  仅在server模式下生效*/
			document.getElementById(layid).contentWindow.onclick = function () {
				$('.rightmenu', parent.document).hide();
			}
			// $('.layui-tab-title,.layui-tab-title li,.layui-tab-content').click(function () {
			// 	$('.rightmenu').hide();
			// });
			$("#menuTitle").find("li").not('[lay-id=0]').on('contextmenu', function (e) {
				TAB_RIGHT_CLICK_ID = e.currentTarget.attributes['lay-id'].nodeValue
				/* 主页其他元素 左侧/右侧判断 */
				let tabs = findTabsByRightId()
				let ids = tabs.ids
				let index = tabs.index
				$('[data-type=closeLeft]').removeClass('disabled')
				$('[data-type=closeRight]').removeClass('disabled')
				$('[data-type=closeOther]').removeClass('disabled')
				if (index == 1) {
					$('[data-type=closeLeft]').addClass('disabled')
				}
				if (index == ids.length - 1) {
					$('[data-type=closeRight]').addClass('disabled')
				}
				if (ids.length == 2) {
					$('[data-type=closeOther]').addClass('disabled')
				}
				let popupmenu = $(".rightmenu");
				let l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
				let t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
				/* 菜单未隐藏 */
				if (!$('.layui-header').is(':hidden')) {
					l = l - 200
				}
				popupmenu.css({ left: l, top: t }).show();
				return false;
			});
		}
	};
	$(document).bind("contextmenu", function (e) {
		return false
	})

	/**
 *
 * 转换为layerMenu
 * @param {*} $ele   加载元素
 * @param {*} type  left: 左侧菜单 top上侧菜单
 * @param {*} nodes  菜单nodes
 * @param {*} call  回调
 */
	function toLayerMenu($ele, type, nodes, call) {
		$ele.html('');
		let data = forNodes(nodes, type);
		$ele.html(data);
		call && call();
		/**
		 * 处理父节点
		 * @param {*} nodes  节点集合json tree
		 * @param {*} type top/left类型
		 * @returns
		 */
		function forNodes(nodes, type) {
			let r = '';
			for (let i = 0; i < nodes.length; i++) {
				/* 是否打开节点 */
				let open = nodes[i].open;
				/* top展示 还是left展示 */
				if (isDef(open) && open && (type != 'top')) {
					r += ` <li class="layui-nav-item layui-nav-itemed">`;
				} else {
					r += '<li class="layui-nav-item">';
				}

				r += '<a>' + nodes[i].title + '</a>';
				let children = nodes[i].children;
				if (isDef(children)) {
					r += genChild(children);
				}
				r += '</li>';
			}
			return r;
		}
		/**
		 * 获取当前节点结构
		 * @param {*} children
		 * @returns
		 */
		function genChild(children) {
			let r = "";
			r += '<dl class="layui-nav-child">';
			for (let i = 0; i < children.length; i++) {
				/* 自定义图标 */
				let icon = "";
				/* 自定义 */
				let type = '_frame'
				if (isDef(children[i].type)) {
					type = children[i].type
				}
				if (type === '_target') {
					/* 外部图标标识 */
					icon = `<i class="layui-icon" title='外部打开'><i class="icon-signout"></i></i> `;
				}
				r += `<dd> <a class="menuAdd" data-url="${children[i].url}" data-title="${children[i].title}"
					data-type="${type}" lay-id="${uuid()}" >
					  ${children[i].title}&nbsp;&nbsp;${icon}
					</a>`;
				let son = children[i].children;
				if (isDef(son)) {
					r += genChild(son);
				}
				r += '</dd>';
			}
			r += '</dl>';
			return r;
		}
		/* 生成唯一ID */
		function uuid() {
			function S4() {
				return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
			}
			return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
		}
		/* 是否undefined或null */
		function isDef(v) {
			return v !== undefined && v !== null
		}
	}
}
/* ----------------------editor config-------------------------------------- */

/* 加载config信息 */
const container = document.getElementById('jsoneditor')
const options = {
	mode: 'code',
	ace: ace,
	mainMenuBar: false,
	navigationBar: false,
	statusBar: false,
}
const editor = new JSONEditor(container, options, menuJson)


var isDebugMenu = false
/* 复制配置信息 */
$('#note-helper button').click(function () {
	try {
		let newMenu = editor.get();
		let type = $(this).data('type')
		switch (type) {
			case 'copy':
				navigator.clipboard.writeText(JSON.stringify(newMenu, null, 2));
				showOk('已复制')
				break;
			case 'reset':
				editor.set(menuJson)
				if (isDebugMenu) {
					loadMenu($('#siderMenu'), menuJson)
					element.render();
					isDebugMenu = false
				}
				break;
			case 'debug':
				loadMenu($('#siderMenu'), newMenu)
				element.render();
				isDebugMenu = true
				break;
			default:
				showError('未知的操作类型:' + type)
				break;
		}

	} catch (e) {
		console.error('解析json数据异常==>', e)
		showError('解析json数据异常:' + e)
	}
})

/* ----------------------common-------------------------------------- */

/* layer 错误弹框 */
function showError(msg) {
	layer.msg(msg, { icon: 2, time: 2000 })
}
/* layer 正确弹框  */
function showOk(msg) {
	layer.msg(msg, { icon: 1, time: 2000 })
}

/* tips  */
$('*[lay-tips]').on('mouseenter', function () {
	let content = $(this).attr('lay-tips');
	this.index = layer.tips(`<div style="padding: 1px; font-size: 14px; color: #eee;">${content}</div>`, this,
		{ time: -1, maxWidth: 280, tips: [3, '#3A3D49'] });
}).on('mouseleave', function () {
	layer.close(this.index);
});