info-index.page.js 9.25 KB
/**
 * 逛详情页
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/10/13
 */
require('scss/guang/info-index.page.scss');

let $ = require('yoho-jquery'),
    lazyLoad = require('yoho-jquery-lazyload');

let $authorIntro = $('.author .intro');

// collocation block variable
let $fixedThumbContainer = $(''),
    $coBlock,
    $thumbContainer = $('.thumb-container');

let $sideNav = $('.side-nav'),
    $guangPage = $('.guang-detail-page'),
    $overlay = $('.overlay'),
    $subNav = $('.sub-nav');

let $relatedRecoMore = $('.related-reco-more'); // 展开更多

let time = 0;

require('js/common');
require('js/plugin/wx-share')();
require('./detail-dynamic');
require('./detail/guang-cart');
require('./detail/guang-comments');

let CollactionBlock = require('./collocation-block');

$('#wrapper').css({
    'overflow-y': 'scroll'
});

// 初始化iscroll
function initIscroll() {
    let $yohoHeader = $('.yoho-header');
    let hH = 0,
        winH, tcH, cbH, cbTop, fixedThumbDom;

    if (CollactionBlock.exists()) {
        new CollactionBlock();
    }

    // 考虑通用头部的影响:对offset().top以及winH做对应偏移
    if ($yohoHeader.length > 0) {
        hH = $yohoHeader.outerHeight();
    }

    winH = $(window).height() - hH;
    fixedThumbDom = $fixedThumbContainer[0];

    tcH = $thumbContainer ? $thumbContainer.outerHeight() : 0;
    if ($coBlock) {
        cbH = $coBlock.outerHeight();
        cbTop = $coBlock.offset().top - hH;
    }

    $(window).on('scroll', function() {
        let sTop = -this.y;
        let classList = fixedThumbDom && fixedThumbDom.className;

        if (sTop <= cbTop - winH + tcH) {
            if (classList.indexOf('fixed-bottom') === -1) {
                $fixedThumbContainer
                    .addClass('fixed-bottom')
                    .removeClass('hide');
            }
        } else if (sTop <= cbTop) {
            if (classList.indexOf('hide') === -1) {
                $fixedThumbContainer
                    .addClass('hide')
                    .removeClass('fixed-bottom fixed-top');
            }
        } else if (sTop <= cbTop + cbH - tcH) {
            if (classList.indexOf('fixed-top') === -1) {
                $fixedThumbContainer
                    .addClass('fixed-top')
                    .removeClass('hide absolute')
                    .css('top', '');
            }
        } else if (sTop <= cbTop + cbH) {
            if (classList.indexOf('absolute') === -1) {
                $fixedThumbContainer
                    .addClass('absolute')
                    .removeClass('fixed-top hide');
            }
            fixedThumbDom.style.top = cbTop + hH + cbH - tcH - sTop + 'px';
        } else if (sTop > cbTop + cbH) {
            if (classList.indexOf('hide') === -1) {
                $fixedThumbContainer
                    .addClass('hide')
                    .removeClass('absolute');
            }
        }
    });

    // 评论滚动加载
    // setTimeout(function() {
    //     let afterScroll = document.body.scrollTop;

    //     if (afterScroll - beforeScroll > 0) {
    //         window.requestAnimationFrame(scrollHandler);
    //         beforeScroll = afterScroll;
    //     } else {
    //         return false;
    //     }
    // }, 5);
}

/**
 * 相关商品点击事件
 */
$relatedRecoMore.on('touchstart', function(e) {
    let $relatedRecoBlock = $(e.currentTarget).parent().find('.related-reco-block');

    if ($relatedRecoBlock.hasClass('related-reco-hide')) {
        $relatedRecoBlock.removeClass('related-reco-hide');
        $(e.currentTarget).remove();
    } else {
        $relatedRecoBlock.addClass('related-reco-hide');
    }
    return false;
});

// 微信导航
$('.nav-btn').on('touchstart', function() {
    $sideNav.css('pointer-events', 'none');
    $guangPage.addClass('menu-open');
    $overlay.show().css({
        opacity: 0.3,
        height: $('#scroller').height()
    });

    $sideNav.addClass('on');

    setTimeout(function() {
        $sideNav.css('pointer-events', 'auto');
    }, 400);

    return false;
});

// 点击一级导航,弹出二级导航
$sideNav.on('touchend', 'li', function(e) {
    if ($(this).find('.sub-nav').size() > 0) {
        $('.sub-nav').removeClass('show');
        $(this).find('.sub-nav').addClass('show');
        $(this).find('.highlight').removeClass('highlight');
    }

    if (e.target.pathname === location.pathname) {
        hideSideBar(); // eslint-disable-line
        return false;
    }
});

