- 优化js设置dom结构大小

- 优化播放页面dom结构 - 添加参数播放和录制页面所需参数不正确是不予展示主要功能界面

- 优化js设置dom结构大小
- 优化播放页面dom结构 - 添加参数播放和录制页面所需参数不正确是不予展示主要功能界面
商艳涛
1 parent c46b7de3
Showing 5 changed files with 206 additions and 92 deletions
src/css/demo.css
src/js/gb.js
src/js/util/util.js
src/v1.1/index.html
src/v1.1/player.html
@@ -7,6 +7,7 @@ html,body{
     height: 100%;
     width: 100%;
     position: relative;
+    display: none;
 }
 #appContainer{
     float: left;
@@ -287,4 +288,30 @@ textarea[id^=&quot;tab&quot;].active{ display: block; }
     border: none;
     border-bottom: 1px solid #999;
     border-radius: 0;
+}
+.tips {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 999;
+}
+
+.tips .tips-inner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1;
+    transform: translateX(-50%) translateY(-50%);
+    background-color: #fff;
+    padding: 100px;
+    border: 0px solid #f00;
+    border-radius: 10px;
+    text-align: center;
+    line-height: 2;
+    font-size: 1.4em;
+    margin-top: -2em;
+    box-shadow: 10px 10px 0 0 rgba(255, 255, 255, 0.1);
 }
 \ No newline at end of file
 // 2016-11-4 By Kira
