createNewMecToTab.jsp 6.81 KB

Raw Blame History Permalink

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ page import="com.weaver.formmodel.util.StringHelper"%>
<%@page import="com.weaver.formmodel.mobile.plugin.Plugin"%>
<%@page import="com.engine.mobilemode.service.PluginService"%>
<%@page import="com.weaver.formmodel.mobile.utils.MobileCommonUtil"%>
<%@page import="weaver.systeminfo.SystemEnv"%>
<%@page import="weaver.general.Util"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="com.engine.mobilemode.constant.ComponentType"%>
<%@ include file="/mobilemode/init.jsp"%>
<%
JSONArray dataArr = new JSONArray();

List<Plugin> plugins = PluginService.getInstance().loadPlugin();

ComponentType[] compTypes = ComponentType.values();
for(ComponentType componentType : compTypes){
	JSONObject categoryObj = new JSONObject();
	String categoryName = componentType.name();
	categoryObj.put("categoryName", categoryName);
	categoryObj.put("categoryText", componentType.getText(user.getLanguage()));

	JSONArray items = new JSONArray();
	for(int i = 0; i < plugins.size(); i++){
		Plugin plugin = plugins.get(i);
		if(!plugin.isEnabled()){
			continue;
		}
		String type = plugin.getType();
		if(categoryName.equals(type)){
			JSONObject compObj = new JSONObject();
			String pluginId = plugin.getId();
			compObj.put("id", pluginId);
			String text = plugin.getText();

			if(!"custom".equals(plugin.getType())){
				 text = SystemEnv.getHtmlLabelName(Util.getIntValue(plugin.getText()), user.getLanguage());
			}

			compObj.put("text_py", MobileCommonUtil.getPingYin(Util.null2String(text)));
			compObj.put("text", text);
			if(!"Tab".equals(pluginId)){
				items.add(compObj);
			}
		}
	}
	if(componentType == ComponentType.custom && items.isEmpty()){	//如果是自定义分类插件，并且没有插件的时候，分类不显示
		continue;
	}
	categoryObj.put("items", items);
	dataArr.add(categoryObj);
}
%>
<HTML><HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="/mobilemode/css/mec/mec_design_wev8.css" />
<link type="text/css" rel="stylesheet" href="/font/mobilemode/plugin/iconfont.css" />
<link type="text/css" rel="stylesheet" href="/mobilemode/admin/dep/perfect-scrollbar/css/perfect-scrollbar.min.css" />
<script type="text/javascript" src="/mobilemode/admin/dep/perfect-scrollbar/perfect-scrollbar.jquery.min.js"></script>
<style>
*{
	font: 12px Microsoft YaHei;
}
html,body{
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
.mec_content {
	padding: 10px 12px;
	overflow-x:hidden;
	overflow-y: auto;
	height:100%;
	width: 100%;
	box-sizing: border-box;
}
#mec_item_container {
	width: calc(100% + 10px);
    position: relative;
    background-color: #fff;
    padding: 0px 15px 0px 5px;
    color: #222222;
    height: calc(100% - 40px);
    box-sizing: border-box;
}
.mec_item {
	border: 1px solid #fff;
	width: 50px;
	margin: 4px;
}
.mec_items:after {
	content: " ";
	clear: both;
	display: table;
}
.item_sel {
	color: #108EE9;
	border: 1px solid #108EE9;
	background-color: #fdfdfd;
}
.mec_node {
	width: 100%;
}
.mec_node:hover {
	color: #108EE9;
	transition: .3 all ease;
}
.mec_node em{
	margin: 0;
	background: none;
	font-size: 20px;
	line-height: 1.5;
}
.mec_node span{
	width: 100% !important;
	margin: 2px 0 0 2px;
	font-size: 12px;
}
.mec_search {
	padding: 0 3px 10px;
}

.mec_search input {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 26px;
    text-indent: .5em;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background: #fff;
    box-sizing: border-box;
}
.mec_search input:focus {
	outline: 0;
    box-shadow: 0 0 0 2px rgba(16,142,233,.2);
 }
