梁美英 / programming · Commits

Commit 1ddd290059e073e8729d423fe9c30792e2e6a0ce

Authored by ykxie
1 parent 692182a4

add fullscreen

Inline Side-by-side
Showing 5 changed files with 395 additions and 360 deletions
src/gxb-ide/Iterm.js
  View file @1ddd290
@@ -23,6 +23,8 @@ @@ -23,6 +23,8 @@
23 $('#CompileBtn').on('click', function(){ _this.compile(); }) 23 $('#CompileBtn').on('click', function(){ _this.compile(); })
24 $('#save_compile').on('click', function(){ _this.saveCompile(); }) 24 $('#save_compile').on('click', function(){ _this.saveCompile(); })
25 $('#cancel_compile').on('click', function(){ _this.cancelCompile(); }) 25 $('#cancel_compile').on('click', function(){ _this.cancelCompile(); })
  26 + $('#full-screen').on('click', function(){ _this.fullScreen(); })
  27 + $('#back-screen').on('click', function(){ _this.exitFullscreen(); })
26 }, 28 },
27 compile: function(){ 29 compile: function(){
28 var _this = this; 30 var _this = this;
@@ -90,6 +92,16 @@ @@ -90,6 +92,16 @@
90 this.compileStatus = true; 92 this.compileStatus = true;
91 console.log(this.compileStatus) 93 console.log(this.compileStatus)
92 recodingConf() 94 recodingConf()
  95 + },
  96 + fullScreen: function(){
  97 + launchFullScreen(document.body);
  98 + $('#back-screen').show();
  99 + $('#full-screen').hide();
  100 + },
  101 + exitFullscreen: function(){
  102 + exitFullscreen();
  103 + $('#full-screen').show();
  104 + $('#back-screen').hide();
93 } 105 }
94 } 106 }
95 107
@@ -185,5 +197,27 @@ @@ -185,5 +197,27 @@
185 } 197 }
186 } 198 }
187 199
  200 + // 找到支持的方法, 使用需要全屏的 element 调用
  201 + function launchFullScreen(element) {
  202 + if (element.requestFullscreen) {
  203 + element.requestFullscreen();
  204 + } else if (element.mozRequestFullScreen) {
  205 + element.mozRequestFullScreen();
  206 + } else if (element.webkitRequestFullscreen) {
  207 + element.webkitRequestFullscreen();
  208 + } else if (element.msRequestFullscreen) {
  209 + element.msRequestFullscreen();
  210 + }
  211 + }
  212 + function exitFullscreen() {
  213 + if (document.exitFullscreen) {
  214 + document.exitFullscreen();
  215 + } else if (document.mozExitFullScreen) {
  216 + document.mozExitFullScreen();
  217 + } else if (document.webkitExitFullscreen) {
  218 + document.webkitExitFullscreen();
  219 + }
  220 + }
  221 +
188 window.Iterm = Iterm 222 window.Iterm = Iterm
189 })(window) 223 })(window)
190 \ No newline at end of file 224 \ No newline at end of file
src/v1.1/index.html
  View file @1ddd290
@@ -114,7 +114,7 @@ @@ -114,7 +114,7 @@
114 <span class="ladda-label">编译运行</span> 114 <span class="ladda-label">编译运行</span>
115 </a> 115 </a>
116 <a id="full-screen" class=""><i class="icon iconfont icon-quanping1"></i></a> 116 <a id="full-screen" class=""><i class="icon iconfont icon-quanping1"></i></a>
117 - <!-- <a id="back-screen" class=""><i class="icon iconfont icon-quanping1"></i></a> --> 117 + <a id="back-screen" class="" style="display: none;"><i class="icon iconfont icon-quanping1"></i></a>
118 </div> 118 </div>
119 </div> 119 </div>
120 120
src/v1.1/player.html
  View file @1ddd290
