Merge branch 'fixbug'

ykxie
2 parents 6e08202d 6792eda2
Showing 5 changed files with 136 additions and 64 deletions
src/css/recording.css
src/img/icon/run.svg
src/index.html
src/js/gbreplayer.js
src/scss/recording.scss
@@ -341,6 +341,27 @@ button {
     border-bottom: 1px solid #999;
     border-radius: 0; }
+#previewpanel #autorun {
+  background: url("../img/icon/run.svg") no-repeat;
+  background-size: 100%;
+  height: 28px;
+  width: 28px;
+  margin: 4px 8px; }
+
+#previewpanel #runnow {
+  background: transparent;
+  border: none;
+  color: #FFF;
+  margin-top: 1px;
+  font-size: 16px; }
+
+#previewpanel #fontendrun {
+  border-radius: 20px;
+  padding: 0px 8px;
+  color: #FFF;
+  background: -webkit-linear-gradient(left, #1FB6FF, #62DDF5);
+  background: -moz-linear-gradient(left, #1FB6FF, #62DDF5); }
+
 #countdown {
   position: absolute;
   top: 0;
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
+    <title>点击运行</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#5CEFFF" offset="0%"></stop>
+            <stop stop-color="#4CE2FF" offset="100%"></stop>
+        </linearGradient>
+        <ellipse id="path-2" cx="7" cy="7" rx="7" ry="7"></ellipse>
+        <mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="14" height="14" fill="white">
+            <use xlink:href="#path-2"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="01-学习中心-实境编程-前端语言" transform="translate(-772.000000, -183.000000)">
+            <g id="视频" transform="translate(120.000000, 171.000000)">
+                <g id="右侧运行窗口" transform="translate(635.000000, 0.000000)">
+                    <g id="点击运行" transform="translate(11.000000, 9.000000)">
+                        <g transform="translate(6.000000, 3.000000)">
+                            <use id="Oval-3" stroke="url(#linearGradient-1)" mask="url(#mask-3)" stroke-width="2" fill="#FFFFFF" xlink:href="#path-2"></use>
+                            <path d="M9.98962544,4.22519836 L9.38188024,4.83303696 C9.90319161,5.40580705 10.2236645,6.16442622 10.2236645,7.0000467 C10.2236645,8.78027552 8.78029887,10.2236879 6.99992996,10.2236879 L6.99992996,9.25680567 L6.99992996,9.25661888 C6.99992996,9.07861468 6.85559339,8.93413803 6.67768258,8.93413803 C6.49949159,8.93413803 6.23001041,9.25661888 6.23001041,9.25661888 L4.421017,11.08331 L6.99992996,11.08331 C9.25524136,11.08331 11.0833333,9.25503123 11.0833333,7.0000467 C11.0833333,5.92711841 10.666387,4.95397895 9.98962544,4.22519836 M3.77633545,7.0000467 C3.77633545,5.21972448 5.21970113,3.7763121 6.99992996,3.7763121 L6.99992996,4.74338112 C6.99992996,4.9215721 7.14440661,5.06581528 7.32241082,5.06581528 C7.50055511,5.06581528 7.76998959,4.74338112 7.76998959,4.74338112 L9.578983,2.91669001 L6.99992996,2.91669001 C4.74494542,2.91669001 2.91666667,4.74492208 2.91666667,7.0000467 C2.91666667,8.07283489 3.33361303,9.04597435 4.01037456,9.77470825 L4.61811976,9.16691635 C4.09699518,8.59414626 3.77633545,7.83557378 3.77633545,7.0000467" id="Fill-26-Copy" fill="#58ECFF"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
 \ No newline at end of file
@@ -125,6 +125,12 @@
                             <p id="replay">预览录制</p>
                         </div>
                         <div class="btn-group pull-right" id="comprunbtngrp"></div>
+                        <!-- <div class="btn-group pull-right" id="fontendrun">
+                            <button id="autorun" type="button" class="btn" title="切换自动/手动运行代码" data-placement="bottom" data-autorun="1"></button> 
+                            <button id="runnow" type="button" class="btn" title="手动运行代码" data-placement="bottom" disabled="disabled">
+                                自动运行
+                            </button>
+                        </div> -->
                     </div>
                     <div class="panel-body hidden" id="cmprun-output">
                         <div id="resultoutput">
@@ -539,15 +539,14 @@ $(function(){
 			// 播放录制代码过程
 			$('.audio-play').unbind('click').click(function(){	
-				Hourglass.init();
 				var resultData = {
 					output: '',
 					stderr: '',
 					cmpinfo: '',
 					result: 1
 				}
+				GBCodePlayBack.htmlplayereditor.setValue('');
 				compileResult(resultData);
-
 				var data = $(this).attr('data');
 				if (_role == 0) {
 					$('.audio-play').attr('disabled', true);
@@ -569,10 +568,10 @@ $(function(){
 				}
 				GBCodePlayBack.recordtimeoutcontrolls = [];
 			    /* END 初始化播放 */
-			    GBCodePlayBack.htmlplayereditor.setValue('');
 			    playbtn.data('status', 0);
 			    $('#play').trigger('click');
+			    Hourglass.init();
 			});
 			//setting speed in cookie
@@ -932,7 +931,6 @@ $(function(){
 					    dataType: "json",
 					    contentType: "application/json",
 					    success: function(data){
-					    	console.log(data);
 					        $(window).unbind('beforeunload');
 	                        var _data = {
 	                                "programId": data.codeReplayId,
@@ -986,53 +984,19 @@ $(function(){
 				GBCodePlayBack.replay_enhancement = !GBCodePlayBack.replay_enhancement;
 			});
-			
-			$('#autorun').click(function(){
-				var $this = $(this), autorun = $this.data('autorun');
-				
-				if(autorun===1){
-					$('#runnow').prop('disabled',false).toggleClass('btn-success').toggleClass('btn-default');
-				}else{
-					$('#runnow').prop('disabled',true).toggleClass('btn-success').toggleClass('btn-default');
-				}
-				
-				$this.data('autorun', (autorun)?0:1);
-				GBCodePlayBack.autorun = !GBCodePlayBack.autorun;
-				
-				$('#runnow').trigger('click');
-			});
-			
-			if(GBCodePlayBack.autorun===1){
-				$('#runnow').prop('disabled',true).removeClass('btn-success').addClass('btn-default');
-			}else{
-				$('#runnow').prop('disabled',false).addClass('btn-success').removeClass('btn-default');
-			}
-			
-			$('#runnow').click(function(){
-				if(typeof GBCodePlayBack.htmleditor !== 'undefined'&&typeof GBCodePlayBack.csseditor !== 'undefined'&&typeof GBCodePlayBack.jseditor !== 'undefined'){
-					GBCodePlayBack.generateResult(GBCodePlayBack.htmleditor.getValue(),
-													GBCodePlayBack.csseditor.getValue(),
-													GBCodePlayBack.jseditor.getValue()
-					);
-					
-					return false;
-				}
-			
-				if(typeof GBCodePlayBack.htmlplayereditor !== 'undefined'&&typeof GBCodePlayBack.cssplayereditor !== 'undefined'&&typeof GBCodePlayBack.jsplayereditor !== 'undefined'){
-					GBCodePlayBack.generateResult(GBCodePlayBack.htmlplayereditor.getValue(),
-													GBCodePlayBack.cssplayereditor.getValue(),
-													GBCodePlayBack.jsplayereditor.getValue()
-					);
-				}
-			});
-			
 			// 使用服务端编译语言
 			$('#comprunbtngrp').unbind("click").on('click', '#comprun', function(event){
 				event.preventDefault();
 				var l = Ladda.create(this);
-				$('#comprun').find('ladda-spinner').remove()
+				$('#comprun').find('ladda-spinner').remove();
 	 			l.start();
+	 			var runStatus = $("#comprun").data('run');
+	 			if(runStatus == 1){
+	 				Hourglass.pauseTimer();	// 暂停计时器
+	 				recorder.pause();	// 音频暂停
+	 			}
+	 			$("#comprun").data('run', 0);
 	 			// 暂停录制
 	 			var pauseState = $('#pause').data('pause');
 	 			if(pauseState == 1 && _role == 0){
@@ -1055,10 +1019,6 @@ $(function(){
 						playTime: 0
 					};
 					GBCodePlayBack.records.push(recordobj);
-					console.log(GBCodePlayBack.records)
-
-	 				Hourglass.pauseTimer();	// 暂停计时器
-	 				recorder.pause();	// 音频暂停
 	 				$('#pause').data('status', '1');
 	 				$('#pause').data('pause', '0');
@@ -1066,21 +1026,18 @@ $(function(){
 	 				$('#start-recording').hide();
 	 				$('.pause-shodow').removeClass('hidden').addClass('show');
+
 	 			}
 				var code = (typeof GBCodePlayBack.htmleditor !=='undefined' && GBCodePlayBack.htmleditor.getValue())
 							|| (typeof GBCodePlayBack.htmlplayereditor !=='undefined' && GBCodePlayBack.htmlplayereditor.getValue());
-							
 				var langid = $('#htmlbutton').data("languageid");
-				
 				var input = $('#input').val() || '';
-
 				var compileData = {
-					code:code,
-					langid:langid,
-					input: input
+				    code: code,
+				    langid: langid,
+				    input: input
 				}
-
 				$.ajax({
 				    type: "post",
 				    url: gxb_api + "/submit/submitCode/api",
@@ -1098,7 +1055,7 @@ $(function(){
 				    },
 				    error: function(){
 				    	l.stop();
-				    	alert('错误')
+				    	alert('错误');
 				    }
 				});
 			});
@@ -1108,6 +1065,7 @@ $(function(){
 			$('#save_compile').unbind("click").click(function(){
 				var length = GBCodePlayBack.records.length - 1;
 				Hourglass.pauseTimer();
+				$("#comprun").data('run', 1);
 				GBCodePlayBack.records[length].compile = GBCodePlayBack.compileResultData;
 				GBCodePlayBack.records[length].output = GBCodePlayBack.compileResultData.output;
@@ -1117,13 +1075,14 @@ $(function(){
 				GBCodePlayBack.record_continue_time = new Date().getTime();
-				contrlPause()
+				contrlPause();
 			})
 			// 不保存编译结果
 			$('#cancel_compile').unbind('click').click(function(){
 				Hourglass.pauseTimer();
+				$("#comprun").data('run', 1);
 				contrlPause()
 				GBCodePlayBack.record_continue_time = new Date().getTime();
 			})
@@ -1412,7 +1371,6 @@ $(function(){
 			};
 			GBCodePlayBack.records.push(recordobj);			
 			GBCodePlayBack.record_startime = currenttime; //设定起始时间
-			console.log(GBCodePlayBack.records);
 		},
 		changeValueCallback: function(record, replay_type, offset) {
 			var obj = record.changeobj,
@@ -1452,8 +1410,6 @@ $(function(){
 				}else{ 
 					GBCodePlayBack.triggertotal += 1;
 				}
-				
-				console.log(record);
 				/*计算播放进度*/
 				var percertage = '0%',
@@ -1579,6 +1535,7 @@ $(function(){
 			cmpinfo: '',
 			result: 1
 		};
+		runResult()
 	    if(data == 1){
 	    	$("#countdown").find('img').attr('src', 'img/ready-go.gif');
 	    	$("#countdown").find('img').load(function(){
@@ -1601,6 +1558,10 @@ $(function(){
 	})
 	$('#re-recoding').click(function(){
+		$('#audio')[0].pause();
+		Hourglass.stopTimer();
+		playEnd()
+		$('.audio-play').attr('disabled', false);
 		$('.re-tips').show();
 	})
@@ -1613,6 +1574,40 @@ $(function(){
 		$(".re-tips").hide();
 	})
+	// 切换自动/手动运行代码
+	$('#autorun').click(function(){
+		var $this = $(this), 
+			autorun = $this.data('autorun');
+		autoRun(autorun)
+		$this.data('autorun', (autorun) ? 0 : 1);
+		GBCodePlayBack.autorun = !GBCodePlayBack.autorun;
+		runResult()
+	});
+	
+	$('#runnow').click(function(){
+		runResult()
+	});
+
+
+	// 切换自动/手动运行代码
+	function autoRun(autorun){
+		if(autorun===1){
+			$('#runnow').prop('disabled',false).html('手动运行').attr('data-original-title', '手动运行');
+		}else{
+			$('#runnow').prop('disabled',true).html('自动运行').attr('data-original-title', '自动运行');
+		}
+	}
+
+	// 编译结果
+	function runResult(){
+		if(typeof GBCodePlayBack.htmleditor !== 'undefined'){
+			GBCodePlayBack.generateResult(GBCodePlayBack.htmleditor.getValue());
+			return false;
+		}
+		if(typeof GBCodePlayBack.htmlplayereditor !== 'undefined'){
+			GBCodePlayBack.generateResult(GBCodePlayBack.htmlplayereditor.getValue());
+		}
+	}
 	// 初始化页面
@@ -1748,7 +1743,7 @@ $(function(){
 			// $('#comprunbtngrp').html('<button id="runnow" type="button" data-style="expand-right" class="btn" title="运行代码">&nbsp; 运行</button>');
 		}else{
 			$('#fontendrun').addClass('hidden');
-			$('#comprunbtngrp').html('<button id="comprun" type="button" data-style="expand-right" class="btn" title="编译并运行代码">&nbsp;编译&运行</button>');
+			$('#comprunbtngrp').html('<button id="comprun" type="button" data-run="1" data-style="expand-right" class="btn" title="编译并运行代码">&nbsp;编译&运行</button>');
 			$('#ifrcontainer').addClass('hidden');
 			$('#cmprun-output').removeClass('hidden');
@@ -211,8 +211,6 @@ button{
             border: none;
         }
     }
-
-    
 }
 .recording-audio{
@@ -441,6 +439,28 @@ button{
             border-radius: 0;
         }
     }
+    
+    #autorun{
+        background: url('../img/icon/run.svg') no-repeat;
+        background-size: 100%;
+        height: 28px;
+        width: 28px;
+        margin: 4px 8px;
+    }
+    #runnow{
+        background: transparent;
+        border: none;
+        color: #FFF;
+        margin-top: 1px;
+        font-size: 16px;
+    }
+    #fontendrun {
+        border-radius: 20px;
+        padding: 0px 8px;
+        color: #FFF;
+        background: -webkit-linear-gradient(left, #1FB6FF, #62DDF5);
+        background: -moz-linear-gradient(left, #1FB6FF, #62DDF5);
+    }
 }
 #countdown{
     position: absolute;