添加手动运行

ykxie
1 parent f9f60df2
Showing 5 changed files with 116 additions and 44 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">
@@ -546,8 +546,8 @@ $(function(){
 					cmpinfo: '',
 					result: 1
 				}
+				GBCodePlayBack.htmlplayereditor.setValue('');
 				compileResult(resultData);
-
 				var data = $(this).attr('data');
 				if (_role == 0) {
 					$('.audio-play').attr('disabled', true);
@@ -569,7 +569,7 @@ $(function(){
 				}
 				GBCodePlayBack.recordtimeoutcontrolls = [];
 			    /* END 初始化播放 */
-			    GBCodePlayBack.htmlplayereditor.setValue('');
+			    
 			    playbtn.data('status', 0);
 			    $('#play').trigger('click');
@@ -986,46 +986,6 @@ $(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();
@@ -1579,6 +1539,7 @@ $(function(){
 			cmpinfo: '',
 			result: 1
 		};
+		runResult()
 	    if(data == 1){
 	    	$("#countdown").find('img').attr('src', 'img/ready-go.gif');
 	    	$("#countdown").find('img').load(function(){
@@ -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());
+		}
+	}
 	// 初始化页面
@@ -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;