梁美英 / 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,6 +11,8 @@ html,body{
11 #appContainer{ 11 #appContainer{
12 float: left; 12 float: left;
13 overflow: hidden; 13 overflow: hidden;
  14 + width: 100%;
  15 + height: calc(100% - 80px);
14 } 16 }
15 #app #appLeft, 17 #app #appLeft,
16 #app #appMian, 18 #app #appMian,
@@ -36,7 +38,7 @@ html,body{ @@ -36,7 +38,7 @@ html,body{
36 } 38 }
37 #appMian{ 39 #appMian{
38 background-color: #fff; 40 background-color: #fff;
39 - width: 100%; 41 + width: calc(100% - 140px - 320px);
40 } 42 }
41 #handleLM, 43 #handleLM,
42 #handleMR{ 44 #handleMR{
@@ -81,37 +83,72 @@ html,body{ @@ -81,37 +83,72 @@ html,body{
81 .handle-bar:after{ 83 .handle-bar:after{
82 right: 2px; 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 ul.ztree{ 92 ul.ztree{
86 background-color: transparent; 93 background-color: transparent;
87 width: 100%; 94 width: 100%;
88 - height: 100%;  
89 - padding: 10px 8px; 95 + height: 73%;
  96 + padding: 10px 15px;
90 -webkit-box-sizing: border-box; 97 -webkit-box-sizing: border-box;
91 -moz-box-sizing: border-box; 98 -moz-box-sizing: border-box;
92 box-sizing: border-box; 99 box-sizing: border-box;
93 margin: 0; 100 margin: 0;
94 border: none; 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 textarea[id^="tab"]{ display: none; } 134 textarea[id^="tab"]{ display: none; }
98 textarea[id^="tab"].active{ display: block; } 135 textarea[id^="tab"].active{ display: block; }
99 .CodeMirror{ padding: 0; } 136 .CodeMirror{ padding: 0; }
100 137
101 -  
102 -  
103 -#appMianHeader{ 138 +#appMainHeader{
104 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%); 139 background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
105 - background-image: -o-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);  
106 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%); 140 background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
107 height: 60px; 141 height: 60px;
  142 + margin-left: -140px;
108 } 143 }
109 -#appMianHeader .nav-tabs {  
110 - border-bottom: none; 144 +#appMainHeader{
111 padding: 0 8px; 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 margin-right: 0; 152 margin-right: 0;
116 line-height: 1.428571429; 153 line-height: 1.428571429;
117 border: none !important; 154 border: none !important;
@@ -122,13 +159,95 @@ textarea[id^="tab"].active{ display: block; } @@ -122,13 +159,95 @@ textarea[id^="tab"].active{ display: block; }
122 color: #ADE6FD; 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 color: #FFF; 165 color: #FFF;
129 } 166 }
130 -#appMianHeader .iconfont{ 167 +#appMainHeader .iconfont{
131 font-size: 20px; 168 font-size: 20px;
132 vertical-align: middle; 169 vertical-align: middle;
133 margin-right: 6px; 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 \ No newline at end of file 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,86 +48,6 @@
48 48
49 <link rel="stylesheet" href="css/demo.css"> 49 <link rel="stylesheet" href="css/demo.css">
50 <script type="text/javascript" src="js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script> 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 <script src="js/gb.js"></script> 51 <script src="js/gb.js"></script>
132 <!-- <script src="js/gbreplayer.js"></script> --> 52 <!-- <script src="js/gbreplayer.js"></script> -->
133 53
@@ -153,15 +73,22 @@ @@ -153,15 +73,22 @@
153 <div id="app" class="wrapper"> 73 <div id="app" class="wrapper">
154 <div id="appContainer"> 74 <div id="appContainer">
155 <div id="appLeft"> 75 <div id="appLeft">
  76 + <div class="tree-header">目录</div>
