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

var $ = require('yoho-jquery'),
    ellipsis = require('yoho-mlellipsis'),
    lazyLoad = require('yoho-jquery-lazyload'),
    Hammer = require('yoho-hammer');

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

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

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

require('../common');
require('../plugin/wx-share')();
require('./detail-dynamic');

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

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

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

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

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

    /*
     myScroll = new IScroll('#wrapper', {
     probeType: 3,
     mouseWheel: true,
     click: true
     });
     document.addEventListener('touchmove', function(e) {
     e.preventDefault();
     }, false);

     if (!hasCollocationBlock) {
     myScroll.on('scroll', function() {
     $scroller.trigger('scroll');
     });
     return;
     }

     */


    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() {
        var sTop = -this.y;
        var 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');
            }
        }
    });
}

/*
 // window onload 后重新refresh iscroll
 window.onload = function() {
 myScroll && myScroll.refresh();
 };

 // 图片加载完成之后重新 refresh iscroll
 $('img').on('load', function() {
 myScroll && myScroll.refresh();
 });
 */

// 微信导航
$('.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();
        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) {
    var 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('');
    }
}

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

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

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

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

    ellipsis.init();

    if ($('.good-detail-text .name').length > 0) {
        $('.good-detail-text .name').each(function() {
            $this = $(this);
            $title = $this.find('a');

            $title[0].mlellipsis(2);
        });
    }
    lazyLoad($('.lazy'));

    // title mlellipsis
    $('.info-list .title, .one-good .reco-name').each(function() {
        this.mlellipsis(2);
    });

    // 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(index) {
        var appClose = window.cookie('_float-layer-app-close') || '0';

        // window.setCookie('_float-layer-app-close', 1);

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

        } else if (parseInt(appClose) === 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]) {
        var floatLayerBtnHammer = new Hammer($('#float-layer-btn')[0]);

        floatLayerBtnHammer.on('tap', function(e) {
            window.location = 'http://www.yohoshow.com/about/index/yohobuyqr';
            e.srcEvent.stopPropagation();
        });

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

    initIscroll();
}());