@@ -2,215 +2,182 @@ @@ -2,215 +2,182 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 - <meta name="renderer" content="webkit">  
6 - <title>播放课程 - 互动编程</title>  
7 - <link rel="stylesheet" href="../css/reset.css"> 5 + <title>JAVA</title>
8 <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css"> 6 <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
9 - <link href="../css/validationEngine.jquery.css" rel="stylesheet">  
10 <link href="../css/codemirror.css" rel="stylesheet"> 7 <link href="../css/codemirror.css" rel="stylesheet">
11 - <link href="../css/cm-theme/gbtags.css" rel="stylesheet">  
12 - <link href="../css/cm-theme/eclipse.css" rel="stylesheet">  
13 - <link href="../css/cm-theme/gbtags-dark.css" rel="stylesheet">  
14 - <link href="../css/font/iconfont.css" rel="stylesheet">  
15 - <link href="../css/font_all/iconfont.css" rel="stylesheet">  
16 - <link href="../css/layout.css" rel="stylesheet">  
17 - <link href="../css/main.css" rel="stylesheet">  
18 - <link href="../css/recording.css" rel="stylesheet"> 8 + <link href="../css/reset.css" rel="stylesheet">
19 <link rel="stylesheet" href="../js/audioPlayer/theme.default.css"> 9 <link rel="stylesheet" href="../js/audioPlayer/theme.default.css">
20 - <!-- <link href="http://lab.hakim.se/ladda/dist/ladda.min.css" rel="stylesheet"> -->  
21 <link rel="stylesheet" href="../js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css"> 10 <link rel="stylesheet" href="../js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css">
22 11
  12 + <link href="../common/fonts/iconfont.css" rel="stylesheet">
  13 +
  14 + <link href="../css/cm-theme/gbtags.css" rel="stylesheet">
  15 + <link href="../css/cm-theme/eclipse.css" rel="stylesheet">
  16 + <link href="../css/cm-theme/gbtags-dark.css" rel="stylesheet">
  17 +
  18 + <link rel="stylesheet" href="../gxb-ide/toolBox.css">
  19 + <link rel="stylesheet" href="../css/ide.css">
  20 +
  21 +
  22 +
23 <script> 23 <script>
24 - var gxb_api = "https://restful1.gaoxiaobang.com"; 24 + var gxb_api = "https://restful.gaoxiaobang.com";
25 // var gxb_api = "http://192.168.80.223:8080" 25 // var gxb_api = "http://192.168.80.223:8080"
26 -  
27 </script> 26 </script>
28 27
29 - <script src="../js/jquery-1.7.1.js"></script>  
30 - <script src="../js/bootstrap.js"></script>  
31 -  
32 - <script src="../js/humps-2.0.0/humps.js"></script>  
33 -  
34 - <script src="../js/util/util.js"></script>  
35 - <script src="../js/util/Hourglass.js"></script>  
36 -  
37 -  
38 - <script src="../js/spin.js"></script>  
39 - <script src="../js/ladda.js"></script>  
40 -  
41 - <script src="../js/jquery-ui-1.8.20.custom.js"></script>  
42 - <script src="../js/codemirror.js"></script>  
43 - <!-- <script src="../js/handlebars-1.3.js"></script> -->  
44 - <script src="../js/emmet.js"></script>  
45 - <script src="../js/jshint-2.6.min.js"></script>  
46 - <script src="../js/jstorage.js"></script>  
47 -  
48 - <script src="../js/05-util.js"></script>  
49 - <script src="../js/03-http.js"></script>  
50 -  
51 - <script src="../js/jquery.validationEngine.js"></script>  
52 - <script src="../js/jquery.validationEngine-zh.js"></script>  
53 - <script src="../js/jquery.isotope.js"></script>  
54 -  
55 - <link rel="stylesheet" href="../css/demo.css">  
56 - <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>  
57 - <script src="../js/gb.js"></script>  
58 - <script type="text/javascript" src="../js/audioPlayer/jQuery.AudioPlayer.js"></script>  
59 - <!-- <script src="../js/gbreplayer.js"></script> -->  
60 -  
61 - <script src="../js/gbdebug/mode/xml/xml.js"></script>  
62 - <script src="../js/gbdebug/mode/javascript/javascript.js"></script>  
63 - <script src="../js/gbdebug/mode/css/css.js"></script>  
64 - <script src="../js/gbdebug/mode/htmlmixed/htmlmixed.js"></script>  
65 - <script src="../js/gbdebug/mode/clike/clike.js"></script>  
66 - <script src="../js/gbdebug/mode/php/php.js"></script>  
67 - <script src="../js/gbdebug/mode/python/python.js"></script>  
68 - <style type="text/css">  
69 - #recordzone,  
70 - #replayzone{  
71 - display: none; 28 + <style>
  29 + .ladda-button[data-style=expand-right] .ladda-spinner{
  30 + right: 0;
  31 + }
  32 + .ladda-button[data-style=expand-right][data-loading]{
  33 + padding-right: 32px;
72 } 34 }
73 - #recordzone.active,  
74 - #replayzone.active{  
75 - display: block; 35 + .ladda-button .ladda-spinner{
  36 + top: 0;
76 } 37 }
77 </style> 38 </style>
  39 +
  40 +