156 <ul id="folder" class="ztree"></ul> 77 <ul id="folder" class="ztree"></ul>
157 <div id="handleLM"></div> 78 <div id="handleLM"></div>
158 </div> 79 </div>
159 <div id="appMian"> 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 <li class="active"><a href="#recordzone" data-toggle="tab"><i class="icon iconfont icon-suspend"></i>课程录制区</a></li> 83 <li class="active"><a href="#recordzone" data-toggle="tab"><i class="icon iconfont icon-suspend"></i>课程录制区</a></li>
163 <li><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>课程预览区</a></li> 84 <li><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>课程预览区</a></li>
164 </ul> 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 </div> 92 </div>
166 <div id="textarea"> 93 <div id="textarea">
167 <div id="recordzone" class="active"> 94 <div id="recordzone" class="active">
@@ -174,6 +101,44 @@ @@ -174,6 +101,44 @@
174 <div id="handleMR"></div> 101 <div id="handleMR"></div>
175 </div> 102 </div>
176 <div id="appRight"> 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 </div> 142 </div>
178 </div> 143 </div>
179 <div id="appFooter"> 144 <div id="appFooter">
src/js/gb.js
  View file @2cb64ae
@@ -10,15 +10,16 @@ $(function() { @@ -10,15 +10,16 @@ $(function() {
10 _source = getQuery('source'); 10 _source = getQuery('source');
11 var $recording_time = $('.recording-time'); 11 var $recording_time = $('.recording-time');
12 var tag = 1; // 标记第一次暂停 12 var tag = 1; // 标记第一次暂停
13 - var treeData = {}; // 目录树  
14 var htmlhlLine = null, 13 var htmlhlLine = null,
15 csshlLine = null, 14 csshlLine = null,
16 jshlLine = null; 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 var ZTREE = { 24 var ZTREE = {
24 /** 25 /**
@@ -34,15 +35,11 @@ $(function() { @@ -34,15 +35,11 @@ $(function() {
34 treeObj = $.fn.zTree.getZTreeObj("folder"); 35 treeObj = $.fn.zTree.getZTreeObj("folder");
35 treeObj.expandNode(treeNode); 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,29 +49,32 @@ $(function() {
52 * TODO treeNode放到一个变量或者隐藏域里面 49 * TODO treeNode放到一个变量或者隐藏域里面
53 */ 50 */
54 showEdite: function (treeNode){ 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 for (var i = 0; i < treeLinkEditor.length; i++) { 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,20 +83,34 @@ $(function() {
83 * @param {[type]} treeNode 点击了哪一个目录 83 * @param {[type]} treeNode 点击了哪一个目录
84 * TODO treeNode放到一个变量或者隐藏域里面 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 * 根据id获取当前编辑器对应的目录树文件 116 * 根据id获取当前编辑器对应的目录树文件
@@ -105,11 +119,12 @@ $(function() { @@ -105,11 +119,12 @@ $(function() {
105 * @param {[type]} id 代码编辑器的id 119 * @param {[type]} id 代码编辑器的id
106 */ 120 */
107 ,getCurrentEditor: function (id){ 121 ,getCurrentEditor: function (id){
108 - var _id = id || treeLinkEditor[0].codemirrorrecord, 122 + console.log(id);
  123 + var _id = id || treeLinkEditor[0].CodeMirrorRecordId,
109 _name; 124 _name;
110 125
111 for (var i = 0; i < treeLinkEditor.length; i++) { 126 for (var i = 0; i < treeLinkEditor.length; i++) {
112 - if(treeLinkEditor[i].codemirrorrecord == _id){ 127 + if(treeLinkEditor[i].CodeMirrorRecordId == _id){
113 // console.log(treeLinkEditor[i]); 128 // console.log(treeLinkEditor[i]);
114 _name = treeLinkEditor[i].name; 129 _name = treeLinkEditor[i].name;
115 } 130 }
@@ -117,44 +132,88 @@ $(function() { @@ -117,44 +132,88 @@ $(function() {
117 132
118 return _name; 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 var node = treeObj.getNodeByParam("name", _thisName, null); 181 var node = treeObj.getNodeByParam("name", _thisName, null);
129 - // console.log(node);  
130 182
131 treeObj.selectNode(node, false, true); 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 $(document).on('click', '#cancel', function(event) { 187 $(document).on('click', '#cancel', function(event) {
142 event.preventDefault(); 188 event.preventDefault();
143 /* Act on the event */ 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,26 +1574,103 @@ $(function() {
1515 resizeWindow: function(thisiframe) { 1574 resizeWindow: function(thisiframe) {
1516 /* #STRAT: 编辑器自适应窗口 */ 1575 /* #STRAT: 编辑器自适应窗口 */
1517 var calcHeight = function() { 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 $(window).resize(function() { 1676 $(window).resize(function() {
@@ -1888,19 +2024,28 @@ $(function() { @@ -1888,19 +2024,28 @@ $(function() {
1888 return false; 2024 return false;
1889 } 2025 }
1890 2026
1891 - setHtmlButton(_languageid, 'java'); 2027 + setHtmlButton(_languageid, 'JAVA');
1892 2028
1893 for (var i = 0; i < _datalist.length; i++) { 2029 for (var i = 0; i < _datalist.length; i++) {
1894 if(!_datalist[i].isParent){ 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 $('#recordzone').append(recordTemplate); 2043 $('#recordzone').append(recordTemplate);
1901 $('#replayzone').append(replayTemplate); 2044 $('#replayzone').append(replayTemplate);
  2045 +
1902 for (var i = 0; i < treeLinkEditor.length; i++) { 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 value: '输入HTML代码', 2049 value: '输入HTML代码',
1905 mode: "text/x-java", 2050 mode: "text/x-java",
1906 lineNumbers: true, 2051 lineNumbers: true,
@@ -1925,8 +2070,7 @@ $(function() { @@ -1925,8 +2070,7 @@ $(function() {
1925 // console.log(em); 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 value: '输入HTML代码', 2074 value: '输入HTML代码',
1931 mode: "text/x-java", 2075 mode: "text/x-java",
1932 lineNumbers: true, 2076 lineNumbers: true,
@@ -1938,11 +2082,12 @@ $(function() { @@ -1938,11 +2082,12 @@ $(function() {
1938 onCursorActivity: function(em) { 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 // treeLinkEditor[0].CodeMirrorEditor.hide() 2092 // treeLinkEditor[0].CodeMirrorEditor.hide()
1948 // 默认显示第一个文件夹的第一个文件 2093 // 默认显示第一个文件夹的第一个文件
@@ -1959,7 +2104,7 @@ $(function() { @@ -1959,7 +2104,7 @@ $(function() {
1959 } else if (_languageid == 4) { 2104 } else if (_languageid == 4) {
1960 setHtmlButton(_languageid, 'Python'); 2105 setHtmlButton(_languageid, 'Python');
1961 } else if (_languageid == 10) { 2106 } else if (_languageid == 10) {
1962 - setHtmlButton(_languageid, 'java'); 2107 + setHtmlButton(_languageid, 'JAVA');
1963 GBCodePlayBack.htmleditor.setOption('mode', 'text/x-java'); 2108 GBCodePlayBack.htmleditor.setOption('mode', 'text/x-java');
1964 } else if (_languageid == 11) { 2109 } else if (_languageid == 11) {
1965 setHtmlButton(_languageid, 'C'); 2110 setHtmlButton(_languageid, 'C');
@@ -1987,7 +2132,7 @@ $(function() { @@ -1987,7 +2132,7 @@ $(function() {
1987 // $('#comprunbtngrp').html('<button id="runnow" type="button" data-style="expand-right" class="btn" title="运行代码">&nbsp; 运行</button>'); 2132 // $('#comprunbtngrp').html('<button id="runnow" type="button" data-style="expand-right" class="btn" title="运行代码">&nbsp; 运行</button>');
1988 } else { 2133 } else {
1989 $('#fontendrun').addClass('hidden'); 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 $('#ifrcontainer').addClass('hidden'); 2137 $('#ifrcontainer').addClass('hidden');
1993 $('#cmprun-output').removeClass('hidden'); 2138 $('#cmprun-output').removeClass('hidden');
src/js/tree.json
  View file @2cb64ae
1 { 1 {
2 "tree": [ 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 +}]