梁美英 / programming · Commits

Commit 2cb64aeeaa002df208d2ed8269762bad3d0aa40d

Authored by Keystion
1 parent caaa441b

多文件编译完成

Inline Side-by-side
Showing 7 changed files with 451 additions and 211 deletions
src/css/demo.css
  View file @2cb64ae
... ... @@ -11,6 +11,8 @@ html,body{
11 11 #appContainer{
12 12 float: left;
13 13 overflow: hidden;
  14 + width: 100%;
  15 + height: calc(100% - 80px);
14 16 }
15 17 #app #appLeft,
16 18 #app #appMian,
... ... @@ -36,7 +38,7 @@ html,body{
36 38 }
37 39 #appMian{
38 40 background-color: #fff;
39   - width: 100%;
  41 + width: calc(100% - 140px - 320px);
40 42 }
41 43 #handleLM,
42 44 #handleMR{
... ... @@ -81,37 +83,72 @@ html,body{
81 83 .handle-bar:after{
82 84 right: 2px;
83 85 }
84   -
  86 +.tree-header{
  87 + padding: 75px 15px 0 15px;
  88 + font-size: 16px;
  89 + color: #879499;
  90 + font-weight: bold;
  91 +}
85 92 ul.ztree{
86 93 background-color: transparent;
87 94 width: 100%;
88   - height: 100%;
89   - padding: 10px 8px;
  95 + height: 73%;
  96 + padding: 10px 15px;
90 97 -webkit-box-sizing: border-box;
91 98 -moz-box-sizing: border-box;
92 99 box-sizing: border-box;
93 100 margin: 0;
94 101 border: none;
95   - padding-top: 70px;
96 102 }
  103 +ul.ztree li a{
  104 + padding: 0;
  105 + height: 24px;
  106 + line-height: 24px;
  107 + color: #859499;
  108 +}
  109 +.ztree li a.curSelectedNode{
  110 + background-color: #FFE6B0;
  111 + color: black;
  112 + height: 24px;
  113 + border: none;
  114 + opacity: 1;
  115 +}
  116 +ul.ztree li span.button.switch{
  117 + display: none;
  118 +}
  119 +ul.ztree li span.button.ico_open,
  120 +ul.ztree li span.button.ico_close,
  121 +ul.ztree li span.button.ico_docu{
  122 + margin-top: 4px;
  123 + margin-right: 2px;
  124 + vertical-align: top;
  125 +}
  126 +ul.ztree li span.button.ico_open,
  127 +ul.ztree li span.button.ico_close{
  128 + background: url(../img/icon-folder.png) no-repeat scroll center center transparent;
  129 +}
  130 +ul.ztree li span.button.ico_docu{
  131 + background: url(../img/icon-files-java.png) no-repeat scroll center center transparent;
  132 +}
  133 +
97 134 textarea[id^="tab"]{ display: none; }
98 135 textarea[id^="tab"].active{ display: block; }
99 136 .CodeMirror{ padding: 0; }
100 137  
101   -
102   -
103   -#appMianHeader{
  138 +#appMainHeader{
104 139 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
105   - background-image: -o-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
106 140 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
107 141 height: 60px;
  142 + margin-left: -140px;
108 143 }
109   -#appMianHeader .nav-tabs {
110   - border-bottom: none;
  144 +#appMainHeader{
111 145 padding: 0 8px;
112 146 }
  147 +#appMainHeader .nav-tabs {
  148 + border-bottom: none;
  149 +}
113 150  
114   -#appMianHeader .nav-tabs > li > a {
  151 +#appMainHeader .nav-tabs > li > a {
115 152 margin-right: 0;
116 153 line-height: 1.428571429;
117 154 border: none !important;
... ... @@ -122,13 +159,95 @@ textarea[id^="tab"].active{ display: block; }
122 159 color: #ADE6FD;
123 160 }
124 161  
125   -#appMianHeader .nav-tabs > li.active > a,
126   -#appMianHeader .nav-tabs > li.active > a:hover,
127   -#appMianHeader .nav-tabs > li.active > a:focus {
  162 +#appMainHeader .nav-tabs > li.active > a,
  163 +#appMainHeader .nav-tabs > li.active > a:hover,
  164 +#appMainHeader .nav-tabs > li.active > a:focus {
128 165 color: #FFF;
129 166 }
130   -#appMianHeader .iconfont{
  167 +#appMainHeader .iconfont{
