Blame view

public/js/guang/info-index.page.js 7.68 KB
陈峰 authored
1 2 3 4 5 6 7
/**
 * 逛详情页
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/10/13
 */

var $ = require('yoho-jquery'),
陈峰 authored
8 9 10
    ellipsis = require('yoho-mlellipsis'),
    lazyLoad = require('yoho-jquery-lazyload'),
    IScroll = require('yoho-iscroll/build/iscroll-probe');
陈峰 authored
11 12 13 14 15 16 17

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

var pageInIscroll = false;

var hasCollocationBlock = $('.collocation-block').length > 0 ? true : false;
陈峰 authored
18
// collocation block variable
陈峰 authored
19
var thumbWidth = 0,
陈峰 authored
20 21 22 23 24
    $fixedThumbContainer = $(''),
    $coBlock, $thumbContainer, $thumbs, $prods,
    scrollToEl,
    myScroll,
    winW = $(window).width();
陈峰 authored
25
陈峰 authored
26
scrollToEl = document.querySelector('#wrapper .collocation-block');
陈峰 authored
27 28

29
require('../common');
陈峰 authored
30
require('../plugin/wx-share')();
zhangxiaoru authored
31
require('./detail-dynamic');
陈峰 authored
32 33 34 35 36 37 38

/**
 * 计算搭配的箭头的位置
 * @param $curPos 当前focus的搭配项
 */
function posCollocationArrow($curCo) {
    var left = $curCo.offset().left,
陈峰 authored
39
        bgPos = -winW + left + (thumbWidth / 2) + 'px';
陈峰 authored
40 41 42 43 44 45 46 47 48 49 50 51

    $thumbContainer.css({
        backgroundPosition: bgPos + ' bottom'
    });

    if (pageInIscroll) {
        $fixedThumbContainer.css({
            backgroundPosition: bgPos + ' bottom'
        });
    }
}
陈峰 authored
52
// 搭配thumb的touch事件句柄
陈峰 authored
53 54
function thumbTouchEvt(e) {
    var $curCo = $(e.currentTarget),
陈峰 authored
55 56 57
        index = $curCo.index(),
        $brother, $brotherCo,
        $curProds;
陈峰 authored
58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

    if ($curCo.hasClass('focus')) {
        return;
    }

    $thumbs.filter('.focus').removeClass('focus');

    if (pageInIscroll) {
        if ($curCo.closest('.fixed-thumb-container').length > 0) {
            $brother = $thumbContainer;
        } else {
            $brother = $fixedThumbContainer;
        }

        $brotherCo = $brother.find('.thumb').eq(index);
        $fixedThumbContainer.find('.thumb.focus').removeClass('focus');
        $brotherCo.addClass('focus');
    }

    $curCo.addClass('focus');
陈峰 authored
79
    // 定位arrow
陈峰 authored
80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
    posCollocationArrow($curCo);

    $prods.not('.hide').addClass('hide');
    $curProds = $prods.eq(index);
    $curProds.removeClass('hide');

    //
    lazyLoad($curProds.find('.lazy'));

    if (pageInIscroll) {
        if (myScroll) {
            myScroll.scrollToElement(scrollToEl, 400);
        }
    } else {
        $('body').animate({
            scrollTop: $coBlock.offset().top
        }, 400);
    }

    myScroll && myScroll.refresh();
}

// 初始化iscroll
function initIscroll() {
    var $scroller = $('#scroller'),
        $yohoHeader = $('.yoho-header');

    var hH = 0,
        winH, tcH, cbH, cbTop, fixedThumbDom;
陈峰 authored
110
    // 考虑通用头部的影响:对offset().top以及winH做对应偏移
陈峰 authored
111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
    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.outerHeight();
    cbH = $coBlock.outerHeight();
    cbTop = $coBlock.offset().top - hH;

    myScroll.on('scroll', function() {
        var sTop = -this.y;
        var classList = 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');
            }
        }
        $scroller.trigger('scroll');
    });
}
陈峰 authored
180
// window onload 后重新refresh iscroll
陈峰 authored
181 182 183 184 185 186 187 188 189
window.onload = function() {
    myScroll && myScroll.refresh();
};

// 图片加载完成之后重新 refresh iscroll
$('img').on('load', function() {
    myScroll && myScroll.refresh();
});
陈峰 authored
190 191
// 初始化页面,包括是否使用iscorll初始化页面
// 接口暴露在HTML中,使用压缩名
192 193
(function() {
    var useIscroll;
陈峰 authored
194 195 196
    var isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;
    var $this, $title;
zzzzzzz authored
197 198 199
    // pagecache 前端判断是否显示头
    var param = location.search;
    var isHeader = navigator.userAgent.indexOf('MicroMessenger') > -1 || param.indexOf('app_version') > -1 || param.indexOf('appVersion') > -1;
zhangxiaoru authored
200
zzzzzzz authored
201 202
    isHeader && $('#yoho-header').remove();
203 204
    if ($('.guang-detail-page').hasClass('guang-detail')) {
        useIscroll = true;
zhangxiaoru authored
205
    } else if ($('.guang-detail-page').hasClass('guang-ezine')) {
206 207 208 209
        useIscroll = false;
    }
    $('.main-wrap').css({
        position: 'static'
zhangxiaoru authored
210
    });
211
陈峰 authored
212 213 214 215 216 217 218 219 220 221 222 223 224 225
    pageInIscroll = isIphone && useIscroll;

    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'));
陈峰 authored
226
    // title mlellipsis
陈峰 authored
227 228 229 230
    $('.info-list .title, .one-good .reco-name').each(function() {
        this.mlellipsis(2);
    });
陈峰 authored
231
    // offset.left约等于marginLeft的值则表示介绍被换行,则清除intro的paddingTop让其更靠近头像和作者名
陈峰 authored
232 233 234 235 236 237 238 239 240 241 242 243 244
    if ($authorIntro.offset() && (parseInt($authorIntro.offset().left, 10) ===
            parseInt($authorIntro.css('margin-left'), 10))) {
        $authorIntro.css('padding-top', 0);
    }

    if (pageInIscroll) {
        if ($('.yoho-header').length > 0) {
            $('#wrapper').addClass('ios has-head');
        } else {
            $('#wrapper').addClass('ios');
        }
    }
陈峰 authored
245
    // 有搭配模块,iphone使用iscroll初始化滚动并有固定的搭配栏,其他的没有
陈峰 authored
246 247 248 249 250 251 252 253 254 255 256 257 258
    if (hasCollocationBlock) {
        $coBlock = $('.collocation-block');
        $thumbContainer = $coBlock.children('.thumb-container');
        $thumbs = $thumbContainer.find('li');
        $prods = $coBlock.find('.prod');

        thumbWidth = $thumbs.width();

        if (pageInIscroll) {
            $fixedThumbContainer = $('#wrapper')
                .after($thumbContainer.clone().addClass('fixed-thumb-container fixed-bottom'))
                .next('.thumb-container');
陈峰 authored
259
            // load img of fixed thumb container
陈峰 authored
260 261 262 263 264
            lazyLoad($fixedThumbContainer.find('.lazy'), {
                event: 'sporty'
            });
        }
陈峰 authored
265
        // Init Arrow Position
陈峰 authored
266 267 268 269 270 271 272 273 274 275 276 277 278
        posCollocationArrow($thumbs.filter('.focus'));

        $thumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);

        if (pageInIscroll) {
            $fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);

        }
    }

    if (pageInIscroll) {
        initIscroll();
    }
279
}());