PHPIndex

.page-box{
    background: #f6f6f6 !important;
}
/* .page-box #output {
    padding: 40px 20px;
}
.page-box #output.is-in-wap{
    padding: 40px 10px 10px;
} */
.output-loading{padding: 0px!important;}
.page-box #output .slide .block.group{
    border: none !important;
}
.page-box #output .slides-loadnig-msg{display: none!important;}
.page-box #output #all_slides_warpper .slide{
    /* margin: 0px auto; */
    -moz-background-size:100% 100%; 
    background-size:100% 100%;
}
.page-box #output #all_slides_warpper{
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    padding: 0px;
    /* height: inherit !important; */
    height: auto !important;
}
.page-box #output #all_slides_warpper .slide{
    /* width: inherit !important; */
    /* height: -webkit-fill-available !important; */
    border: none;
}
.page-box #output #left_slides_bar .slide div.content,
.page-box #output #all_slides_warpper .slide div.content{
    border: none!important;
    /* width: auto!important; */
    /* height: inherit !important; */
}
/* .page-box #output #all_slides_warpper .slide *{
    max-width: 100% !important;
    height: inherit !important;
} */
/* .page-box #output #left_slides_bar .slide div.content{
    left: 0px!important;
} */

.page-box #output{position: relative;}
#left_slides_bar{
    position: absolute;
    width: 240px;
    left: 0px;
    overflow-y: scroll;
    top: 0px;
    /* bottom: 0px; */
    padding: 10px;
    /* padding-top: 50px; */
    display: none;

    /* bottom: 10px; */
    bottom: 0px;
    padding-bottom: 0px;
    background: #fff;
    border-right: 1px solid rgb(148, 148, 148);
}
#output .slide-box{
    margin: 0px auto;
    position: relative;
}
#output #left_slides_bar .slide,
#output #all_slides_warpper .slide{
    border-radius: 0px;
    -webkit-transform-origin: 0 0;
}
.not-in-wap #output #all_slides_warpper .slide-box{
    top: 50%;
    transform: translateY(-50%);
}
.not-in-wap #output #all_slides_warpper .slide{
    /* margin: 0px auto; */
    margin: 0px;
    top: 0px !important;
    left: 0px !important;
    /* top: 50% !important;
    transform: translateY(-50%); */
}
.page-box #output #left_slides_bar .slide-box{
    margin-bottom: 10px;
}
/* #left_slides_bar .slide{width: 100%;} */
.page-box #output #left_slides_bar .slide{
    margin: 0px auto; 
    /* max-width: 100%; */
    /* margin-bottom: 10px; */
    -moz-background-size:100% 100%; 
    background-size:100% 100%;
}
.page-box #output #left_slides_bar .slide{
    /* width: 225px!important; */
    /* height: 150px!important; */
}
.page-box #output #left_slides_bar .slide:first-child{
    /* margin: 0px 0px 10px 0px!important; */
    opacity: 1!important;
    /* width: 227px!important; */
}
.slides-toolbar{
    display: none;
}
.slide-page-toolbar{
    /* padding: 10px; */
    text-align: center;
    font-size: 16px;
    /* color: #666; */
    /* z-index: 999999; */
    z-index: 9;
    background-color: #fff;
    height: 20px;
    position: fixed;
    bottom: 25px;
    width: 150px !important;
    border-radius: 20px;
    left: 54%;

    background-color: rgba(255,255,255,.5);
    box-shadow: 0 2px 8px 0 rgb(101 101 101 / 30%);
    /* opacity: .8;*/
    padding: 8px;
    line-height: 20px;
    color: #333;
}
/* .is-in-wap .slide-page-toolbar{
    left: 50%;
    transform: translateX(-50%);
} */
/* 加上之后会有滚动条，占用显示区宽度 */
/* .is-in-wap #output{background: #fff;}
.is-in-wap #all_slides_warpper{
    overflow-y: scroll;
} */
.is-in-wap #all_slides_warpper .slide-box{
    margin-bottom: 10px;
}
.is-in-wap #all_slides_warpper .slide{
    display: block !important;
    /* margin-bottom: 10px; */
    /* margin: 0px auto 10px auto; */
}
.is-in-wap .slide-page-toolbar{display: none;}