// 返回一级导航,收起二级导航
$subNav.each(function() {
    $(this).find('li').eq(0).on('click', function() {
        $('.sub-nav').removeClass('show');
        return false;
    });
}).on('touchstart', function(e) {
    if (e.currentTarget !== e.target) {
        $subNav.find('li').removeClass('current');
    }
});

// 侧边栏点击背景色变化
function highlight($elem) {
    $elem.find('li').on('touchstart', function() {
        $elem.find('.highlight').removeClass('highlight');
        $(this).addClass('highlight');
    }).on('touchend touchcancel', function() {
        $(this).removeClass('highlight');
    });
}
highlight($sideNav);
highlight($subNav);

function hideSideBar() {
    if ($guangPage.hasClass('menu-open')) {
        $guangPage.removeClass('menu-open');
        $overlay.hide();
        $('.sub-nav').removeClass('show');
        $sideNav.removeClass('on');
    }
}

$overlay.on('touchstart', function() {
    hideSideBar();
    return false;
});

function setCookie(name, value, options) {
    let expires = '',
        path,
        domain,
        secure,
        date;


    if (typeof value !== 'undefined') {
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }

        if (options.expires &&
            (typeof options.expires === 'number' || options.expires.toUTCString)) {
            if (typeof options.expires === 'number') {
                date = new Date();

                date.setTime(Date.parse((new Date()).toLocaleDateString()) + 86400 * 1000);

            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toGMTString();
        }
        path = options.path ? '; path=' + options.path : '';
        domain = options.domain ? '; domain=' + options.domain : '';
        secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    }
}

// 长按二维码埋点
$('.wei-share').on('touchstart', function() {
    time = setTimeout(function() {
        if (window._yas && window._yas.sendCustomInfo) {

            window._yas.sendCustomInfo({
                op: 'YB_PRESS_QRCODE',
                param: JSON.stringify({
                    C_ID: window._ChannelVary[window.cookie('_Channel')],
                    PAGE_URL: window.location.href
                })
            }, true);
        }
    }, 500);
});

$('.wei-share').on('touchend', function(e) {
    e.stopPropagation();
    clearTimeout(time);
});

// 初始化页面,包括是否使用iscorll初始化页面
// 接口暴露在HTML中,使用压缩名
(function() {
    let isweixin = navigator.userAgent.indexOf('MicroMessenger') ? true : false;

    // pagecache 前端判断是否显示头
    let param = location.search;
    let isHeader = navigator.userAgent.indexOf('MicroMessenger') > -1 ||
        param.indexOf('app_version') > -1 || param.indexOf('appVersion') > -1;

    isHeader && $('#yoho-header').remove();

    $('.main-wrap').css({
        position: 'static'
    });

    lazyLoad($('.lazy'));

    // offset.left约等于marginLeft的值则表示介绍被换行,则清除intro的paddingTop让其更靠近头像和作者名
    if ($authorIntro.offset() && (parseInt($authorIntro.offset().left, 10) ===
        parseInt($authorIntro.css('margin-left'), 10))) {
        $authorIntro.css('padding-top', 0);
    }

    if (isweixin) {
        $overlay.css('position', 'absolute');
    }

    $('#float-layer-close').on('touchend', function() {
        let appClose = window.cookie('_float-layer-app-close') || '0';

        if (parseInt(appClose, 10) === 0) {
            setCookie('_float-layer-app-close', 1, {expires: -1});

        } else if (parseInt(appClose, 10) === 1) {
            setCookie('_float-layer-app-close', 2, {expires: -1});
        }

        $('#float-layer-app').hide();
        $('.down-bottom').hide();

        return false;
    });

    if ($('#float-layer-btn') && $('#float-layer-btn')[0]) {

        $('#float-layer-btn').on('touchstart', function(e) {
            if (window._yas && window._yas.sendCustomInfo) {
                window._yas.sendCustomInfo({
                    op: 'YB_DOWNLOAD_C',
                    param: JSON.stringify({
                        C_ID: window._ChannelVary[window.cookie('_Channel')],
                        TO_URL: 'http://www.yohoshow.com/about/index/yohobuyqr'
                    })
                }, true);
            }

            window.location = 'http://www.yohoshow.com/about/index/yohobuyqr';
            e.srcEvent.stopPropagation();
        });

        if (typeof window.cookie === 'function' && parseInt(window.cookie('_float-layer-app-close'), 10) !== 2) {
            $('.down-bottom').show();
        } else {
            $('.down-bottom').hide();
        }
    }

    initIscroll();
}());