78 </head> 41 </head>
79 <body> 42 <body>
80 - <div id="app" class="wrapper">  
81 - <div id="appContainer">  
82 - <div id="appLeft">  
83 - <div class="tree-header">目录</div>  
84 - <ul id="folder" class="ztree"></ul>  
85 - <div id="handleLM"></div>  
86 - </div>  
87 - <div id="appMian">  
88 - <div id="appMainHeader">  
89 - <ul id="recordertab" class="nav nav-tabs pull-left">  
90 - <li class="active"><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>播放课程</a></li>  
91 - </ul>  
92 - <div id="editorwrapper" class="pull-right">  
93 - <div class="btn-group">  
94 - <div id="htmlbutton" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="当前课程环境：Java" data-editorname="html">JAVA</div>  
95 - <div class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="JDK版本">JDK 7</div>  
96 - </div>  
97 - </div> 43 + <div class="programing">
  44 + <!-- 控制条 -->
  45 + <div class="record-title">
  46 + <ul id="recordertab" class="nav nav-tabs pull-left">
  47 + <li class="active" style="display: none;">
  48 + <a href="#recordzone" data-toggle="tab">
  49 + <i class="icon iconfont icon-suspend"></i>课程录制区
  50 + </a>
  51 + </li>
  52 + <li>
  53 + <a href="#replayzone" data-toggle="tab">
  54 + <i class="icon iconfont icon-yulan"></i>课程预览
  55 + </a>
  56 + </li>
  57 + </ul>
  58 + </div>
  59 +
  60 + <!-- 录制区 -->
  61 + <div class="record-wrap">
  62 + <!-- 录制区 -->
  63 + <div class="gxb-record">
  64 + <div id="ideDir">
  65 + <div class="tree-header">目录</div>
  66 + <ul id="folder" class="ztree"></ul>
  67 + <div id="handleLM"></div>
98 </div> 68 </div>
99 - <div id="textarea">  
100 - <div id="replayzone" class="active"></div> 69 +
  70 + <div id="ideEditer" class="tab-content">
  71 + <div id="recordzone" class="tab-pane active"></div>
  72 + <div id="replayzone" class="tab-pane"></div>
101 </div> 73 </div>
102 - <div id="handleMR"></div>  
103 - <div class="pause-shodow hidden">  
104 - <div class="compile-loading">  
105 - <img src="../img/loading.png" alt=""> 74 + </div>
  75 + <div class="pause-shodow" style="display: none;">
  76 + <div class="compile-loading">
  77 + <img src="../img/loading.png" alt="">
  78 + </div>
  79 + <div class="compile-reslut" style="display: none;">
  80 + <div class="tip-header">
  81 + <span>成功获取编译运行结果</span>
  82 + </div>
  83 + <div class="tip-content">
  84 + <p>保存编译结果后，播放到此处会在运行区域直接显示结果。需要保存结果后继续录制吗?</p>
106 </div> 85 </div>
107 - <div class="compile-reslut" style="display: none;">  
108 - <div class="tip-header">  
109 - <span>成功获取编译运行结果</span>  
110 - </div>  
111 - <div class="tip-content">  
112 - <p>保存编译结果后，播放到此处会在运行区域直接显示结果。需要保存结果后继续录制吗?</p>  
113 - </div>  
114 - <div class="tip-footer">  
115 - <button class="btn btn-success btn-sm" id="save_compile">保存并继续录制</button>  
116 - <button class="btn btn-danger btn-sm" id="cancel_compile">不保存继续录制</button>  
117 - </div> 86 + <div class="tip-footer">
  87 + <button class="btn btn-success btn-sm" id="save_compile">保存并继续录制</button>
  88 + <button class="btn btn-danger btn-sm" id="cancel_compile">不保存继续录制</button>
118 </div> 89 </div>
119 </div> 90 </div>
120 </div> 91 </div>
121 - <div id="appRight">  
122 - <div id="resultpanel" class="panel panel-default editor-result">  
123 - <div class="panel-heading result-header">  
124 - <div class="pull-left">  
125 - <div id="compileBtnGroup" class="btn-group"></div>  
126 - </div>  
127 - <div class="pull-right">  
128 - <a id="full-screen" href="javascript:;" data-toggle="tooltip" data-placement="left" data-original-title="全屏录制" class="btn btn-link"><i class="icon iconfont icon-fangda"></i></a>  
129 - <a id="back-screen" href="javascript:;" data-toggle="tooltip" data-placement="left" data-original-title="退出全屏录制" class="btn btn-link" style="display: none;"><i class="icon iconfont icon-fangda"></i></a>  
130 - </div>  
131 - <div class="btn-group">  
132 - <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button>  
133 - <!-- <p id="replay">预览录制</p> -->  
134 - </div>  
135 - <!-- <div class="btn-group pull-right" id="fontendrun">  
136 - <button id="autorun" type="button" class="btn" title="切换自动/手动运行代码" data-placement="bottom" data-autorun="1"></button>  
137 - <button id="runnow" type="button" class="btn" title="手动运行代码" data-placement="bottom" disabled="disabled">  
138 - 自动运行  
139 - </button>  
140 - </div> -->  
141 - </div>  
142 - <div class="panel-body hidden" id="cmprun-output">  
143 - <div id="resultoutput">  
144 - <!-- Nav tabs -->  
145 - <ul class="nav nav-tabs result-tabs" role="tablist" id="cmprun-tabs">  
146 - <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>  
147 - <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>  
148 - <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>  
149 - <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li>  
150 - </ul>  
151 - <!-- Tab panes -->  
152 - <div class="tab-content">  
153 - <div class="tab-pane active padall15" id="stdin">  
154 - <input type="text" class="form-control" id="runtimeArgus" placeholder="标准输入">  
155 - </div>  
156 - <div class="tab-pane padall15" id="cmpinfo"></div>  
157 - <div class="tab-pane padall15" id="stderr"></div>  
158 - <div class="tab-pane padall15" id="output"></div>  
159 - </div>  
160 - </div> 92 + </div>
  93 +
  94 + <!-- 控录制录制 -->
  95 + <div class="record-toolbox">
  96 + <!-- 运行结果区 -->
  97 + <div class="console-wrap">
  98 + <div id="toolbar">
  99 + <!-- Nav tabs -->
  100 + <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
  101 + <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text">标准</a></li>
  102 + <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>
  103 + <li><a href="#stderr" role="tab" data-toggle="tab" class="text">错误</a></li>
  104 + <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>
  105 + </ul>
  106 + <div class="pull-right func">
  107 + <a class="btn btn-success" id="CompileBtn">
  108 + <span class="ladda-label">编译运行</span>
  109 + </a>
  110 + <a id="full-screen" class=""><i class="icon iconfont icon-quanping1"></i></a>
  111 + <a id="back-screen" class="" style="display: none;"><i class="icon iconfont icon-quanping1"></i></a>