.all-slides-warpper{
    width: auto!important;
}
.not-in-wap .all-slides-warpper{
    margin-left: 260px!important;
}
.not-in-wap .all-slides-warpper-fscreen{
    /* width: 100%!important; */
    width: auto!important;
}
.not-in-wap .main-slide-fscreen{
    /* top: 0px !important; */
    left: 0px !important;

    /* top: 50% !important;
    transform: translateY(-50%); */
}

/* .not-in-wap #all_slides_warpper .slide{
    top: 50% !important;
    transform: translateY(-50%);
} */


.total-page-point{
    border-color: #FF8040;
    box-shadow: 0 0 0 2px #ff8040;
}
.slide-play-btn{
    display: none;
    opacity: 0.6;
    position: absolute;
    font-size: 45px;
    /* top: 36%;
    left: 90px; */
    transform: scale(1) !important;
    z-index: 999999;
    color: #ff8040;
    top: 50%;
    left: 50%;
    margin-left: -22.5px;
    margin-top: -22.5px;
}
.slide-play-btn:hover{
    opacity: 0.8;
    cursor: pointer;
}

.not-in-wap .slide-left-icon{
    position: absolute;
    width: 100px;
    left: 270px;
    top: 0;
    height: 100%;
    cursor: url(images/arr_left.cur), auto;
    z-index: 999999;
}
.not-in-wap .slide-right-icon{
    position: absolute;
    width: 100px;
    right: 0;
    top: 0;
    height: 100%;
    cursor: url(images/arr_right.cur), auto;
    z-index: 999999;
}

/* 全屏 */
.output-fscreen .slide-page-toolbar{
    left: 45%;
}
.output-fscreen .slide-left-icon{
    left: 0px;
    width: 150px;
}
.output-fscreen .slide-right-icon{
    width: 150px;
}


@media (max-width: 768px) {
    .page-box.kod-pptxjs-box.not-in-wap #left_slides_bar{display: none !important;}
    .not-in-wap .all-slides-warpper {margin-left: 0px !important;}
    .not-in-wap .slide-left-icon{left: 0px;}
    .slide-page-toolbar{left: 50%;transform: translateX(-50%);}
    /* .slide-page-toolbar{display: none;} */
}

