dwweb-h5/2018专题/1806全景图专题-H5/js/until.js

var userDown = false //用户鼠标判断
var bgMove = false

var indexPath = $('body').attr('data-path')

var until = {
    handleModel() {
        // m新增，点击区域隐藏
        $(document).on('click', '.pub-hide-modal', function() {
            $(this).fadeOut()
        })
        $(document).on('click', '.fullscreen-video', function() {
            until.pauseVideo()
            $(this).fadeOut()
            return false
        })
        $(document).on('click', '.full-pic-modal', function() {
            $(this).fadeOut()
        })

        // 点击背景关闭弹窗
        $(document).on('click', '.pub-modal-mask', function() {
            until.pauseVideo()
            $(this).fadeOut()
        })
        $(document).on('click', '.part-screen', function(e) {
            return false
        })
        $(document).on('click', '.close-mask-icon', function() {
            until.pauseVideo()
            $(this).parents('.pub-modal-mask').fadeOut()
        })
        $(document).on('click', '.close-full-video', function() {
            until.pauseVideo()
            $(this).parents('.fullscreen-video').fadeOut()
        })
        $(document).on('click', '.close-icon', function() {
            $(this).parents('.pub-modal').fadeOut()
        })
        $(document).on('click', '.go-back', function() {
            $('.mod-full-picture').fadeOut()
            return false
        })
    },
    // 重力感应
    acceler() {
        if (window.DeviceOrientationEvent) {
            window.addEventListener('deviceorientation', handleOrientation, false);
            function handleOrientation(event) {
                var x = event.beta;  // 范围是[-180, 180]
                var y = event.gamma;  // 范围是[-90, 90]
                
                // 这里我们把x的数值控制在-90到90，因为我们不需要让设备翻转倒过来。
                if (x > 60) {x = 60};
                if (x < -60) {x = -60};
                
                // 设置偏移最大值
                var max = 50;
                var pics = document.getElementsByClassName('bg-move')
                for(let i = 0; i < pics.length; i++) {
                    pics[0].style = 'transform: translate3d('+max*x/120+'px, '+max*y/120+'px, 0px)'
                }
            }
        }
    },
    pauseVideo() {
       // video暂停播放
       var videoDom = document.getElementsByTagName('video')
       for(let i = 0; i < videoDom.length; i++) {
           videoDom[i].pause()
       }
    },
    decr(r) {
        var e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@!~*-_.()'".split("");
        var n = [];
        var a = [];
        r.split("").reverse().forEach(function (r, t) {
            var o = e.indexOf(r);
            if (parseInt((t + 1) % 2) == 1) {
                a.push(o)
            } else {
                var p = parseInt(o - a[(t + 1) / 2 - 1]);
                n.push(e[p])
            }
        });
        var t = n.join("").replace(/@/g, "%");
        return decodeURIComponent(t)
    },
    /**
     * 解密数据
     */
    deCodeArg(target) {
        var srcMap = {};
        if (JSON.parse) {
            srcMap = JSON.parse(until.decr(target));
        } else {
            srcMap = eval('(' + until.decr(target) + ')');
        }
        return srcMap;
    },
    //立即预约
    bookClick() {

        $('.book-icon').click(function() {
            $('.comment-page').fadeIn()
        })
        // 返回
        $('#book-gack-btn').click(function() {
            $('.comment-page').fadeOut()
        })
        
        // 预约成功
        var successModal = `<div class="progress-modal reset-modal book-success-modal" style="display: block;">
                                <p class="tips">预约成功！</p>
                                <div class="btn-wrap">
                                    <div class="btn success-btn book-success-btn">是</div>
                                </div>
                            </div>`
        $('.book-btn-bottom').click(function() {
            $('.comment-page').append(successModal)
        })
        $('.comment-page').on('click', '.book-success-btn', function() {
            $('.book-success-modal').remove()
        })

        // 视频播放
        $('.poster-lake').click(function() {
            $('.book-video').hide()
            $('#book-video-wrapper').show()
            $('#book-lake-video').show()
            document.getElementById('book-lake-video').play()
        })
        $('.poster-taiga').click(function() {
            $('.book-video').hide()
            $('#book-video-wrapper').show()
            $('#book-taiga-video').show()
            document.getElementById('book-taiga-video').play()
        })
        $('.poster-elden').click(function() {
            $('.book-video').hide()
            $('#book-video-wrapper').show()
            $('#book-elden-video').show()
            document.getElementById('book-elden-video').play()
        })
    },
    // 右上角工具栏
    toolbarClick() {
        // 暂停
        $('.toolbar-box').find('.bgm-icon').click(function() {
            var $this = $(this)
            var audio = document.getElementById('bgm-audio')
            if($this.hasClass('pause')) {
                audio.play()
                $this.removeClass('pause')
            } else {
                audio.pause()
                $this.addClass('pause')
            }
        })

        // 评论
        $('.toolbar-box').find('.comment-icon').click(function() {
            window.open('http://hdzt.duowan.com/1806/m_393864686995.html')
        })

        // 重置进度
        $('.toolbar-box').find('.reset-icon').click(function() {
           $('.reset-modal').fadeIn()
        })

        $('.yes-btn').click(function() {
            localStorage.removeItem('hunter_permision')
            localStorage.removeItem('entry')
            window.location.href = indexPath
        })

        $('.no-btn').click(function() {
            $('.reset-modal').fadeOut()
        })
    },
    //确认装备 
    shooting() {
        var huntVideo = document.getElementById('hunt-video')
        var huntVideoB = document.getElementById('hunt-video-b')

        $('.start-equit-btn').click(function() {
            var bag = $('#equit-modal').attr('data-bag')
            $('#equit-video-wrap').find('video').hide()
            if(bag == 'A') {
                $(huntVideo).show()
                huntVideo.play()
            }
            if(bag == 'B') {
                $(huntVideoB).show()
                huntVideoB.play()
            }
            $('#equit-video-wrap').fadeIn()
        })

        huntVideo.addEventListener('ended', function() {
            $('#equit-video-wrap').fadeOut()
        })
        huntVideoB.addEventListener('ended', function() {
            $('#equit-video-wrap').fadeOut()
        })

        // 开始狩猎
        $('.hunt-btn').click(function(){
            $('.fullscreen-modal').hide()
            $('#equit-modal').show()
        })

        $('.nav-item-wrap').click(function() {
            $('.nav-item-wrap').removeClass('active')
            $(this).parents('.container').find('.main').hide()
            $(this).addClass('active')
            var ind = $(this).attr('data-ind')
            var bag = $('#equit-modal').attr('data-bag')

            if(ind == 1 && bag == 'A'){
                $('#weapon-modal').show()
            }
            if(ind == 2 && bag == 'A'){
                $('#fodder-modal').show()
            }
            if(ind == 1 && bag == 'B'){
                $('#weapon-modal-b').show()
            }
            if(ind == 2 && bag == 'B'){
                $('#fodder-modal-b').show()
            }
        })

        $('.bag-a').click(function() {
            var $this = $(this)
            if(!$this.hasClass('bag-a-active')) {
                $this.addClass('bag-a-active')
                $('.bag-b').removeClass('bag-b-active')
                $('#equit-modal').attr('data-bag', 'A')
                $('.nav-item-wrap').eq(0).trigger('click')
            }
        })

        $('.bag-b').click(function() {
            var $this = $(this)
            if(!$this.hasClass('bag-b-active')) {
                $this.addClass('bag-b-active')
                $('.bag-a').removeClass('bag-a-active')
                $('#equit-modal').attr('data-bag', 'B')
                $('.nav-item-wrap').eq(0).trigger('click')
            }
        })
    },
    handleReady(x, y, viewer, view_lgt = 6, view_lat = 0) {
        var lakeFlag = false

        viewer.on('ready', function() {
            $('.loading-bg').hide()
            viewer.rotate({
                x: 0,
                y: 0
            });
            viewer.animate({
                x,
                y
            },2000);

            // 自动旋转
            var container = document.getElementsByClassName('psv-hud-svg-container')[0]
            var $toolbar = $('.toolbar-box')
            var $progress = $('.progress-modal-moblie')
            var $nav = $('.nav')
            var timer = null
            container.addEventListener('touchstart', function() {
                clearTimeout(timer)

                $toolbar.fadeIn()
                $progress.fadeIn()
                $nav.fadeIn()

                timer = setTimeout(() => {

                    $toolbar.fadeOut()
                    $progress.fadeOut()
                    $nav.fadeOut()

                    viewer.startAutorotate()
                }, 5000);
            })
        });

        viewer.on('position-updated', function(position) {
            let lgt = position.longitude
            let lat = position.latitude
            if(lgt > view_lgt && lat < view_lat && !lakeFlag) {
                lakeFlag = true
                $('.progress-modal-moblie').fadeIn()
                $('.suggest-modal').fadeIn()
                $('.nav').fadeIn()

                viewer.startAutorotate()
            }
        })
    },
}

export default until