131 168 font-size: 20px;
132 169 vertical-align: middle;
133 170 margin-right: 6px;
134 171 }
  172 +#textarea{ height: calc(100% - 60px); }
  173 +#textarea #recordzone,
  174 +#textarea #recordzone>div,
  175 +#textarea #recordzone>div.CodeMirror,
  176 +#textarea #replayzone,
  177 +#textarea #replayzone>div,
  178 +#textarea #replayzone>div.CodeMirror{
  179 + height: 100%;
  180 +}
  181 +
  182 +#editorwrapper{
  183 + height: 100%;
  184 +}
  185 +#editorwrapper .btn-group{
  186 + margin: 16px 16px 14px 16px;
  187 +}
  188 +#editorwrapper .btn-group .btn{
  189 + border-color: transparent;
  190 +}
  191 +#editorwrapper .btn-group .btn:first-child{
  192 + border-top-left-radius: 5px;
  193 + border-bottom-left-radius: 5px;
  194 +}
  195 +#editorwrapper .btn-group .btn:last-child{
  196 + border-top-right-radius: 5px;
  197 + border-bottom-right-radius: 5px;
  198 + border-left-color: #ccc;
  199 +}
  200 +
  201 +.editor-result{
  202 + border-radius: 0;
  203 + border: none;
  204 + height: 100%;
  205 +}
  206 +.editor-result .result-header{
  207 + padding: 15px;
  208 + height: 60px;
  209 + background-color: #F0F3F5;
  210 + border-radius: 0;
  211 +}
  212 +.editor-result .result-header .btn-group .btn{
  213 + background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
  214 + background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
  215 + border-color: #F0F3F5;
  216 + border-radius: 5px;
  217 + color: #fff;
  218 +}
  219 +.editor-result .result-tabs{
  220 + height: 30px;
  221 + border-radius: 30px;
  222 + background-color: #62DCF5;
  223 + margin-bottom: 24px;
  224 +}
  225 +.editor-result .result-tabs>li{
  226 + width: 25%;
  227 + margin-bottom: 0;
  228 + text-align: center;
  229 +}
  230 +.editor-result .result-tabs>li>a,
  231 +.editor-result .result-tabs>li.active>a:hover{
  232 + padding: 4px 15px;
  233 + border: none;
  234 + margin: 1px;
  235 + border-radius: 15px;
  236 + font-size: 14px;
  237 + color: #fff;
  238 + transition: all 0.3s ease;
  239 +}
  240 +.editor-result .result-tabs>li.active>a,
  241 +.editor-result .result-tabs>li.active>a:hover,
  242 +.editor-result .result-tabs>li>a:hover,
  243 +.editor-result .result-tabs>li.active>a:focus{
  244 + color: #1FB6FF;
  245 + background-color: #fff;
  246 + box-shadow: 0px 0px 2px 0px #B3E5FF;
  247 + border: none;
  248 +}
  249 +.editor-result .form-control{
  250 + border: none;
  251 + border-bottom: 1px solid #999;
  252 + border-radius: 0;
  253 +}
135 254 \ No newline at end of file
... ...
src/img/icon-files-java.png 0 → 100644
View file @2cb64ae

252 Bytes
src/img/icon-folder.png 0 → 100644
View file @2cb64ae

203 Bytes
src/index.html
  View file @2cb64ae
... ... @@ -48,86 +48,6 @@
48 48  
49 49 <link rel="stylesheet" href="css/demo.css">
50 50 <script type="text/javascript" src="js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>
51   - <!-- resize dom js -->
52   - <script type="text/javascript">
53   - $(function() {
54   - var app = $('#app')
55   - var appLeft = $('#appLeft');
56   - var appRight = $('#appRight');
57   - var handleLM = $('#handleLM');
58   - var handleMR = $('#handleMR');
59   - var appContainer = $('#appContainer');
60   - var appMian = $('#appMian');
61   - var appFooter = $('#appFooter');
62   - var appMianHeader = $('#appMianHeader')
63   - var winWidth = $(window).width();
64   - var winHeight = $(window).height();
65   -
66   - var isLeftResizing = false;
67   - var isRightResizing = false;
68   - var _width = 0;
69   - var _tempWidth = 0;
70   - var appLeftRatio = 140 / winWidth;
71   - var appRightRatio = 320 / winWidth;
72   -
73   - appContainer.height(winHeight - appFooter.height());
74   - appLeft.width($(window).width() * appLeftRatio);
75   - appRight.width($(window).width() * appRightRatio);
76   - appMian.width($(window).width() - appLeft.width() - appRight.width());
77   - appMianHeader.css('margin-left', -appLeft.width());
78   -
79   - $(window).resize(function(event) {
80   - /* Act on the event */
81   - appContainer.height(winHeight - appFooter.height());
82   - appLeft.width($(window).width() * appLeftRatio);
83   - appRight.width($(window).width() * appRightRatio);
84   - appMian.width($(window).width() - appLeft.width() - appRight.width());
85   - appMianHeader.css('margin-left', -appLeft.width());
86   - });
87   -
88   - // handleLM.on('mousedown', function (e) {
89   - // isLeftResizing = true;
90   - // });
91   - // handleMR.on('mousedown', function (e) {
92   - // isRightResizing = true;
93   - // });
94   -
95   - // $(document).on('mousemove', function (e) {
96   - // if (!isLeftResizing && !isRightResizing){
97   - // return;
98   - // }
99   -
100   - // if(isLeftResizing){
101   - // _tempWidth = e.clientX;
102   - // }else if(isRightResizing){
103   - // _tempWidth = app.width() - e.clientX;
104   - // }
105   -
106   - // if(_tempWidth <= 80){
107   - // _width = 80;
108   - // }else if(_tempWidth >= 230){
109   - // _width = 230;
110   - // }else{
111   - // _width = _tempWidth;
112   - // }
113   -
114   - // if(isLeftResizing){
115   - // appLeft.width(_width);
116   - // appMian.width($(window).width() - appRight.width() - _width);
117   - // }
118   -
119   - // if(isRightResizing){
120   - // appRight.width(_width);
121   - // appMian.width($(window).width() - appLeft.width() - _width);
122   - // }
123   -
124   - // }).on('mouseup', function (e) {
125   - // // stop resizing
126   - // isLeftResizing = false;
127   - // isRightResizing = false;
128   - // });
129   - });
130   - </script>
131 51 <script src="js/gb.js"></script>
132 52 <!-- <script src="js/gbreplayer.js"></script> -->
133 53  
... ... @@ -153,15 +73,22 @@
153 73 <div id="app" class="wrapper">
154 74 <div id="appContainer">
155 75 <div id="appLeft">
  76 + <div class="tree-header">目录</div>
