梁美英 / programming · Commits

Commit 8686c1527783f79b2c680de58405e94e2132c623

Authored by 商艳涛
1 parent c46b7de3

- 优化js设置dom结构大小 

- 优化播放页面dom结构
- 添加参数播放和录制页面所需参数不正确是不予展示主要功能界面
Inline Side-by-side
Showing 5 changed files with 206 additions and 92 deletions
src/css/demo.css
  View file @8686c15
... ... @@ -7,6 +7,7 @@ html,body{
7 7 height: 100%;
8 8 width: 100%;
9 9 position: relative;
  10 + display: none;
10 11 }
11 12 #appContainer{
12 13 float: left;
... ... @@ -287,4 +288,30 @@ textarea[id^="tab"].active{ display: block; }
287 288 border: none;
288 289 border-bottom: 1px solid #999;
289 290 border-radius: 0;
  291 +}
  292 +.tips {
  293 + position: fixed;
  294 + top: 0;
  295 + left: 0;
  296 + right: 0;
  297 + bottom: 0;
  298 + background-color: rgba(0, 0, 0, 0.8);
  299 + z-index: 999;
  300 +}
  301 +
  302 +.tips .tips-inner {
  303 + position: absolute;
  304 + top: 50%;
  305 + left: 50%;
  306 + z-index: 1;
  307 + transform: translateX(-50%) translateY(-50%);
  308 + background-color: #fff;
  309 + padding: 100px;
  310 + border: 0px solid #f00;
  311 + border-radius: 10px;
  312 + text-align: center;
  313 + line-height: 2;
  314 + font-size: 1.4em;
  315 + margin-top: -2em;
  316 + box-shadow: 10px 10px 0 0 rgba(255, 255, 255, 0.1);
290 317 }
291 318 \ No newline at end of file
... ...
src/js/gb.js
  View file @8686c15
1 1 // 2016-11-4 By Kira
2   -
3 2 $(function() {
  3 + /**
  4 + * 互动编程播放页面参数
  5 + * codeReplayId=3&role=0&chapterId=1025864&userId=826920
  6 + * codeReplayId 互动编程ID
  7 + * userId 用户ID
  8 + * role 用户角色
  9 + * chapterId 章节ID
  10 + */
  11 +
  12 + /**
  13 + * 互动编程录制页面参数
  14 + * languageid=10&userId=826920&role=0&source=https://geek.class.gaoxiaobang.com
  15 + * languageid 互动编程语言ID
  16 + * userId 用户ID
  17 + * role 用户角色
  18 + * source 来源
  19 + */
  20 +
4 21 var _languageid = getQuery('languageid'),
5 22 _userId = getQuery('userId'),
6 23 _role = getQuery('role'), // 0: 老师 1: 学生
7 24 _codeReplayId = getQuery('codeReplayId'),
8 25 _studentReplayId = getQuery('studentReplayId'),
9 26 _chapterId = getQuery('chapterId')
10   - _source = getQuery('source');
  27 + _source = getQuery('source');
11 28 var $recording_time = $('.recording-time');
12 29 var tag = 1; // 标记第一次暂停
  30 + var isReplayPage = false; // initJavaPage 判断输出
13 31 var player = $.AudioPlayer;
14 32 var htmlhlLine = null,
15 33 csshlLine = null,
16 34 jshlLine = null;
17 35  
  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 + }
  54 + }
