preview.jsp 20.9 KB

Raw Blame History Permalink

<!DOCTYPE html>
<%@page import="weaver.general.Util"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page import="com.weaver.formmodel.mobile.ui.manager.MobileAppUIManager"%>
<%@page import="com.weaver.formmodel.mobile.ui.manager.MobiledeviceManager"%>
<%@page import="com.weaver.formmodel.mobile.types.ClientType"%>
<%@page import="com.weaver.formmodel.mobile.utils.MobileCommonUtil"%>
<%@page import="com.weaver.formmodel.mobile.model.MobileAppBaseInfo"%>
<%@page import="com.weaver.formmodel.mobile.manager.MobileAppBaseManager"%>
<%@page import="com.weaver.formmodel.mobile.ui.model.AppHomepage"%>
<%@page import="com.weaver.formmodel.mobile.ui.manager.MobileAppHomepageManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="com.weaver.formmodel.util.NumberHelper"%>
<%@page import="weaver.systeminfo.SystemEnv"%>
<%@ include file="/mobilemode/admin/init.jsp"%>

<%
int appid = NumberHelper.string2Int(request.getParameter("appid"),0);
int cubeappid = NumberHelper.string2Int(request.getParameter("cubeappid"),0);
int appHomepageId = NumberHelper.string2Int(request.getParameter("appHomepageId"), -1);
int uiid = NumberHelper.string2Int(request.getParameter("uiid"), -1);
String mode = Util.null2String(request.getParameter("mode"));
ClientType clienttype = MobileCommonUtil.getClientType(request);
int mobiledeviceid = MobiledeviceManager.getInstance().getDeviceByClienttype(clienttype);
MobileAppHomepageManager mobileAppHomepageManager=MobileAppHomepageManager.getInstance();
AppHomepage appHomepage;

if(uiid != -1) {

}else if(appHomepageId == -1){
	appHomepage = mobileAppHomepageManager.getAppHomepageByAppid(appid, mobiledeviceid);
	appHomepageId = appHomepage.getId();
}else {
	appHomepage = mobileAppHomepageManager.getAppHomepage(appHomepageId, mobiledeviceid);
	appid = appHomepage.getAppid();
}
MobileAppBaseManager mobileAppBaseManager = MobileAppBaseManager.getInstance();
MobileAppBaseInfo mobileAppBaseInfo = mobileAppBaseManager.get(appid);
MobileAppUIManager mobileAppUIManager=MobileAppUIManager.getInstance();
JSONArray jsonArray=mobileAppUIManager.getFormUiTree(appid);

