Commit 982c84f754a8b2f567ec4e01c132fb6c46dfb61e
1 parent
4cdd5450
新建多文件目录v1.1
Showing
4 changed files
with
333 additions
and
333 deletions
src/index.html
| @@ -15,20 +15,16 @@ | @@ -15,20 +15,16 @@ | ||
| 15 | <link href="css/layout.css" rel="stylesheet"> | 15 | <link href="css/layout.css" rel="stylesheet"> |
| 16 | <link href="css/main.css" rel="stylesheet"> | 16 | <link href="css/main.css" rel="stylesheet"> |
| 17 | <link href="css/recording.css" rel="stylesheet"> | 17 | <link href="css/recording.css" rel="stylesheet"> |
| 18 | - <!-- <link href="http://lab.hakim.se/ladda/dist/ladda.min.css" rel="stylesheet"> --> | ||
| 19 | - <link rel="stylesheet" href="js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css"> | ||
| 20 | 18 | ||
| 21 | <script> | 19 | <script> |
| 22 | - // var gxb_api = "https://restful1.gaoxiaobang.com"; | ||
| 23 | - var gxb_api = "http://192.168.80.223:8080" | 20 | + var gxb_api = "https://restful1.gaoxiaobang.com"; |
| 21 | + // var gxb_api = "http://192.168.80.236:8080" | ||
| 24 | 22 | ||
| 25 | </script> | 23 | </script> |
| 26 | 24 | ||
| 27 | <script src="js/jquery-1.7.1.js"></script> | 25 | <script src="js/jquery-1.7.1.js"></script> |
| 28 | <script src="js/bootstrap.js"></script> | 26 | <script src="js/bootstrap.js"></script> |
| 29 | 27 | ||
| 30 | - <script src="js/humps-2.0.0/humps.js"></script> | ||
| 31 | - | ||
| 32 | <script src="js/util/util.js"></script> | 28 | <script src="js/util/util.js"></script> |
| 33 | <script src="js/util/Hourglass.js"></script> | 29 | <script src="js/util/Hourglass.js"></script> |
| 34 | 30 | ||
| @@ -45,15 +41,15 @@ | @@ -45,15 +41,15 @@ | ||
| 45 | 41 | ||
| 46 | <script src="js/05-util.js"></script> | 42 | <script src="js/05-util.js"></script> |
| 47 | <script src="js/03-http.js"></script> | 43 | <script src="js/03-http.js"></script> |
| 48 | - | 44 | + <script src="js/jquery.iframe-transport.js"></script> |
| 45 | + <script src="js/jquery.ui.widget.js"></script> | ||
| 46 | + <script src="js/jquery.fileupload.js"></script> | ||
| 47 | + | ||
| 49 | <script src="js/jquery.validationEngine.js"></script> | 48 | <script src="js/jquery.validationEngine.js"></script> |
| 50 | <script src="js/jquery.validationEngine-zh.js"></script> | 49 | <script src="js/jquery.validationEngine-zh.js"></script> |
| 51 | <script src="js/jquery.isotope.js"></script> | 50 | <script src="js/jquery.isotope.js"></script> |
| 52 | 51 | ||
| 53 | - <link rel="stylesheet" href="css/demo.css"> | ||
| 54 | - <script type="text/javascript" src="js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script> | ||
| 55 | - <script src="js/gb.js"></script> | ||
| 56 | - <!-- <script src="js/gbreplayer.js"></script> --> | 52 | + <script src="js/gbreplayer.js"></script> |
| 57 | 53 | ||
| 58 | <script src="js/gbdebug/mode/xml/xml.js"></script> | 54 | <script src="js/gbdebug/mode/xml/xml.js"></script> |
| 59 | <script src="js/gbdebug/mode/javascript/javascript.js"></script> | 55 | <script src="js/gbdebug/mode/javascript/javascript.js"></script> |
| @@ -62,68 +58,78 @@ | @@ -62,68 +58,78 @@ | ||
| 62 | <script src="js/gbdebug/mode/clike/clike.js"></script> | 58 | <script src="js/gbdebug/mode/clike/clike.js"></script> |
| 63 | <script src="js/gbdebug/mode/php/php.js"></script> | 59 | <script src="js/gbdebug/mode/php/php.js"></script> |
| 64 | <script src="js/gbdebug/mode/python/python.js"></script> | 60 | <script src="js/gbdebug/mode/python/python.js"></script> |
| 65 | - <style type="text/css"> | ||
| 66 | - #recordzone, | ||
| 67 | - #replayzone{ | ||
| 68 | - display: none; | ||
| 69 | - } | ||
| 70 | - #recordzone.active, | ||
| 71 | - #replayzone.active{ | ||
| 72 | - display: block; | ||
| 73 | - } | ||
| 74 | - </style> | 61 | + |
| 75 | </head> | 62 | </head> |
| 76 | <body> | 63 | <body> |
| 77 | - <div id="app" class="wrapper"> | ||
| 78 | - <div id="appContainer"> | ||
| 79 | - <div id="appLeft"> | ||
| 80 | - <div class="tree-header">目录</div> | ||
| 81 | - <ul id="folder" class="ztree"></ul> | ||
| 82 | - <div id="handleLM"></div> | ||
| 83 | - </div> | ||
| 84 | - <div id="appMian"> | ||
| 85 | - <div id="appMainHeader"> | ||
| 86 | - <ul id="recordertab" class="nav nav-tabs pull-left"> | ||
| 87 | - <li class="active"><a href="#recordzone" data-toggle="tab"><i class="icon iconfont icon-suspend"></i>课程录制区</a></li> | ||
| 88 | - <li><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>课程预览区</a></li> | ||
| 89 | - </ul> | ||
| 90 | - <div id="editorwrapper" class="pull-right"> | ||
| 91 | - <div class="btn-group"> | ||
| 92 | - <div id="htmlbutton" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="当前课程环境：Java" data-editorname="html">JAVA</div> | ||
| 93 | - <div class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="JDK版本">JDK 7</div> | 64 | + <div class="real-program-content recording-page"> |
| 65 | + <div class="row"> | ||
| 66 | + <div class="col-md-8" id="editorpanel"> | ||
| 67 | + <div id="" class="recording-wrap"> | ||
| 68 | + <div class="recording-header"> | ||
| 69 | + <ul class="nav nav-tabs pull-left" id="recordertab"> | ||
| 70 | + <li class="active" style="margin-left: 34px;"> | ||
| 71 | + <a href="#recordzone" data-toggle="tab"><i class="icon iconfont icon-suspend"></i><p class="pull-right"> 课程录制区</p></a> | ||
| 72 | + </li> | ||
| 73 | + <li class="line"></li> | ||
| 74 | + <li> | ||
| 75 | + <a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i><p class="pull-right"> 课程预览区</p></a> | ||
| 76 | + </li> | ||
| 77 | + </ul> | ||
| 78 | + <div id="editorwrapper"> | ||
| 79 | + <button type="button" class="lang btn btn-default btn-primary pull-right" id="htmlbutton" title="" data-editorname="html"></button> | ||
| 80 | + </div> | ||
| 81 | + </div> | ||
| 82 | + | ||
| 83 | + <div id="recordpanel" class="recording-content"> | ||
| 84 | + <div class="panel-body"> | ||
| 85 | + <input type="hidden" class="audio-url" value=""> | ||
| 86 | + <div class="tab-content" style="position:relative;"> | ||
| 87 | + <div class="tab-pane active" id="recordzone"> | ||
| 88 | + <textarea id="HTMLeditor" title="HTML"></textarea> | ||
| 89 | + <textarea id="CSSeditor" title="CSS" style="display: none;"></textarea> | ||
| 90 | + <textarea id="JSeditor" title="Javascript" style="display: none;"></textarea> | ||
| 91 | + </div> | ||
| 92 | + <div class="tab-pane" id="replayzone"> | ||
| 93 | + <textarea id="HTMLplayer"></textarea> | ||
| 94 | + <textarea id="CSSplayer"></textarea> | ||
| 95 | + <textarea id="JSplayer"></textarea> | ||
| 96 | + </div> | ||
| 97 | + </div> | ||
| 94 | </div> | 98 | </div> |
| 95 | </div> | 99 | </div> |
| 96 | </div> | 100 | </div> |
| 97 | - <div id="textarea"> | ||
| 98 | - <div id="recordzone" class="active"></div> | ||
| 99 | - <div id="replayzone"></div> | ||
| 100 | - </div> | ||
| 101 | - <div id="handleMR"></div> | ||
| 102 | - </div> | ||
| 103 | - <div id="appRight"> | ||
| 104 | - <div id="resultpanel" class="panel panel-default editor-result"> | ||
| 105 | - <div class="panel-heading result-header"> | ||
| 106 | - <div class="pull-left"> | ||
| 107 | - <div id="compileBtnGroup" class="btn-group"></div> | 101 | + <div class="pause-shodow hidden"> |
| 102 | + <div class="compile-loading"> | ||
| 103 | + <img src="img/loading.png" alt=""> | ||
| 104 | + </div> | ||
| 105 | + <div class="compile-reslut" style="display: none;"> | ||
| 106 | + <div class="tip-header"> | ||
| 107 | + <span>成功获取编译运行结果</span> | ||
| 108 | </div> | 108 | </div> |
| 109 | - <div class="pull-right"> | ||
| 110 | - <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> | 109 | + <div class="tip-content"> |
| 110 | + <p>保存编译结果后，播放到此处会在运行区域直接显示结果。需要保存结果后继续录制吗?</p> | ||
| 111 | </div> | 111 | </div> |
| 112 | + <div class="tip-footer"> | ||
| 113 | + <button class="btn btn-success btn-sm" id="save_compile">保存并继续录制</button> | ||
| 114 | + <button class="btn btn-danger btn-sm" id="cancel_compile">不保存继续录制</button> | ||
| 115 | + </div> | ||
| 116 | + </div> | ||
| 117 | + </div> | ||
| 118 | + </div> | ||
| 119 | + | ||
| 120 | + <div class="col-md-4" id="previewpanel"> | ||
| 121 | + <div id="resultpanel" class="panel panel-default"> | ||
| 122 | + <div class="panel-heading"> | ||
| 112 | <div class="btn-group"> | 123 | <div class="btn-group"> |
| 113 | <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button> | 124 | <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button> |
| 114 | - <!-- <p id="replay">预览录制</p> --> | 125 | + <p id="replay">预览录制</p> |
| 115 | </div> | 126 | </div> |
| 116 | - <!-- <div class="btn-group pull-right" id="fontendrun"> | ||
| 117 | - <button id="autorun" type="button" class="btn" title="切换自动/手动运行代码" data-placement="bottom" data-autorun="1"></button> | ||
| 118 | - <button id="runnow" type="button" class="btn" title="手动运行代码" data-placement="bottom" disabled="disabled"> | ||
| 119 | - 自动运行 | ||
| 120 | - </button> | ||
| 121 | - </div> --> | 127 | + <div class="btn-group pull-right" id="comprunbtngrp"></div> |
| 122 | </div> | 128 | </div> |
| 123 | <div class="panel-body hidden" id="cmprun-output"> | 129 | <div class="panel-body hidden" id="cmprun-output"> |
| 124 | <div id="resultoutput"> | 130 | <div id="resultoutput"> |
| 125 | <!-- Nav tabs --> | 131 | <!-- Nav tabs --> |
| 126 | - <ul class="nav nav-tabs result-tabs" role="tablist" id="cmprun-tabs"> | 132 | + <ul class="nav nav-tabs" role="tablist" id="cmprun-tabs"> |
| 127 | <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li> | 133 | <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li> |
| 128 | <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li> | 134 | <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li> |
| 129 | <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li> | 135 | <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li> |
| @@ -132,7 +138,7 @@ | @@ -132,7 +138,7 @@ | ||
| 132 | <!-- Tab panes --> | 138 | <!-- Tab panes --> |
| 133 | <div class="tab-content"> | 139 | <div class="tab-content"> |
| 134 | <div class="tab-pane active padall15" id="stdin"> | 140 | <div class="tab-pane active padall15" id="stdin"> |
| 135 | - <input type="text" class="form-control" id="runtimeArgus" placeholder="标准输入"> | 141 | + <input type="text" class="form-control" id="input" placeholder="标准输入"> |
| 136 | </div> | 142 | </div> |
| 137 | <div class="tab-pane padall15" id="cmpinfo"></div> | 143 | <div class="tab-pane padall15" id="cmpinfo"></div> |
| 138 | <div class="tab-pane padall15" id="stderr"></div> | 144 | <div class="tab-pane padall15" id="stderr"></div> |
| @@ -145,32 +151,32 @@ | @@ -145,32 +151,32 @@ | ||
| 145 | </div> | 151 | </div> |
| 146 | </div> | 152 | </div> |
| 147 | </div> | 153 | </div> |
| 154 | + | ||
| 148 | </div> | 155 | </div> |
| 149 | - <div id="appFooter"> | ||
| 150 | - <!-- 录音控制条 --> | ||
| 151 | - <div class="recording-ctrl-bar"> | ||
| 152 | - <button id="start-recording" class="btn new-recording" type="button" data="1" title="开始录制"></button> | ||
| 153 | - <button id="re-recoding" class="btn new-recording" type="button" data="1" title="重新录制" style="display: none;"></button> | ||
| 154 | - <button class="btn pause-recording hidden" id="pause" data-status='0' title="录制暂停中"> | ||
| 155 | - <img src="img/pause.svg" alt=""> | ||
| 156 | - </button> | ||
| 157 | - | ||
| 158 | - <button class="audio-play hidden" title="播放预览" data="1"> | ||
| 159 | - <i class="icon iconfont icon-play"></i> | ||
| 160 | - </button> | ||
| 161 | - <div class="recording-time" id="timer" value="">00:00:00</div> | ||
| 162 | - <div class="audio-view" style="display: none;"> | ||
| 163 | - <audio id="audio" autoplay></audio> | ||
| 164 | - </div> | ||
| 165 | - <div class="save-wrap"> | ||
| 166 | - <input type="button" id="upload" class="upload-teach" disabled="disabled" value="保存 - upload"> | ||
| 167 | - <input type="button" id="savecorde" class="upload-stud" style="display: none;" disabled="disabled" value="保存 - savecorde"> | ||
| 168 | - <input type="button" id="cancel" value="关闭 - cancel"> | ||
| 169 | - </div> | ||
| 170 | - </div> | 156 | + </div> |
| 157 | + | ||
| 158 | + <!-- 录音控制条 --> | ||
| 159 | + <div class="recording-ctrl-bar"> | ||
| 160 | + <button id="start-recording" class="btn new-recording" type="button" data="1" title="开始录制"></button> | ||
| 161 | + <button id="re-recoding" class="btn new-recording" type="button" data="1" title="重新录制" style="display: none;"></button> | ||
| 162 | + <button class="btn pause-recording hidden" id="pause" data-status='0' title="录制暂停中"> | ||
| 163 | + <img src="img/pause.svg" alt=""> | ||
| 164 | + </button> | ||
| 165 | + | ||
| 166 | + <button class="audio-play hidden" title="播放预览" data="1"> | ||
| 167 | + <i class="icon iconfont icon-play"></i> | ||
| 168 | + </button> | ||
| 169 | + <div class="recording-time" id="timer" value="">00:00:00</div> | ||
| 170 | + <div class="audio-view" style="display: none;"> | ||
| 171 | + <audio id="audio" autoplay></audio> | ||
| 172 | + </div> | ||
| 173 | + <div class="save-wrap"> | ||
| 174 | + <input type="button" id="upload" class="upload-teach" disabled="disabled" value="保存"> | ||
| 175 | + <input type="button" id="savecorde" class="upload-stud" style="display: none;" disabled="disabled" value="保存"> | ||
| 176 | + <input type="button" id="cancel" value="关闭"> | ||
| 171 | </div> | 177 | </div> |
| 172 | </div> | 178 | </div> |
| 173 | - <!-- --> | 179 | + |
| 174 | <div class="upload-tip" style="display: none;"> | 180 | <div class="upload-tip" style="display: none;"> |
| 175 | <img src="img/upload_tip.png" alt=""> | 181 | <img src="img/upload_tip.png" alt=""> |
| 176 | </div> | 182 | </div> |
| @@ -202,9 +208,6 @@ | @@ -202,9 +208,6 @@ | ||
| 202 | <script src="js/recording/recording.js"></script> | 208 | <script src="js/recording/recording.js"></script> |
| 203 | 209 | ||
| 204 | <script> | 210 | <script> |
| 205 | - $(function () { | ||
| 206 | - $('[data-toggle="tooltip"]').tooltip() | ||
| 207 | - }) | ||
| 208 | var recorder; | 211 | var recorder; |
| 209 | var _role = getQuery('role'); | 212 | var _role = getQuery('role'); |
| 210 | var _chapterId = getQuery('chapterId'); | 213 | var _chapterId = getQuery('chapterId'); |
| @@ -216,8 +219,7 @@ | @@ -216,8 +219,7 @@ | ||
| 216 | 219 | ||
| 217 | // 结束播放事件 | 220 | // 结束播放事件 |
| 218 | audio.addEventListener("ended", function() { | 221 | audio.addEventListener("ended", function() { |
| 219 | - console.info('audio.addEventListener("ended"'); | ||
| 220 | - console.log('audio 播放结束'); | 222 | + console.log('结束播放事件'); |
| 221 | Hourglass.stopTimer(); | 223 | Hourglass.stopTimer(); |
| 222 | $('.audio-play').attr('data', '1') | 224 | $('.audio-play').attr('data', '1') |
| 223 | $('.audio-play').prop('disabled', false); | 225 | $('.audio-play').prop('disabled', false); |
| @@ -228,9 +230,8 @@ | @@ -228,9 +230,8 @@ | ||
| 228 | }) | 230 | }) |
| 229 | 231 | ||
| 230 | function uploadAudio(ob) { | 232 | function uploadAudio(ob) { |
| 231 | - // $('.upload-tip').show(); | ||
| 232 | - // recorder.upload(); | ||
| 233 | - $('#savecorde').trigger('click'); | 233 | + $('.upload-tip').show(); |
| 234 | + recorder.upload(); | ||
| 234 | } | 235 | } |
| 235 | </script> | 236 | </script> |
| 236 | </body> | 237 | </body> |
src/indexs.html deleted
100644 → 0
| 1 | -<!DOCTYPE html> | ||
| 2 | -<html lang="en"> | ||
| 3 | -<head> | ||
| 4 | - <meta charset="UTF-8"> | ||
| 5 | - <title>互动编程</title> | ||
| 6 | - <link rel="stylesheet" href="css/reset.css"> | ||
| 7 | - <link rel="stylesheet" href="css/responsive/css/bootstrap.min.css"> | ||
| 8 | - <link href="css/validationEngine.jquery.css" rel="stylesheet"> | ||
| 9 | - <link href="css/codemirror.css" rel="stylesheet"> | ||
| 10 | - <link href="css/cm-theme/gbtags.css" rel="stylesheet"> | ||
| 11 | - <link href="css/cm-theme/eclipse.css" rel="stylesheet"> | ||
| 12 | - <link href="css/cm-theme/gbtags-dark.css" rel="stylesheet"> | ||
| 13 | - <link href="css/font/iconfont.css" rel="stylesheet"> | ||
| 14 | - <link href="css/font_all/iconfont.css" rel="stylesheet"> | ||
| 15 | - <link href="css/layout.css" rel="stylesheet"> | ||
| 16 | - <link href="css/main.css" rel="stylesheet"> | ||
| 17 | - <link href="css/recording.css" rel="stylesheet"> | ||
| 18 | - | ||
| 19 | - <script> | ||
| 20 | - var gxb_api = "https://restful1.gaoxiaobang.com"; | ||
| 21 | - // var gxb_api = "http://192.168.80.236:8080" | ||
| 22 | - | ||
| 23 | - </script> | ||
| 24 | - | ||
| 25 | - <script src="js/jquery-1.7.1.js"></script> | ||
| 26 | - <script src="js/bootstrap.js"></script> | ||
| 27 | - | ||
| 28 | - <script src="js/util/util.js"></script> | ||
| 29 | - <script src="js/util/Hourglass.js"></script> | ||
| 30 | - | ||
| 31 | - | ||
| 32 | - <script src="js/spin.js"></script> | ||
| 33 | - <script src="js/ladda.js"></script> | ||
| 34 | - | ||
| 35 | - <script src="js/jquery-ui-1.8.20.custom.js"></script> | ||
| 36 | - <script src="js/codemirror.js"></script> | ||
| 37 | - <!-- <script src="js/handlebars-1.3.js"></script> --> | ||
| 38 | - <script src="js/emmet.js"></script> | ||
| 39 | - <script src="js/jshint-2.6.min.js"></script> | ||
| 40 | - <script src="js/jstorage.js"></script> | ||
| 41 | - | ||
| 42 | - <script src="js/05-util.js"></script> | ||
| 43 | - <script src="js/03-http.js"></script> | ||
| 44 | - <script src="js/jquery.iframe-transport.js"></script> | ||
| 45 | - <script src="js/jquery.ui.widget.js"></script> | ||
| 46 | - <script src="js/jquery.fileupload.js"></script> | ||
| 47 | - | ||
| 48 | - <script src="js/jquery.validationEngine.js"></script> | ||
| 49 | - <script src="js/jquery.validationEngine-zh.js"></script> | ||
| 50 | - <script src="js/jquery.isotope.js"></script> | ||
| 51 | - | ||
| 52 | - <script src="js/gbreplayer.js"></script> | ||
| 53 | - | ||
| 54 | - <script src="js/gbdebug/mode/xml/xml.js"></script> | ||
| 55 | - <script src="js/gbdebug/mode/javascript/javascript.js"></script> | ||
| 56 | - <script src="js/gbdebug/mode/css/css.js"></script> | ||
| 57 | - <script src="js/gbdebug/mode/htmlmixed/htmlmixed.js"></script> | ||
| 58 | - <script src="js/gbdebug/mode/clike/clike.js"></script> | ||
| 59 | - <script src="js/gbdebug/mode/php/php.js"></script> | ||
| 60 | - <script src="js/gbdebug/mode/python/python.js"></script> | ||
| 61 | - | ||
| 62 | -</head> | ||
| 63 | -<body> | ||
| 64 | - <div class="real-program-content recording-page"> | ||
| 65 | - <div class="row"> | ||
| 66 | - <div class="col-md-8" id="editorpanel"> | ||
| 67 | - <div id="" class="recording-wrap"> | ||
| 68 | - <div class="recording-header"> | ||
| 69 | - <ul class="nav nav-tabs pull-left" id="recordertab"> | ||
| 70 | - <li class="active" style="margin-left: 34px;"> | ||
| 71 | - <a href="#recordzone" data-toggle="tab"><i class="icon iconfont icon-suspend"></i><p class="pull-right"> 课程录制区</p></a> | ||
| 72 | - </li> | ||
| 73 | - <li class="line"></li> | ||
| 74 | - <li> | ||
| 75 | - <a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i><p class="pull-right"> 课程预览区</p></a> | ||
| 76 | - </li> | ||
| 77 | - </ul> | ||
| 78 | - <div id="editorwrapper"> | ||
| 79 | - <button type="button" class="lang btn btn-default btn-primary pull-right" id="htmlbutton" title="" data-editorname="html"></button> | ||
| 80 | - </div> | ||
| 81 | - </div> | ||
| 82 | - | ||
| 83 | - <div id="recordpanel" class="recording-content"> | ||
| 84 | - <div class="panel-body"> | ||
| 85 | - <input type="hidden" class="audio-url" value=""> | ||
| 86 | - <div class="tab-content" style="position:relative;"> | ||
| 87 | - <div class="tab-pane active" id="recordzone"> | ||
| 88 | - <textarea id="HTMLeditor" title="HTML"></textarea> | ||
| 89 | - <textarea id="CSSeditor" title="CSS" style="display: none;"></textarea> | ||
| 90 | - <textarea id="JSeditor" title="Javascript" style="display: none;"></textarea> | ||
| 91 | - </div> | ||
| 92 | - <div class="tab-pane" id="replayzone"> | ||
| 93 | - <textarea id="HTMLplayer"></textarea> | ||
| 94 | - <textarea id="CSSplayer"></textarea> | ||
| 95 | - <textarea id="JSplayer"></textarea> | ||
| 96 | - </div> | ||
| 97 | - </div> | ||
| 98 | - </div> | ||
| 99 | - </div> | ||
| 100 | - </div> | ||
| 101 | - <div class="pause-shodow hidden"> | ||
| 102 | - <div class="compile-loading"> | ||
| 103 | - <img src="img/loading.png" alt=""> | ||
| 104 | - </div> | ||
| 105 | - <div class="compile-reslut" style="display: none;"> | ||
| 106 | - <div class="tip-header"> | ||
| 107 | - <span>成功获取编译运行结果</span> | ||
| 108 | - </div> | ||
| 109 | - <div class="tip-content"> | ||
| 110 | - <p>保存编译结果后，播放到此处会在运行区域直接显示结果。需要保存结果后继续录制吗?</p> | ||
| 111 | - </div> | ||
| 112 | - <div class="tip-footer"> | ||
| 113 | - <button class="btn btn-success btn-sm" id="save_compile">保存并继续录制</button> | ||
| 114 | - <button class="btn btn-danger btn-sm" id="cancel_compile">不保存继续录制</button> | ||
| 115 | - </div> | ||
| 116 | - </div> | ||
| 117 | - </div> | ||
| 118 | - </div> | ||
| 119 | - | ||
| 120 | - <div class="col-md-4" id="previewpanel"> | ||
| 121 | - <div id="resultpanel" class="panel panel-default"> | ||
| 122 | - <div class="panel-heading"> | ||
| 123 | - <div class="btn-group"> | ||
| 124 | - <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button> | ||
| 125 | - <p id="replay">预览录制</p> | ||
| 126 | - </div> | ||
| 127 | - <div class="btn-group pull-right" id="comprunbtngrp"></div> | ||
| 128 | - </div> | ||
| 129 | - <div class="panel-body hidden" id="cmprun-output"> | ||
| 130 | - <div id="resultoutput"> | ||
| 131 | - <!-- Nav tabs --> | ||
| 132 | - <ul class="nav nav-tabs" role="tablist" id="cmprun-tabs"> | ||
| 133 | - <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li> | ||
| 134 | - <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li> | ||
| 135 | - <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li> | ||
| 136 | - <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li> | ||
| 137 | - </ul> | ||
| 138 | - <!-- Tab panes --> | ||
| 139 | - <div class="tab-content"> | ||
| 140 | - <div class="tab-pane active padall15" id="stdin"> | ||
| 141 | - <input type="text" class="form-control" id="input" placeholder="标准输入"> | ||
| 142 | - </div> | ||
| 143 | - <div class="tab-pane padall15" id="cmpinfo"></div> | ||
| 144 | - <div class="tab-pane padall15" id="stderr"></div> | ||
| 145 | - <div class="tab-pane padall15" id="output"></div> | ||
| 146 | - </div> | ||
| 147 | - </div> | ||
| 148 | - </div> | ||
| 149 | - <div class="panel-body" id="ifrcontainer"> | ||
| 150 | - <iframe id="resultiframe" frameBorder="0" width="100%"></iframe> | ||
| 151 | - </div> | ||
| 152 | - </div> | ||
| 153 | - </div> | ||
| 154 | - | ||
| 155 | - </div> | ||
| 156 | - </div> | ||
| 157 | - | ||
| 158 | - <!-- 录音控制条 --> | ||
| 159 | - <div class="recording-ctrl-bar"> | ||
| 160 | - <button id="start-recording" class="btn new-recording" type="button" data="1" title="开始录制"></button> | ||
| 161 | - <button id="re-recoding" class="btn new-recording" type="button" data="1" title="重新录制" style="display: none;"></button> | ||
| 162 | - <button class="btn pause-recording hidden" id="pause" data-status='0' title="录制暂停中"> | ||
| 163 | - <img src="img/pause.svg" alt=""> | ||
| 164 | - </button> | ||
| 165 | - | ||
| 166 | - <button class="audio-play hidden" title="播放预览" data="1"> | ||
| 167 | - <i class="icon iconfont icon-play"></i> | ||
| 168 | - </button> | ||
| 169 | - <div class="recording-time" id="timer" value="">00:00:00</div> | ||
| 170 | - <div class="audio-view" style="display: none;"> | ||
| 171 | - <audio id="audio" autoplay></audio> | ||
| 172 | - </div> | ||
| 173 | - <div class="save-wrap"> | ||
| 174 | - <input type="button" id="upload" class="upload-teach" disabled="disabled" value="保存"> | ||
| 175 | - <input type="button" id="savecorde" class="upload-stud" style="display: none;" disabled="disabled" value="保存"> | ||
| 176 | - <input type="button" id="cancel" value="关闭"> | ||
| 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 | - var recorder; | ||
| 212 | - var _role = getQuery('role'); | ||
| 213 | - var _chapterId = getQuery('chapterId'); | ||
| 214 | - var userId = getQuery('userId'); | ||
| 215 | - | ||
| 216 | - var audio = document.querySelector('audio'); | ||
| 217 | - var saveAudio = document.getElementById("save"); | ||
| 218 | - | ||
| 219 | - | ||
| 220 | - // 结束播放事件 | ||
| 221 | - audio.addEventListener("ended", function() { | ||
| 222 | - console.log('结束播放事件'); | ||
| 223 | - Hourglass.stopTimer(); | ||
| 224 | - $('.audio-play').attr('data', '1') | ||
| 225 | - $('.audio-play').prop('disabled', false); | ||
| 226 | - }, false); | ||
| 227 | - | ||
| 228 | - $('#upload').click(function(){ | ||
| 229 | - uploadAudio() | ||
| 230 | - }) | ||
| 231 | - | ||
| 232 | - function uploadAudio(ob) { | ||
| 233 | - $('.upload-tip').show(); | ||
| 234 | - recorder.upload(); | ||
| 235 | - } | ||
| 236 | - </script> | ||
| 237 | -</body> | ||
| 238 | -</html> | ||
| 239 | - | ||
| 240 | - | ||
| 241 | - |
src/js/gb.js
| @@ -1803,7 +1803,7 @@ $(function() { | @@ -1803,7 +1803,7 @@ $(function() { | ||
| 1803 | // 动态获取目录结构 | 1803 | // 动态获取目录结构 |
| 1804 | $.ajax({ | 1804 | $.ajax({ |
| 1805 | type: "GET", | 1805 | type: "GET", |
| 1806 | - url: "js/tree.json", | 1806 | + url: "../js/tree.json", |
| 1807 | dataType: "json", | 1807 | dataType: "json", |
| 1808 | contentType: "application/json", | 1808 | contentType: "application/json", |
| 1809 | success: function(res) { | 1809 | success: function(res) { |
src/v1.1/index.html
0 → 100644
| 1 | +<!DOCTYPE html> | ||
| 2 | +<html lang="en"> | ||
| 3 | +<head> | ||
| 4 | + <meta charset="UTF-8"> | ||
| 5 | + <title>互动编程</title> | ||
| 6 | + <link rel="stylesheet" href="../css/reset.css"> | ||
| 7 | + <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css"> | ||
| 8 | + <link href="../css/validationEngine.jquery.css" rel="stylesheet"> | ||
| 9 | + <link href="../css/codemirror.css" rel="stylesheet"> | ||
| 10 | + <link href="../css/cm-theme/gbtags.css" rel="stylesheet"> | ||
| 11 | + <link href="../css/cm-theme/eclipse.css" rel="stylesheet"> | ||
| 12 | + <link href="../css/cm-theme/gbtags-dark.css" rel="stylesheet"> | ||
| 13 | + <link href="../css/font/iconfont.css" rel="stylesheet"> | ||
| 14 | + <link href="../css/font_all/iconfont.css" rel="stylesheet"> | ||
| 15 | + <link href="../css/layout.css" rel="stylesheet"> | ||
| 16 | + <link href="../css/main.css" rel="stylesheet"> | ||
| 17 | + <link href="../css/recording.css" rel="stylesheet"> | ||
| 18 | + <!-- <link href="http://lab.hakim.se/ladda/dist/ladda.min.css" rel="stylesheet"> --> | ||
| 19 | + <link rel="stylesheet" href="../js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css"> | ||
| 20 | + | ||
| 21 | + <script> | ||
| 22 | + var gxb_api = "https://restful1.gaoxiaobang.com"; | ||
| 23 | + // var gxb_api = "http://192.168.80.223:8080" | ||
| 24 | + | ||
| 25 | + </script> | ||
| 26 | + | ||
| 27 | + <script src="../js/jquery-1.7.1.js"></script> | ||
| 28 | + <script src="../js/bootstrap.js"></script> | ||
| 29 | + | ||
| 30 | + <script src="../js/humps-2.0.0/humps.js"></script> | ||
| 31 | + | ||
| 32 | + <script src="../js/util/util.js"></script> | ||
| 33 | + <script src="../js/util/Hourglass.js"></script> | ||
| 34 | + | ||
| 35 | + | ||
| 36 | + <script src="../js/spin.js"></script> | ||
| 37 | + <script src="../js/ladda.js"></script> | ||
| 38 | + | ||
| 39 | + <script src="../js/jquery-ui-1.8.20.custom.js"></script> | ||
| 40 | + <script src="../js/codemirror.js"></script> | ||
| 41 | + <!-- <script src="../js/handlebars-1.3.js"></script> --> | ||
| 42 | + <script src="../js/emmet.js"></script> | ||
| 43 | + <script src="../js/jshint-2.6.min.js"></script> | ||
| 44 | + <script src="../js/jstorage.js"></script> | ||
| 45 | + | ||
| 46 | + <script src="../js/05-util.js"></script> | ||
| 47 | + <script src="../js/03-http.js"></script> | ||
| 48 | + | ||
| 49 | + <script src="../js/jquery.validationEngine.js"></script> | ||
| 50 | + <script src="../js/jquery.validationEngine-zh.js"></script> | ||
| 51 | + <script src="../js/jquery.isotope.js"></script> | ||
| 52 | + | ||
| 53 | + <link rel="stylesheet" href="../css/demo.css"> | ||
| 54 | + <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script> | ||
| 55 | + <script src="../js/gb.js"></script> | ||
| 56 | + <!-- <script src="../js/gbreplayer.js"></script> --> | ||
| 57 | + | ||
| 58 | + <script src="../js/gbdebug/mode/xml/xml.js"></script> | ||
| 59 | + <script src="../js/gbdebug/mode/javascript/javascript.js"></script> | ||
| 60 | + <script src="../js/gbdebug/mode/css/css.js"></script> | ||
| 61 | + <script src="../js/gbdebug/mode/htmlmixed/htmlmixed.js"></script> | ||
| 62 | + <script src="../js/gbdebug/mode/clike/clike.js"></script> | ||
| 63 | + <script src="../js/gbdebug/mode/php/php.js"></script> | ||
| 64 | + <script src="../js/gbdebug/mode/python/python.js"></script> | ||
| 65 | + <style type="text/css"> | ||
| 66 | + #recordzone, | ||
| 67 | + #replayzone{ | ||
| 68 | + display: none; | ||
| 69 | + } | ||
| 70 | + #recordzone.active, | ||
| 71 | + #replayzone.active{ | ||
| 72 | + display: block; | ||
| 73 | + } | ||
| 74 | + </style> | ||
| 75 | +</head> | ||
| 76 | +<body> | ||
| 77 | + <div id="app" class="wrapper"> | ||
| 78 | + <div id="appContainer"> | ||
| 79 | + <div id="appLeft"> | ||
| 80 | + <div class="tree-header">目录</div> | ||
| 81 | + <ul id="folder" class="ztree"></ul> | ||
| 82 | + <div id="handleLM"></div> | ||
| 83 | + </div> | ||
| 84 | + <div id="appMian"> | ||
| 85 | + <div id="appMainHeader"> | ||
| 86 | + <ul id="recordertab" class="nav nav-tabs pull-left"> | ||
| 87 | + <li class="active"><a href="#recordzone" data-toggle="tab"><i class="icon iconfont icon-suspend"></i>课程录制区</a></li> | ||
| 88 | + <li><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>课程预览区</a></li> | ||
| 89 | + </ul> | ||
| 90 | + <div id="editorwrapper" class="pull-right"> | ||
| 91 | + <div class="btn-group"> | ||
| 92 | + <div id="htmlbutton" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="当前课程环境：Java" data-editorname="html">JAVA</div> | ||
| 93 | + <div class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="JDK版本">JDK 7</div> | ||
| 94 | + </div> | ||
| 95 | + </div> | ||
| 96 | + </div> | ||
| 97 | + <div id="textarea"> | ||
| 98 | + <div id="recordzone" class="active"></div> | ||
| 99 | + <div id="replayzone"></div> | ||
| 100 | + </div> | ||
| 101 | + <div id="handleMR"></div> | ||
| 102 | + </div> | ||
| 103 | + <div id="appRight"> | ||
| 104 | + <div id="resultpanel" class="panel panel-default editor-result"> | ||
| 105 | + <div class="panel-heading result-header"> | ||
| 106 | + <div class="pull-left"> | ||
| 107 | + <div id="compileBtnGroup" class="btn-group"></div> | ||
| 108 | + </div> | ||
| 109 | + <div class="pull-right"> | ||
| 110 | + <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> | ||
| 111 | + </div> | ||
| 112 | + <div class="btn-group"> | ||
| 113 | + <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button> | ||
| 114 | + <!-- <p id="replay">预览录制</p> --> | ||
| 115 | + </div> | ||
| 116 | + <!-- <div class="btn-group pull-right" id="fontendrun"> | ||
| 117 | + <button id="autorun" type="button" class="btn" title="切换自动/手动运行代码" data-placement="bottom" data-autorun="1"></button> | ||
| 118 | + <button id="runnow" type="button" class="btn" title="手动运行代码" data-placement="bottom" disabled="disabled"> | ||
| 119 | + 自动运行 | ||
| 120 | + </button> | ||
| 121 | + </div> --> | ||
| 122 | + </div> | ||
| 123 | + <div class="panel-body hidden" id="cmprun-output"> | ||
| 124 | + <div id="resultoutput"> | ||
| 125 | + <!-- Nav tabs --> | ||
| 126 | + <ul class="nav nav-tabs result-tabs" role="tablist" id="cmprun-tabs"> | ||
| 127 | + <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li> | ||
| 128 | + <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li> | ||
| 129 | + <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li> | ||
| 130 | + <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li> | ||
| 131 | + </ul> | ||
| 132 | + <!-- Tab panes --> | ||
| 133 | + <div class="tab-content"> | ||
| 134 | + <div class="tab-pane active padall15" id="stdin"> | ||
| 135 | + <input type="text" class="form-control" id="runtimeArgus" placeholder="标准输入"> | ||
| 136 | + </div> | ||
| 137 | + <div class="tab-pane padall15" id="cmpinfo"></div> | ||
| 138 | + <div class="tab-pane padall15" id="stderr"></div> | ||
| 139 | + <div class="tab-pane padall15" id="output"></div> | ||
| 140 | + </div> | ||
| 141 | + </div> | ||
| 142 | + </div> | ||
| 143 | + <div class="panel-body" id="ifrcontainer"> | ||
| 144 | + <iframe id="resultiframe" frameBorder="0" width="100%"></iframe> | ||
| 145 | + </div> | ||
| 146 | + </div> | ||
| 147 | + </div> | ||
| 148 | + </div> | ||
| 149 | + <div id="appFooter"> | ||
| 150 | + <!-- 录音控制条 --> | ||
| 151 | + <div class="recording-ctrl-bar"> | ||
| 152 | + <button id="start-recording" class="btn new-recording" type="button" data="1" title="开始录制"></button> | ||
| 153 | + <button id="re-recoding" class="btn new-recording" type="button" data="1" title="重新录制" style="display: none;"></button> | ||
| 154 | + <button class="btn pause-recording hidden" id="pause" data-status='0' title="录制暂停中"> | ||
| 155 | + <img src="../img/pause.svg" alt=""> | ||
| 156 | + </button> | ||
| 157 | + | ||
| 158 | + <button class="audio-play hidden" title="播放预览" data="1"> | ||
| 159 | + <i class="icon iconfont icon-play"></i> | ||
| 160 | + </button> | ||
| 161 | + <div class="recording-time" id="timer" value="">00:00:00</div> | ||
| 162 | + <div class="audio-view" style="display: none;"> | ||
| 163 | + <audio id="audio" autoplay></audio> | ||
| 164 | + </div> | ||
| 165 | + <div class="save-wrap"> | ||
| 166 | + <input type="button" id="upload" class="upload-teach" disabled="disabled" value="保存 - upload"> | ||
| 167 | + <input type="button" id="savecorde" class="upload-stud" style="display: none;" disabled="disabled" value="保存 - savecorde"> | ||
| 168 | + <input type="button" id="cancel" value="关闭 - cancel"> | ||
| 169 | + </div> | ||
| 170 | + </div> | ||
| 171 | + </div> | ||
| 172 | + </div> | ||
| 173 | + <!-- --> | ||
| 174 | + <div class="upload-tip" style="display: none;"> | ||
| 175 | + <img src="../img/upload_tip.png" alt=""> | ||
| 176 | + </div> | ||
| 177 | + | ||
| 178 | + | ||
| 179 | + <!-- 准备开始 --> | ||
| 180 | + <div id="countdown" style="display: none;"> | ||
| 181 | + <img src="" alt=""> | ||
| 182 | + </div> | ||
| 183 | + | ||
| 184 | + <!-- 重新开始 --> | ||
| 185 | + <div class="re-tips" style="display: none;"> | ||
| 186 | + <div class="re-reslut"> | ||
| 187 | + <div class="tip-header"> | ||
| 188 | + <span>提示</span> | ||
| 189 | + </div> | ||
| 190 | + <div class="tip-content"> | ||
| 191 | + <p>你确定要重新录制吗?</p> | ||
| 192 | + </div> | ||
| 193 | + <div class="tip-footer"> | ||
| 194 | + <button class="btn btn-success btn-sm" id="re-sure">确定</button> | ||
| 195 | + <button class="btn btn-danger btn-sm" id="re-cancel">取消</button> | ||
| 196 | + </div> | ||
| 197 | + </div> | ||
| 198 | + </div> | ||
| 199 | + | ||
| 200 | + | ||
| 201 | + <script src="../js/recorder/Myna.js"></script> | ||
| 202 | + <script src="../js/recording/recording.js"></script> | ||
| 203 | + | ||
| 204 | + <script> | ||
| 205 | + $(function () { | ||
| 206 | + $('[data-toggle="tooltip"]').tooltip() | ||
| 207 | + }) | ||
| 208 | + var recorder; | ||
| 209 | + var _role = getQuery('role'); | ||
| 210 | + var _chapterId = getQuery('chapterId'); | ||
| 211 | + var userId = getQuery('userId'); | ||
| 212 | + | ||
| 213 | + var audio = document.querySelector('audio'); | ||
| 214 | + var saveAudio = document.getElementById("save"); | ||
| 215 | + | ||
| 216 | + | ||
| 217 | + // 结束播放事件 | ||
| 218 | + audio.addEventListener("ended", function() { | ||
| 219 | + console.info('audio.addEventListener("ended"'); | ||
| 220 | + console.log('audio 播放结束'); | ||
| 221 | + Hourglass.stopTimer(); | ||
| 222 | + $('.audio-play').attr('data', '1') | ||
| 223 | + $('.audio-play').prop('disabled', false); | ||
| 224 | + }, false); | ||
| 225 | + | ||
| 226 | + $('#upload').click(function(){ | ||
| 227 | + uploadAudio() | ||
| 228 | + }) | ||
| 229 | + | ||
| 230 | + function uploadAudio(ob) { | ||
| 231 | + // $('.upload-tip').show(); | ||
| 232 | + // recorder.upload(); | ||
| 233 | + $('#savecorde').trigger('click'); | ||
| 234 | + } | ||
| 235 | + </script> | ||
| 236 | +</body> | ||
| 237 | +</html> | ||
| 238 | + | ||
| 239 | + | ||
| 240 | + |