.mec_search input:focus,
.mec_search input:active,
.mec_search input:hover {
	border-color: #49a9ee;
	transition: .3 all ease;
}
.mec_type {
	margin-bottom: 5px;
}
.mec_items {
    border-bottom: 1px solid #ccc;
    margin-bottom: 7px;
}
button {
	margin: 0 10px;
	width: 72px;
    font-size: 11px;
}
.mec_item,
.mec_node,
.mec_node em,
.mec_node span{
	cursor: pointer;
}
</style>
<script>
$(document).ready(function () {
	$(".mec_item").click(function(){
		if(!$(this).hasClass("item_sel")){
			$(this).addClass("item_sel");
		}else{
			$(this).removeClass("item_sel");
		}
	});

	$('.mec_search input').keyup(function(e) {
		var $target = $(e.target),
			text = $target.val().toLowerCase(), $mec_item, $mec_category_container;
		var ismatch = false, text_py, pattern;

		$(".mec_item").each(function() {
			pattern = new RegExp('.*' + text.split('').join('.*') + '.*');
			$mec_item = $(this);
			text_py = $mec_item.data("py") || "";
			ismatch = !!~$mec_item.text().toLowerCase().indexOf(text) ||
				 !!~text_py.toLowerCase().indexOf(text) ||
				 !!text_py.match(pattern);

			$mec_item.toggle(ismatch);
		});

		$('.mec_category_container').show()
			.each(function(index, mec_category_container) {
				$mec_category_container = $(mec_category_container);

				if($mec_category_container.find(".mec_item:visible").length == 0) {
					$mec_category_container.hide();
				}
			});
	}).focus().select();
	$('#mec_item_container').perfectScrollbar();
});

function returnResult(){
	var mecTypes = [];
	$(".item_sel", $("#mec_item_container")).each(function(i){
		var mt = {};
		mt["mec_type"] = $(".mec_node",$(this)).attr("mec_type");
		mecTypes.push(mt);
	});

	if(top && top.callTopDlgHookFn){
		var result = {
			"mecTypes" : $.isEmptyObject(mecTypes) ? "" : JSON.stringify(mecTypes)
		};
		top.callTopDlgHookFn(result);
	}
	onClose();
}

function onOK(){
	returnResult();
}

function onClose(){
	top.closeTopDialog();
}
</script>
</HEAD>
<body class="style_language_<%=user.getLanguage() %>">
<div class="mec_content">
	<div class="mec_search">
		<input type="text" placeholder="<%=SystemEnv.getHtmlLabelName(82529, user.getLanguage())%>"> <!-- 搜索 -->
	</div>
	<div id="mec_item_container">
		<%  for(int i = 0; i < dataArr.size(); i++){
				Object component = dataArr.get(i);
				JSONObject componentObj = JSONObject.fromObject(component);
				JSONArray mecItems = componentObj.getJSONArray("items");
		%>
		<div class="mec_category_container">
			<div class="mec_type"> <%=componentObj.getString("categoryText")%></div>
			<div class="mec_items">
			<% for(int j = 0; j < mecItems.size(); j++){
				Object mecPluginObj = mecItems.get(j);
				JSONObject mecPlugin = JSONObject.fromObject(mecPluginObj);
				String id = Util.null2String(mecPlugin.get("id"));
				String text = Util.null2String(mecPlugin.get("text"));
				String text_py = Util.null2String(mecPlugin.get("text_py"));
			%>
				<div class="mec_item" data-py="<%=text_py%>">
					<div class="mec_node" id="<%=id%>" mec="true" mec_init="false" mec_type="<%=id%>">
						<em class="icon-plugin-default icon-plugin-<%=id%>"></em>
						<span><%=text%></span>
					</div>
				</div>
			<% } %>
			</div>
		</div>
		<% } %>
	</div>
</div>
</body>
</html>