161 </div> 112 </div>
162 - <div class="panel-body" id="ifrcontainer">  
163 - <iframe id="resultiframe" frameBorder="0" width="100%"></iframe> 113 + </div>
  114 +
  115 + <!-- Tab panes -->
  116 + <div id="resultoutput" class="tab-content need-compile">
  117 + <div class="tab-pane active padall15" id="stdin">
  118 + <input type="text" class="form-control" id="runtimeArgus" placeholder="标准输入">
164 </div> 119 </div>
  120 + <div class="tab-pane padall15" id="cmpinfo"></div>
  121 + <div class="tab-pane padall15" id="stderr"></div>
  122 + <div class="tab-pane padall15" id="output"></div>
  123 + </div>
  124 + <div class="panel-body no-compile" id="ifrcontainer">
  125 + <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
165 </div> 126 </div>
166 </div> 127 </div>
167 - </div>  
168 - <div id="playFooter">  
169 - <div class="" id="audioWrap">  
170 - <button class="play-code" style="display: none;">  
171 - <i class="icon iconfont icon-play"></i>  
172 - </button> 128 + <input type="hidden" class="audio-url" value="">
  129 + <div id="playFooter">
  130 + <div class="" id="audioWrap">
  131 + <button class="play-code" style="display: none;">
  132 + <i class="icon iconfont icon-play"></i>
  133 + </button>
  134 + </div>
173 </div> 135 </div>
174 -<!-- <div class="playCode">  
175 - <button>开始</button>  
176 - </div> -->  
177 </div> 136 </div>
178 - </div>  
179 - <!-- -->  
180 - <div class="upload-tip" style="display: none;">  
181 - <img src="../img/upload_tip.png" alt="">  
182 - </div>  
183 -  
184 137
185 - <!-- 准备开始 -->  
186 - <div id="countdown" style="display: none;">  
187 - <img src="" alt="">  
188 - </div>  
189 -  
190 - <!-- 重新开始 -->  
191 - <div class="re-tips" style="display: none;">  
192 - <div class="re-reslut">  
193 - <div class="tip-header">  
194 - <span>提示</span>  
195 - </div>  
196 - <div class="tip-content">  
197 - <p>你确定要重新录制吗?</p>  
198 - </div>  
199 - <div class="tip-footer">  
200 - <button class="btn btn-success btn-sm" id="re-sure">确定</button>  
201 - <button class="btn btn-danger btn-sm" id="re-cancel">取消</button>  
202 - </div> 138 + <!-- 准备开始 -->
  139 + <div id="countdown" style="display: none;">
  140 + <img src="" alt="">
203 </div> 141 </div>
  142 + <!-- 保存提示 -->
  143 + <div class="upload-tip" style="display: none;">
  144 + <img src="../img/upload_tip.png" alt="">
  145 + </div>
  146 +
204 </div> 147 </div>
  148 +
  149 + <script src="../js/jquery-1.7.1.js"></script>
  150 + <script src="../js/bootstrap.js"></script>
  151 + <script src="../js/codemirror.js"></script>
  152 + <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>
  153 + <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.exedit.js"></script>
  154 + <script src="../js/emmet.js"></script>
205 155
  156 + <link rel="stylesheet" href="../js/ladda/ladda-themeless.min.css">
  157 + <script src="../js/ladda/spin.js"></script>
  158 + <script src="../js/ladda/ladda.js"></script>