156 77 <ul id="folder" class="ztree"></ul>
157 78 <div id="handleLM"></div>
158 79 </div>
159 80 <div id="appMian">
160   - <div id="appMianHeader">
161   - <ul class="nav nav-tabs pull-left" id="recordertab">
  81 + <div id="appMainHeader">
  82 + <ul id="recordertab" class="nav nav-tabs pull-left">
162 83 <li class="active"><a href="#recordzone" data-toggle="tab"><i class="icon iconfont icon-suspend"></i>课程录制区</a></li>
163 84 <li><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>课程预览区</a></li>
164 85 </ul>
  86 + <div id="editorwrapper" class="pull-right">
  87 + <div class="btn-group">
  88 + <div id="htmlbutton" class="btn btn-default btn-sm" data-editorname="html">JAVA</div>
  89 + <div class="btn btn-default btn-sm">JDK 7</div>
  90 + </div>
  91 + </div>
165 92 </div>
166 93 <div id="textarea">
167 94 <div id="recordzone" class="active">
... ... @@ -174,6 +101,44 @@
174 101 <div id="handleMR"></div>
175 102 </div>
176 103 <div id="appRight">
  104 + <div id="resultpanel" class="panel panel-default editor-result">
  105 + <div class="panel-heading result-header">
  106 + <div class="pull-left">
  107 + <div id="comprunbtngrp" class="btn-group"></div>
  108 + </div>
  109 + <div class="pull-right">
  110 + <a href="javascript:;" class="btn btn-link">全屏</a>
  111 + </div>
  112 + <div class="btn-group">
  113 + <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button>
  114 + <p id="replay">预览录制</p>
  115 + </div>
  116 + <!-- <div class="btn-group pull-right" id="comprunbtngrp"></div> -->
  117 + </div>
  118 + <div class="panel-body hidden" id="cmprun-output">
  119 + <div id="resultoutput">
  120 + <!-- Nav tabs -->
  121 + <ul class="nav nav-tabs result-tabs" role="tablist" id="cmprun-tabs">
  122 + <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>
  123 + <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>
  124 + <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>
  125 + <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li>
  126 + </ul>
  127 + <!-- Tab panes -->
  128 + <div class="tab-content">
  129 + <div class="tab-pane active padall15" id="stdin">
  130 + <input type="text" class="form-control" id="input" placeholder="标准输入">
  131 + </div>
  132 + <div class="tab-pane padall15" id="cmpinfo"></div>
  133 + <div class="tab-pane padall15" id="stderr"></div>
  134 + <div class="tab-pane padall15" id="output"></div>
  135 + </div>
  136 + </div>
  137 + </div>
  138 + <div class="panel-body" id="ifrcontainer">
  139 + <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
  140 + </div>
  141 + </div>
177 142 </div>
178 143 </div>
179 144 <div id="appFooter">
... ...
src/js/gb.js
  View file @2cb64ae
