梁美英 / programming · Commits

Commit 45bf0c87a0c6a6f245bf7dc27bbe385a23e6d785

Authored by 商艳涛
1 parent 92c241c5

- 添加进入全屏和退出全屏 

- 优化js设置dom大小
Inline Side-by-side
Showing 3 changed files with 121 additions and 118 deletions
src/css/demo.css
  View file @45bf0c8
... ... @@ -241,14 +241,16 @@ textarea[id^="tab"].active{ display: block; }
241 241 pointer-events: none;
242 242 transform: translateY(-50%);
243 243 }
244   -.editor-result .result-header #full-screen{
  244 +.editor-result .result-header #full-screen,
  245 +.editor-result .result-header #back-screen{
245 246 margin: 0;
246 247 background-image: linear-gradient(90deg, #1FB6FF 0%, #62DCF5 100%);
247 248 border-radius: 100px;
248 249 padding: 5px 9px;
249 250 margin-right: 15px;
250 251 }
251   -.editor-result .result-header #full-screen .iconfont{
  252 +.editor-result .result-header #full-screen .iconfont,
  253 +.editor-result .result-header #back-screen .iconfont{
252 254 font-size: 10px;
253 255 }
254 256 .editor-result .result-tabs{
... ...
src/js/gb.js
  View file @45bf0c8
... ... @@ -675,15 +675,15 @@ $(function() {
675 675 $('#play').find('i').removeClass('icon-play').addClass('icon-playcopy').attr('data-original-title', '暂停');
676 676 }
677 677 }
  678 + // TOTO
  679 + // GBCodePlayBack.resetCodeMirrorValue();
  680 + // 会触发编辑器的onChange事件导致 GBCodePlayBack.records 数组会添加一个空记录
  681 + // 播放之前删除
  682 + console.log(GBCodePlayBack.records);
  683 + GBCodePlayBack.records.pop();
  684 + console.log(GBCodePlayBack.records);
678 685 if (!playstatus) {
679 686 console.log('if (!playstatus) {');
680   - // TOTO
681   - // GBCodePlayBack.resetCodeMirrorValue(1);
682   - // 会触发编辑器的onChange事件导致 GBCodePlayBack.records 数组会添加一个空记录
683   - // 播放之前删除
684   - console.log(GBCodePlayBack.records);
685   - // GBCodePlayBack.records.pop();
686   - console.log(GBCodePlayBack.records);
687 687  
688 688 var playbackrecord = GBCodePlayBack.records,
689 689 currenteditor = '';
... ... @@ -768,8 +768,7 @@ $(function() {
768 768 }
769 769 $(this).attr('data', 0).attr('data-original-title', '播放录音');
770 770  
771   - var playbtn = $('#play'),
772   - playbackrecord = GBCodePlayBack.records;
  771 + var playbackrecord = GBCodePlayBack.records;
773 772  
774 773 GBCodePlayBack.triggertotal = 0;
775 774  
... ... @@ -783,8 +782,9 @@ $(function() {
783 782 GBCodePlayBack.recordtimeoutcontrolls = [];
784 783 /* END 初始化播放 */
785 784  
786   - playbtn.data('status', 0);
  785 + $('#play').data('status', 0);
787 786 $('#play').trigger('click');
  787 + // 计时器
788 788 Hourglass.init();
789 789 });
790 790  
... ... @@ -1445,7 +1445,13 @@ $(function() {
1445 1445 else
1446 1446 window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;
1447 1447  
  1448 + var _title = document.title;
  1449 + var timer;
  1450 + var i = 0;
  1451 + var _titleArr = "互动编程正在录制...".split('');
  1452 +
1448 1453 function onchange(evt) {
  1454 + console.log('onchange');
1449 1455 var v = 'visible',
1450 1456 h = 'hidden',
1451 1457 evtMap = {
... ... @@ -1463,12 +1469,34 @@ $(function() {
1463 1469 } else {
1464 1470 document.body.className = this[hidden] ? "hidden" : "visible";
1465 1471 }
  1472 +
1466 1473  
1467 1474 /* Bugfix: Mobile Firefox has a bug here, when loading page it shows blur */
1468 1475  
1469   - if (document.body.className === 'hidden') {
1470   - // player.pauseCallback();
1471   - // pauseCode()
  1476 + // player.pauseCallback();
  1477 + // pauseCode()
  1478 + // 优化Tab标签切换之后 页面标题显示
  1479 + if(document.body.className === 'hidden'){
  1480 + timer = setInterval(function(){
  1481 + if(document.body.className != 'hidden'){
  1482 + clearTimeout(timer);
  1483 + document.title = _title;
  1484 + }else{
  1485 + if(i == 0){
  1486 + document.title = arr[0];
  1487 + }else if(i >= 11){
  1488 + i = 0;
  1489 + document.title = arr[0];
  1490 + }else{
  1491 + document.title += arr[i];
  1492 + }
  1493 + i++;
  1494 + }
  1495 + },100)
  1496 + }else{
  1497 + i = 0;
  1498 + document.title = _title;
  1499 + clearTimeout(timer);
1472 1500 }
1473 1501 }
1474 1502 // set the initial state
... ... @@ -1489,115 +1517,44 @@ $(function() {
1489 1517 resizeWindow: function(thisiframe) {
1490 1518 console.info('GBCodePlayBack.resizeWindow');
1491 1519 /* #STRAT: 编辑器自适应窗口 */
1492   - var calcHeight = function() {
1493   - var app = $('#app')
1494   - var appLeft = $('#appLeft');
1495   - var appRight = $('#appRight');
1496   - var handleLM = $('#handleLM');
1497   - var handleMR = $('#handleMR');
1498   - var appContainer = $('#appContainer');
1499   - var appMian = $('#appMian');
1500   - var appFooter = $('#appFooter');
1501   - var appMainHeader = $('#appMainHeader')
1502   - var winWidth = $(window).width();
1503   - var winHeight = $(window).height();
1504   -
1505   - var isLeftResizing = false;
1506   - var isRightResizing = false;
1507   - var _width = 0;
1508   - var _tempWidth = 0;
1509   - var appLeftRatio = 140 / winWidth;
1510   - var appRightRatio = 320 / winWidth;
1511   -
  1520 + var app = $('#app')
  1521 + var appLeft = $('#appLeft');
  1522 + var appRight = $('#appRight');
  1523 + var handleLM = $('#handleLM');
  1524 + var handleMR = $('#handleMR');
  1525 + var appContainer = $('#appContainer');
  1526 + var appMian = $('#appMian');
  1527 + var appFooter = $('#appFooter');
  1528 + var appMainHeader = $('#appMainHeader')
  1529 + var winWidth = $(window).width();
  1530 + var winHeight = $(window).height();
  1531 + var appMinWidth = 725;
  1532 +
  1533 + var isLeftResizing = false;
  1534 + var isRightResizing = false;
  1535 + var _width = 0;
  1536 + var _tempWidth = 0;
  1537 + var appLeftRatio = 140 / winWidth;
  1538 + var appRightRatio = 320 / winWidth;
  1539 +
  1540 + if($(window).width() <= appMinWidth){
  1541 + $('body').width(appMinWidth)
  1542 + app.width(appMinWidth);
  1543 + appContainer.height($(window).height() - appFooter.height());
  1544 + appLeft.width(140);
  1545 + appRight.width(320);
  1546 + appMian.width(265);
  1547 + appMainHeader.css('margin-left', -140);
  1548 + $('.recording-ctrl-bar').css('padding', '0 20px');
  1549 + }else{
  1550 + $('body').width('100%');
  1551 + app.width('100%');
1512 1552 appContainer.height($(window).height() - appFooter.height());
1513 1553 appLeft.width(parseInt($(window).width() * appLeftRatio));
1514 1554 appRight.width(parseInt($(window).width() * appRightRatio));
1515 1555 appMian.width(parseInt($(window).width() - appLeft.width() - appRight.width()));
1516 1556 appMainHeader.css('margin-left', -appLeft.width());
1517   -
1518   - $(window).resize(function(event) {
1519   - /* Act on the event */
1520   - appContainer.height($(window).height() - appFooter.height());
1521   - appLeft.width(parseInt($(window).width() * appLeftRatio));
1522   - appRight.width(parseInt($(window).width() * appRightRatio));
1523   - appMian.width(parseInt($(window).width() - appLeft.width() - appRight.width()));
1524   - appMainHeader.css('margin-left', -appLeft.width());
1525   - });
1526   -
1527   - // handleLM.on('mousedown', function (e) {
1528   - // isLeftResizing = true;
1529   - // });
1530   - // handleMR.on('mousedown', function (e) {
1531   - // isRightResizing = true;
1532   - // });
1533   -
1534   - // $(document).on('mousemove', function (e) {
1535   - // if (!isLeftResizing && !isRightResizing){
1536   - // return;
1537   - // }
1538   -
1539   - // if(isLeftResizing){
1540   - // _tempWidth = e.clientX;
1541   - // }else if(isRightResizing){
1542   - // _tempWidth = app.width() - e.clientX;
1543   - // }
1544   -
1545   - // if(_tempWidth <= 80){
1546   - // _width = 80;
1547   - // }else if(_tempWidth >= 230){
1548   - // _width = 230;
1549   - // }else{
1550   - // _width = _tempWidth;
1551   - // }
1552   -
1553   - // if(isLeftResizing){
1554   - // appLeft.width(_width);
1555   - // appMian.width($(window).width() - appRight.width() - _width);
1556   - // }
1557   -
1558   - // if(isRightResizing){
1559   - // appRight.width(_width);
1560   - // appMian.width($(window).width() - appLeft.width() - _width);
1561   - // }
1562   -
1563   - // }).on('mouseup', function (e) {
1564   - // // stop resizing
1565   - // isLeftResizing = false;
1566   - // isRightResizing = false;
1567   - // });
1568   -
1569   - // back ===================================
1570   - // var $resultpanel = $("#resultpanel").offset();
1571   - // var $recordpanel = $("#recordpanel").offset();
1572   - // var $resultoutput = $('#resultoutput').offset();
1573   -
1574   - // if (document.URL.indexOf('index.htm') >= 0) {
1575   - // $("#recordpanel").height($(window).height() - $recordpanel.top - 16 - 70);
1576   - // $("#resultpanel").height($(window).height() - $resultpanel.top - 16 - 70);
1577   - // $(".CodeMirror").height($(window).height() - $recordpanel.top - 16 - 70);
1578   - // } else {
1579   - // $("#recordpanel").height($(window).height() - $recordpanel.top - 16 - 34);
1580   - // $("#resultpanel").height($(window).height() - $resultpanel.top - 16 - 34);
1581   - // }
1582   - // $('#resultoutput').find('.tab-content').height($(window).height() - $resultoutput.top - 164).css({ 'overflow-y': "scroll" })
1583   -
1584   - // /*保证编辑器都尺寸自动变化（包括滚动条）*/
1585   - // if (typeof GBCodePlayBack.htmleditor !== 'undefined' && typeof GBCodePlayBack.csseditor !== 'undefined' && typeof GBCodePlayBack.jseditor !== 'undefined') {
1586   - // GBCodePlayBack.htmleditor.refresh();
1587   - // GBCodePlayBack.csseditor.refresh();
1588   - // GBCodePlayBack.jseditor.refresh();
1589   - // }
1590 1557 }
1591   -
1592   - $(window).resize(function() {
1593   - // $('#editorwrapper').find('button').removeClass('btn-primary').find('#allbutton').addClass('btn-primary');
1594   - calcHeight();
1595   - //窗口变化则隐藏popover
1596   - // $('#playrecord').popover('hide');
1597   - }).load(function() {
1598   - calcHeight();
1599   - });
1600   - calcHeight();
1601 1558 /* #END: 编辑器自适应窗口 */
1602 1559 },
1603 1560 onChange: function(editor, changeobj) { // 监听输入事件 editor: 输入语言；changeobj：输入内容{from,text,to}
... ... @@ -1842,6 +1799,49 @@ $(function() {
1842 1799 }
1843 1800 });
1844 1801  
  1802 + $(window).resize(function() {
  1803 + setTimeout(function () {
  1804 + GBCodePlayBack.resizeWindow();
  1805 + }, 100);
  1806 + }).load(function() {
  1807 + GBCodePlayBack.resizeWindow();
  1808 + });
  1809 +
  1810 + // 找到支持的方法, 使用需要全屏的 element 调用
  1811 + function launchFullScreen(element) {
  1812 + if (element.requestFullscreen) {
  1813 + element.requestFullscreen();
  1814 + } else if (element.mozRequestFullScreen) {
  1815 + element.mozRequestFullScreen();
  1816 + } else if (element.webkitRequestFullscreen) {
  1817 + element.webkitRequestFullscreen();
  1818 + } else if (element.msRequestFullscreen) {
  1819 + element.msRequestFullscreen();
  1820 + }
  1821 + }
  1822 + function exitFullscreen() {
  1823 + if (document.exitFullscreen) {
  1824 + document.exitFullscreen();
  1825 + } else if (document.mozExitFullScreen) {
  1826 + document.mozExitFullScreen();
  1827 + } else if (document.webkitExitFullscreen) {
  1828 + document.webkitExitFullscreen();
  1829 + }
  1830 + }
  1831 +
  1832 + $(document).on('click', '#full-screen', function(event) {
  1833 + event.preventDefault();
  1834 + var fullData = $(this).data('full');
  1835 + launchFullScreen(document.getElementById("app"));
  1836 + $('#back-screen').show();
  1837 + $('#full-screen').hide();
  1838 + });
  1839 + $(document).on('click', '#back-screen', function(event) {
  1840 + exitFullscreen();
  1841 + $('#full-screen').show();
  1842 + $('#back-screen').hide();
  1843 + })
  1844 +
1845 1845 // 开始录制
1846 1846 $('#start-recording').click(function() {
1847 1847 console.info('$(\'#start-recording\').click(');
... ...
src/v1.1/index.html
  View file @45bf0c8
... ... @@ -125,6 +125,7 @@
125 125 </div>
126 126 <div class="pull-right">
127 127 <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>
  128 + <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>
128 129 </div>
129 130 <div class="btn-group">
130 131 <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button>
... ...