206 159
207 - <script src="../js/recorder/Myna.js"></script>  
208 - <script src="../js/recording/recording.js"></script> 160 + <script src="../js/util/Hourglass.js"></script>
  161 + <script src="../js/util/util.js"></script>
209 162
210 - <script>  
211 - </script>  
212 -</body>  
213 -</html> 163 + <script src="../js/05-util.js"></script>
  164 + <script src="../js/03-http.js"></script>
214 165
  166 + <script type="text/javascript" src="../js/audioPlayer/jQuery.AudioPlayer.js"></script>
215 167
  168 + <script src="../js/recorder/Myna.js"></script>
  169 + <script src="../gxb-ide/Dir.js"></script>
  170 + <script src="../gxb-ide/CodingEditer.js"></script>
  171 + <script src="../gxb-ide/Iterm.js"></script>
  172 + <script src="../gxb-ide/Ide.js"></script>
  173 + <script src="../gxb-ide/ToolBox.js"></script>
216 174
  175 + <script src="../js/player.js"></script>
  176 +
  177 + <script src="../js/gbdebug/mode/xml/xml.js"></script>
  178 + <script src="../js/gbdebug/mode/javascript/javascript.js"></script>
  179 + <script src="../js/gbdebug/mode/css/css.js"></script>
  180 + <script src="../js/gbdebug/mode/htmlmixed/htmlmixed.js"></script>
  181 + <script src="../js/gbdebug/mode/clike/clike.js"></script>
  182 +</body>
  183 +</html>
217 \ No newline at end of file 184 \ No newline at end of file
src/v1.1/player1.html deleted 100644 → 0
  View file @692182a