18 55 // 储存一个树结构和编辑器的对应关系
19 56 var treeLinkEditor = [], // 缓存整个目录树结构和代码编辑器的关系
20 57 treeData = {}, // 缓存目录树返回结果
... ... @@ -167,23 +204,46 @@ $(function() {
167 204 ,getTreeData: function(name){
168 205 console.info('ZTREE.getTreeData');
169 206 var _arr = [];
170   - // 判断是否是需要返回单文件结果
171   - if(name){
172   - for (var i = 0; i < treeLinkEditor.length; i++) {
173   - if(treeLinkEditor[i].name == name && $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
174   - _arr.push({
175   - "path": treeLinkEditor[i].filePath,
176   - "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
177   - })
  207 + if(!isReplayPage){
  208 + // 判断是否是需要返回单文件结果
  209 + if(name){
  210 + for (var i = 0; i < treeLinkEditor.length; i++) {
  211 + if(treeLinkEditor[i].name == name && $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
  212 + _arr.push({
  213 + "path": treeLinkEditor[i].filePath,
  214 + "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
  215 + })
  216 + }
  217 + }
  218 + }else{
  219 + for (var i = 0; i < treeLinkEditor.length; i++) {
  220 + if($.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
  221 + _arr.push({
  222 + "path": treeLinkEditor[i].filePath,
  223 + "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
  224 + })
  225 + }
178 226 }
179 227 }
180 228 }else{
181   - for (var i = 0; i < treeLinkEditor.length; i++) {
182   - if($.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
183   - _arr.push({
184   - "path": treeLinkEditor[i].filePath,
185   - "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
186   - })
  229 + // 判断是否是需要返回单文件结果
  230 + if(name){
  231 + for (var i = 0; i < treeLinkEditor.length; i++) {
  232 + if(treeLinkEditor[i].name == name && $.trim(treeLinkEditor[i].CodeMirrorReplay.getValue()) != ''){
  233 + _arr.push({
  234 + "path": treeLinkEditor[i].filePath,
  235 + "content": $.trim(treeLinkEditor[i].CodeMirrorReplay.getValue())
  236 + })
  237 + }
  238 + }
  239 + }else{
  240 + for (var i = 0; i < treeLinkEditor.length; i++) {
  241 + if($.trim(treeLinkEditor[i].CodeMirrorReplay.getValue()) != ''){
  242 + _arr.push({
  243 + "path": treeLinkEditor[i].filePath,
  244 + "content": $.trim(treeLinkEditor[i].CodeMirrorReplay.getValue())
  245 + })
  246 + }
187 247 }
188 248 }
189 249 }
... ... @@ -215,7 +275,7 @@ $(function() {
215 275 event.preventDefault();
216 276 /* Act on the event */
217 277  
218   - GBCodePlayBack.resetCodeMirrorValue();
  278 + // GBCodePlayBack.resetCodeMirrorValue();
219 279  
220 280 });
221 281  
... ... @@ -663,9 +723,6 @@ $(function() {
663 723 });
664 724 }
665 725  
666   -
667   -
668   -
669 726 // 使编辑器满屏
670 727 setTimeout(function() {
671 728 $("#htmlbutton").trigger('click');
... ... @@ -1495,26 +1552,26 @@ $(function() {
1495 1552 // pauseCode()
1496 1553 // 优化Tab标签切换之后 页面标题显示
1497 1554 if(document.body.className === 'hidden'){
1498   - timer = setInterval(function(){
1499   - if(document.body.className != 'hidden'){
1500   - clearTimeout(timer);
1501   - document.title = _title;
1502   - }else{
1503   - if(i == 0){
1504   - document.title = _titleArr[0];
1505   - }else if(i >= 11){
1506   - i = 0;
1507   - document.title = _titleArr[0];
1508   - }else{
1509   - document.title += _titleArr[i];
1510   - }
1511   - i++;
1512   - }
1513   - },100)
  1555 + // timer = setInterval(function(){
  1556 + // if(document.body.className != 'hidden'){
  1557 + // clearTimeout(timer);
  1558 + // document.title = _title;
  1559 + // }else{
  1560 + // if(i == 0){
  1561 + // document.title = _titleArr[0];
  1562 + // }else if(i >= 11){
  1563 + // i = 0;
  1564 + // document.title = _titleArr[0];
  1565 + // }else{
  1566 + // document.title += _titleArr[i];
  1567 + // }
  1568 + // i++;
  1569 + // }
  1570 + // },100)
1514 1571 }else{
1515   - i = 0;
1516   - document.title = _title;
1517   - clearTimeout(timer);
  1572 + // i = 0;
  1573 + // document.title = _title;
  1574 + // clearTimeout(timer);
1518 1575 }
1519 1576 }
1520 1577 // set the initial state
... ... @@ -1547,31 +1604,31 @@ $(function() {
1547 1604 var appMainHeader = $('#appMainHeader')
1548 1605 var winWidth = $(window).width();
1549 1606 var winHeight = $(window).height();
1550   - var appMinWidth = 725;
  1607 + var appMinWidth = 860;
1551 1608  
1552 1609 var isLeftResizing = false;
1553 1610 var isRightResizing = false;
1554 1611 var _width = 0;
1555 1612 var _tempWidth = 0;
1556   - var appLeftRatio = 140 / winWidth;
1557   - var appRightRatio = 320 / winWidth;
  1613 + var appLeftRatio = 140 / appMinWidth;
  1614 + var appRightRatio = 320 / appMinWidth;
1558 1615  
1559 1616 if($(window).width() <= appMinWidth){
1560 1617 $('body').width(appMinWidth)
1561 1618 app.width(appMinWidth);
1562 1619 appContainer.height($(window).height() - appFooter.height());
1563 1620 appLeft.width(140);
  1621 + appMian.width(400);
1564 1622 appRight.width(320);
1565   - appMian.width(265);
1566 1623 appMainHeader.css('margin-left', -140);
1567 1624 $('.recording-ctrl-bar').css('padding', '0 20px');
1568 1625 }else{
1569 1626 $('body').width('100%');
1570 1627 app.width('100%');
1571 1628 appContainer.height($(window).height() - appFooter.height());
1572   - appLeft.width(parseInt($(window).width() * appLeftRatio));
1573   - appRight.width(parseInt($(window).width() * appRightRatio));
  1629 + appLeft.width(140);
1574 1630 appMian.width(parseInt($(window).width() - appLeft.width() - appRight.width()));
  1631 + appRight.width(320);
1575 1632 appMainHeader.css('margin-left', -appLeft.width());
1576 1633 }
1577 1634 if (document.URL.indexOf('player.htm') >= 0) {
... ... @@ -2237,6 +2294,7 @@ $(function() {
2237 2294  
2238 2295 function initJavaPage(treeData){
2239 2296 console.info('initJavaPage');
  2297 +
2240 2298 var _datalist = treeData || [];
2241 2299 var recordTemplate = '';
2242 2300 var replayTemplate = '';
... ... @@ -2247,6 +2305,7 @@ $(function() {
2247 2305  
2248 2306 setHtmlButton(_languageid, 'JAVA');
2249 2307  
  2308 + // 生成 textarea
2250 2309 for (var i = 0; i < _datalist.length; i++) {
2251 2310 if(!_datalist[i].isParent){
2252 2311 var _file = _datalist[i].name;
... ... @@ -2258,45 +2317,57 @@ $(function() {
2258 2317 "record": _name + 'Record',
2259 2318 "replay": _name + 'Replay'
2260 2319 });
2261   - recordTemplate += '<div id="'+ _name +'RecordWrap"><textarea id="'+ _name + 'Record" title="'+ _name +'" style="display: none;"></textarea></div>'
  2320 + // 判断是否是播放页面，如果是则不显示录制区相关dom
  2321 + if(!isReplayPage){
  2322 + recordTemplate += '<div id="'+ _name +'RecordWrap"><textarea id="'+ _name + 'Record" title="'+ _name +'" style="display: none;"></textarea></div>'
  2323 + }
  2324 +
2262 2325 replayTemplate += '<div id="'+ _name +'ReplayWrap"><textarea id="'+ _name + 'Replay" title="'+ _name +'" style="display: none;"></textarea></div>'
2263 2326 }
2264 2327 }
2265   -
2266   - $('#recordzone').append(recordTemplate);
  2328 + // 判断是否是播放页面，如果是则不显示录制区相关dom
  2329 + if(!isReplayPage){
  2330 + $('#recordzone').append(recordTemplate);
  2331 + }
2267 2332 $('#replayzone').append(replayTemplate);
2268 2333  
  2334 + // 生成 CodeMirror
2269 2335 for (var i = 0; i < treeLinkEditor.length; i++) {
2270   -
2271   - treeLinkEditor[i].CodeMirrorRecord = CodeMirror.fromTextArea($('#' + treeLinkEditor[i].record)[0], {
2272   - value: '',
2273   - mode: "text/x-java",
2274   - lineNumbers: true,
2275   - smartIndent: false,
2276   - onChange: function(em, changeobj) {
2277   - // console.log('onChange');
2278   - // console.log(em);
2279   - // console.log(changeobj);
2280   -
2281   - // 是否需要在开始录制之后采取设置值
2282   - // if(GBCodePlayBack.isRcording == 1){
2283   - if (GBCodePlayBack.recording_status) {
2284   - GBCodePlayBack.onChange(ZTREE.getCurrentEditor(em.getWrapperElement().getAttribute('id')), changeobj);
2285   - }
2286   - if (GBCodePlayBack.autorun) {
2287   - GBCodePlayBack.generateResult(GBCodePlayBack.htmleditor.getValue(), GBCodePlayBack.csseditor.getValue(), GBCodePlayBack.jseditor.getValue());
2288   - }
2289   - // }
2290   - },
2291   - onFocus: function(em) {
2292   - // console.log('onFocus');
2293   - // console.log(em);
2294   - },
2295   - onCursorActivity: function(em) {
2296   - // console.log('onCursorActivity');
2297   - // console.log(em);
2298   - }
2299   - });
  2336 + // 判断是否是播放页面，如果是则不显示录制区相关dom
  2337 + if(!isReplayPage){
  2338 + treeLinkEditor[i].CodeMirrorRecord = CodeMirror.fromTextArea($('#' + treeLinkEditor[i].record)[0], {
  2339 + value: '',
  2340 + mode: "text/x-java",
  2341 + lineNumbers: true,
  2342 + smartIndent: false,
  2343 + onChange: function(em, changeobj) {
  2344 + // console.log('onChange');
  2345 + // console.log(em);
  2346 + // console.log(changeobj);
  2347 +
  2348 + // 是否需要在开始录制之后采取设置值
  2349 + // if(GBCodePlayBack.isRcording == 1){
  2350 + if (GBCodePlayBack.recording_status) {
  2351 + GBCodePlayBack.onChange(ZTREE.getCurrentEditor(em.getWrapperElement().getAttribute('id')), changeobj);
  2352 + }
  2353 + if (GBCodePlayBack.autorun) {
  2354 + GBCodePlayBack.generateResult(GBCodePlayBack.htmleditor.getValue(), GBCodePlayBack.csseditor.getValue(), GBCodePlayBack.jseditor.getValue());
  2355 + }
  2356 + // }
  2357 + },
  2358 + onFocus: function(em) {
  2359 + // console.log('onFocus');
  2360 + // console.log(em);
  2361 + },
  2362 + onCursorActivity: function(em) {
  2363 + // console.log('onCursorActivity');
  2364 + // console.log(em);
  2365 + }
  2366 + });
  2367 + treeLinkEditor[i].CodeMirrorRecordId = treeLinkEditor[i].record + 'CodeMirror';
  2368 + $('#' + treeLinkEditor[i].record).next().attr('id', treeLinkEditor[i].CodeMirrorRecordId).hide();
  2369 + }
  2370 +
2300 2371 treeLinkEditor[i].CodeMirrorReplay = CodeMirror.fromTextArea($('#' + treeLinkEditor[i].replay)[0], {
2301 2372 value: '',
2302 2373 mode: "text/x-java",
... ... @@ -2309,11 +2380,7 @@ $(function() {
2309 2380 onCursorActivity: function(em) {
2310 2381 }
2311 2382 });
2312   -
2313   - treeLinkEditor[i].CodeMirrorRecordId = treeLinkEditor[i].record + 'CodeMirror';
2314 2383 treeLinkEditor[i].CodeMirrorReplayId = treeLinkEditor[i].replay + 'CodeMirror';
2315   -
2316   - $('#' + treeLinkEditor[i].record).next().attr('id', treeLinkEditor[i].CodeMirrorRecordId).hide();
2317 2384 $('#' + treeLinkEditor[i].replay).next().attr('id', treeLinkEditor[i].CodeMirrorReplayId).hide();
2318 2385 }
2319 2386 // treeLinkEditor[0].CodeMirrorEditor.hide()
... ... @@ -2321,9 +2388,6 @@ $(function() {
2321 2388 ZTREE.showEdite();
2322 2389 }
2323 2390  
2324   -
2325   -
2326   -
2327 2391 // 初始化渲染编辑页面
2328 2392 function initPageLang() {
2329 2393 if (document.URL.indexOf('index.htm') >= 0) {
... ...
src/js/util/util.js
  View file @8686c15
... ... @@ -14,4 +14,29 @@ getCDNFile = function (cdnUrl) {
14 14 }
15 15  
16 16  
17   -
  17 +;(function($w, $){
  18 + var utils = {};
  19 + /**
  20 + * 访问出错
  21 + * @type {Object}
  22 + */
  23 + utils.errorVisit = {
  24 + template: $('<div id="tips" class="tips">' +
  25 + '<div class="tips-inner">' +
  26 + '访问出错，请使用正确的方式打开此网站。<br />' +
  27 + '请访问 <a href="//geek.gaoxiaobang.com">geek.gaoxiaobang.com</a>' +
  28 + '</div>' +
  29 + '</div>'),
  30 + show: function(){
  31 + console.info('utils.errorVisit.show');
  32 + var _this = this;
  33 + $('body').append(_this.template);
  34 + },
  35 + hide: function(){
  36 + console.info('utils.errorVisit.hide');
  37 + var _this = this;
  38 + _this.template.remove();
  39 + }
  40 + }
  41 + $w.utils = $w.utils || utils;
  42 +})(window, jQuery)
... ...
src/v1.1/index.html
  View file @8686c15
... ... @@ -2,7 +2,7 @@
2 2 <html lang="en">
3 3 <head>
4 4 <meta charset="UTF-8">
5   - <title>互动编程</title>
  5 + <title>录制课程 - 互动编程</title>
6 6 <link rel="stylesheet" href="../css/reset.css">
7 7 <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
8 8 <link href="../css/validationEngine.jquery.css" rel="stylesheet">
... ...
src/v1.1/player.html
  View file @8686c15
... ... @@ -2,7 +2,7 @@
2 2 <html lang="en">
3 3 <head>
4 4 <meta charset="UTF-8">
5   - <title>互动编程</title>
  5 + <title>播放课程 - 互动编程</title>
6 6 <link rel="stylesheet" href="../css/reset.css">
7 7 <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
8 8 <link href="../css/validationEngine.jquery.css" rel="stylesheet">
... ... @@ -86,8 +86,7 @@
86 86 <div id="appMian">
87 87 <div id="appMainHeader">
88 88 <ul id="recordertab" class="nav nav-tabs pull-left">
89   - <li class="active"><a href="#recordzone" data-toggle="tab"><i class="icon iconfont icon-suspend"></i>课程录制区</a></li>
90   - <li><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>播放课程</a></li>
  89 + <li class="active"><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>播放课程</a></li>
91 90 </ul>
92 91 <div id="editorwrapper" class="pull-right">
93 92 <div class="btn-group">
... ... @@ -97,8 +96,7 @@
97 96 </div>
98 97 </div>
99 98 <div id="textarea">
100   - <div id="recordzone" class="active"></div>
101   - <div id="replayzone"></div>
  99 + <div id="replayzone" class="active"></div>
102 100 </div>
103 101 <div id="handleMR"></div>
104 102 <div class="pause-shodow hidden">
... ...