梁美英 / programming · Commits

Commit 35349457b78c1dc7a2e4cda18e4b21cdf18dc7db

Authored by ykxie
2 parents 40c82262 630c0bdb

Merge branch 'feature/20170112_Multiple_files' of gitlab.gaoxiaobang.com:kira/pr… 

…ogramming into new_Kira

Conflicts:
	src/js/gb.js
Inline Side-by-side
Showing 5 changed files with 431 additions and 338 deletions
src/css/demo.css
  View file @3534945
@@ -114,12 +114,18 @@ ul.ztree li a{ @@ -114,12 +114,18 @@ ul.ztree li a{
114 border: none; 114 border: none;
115 opacity: 1; 115 opacity: 1;
116 } 116 }
  117 +ul.ztree li span.node_name input{
  118 + outline: none;
  119 +}
117 ul.ztree li span.button.switch{ 120 ul.ztree li span.button.switch{
118 display: none; 121 display: none;
119 } 122 }
120 ul.ztree li span.button.ico_open, 123 ul.ztree li span.button.ico_open,
121 ul.ztree li span.button.ico_close, 124 ul.ztree li span.button.ico_close,
122 -ul.ztree li span.button.ico_docu{ 125 +ul.ztree li span.button.ico_docu,
  126 +ul.ztree li span.button.add,
  127 +ul.ztree li span.button.edit,
  128 +ul.ztree li span.button.remove{
123 margin-top: 4px; 129 margin-top: 4px;
124 margin-right: 2px; 130 margin-right: 2px;
125 vertical-align: top; 131 vertical-align: top;
@@ -131,6 +137,9 @@ ul.ztree li span.button.ico_close{ @@ -131,6 +137,9 @@ ul.ztree li span.button.ico_close{
131 ul.ztree li span.button.ico_docu{ 137 ul.ztree li span.button.ico_docu{
132 background: url(../img/icon-files-java.png) no-repeat scroll center center transparent; 138 background: url(../img/icon-files-java.png) no-repeat scroll center center transparent;
133 } 139 }
  140 +ul.ztree li span.button.add {
  141 + background-position:-144px 0;
  142 +}
134 143
135 textarea[id^="tab"]{ display: none; } 144 textarea[id^="tab"]{ display: none; }
136 textarea[id^="tab"].active{ display: block; } 145 textarea[id^="tab"].active{ display: block; }
src/css/recording.css
  View file @3534945
@@ -554,7 +554,7 @@ button { @@ -554,7 +554,7 @@ button {
554 display: inline-flex; 554 display: inline-flex;
555 z-index: 999; 555 z-index: 999;
556 background-color: #333; 556 background-color: #333;
557 - padding: 4px 74px 0 32px; 557 + padding: 4px 10px 0 10px;
558 box-shadow: 0px 2px 10px #333; } 558 box-shadow: 0px 2px 10px #333; }
559 559
560 #full-screen, #back-screen { 560 #full-screen, #back-screen {
src/js/gb.js
  View file @3534945
1 // 2016-11-4 By Kira 1 // 2016-11-4 By Kira
  2 +
2 $(function() { 3 $(function() {
3 /** 4 /**
4 * 互动编程播放页面参数 5 * 互动编程播放页面参数
@@ -33,97 +34,249 @@ $(function() { @@ -33,97 +34,249 @@ $(function() {
33 csshlLine = null, 34 csshlLine = null,
34 jshlLine = null; 35 jshlLine = null;
35 36
36 - if(document.URL.indexOf('player') >= 0){  
37 - isReplayPage = true;  
38 - // if(!_codeReplayId || !_userId || !_role || !_chapterId){  
39 - // utils.errorVisit.template = $('<div id="tips" class="tips">' +  
40 - // '<div class="tips-inner">' +  
41 - // '访问参数出错，请联系管理人员。' +  
42 - // '</div>' +  
43 - // '</div>');  
44 - // utils.errorVisit.show();  
45 - // }else{  
46 - // $('#app').show();  
47 - // }  
48 - // }else{  
49 - // if(!_languageid || !_userId || !_role || !_source){  
50 - // utils.errorVisit.show();  
51 - // }else{  
52 - // $('#app').show();  
53 - // } 37 + var playUrl;
  38 + var playData;
  39 + var playTreePathData = {"tree": []};
  40 +
  41 + var playFoo = {
  42 + showPLayError: function(){
  43 + utils.errorVisit.template = $('<div id="tips" class="tips">' +
  44 + '<div class="tips-inner">' +
  45 + '访问参数出错，请联系管理人员。' +
  46 + '</div>' +
  47 + '</div>');
  48 + utils.errorVisit.show();
  49 + },
  50 + programFileListToTreeJson: function(arr){
  51 + var playTreeFolder = [],
  52 + playTreeFile = [];
  53 + var n = 0,
  54 + m = 0
  55 + l = 0;
  56 + playData.programmingFileList.length = 10;
  57 + for (var i = 0; i < playData.programmingFileList.length; i++) {
  58 + var temArr = playData.programmingFileList[i].path.split('/');
  59 + if(playTreeFolder.length > 0){
  60 + for (var j = 0; j < playTreeFolder.length; j++) {
  61 + if(playTreeFolder[j]){
  62 + if(playTreeFolder[j].name != temArr[0]){
  63 + playTreeFolder[n] = {"name": temArr[0], "open": true, "isParent": true, "collapse": false };
  64 + }else{
  65 + // console.log('playTreeFolder[j] else');
  66 + }
  67 + }
  68 + }
  69 + }else{
  70 + playTreeFolder[n] = {"name": temArr[0], "open": true, "isParent": true, "collapse": false };
  71 + n++;
  72 + }
  73 +
  74 + if(playTreeFile.length > 0){
  75 + for (var j = 0; j < playTreeFile.length; j++) {
  76 + if(playTreeFile[j]){
  77 + if(playTreeFile[j].name != temArr[1]){
  78 + playTreeFile[m] = {'pName': temArr[0], "name": temArr[1], "type": "java" };
  79 + }else{
  80 + playTreeFile[m] = {'pName': temArr[0], "name": temArr[1], "type": "java" };
  81 + m++;
  82 + }
  83 + }
  84 + }
  85 + }else{
  86 + playTreeFile[m] = {'pName': temArr[0], "name": temArr[1], "type": "java" };
  87 + m++;
  88 + }
  89 + }
  90 + for (var i = 0; i < playTreeFolder.length; i++) {
  91 + playTreeFolder[i].pId = 0;
  92 + playTreeFolder[i].id = i+1;
  93 + playTreePathData['tree'].push(playTreeFolder[i]);
  94 + }
  95 + for (var i = 0; i < playTreeFile.length; i++) {
  96 + for (var j = 0; j < playTreeFolder.length; j++) {
  97 + if(playTreeFile[i].pName == playTreeFolder[j].name){
  98 + playTreeFile[i].id = (playTreeFolder[j].id.toString() + i.toString()) * 1;
  99 + playTreeFile[i].pId = playTreeFolder[j].id;
  100 + playTreePathData.tree.push(playTreeFile[i]);
  101 + }
  102 + }
  103 + }
  104 + return playTreePathData.tree;
  105 + }
54 } 106 }
55 - $('#app').show(); 107 +
56 // 储存一个树结构和编辑器的对应关系 108 // 储存一个树结构和编辑器的对应关系
57 var treeLinkEditor = [], // 缓存整个目录树结构和代码编辑器的关系 109 var treeLinkEditor = [], // 缓存整个目录树结构和代码编辑器的关系
58 treeData = {}, // 缓存目录树返回结果 110 treeData = {}, // 缓存目录树返回结果
59 mainPath, // 运行编译时候需要知道当前是哪个文件 111 mainPath, // 运行编译时候需要知道当前是哪个文件
60 fileList, // 有值的文件数据结构 112 fileList, // 有值的文件数据结构
61 treeObj; // 获取ztree对象 113 treeObj; // 获取ztree对象
62 -  
63 - var ZTREE = {  
64 - /**  
65 - * ztreeSetting 配置文件  
66 - * @Author syantao  
67 - * Created by Keystion on 2017-01-19  
68 - */  
69 - config: {  
70 - view: { showLine: false }  
71 - ,data: {  
72 - simpleData: { enable: true } 114 + var treeFoo = {
  115 + beforeClick: function (treeId, treeNode){
  116 + console.info('ZTREE.config.callback.beforeClick');
  117 + console.log('点击了 ' + treeNode.name);
  118 + console.log(treeNode);
  119 + // 判断是否点击了文件夹
  120 + if (treeNode.isParent) {
  121 + return false;
73 } 122 }
74 - ,callback: {  
75 - /**  
76 - * ztree 每一项点击事件  
77 - * @Author syantao  
78 - * Created by Keystion on 2017-01-19  
79 - */  
80 - beforeClick: function(treeId, treeNode){  
81 - // console.info('ZTREE.config.callback.beforeClick');  
82 - // console.log('点击了 ' + treeNode.name);  
83 - // console.log(treeNode);  
84 - // 判断是否点击了文件夹 123 + treeObj.expandNode(treeNode);
  124 + console.log(GBCodePlayBack.isRecordPlay);
  125 + if (GBCodePlayBack.isRecordPlay == 1) {
  126 + GBCodePlayBack.check_tree_time = new Date().getTime(); // 获取焦点的时间
  127 + var recordobj = {
  128 + intervaltime: GBCodePlayBack.check_tree_time - GBCodePlayBack.record_startime,
  129 + editor: 'tab',
  130 + changeobj: {
  131 + from: {
  132 + ch: 0,
  133 + line: 0,
  134 + },
  135 + text: '',
  136 + to: {
  137 + ch: 0,
  138 + line: 0,
  139 + }
  140 + },
  141 + treefile: treeNode,
  142 + trigger: 0,
  143 + playTime: 0
  144 + };
  145 + GBCodePlayBack.records.push(recordobj);
  146 + console.log(GBCodePlayBack.records);
  147 + GBCodePlayBack.record_startime = GBCodePlayBack.check_tree_time;
  148 + }
  149 +
  150 + console.log(GBCodePlayBack.records);
  151 + // 处理显示目录树对应的编辑器目录
  152 + ZTREE.showEdite({'treeNode': treeNode});
  153 + },
  154 + beforeDrag: function (treeId, treeNodes) {
  155 + return false;
  156 + },
  157 + beforeEditName: function (treeId, treeNode) {
  158 + treeObj.selectNode(treeNode);
  159 + setTimeout(function() {
  160 + // if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
  161 + // setTimeout(function() {
  162 + treeObj.editName(treeNode);
  163 + // }, 0);
  164 + // }
  165 + }, 0);
  166 + return false;
  167 + },
  168 + renameAlert: function (str, treeNode){
  169 + setTimeout(function() {
  170 + // treeObj.cancelEditName(newName);
  171 + alert(str);
  172 + }, 0);
85 173
86 - console.log('==========================================')  
87 - console.log(treeNode)  
88 - console.log('==========================================') 174 + // 优化体验再次进入编辑状态
  175 + setTimeout(function() {
  176 + treeObj.selectNode(treeNode);
  177 + treeObj.editName(treeNode);
  178 + }, 0);
  179 + },
  180 + beforeRename: function (treeId, treeNode, newName, isCancel) {
  181 + var _this = this;
  182 + // console.info('beforeRename');
  183 + // console.info(treeNode);
  184 + if (newName.length == 0) {
  185 + treeFoo.renameAlert("文件名名称不能为空.", treeNode);
  186 + return false;
  187 + }else if(newName != treeNode.name){
  188 + for (var i = 0; i < treeLinkEditor.length; i++) {
89 189
90 - if (treeNode.isParent) { 190 + // 判断是否重名
  191 + if(treeLinkEditor[i].file === newName){
  192 + treeFoo.renameAlert("文件名“" + newName + "”已被占用，请选取其他名称。", treeNode);
91 return false; 193 return false;
  194 + }else if(/.java$/.test(newName) && newName.split('.').length > 2){
  195 + treeFoo.renameAlert("文件名“" + newName + "”有误，请选取其他名称。", treeNode);
  196 + return false;
  197 + }else if(!/.java$/.test(newName)){
  198 + treeFoo.renameAlert("文件后缀名“" + newName + "”有误，请选取其他名称。", treeNode);
  199 + return false;
  200 + }else{
  201 + console.log('else');
  202 + // 更新 treeLinkEditor 存值
  203 + if(treeLinkEditor[i].file === treeNode.name){
  204 + var _temName = treeLinkEditor[i].name;
  205 + var _name = ZTREE.manageName(newName);
  206 +
  207 + // 缓存值得更新
  208 + treeLinkEditor[i].name = _name;
  209 + treeLinkEditor[i].file = newName;
  210 + treeLinkEditor[i].filePath = ZTREE.getTreePath(treeNode.name, newName);
  211 + treeLinkEditor[i].record = _name + 'Record';
  212 + treeLinkEditor[i].replay = _name + 'Replay';
  213 + treeLinkEditor[i].CodeMirrorRecordId = treeLinkEditor[i].record + 'CodeMirror';
  214 + treeLinkEditor[i].CodeMirrorReplayId = treeLinkEditor[i].replay + 'CodeMirror';
  215 +
  216 + mainPath = treeLinkEditor[i].filePath;
  217 +
  218 + // 更新DOM相关
  219 + $('#'+ _temName +'RecordWrap').attr({
  220 + id: _name +'RecordWrap'
  221 + });
  222 + $('#'+ _temName + 'Record').attr({
  223 + id: _name + 'Record',
  224 + title: _name
  225 + });
  226 + $('#'+ _temName + 'RecordCodeMirror').attr({
  227 + id: _name + 'RecordCodeMirror'
  228 + });
  229 +
  230 + $('#'+ _temName +'ReplayWrap').attr({
  231 + id: _name +'ReplayWrap'
  232 + });
  233 + $('#'+ _temName + 'Replay').attr({
  234 + id: _name + 'Replay',
  235 + title: _name
  236 + });
  237 + $('#'+ _temName + 'ReplayCodeMirror').attr({
  238 + id: _name + 'ReplayCodeMirror'
  239 + });
  240 + // treeLinkEditor[i].CodeMirrorRecord.setValue(treeLinkEditor[i].CodeMirrorRecord.getValue() + '\n\n'+ _name);
  241 + }
92 } 242 }
93 - treeObj = $.fn.zTree.getZTreeObj("folder");  
94 - treeObj.expandNode(treeNode);  
95 - // console.log(GBCodePlayBack.isRecordPlay);  
96 - if (GBCodePlayBack.isRecordPlay == 1) {  
97 - GBCodePlayBack.check_tree_time = new Date().getTime(); // 获取焦点的时间  
98 - var recordobj = {  
99 - intervaltime: GBCodePlayBack.check_tree_time - GBCodePlayBack.record_startime,  
100 - editor: 'tab',  
101 - changeobj: {  
102 - from: {  
103 - ch: 0,  
104 - line: 0,  
105 - },  
106 - text: '',  
107 - to: {  
108 - ch: 0,  
109 - line: 0,  
110 - }  
111 - },  
112 - treefile: treeNode,  
113 - trigger: 0,  
114 - playTime: 0  
115 - };  
116 - GBCodePlayBack.records.push(recordobj);  
117 - // console.log(GBCodePlayBack.records);  
118 - GBCodePlayBack.record_startime = GBCodePlayBack.check_tree_time;  
119 - }  
120 -  
121 - // console.log(GBCodePlayBack.records);  
122 - // 处理显示目录树对应的编辑器目录  
123 - ZTREE.showEdite({'treeNode': treeNode});  
124 } 243 }
  244 + }else{
  245 + isCancel = true;
125 } 246 }
  247 + return true;
  248 + },
  249 + onRename: function (e, treeId, treeNode, isCancel) {
  250 + console.info('onRename');
  251 + },
  252 + showRemoveBtn: function (treeId, treeNode) {
  253 + return !treeNode.isFirstNode;
  254 + },
  255 + showRenameBtn: function (treeId, treeNode) {
  256 + return !treeNode.isLastNode;
126 }, 257 },
  258 + addHoverDom: function (treeId, treeNode) {
  259 + // console.info('addHoverDom');
  260 + // 修复第一个文件夹
  261 + if(treeNode.isParent){
  262 + $('a[title="'+ treeNode.name +'"]').find("#" + treeId + "_" + treeNode.id + "_edit").hide();
  263 + return false;
  264 + }
  265 +
  266 + // 不知道为什么 ztree 最后一项不显示编辑按钮
  267 + // 只能通过改变参数的值来让它显示编辑按钮
  268 + if(treeNode.isLastNode){
  269 + treeNode.isLastNode = false;
  270 + }
  271 + },
  272 + removeHoverDom: function (treeId, treeNode) {
  273 + // console.info('removeHoverDom');
  274 + if(!treeNode.isParent){
  275 + $("#folder_" + treeNode.tId + "_edit").unbind().remove();
  276 + }
  277 + }
  278 + }
  279 + var ZTREE = {
127 /** 280 /**
128 * 通过目录树的点击来显示对应的编辑器 281 * 通过目录树的点击来显示对应的编辑器
129 * @Author syantao 282 * @Author syantao
@@ -176,13 +329,18 @@ $(function() { @@ -176,13 +329,18 @@ $(function() {
176 * TODO treeNode放到一个变量或者隐藏域里面 329 * TODO treeNode放到一个变量或者隐藏域里面
177 */ 330 */
178 // 根据提供的 name 获取 pId , 再根据 pId 获取 夫级 name 331 // 根据提供的 name 获取 pId , 再根据 pId 获取 夫级 name
179 - getTreePath: function (name){  
180 - // console.info('ZTREE.getTreePath'); 332 + // newName 替换 name 更名需求
  333 + getTreePath: function (name, newName){
  334 + console.info('ZTREE.getTreePath');
181 var _pid, _folder, _filename; 335 var _pid, _folder, _filename;
182 for (var i = 0; i < treeData.length; i++) { 336 for (var i = 0; i < treeData.length; i++) {
183 if(treeData[i].name == name){ 337 if(treeData[i].name == name){
184 _pid = treeData[i].pId; 338 _pid = treeData[i].pId;
185 - _filename = treeData[i].name; 339 + if(newName){
  340 + _filename = newName;
  341 + }else{
  342 + _filename = treeData[i].name;
  343 + }
186 } 344 }
187 } 345 }
188 for (var i = 0; i < treeData.length; i++) { 346 for (var i = 0; i < treeData.length; i++) {
@@ -300,16 +458,122 @@ $(function() { @@ -300,16 +458,122 @@ $(function() {
300 var node = treeObj.getNodeByParam("name", _thisName, null); 458 var node = treeObj.getNodeByParam("name", _thisName, null);
301 459
302 treeObj.selectNode(node, false, true); 460 treeObj.selectNode(node, false, true);
303 - } 461 + },
  462 + /**
  463 + * ztreeSetting 配置文件
  464 + * @Author syantao
  465 + * Created by Keystion on 2017-01-19
  466 + */
  467 + config: {
  468 + view: {
  469 + addHoverDom: treeFoo.addHoverDom,
  470 + removeHoverDom: treeFoo.removeHoverDom,
  471 + selectedMulti: false,
  472 + showLine: false
  473 + }
  474 + ,edit: {
  475 + enable: true,
  476 + editNameSelectAll: true,
  477 + showRemoveBtn: false,
  478 + showRenameBtn: treeFoo.showRenameBtn
  479 + }
  480 + ,data: {
  481 + simpleData: { enable: true }
  482 + }
  483 + ,callback: {
  484 + /**
  485 + * ztree 每一项点击事件
  486 + * @Author syantao
  487 + * Created by Keystion on 2017-01-19
  488 + */
  489 + beforeClick: treeFoo.beforeClick,
  490 + beforeDrag: treeFoo.beforeDrag,
  491 + beforeEditName: treeFoo.beforeEditName,
  492 + beforeRename: treeFoo.beforeRename,
  493 + onRename: treeFoo.onRename
  494 + }
  495 + },
304 } 496 }
305 497
306 - $(document).on('click', '#cancel', function(event) {  
307 - event.preventDefault();  
308 - /* Act on the event */ 498 + if(document.URL.indexOf('player') >= 0){
  499 + isReplayPage = true;
  500 + if (_role == 0) {
  501 + playUrl = gxb_api + "/programming/codeReplay/" + _codeReplayId + "/api";
  502 + } else if (_role == 1) {
  503 + playUrl = gxb_api + "/programming/student/studentReplay/" + _codeReplayId + "/api";
  504 + }
  505 + $.ajax({
  506 + type: "get",
  507 + url: playUrl,
  508 + dataType: "json",
  509 + contentType: "application/json",
  510 + success: function(res) {
  511 + console.info(playUrl)
  512 + console.log(res)
  513 + // 判断数据是否正常
  514 + if(res.codeReplayId){
  515 + playData = res;
  516 + _languageid = playData.languageid;
  517 + console.log(playData.audioUrl);
  518 +
  519 + if(playData.programmingFileList){
  520 +
  521 + treeData = playFoo.programFileListToTreeJson(playData.programmingFileList);
309 522
310 - // GBCodePlayBack.resetCodeMirrorValue(); 523 + console.log(treeData);
311 524
312 - }); 525 + treeData = playTreePathData.tree;
  526 + treeObj = $.fn.zTree.init($("#folder"), ZTREE.config, treeData);
  527 +
  528 + GBCodePlayBack.recordinit(treeData);
  529 + }
  530 + $('#app').show();
  531 + }else{
  532 + playFoo.showPLayError();
  533 + }
  534 + },
  535 + error: function() {
  536 + playFoo.showPLayError();
  537 + alert('错误')
  538 + }
  539 + });
  540 + // if(!_codeReplayId || !_userId || !_role || !_chapterId){
  541 + // utils.errorVisit.template = $('<div id="tips" class="tips">' +
  542 + // '<div class="tips-inner">' +
  543 + // '访问参数出错，请联系管理人员。' +
  544 + // '</div>' +
  545 + // '</div>');
  546 + // utils.errorVisit.show();
  547 + // }else{
  548 + // $('#app').show();
  549 + // }
  550 + }else{
  551 + // 动态获取目录结构
  552 + // if(!_languageid || !_userId || !_role || !_source){
  553 + // utils.errorVisit.show();
  554 + // }else{
  555 + $.ajax({
  556 + type: "GET",
  557 + url: "../js/tree.json",
  558 + dataType: "json",
  559 + contentType: "application/json",
  560 + success: function(res) {
  561 + console.info();
  562 + treeData = res.tree;
  563 +
  564 + treeObj = $.fn.zTree.init($("#folder"), ZTREE.config, treeData);
  565 +
  566 + GBCodePlayBack.recordinit(treeData);
  567 +
  568 + },
  569 + error: function(XMLHttpRequest, textStatus, errorThrown) {
  570 + console.log('Ajax tree.json error');
  571 + console.log(XMLHttpRequest);
  572 + }
  573 + });
  574 + $('#app').show();
  575 + // }
  576 + }
313 577
314 // 根据不同的角色渲染页面 578 // 根据不同的角色渲染页面
315 if (_role == 1) { 579 if (_role == 1) {
@@ -667,107 +931,69 @@ $(function() { @@ -667,107 +931,69 @@ $(function() {
667 931
668 932
669 if (document.URL.indexOf('player.htm') >= 0) { 933 if (document.URL.indexOf('player.htm') >= 0) {
670 - if (_role == 0) {  
671 - var apiUrl = gxb_api + "/programming/codeReplay/" + _codeReplayId + "/api";  
672 - // var apiUrl = gxb_api + "/gxb-web/programmingMulti/" + _codeReplayId + "/api";  
673 - // var apiUrl = "../js/codedata.json";  
674 -  
675 - initPlayerPage(apiUrl)  
676 -  
677 - } else if (_role == 1) {  
678 - var apiUrl = gxb_api + "/programming/student/studentReplay/" + _codeReplayId + "/api";  
679 - // var apiUrl = gxb_api + "/gxb-web/programmingMulti/" + _codeReplayId + "/api";  
680 - // var apiUrl = "../js/codedata.json";  
681 -  
682 - initPlayerPage(apiUrl)  
683 - } 934 + initPlayerPage()
684 } else { 935 } else {
685 compileMode(_languageid) 936 compileMode(_languageid)
686 } 937 }
687 938
688 // 初始化渲染页面 939 // 初始化渲染页面
689 - function initPlayerPage(apiUrl) {  
690 - initJavaPage(treeData)  
691 - $.ajax({  
692 - type: "get",  
693 - url: apiUrl,  
694 - dataType: "json",  
695 - contentType: "application/json",  
696 - success: function(coderecords) {  
697 - console.log(coderecords);  
698 - GBCodePlayBack.langid = parseInt(coderecords.languageid);  
699 - var langid = GBCodePlayBack.langid;  
700 - selectLang(langid);  
701 - compileMode(langid);  
702 -  
703 - // $("#play_audio").attr('src', "http://gxb-file.oss-cn-beijing.aliyuncs.com" + coderecords.audioUrl);  
704 - // $("#play_audio").attr('src', coderecords.audioUrl);  
705 - console.log("http://gxb-file.oss-cn-beijing.aliyuncs.com" + coderecords.audioUrl)  
706 - var flag = true;  
707 - player.init({  
708 - container: '#audioWrap',  
709 - source: "http://gxb-file.oss-cn-beijing.aliyuncs.com" + coderecords.audioUrl,  
710 - imagePath: '../js/audioPlayer/image',  
711 - debuggers: false,  
712 - allowSeek: false,  
713 - playCallback: function() { // 播放  
714 - console.log('++++++++');  
715 - playCode();  
716 -  
717 - // if(flag){  
718 - // playCode();  
719 - // }  
720 -  
721 - // $('#play').trigger('click');  
722 - // GBCodePlayBack.htmlplayereditor.setOption('readOnly', true);  
723 - },  
724 - pauseCallback: function() { // 暂停  
725 - // flag = false;  
726 - // player.play();  
727 -  
728 - GBCodePlayBack.audioTime = parseInt(player.elements.audioDom.currentTime*1000)  
729 - GBCodePlayBack.treeSelectNode = treeObj.getSelectedNodes()[0];  
730 - pauseCode();  
731 - GBCodePlayBack.firstPlay = 0;  
732 - GBCodePlayBack.getCodeMirrorValue();  
733 -  
734 - // GBCodePlayBack.pauseValue = GBCodePlayBack.htmlplayereditor.getValue();  
735 - // GBCodePlayBack.htmlplayereditor.setOption('readOnly', false);  
736 - },  
737 - seekedCallback: function() { // 拖拽  
738 -  
739 - },  
740 - endedCallback: function() { // 结束播放  
741 - playEnd()  
742 - }  
743 - });  
744 -  
745 - var coderecords = coderecords.codeRecordList;  
746 - console.log(coderecords);  
747 - // if (_role == 0) {  
748 - // var coderecords = coderecords.codeRecordList;  
749 - // } else if (_role == 1) {  
750 - // var coderecords = coderecords.studentRecordList; 940 + function initPlayerPage() {
  941 + console.info('initPlayerPage')
  942 + console.log(playData);
  943 + var langid = parseInt(playData.languageid);
  944 + var coderecords = playData.codeRecordList;
  945 +
  946 + selectLang(langid);
  947 + compileMode(langid);
  948 +
  949 + console.log("http://gxb-file.oss-cn-beijing.aliyuncs.com" + playData.audioUrl)
  950 + player.init({
  951 + container: '#audioWrap',
  952 + source: "http://gxb-file.oss-cn-beijing.aliyuncs.com" + playData.audioUrl,
  953 + imagePath: '../js/audioPlayer/image',
  954 + debuggers: false,
  955 + allowSeek: false,
  956 + playCallback: function() { // 播放
  957 + console.log('++++++++');
  958 + playCode();
  959 +
  960 + // if(flag){
  961 + // playCode();
751 // } 962 // }
752 - // GBCodePlayBack.htmlplayereditor.setValue('');  
753 - // GBCodePlayBack.cssplayereditor.setValue('');  
754 - // GBCodePlayBack.jsplayereditor.setValue('');  
755 -  
756 - var starttime = 0;  
757 - for (var i = 0; i < coderecords.length; i++) {  
758 - if (!coderecords[i].trigger) coderecords[i].trigger = 0;  
759 - coderecords[i].changeobj = jQuery.parseJSON(coderecords[i].changeobj);  
760 - coderecords[i].treefile = jQuery.parseJSON(coderecords[i].treefile);  
761 - }  
762 -  
763 - GBCodePlayBack.records = coderecords;  
764 - console.log(GBCodePlayBack.records); 963 +
  964 + // $('#play').trigger('click');
  965 + // GBCodePlayBack.htmlplayereditor.setOption('readOnly', true);
765 }, 966 },
766 - error: function() {  
767 - console.log('-------------------');  
768 - alert('错误') 967 + pauseCallback: function() { // 暂停
  968 + // flag = false;
  969 + // player.play();
  970 +
  971 + GBCodePlayBack.audioTime = parseInt(player.elements.audioDom.currentTime*1000)
  972 + GBCodePlayBack.treeSelectNode = treeObj.getSelectedNodes()[0];
  973 + pauseCode();
  974 + GBCodePlayBack.firstPlay = 0;
  975 + GBCodePlayBack.getCodeMirrorValue();
  976 +
  977 + // GBCodePlayBack.pauseValue = GBCodePlayBack.htmlplayereditor.getValue();
  978 + // GBCodePlayBack.htmlplayereditor.setOption('readOnly', false);
  979 + },
  980 + seekedCallback: function() { // 拖拽
  981 +
  982 + },
  983 + endedCallback: function() { // 结束播放
  984 + playEnd()
769 } 985 }
770 }); 986 });
  987 +
  988 + var starttime = 0;
  989 + for (var i = 0; i < coderecords.length; i++) {
  990 + if (!coderecords[i].trigger) coderecords[i].trigger = 0;
  991 + coderecords[i].changeobj = jQuery.parseJSON(coderecords[i].changeobj);
  992 + coderecords[i].treefile = jQuery.parseJSON(coderecords[i].treefile);
  993 + }
  994 +
  995 + GBCodePlayBack.records = coderecords;
  996 + console.log(GBCodePlayBack.records);
771 } 997 }
772 998
773 // 使编辑器满屏 999 // 使编辑器满屏
@@ -1316,90 +1542,6 @@ $(function() { @@ -1316,90 +1542,6 @@ $(function() {
1316 alert('代码保存失败重新保存') 1542 alert('代码保存失败重新保存')
1317 } 1543 }
1318 }); 1544 });
1319 -  
1320 - // replaydto.html = GBCodePlayBack.htmleditor.getValue();  
1321 - // replaydto.css = GBCodePlayBack.csseditor.getValue();  
1322 - // replaydto.javascript = GBCodePlayBack.jseditor.getValue();  
1323 - // // replaydto.audioUrl = $('.audio-url').val();  
1324 - // replaydto.audioUrl = '/uploads/programming_audio/link/17/01/24/38029c9698e144d2bd590b35eb6af56e';  
1325 - // replaydto.deleteFlag = 1  
1326 -  
1327 - // //保存序列化录制内容  
1328 - // var recorddatas = [];  
1329 - // for (var i = 0; i < GBCodePlayBack.records.length; i++) {  
1330 - // console.log(GBCodePlayBack.records);  
1331 - // var recorddata = {  
1332 - // intervaltime: GBCodePlayBack.records[i].intervaltime,  
1333 - // editor: GBCodePlayBack.records[i].editor,  
1334 - // changeobj: JSON.stringify(GBCodePlayBack.records[i].changeobj),  
1335 - // cmpinfo: GBCodePlayBack.records[i].cmpinfo,  
1336 - // output: GBCodePlayBack.records[i].output,  
1337 - // result: GBCodePlayBack.records[i].result,  
1338 - // stderr: GBCodePlayBack.records[i].stderr  
1339 - // }  
1340 -  
1341 - // recorddatas.push(recorddata);  
1342 - // }  
1343 -  
1344 - // //回放入库  
1345 - // recorddatas.deleteFlag = 1  
1346 -  
1347 - // var keepTimer = $('.recording-time').val()  
1348 - // replaydto.totaltime = parseInt(keepTimer);  
1349 - // if (_role == 0) {  
1350 - // replaydto.codeRecordList = recorddatas;  
1351 - // $.ajax({  
1352 - // type: "post",  
1353 - // url: gxb_api + "/programming/codeReplay/api",  
1354 - // data: JSON.stringify(replaydto),  
1355 - // dataType: "json",  
1356 - // contentType: "application/json",  
1357 - // success: function(data) {  
1358 - // $(window).unbind('beforeunload');  
1359 - // var _data = {  
1360 - // "programId": data.codeReplayId,  
1361 - // "programLanguageName": data.languageName,  
1362 - // "programAudioLength": keepTimer  
1363 - // }  
1364 - // $('.upload-tip').hide();  
1365 -  
1366 - // $('#cancel').prop("disabled", false);  
1367 -  
1368 - // window.opener.postMessage(_data, _source);  
1369 - // window.close();  
1370 - // },  
1371 - // error: function() {  
1372 - // $('.upload-tip').hide();  
1373 - // alert('代码保存失败重新保存')  
1374 - // }  
1375 - // });  
1376 - // } else if (_role == 1) {  
1377 - // replaydto.studentRecordList = recorddatas;  
1378 - // $.ajax({  
1379 - // type: "post",  
1380 - // url: gxb_api + "/programming/student/studentReplay/api",  
1381 - // data: JSON.stringify(replaydto),  
1382 - // dataType: "json",  
1383 - // contentType: "application/json",  
1384 - // success: function(data) {  
1385 - // $(window).unbind('beforeunload');  
1386 - // var _data = {  
1387 - // "programId": data.studentReplayId,  
1388 - // "programLanguageName": data.languageName,  
1389 - // "programAudioLength": keepTimer  
1390 - // }  
1391 - // $('.upload-tip').hide();  
1392 - // $('#cancel').prop("disabled", false);  
1393 - // window.opener.postMessage(_data, _source);  
1394 - // window.close();  
1395 - // },  
1396 - // error: function() {  
1397 - // $('.upload-tip').hide();  
1398 - // alert('代码保存失败重新保存')  
1399 - // }  
1400 - // });  
1401 - // }  
1402 -  
1403 }); 1545 });
1404 1546
1405 $('#toggle_replay_enhancement').click(function() { 1547 $('#toggle_replay_enhancement').click(function() {
@@ -1692,23 +1834,23 @@ $(function() { @@ -1692,23 +1834,23 @@ $(function() {
1692 var isRightResizing = false; 1834 var isRightResizing = false;
1693 var _width = 0; 1835 var _width = 0;
1694 var _tempWidth = 0; 1836 var _tempWidth = 0;
1695 - var appLeftRatio = 140 / appMinWidth; 1837 + var appLeftRatio = 200 / appMinWidth;
1696 var appRightRatio = 320 / appMinWidth; 1838 var appRightRatio = 320 / appMinWidth;
1697 1839
1698 if($(window).width() <= appMinWidth){ 1840 if($(window).width() <= appMinWidth){
1699 $('body').width(appMinWidth) 1841 $('body').width(appMinWidth)
1700 app.width(appMinWidth); 1842 app.width(appMinWidth);
1701 appContainer.height($(window).height() - appFooter.height()); 1843 appContainer.height($(window).height() - appFooter.height());
1702 - appLeft.width(140); 1844 + appLeft.width(200);
1703 appMian.width(400); 1845 appMian.width(400);
1704 appRight.width(320); 1846 appRight.width(320);
1705 - appMainHeader.css('margin-left', -140); 1847 + appMainHeader.css('margin-left', -200);
1706 $('.recording-ctrl-bar').css('padding', '0 20px'); 1848 $('.recording-ctrl-bar').css('padding', '0 20px');
1707 }else{ 1849 }else{
1708 $('body').width('100%'); 1850 $('body').width('100%');
1709 app.width('100%'); 1851 app.width('100%');
1710 appContainer.height($(window).height() - appFooter.height()); 1852 appContainer.height($(window).height() - appFooter.height());
1711 - appLeft.width(140); 1853 + appLeft.width(200);
1712 appMian.width(parseInt($(window).width() - appLeft.width() - appRight.width())); 1854 appMian.width(parseInt($(window).width() - appLeft.width() - appRight.width()));
1713 appRight.width(320); 1855 appRight.width(320);
1714 appMainHeader.css('margin-left', -appLeft.width()); 1856 appMainHeader.css('margin-left', -appLeft.width());
@@ -2027,26 +2169,6 @@ $(function() { @@ -2027,26 +2169,6 @@ $(function() {
2027 2169
2028 $('.record-before').hide(); 2170 $('.record-before').hide();
2029 2171
2030 - // 动态获取目录结构  
2031 - $.ajax({  
2032 - type: "GET",  
2033 - url: "../js/tree.json",  
2034 - dataType: "json",  
2035 - contentType: "application/json",  
2036 - success: function(res) {  
2037 - console.info();  
2038 - treeData = res.tree;  
2039 -  
2040 - treeObj = $.fn.zTree.init($("#folder"), ZTREE.config, treeData);  
2041 -  
2042 - GBCodePlayBack.recordinit(treeData);  
2043 - },  
2044 - error: function(XMLHttpRequest, textStatus, errorThrown) {  
2045 - console.log('Ajax tree.json error');  
2046 - console.log(XMLHttpRequest);  
2047 - }  
2048 - });  
2049 -  
2050 $(window).resize(function() { 2172 $(window).resize(function() {
2051 setTimeout(function () { 2173 setTimeout(function () {
2052 GBCodePlayBack.resizeWindow(); 2174 GBCodePlayBack.resizeWindow();
@@ -2096,6 +2218,13 @@ $(function() { @@ -2096,6 +2218,13 @@ $(function() {
2096 // 切换到录制区域 2218 // 切换到录制区域
2097 $('#recordertab a:eq(0)').tab('show'); 2219 $('#recordertab a:eq(0)').tab('show');
2098 2220
  2221 + // 禁止重命名
  2222 + setTimeout(function(){
  2223 + treeObj.setting.edit.showRenameBtn = false;
  2224 + treeObj.setting.edit.enable = false;
  2225 + $('.button.edit').hide();
  2226 + },0)
  2227 +
2099 // 编译状态 2228 // 编译状态
2100 var data = $(this).attr('data'); 2229 var data = $(this).attr('data');
2101 var seconds = 0; 2230 var seconds = 0;
@@ -2339,7 +2468,7 @@ $(function() { @@ -2339,7 +2468,7 @@ $(function() {
2339 } 2468 }
2340 var compileData = { 2469 var compileData = {
2341 "userId": _userId, 2470 "userId": _userId,
2342 - "langId": GBCodePlayBack.langid, 2471 + "langId": _languageid,
2343 "mainPath": mainPath, 2472 "mainPath": mainPath,
2344 "mainArgus": "", 2473 "mainArgus": "",
2345 "runtimeArgus": runtimeArgus, 2474 "runtimeArgus": runtimeArgus,
@@ -2368,37 +2497,8 @@ $(function() { @@ -2368,37 +2497,8 @@ $(function() {
2368 ladda.remove(); 2497 ladda.remove();
2369 alert('错误'); 2498 alert('错误');
2370 console.log(XMLHttpRequest); 2499 console.log(XMLHttpRequest);
2371 - } 2500 + },
2372 }); 2501 });
2373 -  
2374 - // var code = (typeof GBCodePlayBack.htmleditor !=='undefined' && GBCodePlayBack.htmleditor.getValue())  
2375 - // || (typeof GBCodePlayBack.htmlplayereditor !=='undefined' && GBCodePlayBack.htmlplayereditor.getValue());  
2376 - // var langid = $('#htmlbutton').data("languageid");  
2377 - // var runtimeArgus = $('#runtimeArgus').val() || '';  
2378 - // var compileData = {  
2379 - // code: code,  
2380 - // langid: langid,  
2381 - // input: runtimeArgus  
2382 - // }  
2383 - // $.ajax({  
2384 - // type: "post",  
2385 - // url: gxb_api + "/submit/submitCode/api",  
2386 - // data: JSON.stringify(compileData),  
2387 - // dataType: "json",  
2388 - // contentType: "application/json",  
2389 - // success: function(data) {  
2390 - // compileResult(data)  
2391 - // ladda.remove();  
2392 -  
2393 - // $('.compile-loading').hide();  
2394 - // $('.compile-reslut').show();  
2395 - // GBCodePlayBack.compileResultData = data;  
2396 - // },  
2397 - // error: function(){  
2398 - // ladda.remove();  
2399 - // alert('错误');  
2400 - // }  
2401 - // });  
2402 } 2502 }
2403 2503
2404 // 初始化页面 2504 // 初始化页面
@@ -2425,7 +2525,7 @@ $(function() { @@ -2425,7 +2525,7 @@ $(function() {
2425 // 编译结果 2525 // 编译结果
2426 function compileResult(data, value) { 2526 function compileResult(data, value) {
2427 var runtimeArgus = value || ''; 2527 var runtimeArgus = value || '';
2428 - console.log('********************************') 2528 + console.info('compileResult')
2429 if (value != '') { 2529 if (value != '') {
2430 $('#cmprun-tabs a[href="#stdin"]').tab('show'); 2530 $('#cmprun-tabs a[href="#stdin"]').tab('show');
2431 $('#stdin input').val(runtimeArgus); 2531 $('#stdin input').val(runtimeArgus);
@@ -2450,23 +2550,6 @@ $(function() { @@ -2450,23 +2550,6 @@ $(function() {
2450 if(!data.compilerInfo.length){ 2550 if(!data.compilerInfo.length){
2451 $('#cmpinfo').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 编译已成功</p>'); 2551 $('#cmpinfo').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 编译已成功</p>');
2452 } 2552 }
2453 -  
2454 - // if (data.code == 0) {  
2455 - // $('#output').html('<p class="text-success">' + data.content.replace(/\n/g, "<br />") + "</p>");  
2456 - // $('#cmpinfo').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 编译成功 </p>');  
2457 - // $('#cmprun-tabs a[href="#output"]').tab('show');  
2458 - // } else if (data.code == 1) {  
2459 - // if (data.error.length) {  
2460 - // $('#cmpinfo').html('<p class="text-warning">' + data.error.replace(/\n/g, "<br />") + "</p>");  
2461 - // }else if (data.compilerInfo.length){  
2462 - // $('#cmpinfo').html('<p class="text-warning">' + data.compilerInfo.replace(/\n/g, "<br />") + "</p>");  
2463 - // }else{  
2464 - // $('#cmpinfo').html('<p class="alert alert-danger"><i class="glyphicon glyphicon-exclamation-sign"></i> 编译超时，请重新编译 </p>');  
2465 - // }  
2466 - // $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');  
2467 - // }else{  
2468 - // $('#cmpinfo').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 等待编译 </p>');  
2469 - // }  
2470 }else if(data.status == 500){ 2553 }else if(data.status == 500){
2471 $('#cmprun-tabs a[href="#stderr"]').tab('show'); 2554 $('#cmprun-tabs a[href="#stderr"]').tab('show');
2472 $('#stderr').html('<p class="text-danger">' + data.error.replace(/\n/g, "<br />") + "</p>"); 2555 $('#stderr').html('<p class="text-danger">' + data.error.replace(/\n/g, "<br />") + "</p>");
@@ -2772,7 +2855,7 @@ $(function() { @@ -2772,7 +2855,7 @@ $(function() {
2772 } 2855 }
2773 } 2856 }
2774 function processChangeObject(playbackcm, obj) { 2857 function processChangeObject(playbackcm, obj) {
2775 - console.log('processChangeObject'); 2858 + console.info('processChangeObject');
2776 // 菜单选中 2859 // 菜单选中
2777 ZTREE.showEdite({'treeNode': {'name': getEditor(playbackcm, 'name')},'replay': true}); 2860 ZTREE.showEdite({'treeNode': {'name': getEditor(playbackcm, 'name')},'replay': true});
2778 for (var i = 0; i < obj.text.length; i++) { 2861 for (var i = 0; i < obj.text.length; i++) {
src/scss/recording.scss
  View file @3534945
@@ -713,7 +713,7 @@ button{ @@ -713,7 +713,7 @@ button{
713 display: inline-flex; 713 display: inline-flex;
714 z-index: 999; 714 z-index: 999;
715 background-color: #333; 715 background-color: #333;
716 - padding: 4px 74px 0 32px; 716 + padding: 4px 10px 0 10px;
717 box-shadow: 0px 2px 10px #333; 717 box-shadow: 0px 2px 10px #333;
718 } 718 }
719 719
src/v1.1/index.html
  View file @3534945
@@ -52,6 +52,7 @@ @@ -52,6 +52,7 @@
52 52
53 <link rel="stylesheet" href="../css/demo.css"> 53 <link rel="stylesheet" href="../css/demo.css">
54 <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script> 54 <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>
  55 + <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.exedit.js"></script>
55 <script src="../js/gb.js"></script> 56 <script src="../js/gb.js"></script>
56 <!-- <script src="../js/gbreplayer.js"></script> --> 57 <!-- <script src="../js/gbreplayer.js"></script> -->
57 58