1 -<!DOCTYPE html>  
2 -<html lang="en">  
3 -<head>  
4 - <meta charset="UTF-8">  
5 - <title>JAVA</title>  
6 - <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">  
7 - <link href="../css/codemirror.css" rel="stylesheet">  
8 - <link href="../css/reset.css" rel="stylesheet">  
9 - <link rel="stylesheet" href="../js/audioPlayer/theme.default.css">  
10 - <link rel="stylesheet" href="../js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css">  
11 -  
12 - <link href="../common/fonts/iconfont.css" rel="stylesheet">  
13 -  
14 - <link href="../css/cm-theme/gbtags.css" rel="stylesheet">  
15 - <link href="../css/cm-theme/eclipse.css" rel="stylesheet">  
16 - <link href="../css/cm-theme/gbtags-dark.css" rel="stylesheet">  
17 -  
18 - <link rel="stylesheet" href="../gxb-ide/toolBox.css">  
19 - <link rel="stylesheet" href="../css/ide.css">  
20 -  
21 - <script src="../js/jquery-1.7.1.js"></script>  
22 - <script src="../js/bootstrap.js"></script>  
23 - <script src="../js/codemirror.js"></script>  
24 - <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>  
25 - <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.exedit.js"></script>  
26 - <script src="../js/emmet.js"></script>  
27 -  
28 - <link rel="stylesheet" href="../js/ladda/ladda-themeless.min.css">  
29 - <script src="../js/ladda/spin.js"></script>  
30 - <script src="../js/ladda/ladda.js"></script>  
31 -  
32 - <script src="../js/util/Hourglass.js"></script>  
33 - <script src="../js/util/util.js"></script>  
34 -  
35 - <script src="../js/05-util.js"></script>  
36 - <script src="../js/03-http.js"></script>  
37 -  
38 - <script type="text/javascript" src="../js/audioPlayer/jQuery.AudioPlayer.js"></script>  
39 -  
40 - <script src="../js/recorder/Myna.js"></script>  
41 - <script src="../gxb-ide/Dir.js"></script>  
42 - <script src="../gxb-ide/CodingEditer.js"></script>  
43 - <script src="../gxb-ide/Iterm.js"></script>  
44 - <script src="../gxb-ide/Ide.js"></script>  
45 - <script src="../gxb-ide/ToolBox.js"></script>  
46 -  
47 - <script src="../js/player.js"></script>  
48 -  
49 - <script src="../js/gbdebug/mode/xml/xml.js"></script>  
50 - <script src="../js/gbdebug/mode/javascript/javascript.js"></script>  
51 - <script src="../js/gbdebug/mode/css/css.js"></script>  
52 - <script src="../js/gbdebug/mode/htmlmixed/htmlmixed.js"></script>  
53 - <script src="../js/gbdebug/mode/clike/clike.js"></script>  
54 -  
55 - <script>  
56 - var gxb_api = "https://restful.gaoxiaobang.com";  
57 - // var gxb_api = "http://192.168.80.223:8080"  
58 - </script>  
59 -  
60 - <style>  
61 - .ladda-button[data-style=expand-right] .ladda-spinner{  
62 - right: 0;  
63 - }  
64 - .ladda-button[data-style=expand-right][data-loading]{  
65 - padding-right: 32px;  
66 - }  
67 - .ladda-button .ladda-spinner{  
68 - top: 0;  
69 - }  
70 - </style>  
71 -  
72 -  
73 -</head>  
74 -<body>  
75 - <div class="programing">  
76 - <!-- 控制条 -->  
77 - <div class="record-title">  
78 - <ul id="recordertab" class="nav nav-tabs pull-left">  
79 - <li class="active" style="display: none;">  
80 - <a href="#recordzone" data-toggle="tab">  
81 - <i class="icon iconfont icon-suspend"></i>课程录制区  
82 - </a>  
83 - </li>  
84 - <li>  
85 - <a href="#replayzone" data-toggle="tab">  
86 - <i class="icon iconfont icon-yulan"></i>课程预览  
87 - </a>  
88 - </li>  
89 - </ul>  
90 - </div>  
91 -  
92 - <!-- 录制区 -->  
93 - <div class="record-wrap">  
94 - <!-- 录制区 -->  
95 - <div class="gxb-record">  
96 - <div id="ideDir">  
97 - <div class="tree-header">目录</div>  
98 - <ul id="folder" class="ztree"></ul>  
99 - <div id="handleLM"></div>  
100 - </div>  
101 -  
102 - <div id="ideEditer" class="tab-content">  
103 - <div id="recordzone" class="tab-pane active"></div>  
104 - <div id="replayzone" class="tab-pane"></div>  
105 - </div>  
106 - </div>  
107 - <div class="pause-shodow" style="display: none;">  
108 - <div class="compile-loading">  
109 - <img src="../img/loading.png" alt="">  
110 - </div>  
111 - <div class="compile-reslut" style="display: none;">  
112 - <div class="tip-header">  
113 - <span>成功获取编译运行结果</span>  
114 - </div>  
115 - <div class="tip-content">  
116 - <p>保存编译结果后，播放到此处会在运行区域直接显示结果。需要保存结果后继续录制吗?</p>  
117 - </div>  
118 - <div class="tip-footer">  
119 - <button class="btn btn-success btn-sm" id="save_compile">保存并继续录制</button>  
120 - <button class="btn btn-danger btn-sm" id="cancel_compile">不保存继续录制</button>  
121 - </div>  
122 - </div>  
123 - </div>  
124 - </div>  
125 -  
126 - <!-- 控录制录制 -->  
127 - <div class="record-toolbox">  
128 - <!-- 运行结果区 -->  
129 - <div class="console-wrap">  
130 - <div id="toolbar">  
131 - <!-- Nav tabs -->  
132 - <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">  
133 - <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text">标准</a></li>  
134 - <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text">编译</a></li>  
135 - <li><a href="#stderr" role="tab" data-toggle="tab" class="text">错误</a></li>  
136 - <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>  
137 - </ul>  
138 - <div class="pull-right func">  
139 - <a class="btn btn-success" id="CompileBtn">  
140 - <span class="ladda-label">编译运行</span>  
141 - </a>  
142 - <a id="full-screen" class=""><i class="icon iconfont icon-quanping1"></i></a>  
143 - <!-- <a id="back-screen" class=""><i class="icon iconfont icon-quanping1"></i></a> -->  
144 - </div>  
145 - </div>  
146 -  
147 - <!-- Tab panes -->  
148 - <div id="resultoutput" class="tab-content need-compile">  
149 - <div class="tab-pane active padall15" id="stdin">  
150 - <input type="text" class="form-control" id="runtimeArgus" placeholder="标准输入">  
151 - </div>  
152 - <div class="tab-pane padall15" id="cmpinfo"></div>  
153 - <div class="tab-pane padall15" id="stderr"></div>  
154 - <div class="tab-pane padall15" id="output"></div>  
155 - </div>  
156 - <div class="panel-body no-compile" id="ifrcontainer">  
157 - <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>  
158 - </div>  
159 - </div>  
160 - <input type="hidden" class="audio-url" value="">  
161 - <div id="playFooter">  
162 - <div class="" id="audioWrap">  
163 - <button class="play-code" style="display: none;">  
164 - <i class="icon iconfont icon-play"></i>  
165 - </button>  
166 - </div>  
167 - </div>  
168 - </div>  
169 -  
170 - <!-- 准备开始 -->  
171 - <div id="countdown" style="display: none;">  
172 - <img src="" alt="">  
173 - </div>  
174 - <!-- 保存提示 -->  
175 - <div class="upload-tip" style="display: none;">  
176 - <img src="../img/upload_tip.png" alt="">  
177 - </div>  
178 -  
179 - </div>  
180 -  
181 -</body>  
182 -</html>  
183 \ No newline at end of file 0 \ No newline at end of file
src/v1.1/player2.html 0 → 100644
  View file @1ddd290
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="renderer" content="webkit">
  6 + <title>播放课程 - 互动编程</title>
  7 + <link rel="stylesheet" href="../css/reset.css">
  8 + <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
  9 + <link href="../css/validationEngine.jquery.css" rel="stylesheet">
  10 + <link href="../css/codemirror.css" rel="stylesheet">
  11 + <link href="../css/cm-theme/gbtags.css" rel="stylesheet">
  12 + <link href="../css/cm-theme/eclipse.css" rel="stylesheet">
  13 + <link href="../css/cm-theme/gbtags-dark.css" rel="stylesheet">
  14 + <link href="../css/font/iconfont.css" rel="stylesheet">
  15 + <link href="../css/font_all/iconfont.css" rel="stylesheet">
  16 + <link href="../css/layout.css" rel="stylesheet">
  17 + <link href="../css/main.css" rel="stylesheet">
  18 + <link href="../css/recording.css" rel="stylesheet">
  19 + <link rel="stylesheet" href="../js/audioPlayer/theme.default.css">
  20 + <!-- <link href="http://lab.hakim.se/ladda/dist/ladda.min.css" rel="stylesheet"> -->
  21 + <link rel="stylesheet" href="../js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css">
  22 +
  23 + <script>
  24 + var gxb_api = "https://restful1.gaoxiaobang.com";
  25 + // var gxb_api = "http://192.168.80.223:8080"
  26 +
  27 + </script>
  28 +
  29 + <script src="../js/jquery-1.7.1.js"></script>
  30 + <script src="../js/bootstrap.js"></script>
  31 +
  32 + <script src="../js/humps-2.0.0/humps.js"></script>
  33 +
  34 + <script src="../js/util/util.js"></script>
  35 + <script src="../js/util/Hourglass.js"></script>
  36 +
  37 +
  38 + <script src="../js/spin.js"></script>
  39 + <script src="../js/ladda.js"></script>
  40 +
  41 + <script src="../js/jquery-ui-1.8.20.custom.js"></script>
  42 + <script src="../js/codemirror.js"></script>
  43 + <!-- <script src="../js/handlebars-1.3.js"></script> -->
  44 + <script src="../js/emmet.js"></script>
  45 + <script src="../js/jshint-2.6.min.js"></script>
  46 + <script src="../js/jstorage.js"></script>
  47 +
  48 + <script src="../js/05-util.js"></script>
  49 + <script src="../js/03-http.js"></script>
  50 +
  51 + <script src="../js/jquery.validationEngine.js"></script>
  52 + <script src="../js/jquery.validationEngine-zh.js"></script>
  53 + <script src="../js/jquery.isotope.js"></script>
  54 +
  55 + <link rel="stylesheet" href="../css/demo.css">
  56 + <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>
  57 + <script src="../js/gb.js"></script>
  58 + <script type="text/javascript" src="../js/audioPlayer/jQuery.AudioPlayer.js"></script>
  59 + <!-- <script src="../js/gbreplayer.js"></script> -->
  60 +
  61 + <script src="../js/gbdebug/mode/xml/xml.js"></script>
  62 + <script src="../js/gbdebug/mode/javascript/javascript.js"></script>
  63 + <script src="../js/gbdebug/mode/css/css.js"></script>
  64 + <script src="../js/gbdebug/mode/htmlmixed/htmlmixed.js"></script>
  65 + <script src="../js/gbdebug/mode/clike/clike.js"></script>
  66 + <script src="../js/gbdebug/mode/php/php.js"></script>
  67 + <script src="../js/gbdebug/mode/python/python.js"></script>
  68 + <style type="text/css">
  69 + #recordzone,
  70 + #replayzone{
  71 + display: none;
  72 + }
  73 + #recordzone.active,
  74 + #replayzone.active{
  75 + display: block;
  76 + }
  77 + </style>
  78 +</head>
  79 +<body>
  80 + <div id="app" class="wrapper">
  81 + <div id="appContainer">
  82 + <div id="appLeft">
  83 + <div class="tree-header">目录</div>
  84 + <ul id="folder" class="ztree"></ul>
  85 + <div id="handleLM"></div>
  86 + </div>
  87 + <div id="appMian">
  88 + <div id="appMainHeader">
  89 + <ul id="recordertab" class="nav nav-tabs pull-left">
  90 + <li class="active"><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>播放课程</a></li>
  91 + </ul>
  92 + <div id="editorwrapper" class="pull-right">
  93 + <div class="btn-group">
  94 + <div id="htmlbutton" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="当前课程环境：Java" data-editorname="html">JAVA</div>
  95 + <div class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="JDK版本">JDK 7</div>
  96 + </div>
  97 + </div>
  98 + </div>
  99 + <div id="textarea">
  100 + <div id="replayzone" class="active"></div>
  101 + </div>
  102 + <div id="handleMR"></div>
  103 + <div class="pause-shodow hidden">
  104 + <div class="compile-loading">
  105 + <img src="../img/loading.png" alt="">
  106 + </div>
  107 + <div class="compile-reslut" style="display: none;">
  108 + <div class="tip-header">
  109 + <span>成功获取编译运行结果</span>
  110 + </div>
  111 + <div class="tip-content">
  112 + <p>保存编译结果后，播放到此处会在运行区域直接显示结果。需要保存结果后继续录制吗?</p>
  113 + </div>
  114 + <div class="tip-footer">
  115 + <button class="btn btn-success btn-sm" id="save_compile">保存并继续录制</button>
  116 + <button class="btn btn-danger btn-sm" id="cancel_compile">不保存继续录制</button>
  117 + </div>
  118 + </div>
  119 + </div>
  120 + </div>
  121 + <div id="appRight">
  122 + <div id="resultpanel" class="panel panel-default editor-result">
  123 + <div class="panel-heading result-header">
  124 + <div class="pull-left">
  125 + <div id="compileBtnGroup" class="btn-group"></div>
  126 + </div>
  127 + <div class="pull-right">
  128 + <a id="full-screen" href="javascript:;" data-toggle="tooltip" data-placement="left" data-original-title="全屏录制" class="btn btn-link"><i class="icon iconfont icon-fangda"></i></a>
  129 + <a id="back-screen" href="javascript:;" data-toggle="tooltip" data-placement="left" data-original-title="退出全屏录制" class="btn btn-link" style="display: none;"><i class="icon iconfont icon-fangda"></i></a>
  130 + </div>
  131 + <div class="btn-group">
  132 + <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button>
  133 + <!-- <p id="replay">预览录制</p> -->
  134 + </div>
  135 + <!-- <div class="btn-group pull-right" id="fontendrun">
  136 + <button id="autorun" type="button" class="btn" title="切换自动/手动运行代码" data-placement="bottom" data-autorun="1"></button>
  137 + <button id="runnow" type="button" class="btn" title="手动运行代码" data-placement="bottom" disabled="disabled">
  138 + 自动运行
  139 + </button>
  140 + </div> -->
  141 + </div>
  142 + <div class="panel-body hidden" id="cmprun-output">
  143 + <div id="resultoutput">
  144 + <!-- Nav tabs -->
  145 + <ul class="nav nav-tabs result-tabs" role="tablist" id="cmprun-tabs">
  146 + <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>
  147 + <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>
  148 + <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>
  149 + <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li>
  150 + </ul>
  151 + <!-- Tab panes -->
  152 + <div class="tab-content">
  153 + <div class="tab-pane active padall15" id="stdin">
  154 + <input type="text" class="form-control" id="runtimeArgus" placeholder="标准输入">
  155 + </div>
  156 + <div class="tab-pane padall15" id="cmpinfo"></div>
  157 + <div class="tab-pane padall15" id="stderr"></div>
  158 + <div class="tab-pane padall15" id="output"></div>
  159 + </div>
  160 + </div>
  161 + </div>
  162 + <div class="panel-body" id="ifrcontainer">
  163 + <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
  164 + </div>
  165 + </div>
  166 + </div>
  167 + </div>
  168 + <div id="playFooter">
  169 + <div class="" id="audioWrap">
  170 + <button class="play-code" style="display: none;">
  171 + <i class="icon iconfont icon-play"></i>
  172 + </button>
  173 + </div>
  174 +<!-- <div class="playCode">
  175 + <button>开始</button>
  176 + </div> -->
  177 + </div>
  178 + </div>
  179 + <!-- -->
  180 + <div class="upload-tip" style="display: none;">
  181 + <img src="../img/upload_tip.png" alt="">
  182 + </div>
  183 +
  184 +
  185 + <!-- 准备开始 -->
  186 + <div id="countdown" style="display: none;">
  187 + <img src="" alt="">
  188 + </div>
  189 +
  190 + <!-- 重新开始 -->
  191 + <div class="re-tips" style="display: none;">
  192 + <div class="re-reslut">
  193 + <div class="tip-header">
  194 + <span>提示</span>
  195 + </div>
  196 + <div class="tip-content">
  197 + <p>你确定要重新录制吗?</p>
  198 + </div>
  199 + <div class="tip-footer">
  200 + <button class="btn btn-success btn-sm" id="re-sure">确定</button>
  201 + <button class="btn btn-danger btn-sm" id="re-cancel">取消</button>
  202 + </div>
  203 + </div>
  204 + </div>
  205 +
  206 +
  207 + <script src="../js/recorder/Myna.js"></script>
  208 + <script src="../js/recording/recording.js"></script>
  209 +
  210 + <script>
  211 + </script>
  212 +</body>
  213 +</html>
  214 +
  215 +
  216 +