$(function(){
    // v1.21.1
    // get min.js: mammoth.js-master/node_modules/.bin/uglifyjs pptxjs.kod.js -c > pptxjs.kod.min.js
    var isWap = function(){
        return $(window.document).width() < 768;
    }
    var pptxToHtml = function(fileUrl){
        $("#output").pptxToHtml({
            pptxFileUrl: fileUrl,
            fileInputId: "",
            slideMode: true,
            keyBoardShortCut: false,
            mediaProcess: false,
            slideModeConfig: {  //on slide mode (slideMode: true)
                first: 1, 
                nav: true, /** true,false : show or not nav buttons*/
                // nav: true, /** true,false : show or not nav buttons*/
                navTxtColor: "white", /** color */
                navNextTxt:"&#8250;", //">"
                navPrevTxt: "&#8249;", //"<"
                showPlayPauseBtn: true,/** true,false */
                keyBoardShortCut: false, /** true,false */
                showSlideNum: true, /** true,false */
                showTotalSlideNum: true, /** true,false */
                autoSlide: 2, /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */
                // randomAutoSlide: false, /** true,false ,autoSlide:true */ 
                // loop: false,  /** true,false */
                background: false, /** false or color*/
                transition: "fade", /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
                transitionTime: 0 /** transition time in seconds */
            }
        });
    }
    // 开始载入pptx文件
    try{
        var tipsLoading = Tips.loadingMask(false,kodSdkConfig.LNG['explorer.wordLoading'],0.5);
        $('.page-box').addClass(isWap() ? 'is-in-wap' : 'not-in-wap');
        $('.page-box.not-in-wap #output').html('</div><div id="left_slides_bar"></div>');
        $.ajax({
            url: FILE_INFO.link,
            type: 'head',
            success: function(res){
                pptxToHtml(FILE_INFO.link);
            },
            error: function(err){
                if(tipsLoading){tipsLoading.close();tipsLoading = false;}
                page.showTips(kodSdkConfig.LNG['officeViewer.webOffice.reqErrUrl']);
            }
        });
        window.onerror = function (message, url, line, column, error) {
            // if(tipsLoading){tipsLoading.close();tipsLoading = false;}
            webOfficeAutoChange(error);
            console.warn(message, url, line, column, error);
        }
    }catch(err){
        // if(tipsLoading){tipsLoading.close();tipsLoading = false;}
        webOfficeAutoChange(err);
    }

    // 页面缩放比例，(当前宽/高) / (原始宽/高)，原始宽高比通常为960/720、1280/720
    var pageRatio = function(wap){
        // 左侧栏
        if(arguments[1] !== undefined) {
            return 225 / dfWidth;
        }
        // 移动端，固定以宽为基准
        if(wap) {
            return $("#output").width() / dfWidth;
        }
        var pgWidth = $("#all_slides_warpper").width();
        var pgHeight = $("#all_slides_warpper").height();
        // 当前宽高比>原始宽高比，说明宽度较大，以高度为基准，否则相反
        if((pgWidth / pgHeight) > (dfWidth / dfHeight)) {
            return pgHeight / dfHeight;
        }
        return pgWidth / dfWidth;
    }
    // 文件加载完成，重置页面尺寸样式
    var dfWidth = 0;
    var dfHeight = 0;
    utils.functionHook($,'attr',false,function(res,args){
        // console.log(res,args)
        var id = args[0].id || '';
        if(id != 'all_slides_warpper') return res;  // convertToHtml结束

        // 1.添加页码栏——移动端不添加（获取不到滚动事件）
        if(!$('#output .slide-page-toolbar').length) {
            $('#output').prepend('\
                <div class="slide-page-toolbar">'
                    + '<span class="page-cur-num">' 
                    + $('#slides-slide-num').html()
                    + '</span> / <span class="page-total-num">' 
                    + $('#slides-total-slides-num').html() 
                    + '</span>\
                </div>\
                <div class="slide-left-icon btn"></div>\
                <div class="slide-right-icon btn"></div>\
            ');
            utils.setLtRtIcon();
        }

        // 2.主区域宽度、padding
        $('#all_slides_warpper').addClass('all-slides-warpper');
        // 没有获取到位置尺寸的图片，为避免覆盖整个页面，直接隐藏
        // $("#all_slides_warpper .slide img").each(function(){
        //     var pStyle = $(this).parent()[0].style;
        //     if (!pStyle.width && !pStyle.height) {
        //         // $(this).attr('style', 'width: fit-content;');
        //         $(this).addClass('hidden');
        //     }
        // });
        // 隐藏<#>
        $("#all_slides_warpper .slide .block.v-mid.content .text-block").each(function(){
            if ($(this).text() == '‹#›') $(this).addClass('hidden');
        });

        // 3.各页复制到左侧栏，并显示——非移动端分栏显示
        dfWidth = $("#all_slides_warpper .slide:eq(0)").width();
        dfHeight = $("#all_slides_warpper .slide:eq(0)").height();

        // var wap = isWap();   // 这里宽度会变化，以首次为准
        var wap = $('#output #left_slides_bar').length ? false : true;
        if(!wap) {
            $('#output').css({'padding': '40px 20px'});
            // 复制slide到左侧栏
            $("#all_slides_warpper .slide").clone(true).appendTo("#left_slides_bar");
            // 每个slide加个父级元素——scale消除空白区域，显示所有slide
            $("#output .slide").wrap('<div class="slide-box"></div>').show();
            // 主区域隐藏非第一个slide-box
            $('#all_slides_warpper .slide-box:not(:first)').hide();
            // 左侧栏添加播放图标
            $("#left_slides_bar .slide-box").append('<div class="ri-play-circle-fill slide-play-btn"></div>');
            // 左侧栏显示
            $("#left_slides_bar").show();

            // 左侧列表尺寸，以固定宽度为基准
            utils.initPageSize(pageRatio(wap, false), false);
        }else{
            // $('#output').css({'padding': '40px 10px 20px'});
            // $('#all_slides_warpper .slide div.content').css({width: 'auto'});
            $("#output .slide").wrap('<div class="slide-box"></div>');
        }
        // 4.初始化主区域子节点尺寸
        utils.initPageSize(pageRatio(wap));

        // // 5.加载图标
        // $('body').addClass('page-loaded');

        // 选中的边框
        $('#left_slides_bar .slide-box:eq(0)').addClass('total-page-point');

        // 结束
        if(tipsLoading){tipsLoading.close();tipsLoading = false;}
        $('body.weboffice-page').addClass('loaded');
        page.wbAlert();
    });
    // 页面尺寸随窗口变化
    var setPgHeight = function(wap){
        var height = $(window).height();
        $('#output').css({
            height: (height - 16 - 40 * 2) + 'px', 
            padding: !wap ? '40px 20px' : '40px 10px',
            width: 'auto'
        });
    }
    $(window).resize(function(){
        var wap = isWap();
        setPgHeight(wap);
        // 这里可以改成阶段性变化，而不是实时变
        var ratio = pageRatio(wap);
        utils.changePageSize(ratio, 'all_slides_warpper');
    });
    setPgHeight(isWap());


    // slide显示播放图标
    $("body").on("mouseenter", "#left_slides_bar .slide-box", function() {
        $(this).find('.slide-play-btn').show();
    });
    $("body").on("mouseleave", "#left_slides_bar .slide-box", function() {
        $(this).find('.slide-play-btn').hide();
    });
    // slide播放——全屏
    $('body').on('click', '#left_slides_bar .slide-box .slide-play-btn', function(event){
        event.preventDefault();
        $('#slides-full-screen').trigger('click');
    })
    // slide点击选中
    $("body").on("click", "#left_slides_bar .slide", function() {
        var index = $('#left_slides_bar .slide').index(this);
        utils.gotoSlide(index + 1);
    });
    // 滚动翻页
    // $('body').on("mousewheel DOMMouseScroll", ':not(#left_slides_bar)', function (e) {
    $('body').on("mousewheel DOMMouseScroll", function (e) {
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                    (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));  // firefox
        var type = delta > 0 ? 'sub' : 'add';
        utils.nextSlide(type);
    });
    // 左右点击翻页
    $('body').on("click", "#output>.btn", function() {
        var type = $(this).hasClass('slide-left-icon') ? 'sub' : 'add';
        utils.nextSlide(type);
    });
    // 快捷键翻页
    $('body').on('keydown', function(event){
        event.preventDefault();
        var key = event.keyCode;
        if($.inArray(key, [37,38,39,40]) == -1) return;
        var type = (key == 37 || key == 38) ? 'sub' : 'add';
        utils.nextSlide(type);
    });

    // 全屏
    var isFullScreen = false;
    $(document).on('fullscreenchange', function(){
        isFullScreen = !isFullScreen;
        if(isFullScreen === true) {
            $("#left_slides_bar").hide();
            $('#all_slides_warpper').removeClass('all-slides-warpper').addClass('all-slides-warpper-fscreen');
            $('#all_slides_warpper .slide').addClass('main-slide-fscreen');
            $('#output').addClass('output-fscreen');

            // resize先执行，导致获取的尺寸不对，这里再执行一次
            var ratio = pageRatio(false);
            utils.changePageSize(ratio, 'all_slides_warpper');
        }else{
            $("#left_slides_bar").show();
            $('#all_slides_warpper').addClass('all-slides-warpper').removeClass('all-slides-warpper-fscreen');
            $('#all_slides_warpper .slide').removeClass('main-slide-fscreen');
            $('#output').removeClass('output-fscreen');
        }
    });
});

