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

- 优化js设置dom大小

- 添加进入全屏和退出全屏
- 优化js设置dom大小
商艳涛
1 parent 92c241c5
Showing 3 changed files with 121 additions and 118 deletions
src/css/demo.css
src/js/gb.js
src/v1.1/index.html
@@ -241,14 +241,16 @@ textarea[id^=&quot;tab&quot;].active{ display: block; }
     pointer-events: none;
     transform: translateY(-50%);
 }
-.editor-result .result-header #full-screen{
+.editor-result .result-header #full-screen,
+.editor-result .result-header #back-screen{
     margin: 0;
     background-image: linear-gradient(90deg, #1FB6FF 0%, #62DCF5 100%);
     border-radius: 100px;
     padding: 5px 9px;
     margin-right: 15px;
 }
-.editor-result .result-header #full-screen .iconfont{
+.editor-result .result-header #full-screen .iconfont,
+.editor-result .result-header #back-screen .iconfont{
     font-size: 10px;
 }
 .editor-result .result-tabs{
@@ -675,15 +675,15 @@ $(function() {
                         $('#play').find('i').removeClass('icon-play').addClass('icon-playcopy').attr('data-original-title', '暂停');
                     }
                 }
+                // TOTO 
+                // GBCodePlayBack.resetCodeMirrorValue(); 
+                // 会触发编辑器的onChange事件导致 GBCodePlayBack.records 数组会添加一个空记录
+                // 播放之前删除
+                console.log(GBCodePlayBack.records);
+                GBCodePlayBack.records.pop();
+                console.log(GBCodePlayBack.records);
                 if (!playstatus) {
                     console.log('if (!playstatus) {');
-                    // TOTO 
-                    // GBCodePlayBack.resetCodeMirrorValue(1); 
-                    // 会触发编辑器的onChange事件导致 GBCodePlayBack.records 数组会添加一个空记录
-                    // 播放之前删除
-                    console.log(GBCodePlayBack.records);
-                    // GBCodePlayBack.records.pop();
-                    console.log(GBCodePlayBack.records);
                     var playbackrecord = GBCodePlayBack.records,
                         currenteditor = '';
@@ -768,8 +768,7 @@ $(function() {
                 }
                 $(this).attr('data', 0).attr('data-original-title', '播放录音');
-                var playbtn = $('#play'),
-                    playbackrecord = GBCodePlayBack.records;
+                var playbackrecord = GBCodePlayBack.records;
                 GBCodePlayBack.triggertotal = 0;
@@ -783,8 +782,9 @@ $(function() {
                 GBCodePlayBack.recordtimeoutcontrolls = [];
                 /* END 初始化播放 */
-                playbtn.data('status', 0);
+                $('#play').data('status', 0);
                 $('#play').trigger('click');
+                // 计时器
                 Hourglass.init();
             });
@@ -1445,7 +1445,13 @@ $(function() {
                 else
                     window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;
+                var _title = document.title;
+                var timer;
+                var i = 0;
+                var _titleArr = "互动编程正在录制...".split('');
+
                 function onchange(evt) {
+                    console.log('onchange');
                     var v = 'visible',
                         h = 'hidden',
                         evtMap = {
@@ -1463,12 +1469,34 @@ $(function() {
                     } else {
                         document.body.className = this[hidden] ? "hidden" : "visible";
                     }
+                    
                     /* Bugfix: Mobile Firefox has a bug here, when loading page it shows blur */
-                    if (document.body.className === 'hidden') {
-                        // player.pauseCallback();
-                        // pauseCode()
+                    // player.pauseCallback();
+                    // pauseCode()
+                    // 优化Tab标签切换之后 页面标题显示
+                    if(document.body.className === 'hidden'){
+                        timer = setInterval(function(){
+                            if(document.body.className != 'hidden'){
+                                clearTimeout(timer);
+                                document.title = _title;
+                            }else{
+                                if(i == 0){
+                                    document.title = arr[0];
+                                }else if(i >= 11){
+                                    i = 0;
+                                    document.title = arr[0];
+                                }else{
+                                    document.title += arr[i];
+                                }
+                                i++;
+                            }
+                        },100)
+                    }else{
+                        i = 0;
+                        document.title = _title;
+                        clearTimeout(timer);
                     }
                 }
                 // set the initial state
@@ -1489,115 +1517,44 @@ $(function() {
         resizeWindow: function(thisiframe) {
             console.info('GBCodePlayBack.resizeWindow');
             /* #STRAT: 编辑器自适应窗口 */
-            var calcHeight = function() {
-                var app = $('#app')
-                var appLeft = $('#appLeft');
-                var appRight = $('#appRight');
-                var handleLM = $('#handleLM');
-                var handleMR = $('#handleMR');
-                var appContainer = $('#appContainer');
-                var appMian = $('#appMian');
-                var appFooter = $('#appFooter');
-                var appMainHeader = $('#appMainHeader')
-                var winWidth = $(window).width();
-                var winHeight = $(window).height();
-
-                var isLeftResizing = false;
-                var isRightResizing = false;
-                var _width = 0;
-                var _tempWidth = 0;
-                var appLeftRatio = 140 / winWidth;
-                var appRightRatio = 320 / winWidth;
-
+            var app = $('#app')
+            var appLeft = $('#appLeft');
+            var appRight = $('#appRight');
+            var handleLM = $('#handleLM');
+            var handleMR = $('#handleMR');
+            var appContainer = $('#appContainer');
+            var appMian = $('#appMian');
+            var appFooter = $('#appFooter');
+            var appMainHeader = $('#appMainHeader')
+            var winWidth = $(window).width();
+            var winHeight = $(window).height();
+            var appMinWidth = 725;
+
+            var isLeftResizing = false;
+            var isRightResizing = false;
+            var _width = 0;
+            var _tempWidth = 0;
+            var appLeftRatio = 140 / winWidth;
+            var appRightRatio = 320 / winWidth;
+
+            if($(window).width() <= appMinWidth){
+                $('body').width(appMinWidth)
+                app.width(appMinWidth);
+                appContainer.height($(window).height() - appFooter.height());
+                appLeft.width(140);
+                appRight.width(320);
+                appMian.width(265);
+                appMainHeader.css('margin-left', -140);
+                $('.recording-ctrl-bar').css('padding', '0 20px');
+            }else{
+                $('body').width('100%');
+                app.width('100%');
                 appContainer.height($(window).height() - appFooter.height());
                 appLeft.width(parseInt($(window).width() * appLeftRatio));
                 appRight.width(parseInt($(window).width() * appRightRatio));
                 appMian.width(parseInt($(window).width() - appLeft.width() - appRight.width()));
                 appMainHeader.css('margin-left', -appLeft.width());
-                
-                $(window).resize(function(event) {
-                    /* Act on the event */
-                    appContainer.height($(window).height() - appFooter.height());
-                    appLeft.width(parseInt($(window).width() * appLeftRatio));
-                    appRight.width(parseInt($(window).width() * appRightRatio));
-                    appMian.width(parseInt($(window).width() - appLeft.width() - appRight.width()));
-                    appMainHeader.css('margin-left', -appLeft.width());
-                });
-
-                // handleLM.on('mousedown', function (e) {
-                //     isLeftResizing = true;
-                // });
-                // handleMR.on('mousedown', function (e) {
-                //     isRightResizing = true;
-                // });
-
-                // $(document).on('mousemove', function (e) {
-                //     if (!isLeftResizing && !isRightResizing){
-                //         return;
-                //     }
-
-                //     if(isLeftResizing){
-                //         _tempWidth = e.clientX;
-                //     }else if(isRightResizing){
-                //         _tempWidth = app.width() - e.clientX;
-                //     }
-
-                //     if(_tempWidth <= 80){
-                //         _width = 80;
-                //     }else if(_tempWidth >= 230){
-                //         _width = 230;
-                //     }else{
-                //         _width = _tempWidth;
-                //     }
-
-                //     if(isLeftResizing){
-                //         appLeft.width(_width);
-                //         appMian.width($(window).width() - appRight.width() - _width);
-                //     }
-
-                //     if(isRightResizing){
-                //         appRight.width(_width);
-                //         appMian.width($(window).width() - appLeft.width() - _width);
-                //     }
-                    
-                // }).on('mouseup', function (e) {
-                //     // stop resizing
-                //     isLeftResizing = false;
-                //     isRightResizing = false;
-                // });
-                
-                // back ===================================
-                // var $resultpanel = $("#resultpanel").offset();
-                // var $recordpanel = $("#recordpanel").offset();
-                // var $resultoutput = $('#resultoutput').offset();
-
-                // if (document.URL.indexOf('index.htm') >= 0) {
-                //     $("#recordpanel").height($(window).height() - $recordpanel.top - 16 - 70);
-                //     $("#resultpanel").height($(window).height() - $resultpanel.top - 16 - 70);
-                //     $(".CodeMirror").height($(window).height() - $recordpanel.top - 16 - 70);
-                // } else {
-                //     $("#recordpanel").height($(window).height() - $recordpanel.top - 16 - 34);
-                //     $("#resultpanel").height($(window).height() - $resultpanel.top - 16 - 34);
-                // }
-                // $('#resultoutput').find('.tab-content').height($(window).height() - $resultoutput.top - 164).css({ 'overflow-y': "scroll" })
-
-                // /*保证编辑器都尺寸自动变化（包括滚动条）*/
-                // if (typeof GBCodePlayBack.htmleditor !== 'undefined' && typeof GBCodePlayBack.csseditor !== 'undefined' && typeof GBCodePlayBack.jseditor !== 'undefined') {
-                //     GBCodePlayBack.htmleditor.refresh();
-                //     GBCodePlayBack.csseditor.refresh();
-                //     GBCodePlayBack.jseditor.refresh();
-                // }
             }
-
-            $(window).resize(function() {
-                // $('#editorwrapper').find('button').removeClass('btn-primary').find('#allbutton').addClass('btn-primary');
-                calcHeight();
-                //窗口变化则隐藏popover
-                // $('#playrecord').popover('hide');
-            }).load(function() {
-                calcHeight();
-            });
-            calcHeight();
             /* #END: 编辑器自适应窗口 */
         },
         onChange: function(editor, changeobj) { // 监听输入事件 editor: 输入语言；changeobj：输入内容{from,text,to}
@@ -1842,6 +1799,49 @@ $(function() {
         }
     });
+    $(window).resize(function() {
+        setTimeout(function () {
+            GBCodePlayBack.resizeWindow();
+        }, 100);
+    }).load(function() {
+        GBCodePlayBack.resizeWindow();
+    });
+
+    // 找到支持的方法, 使用需要全屏的 element 调用 
+    function launchFullScreen(element) {
+        if (element.requestFullscreen) {
+            element.requestFullscreen();
+        } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) {
+            element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) {
+            element.msRequestFullscreen();
+        }
+    }
+    function exitFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozExitFullScreen) {
+            document.mozExitFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+    }
+
+    $(document).on('click', '#full-screen', function(event) {
+        event.preventDefault();
+        var fullData = $(this).data('full');
+        launchFullScreen(document.getElementById("app")); 
+        $('#back-screen').show();
+        $('#full-screen').hide();
+    });
+    $(document).on('click', '#back-screen', function(event) {
+        exitFullscreen();
+        $('#full-screen').show();
+        $('#back-screen').hide();
+    })
+
     // 开始录制
     $('#start-recording').click(function() {
         console.info('$(\'#start-recording\').click(');
@@ -125,6 +125,7 @@
                         </div>
                         <div class="pull-right">
                             <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>
+                            <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>
                         </div>
                         <div class="btn-group">
                             <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button>