String ipaddr = Util.null2String(MobileCommonUtil.getRealIp());
String desc = Util.null2String(mobileAppBaseInfo.getDescriptions());
String nodesc = SystemEnv.getHtmlLabelName(127449,user.getLanguage());
%>
<html lang="zh" class="<%="".equals(mode) ? "" : mode + "-mode"%>">

	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=1">
		<link type="text/css" rel="stylesheet" href="/mobilemode/admin/src/common/css/common.css">
		<link href="/mobilemode/js/colorpick/css/colpick_wev8.css" type="text/css"rel="stylesheet">
		<link href="/mobilemode/admin/src/preview/preview_wev8.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<header class="header-wrapper">
			<div class="header-title"><%=!"qs".equals(mode) ? "e-cology | " + MobileCommonUtil.getHtmlLabelName(130567,user.getLanguage(),"移动应用设计器") : MobileCommonUtil.getHtmlLabelName(500149,user.getLanguage(),"ecology | 前端用户中心")%></div>
			<div class="header-menu">
                <div class="divider"></div>
                <div data-directive="refresh" class="refresh"><i class="iconfont icon-refresh"></i></div>
                <div class="scale">
                    <span data-directive="plus"><i class="iconfont icon-plus-light"></i></span>
                    <span data-directive="reset" class="scale-size">100%</span>
                    <span data-directive="minus"><i class="iconfont icon-minu"></i></span>
                </div>
                <div class="tab">
                    <span data-directive="pc"><%=MobileCommonUtil.getHtmlLabelName(504573,user.getLanguage(),"PC端") %></span>
                    <span class="active" data-directive="mobile"><%=MobileCommonUtil.getHtmlLabelName(504574,user.getLanguage(),"移动端") %></span>
                </div>
			</div>
		</header>
		<div class="main-wrapper">
			<div class="left-menu">
				<div class="app-detail">
					<img class="icon" src="<%=mobileAppBaseInfo.getPicpath() %>" />
					<div>
						<span class="name"><%=mobileAppBaseInfo.getAppname() %></span>
						<span class="desc"><%=desc.equals("") ? nodesc : desc %></span>
					</div>
				</div>
				<div class="settings">
					<div class="options">
						<label for="wrapper_type"><%=MobileCommonUtil.getHtmlLabelName(384082,user.getLanguage(),"设备模型")%></label>
						<select id="wrapper_type" class="form-control">
							<option value="iphone5">iPhone 5</option>
							<option value="iphone6" selected>iPhone 6</option>
							<option value="iphone6p">iPhone 6p</option>
							<option value="Galaxy S5">Galaxy S5</option>
							<option value="ipad2">ipad 2</option>
							<option value="none">none</option>
						</select>
						<label><%=MobileCommonUtil.getHtmlLabelName(503072,user.getLanguage(),"主题颜色")%></label>
						<div class="color-picker">
							<div class="color-list">
								<span> </span>
								<span> </span>
								<span> </span>
								<span> </span>
								<span> </span>
								<span> </span>
							</div>
							<div id="colorBox">
								<span></span>
							</div>
						</div>
					</div>
					<div class="platform">
						<label><%=SystemEnv.getHtmlLabelName(128647,user.getLanguage())%></label>
						<div class="multi-switch">
							<span><input type="checkbox" name="e-mobile" /><span></span>e-mobile</span></span>
							<span><input type="checkbox" name="wechat" /><span><%=MobileCommonUtil.getHtmlLabelName(32638,user.getLanguage(),"微信")%></span></span>
							<span><input type="checkbox" name="dingding" /><span></span><%=MobileCommonUtil.getHtmlLabelName(128649,user.getLanguage(),"钉钉")%></span></span>
							<span><input type="checkbox" name="browser" /><span></span>Safari</span></span>
						</div>
					</div>
					<div id="qr">
						<label><%=MobileCommonUtil.getHtmlLabelName(384081,user.getLanguage(),"扫码预览")%></label>
						<canvas></canvas>
					</div>
				</div>
				<div class="pages-wrapper">
					<div class="customer-page">
						<ul id="pages" class="pages-tree"></ul>
					</div>
				</div>
				<div class="arrow">
				</div>
			</div>
			<div class="container">
				<div id="phone-type"><%=MobileCommonUtil.getHtmlLabelName(384082,user.getLanguage(),"设备模型")%><span>:</span><span></span></div>
				<div id="wrapper" class="phone" data-scale="1">
					<span class="border"></span>
					<div class="header">
						<span class="camera"></span>
						<!-- 传感器 -->
						<span class="sensor"></span>
						<span class="sensor2"></span>
						<span class="speaker"></span>
					</div>
					<div class="top-bar"></div>
					<div class="bottom-bar"></div>
					<div class="buttons power-button"></div>
					<div class="buttons voice-toogle"></div>
					<div class="buttons voice-plus"></div>
					<div class="buttons voice-minus"></div>

					<div class="screen">
						<div class="headline e-mobile">
							<div class="headline-time"></div>
							<div class="net"></div>
							<span class="operators">中国移动</span>
							<div class="electricity">
								80%
							</div>
							<div class="battery"></div>
						</div>
						<div class="url-field">
							<input id="input-url" type="text"/>
							<span id="btn-refresh"></span>
						</div>
						<div class="mobile-content-wrapper">
							<div class="mobile-header">
								<div class="header-left-button"><%=MobileCommonUtil.getHtmlLabelName(384083,user.getLanguage(),"返回")%></div>
								<div class="header-app-name"><%=mobileAppBaseInfo.getAppname() %></div>
								<div class="header-right-button"></div>
							</div>
							<div class="mobile-content"><iframe id="mobile_content"></iframe></div>
						</div>
						<div class="loading">
							<div></div>
						</div>
					</div>
					<div class="home-button">
						<span></span>
					</div>
				</div>
			</div>
		</div>
		<script src="/mobilemode/js/ueditor/third-party/jquery-1.10.2.min_wev8.js" type="text/javascript"></script>
		<script src="/mobilemode/js/colorpick/colpick_wev8.js" type="text/javascript"></script>
		<script type="text/javascript">
			var platformV = null;
			var themeColorV = null;
			var qrCodeUrl = "";
			var ipaddr = (function (ipaddr) {
				var hostname = location.hostname.toLowerCase();
				var port = location.port;
				var hostaddr = location.protocol + "//" + location.host;
				if (hostname == '127.0.0.1' || hostname == 'localhost') {
					hostaddr = ipaddr ? (location.protocol + "//" + ipaddr + (port ? ":" + port : "")) : hostaddr;
				}

				return hostaddr;
			})("<%=ipaddr%>");

			(function() {
				var settings = {
					view : {
						dblClickExpand : false,
						showIcon : true,
						nameIsHTML: true
					},
					data : {
						simpleData : {
							enable : true
						}
					},
					callback : {
						onClick : function(e, treeId, treeNode) {
							$.fn.zTree.getZTreeObj(treeId).expandNode(treeNode);
						}
					}
				},
				zNodes = <%=jsonArray.toString()%>,
				location = window.location;

				require(["switcher"], function() {
					var $platform = $(".platform");

					$platform.switcher()
						.find(".multi-switch").css("visibility", "visible")
						.find("input").on("click", function() {
							$(".screen").attr("data-platform", this.name || "");
						});
					$platform.find(":checked").trigger("click");
				});

				function qrCode(url){
					require(["jquery.qrcode"], function() {
						var $qrcode = $("#qr");

						$qrcode.find("canvas").remove();
						$qrcode.qrcode(url);
					});
				}

				/* 浏览器地址栏 效果 */
				$("#input-url").off("focus.url")
					.on("focus.url", function() {
						var that = $(this);

						that.val( formatUrl( that.data("url") ) );
						$("#btn-refresh").hide();
					}).off("focusout.url").on("focusout.url", function() {
						var that = $(this),
							url = formatUrl( that.data("url"), true, true ),
							index = url.indexOf('/');

						that.val( index != -1 ? url.substring(0, index ) : url );
						$("#btn-refresh").show();
					}).off("keyup.url").on("keyup.url", function(e) {
						var that = $(this);

						if(e.keyCode == 13) {
							that.data("url", that.val());
							$("#mobile_content").attr("src", that.val());
							that.val( formatUrl(that.val(), true, true) );
						}
					}).val( formatUrl(location.host, true) ).data("url", location.href);

				$(".url-field").off("click.refresh", "span").on("click.refresh", "span", function() {
					var iframe = $("#mobile_content");
					iframe.attr("src", iframe.attr("src"));
				});

				function formatUrl(url, isRemove3W, isRemoveProtocol) {
					if(!url) return;

					if(isRemove3W) {
						url = url.replace("www.", "");
					}

					if(isRemoveProtocol) {
						url = url.replace(/^http:\/\/|https:\/\//g, "");
					}

					return url;
				}

				/* wrapper change */
				$("#wrapper_type").on("change.type", function() {
					var className = this.value.replace(" ", "_"),
						iframe = $('#mobile_content');

					$(document.body).attr("class", className);
					setPreviewConfig({"wrapperType" : this.value });
					$("#phone-type").find(":last-child").text(this.value);
					setTimeout(function() {
						var src = iframe.attr('src');

						toggleBackBtn(false);
						src && iframe.attr('src', src.replace(/_preview=.*/, '_preview='+ platformV));
					},0);
				});

				/* background color change function */
				$(".color-picker").off("click.colorChange", "span")
					.on("click.colorChange", "span", function() {
							var $ele = $(this),
								themeColor = $ele.css("background-color");
							var databg = $ele.data("bg");

							changeTheme(themeColor);
							$ele.addClass("active").siblings().removeClass("active");
							$("#colorBox").css("background", themeColor);
							setPreviewConfig( {
								"themeColor" : themeColor,
								"bgIndex" : $ele.prevAll().length
							});
						});

				/* color box */
				$("#colorBox").colpick( {
					colorScheme : 'dark',
					onChange : function(hsb, hex) {
						$("#colorBox").css("background", "#" + hex);
					},
					onSubmit : function(hsb, hex, rgb) {
						rgb = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b +')';
						$("#colorBox").css("background-color", rgb);
						$(".color-picker span").removeClass("active");
						changeTheme(rgb);
						setPreviewConfig({"themeColor" : rgb, "bgIndex" : -1 });
					}
				}).off("keyup.color").on("keyup.color", function() {
					$(this).colpickSetColor(this.value);
				});

				/* scale function */
				$(".header-menu").off("click.menu", "[data-directive]")
					.on("click.menu", "[data-directive]", function() {
						var phone = $(".phone"),
							leftMenu = $(".left-menu"),
							scale = parseFloat(phone.data("scale") || 1),
							iframe = $('#mobile_content'),
							type = $(this).data('directive');

						switch (type) {
							case 'plus':
								scale += 0.1;
								scale = scale > 1.2 ? 1.2 : scale;
								break;
							case 'minus':
								scale -= 0.1;
								scale = scale < 0.6 ? 0.6 : scale;
								break;
							case 'refresh':
								$('.loading').show();
								iframe.attr('src', iframe.attr('src').replace(/(?=mTheme=)([^&]+)/, 'mTheme=' + encodeURIComponent(themeColorV)).replace(/_preview=.*/, '_preview='+ platformV));
								return;
							case 'pc':
							    location.href = '/spa/cube/engine.html#/cubeengine/app/view?appid='+<%=cubeappid %>
							    return;
							default:
								scale = 1;
								break;
							}

						phone.data("scale", scale).css("transform", 'scale(' + scale + ',' + scale + ')');
						setPreviewConfig( {"scale" : scale});

						$(".scale-size").text(Math.round(scale*100)+"%");
					});

				/*
				** 当页面缩小到手机壳边距，自动收缩左边菜单栏
				*/
				$(window).off('resize.toggle')
					.on("resize.toggle", function() {
						toggleForResize();
					});

				function toggleForResize(callback) {
					var left, $wrapper;

					if(callback) {
						return setTimeout(function() {
							callback();
						}, 200);
					}

					$wrapper = $("#wrapper");
					left = 380 + $wrapper.outerWidth();  // 380 => $wrapper.offset().left
					$(".left-menu").toggleClass("shrink", $("body").outerWidth() < left);
				}

				$(".arrow").on("click", function() {
					var $that= $(this);
					$(".left-menu").toggleClass("shrink");
					setTimeout(function() { // transition 300ms
						$that.toggleClass("right");
					}, 300);
				})

				$(".mobile-header .header-left-button").on("click", function() {
					history.go(-1);
				});

				$("#mobile_content").load(function() {
					$(".loading").hide();
					toggleClientHeader(true);
					onBackChange.call(this);
				});

				window.initMobileContent = function(url) {
					$(".loading").show();
					$("#mobile_content").attr("src", url);
					toggleClientHeader();
				};

				function toggleClientHeader(isActive) {
					$(".mobile-header").toggleClass("active", !!isActive);
				}

				function toggleBackBtn(isshow) {
					$(".mobile-header .header-left-button").toggle(!!isshow);
				}

				function toggleTitle(title){
				    $(".mobile-header .header-app-name").html(title);
				}

				function onBackChange() {
					var win = this.contentWindow;

					win.Loader.onFinished = function() {
						win.require(['main'], function () {
							var stack = win.require("pageStack");
							var Mobilebone = win.require("mobilebone");
							var callback = Mobilebone.callback;

							Mobilebone.callback = function (pageInto, pageOut, options, back) {
								callback.apply(win.Mobilebone, arguments);

								var isTabChange = $(pageInto).hasClass("tabpanel") && $(pageOut).hasClass("tabpanel");
								if (!isTabChange) {//非标签栏tab之间切换
								    //切换页面时改变标题
					                var pageTitle = pageInto.getAttribute("data-title") || "";
					                toggleTitle(pageTitle);
								}

								var len = stack.getAllPrevPages().length;

								toggleBackBtn(len);
							};
						});
					};
				}

				window.openHomepage = function(id){
                    var treeObj = $.fn.zTree.getZTreeObj("pages");
                    var selectedNode = treeObj.getNodeByParam("id", "S" + id, null);
                    var uitype = selectedNode && String(selectedNode.uitype);
                    var isDisplayOrEditLayout = uitype === '1' || uitype === '2';
                    var billIdParams = isDisplayOrEditLayout ? '&billid=a898e5d51ea4439095c86ed1b05e3bcb' : '';
					var baseUrl = "/mobilemode/mobile/view.html?appHomepageId=" + id + billIdParams + "&mTheme=" + encodeURIComponent(themeColorV) + "&_logEnabled=false";
					var url = baseUrl + "&_preview=" + platformV;

					$.ajax({
						url: "/api/mobilemode/admin/designer/generateQRCodeUrl",
						data: { appHomepageId: id },
						dataType: "json"
					}).done(function (res) {
						var mToken = res.data.mToken;
						qrCodeUrl = ipaddr + baseUrl + "&mTokenFrom=QRCode&mToken=" + mToken + billIdParams;
						qrCode(qrCodeUrl);
					});

					initMobileContent(url);
				};

				window.openAppUi = function(id,entityid) {
					var baseUrl = "/mobilemode/formbaseview.jsp?uiid=" + id;
					var url = baseUrl + "&_preview="+platformV;
					qrCodeUrl = ipaddr + baseUrl + "&noLogin=1";
					qrCode(qrCodeUrl);
					initMobileContent(url);
				};

				/*private method*/
				function initPageAction() {
					showHeadlineTime();
					initPreviewConfig();
				}

				/*
				** 设置当前时间显示格式
				** 格式如: 上午10:02
				*/
				function setCurrentTimeForHeadline() {
					var date = new Date(),
						hours = date.getHours(),
						minutes = date.getMinutes().toString(),
						timeArea = hours < 12 ? '上午 ' : '下午 ';

					hours = hours <= 12 ? hours : Math.abs(hours - 12);
					$(".headline-time").text(
							timeArea + hours + ":" + minutes.replace(/^(\d{1}$)/g, "0$1"));
				}

				/*
				** 动态显示手机头部时间
				** 刷新频率为1分钟
				*/
				function showHeadlineTime() {
					setCurrentTimeForHeadline();
					setInterval(function() {
						setCurrentTimeForHeadline();
					}, 1000 * 60);
				}

				function initPreviewConfig() {
					var $body = $("body"),
						$wrapperType = $("#wrapper_type"),
						config = JSON.parse(getPreviewConfig()) || {
								wrapperType : $wrapperType.val(),
								platform : "e-mobile",
								bgIndex : 0,
								scale : "1"
							},
						type = config.wrapperType,
						themeColor = config.themeColor,
						bgIndex = config.bgIndex,
						platform = config.platform,
						scale = config.scale;

					if (bgIndex != -1) {
						$(".color-list").find("span").eq(bgIndex).addClass("active");
					}

					$wrapperType.val(type).trigger("change");
					$body.attr("class", type.replace(" ", "_"));
					if(!themeColor){
						themeColor = $(".color-list").find("span").eq(bgIndex).css("background-color");
					}
					$("#colorBox").css("background-color", themeColor);
					changeTheme(themeColor, true);
					$(".platform span").removeClass();
					platformV = platform;
					$("input[name='" + platform + "']").click();
					$(".phone").data("scale", scale).css("transform",
							'scale(' + scale + ',' + scale + ')');
					setPreviewConfig(config);

					$(".scale-size").text(Math.round(scale*100)+"%");
				}

				function setPreviewConfig(config) {
					var previewConfig = JSON.parse(getPreviewConfig()) || {};

					previewConfig = JSON.stringify($.extend(previewConfig, config));

					return sessionStorage
							&& sessionStorage.setItem("PreviewConfig", previewConfig);
				}

				function getPreviewConfig() {
					return sessionStorage && sessionStorage.getItem("PreviewConfig");
				}

				function changeTheme(themeColor, frameNotInit){
					themeColorV = themeColor;
					document.querySelector('.screen').style.setProperty('--themeColor', themeColor);
					try{
						if(frameNotInit){
							return;
						}
						var frameDoc = $("#mobile_content")[0].contentWindow.document;
						frameDoc.querySelector(':root').style.setProperty('--themeColor', themeColor);
					}catch(e){console.log(e);}

					if(qrCodeUrl){
						qrCodeUrl = qrCodeUrl.replace(/(?=mTheme=)([^&]+)/, 'mTheme=' + encodeURIComponent(themeColorV))
						qrCode(qrCodeUrl);
					}
				}

				/*mock page list*/
				var uiid = <%=uiid%>;
				require(["ztree"], function() {
					var $pages = $("#pages"), treeObj;

					$.fn.zTree.init($pages, settings, zNodes);
					treeObj = $.fn.zTree.getZTreeObj("pages");
					treeObj.expandAll(true);	//展开全部

					var selectedNode = treeObj.getNodeByParam("id", uiid != -1 ? uiid : "S<%=appHomepageId%>", null);

					treeObj.selectNode(selectedNode, true, true);
					treeObj.setting.callback.onClick(null, treeObj.setting.treeId, selectedNode);//调用事件

					toggleForResize(function() {
						if(uiid != -1) return openAppUi(uiid);

						openHomepage("<%=appHomepageId%>");
					});
				});

				require(["scroll"], function(Scroll) {
					new Scroll("#pages");
				});

				initPageAction();
			})()
		</script>
	</body>
</html>