var utils = {
    functionHook: function(target,method,beforeFunc,afterFunc){
        var context 	= target || window;
        var _theMethod 	= context[method];
        if(!context || !_theMethod) return console.error('method error!',method);
    
        context[method] = function(){
            var args = arguments;
            if(beforeFunc){
                var newArgs = beforeFunc.apply(this,args);
                if( newArgs === false ) return;
                args = newArgs === undefined ? args : newArgs; 	//没有返回值则使用结果;
            }
            var result = _theMethod.apply(this,args);
            if( afterFunc ){
                var newResult = afterFunc.apply(this,[result,args]);
                result = newResult === undefined ? result : newResult;//没有返回值则使用结果
            }
            return result;
        }
    },

    // 初始化主页面尺寸
    initPageSize: function(ratio){
        var divId = arguments[1] === undefined ? 'all_slides_warpper' : 'left_slides_bar';
        return this.changePageSize(ratio, divId);
    },
    // 变更主页面尺寸
    changePageSize: function(ratio, divId){
        $('#'+divId+' .slide').css({'-webkit-transform': 'scale('+ratio+')'});
        var width = $('#'+divId+' .slide').width() * ratio + 'px';
        var height = $('#'+divId+' .slide').height() * ratio + 'px';    // 使用scale后获取到的是原始尺寸，因此需要*ratio
        $('#'+divId+' .slide-box').css({'width': width, 'height': height});
    },

    // 前后翻页
    nextSlide: function(type){
        if(!$('#left_slides_bar').length) return;
        var index = parseInt($('.slide-page-toolbar .page-cur-num').text());
        var total = parseInt($('.slide-page-toolbar .page-total-num').text());
        if((index == 1 && type == 'sub') || (index == total && type == 'add')) return;
        var page = type == 'sub' ? index - 1 : index + 1;
        this.gotoSlide(page);
    },
    // 页码变更
    gotoSlide: function(page){
        // 0.设置页码显示
        $('.slide-page-toolbar .page-cur-num').html(page);
        // 1.主区域显示
        $('#all_slides_warpper .slide-box').hide();
        $('#all_slides_warpper .slide-box').eq(page - 1).show();
        // 2.左右翻页图标显示
        this.setLtRtIcon();
        // 3.左侧选中样式变更
        $('#left_slides_bar .slide-box').removeClass('total-page-point');
        $('#left_slides_bar .slide-box').eq(page - 1).addClass('total-page-point');
        // 左侧选中项滚动到当前区域，滚轮停止后计算
        setTimeout(function(){
            if (!$(".total-page-point").length) return;
            var top = $(".total-page-point").offset().top;
            var height = $(".total-page-point").height();
            // 选中区在可视范围内时不滚动。margin+padding=8+10
            if(top >= 18 && (top + height - 8) < $("#left_slides_bar").height()) {
                return false;
            }
            // 滚动高度为选中区前所有兄弟元素的(高+mb)之和，理论上应该再+18
            var prevTop = (height + 10) * (page - 1);
            $("#left_slides_bar").scrollTop(prevTop + 10);
        }, 200);
    },
    // 左右翻页图标显示和隐藏
    setLtRtIcon: function(){
        var index = parseInt($('.slide-page-toolbar .page-cur-num').text());
        var total = parseInt($('.slide-page-toolbar .page-total-num').text());
        var funcLt = index == 1 ? 'hide' : 'show';
        var funcRt = index == total ? 'hide' : 'show';
        $('.slide-left-icon.btn')[funcLt]();
        $('.slide-right-icon.btn')[funcRt]();
    }
}