info-index.page.js 4.42 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');

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

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

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();
 });
 */

// 初始化页面,包括是否使用iscorll初始化页面
// 接口暴露在HTML中,使用压缩名
(function() {
    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);
    }

    initIscroll();
}());