... ... @@ -10,15 +10,16 @@ $(function() {
10 10 _source = getQuery('source');
11 11 var $recording_time = $('.recording-time');
12 12 var tag = 1; // 标记第一次暂停
13   - var treeData = {}; // 目录树
14 13 var htmlhlLine = null,
15 14 csshlLine = null,
16 15 jshlLine = null;
17 16  
18 17 // 储存一个树结构和编辑器的对应关系
19   - var treeLinkEditor = [];
20   - var editorList = [];
21   - var treeObj;
  18 + var treeLinkEditor = [], // 缓存整个目录树结构和代码编辑器的关系
  19 + treeData = {}, // 缓存目录树返回结果
  20 + mainPath, // 运行编译时候需要知道当前是哪个文件
  21 + fileList, // 有值的文件数据结构
  22 + treeObj; // 获取ztree对象
22 23  
23 24 var ZTREE = {
24 25 /**
... ... @@ -34,15 +35,11 @@ $(function() {
34 35 treeObj = $.fn.zTree.getZTreeObj("folder");
35 36 treeObj.expandNode(treeNode);
36 37  
37   -
38   - var node = treeObj.getNodeByTId('12');
39   - console.log(node);
40   -
41   - // 调试输出输出文件路径
42   - console.log(ZTREE.getTreePath(treeNode));
  38 + console.info('点击了 ' + treeNode.name);
  39 + console.info(treeNode);
43 40  
44 41 // 处理显示目录树对应的编辑器目录
45   - ZTREE.showEdite(treeNode.name);
  42 + ZTREE.showEdite(treeNode);
46 43 },
47 44 /**
48 45 * 通过目录树的点击来显示对应的编辑器
... ... @@ -52,29 +49,32 @@ $(function() {
52 49 * TODO treeNode放到一个变量或者隐藏域里面
53 50 */
54 51 showEdite: function (treeNode){
55   - var _name,
56   - _recordName,
57   - _replayName;
58   -
59   - if(!treeNode){
60   - _name = treeLinkEditor[0].name;
61   - _recordName = treeLinkEditor[0].codemirrorrecord;
62   - _replayName = treeLinkEditor[0].codemirrorreplay;
63   - }else{
  52 + var _file,
  53 + _CodeMirrorRecordId,
  54 + _CodeMirrorReplayId,
  55 + _num = 0;
  56 + // 判断是否是初始化选时候调用 showEdite
  57 + if(treeNode){
64 58 for (var i = 0; i < treeLinkEditor.length; i++) {
65   - if(treeLinkEditor[i].name == treeNode){
66   - _name = treeLinkEditor[i].name;
67   - _recordName = treeLinkEditor[i].codemirrorrecord;
68   - _replayName = treeLinkEditor[i].codemirrorreplay;
  59 + if(treeLinkEditor[i].name == ZTREE.manageName(treeNode.name)){
  60 + _num = i;
69 61 }
70 62 }
71 63 }
72 64  
  65 + _file = treeLinkEditor[_num].file;
  66 + _CodeMirrorRecordId = treeLinkEditor[_num].CodeMirrorRecordId;
  67 + _CodeMirrorReplayId = treeLinkEditor[_num].CodeMirrorReplayId;
  68 + mainPath = treeLinkEditor[_num].filePath; // 更新mainPath值
  69 +
  70 + // 更新目录树选中状态
  71 + ZTREE.selectTreeItem(_file);
73 72 // 显示代码编辑器
74   - $('#' + _recordName).show().parent().siblings().find('.CodeMirror').hide();
75   - $('#' + _replayName).show().parent().siblings().find('.CodeMirror').hide();
76   -
77   - ZTREE.selectTreeItem(_name);
  73 + $('#' + _CodeMirrorRecordId).show().parent().show().siblings().hide().find('.CodeMirror').hide();
  74 + $('#' + _CodeMirrorReplayId).show().parent().show().siblings().hide().find('.CodeMirror').hide();
  75 +
  76 + console.info('当前选中文件（mainPath）：'+ mainPath);
  77 + console.info('当前显示代码编辑器：'+ '#' + _CodeMirrorReplayId);
78 78 },
79 79 /**
80 80 * 返回目录结构路径
... ... @@ -83,20 +83,34 @@ $(function() {
83 83 * @param {[type]} treeNode 点击了哪一个目录
84 84 * TODO treeNode放到一个变量或者隐藏域里面
85 85 */
86   - getTreePath: function (treeNode){
87   - var arr = [];
88   - var filePath;
89   - if(typeof treeNode.getPath == 'function' && treeNode.getPath().length != 1){
90   - for (var i = 0; i < treeNode.getPath().length; i++) {
91   - arr[i] = treeNode.getPath()[i].name;
92   - }
93   - filePath = arr.join('/');
94   - console.log('2');
95   - }else{
96   - console.log('1');
97   - filePath = treeNode.name
  86 + // 根据提供的 name 获取 pId , 再根据 pId 获取 夫级 name
  87 + getTreePath: function (name){
  88 + var _pid, _folder, _filename;
  89 + for (var i = 0; i < treeData.length; i++) {
  90 + if(treeData[i].name == name){
  91 + _pid = treeData[i].pId;
  92 + _filename = treeData[i].name;
  93 + }
  94 + }
  95 + for (var i = 0; i < treeData.length; i++) {
  96 + if(treeData[i].id == _pid){
  97 + _folder = treeData[i].name;
  98 + }
  99 + }
  100 + return _folder + '/' + _filename;
  101 + }
  102 + /**
  103 + * 处理name
  104 + * @Author syantao
  105 + * Created by Keystion on 2017-01-23
  106 + * @param {[type]} name Class1.java
  107 + * @return {[type]} Class1
  108 + */
  109 + ,manageName: function (name){
  110 + if(!name){
  111 + return false;
98 112 }
99   - return filePath;
  113 + return name.split('.')[0];
100 114 }
101 115 /**
102 116 * 根据id获取当前编辑器对应的目录树文件
... ... @@ -105,11 +119,12 @@ $(function() {
105 119 * @param {[type]} id 代码编辑器的id
106 120 */
107 121 ,getCurrentEditor: function (id){
108   - var _id = id || treeLinkEditor[0].codemirrorrecord,
  122 + console.log(id);
  123 + var _id = id || treeLinkEditor[0].CodeMirrorRecordId,
109 124 _name;
110 125  
111 126 for (var i = 0; i < treeLinkEditor.length; i++) {
112   - if(treeLinkEditor[i].codemirrorrecord == _id){
  127 + if(treeLinkEditor[i].CodeMirrorRecordId == _id){
113 128 // console.log(treeLinkEditor[i]);
114 129 _name = treeLinkEditor[i].name;
115 130 }
... ... @@ -117,44 +132,88 @@ $(function() {
117 132  
118 133 return _name;
119 134 }
120   - ,getTreeData: function(){
121   - for (var i = 0; i < treeLinkEditor.length; i++) {
122   - console.log(treeLinkEditor[i].CodeMirrorRecord.getValue());
  135 + /**
  136 + * 返回编辑器的数据,
  137 + * @Author syantao
  138 + * Created by Keystion on 2017-01-22
  139 + * @param {[type]} name 非必选，如果有折返回单个文件的数据
  140 + * @return {[type]} Array/false false 每一个编辑器均无值
  141 + */
  142 + ,getTreeData: function(name){
  143 + var _arr = [];
  144 + // 判断是否是需要返回单文件结果
  145 + if(name){
  146 + for (var i = 0; i < treeLinkEditor.length; i++) {
  147 + if(treeLinkEditor[i].name == name && $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
  148 + _arr.push({
  149 + "path": treeLinkEditor[i].filePath,
  150 + "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
  151 + })
  152 + }
  153 + }
  154 + }else{
  155 + for (var i = 0; i < treeLinkEditor.length; i++) {
  156 + if($.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
  157 + _arr.push({
  158 + "path": treeLinkEditor[i].filePath,
  159 + "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
  160 + })
  161 + }
  162 + }
123 163 }
  164 +
  165 + //
  166 + if(_arr < 1){
  167 + return false;
  168 + }
  169 +
  170 + return _arr;
124 171 }
125   - ,selectTreeItem: function selectTreeItem(name){
126   - var _thisName = name || treeData[3].name;
  172 + /**
  173 + * 通过文件名选中对应的目录
  174 + * @Author syantao
  175 + * Created by Keystion on 2017-01-23
  176 + * @param {[type]} name 例：Class1.java
  177 + */
  178 + ,selectTreeItem: function (name){
  179 + var _thisName = name || treeData[1].name;
127 180 // 处理菜单选中状态
128 181 var node = treeObj.getNodeByParam("name", _thisName, null);
129   - // console.log(node);
130 182  
131 183 treeObj.selectNode(node, false, true);
132   -
133   - // test 输出选中结果
134   - // var sNodes = treeObj.getSelectedNodes();
135   - // if (sNodes.length > 0) {
136   - // console.log(sNodes[0].name);
137   - // }
138 184 }
139 185 }
140 186  
141 187 $(document).on('click', '#cancel', function(event) {
142 188 event.preventDefault();
143 189 /* Act on the event */
144   -
145   - // ZTREE.getTreeData();
146   -
147   -
148   -
149   - ZTREE.selectTreeItem('ClassA');
150   -
151   - // var nodes = treeObj.getNodes();
152   - // if (nodes.length>0) {
153   - // treeObj.selectNode(nodes[0]);
154   - // }
155   -
156   - // var node = zTree.getNodeByTId('12');
157   - // console.log(tId);
  190 + fileList = ZTREE.getTreeData();
  191 + if(!fileList){
  192 + alert('请输入代码');
  193 + return false;
  194 + }
  195 + var compileData = {
  196 + "userId": _userId,
  197 + "langId": _languageid,
  198 + "mainPath": mainPath,
  199 + "mainArgus": "",
  200 + "runtimeArgus": "",
  201 + "rand": "123456",
  202 + "fileList": fileList
  203 + }
  204 + console.log(compileData);
  205 + $.ajax({
  206 + type: "post",
  207 + url: "http://192.168.80.140:8080/gxb-web/programmingMulti/codeRun/api",
  208 + data: JSON.stringify(compileData),
  209 + dataType: "json",
  210 + contentType: "application/json",
  211 + success: function(data) {
  212 + console.log(data);
  213 + },
  214 + error: function() {
  215 + }
  216 + });
158 217 });
159 218  
160 219 /**
... ... @@ -1515,26 +1574,103 @@ $(function() {
1515 1574 resizeWindow: function(thisiframe) {
1516 1575 /* #STRAT: 编辑器自适应窗口 */
1517 1576 var calcHeight = function() {
1518   - var $resultpanel = $("#resultpanel").offset();
1519   - var $recordpanel = $("#recordpanel").offset();
1520   - var $resultoutput = $('#resultoutput').offset();
1521   -
1522   - if (document.URL.indexOf('index.htm') >= 0) {
1523   - $("#recordpanel").height($(window).height() - $recordpanel.top - 16 - 70);
1524   - $("#resultpanel").height($(window).height() - $resultpanel.top - 16 - 70);
1525   - $(".CodeMirror").height($(window).height() - $recordpanel.top - 16 - 70);
1526   - } else {
1527   - $("#recordpanel").height($(window).height() - $recordpanel.top - 16 - 34);
1528   - $("#resultpanel").height($(window).height() - $resultpanel.top - 16 - 34);
1529   - }
1530   - $('#resultoutput').find('.tab-content').height($(window).height() - $resultoutput.top - 164).css({ 'overflow-y': "scroll" })
  1577 + var app = $('#app')
  1578 + var appLeft = $('#appLeft');
  1579 + var appRight = $('#appRight');
  1580 + var handleLM = $('#handleLM');
  1581 + var handleMR = $('#handleMR');
  1582 + var appContainer = $('#appContainer');
  1583 + var appMian = $('#appMian');
  1584 + var appFooter = $('#appFooter');
  1585 + var appMainHeader = $('#appMainHeader')
  1586 + var winWidth = $(window).width();
  1587 + var winHeight = $(window).height();
  1588 +
  1589 + var isLeftResizing = false;
  1590 + var isRightResizing = false;
  1591 + var _width = 0;
  1592 + var _tempWidth = 0;
  1593 + var appLeftRatio = 140 / winWidth;
  1594 + var appRightRatio = 320 / winWidth;
  1595 +
  1596 + appContainer.height($(window).height() - appFooter.height());
  1597 + appLeft.width(parseInt($(window).width() * appLeftRatio));
  1598 + appRight.width(parseInt($(window).width() * appRightRatio));
  1599 + appMian.width(parseInt($(window).width() - appLeft.width() - appRight.width()));
  1600 + appMainHeader.css('margin-left', -appLeft.width());
  1601 +
  1602 + $(window).resize(function(event) {
  1603 + /* Act on the event */
  1604 + appContainer.height($(window).height() - appFooter.height());
  1605 + appLeft.width(parseInt($(window).width() * appLeftRatio));
  1606 + appRight.width(parseInt($(window).width() * appRightRatio));
  1607 + appMian.width(parseInt($(window).width() - appLeft.width() - appRight.width()));
  1608 + appMainHeader.css('margin-left', -appLeft.width());
  1609 + });
1531 1610  
1532   - /*保证编辑器都尺寸自动变化（包括滚动条）*/
1533   - if (typeof GBCodePlayBack.htmleditor !== 'undefined' && typeof GBCodePlayBack.csseditor !== 'undefined' && typeof GBCodePlayBack.jseditor !== 'undefined') {
1534   - GBCodePlayBack.htmleditor.refresh();
1535   - GBCodePlayBack.csseditor.refresh();
1536   - GBCodePlayBack.jseditor.refresh();
1537   - }
  1611 + // handleLM.on('mousedown', function (e) {
  1612 + // isLeftResizing = true;
  1613 + // });
  1614 + // handleMR.on('mousedown', function (e) {
  1615 + // isRightResizing = true;
  1616 + // });
  1617 +
  1618 + // $(document).on('mousemove', function (e) {
  1619 + // if (!isLeftResizing && !isRightResizing){
  1620 + // return;
  1621 + // }
  1622 +
  1623 + // if(isLeftResizing){
  1624 + // _tempWidth = e.clientX;
  1625 + // }else if(isRightResizing){
  1626 + // _tempWidth = app.width() - e.clientX;
  1627 + // }
  1628 +
  1629 + // if(_tempWidth <= 80){
  1630 + // _width = 80;
  1631 + // }else if(_tempWidth >= 230){
  1632 + // _width = 230;
  1633 + // }else{
  1634 + // _width = _tempWidth;
  1635 + // }
  1636 +
  1637 + // if(isLeftResizing){
  1638 + // appLeft.width(_width);
  1639 + // appMian.width($(window).width() - appRight.width() - _width);
  1640 + // }
  1641 +
  1642 + // if(isRightResizing){
  1643 + // appRight.width(_width);
  1644 + // appMian.width($(window).width() - appLeft.width() - _width);
  1645 + // }
  1646 +
  1647 + // }).on('mouseup', function (e) {
  1648 + // // stop resizing
  1649 + // isLeftResizing = false;
  1650 + // isRightResizing = false;
  1651 + // });
  1652 +
  1653 + // back ===================================
  1654 + // var $resultpanel = $("#resultpanel").offset();
  1655 + // var $recordpanel = $("#recordpanel").offset();
  1656 + // var $resultoutput = $('#resultoutput').offset();
  1657 +
  1658 + // if (document.URL.indexOf('index.htm') >= 0) {
  1659 + // $("#recordpanel").height($(window).height() - $recordpanel.top - 16 - 70);
  1660 + // $("#resultpanel").height($(window).height() - $resultpanel.top - 16 - 70);
  1661 + // $(".CodeMirror").height($(window).height() - $recordpanel.top - 16 - 70);
  1662 + // } else {
  1663 + // $("#recordpanel").height($(window).height() - $recordpanel.top - 16 - 34);
  1664 + // $("#resultpanel").height($(window).height() - $resultpanel.top - 16 - 34);
  1665 + // }
  1666 + // $('#resultoutput').find('.tab-content').height($(window).height() - $resultoutput.top - 164).css({ 'overflow-y': "scroll" })
  1667 +
  1668 + // /*保证编辑器都尺寸自动变化（包括滚动条）*/
  1669 + // if (typeof GBCodePlayBack.htmleditor !== 'undefined' && typeof GBCodePlayBack.csseditor !== 'undefined' && typeof GBCodePlayBack.jseditor !== 'undefined') {
  1670 + // GBCodePlayBack.htmleditor.refresh();
  1671 + // GBCodePlayBack.csseditor.refresh();
  1672 + // GBCodePlayBack.jseditor.refresh();
  1673 + // }
1538 1674 }
1539 1675  
1540 1676 $(window).resize(function() {
... ... @@ -1888,19 +2024,28 @@ $(function() {
1888 2024 return false;
1889 2025 }
1890 2026  
1891   - setHtmlButton(_languageid, 'java');
  2027 + setHtmlButton(_languageid, 'JAVA');
1892 2028  
1893 2029 for (var i = 0; i < _datalist.length; i++) {
1894 2030 if(!_datalist[i].isParent){
1895   - treeLinkEditor.push({name: _datalist[i].name, record: _datalist[i].name + 'Record', replay: _datalist[i].name + 'Replay'});
1896   - recordTemplate += '<div id="'+ _datalist[i].name +'RecordWrap"><textarea id="'+ _datalist[i].name + 'Record" title="'+ _datalist[i].name +'" style="display: none;">'+ _datalist[i].name +'</textarea></div>'
1897   - replayTemplate += '<div id="'+ _datalist[i].name +'ReplayWrap"><textarea id="'+ _datalist[i].name + 'Replay" title="'+ _datalist[i].name +'" style="display: none;">'+ _datalist[i].name +'</textarea></div>'
  2031 + treeLinkEditor.push({
  2032 + "name": ZTREE.manageName(_datalist[i].name),
  2033 + "file": _datalist[i].name,
  2034 + "filePath": ZTREE.getTreePath(_datalist[i].name),
  2035 + "record": ZTREE.manageName(_datalist[i].name) + 'Record',
  2036 + "replay": ZTREE.manageName(_datalist[i].name) + 'Replay'
  2037 + });
  2038 + recordTemplate += '<div id="'+ ZTREE.manageName(_datalist[i].name) +'RecordWrap"><textarea id="'+ ZTREE.manageName(_datalist[i].name) + 'Record" title="'+ ZTREE.manageName(_datalist[i].name) +'" style="display: none;"></textarea></div>'
  2039 + replayTemplate += '<div id="'+ ZTREE.manageName(_datalist[i].name) +'ReplayWrap"><textarea id="'+ ZTREE.manageName(_datalist[i].name) + 'Replay" title="'+ ZTREE.manageName(_datalist[i].name) +'" style="display: none;"></textarea></div>'
1898 2040 }
1899 2041 }
  2042 +
1900 2043 $('#recordzone').append(recordTemplate);
1901 2044 $('#replayzone').append(replayTemplate);
  2045 +
1902 2046 for (var i = 0; i < treeLinkEditor.length; i++) {
1903   - treeLinkEditor[i].CodeMirrorRecord = CodeMirror.fromTextArea(document.getElementById(treeLinkEditor[i].record), {
  2047 +
  2048 + treeLinkEditor[i].CodeMirrorRecord = CodeMirror.fromTextArea($('#' + treeLinkEditor[i].record)[0], {
1904 2049 value: '输入HTML代码',
1905 2050 mode: "text/x-java",
1906 2051 lineNumbers: true,
... ... @@ -1925,8 +2070,7 @@ $(function() {
1925 2070 // console.log(em);
1926 2071 }
1927 2072 });
1928   -
1929   - treeLinkEditor[i].CodeMirrorReplay = CodeMirror.fromTextArea(document.getElementById(treeLinkEditor[i].replay), {
  2073 + treeLinkEditor[i].CodeMirrorReplay = CodeMirror.fromTextArea($('#' + treeLinkEditor[i].replay)[0], {
1930 2074 value: '输入HTML代码',
1931 2075 mode: "text/x-java",
1932 2076 lineNumbers: true,
... ... @@ -1938,11 +2082,12 @@ $(function() {
1938 2082 onCursorActivity: function(em) {
1939 2083 }
1940 2084 });
  2085 +
  2086 + treeLinkEditor[i].CodeMirrorRecordId = treeLinkEditor[i].record + 'CodeMirror';
  2087 + treeLinkEditor[i].CodeMirrorReplayId = treeLinkEditor[i].replay + 'CodeMirror';
1941 2088  
1942   - treeLinkEditor[i].codemirrorrecord = treeLinkEditor[i].record + 'CodeMirror';
1943   - treeLinkEditor[i].codemirrorreplay = treeLinkEditor[i].replay + 'CodeMirror';
1944   - $('#' + treeLinkEditor[i].record).next().attr('id', treeLinkEditor[i].codemirrorrecord).height($('#appMian').height() - $('.appFooter').height()).hide();
1945   - $('#' + treeLinkEditor[i].replay).next().attr('id', treeLinkEditor[i].codemirrorreplay).height($('#appMian').height() - $('.appFooter').height()).hide();
  2089 + $('#' + treeLinkEditor[i].record).next().attr('id', treeLinkEditor[i].CodeMirrorRecordId).hide();
  2090 + $('#' + treeLinkEditor[i].replay).next().attr('id', treeLinkEditor[i].CodeMirrorReplayId).hide();
1946 2091 }
1947 2092 // treeLinkEditor[0].CodeMirrorEditor.hide()
1948 2093 // 默认显示第一个文件夹的第一个文件
... ... @@ -1959,7 +2104,7 @@ $(function() {
1959 2104 } else if (_languageid == 4) {
1960 2105 setHtmlButton(_languageid, 'Python');
1961 2106 } else if (_languageid == 10) {
1962   - setHtmlButton(_languageid, 'java');
  2107 + setHtmlButton(_languageid, 'JAVA');
1963 2108 GBCodePlayBack.htmleditor.setOption('mode', 'text/x-java');
1964 2109 } else if (_languageid == 11) {
1965 2110 setHtmlButton(_languageid, 'C');
... ... @@ -1987,7 +2132,7 @@ $(function() {
1987 2132 // $('#comprunbtngrp').html('<button id="runnow" type="button" data-style="expand-right" class="btn" title="运行代码">&nbsp; 运行</button>');
1988 2133 } else {
1989 2134 $('#fontendrun').addClass('hidden');
1990   - $('#comprunbtngrp').html('<button id="comprun" data-toggle="tooltip" data-placement="bottom" type="button" data-style="expand-right" class="btn" title="编译并运行代码">&nbsp;编译&运行</button>');
  2135 + $('#comprunbtngrp').html('<button id="comprun" data-toggle="tooltip" data-placement="bottom" type="button" data-style="expand-right" class="btn btn-default btn-sm" title="编译并运行代码">&nbsp;编译&运行</button>');
1991 2136  
1992 2137 $('#ifrcontainer').addClass('hidden');
1993 2138 $('#cmprun-output').removeClass('hidden');
... ...
src/js/tree.json
  View file @2cb64ae
1 1 {
2 2 "tree": [
3   - { "id": 1, "pId": 0, "name": "Package1", "open": true, "isParent": true, "collapse": false },
4   - { "id": 11, "pId": 1, "name": "Class1", "type": "java" },
5   - { "id": 12, "pId": 1, "name": "Class2", "type": "java" },
6   - { "id": 13, "pId": 1, "name": "Class3", "type": "java" },
7   - { "id": 14, "pId": 1, "name": "Class4", "type": "java" },
8   - { "id": 15, "pId": 1, "name": "Class5", "type": "java" },
9   - { "id": 2, "pId": 0, "name": "Package2", "open": true, "isParent": true, "expand": true },
10   - { "id": 21, "pId": 2, "name": "ClassA", "type": "java" },
11   - { "id": 22, "pId": 2, "name": "ClassB", "type": "java" },
12   - { "id": 23, "pId": 2, "name": "ClassC", "type": "java" },
13   - { "id": 24, "pId": 2, "name": "ClassD", "type": "java" },
14   - { "id": 25, "pId": 2, "name": "ClassE", "type": "java" }
  3 + { "id": 1, "pId": 0, "name": "package1", "open": true, "isParent": true, "collapse": false },
  4 + { "id": 11, "pId": 1, "name": "Class1.java", "type": "java" },
  5 + { "id": 12, "pId": 1, "name": "Class2.java", "type": "java" },
  6 + { "id": 13, "pId": 1, "name": "Class3.java", "type": "java" },
  7 + { "id": 14, "pId": 1, "name": "Class4.java", "type": "java" },
  8 + { "id": 15, "pId": 1, "name": "Class5.java", "type": "java" },
  9 + { "id": 2, "pId": 0, "name": "package2", "open": true, "isParent": true, "expand": true },
  10 + { "id": 21, "pId": 2, "name": "ClassA.java", "type": "java" },
  11 + { "id": 22, "pId": 2, "name": "ClassB.java", "type": "java" },
  12 + { "id": 23, "pId": 2, "name": "ClassC.java", "type": "java" },
  13 + { "id": 24, "pId": 2, "name": "ClassD.java", "type": "java" },
  14 + { "id": 25, "pId": 2, "name": "ClassE.java", "type": "java" }
15 15 ]
16 16 }
... ...
src/js/treeLinkEditor.json 0 → 100644
  View file @2cb64ae
  1 +[{
  2 + "name": "Class1",
  3 + "file": "Class1.java",
  4 + "filePath": "package1/Class1.java",
  5 + "record": "Class1Record",
  6 + "replay": "Class1Replay",
  7 + "CodeMirrorRecord": {},
  8 + "CodeMirrorReplay": {},
  9 + "CodeMirrorRecordId": "Class1RecordCodeMirror",
  10 + "CodeMirrorReplayId": "Class1ReplayCodeMirror"
  11 +}]
... ...