Merge branch 'feature/guang-detail-optim' into release/wap-optim4

# Conflicts:
#	public/js/common.js
#	public/js/guang/info.js

@@ -41,12 +41,22 @@ const _pageArticleContent = (articleContent, isApp, gender) => {
                     joinContentFunc(++i, len);
                 } else if (art.singleImage && art.singleImage.data && art.singleImage.data.length) { // 单张图
                     build.bigImage = helpers.image(art.singleImage.data[0].src, 640, 640);
+
+                    // 前三张图片不使用懒加载，下同
+                    if (i <= 3) {
+                        build.noLazy = true;
+                    }
+
                     contents.push(build);
                     joinContentFunc(++i, len);
 
                 } else if (art.smallPic && art.smallPic.data && art.smallPic.data.length > 1) {
                     let imgs = art.smallPic.data;
 
+                    if (i <= 3) {
+                        build.noLazy = true;
+                    }
+
                     build.smallImage = [{
                         src: helpers.image(imgs[0].src, 315, 420)
                     }, {

@@ -5,7 +5,7 @@
                 {{# author}}
                     <div class="author" data-id={{id}}>
                         <a class="clearfix" href={{url}}>
-                            <img class="avatar" src={{avatar}}>
+                            <img class="avatar" src={{image2 avatar mode=2 q=60}}>
                             <span class="name">{{name}}</span>
                             <span class="intro">{{intro}}</span>
                         </a>
@@ -27,15 +27,25 @@
 
                                 {{#if bigImage}}
                                     <div class="post-block big-img-block">
-                                        <img class="lazy" data-original={{bigImage}}>
+                                        {{#if noLazy}}
+                                            <img src={{image2 bigImage q=60}}>
+                                        {{else}}
+                                            <img class="lazy" data-original={{image2 bigImage q=60}}>
+                                        {{/if}}
                                     </div>
                                 {{/if}}
 
                                 {{#if smallImage}}
                                     <div class="post-block small-img-block clearfix">
+                                    {{#if noLazy}}
+                                        {{# smallImage}}
+                                            <img src={{image2 src q=60}}>
+                                        {{/ smallImage}}
+                                    {{else}}
                                         {{# smallImage}}
-                                            <img class="lazy" data-original={{src}}>
+                                            <img class="lazy" data-original={{image2 src q=60}}>
                                         {{/ smallImage}}
+                                    {{/if}}
                                     </div>
                                 {{/if}}
 
@@ -156,7 +166,7 @@
                                         <img class="lazy {{#if squareThumb}}square{{/if}}" data-original={{thumb}}>
                                         <span class="title">{{title}}</span>
                                         <span class="publish-time">
-                                            <i class="iconfont">&#xe603;</i> 
+                                            <i class="iconfont">&#xe603;</i>
                                             {{publishTime}}
                                         </span>
                                     </a>

+// 超轻量锤子，业务代码不用动，替换掉重量级的 hammer.js
+const $ = require('yoho-jquery');
+
+const ToyHammer = function(elem) {
+    this.elem = elem;
+};
+
+const EVENT_MAPPER = {
+    tap: 'touchstart'
+};
+
+ToyHammer.prototype.on = function(event, fn) {
+    const mappedEvent = EVENT_MAPPER[event];
+
+    if (this.elem && mappedEvent) {
+        $(this.elem).on(mappedEvent, function(e) {
+            fn({
+                srcEvent: e
+            });
+        });
+    }
+};
+
+
+module.exports = ToyHammer;

+var lazyLoad = require('yoho-jquery-lazyload');
+
+/**
+ * 搭配区块
+ *
+ * @constructor
+ */
+function CollocationBlock() {
+    this.elem = $('.collocation-block');
+    this.container = this.elem.children('.thumb-container');
+    this.elem.find('.prod');
+    this.prods = this.elem.find('.prod');
+
+    //this.fixedContainer = $('#wrapper')
+    //    .after(this.container.clone().addClass('fixed-thumb-container fixed-bottom'))
+    //    .next('.thumb-container');
+
+    //lazyLoad(this.fixedContainer.find('.lazy'));
+
+    this.container.delegate('.thumb', 'touchend', this._touchHandler.bind(this));
+
+    // this.fixedContainer.delegate('.thumb', 'touchend', this._touchHandler.bind(this));
+
+    this.thumbs = this.container.find('li');
+
+    // this.fixedThumbs = this.fixedContainer.find('li');
+
+    // 初始化箭头位置
+    this._updateCollocationArrowPos(this.thumbs.filter('.focus'));
+
+    var scrollFn = () => {
+        var pos = this.container.offset(),
+            posFixed = this.fixedContainer.offset();
+        var visible = false;
+
+
+        if (posFixed.top >= pos.top) {
+            visible = false;
+        } else {
+            visible = true;
+        }
+
+        if (posFixed.top + this.fixedContainer.height() > $('ul.brand-list').offset().top) {
+            visible = false;
+        } else if (pos.top < $(window).scrollTop()) {
+            visible = true;
+            this.fixedContainer.removeClass('fixed-bottom').addClass('fixed-top');
+        } else {
+            this.fixedContainer.removeClass('fixed-top').addClass('fixed-bottom');
+        }
+
+        this.fixedContainer.css({
+            visibility: visible ? 'visible' : 'hidden'
+        });
+    };
+
+    //$(document).on('scroll', scrollFn);
+    //$(document).on('touchmove', scrollFn);
+
+}
+
+CollocationBlock.exists = function() {
+    return $('.collocation-block').size() > 0;
+};
+
+$.extend(CollocationBlock.prototype, {
+    /**
+     * 计算搭配的箭头的位置
+     * @param current 当前focus的搭配项
+     */
+    _updateCollocationArrowPos: function(current) {
+        var left = current.offset().left,
+            bgPos = -$(window).width() + left + (this.thumbs.width() / 2) + 'px';
+
+        this.container.css({
+            backgroundPosition: bgPos + ' bottom'
+        });
+
+        /*
+         this.fixedContainer.css({
+         backgroundPosition: bgPos + ' bottom'
+         });
+         */
+    },
+
+    /**
+     * 搭配thumb的touch事件句柄
+     *
+     * @param e
+     * @private
+     */
+    _touchHandler: function(e) {
+        var current = $(e.currentTarget),
+            index = current.index();
+
+        if (current.hasClass('focus')) {
+            return;
+        }
+
+        this.thumbs.removeClass('focus');
+
+        // this.fixedThumbs.removeClass('focus');
+
+        current.addClass('focus');
+
+        // 更新箭头位置
+        this._updateCollocationArrowPos(current);
+
+        this.prods.not('.hide').addClass('hide');
+        this.curProds = this.prods.eq(index);
+        this.curProds.removeClass('hide');
+
+        $('body').animate({
+            scrollTop: this.elem.offset().top
+        }, 400);
+    }
+});
+
+
+module.exports = CollocationBlock;

@@ -5,7 +5,7 @@
  */
 
 var $ = require('yoho-jquery'),
-    Hammer = require('yoho-hammer'),
+    Hammer = require('../common/toy-hammer'),
     ellipsis = require('yoho-mlellipsis'),
     lazyLoad = require('yoho-jquery-lazyload'),
     Swiper = require('yoho-swiper2');

@@ -7,192 +7,124 @@ require('guang/info-index.page.css');
 
 var $ = require('yoho-jquery'),
     ellipsis = require('yoho-mlellipsis'),
-    lazyLoad = require('yoho-jquery-lazyload'),
-    IScroll = require('yoho-iscroll/build/iscroll-probe');
+    lazyLoad = require('yoho-jquery-lazyload');
 
 var $authorIntro = $('.author .intro');
 
-var pageInIscroll = false;
-
-var hasCollocationBlock = $('.collocation-block').length > 0 ? true : false;
-
 // collocation block variable
-var thumbWidth = 0,
-    $fixedThumbContainer = $(''),
-    $coBlock, $thumbContainer, $thumbs, $prods,
-    scrollToEl,
-    myScroll,
-    winW = $(window).width();
-
-scrollToEl = document.querySelector('#wrapper .collocation-block');
-
+var $fixedThumbContainer = $(''),
+    $coBlock,
+    $thumbContainer = $('.thumb-container');
 
 require('../common');
 require('../plugin/wx-share')();
 require('./detail-dynamic');
 
-/**
- * 计算搭配的箭头的位置
- * @param $curPos 当前focus的搭配项
- */
-function posCollocationArrow($curCo) {
-    var left = $curCo.offset().left,
-        bgPos = -winW + left + (thumbWidth / 2) + 'px';
-
-    $thumbContainer.css({
-        backgroundPosition: bgPos + ' bottom'
-    });
-
-    if (pageInIscroll) {
-        $fixedThumbContainer.css({
-            backgroundPosition: bgPos + ' bottom'
-        });
-    }
-}
-
-// 搭配thumb的touch事件句柄
-function thumbTouchEvt(e) {
-    var $curCo = $(e.currentTarget),
-        index = $curCo.index(),
-        $brother, $brotherCo,
-        $curProds;
-
-    if ($curCo.hasClass('focus')) {
-        return;
-    }
+var CollactionBlock = require('./collocation-block');
 
-    $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');
-
-    // 定位arrow
-    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();
-}
+$('#wrapper').css({
+    'overflow-y': 'scroll'
+});
 
 // 初始化iscroll
 function initIscroll() {
-    var $scroller = $('#scroller'),
-        $yohoHeader = $('.yoho-header');
-
+    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
-    });
+    /*
+     myScroll = new IScroll('#wrapper', {
+     probeType: 3,
+     mouseWheel: true,
+     click: true
+     });
+     document.addEventListener('touchmove', function(e) {
+     e.preventDefault();
+     }, false);
 
-    document.addEventListener('touchmove', function(e) {
-        e.preventDefault();
-    }, false);
+     if (!hasCollocationBlock) {
+     myScroll.on('scroll', function() {
+     $scroller.trigger('scroll');
+     });
+     return;
+     }
+
+     */
 
-    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;
+    tcH = $thumbContainer ? $thumbContainer.outerHeight() : 0;
+    if ($coBlock) {
+        cbH = $coBlock.outerHeight();
+        cbTop = $coBlock.offset().top - hH;
+    }
 
-    myScroll.on('scroll', function() {
+    $(window).on('scroll', function() {
         var sTop = -this.y;
-        var classList = fixedThumbDom.className;
+        var classList = fixedThumbDom && fixedThumbDom.className;
 
         if (sTop <= cbTop - winH + tcH) {
             if (classList.indexOf('fixed-bottom') === -1) {
                 $fixedThumbContainer
-                        .addClass('fixed-bottom')
-                        .removeClass('hide');
+                    .addClass('fixed-bottom')
+                    .removeClass('hide');
             }
         } else if (sTop <= cbTop) {
             if (classList.indexOf('hide') === -1) {
                 $fixedThumbContainer
-                        .addClass('hide')
-                        .removeClass('fixed-bottom fixed-top');
+                    .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', '');
+                    .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');
+                    .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');
+                    .addClass('hide')
+                    .removeClass('absolute');
             }
         }
-        $scroller.trigger('scroll');
     });
 }
 
-// window onload 后重新refresh iscroll
-window.onload = function() {
-    myScroll && myScroll.refresh();
-};
+/*
+ // window onload 后重新refresh iscroll
+ window.onload = function() {
+ myScroll && myScroll.refresh();
+ };
 
-// 图片加载完成之后重新 refresh iscroll
-$('img').on('load', function() {
-    myScroll && myScroll.refresh();
-});
+ // 图片加载完成之后重新 refresh iscroll
+ $('img').on('load', function() {
+ myScroll && myScroll.refresh();
+ });
+ */
 
 // 初始化页面,包括是否使用iscorll初始化页面
 // 接口暴露在HTML中，使用压缩名
 (function() {
-    var useIscroll;
-    var isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;
     var $this, $title;
 
     // pagecache 前端判断是否显示头
@@ -201,17 +133,10 @@ $('img').on('load', function() {
 
     isHeader && $('#yoho-header').remove();
 
-    if ($('.guang-detail-page').hasClass('guang-detail')) {
-        useIscroll = true;
-    } else if ($('.guang-detail-page').hasClass('guang-ezine')) {
-        useIscroll = false;
-    }
     $('.main-wrap').css({
         position: 'static'
     });
 
-    pageInIscroll = isIphone && useIscroll;
-
     ellipsis.init();
 
     if ($('.good-detail-text .name').length > 0) {
@@ -231,50 +156,10 @@ $('img').on('load', function() {
 
     // offset.left约等于marginLeft的值则表示介绍被换行，则清除intro的paddingTop让其更靠近头像和作者名
     if ($authorIntro.offset() && (parseInt($authorIntro.offset().left, 10) ===
-            parseInt($authorIntro.css('margin-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');
-        }
-    }
-
-    // 有搭配模块，iphone使用iscroll初始化滚动并有固定的搭配栏，其他的没有
-    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');
-
-            // load img of fixed thumb container
-            lazyLoad($fixedThumbContainer.find('.lazy'), {
-                event: 'sporty'
-            });
-        }
-
-        // Init Arrow Position
-        posCollocationArrow($thumbs.filter('.focus'));
-
-        $thumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
-
-        if (pageInIscroll) {
-            $fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
-
-        }
-    }
-
-    if (pageInIscroll) {
-        initIscroll();
-    }
+    initIscroll();
 }());
+

@@ -5,6 +5,7 @@
  */
 
 var $ = require('yoho-jquery'),
+    Hammer = require('../common/toy-hammer'),
     ellipsis = require('yoho-mlellipsis'),
     lazyLoad = require('yoho-jquery-lazyload'),
     Swiper = require('yoho-swiper2');

@@ -5,7 +5,7 @@
  */
 
 var $ = require('yoho-jquery'),
-    Hammer = require('yoho-hammer'),
+    Hammer = require('../common/toy-hammer'),
     ellipsis = require('yoho-mlellipsis'),
     lazyLoad = require('yoho-jquery-lazyload');