saunter.js 8.86 KB
/**
 * '逛'js
 * @author: yue.liu@yoho.cn
 * @date;2015/3/31
 */

var $ = require('jquery'),
    IScroll = require('iscroll/iscroll-probe'),
    ellipsis = require('mlellipsis');

require('lazyload');

/**
 * 初始化页面加载时的文字截取和图片懒加载功能
 */
exports.init = function() {
    var u = navigator.userAgent,
        hasAt = true, //是否包含article-type-three
        isAndroid,
        atContainer,
        thumbContainer,
        fixedThumbContainer = $(''), //初始化为jq对象
        prodList,
        winH,
        myScroll;
        
    $(function() {
        var $loginTip = $('#login-tip'),
    		winW,
    		tipH,
    		tipW;
            
        var isLogin = $('#is-login').val();
        isLogin = isLogin ? isLogin : 'N';
        
        //article-type-three相关变量
        var isInit = true,
            scrollToEl = document.querySelector('#wrapper .article-type-three'),
            thumbs,
            arrowPosition;
        
        //头部作者信息样式计算(在描述信息过长时换行显示, 去除intro的padding-top) 
        var $linkC = $('#link-container'),
            $avatar = $linkC.find('.avatar'),
            $name = $linkC.find('.name'),
            $intro = $linkC.find('.intro');
        //是否为安卓    
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
            isAndroid = true;
        } else {
            isAndroid = false;
        }
        //
        if ($avatar.outerWidth(true) + $name.outerWidth(true) + $intro.outerWidth(true) > $(window).width()) {
            $intro.css('padding-top', 0);
        }
        
        //相关文章截取文字
        ellipsis.init();
        $('.post-list').find('span').each(function() {
            $(this).mlellipsis(2);
        });
        $('.brand-name').each(function() {
            $(this).mlellipsis(1);
        });
        
        //提示信息位置
    	winH = $(window).height();
    	winW = $(window).width();
    	
    	tipH = $loginTip.height();
    	tipW = $loginTip.width();
    	
    	$loginTip.css({
    		top: (winH - tipH) / 2,
    		left: (winW - tipW) / 2
    	});
            
        //绑定商品信息的收藏和取消收藏事件(相关推荐和搭配模块)
        $('.good-list, .prod-list').delegate('.good-islike', 'touchstart', function(e) {
            var $cur,
                $good,
                id;
            if (isLogin === 'N') {
                $cur = $(e.currentTarget);
                $good = $cur.closest('.good-info');
                id = $good.data('id');
                
                $.ajax({
                    type: 'GET',
                    url: '/favorite/product',
                    data: {
                        st: 1,
                        product_skn: id
                    }
                }).then(function(data) {
                    if (data.code === 200) {
                        $cur.toggleClass('good-like');
                    } else if (data.code === 400) {
                        //提示登录信息
                        $('#login-tip').fadeIn(500, function() {
                            setTimeout(function() {
                               $('#login-tip').fadeOut(500);
                            }, 1000);
                        });
                    }
                });
            }
        }).delegate('.good-islike', 'click', function(e) {
            if (isLogin === 'Y') {
                e.preventDefault();
            }
        });
        
        //article-three效果
        atContainer = $('.article-type-three');
        if (atContainer.length > 0) {
            hasAt= true;
        } else {
            hasAt = false;
        }
        //初始化
        thumbContainer = atContainer.find('.thumb-container');
        prodList = atContainer.find('.prod-list');
        //非安卓下添加
        if (!isAndroid) {
            fixedThumbContainer = $('#wrapper')
                .after(thumbContainer.clone().addClass('fixed-thumb-container fixed-bottom'))
                .next('.thumb-container');
        }
        thumbs = $('.thumb');
        //图片懒加载
        $("img.lazy").lazyload({
            event: 'load'
        });
        
        /**
         * 计算小箭头位置函数
         * @param index(类型为number,调用函数li的index)
         */
        arrowPosition = function(element, index) {
            //640为设计图尺寸,也就是font-size为40下的1rem,所以数值都参照640定
            var container = element,
                item = container.find('li'),
                len = 5, //获取一共多少li
                midNum = Math.ceil(len / 2), //获取中间li的index+1
                documentFont = parseInt($("html").css("fontSize")), //获取html的font-size
                itemMarginRight = parseInt(item.css('marginRight')) / documentFont * 40, //获取li的margin-right在640下数值
                itemWidth = item.width() / documentFont * 40, //获取li的widtht在640下数值
                surPlusValue = (parseInt(container.css('padding-left')) / documentFont * 40 - itemMarginRight) / 2, //获取container的padding-left与itemMarginRight相减后除以2在640下数值
                backgroundLeft; //container背景图片左偏移的位置

            /**
             * 320为640分辨率下中间值
             * index-midNum为偏移中间li的数值
             * (index - midNum) * (itemWidth + itemMarginRight)当前li偏移中间li的距离
             * - surPlusValue 减去container的padding与li的margin-right差值的一半
             *  除以40,由640下的px变为rem
             */
            backgroundLeft = -(320 - (index - midNum) * (itemWidth + itemMarginRight) - surPlusValue) / 40 + 'rem';
            container.css({
                "backgroundPosition": backgroundLeft + " bottom"
            });
        };
        
        /**
         * 分类的点击事件句柄
         */
        function thumbClickEvt(e) {
            var that = $(e.currentTarget),
                index = that.index(),
                other;

            if (that.closest('.fixed-thumb-container').length > 0) {
                other = thumbContainer.find('.thumb:eq(' + index + ')');
            } else {
                other = fixedThumbContainer.find('.thumb:eq(' + index + ')');
            }

            //set status of that & other synchronous
            thumbs.removeClass('focus');

            that.addClass('focus');
            other.addClass('focus');

            arrowPosition(thumbContainer, index + 1);
            if (!isAndroid) {
                arrowPosition(fixedThumbContainer, index + 1);
            }

            prodList.find('.prod')
                .addClass('hide')
                .eq(index)
                .removeClass('hide');

            if (!isInit) {
                if (myscroll) {
                    myscroll.scrollToElement(scrollToEl, 400);
                }
            } else {
                isInit = false;
            }
        }
        thumbs.click(thumbClickEvt);
        //默认选中第一个
        thumbContainer.find('.thumb:first-child').click();
    });
    
    window.onload = function() {
        var tContainerH, //thumber-container高度
            containerH, //article-type-three高度
            containerTop; //article-type-three offset top

        myscroll = new IScroll('#wrapper', {
            probeType: 3,
            mouseWheel: true,
            click: true
        });
        
        document.addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, false);
        
        if (!hasAt || isAndroid) {
            return;
        }
        
        tContainerH = thumbContainer.outerHeight();
        containerH = atContainer.height();
        containerTop = atContainer.offset().top;

        /**
         * scroll前重置container状态
         */
        function resetStatus() {
            fixedThumbContainer.removeClass('fixed-top fixed-bottom absolute hide').css('top', '');
        }

        myscroll.on('scroll', function() {
            var sTop = -this.y;

            resetStatus();

            if (sTop <= containerTop - winH + tContainerH) {
                fixedThumbContainer
                    .addClass('fixed-bottom');
            } else if (sTop <= containerTop) {
                fixedThumbContainer
                    .addClass('hide');
            } else if (sTop <= containerTop + containerH - tContainerH) {
                fixedThumbContainer
                    .addClass('fixed-top');
            } else if (sTop <= containerTop + containerH) {
                fixedThumbContainer
                    .addClass('absolute')
                    .css({
                        top: containerTop + containerH - tContainerH - sTop
                    });
            } else if (sTop > containerTop + containerH) {
                fixedThumbContainer
                    .addClass('hide');
            }
        });
    };
};