You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1142 lines
37 KiB
1142 lines
37 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>表单设计IDE</title>
|
|
<script type="text/javascript" src="../../theme/bs/core/js/lib/ace/ace.js"></script>
|
|
<script type="text/javascript" src="../../theme/bs/core/js/wdk_bs.js"></script>
|
|
<style>
|
|
html,body{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
.nav-tabs>li>a{
|
|
padding:5px;
|
|
}
|
|
.ide-bottom{
|
|
position:fixed;
|
|
bottom:0px;
|
|
left:0px;
|
|
right:0px;
|
|
height:20px;
|
|
background-color:#ddd;
|
|
}
|
|
.ide-middle{
|
|
width:100%;
|
|
height:100%;
|
|
padding:0px 0px 20px 0px;
|
|
background-color:#f5f5f5;
|
|
}
|
|
.ide-project{
|
|
position:absolute;
|
|
height:100%;
|
|
width:200px;
|
|
left:0px;
|
|
border-right:1px solid #ddd;
|
|
}
|
|
.ide-top{
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
right:0px;
|
|
height:32px;
|
|
border-bottom:1px solid #ddd;
|
|
}
|
|
#projectTree{
|
|
position:absolute;
|
|
top:35px;
|
|
left:0px;
|
|
right:0px;
|
|
bottom:0px;
|
|
overflow:auto;
|
|
}
|
|
.ide-ctrl-prop{
|
|
position:absolute;
|
|
height:100%;
|
|
width:250px;
|
|
right:0px;
|
|
border-left:1px solid #ddd;
|
|
}
|
|
.ide-ctrl,.ide-prop{
|
|
width:100%;
|
|
height:50%;
|
|
padding:0px 2px;
|
|
border-bottom:1px solid #ddd;
|
|
}
|
|
#ctrl_page .list-group-item{
|
|
padding:5px 8px;
|
|
}
|
|
#ctrl_page,#busi_ctrl_page,#prop_page,#event_page{
|
|
overflow:auto;
|
|
}
|
|
.list-group-item .glyphicon{
|
|
float:right;
|
|
}
|
|
|
|
.ide-ctrl .nav-tabs-content,.ide-prop .nav-tabs-content{
|
|
padding:0px 2px;
|
|
}
|
|
.ide-main{
|
|
position:absolute;
|
|
left:200px;
|
|
right:250px;
|
|
height:100%;
|
|
overflow:auto;
|
|
}
|
|
.ide-ctrl-desc,.ide-prop-desc{
|
|
overflow: auto;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 30px;
|
|
bottom: 0px;
|
|
border-left:1px solid #ddd;
|
|
border-right:1px solid #ddd;
|
|
}
|
|
.ide-main .nav-tabs-content,.ide-ctrl .nav-tabs-content,.ide-prop .nav-tabs-content{
|
|
overflow: auto;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 31px;
|
|
}
|
|
.input-group{
|
|
width:100%;
|
|
}
|
|
.input-group-addon{
|
|
width:40%;
|
|
}
|
|
.ide-ctrl .nav-tabs-content,.ide-prop .nav-tabs-content{
|
|
bottom:30px;
|
|
}
|
|
.ide-main .nav-tabs-content{
|
|
bottom: 0px;
|
|
overflow: hidden;
|
|
}
|
|
#design_frame{
|
|
overflow:auto;
|
|
padding:5px;
|
|
background-color:#c0c0c0;
|
|
}
|
|
.ide-project-state{
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
bottom:0px;
|
|
width:200px;
|
|
text-align:right;
|
|
border-right:1px solid #bbb;
|
|
}
|
|
.ide-main-state{
|
|
position:absolute;
|
|
left:200px;
|
|
top:0px;
|
|
bottom:0px;
|
|
text-align:right;
|
|
}
|
|
#main-tabs .tab-pane>div{
|
|
height:100%;
|
|
width:100%;
|
|
}
|
|
.dropdown-menu .glyphicon{
|
|
margin-right:10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="ide-middle">
|
|
<div class="rel-con">
|
|
<div class="ide-project">
|
|
<div class="rel-con">
|
|
<div class="ide-top">
|
|
<div class="btn-group" role="group">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
文件 <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="javascript:save();"><span class="glyphicon glyphicon-floppy-save"></span>保存</a></li>
|
|
<li><a href="javascript:import();"><span class="glyphicon glyphicon-import"></span>导入</a></li>
|
|
<li><a href="javascript:import();"><span class="glyphicon glyphicon-export"></span>发布</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
新建 <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="javascript:addSystem();"><span class="glyphicon glyphicon-list-alt"></span>系统</a></li>
|
|
<li><a href="javascript:addPackage();"><span class="glyphicon glyphicon-folder-open"></span>目录</a></li>
|
|
<li><a href="javascript:addFile();"><span class="glyphicon glyphicon-open-file"></span>文件</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
编辑 <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="javascript:copy();"><span class="glyphicon glyphicon-copy"></span>复制</a></li>
|
|
<li><a href="javascript:paste();"><span class="glyphicon glyphicon-paste"></span>粘贴</a></li>
|
|
<li><a href="javascript:del();"><span class="glyphicon glyphicon-remove"></span>删除</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="projectTree" class="ztree" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ide-main">
|
|
<div class="rel-con" id="main-tabs">
|
|
<div style="display:none;">
|
|
<iframe id="design_frame" src="about:blank"></iframe>
|
|
<div id="html_page" style="height:100%;"></div>
|
|
<div id="css_page" style="height:100%;"></div>
|
|
<div id="js_page" style="height:100%;"></div>
|
|
<div id="preview_page" style="height:100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ide-ctrl-prop">
|
|
<div class="ide-ctrl">
|
|
<div class="rel-con">
|
|
<ul class="nav nav-tabs" tabdrop="false">
|
|
<li role="presentation" class="active" tab-target="layout_page">
|
|
<a href="javascript:void(0);">布局</a>
|
|
</li>
|
|
<li role="presentation" tab-target="ctrl_page">
|
|
<a href="javascript:void(0);">控件</a>
|
|
</li>
|
|
<li role="presentation" tab-target="busi_ctrl_page">
|
|
<a href="javascript:void(0);">业务组件</a>
|
|
</li>
|
|
<li role="presentation" tab-target="data_ctrl_page">
|
|
<a href="javascript:void(0);">数据组件</a>
|
|
</li>
|
|
</ul>
|
|
<div class="nav-tabs-content tab-content content">
|
|
<div id="layout_page" class="tab-pane active">
|
|
<div id="layoutTree" class="ztree" >
|
|
</div>
|
|
</div>
|
|
<div id="ctrl_page" class="tab-pane active">
|
|
<div id="ctrlTree" class="ztree" >
|
|
</div>
|
|
</div>
|
|
<div id="busi_ctrl_page" class="tab-pane">
|
|
<div id="busi_ctrlTree" class="ztree" >
|
|
</div>
|
|
</div>
|
|
<div id="data_ctrl_page" class="tab-pane">
|
|
<div id="data_ctrlTree" class="ztree" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ide-ctrl-desc">说明</div>
|
|
</div>
|
|
</div>
|
|
<div class="ide-prop">
|
|
<div class="rel-con">
|
|
<ul class="nav nav-tabs">
|
|
<li role="presentation" class="active" tab-target="prop_page"><a href="javascript:void(0);">属性</a></li>
|
|
<li role="presentation" tab-target="event_page"><a href="javascript:void(0);">事件</a></li>
|
|
</ul>
|
|
<div class="nav-tabs-content tab-content content">
|
|
<div id="prop_page" class="tab-pane active">
|
|
</div>
|
|
<div id="event_page" class="tab-pane"></div>
|
|
</div>
|
|
<div class="ide-prop-desc">说明</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ide-bottom">
|
|
<div class="rel-con">
|
|
<div class="ide-project-state"></div>
|
|
<div class="ide-main-state"></div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var global={};
|
|
var csseditor,htmleditor,jseditor;
|
|
$(function(){
|
|
_initTabs();
|
|
/*初始化目录树*/
|
|
$.ajax({
|
|
url:'wdk?action=form.common&method=getPageTree&ajaxparam='+new Date().getTime(),
|
|
method:"post",
|
|
data:{},
|
|
success:function(result) {
|
|
$.tree({
|
|
id:'projectTree',
|
|
expandall:false,
|
|
data:$.str2json(result),
|
|
onDblClick:function(e,treeid,node){
|
|
if(node){
|
|
var path=node.text;
|
|
node=node.getParentNode();
|
|
while(node!=null){
|
|
path=node.text+"/"+path;
|
|
node=node.getParentNode();
|
|
}
|
|
path=path.substring(path.indexOf("/"));
|
|
editfile(path);
|
|
}
|
|
},
|
|
onClick:function(e,treeid,node){
|
|
if(node){
|
|
var path=node.text;
|
|
node=node.getParentNode();
|
|
while(node!=null){
|
|
path=node.text+"/"+path;
|
|
node=node.getParentNode();
|
|
}
|
|
path=path.substring(path.indexOf("/"));
|
|
|
|
if(path.indexOf(".")>=0){
|
|
path=path.substring(0,path.lastIndexOf("/"))+"/";
|
|
}else{
|
|
path=path+"/";
|
|
}
|
|
if(path.indexOf("/")!=0){
|
|
path="/";
|
|
}
|
|
$(".ide-main-state").text(path);
|
|
global.path=path;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
error:function(result){
|
|
alert('网络错误！result='+result);
|
|
}
|
|
});
|
|
var tabsid = $.tab({
|
|
containerid:'main-tabs',
|
|
tabs:[
|
|
{tabcode:'design_frame',title:'设计',closable:false,
|
|
body:$("#design_frame")},
|
|
{tabcode:'html_page',title:'网页',closable:false,
|
|
body:$("#html_page")},
|
|
{tabcode:'css_page',title:'CSS',closable:false,
|
|
body:$("#css_page")},
|
|
{tabcode:'js_page',title:'JS',closable:false,
|
|
body:$("#js_page")},
|
|
{tabcode:'preview_page',title:'预览',closable:false,
|
|
body:$("#preview_page")}
|
|
]
|
|
});
|
|
|
|
/*初始化布局树*/
|
|
$.ajax({
|
|
url:"wdk/pb/formIDE/layouts.json",
|
|
dataType:"json",
|
|
success:function(data){
|
|
$.tree({
|
|
id:'layoutTree',
|
|
expandall:true,
|
|
data:data
|
|
});
|
|
}
|
|
});
|
|
/*初始化控件树*/
|
|
$.ajax({
|
|
url:'wdk?action=form.common&method=getControlTree&ajaxparam='+new Date().getTime(),
|
|
method:"post",
|
|
data:{
|
|
controlType:"1"
|
|
},
|
|
success:function(data){
|
|
data=$.str2json(data);
|
|
$.tree({
|
|
id:'ctrlTree',
|
|
expandall:true,
|
|
data:data.ctrltree,
|
|
onDblClick:function(event, treeId, treeNode){
|
|
if(treeNode){
|
|
additem(treeNode);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
/*初始化业务组件树*/
|
|
$.ajax({
|
|
url:"wdk/pb/formIDE/busi_ctrls.json",
|
|
dataType:"json",
|
|
success:function(data){
|
|
$.tree({
|
|
id:'busi_ctrlTree',
|
|
expandall:true,
|
|
data:data
|
|
});
|
|
}
|
|
});
|
|
/*初始化数据组件树*/
|
|
|
|
$.ajax({
|
|
url:'wdk?action=form.common&method=getDataObjectList&ajaxparam='+new Date().getTime(),
|
|
method:"post",
|
|
data:{
|
|
},
|
|
success:function(data){
|
|
data=$.str2json(data);
|
|
console.log(data);
|
|
/*$.tree({
|
|
id:'data_ctrlTree',
|
|
expandall:true,
|
|
data:data.ctrltree,
|
|
onDblClick:function(event, treeId, treeNode){
|
|
if(treeNode){
|
|
additem(treeNode);
|
|
}
|
|
}
|
|
});*/
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url:'wdk?action=form.common&method=getDataColumnList&ajaxparam='+new Date().getTime(),
|
|
method:"post",
|
|
data:{
|
|
tableName:"UC_UA_ROLE"
|
|
},
|
|
success:function(data){
|
|
data=$.str2json(data);
|
|
console.log(data);
|
|
/*$.tree({
|
|
id:'data_ctrlTree',
|
|
expandall:true,
|
|
data:data.ctrltree,
|
|
onDblClick:function(event, treeId, treeNode){
|
|
if(treeNode){
|
|
additem(treeNode);
|
|
}
|
|
}
|
|
});*/
|
|
}
|
|
});
|
|
|
|
htmleditor = ace.edit("html_page");
|
|
htmleditor.setTheme("ace/theme/dreamweaver");
|
|
htmleditor.session.setMode("ace/mode/html");
|
|
htmleditor.setAutoScrollEditorIntoView(true);
|
|
htmleditor.setHighlightActiveLine(true);
|
|
//htmleditor.setReadOnly(true);
|
|
|
|
jseditor = ace.edit("js_page");
|
|
jseditor.setTheme("ace/theme/dreamweaver");
|
|
jseditor.session.setMode("ace/mode/javascript");
|
|
jseditor.setAutoScrollEditorIntoView(true);
|
|
jseditor.setHighlightActiveLine(true);
|
|
|
|
csseditor = ace.edit("css_page");
|
|
csseditor.setTheme("ace/theme/dreamweaver");
|
|
csseditor.session.setMode("ace/mode/css");
|
|
csseditor.setAutoScrollEditorIntoView(true);
|
|
csseditor.setHighlightActiveLine(true);
|
|
|
|
|
|
|
|
});
|
|
function additem(control){
|
|
var cwin=$("#design_frame")[0].contentWindow;
|
|
cwin.additem(control);
|
|
htmleditor.setValue(cwin.$("body").html());
|
|
}
|
|
function refresh(){
|
|
var cwin=$("#design_frame")[0].contentWindow;
|
|
var op={};
|
|
$("#prop_page").find("input,select").each(function(){
|
|
op[$(this).attr("id")]=$(this).val();
|
|
});
|
|
$("#event_page").find("input,select").each(function(){
|
|
op[$(this).attr("id")]=$(this).val();
|
|
});
|
|
cwin.refresh(op);
|
|
}
|
|
function editfile(filename){
|
|
$.ajax({
|
|
url:'wdk?action=form.common&method=loadJspFile&ajaxparam='+new Date().getTime(),
|
|
method:"post",
|
|
data:{
|
|
fileName:filename
|
|
},
|
|
success:function(result) {
|
|
global.filename=filename;
|
|
var s=filename.toLowerCase();
|
|
global.isdesign=false;
|
|
if(s.indexOf(".html")>0 || s.indexOf(".htm")>0){
|
|
|
|
/*$("#design_frame").attr("src","wdk/pb/formIDE/blank.html?isdesign=1");
|
|
$("#design_frame").load(function(){
|
|
var cwin=$("#design_frame")[0].contentWindow;
|
|
cwin.$("body").append(cwin.$(result).find("body"));
|
|
});*/
|
|
if(result.indexOf("id=\"pre_js\"")>0){
|
|
$("#design_frame").attr("src","products"+filename+"?isdesign=1");
|
|
$("#design_frame").load(function(){
|
|
setTimeout(function(){
|
|
try{
|
|
var cwin=$("#design_frame")[0].contentWindow;
|
|
htmleditor.setValue(cwin.$("body").html());
|
|
csseditor.setValue(cwin.$("#custom_css").text());
|
|
jseditor.setValue(cwin.$("#custom_js").text());
|
|
$("[tab-target='tab_html_page']").show();
|
|
$("[tab-target='tab_html_page']").siblings().show();
|
|
$.tab_select({id:"#main-tabs",tabcode:"design_frame"});
|
|
}catch(e){
|
|
alert("载入失败");
|
|
}
|
|
},1000);
|
|
});
|
|
global.isdesign=true;
|
|
$('li[tab-target="tab_html_page"]').on("onSelect",function(e){
|
|
var cwin=$("#design_frame")[0].contentWindow;
|
|
htmleditor.setValue(HTMLFormat(cwin.$("body").html()));
|
|
});
|
|
|
|
|
|
return;
|
|
}
|
|
|
|
|
|
htmleditor.session.setMode("ace/mode/html");
|
|
htmleditor.setValue(result,1);
|
|
htmleditor.scrollToRow(1);
|
|
$.tab_select({id:"#main-tabs",tabcode:"html_page"});
|
|
$("[tab-target='tab_html_page']").show();
|
|
$("[tab-target='tab_html_page']").siblings().hide();
|
|
csseditor.setValue("");
|
|
jseditor.setValue("");
|
|
}else if(s.indexOf(".jsp")>0){
|
|
htmleditor.session.setMode("ace/mode/jsp");
|
|
htmleditor.setValue(result);
|
|
htmleditor.scrollToRow(1);
|
|
$.tab_select({id:"#main-tabs",tabcode:"html_page"});
|
|
$("[tab-target='tab_html_page']").show();
|
|
$("[tab-target='tab_html_page']").siblings().hide();
|
|
csseditor.setValue("");
|
|
jseditor.setValue("");
|
|
}else if(s.indexOf(".css")>0){
|
|
csseditor.setValue(result);
|
|
csseditor.scrollToRow(1);
|
|
$.tab_select({id:"#main-tabs",tabcode:"css_page"});
|
|
$("[tab-target='tab_css_page']").show();
|
|
$("[tab-target='tab_css_page']").siblings().hide();
|
|
htmleditor.setValue("");
|
|
jseditor.setValue("");
|
|
}else if(s.indexOf(".js")>0){
|
|
jseditor.setValue(result);
|
|
jseditor.scrollToRow(1);
|
|
$.tab_select({id:"#main-tabs",tabcode:"js_page"});
|
|
$("[tab-target='tab_js_page']").show();
|
|
$("[tab-target='tab_js_page']").siblings().hide();
|
|
csseditor.setValue("");
|
|
htmleditor.setValue("");
|
|
}
|
|
},
|
|
error:function(result){
|
|
alert('网络错误！result='+result);
|
|
}
|
|
});
|
|
}
|
|
function renderPropEvent(data){
|
|
var options=$.extend(data.options,{});
|
|
var props=data.prop;
|
|
$("#prop_page").empty();
|
|
for(var i=0;i<props.length;i++){
|
|
var prop=props[i];
|
|
var ig=$('<div class="input-group input-group-sm"></div>').appendTo($("#prop_page"));
|
|
var span=$(' <span class="input-group-addon">'+prop.prop_name+'</span>').appendTo(ig);
|
|
var v=options[prop.prop_code]?options[prop.prop_code]:(prop.value?prop.value:prop.default_value);
|
|
var inp=null;
|
|
if(prop.prop_type=="select"){
|
|
inp=$('<select id="'+prop.prop_code+'" class="form-control"></select>').appendTo(ig);
|
|
var listvalue=prop.value_source;
|
|
for(var m=0;listvalue && m<listvalue.length;m++){
|
|
var op = $("<option></option>").appendTo(inp);
|
|
op.attr("value",listvalue[m].value);
|
|
op.text(listvalue[m].text);
|
|
}
|
|
}else{
|
|
inp=$('<input type="text" id="'+prop.prop_code+'" class="form-control">').appendTo(ig);
|
|
}
|
|
inp.val(v);
|
|
inp.blur(function(){
|
|
refresh();
|
|
});
|
|
ig.data("prop",prop);
|
|
}
|
|
|
|
var events=data.event;
|
|
$("#event_page").empty();
|
|
for(var i=0;i<events.length;i++){
|
|
var event=events[i];
|
|
var ig=$('<div class="input-group input-group-sm"></div>').appendTo($("#event_page"));
|
|
var span=$(' <span class="input-group-addon">'+event.event_name+'</span>').appendTo(ig);
|
|
var inp=$('<input type="text" id="'+event.event_name+'" class="form-control">').appendTo(ig);
|
|
var v=options[event.event_name]?options[event.event_name]:(event.value?event.value:"");
|
|
inp.val(v);
|
|
inp.blur(function(){
|
|
refresh();
|
|
});
|
|
ig.data("event",event);
|
|
}
|
|
}
|
|
function _initTabs(){
|
|
$(".nav-tabs").each(function(i,o){
|
|
if(!$(o).get(0).inited){
|
|
$(o).get(0).inited=true;
|
|
$(o).find("li").click(function(){
|
|
$(this).parents(".nav-tabs:eq(0)").find("li.active").removeClass("active");
|
|
|
|
if($(this).parent().hasClass("dropdown-menu")){
|
|
$(this).parents(".tabdrop:eq(0)").addClass("active");
|
|
}
|
|
$(this).addClass("active");
|
|
var active = $(this).attr("tab-target");
|
|
$("#"+active).siblings().hide();
|
|
$("#"+active).show();
|
|
$("#"+active).trigger("show");
|
|
});
|
|
var active = $(o).find("li.active").attr("tab-target");
|
|
$("#"+active).siblings().hide();
|
|
$("#"+active).show();
|
|
}
|
|
$(o).tabdrop({text: '<span class="glyphicon glyphicon-menu-hamburger"></span>'});
|
|
});
|
|
|
|
}
|
|
function save(){
|
|
if(global.isdesign && global.filename.indexOf(".")>0){
|
|
var con=[];
|
|
con.push("<!DOCTYPE html>");
|
|
con.push("<html>");
|
|
con.push("<head>");
|
|
con.push("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
|
|
con.push("<script type=\"text/javascript\" src=\"../../wdk/theme/bs/core/js/wdk_bs.js\"><\/script>");
|
|
con.push("<style id=\"pre_css\">");
|
|
con.push("html, body {");
|
|
con.push(" width: 100%;");
|
|
con.push(" height: 100%;");
|
|
con.push("}");
|
|
|
|
con.push(".d-con,.d-item{");
|
|
con.push(" min-height:20px;");
|
|
con.push("}");
|
|
con.push(".h_layout{");
|
|
con.push(" display:table;");
|
|
con.push(" padding:5px;");
|
|
con.push(" width: 100%;");
|
|
con.push("}");
|
|
con.push(".h_layout_left,.h_layout_right{");
|
|
con.push(" display:table-cell;");
|
|
con.push(" vertical-align: top;");
|
|
con.push("}");
|
|
con.push(".v_layout{");
|
|
con.push(" padding:5px;");
|
|
con.push("}");
|
|
con.push(".v_layout_top,.v_layout_bottom{");
|
|
con.push(" width:100%;");
|
|
con.push("}");
|
|
con.push("</style>");
|
|
con.push("<style id=\"custom_css\">");
|
|
con.push(csseditor.getValue());
|
|
con.push("</style>");
|
|
con.push("<script id=\"pre_js\" type=\"text/javascript\">");
|
|
con.push(" $(function(){");
|
|
con.push(" ");
|
|
con.push(" });");
|
|
con.push("<\/script>");
|
|
con.push("<script id=\"custom_js\" type=\"text/javascript\">");
|
|
con.push(jseditor.getValue());
|
|
con.push("<\/script>");
|
|
con.push("</head>");
|
|
con.push("<body>");
|
|
con.push(htmleditor.getValue());
|
|
con.push("</body>");
|
|
$.ajax({
|
|
url:'wdk?action=form.common&method=saveJspFile&ajaxparam='+new Date().getTime(),
|
|
method:"post",
|
|
data:{
|
|
fileName:global.filename,
|
|
content:con.join("\n")
|
|
},
|
|
success:function(result) {
|
|
var d=$.str2json(result);
|
|
$(".ide-project-state").text("保存："+d.desc);
|
|
},
|
|
error:function(result){
|
|
$(".ide-project-state").text("保存：网络错误");
|
|
}
|
|
});
|
|
}else{
|
|
var editor=null;
|
|
if(global.filename.indexOf(".html")>0 || global.filename.indexOf(".htm")>0){
|
|
editor=htmleditor;
|
|
}else if(global.filename.indexOf(".jsp")>0){
|
|
editor=htmleditor;
|
|
}else if(global.filename.indexOf(".css")>0){
|
|
editor=csseditor;
|
|
}else if(global.filename.indexOf(".js")>0){
|
|
editor=jseditor;
|
|
}else{
|
|
editor=htmleditor;
|
|
}
|
|
$.ajax({
|
|
url:'wdk?action=form.common&method=saveJspFile&ajaxparam='+new Date().getTime(),
|
|
method:"post",
|
|
data:{
|
|
fileName:global.filename,
|
|
content:editor.getValue()
|
|
},
|
|
success:function(result) {
|
|
var d=$.str2json(result);
|
|
$(".ide-project-state").text("保存："+d.desc);
|
|
},
|
|
error:function(result){
|
|
$(".ide-project-state").text("保存：网络错误");
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
/**
|
|
* 删除
|
|
*/
|
|
function del(){
|
|
var cwin=$("#design_frame")[0].contentWindow;
|
|
cwin.$(".d-active").remove();
|
|
}
|
|
/**
|
|
* 新建文件
|
|
*/
|
|
function addFile(){
|
|
var filename=window.prompt('请输入文件名：',global.path);
|
|
if( filename=='' || filename==null || filename.indexOf(".")<=0 ){
|
|
alert("你没有输入正确的文件名。");
|
|
return;
|
|
}
|
|
global.filename=filename;
|
|
global.isdesign=true;
|
|
$("#design_frame").attr("src","wdk/pb/formIDE/template.html?isdesign=1");
|
|
$("#design_frame").load(function(){
|
|
setTimeout(function(){
|
|
var cwin=$("#design_frame")[0].contentWindow;
|
|
htmleditor.setValue(cwin.$("body").html());
|
|
csseditor.setValue(cwin.$("#custom_css").text());
|
|
jseditor.setValue(cwin.$("#custom_js").text());
|
|
},1000);
|
|
});
|
|
$('li[tab-target="tab_html_page"]').unbind("onSelect");
|
|
$('li[tab-target="tab_html_page"]').on("onSelect",function(e){
|
|
var cwin=$("#design_frame")[0].contentWindow;
|
|
htmleditor.setValue(HTMLFormat(cwin.$("body").html()));
|
|
});
|
|
}
|
|
|
|
var HTMLFormat = (function() {
|
|
function style_html(html_source, indent_size, indent_character, max_char) {
|
|
var Parser, multi_parser;
|
|
|
|
function Parser() {
|
|
|
|
this.pos = 0;
|
|
this.token = '';
|
|
this.current_mode = 'CONTENT';
|
|
this.tags = {
|
|
parent: 'parent1',
|
|
parentcount: 1,
|
|
parent1: ''
|
|
};
|
|
this.tag_type = '';
|
|
this.token_text = this.last_token = this.last_text = this.token_type = '';
|
|
|
|
|
|
this.Utils = {
|
|
whitespace: "\n\r\t ".split(''),
|
|
single_token: 'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed'.split(','),
|
|
extra_liners: 'head,body,/html'.split(','),
|
|
in_array: function(what, arr) {
|
|
for (var i = 0; i < arr.length; i++) {
|
|
if (what === arr[i]) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
|
|
this.get_content = function() {
|
|
var char = '';
|
|
var content = [];
|
|
var space = false;
|
|
while (this.input.charAt(this.pos) !== '<') {
|
|
if (this.pos >= this.input.length) {
|
|
return content.length ? content.join('') : ['', 'TK_EOF'];
|
|
}
|
|
|
|
char = this.input.charAt(this.pos);
|
|
this.pos++;
|
|
this.line_char_count++;
|
|
|
|
|
|
if (this.Utils.in_array(char, this.Utils.whitespace)) {
|
|
if (content.length) {
|
|
space = true;
|
|
}
|
|
this.line_char_count--;
|
|
continue;
|
|
} else if (space) {
|
|
if (this.line_char_count >= this.max_char) {
|
|
content.push('\n');
|
|
for (var i = 0; i < this.indent_level; i++) {
|
|
content.push(this.indent_string);
|
|
}
|
|
this.line_char_count = 0;
|
|
} else {
|
|
content.push(' ');
|
|
this.line_char_count++;
|
|
}
|
|
space = false;
|
|
}
|
|
content.push(char);
|
|
}
|
|
return content.length ? content.join('') : '';
|
|
}
|
|
|
|
this.get_script = function() {
|
|
var char = '';
|
|
var content = [];
|
|
var reg_match = new RegExp('\<\/script' + '\>', 'igm');
|
|
reg_match.lastIndex = this.pos;
|
|
var reg_array = reg_match.exec(this.input);
|
|
var end_script = reg_array ? reg_array.index : this.input.length;
|
|
while (this.pos < end_script) {
|
|
if (this.pos >= this.input.length) {
|
|
return content.length ? content.join('') : ['', 'TK_EOF'];
|
|
}
|
|
|
|
char = this.input.charAt(this.pos);
|
|
this.pos++;
|
|
|
|
|
|
content.push(char);
|
|
}
|
|
return content.length ? content.join('') : '';
|
|
}
|
|
|
|
this.record_tag = function(tag) {
|
|
if (this.tags[tag + 'count']) {
|
|
this.tags[tag + 'count']++;
|
|
this.tags[tag + this.tags[tag + 'count']] = this.indent_level;
|
|
} else {
|
|
this.tags[tag + 'count'] = 1;
|
|
this.tags[tag + this.tags[tag + 'count']] = this.indent_level;
|
|
}
|
|
this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent;
|
|
this.tags.parent = tag + this.tags[tag + 'count'];
|
|
}
|
|
|
|
this.retrieve_tag = function(tag) {
|
|
if (this.tags[tag + 'count']) {
|
|
var temp_parent = this.tags.parent;
|
|
while (temp_parent) {
|
|
if (tag + this.tags[tag + 'count'] === temp_parent) {
|
|
break;
|
|
}
|
|
temp_parent = this.tags[temp_parent + 'parent'];
|
|
}
|
|
if (temp_parent) {
|
|
this.indent_level = this.tags[tag + this.tags[tag + 'count']];
|
|
this.tags.parent = this.tags[temp_parent + 'parent'];
|
|
}
|
|
delete this.tags[tag + this.tags[tag + 'count'] + 'parent'];
|
|
delete this.tags[tag + this.tags[tag + 'count']];
|
|
if (this.tags[tag + 'count'] == 1) {
|
|
delete this.tags[tag + 'count'];
|
|
} else {
|
|
this.tags[tag + 'count']--;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.get_tag = function() {
|
|
var char = '';
|
|
var content = [];
|
|
var space = false;
|
|
|
|
do {
|
|
if (this.pos >= this.input.length) {
|
|
return content.length ? content.join('') : ['', 'TK_EOF'];
|
|
}
|
|
|
|
char = this.input.charAt(this.pos);
|
|
this.pos++;
|
|
this.line_char_count++;
|
|
|
|
if (this.Utils.in_array(char, this.Utils.whitespace)) {
|
|
space = true;
|
|
this.line_char_count--;
|
|
continue;
|
|
}
|
|
|
|
if (char === "'" || char === '"') {
|
|
if (!content[1] || content[1] !== '!') {
|
|
char += this.get_unformatted(char);
|
|
space = true;
|
|
}
|
|
}
|
|
|
|
if (char === '=') {
|
|
space = false;
|
|
}
|
|
|
|
if (content.length && content[content.length - 1] !== '=' && char !== '>' && space) {
|
|
if (this.line_char_count >= this.max_char) {
|
|
this.print_newline(false, content);
|
|
this.line_char_count = 0;
|
|
} else {
|
|
content.push(' ');
|
|
this.line_char_count++;
|
|
}
|
|
space = false;
|
|
}
|
|
content.push(char);
|
|
} while (char !== '>');
|
|
|
|
var tag_complete = content.join('');
|
|
var tag_index;
|
|
if (tag_complete.indexOf(' ') != -1) {
|
|
tag_index = tag_complete.indexOf(' ');
|
|
} else {
|
|
tag_index = tag_complete.indexOf('>');
|
|
}
|
|
var tag_check = tag_complete.substring(1, tag_index).toLowerCase();
|
|
if (tag_complete.charAt(tag_complete.length - 2) === '/' || this.Utils.in_array(tag_check, this.Utils.single_token)) {
|
|
this.tag_type = 'SINGLE';
|
|
} else if (tag_check === 'script') {
|
|
this.record_tag(tag_check);
|
|
this.tag_type = 'SCRIPT';
|
|
} else if (tag_check === 'style') {
|
|
this.record_tag(tag_check);
|
|
this.tag_type = 'STYLE';
|
|
} else if (tag_check.charAt(0) === '!') {
|
|
if (tag_check.indexOf('[if') != -1) {
|
|
if (tag_complete.indexOf('!IE') != -1) {
|
|
var comment = this.get_unformatted('-->', tag_complete);
|
|
content.push(comment);
|
|
}
|
|
this.tag_type = 'START';
|
|
} else if (tag_check.indexOf('[endif') != -1) {
|
|
this.tag_type = 'END';
|
|
this.unindent();
|
|
} else if (tag_check.indexOf('[cdata[') != -1) {
|
|
var comment = this.get_unformatted(']]>', tag_complete);
|
|
content.push(comment);
|
|
this.tag_type = 'SINGLE';
|
|
} else {
|
|
var comment = this.get_unformatted('-->', tag_complete);
|
|
content.push(comment);
|
|
this.tag_type = 'SINGLE';
|
|
}
|
|
} else {
|
|
if (tag_check.charAt(0) === '/') {
|
|
this.retrieve_tag(tag_check.substring(1));
|
|
this.tag_type = 'END';
|
|
} else {
|
|
this.record_tag(tag_check);
|
|
this.tag_type = 'START';
|
|
}
|
|
if (this.Utils.in_array(tag_check, this.Utils.extra_liners)) {
|
|
this.print_newline(true, this.output);
|
|
}
|
|
}
|
|
return content.join('');
|
|
}
|
|
|
|
this.get_unformatted = function(delimiter, orig_tag) {
|
|
if (orig_tag && orig_tag.indexOf(delimiter) != -1) {
|
|
return '';
|
|
}
|
|
var char = '';
|
|
var content = '';
|
|
var space = true;
|
|
do {
|
|
|
|
|
|
char = this.input.charAt(this.pos);
|
|
this.pos++
|
|
|
|
if (this.Utils.in_array(char, this.Utils.whitespace)) {
|
|
if (!space) {
|
|
this.line_char_count--;
|
|
continue;
|
|
}
|
|
if (char === '\n' || char === '\r') {
|
|
content += '\n';
|
|
for (var i = 0; i < this.indent_level; i++) {
|
|
content += this.indent_string;
|
|
}
|
|
space = false;
|
|
this.line_char_count = 0;
|
|
continue;
|
|
}
|
|
}
|
|
content += char;
|
|
this.line_char_count++;
|
|
space = true;
|
|
|
|
|
|
} while (content.indexOf(delimiter) == -1);
|
|
return content;
|
|
}
|
|
|
|
this.get_token = function() {
|
|
var token;
|
|
|
|
if (this.last_token === 'TK_TAG_SCRIPT') {
|
|
var temp_token = this.get_script();
|
|
if (typeof temp_token !== 'string') {
|
|
return temp_token;
|
|
}
|
|
//token = js_beautify(temp_token, this.indent_size, this.indent_character, this.indent_level);
|
|
//return [token, 'TK_CONTENT'];
|
|
return [temp_token, 'TK_CONTENT'];
|
|
}
|
|
if (this.current_mode === 'CONTENT') {
|
|
token = this.get_content();
|
|
if (typeof token !== 'string') {
|
|
return token;
|
|
} else {
|
|
return [token, 'TK_CONTENT'];
|
|
}
|
|
}
|
|
|
|
if (this.current_mode === 'TAG') {
|
|
token = this.get_tag();
|
|
if (typeof token !== 'string') {
|
|
return token;
|
|
} else {
|
|
var tag_name_type = 'TK_TAG_' + this.tag_type;
|
|
return [token, tag_name_type];
|
|
}
|
|
}
|
|
}
|
|
|
|
this.printer = function(js_source, indent_character, indent_size, max_char) {
|
|
this.input = js_source || '';
|
|
this.output = [];
|
|
this.indent_character = indent_character || ' ';
|
|
this.indent_string = '';
|
|
this.indent_size = indent_size || 2;
|
|
this.indent_level = 0;
|
|
this.max_char = max_char || 70;
|
|
this.line_char_count = 0;
|
|
for (var i = 0; i < this.indent_size; i++) {
|
|
this.indent_string += this.indent_character;
|
|
}
|
|
|
|
this.print_newline = function(ignore, arr) {
|
|
this.line_char_count = 0;
|
|
if (!arr || !arr.length) {
|
|
return;
|
|
}
|
|
if (!ignore) {
|
|
while (this.Utils.in_array(arr[arr.length - 1], this.Utils.whitespace)) {
|
|
arr.pop();
|
|
}
|
|
}
|
|
arr.push('\n');
|
|
for (var i = 0; i < this.indent_level; i++) {
|
|
arr.push(this.indent_string);
|
|
}
|
|
}
|
|
|
|
|
|
this.print_token = function(text) {
|
|
this.output.push(text);
|
|
}
|
|
|
|
this.indent = function() {
|
|
this.indent_level++;
|
|
}
|
|
|
|
this.unindent = function() {
|
|
if (this.indent_level > 0) {
|
|
this.indent_level--;
|
|
}
|
|
}
|
|
}
|
|
return this;
|
|
}
|
|
|
|
|
|
|
|
|
|
multi_parser = new Parser();
|
|
multi_parser.printer(html_source, indent_character, indent_size);
|
|
while (true) {
|
|
var t = multi_parser.get_token();
|
|
multi_parser.token_text = t[0];
|
|
multi_parser.token_type = t[1];
|
|
|
|
if (multi_parser.token_type === 'TK_EOF') {
|
|
break;
|
|
}
|
|
|
|
|
|
switch (multi_parser.token_type) {
|
|
case 'TK_TAG_START':
|
|
case 'TK_TAG_SCRIPT':
|
|
case 'TK_TAG_STYLE':
|
|
multi_parser.print_newline(false, multi_parser.output);
|
|
multi_parser.print_token(multi_parser.token_text);
|
|
multi_parser.indent();
|
|
multi_parser.current_mode = 'CONTENT';
|
|
break;
|
|
case 'TK_TAG_END':
|
|
multi_parser.print_newline(true, multi_parser.output);
|
|
multi_parser.print_token(multi_parser.token_text);
|
|
multi_parser.current_mode = 'CONTENT';
|
|
break;
|
|
case 'TK_TAG_SINGLE':
|
|
multi_parser.print_newline(false, multi_parser.output);
|
|
multi_parser.print_token(multi_parser.token_text);
|
|
multi_parser.current_mode = 'CONTENT';
|
|
break;
|
|
case 'TK_CONTENT':
|
|
if (multi_parser.token_text !== '') {
|
|
multi_parser.print_newline(false, multi_parser.output);
|
|
multi_parser.print_token(multi_parser.token_text);
|
|
}
|
|
multi_parser.current_mode = 'TAG';
|
|
break;
|
|
}
|
|
multi_parser.last_token = multi_parser.token_type;
|
|
multi_parser.last_text = multi_parser.token_text;
|
|
}
|
|
return multi_parser.output.join('');
|
|
}
|
|
|
|
return function(data) {
|
|
var dataHolder = ['__dataHolder_', [Math.random(), Math.random(), Math.random(), Math.random()].join('_').replace(/[^0-9]/g, '_'), '_'].join('_');
|
|
var dataHolders = {};
|
|
var index = 0;
|
|
data = data.replace(/(\")(data:[^\"]*)(\")/g, function($0, $1, $2, $3) {
|
|
var name = dataHolder + index++;
|
|
dataHolders[name] = $2;
|
|
return $1 + name + $3;
|
|
})
|
|
data = style_html(data, 1, '\t', 0x10000000);
|
|
data = data.replace(new RegExp(dataHolder + '[0-9]+', 'g'), function($0) {
|
|
return dataHolders[$0];
|
|
});
|
|
|
|
return data;
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|