梁美英 / 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 23 $('#CompileBtn').on('click', function(){ _this.compile(); })
24 24 $('#save_compile').on('click', function(){ _this.saveCompile(); })
25 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 29 compile: function(){
28 30 var _this = this;
... ... @@ -90,6 +92,16 @@
90 92 this.compileStatus = true;
91 93 console.log(this.compileStatus)
92 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 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 222 window.Iterm = Iterm
189 223 })(window)
190 224 \ No newline at end of file
... ...
src/v1.1/index.html
  View file @1ddd290
... ... @@ -114,7 +114,7 @@
114 114 <span class="ladda-label">编译运行</span>
115 115 </a>
116 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 118 </div>
119 119 </div>
120 120  
... ...
src/v1.1/player.html
  View file @1ddd290
... ... @@ -2,215 +2,182 @@
2 2 <html lang="en">
3 3 <head>
4 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 6 <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
9   - <link href="../css/validationEngine.jquery.css" rel="stylesheet">
10 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 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 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 23 <script>
24   - var gxb_api = "https://restful1.gaoxiaobang.com";
  24 + var gxb_api = "https://restful.gaoxiaobang.com";
25 25 // var gxb_api = "http://192.168.80.223:8080"
26   -
27 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 38 </style>
  39 +
  40 +
78 41 </head>
79 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 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 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 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 89 </div>
119 90 </div>
120 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 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 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 126 </div>
166 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 135 </div>
174   -<!-- <div class="playCode">
175   - <button>开始</button>
176   - </div> -->
177 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 141 </div>
  142 + <!-- 保存提示 -->
  143 + <div class="upload-tip" style="display: none;">
  144 + <img src="../img/upload_tip.png" alt="">
  145 + </div>
  146 +
204 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 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 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 +
... ...