-
 $(function() {
+    /**
+     * 互动编程播放页面参数
+     * codeReplayId=3&role=0&chapterId=1025864&userId=826920
+     * codeReplayId     互动编程ID
+     * userId           用户ID
+     * role             用户角色
+     * chapterId        章节ID
+     */
+
+    /**
+     * 互动编程录制页面参数
+     * languageid=10&userId=826920&role=0&source=https://geek.class.gaoxiaobang.com
+     * languageid   互动编程语言ID
+     * userId       用户ID
+     * role         用户角色
+     * source       来源
+     */
+    
     var _languageid = getQuery('languageid'),
         _userId = getQuery('userId'),
         _role = getQuery('role'), // 0: 老师  1: 学生
         _codeReplayId = getQuery('codeReplayId'),
         _studentReplayId = getQuery('studentReplayId'),
         _chapterId = getQuery('chapterId')
-    _source = getQuery('source');
+        _source = getQuery('source');
     var $recording_time = $('.recording-time');
     var tag = 1; // 标记第一次暂停
+    var isReplayPage = false; // initJavaPage 判断输出
     var player = $.AudioPlayer;
     var htmlhlLine = null,
         csshlLine = null,
         jshlLine = null;
+    if(document.URL.indexOf('player') >= 0){
+        isReplayPage = true;
+        if(!_codeReplayId || !_userId || !_role || !_chapterId){
+            utils.errorVisit.template = $('<div id="tips" class="tips">' + 
+                                            '<div class="tips-inner">' + 
+                                                '访问参数出错，请联系管理人员。' +
+                                            '</div>' + 
+                                        '</div>');
+            utils.errorVisit.show();
+        }else{
+            $('#app').show();
+        }
+    }else{
+        if(!_languageid || !_userId || !_role || !_source){
+            utils.errorVisit.show();
+        }else{
+            $('#app').show();
+        }
+    }
     // 储存一个树结构和编辑器的对应关系
     var treeLinkEditor  = [],   // 缓存整个目录树结构和代码编辑器的关系
         treeData        = {},   // 缓存目录树返回结果
@@ -167,23 +204,46 @@ $(function() {
         ,getTreeData: function(name){
             console.info('ZTREE.getTreeData');
             var _arr = [];
-            // 判断是否是需要返回单文件结果
-            if(name){
-                for (var i = 0; i < treeLinkEditor.length; i++) {
-                    if(treeLinkEditor[i].name == name && $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
-                        _arr.push({
-                            "path": treeLinkEditor[i].filePath,
-                            "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
-                        })
+            if(!isReplayPage){
+                // 判断是否是需要返回单文件结果
+                if(name){
+                    for (var i = 0; i < treeLinkEditor.length; i++) {
+                        if(treeLinkEditor[i].name == name && $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
+                            _arr.push({
+                                "path": treeLinkEditor[i].filePath,
+                                "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
+                            })
+                        }
+                    }
+                }else{
+                    for (var i = 0; i < treeLinkEditor.length; i++) {
+                        if($.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
+                            _arr.push({
+                                "path": treeLinkEditor[i].filePath,
+                                "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
+                            })
+                        }
                     }
                 }
             }else{
-                for (var i = 0; i < treeLinkEditor.length; i++) {
-                    if($.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
-                        _arr.push({
-                            "path": treeLinkEditor[i].filePath,
-                            "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
-                        })
+                // 判断是否是需要返回单文件结果
+                if(name){
+                    for (var i = 0; i < treeLinkEditor.length; i++) {
+                        if(treeLinkEditor[i].name == name && $.trim(treeLinkEditor[i].CodeMirrorReplay.getValue()) != ''){
+                            _arr.push({
+                                "path": treeLinkEditor[i].filePath,
+                                "content": $.trim(treeLinkEditor[i].CodeMirrorReplay.getValue())
+                            })
+                        }
+                    }
+                }else{
+                    for (var i = 0; i < treeLinkEditor.length; i++) {
+                        if($.trim(treeLinkEditor[i].CodeMirrorReplay.getValue()) != ''){
+                            _arr.push({
+                                "path": treeLinkEditor[i].filePath,
+                                "content": $.trim(treeLinkEditor[i].CodeMirrorReplay.getValue())
+                            })
+                        }
                     }
                 }
             }
@@ -215,7 +275,7 @@ $(function() {
         event.preventDefault();
         /* Act on the event */
-        GBCodePlayBack.resetCodeMirrorValue();
+        // GBCodePlayBack.resetCodeMirrorValue();
     });
@@ -663,9 +723,6 @@ $(function() {
                 });
             }
-
-
-
             // 使编辑器满屏
             setTimeout(function() {
                 $("#htmlbutton").trigger('click');
@@ -1495,26 +1552,26 @@ $(function() {
                     // pauseCode()
                     // 优化Tab标签切换之后 页面标题显示
                     if(document.body.className === 'hidden'){
-                        timer = setInterval(function(){
-                            if(document.body.className != 'hidden'){
-                                clearTimeout(timer);
-                                document.title = _title;
-                            }else{
-                                if(i == 0){
-                                    document.title = _titleArr[0];
-                                }else if(i >= 11){
-                                    i = 0;
-                                    document.title = _titleArr[0];
-                                }else{
-                                    document.title += _titleArr[i];
-                                }
-                                i++;
-                            }
-                        },100)
+                        // timer = setInterval(function(){
+                        //     if(document.body.className != 'hidden'){
+                        //         clearTimeout(timer);
+                        //         document.title = _title;
+                        //     }else{
+                        //         if(i == 0){
+                        //             document.title = _titleArr[0];
+                        //         }else if(i >= 11){
+                        //             i = 0;
+                        //             document.title = _titleArr[0];
+                        //         }else{
+                        //             document.title += _titleArr[i];
+                        //         }
+                        //         i++;
+                        //     }
+                        // },100)
                     }else{
-                        i = 0;
-                        document.title = _title;
-                        clearTimeout(timer);
+                        // i = 0;
+                        // document.title = _title;
+                        // clearTimeout(timer);
                     }
                 }
                 // set the initial state
@@ -1547,31 +1604,31 @@ $(function() {
             var appMainHeader = $('#appMainHeader')
             var winWidth = $(window).width();
             var winHeight = $(window).height();
-            var appMinWidth = 725;
+            var appMinWidth = 860;
             var isLeftResizing = false;
             var isRightResizing = false;
             var _width = 0;
             var _tempWidth = 0;
-            var appLeftRatio = 140 / winWidth;
-            var appRightRatio = 320 / winWidth;
+            var appLeftRatio = 140 / appMinWidth;
+            var appRightRatio = 320 / appMinWidth;
             if($(window).width() <= appMinWidth){
                 $('body').width(appMinWidth)
                 app.width(appMinWidth);
                 appContainer.height($(window).height() - appFooter.height());
                 appLeft.width(140);
+                appMian.width(400);
                 appRight.width(320);
-                appMian.width(265);
                 appMainHeader.css('margin-left', -140);
                 $('.recording-ctrl-bar').css('padding', '0 20px');
             }else{
                 $('body').width('100%');
                 app.width('100%');
                 appContainer.height($(window).height() - appFooter.height());
-                appLeft.width(parseInt($(window).width() * appLeftRatio));
-                appRight.width(parseInt($(window).width() * appRightRatio));
+                appLeft.width(140);
                 appMian.width(parseInt($(window).width() - appLeft.width() - appRight.width()));
+                appRight.width(320);
                 appMainHeader.css('margin-left', -appLeft.width());
             }
             if (document.URL.indexOf('player.htm') >= 0) {
@@ -2237,6 +2294,7 @@ $(function() {
     function initJavaPage(treeData){
         console.info('initJavaPage');
+
         var _datalist = treeData || [];
         var recordTemplate = '';
         var replayTemplate = '';
@@ -2247,6 +2305,7 @@ $(function() {
         setHtmlButton(_languageid, 'JAVA');
+        // 生成 textarea
         for (var i = 0; i < _datalist.length; i++) {
             if(!_datalist[i].isParent){
                 var _file = _datalist[i].name;
@@ -2258,45 +2317,57 @@ $(function() {
                     "record": _name + 'Record', 
                     "replay": _name + 'Replay'
                 });
-                recordTemplate += '<div id="'+ _name +'RecordWrap"><textarea id="'+ _name + 'Record" title="'+ _name +'" style="display: none;"></textarea></div>'
+                // 判断是否是播放页面，如果是则不显示录制区相关dom
+                if(!isReplayPage){
+                    recordTemplate += '<div id="'+ _name +'RecordWrap"><textarea id="'+ _name + 'Record" title="'+ _name +'" style="display: none;"></textarea></div>'
+                }
+
                 replayTemplate += '<div id="'+ _name +'ReplayWrap"><textarea id="'+ _name + 'Replay" title="'+ _name +'" style="display: none;"></textarea></div>'
             }
         }
-
-        $('#recordzone').append(recordTemplate);
+        // 判断是否是播放页面，如果是则不显示录制区相关dom
+        if(!isReplayPage){
+            $('#recordzone').append(recordTemplate);
+        }
         $('#replayzone').append(replayTemplate);
+        // 生成 CodeMirror
         for (var i = 0; i < treeLinkEditor.length; i++) {
-        
-            treeLinkEditor[i].CodeMirrorRecord = CodeMirror.fromTextArea($('#' + treeLinkEditor[i].record)[0], {
-                value: '',
-                mode: "text/x-java",
-                lineNumbers: true,
-                smartIndent: false,
-                onChange: function(em, changeobj) {
-                    // console.log('onChange');
-                    // console.log(em);
-                    // console.log(changeobj);
-
-                    // 是否需要在开始录制之后采取设置值
-                    // if(GBCodePlayBack.isRcording == 1){
-                        if (GBCodePlayBack.recording_status) {
-                            GBCodePlayBack.onChange(ZTREE.getCurrentEditor(em.getWrapperElement().getAttribute('id')), changeobj);
-                        }
-                        if (GBCodePlayBack.autorun) {
-                            GBCodePlayBack.generateResult(GBCodePlayBack.htmleditor.getValue(), GBCodePlayBack.csseditor.getValue(), GBCodePlayBack.jseditor.getValue());
-                        }
-                    // }
-                },
-                onFocus: function(em) {
-                    // console.log('onFocus');
-                    // console.log(em);
-                },
-                onCursorActivity: function(em) {
-                    // console.log('onCursorActivity');
-                    // console.log(em);
-                }
-            });
+            // 判断是否是播放页面，如果是则不显示录制区相关dom
+            if(!isReplayPage){
+                treeLinkEditor[i].CodeMirrorRecord = CodeMirror.fromTextArea($('#' + treeLinkEditor[i].record)[0], {
+                    value: '',
+                    mode: "text/x-java",
+                    lineNumbers: true,
+                    smartIndent: false,
+                    onChange: function(em, changeobj) {
+                        // console.log('onChange');
+                        // console.log(em);
+                        // console.log(changeobj);
+
+                        // 是否需要在开始录制之后采取设置值
+                        // if(GBCodePlayBack.isRcording == 1){
+                            if (GBCodePlayBack.recording_status) {
+                                GBCodePlayBack.onChange(ZTREE.getCurrentEditor(em.getWrapperElement().getAttribute('id')), changeobj);
+                            }
+                            if (GBCodePlayBack.autorun) {
+                                GBCodePlayBack.generateResult(GBCodePlayBack.htmleditor.getValue(), GBCodePlayBack.csseditor.getValue(), GBCodePlayBack.jseditor.getValue());
+                            }
+                        // }
+                    },
+                    onFocus: function(em) {
+                        // console.log('onFocus');
+                        // console.log(em);
+                    },
+                    onCursorActivity: function(em) {
+                        // console.log('onCursorActivity');
+                        // console.log(em);
+                    }
+                });
+                treeLinkEditor[i].CodeMirrorRecordId = treeLinkEditor[i].record + 'CodeMirror';
+                $('#' + treeLinkEditor[i].record).next().attr('id', treeLinkEditor[i].CodeMirrorRecordId).hide();
+            }
+
             treeLinkEditor[i].CodeMirrorReplay = CodeMirror.fromTextArea($('#' + treeLinkEditor[i].replay)[0], {
                 value: '',
                 mode: "text/x-java",
@@ -2309,11 +2380,7 @@ $(function() {
                 onCursorActivity: function(em) {
                 }
             });
-        
-            treeLinkEditor[i].CodeMirrorRecordId = treeLinkEditor[i].record + 'CodeMirror';
             treeLinkEditor[i].CodeMirrorReplayId = treeLinkEditor[i].replay + 'CodeMirror';
-
-            $('#' + treeLinkEditor[i].record).next().attr('id', treeLinkEditor[i].CodeMirrorRecordId).hide();
             $('#' + treeLinkEditor[i].replay).next().attr('id', treeLinkEditor[i].CodeMirrorReplayId).hide();
         }
         // treeLinkEditor[0].CodeMirrorEditor.hide()
@@ -2321,9 +2388,6 @@ $(function() {
         ZTREE.showEdite();
     }
-
-
-
     // 初始化渲染编辑页面
     function initPageLang() {
         if (document.URL.indexOf('index.htm') >= 0) {
@@ -14,4 +14,29 @@ getCDNFile = function (cdnUrl) {
 }
-
+;(function($w, $){
+    var utils = {};
+    /**
+     * 访问出错
+     * @type {Object}
+     */
+    utils.errorVisit = {
+        template: $('<div id="tips" class="tips">' + 
+                            '<div class="tips-inner">' + 
+                                '访问出错，请使用正确的方式打开此网站。<br />' + 
+                                '请访问 <a href="//geek.gaoxiaobang.com">geek.gaoxiaobang.com</a>' + 
+                            '</div>' + 
+                        '</div>'),
+        show: function(){
+            console.info('utils.errorVisit.show');
+            var _this = this;
+            $('body').append(_this.template);
+        },
+        hide: function(){
+            console.info('utils.errorVisit.hide');
+            var _this = this;
+            _this.template.remove();
+        }
+    }
+    $w.utils = $w.utils || utils;
+})(window, jQuery)
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>互动编程</title>
+    <title>录制课程 - 互动编程</title>
     <link rel="stylesheet" href="../css/reset.css">
     <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
     <link href="../css/validationEngine.jquery.css" rel="stylesheet">
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>互动编程</title>
+    <title>播放课程 - 互动编程</title>
     <link rel="stylesheet" href="../css/reset.css">
     <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
     <link href="../css/validationEngine.jquery.css" rel="stylesheet">
@@ -86,8 +86,7 @@
             <div id="appMian">
                 <div id="appMainHeader">
                     <ul id="recordertab" class="nav nav-tabs pull-left">
-                        <li class="active"><a href="#recordzone" data-toggle="tab"><i class="icon iconfont icon-suspend"></i>课程录制区</a></li>
-                        <li><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>播放课程</a></li>
+                        <li class="active"><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>播放课程</a></li>
                     </ul>
                     <div id="editorwrapper" class="pull-right">
                         <div class="btn-group">
@@ -97,8 +96,7 @@
                     </div>
                 </div>
                 <div id="textarea">
-                    <div id="recordzone" class="active"></div>
-                    <div id="replayzone"></div>
+                    <div id="replayzone" class="active"></div>
                 </div>
                 <div id="handleMR"></div>
                 <div class="pause-shodow hidden">