梁美英 / programming · Commits

Commit 35a69647d3ce16e5841cf2030729fc7b51780876

Authored by ykxie
1 parent f9f60df2

添加手动运行

Inline Side-by-side
Showing 5 changed files with 116 additions and 44 deletions
src/css/recording.css
  View file @35a6964
... ... @@ -341,6 +341,27 @@ button {
341 341 border-bottom: 1px solid #999;
342 342 border-radius: 0; }
343 343  
  344 +#previewpanel #autorun {
  345 + background: url("../img/icon/run.svg") no-repeat;
  346 + background-size: 100%;
  347 + height: 28px;
  348 + width: 28px;
  349 + margin: 4px 8px; }
  350 +
  351 +#previewpanel #runnow {
  352 + background: transparent;
  353 + border: none;
  354 + color: #FFF;
  355 + margin-top: 1px;
  356 + font-size: 16px; }
  357 +
  358 +#previewpanel #fontendrun {
  359 + border-radius: 20px;
  360 + padding: 0px 8px;
  361 + color: #FFF;
  362 + background: -webkit-linear-gradient(left, #1FB6FF, #62DDF5);
  363 + background: -moz-linear-gradient(left, #1FB6FF, #62DDF5); }
  364 +
344 365 #countdown {
345 366 position: absolute;
346 367 top: 0;
... ...
src/img/icon/run.svg 0 → 100644
  View file @35a6964
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<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">
  3 + <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
  4 + <title>点击运行</title>
  5 + <desc>Created with Sketch.</desc>
  6 + <defs>
  7 + <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
  8 + <stop stop-color="#5CEFFF" offset="0%"></stop>
  9 + <stop stop-color="#4CE2FF" offset="100%"></stop>
  10 + </linearGradient>
  11 + <ellipse id="path-2" cx="7" cy="7" rx="7" ry="7"></ellipse>
  12 + <mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="14" height="14" fill="white">
  13 + <use xlink:href="#path-2"></use>
  14 + </mask>
  15 + </defs>
  16 + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  17 + <g id="01-学习中心-实境编程-前端语言" transform="translate(-772.000000, -183.000000)">
  18 + <g id="视频" transform="translate(120.000000, 171.000000)">
  19 + <g id="右侧运行窗口" transform="translate(635.000000, 0.000000)">
  20 + <g id="点击运行" transform="translate(11.000000, 9.000000)">
  21 + <g transform="translate(6.000000, 3.000000)">
  22 + <use id="Oval-3" stroke="url(#linearGradient-1)" mask="url(#mask-3)" stroke-width="2" fill="#FFFFFF" xlink:href="#path-2"></use>
  23 + <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>
  24 + </g>
  25 + </g>
  26 + </g>
  27 + </g>
  28 + </g>
  29 + </g>
  30 +</svg>
0 31 \ No newline at end of file
... ...
src/index.html
  View file @35a6964
... ... @@ -125,6 +125,12 @@
125 125 <p id="replay">预览录制</p>
126 126 </div>
127 127 <div class="btn-group pull-right" id="comprunbtngrp"></div>
  128 + <div class="btn-group pull-right" id="fontendrun">
  129 + <button id="autorun" type="button" class="btn" title="切换自动/手动运行代码" data-placement="bottom" data-autorun="1"></button>
  130 + <button id="runnow" type="button" class="btn" title="手动运行代码" data-placement="bottom" disabled="disabled">
  131 + 自动运行
  132 + </button>
  133 + </div>
128 134 </div>
129 135 <div class="panel-body hidden" id="cmprun-output">
130 136 <div id="resultoutput">
... ...
src/js/gbreplayer.js
  View file @35a6964
... ... @@ -546,8 +546,8 @@ $(function(){
546 546 cmpinfo: '',
547 547 result: 1
548 548 }
  549 + GBCodePlayBack.htmlplayereditor.setValue('');
549 550 compileResult(resultData);
550   -
551 551 var data = $(this).attr('data');
552 552 if (_role == 0) {
553 553 $('.audio-play').attr('disabled', true);
... ... @@ -569,7 +569,7 @@ $(function(){
569 569 }
570 570 GBCodePlayBack.recordtimeoutcontrolls = [];
571 571 /* END 初始化播放 */
572   - GBCodePlayBack.htmlplayereditor.setValue('');
  572 +
573 573  
574 574 playbtn.data('status', 0);
575 575 $('#play').trigger('click');
... ... @@ -986,46 +986,6 @@ $(function(){
986 986 GBCodePlayBack.replay_enhancement = !GBCodePlayBack.replay_enhancement;
987 987 });
988 988  
989   -
990   - $('#autorun').click(function(){
991   - var $this = $(this), autorun = $this.data('autorun');
992   -
993   - if(autorun===1){
994   - $('#runnow').prop('disabled',false).toggleClass('btn-success').toggleClass('btn-default');
995   - }else{
996   - $('#runnow').prop('disabled',true).toggleClass('btn-success').toggleClass('btn-default');
997   - }
998   -
999   - $this.data('autorun', (autorun)?0:1);
1000   - GBCodePlayBack.autorun = !GBCodePlayBack.autorun;
1001   -
1002   - $('#runnow').trigger('click');
1003   - });
1004   -
1005   - if(GBCodePlayBack.autorun===1){
1006   - $('#runnow').prop('disabled',true).removeClass('btn-success').addClass('btn-default');
1007   - }else{
1008   - $('#runnow').prop('disabled',false).addClass('btn-success').removeClass('btn-default');
1009   - }
1010   -
1011   - $('#runnow').click(function(){
1012   - if(typeof GBCodePlayBack.htmleditor !== 'undefined'&&typeof GBCodePlayBack.csseditor !== 'undefined'&&typeof GBCodePlayBack.jseditor !== 'undefined'){
1013   - GBCodePlayBack.generateResult(GBCodePlayBack.htmleditor.getValue(),
1014   - GBCodePlayBack.csseditor.getValue(),
1015   - GBCodePlayBack.jseditor.getValue()
1016   - );
1017   -
1018   - return false;
1019   - }
1020   -
1021   - if(typeof GBCodePlayBack.htmlplayereditor !== 'undefined'&&typeof GBCodePlayBack.cssplayereditor !== 'undefined'&&typeof GBCodePlayBack.jsplayereditor !== 'undefined'){
1022   - GBCodePlayBack.generateResult(GBCodePlayBack.htmlplayereditor.getValue(),
1023   - GBCodePlayBack.cssplayereditor.getValue(),
1024   - GBCodePlayBack.jsplayereditor.getValue()
1025   - );
1026   - }
1027   - });
1028   -
1029 989 // 使用服务端编译语言
1030 990 $('#comprunbtngrp').unbind("click").on('click', '#comprun', function(event){
1031 991 event.preventDefault();
... ... @@ -1579,6 +1539,7 @@ $(function(){
1579 1539 cmpinfo: '',
1580 1540 result: 1
1581 1541 };
  1542 + runResult()
1582 1543 if(data == 1){
1583 1544 $("#countdown").find('img').attr('src', 'img/ready-go.gif');
1584 1545 $("#countdown").find('img').load(function(){
... ... @@ -1613,6 +1574,40 @@ $(function(){
1613 1574 $(".re-tips").hide();
1614 1575 })
1615 1576  
  1577 + // 切换自动/手动运行代码
  1578 + $('#autorun').click(function(){
  1579 + var $this = $(this),
  1580 + autorun = $this.data('autorun');
  1581 + autoRun(autorun)
  1582 + $this.data('autorun', (autorun) ? 0 : 1);
  1583 + GBCodePlayBack.autorun = !GBCodePlayBack.autorun;
  1584 + runResult()
  1585 + });
  1586 +
  1587 + $('#runnow').click(function(){
  1588 + runResult()
  1589 + });
  1590 +
  1591 +
  1592 + // 切换自动/手动运行代码
  1593 + function autoRun(autorun){
  1594 + if(autorun===1){
  1595 + $('#runnow').prop('disabled',false).html('手动运行').attr('data-original-title', '手动运行');
  1596 + }else{
  1597 + $('#runnow').prop('disabled',true).html('自动运行').attr('data-original-title', '自动运行');
  1598 + }
  1599 + }
  1600 +
  1601 + // 编译结果
  1602 + function runResult(){
  1603 + if(typeof GBCodePlayBack.htmleditor !== 'undefined'){
  1604 + GBCodePlayBack.generateResult(GBCodePlayBack.htmleditor.getValue());
  1605 + return false;
  1606 + }
  1607 + if(typeof GBCodePlayBack.htmlplayereditor !== 'undefined'){
  1608 + GBCodePlayBack.generateResult(GBCodePlayBack.htmlplayereditor.getValue());
  1609 + }
  1610 + }
1616 1611  
1617 1612  
1618 1613 // 初始化页面
... ...
src/scss/recording.scss
  View file @35a6964
... ... @@ -211,8 +211,6 @@ button{
211 211 border: none;
212 212 }
213 213 }
214   -
215   -
216 214 }
217 215  
218 216 .recording-audio{
... ... @@ -441,6 +439,28 @@ button{
441 439 border-radius: 0;
442 440 }
443 441 }
  442 +
  443 + #autorun{
  444 + background: url('../img/icon/run.svg') no-repeat;
  445 + background-size: 100%;
  446 + height: 28px;
  447 + width: 28px;
  448 + margin: 4px 8px;
  449 + }
  450 + #runnow{
  451 + background: transparent;
  452 + border: none;
  453 + color: #FFF;
  454 + margin-top: 1px;
  455 + font-size: 16px;
  456 + }
  457 + #fontendrun {
  458 + border-radius: 20px;
  459 + padding: 0px 8px;
  460 + color: #FFF;
  461 + background: -webkit-linear-gradient(left, #1FB6FF, #62DDF5);
  462 + background: -moz-linear-gradient(left, #1FB6FF, #62DDF5);
  463 + }
444 464 }
445 465 #countdown{
446 466 position: absolute;
... ...