magazine.js 8.45 KB
/*
 * magazine页js
 * @author: yue.liu@yoho.cn
 * @date: 2015-04-22
 */

var $ = require('jquery'),
    share = require('../plugin/share'),
    swiper = require('yoho-idangerous.swiper'),
    jsonp = require('yoho-jsonp');


require('lazyload');

require('../plugin/imgSlider');
require('../plugin/imgZoom');


exports.init = function() {
    var shareUrl = $('.share').attr('data-link'),
        shareCover = $('.share').attr('cover-url'),
        magazineSlide,
        timer,
        magazineTimer;

    //分享
    share.init({
        shareUrl: shareUrl,
        img: $(".mags-slide li").eq(0).find("img").attr("src"),
        sinaText: '随时引领潮流生活,我正在看《YOHO!潮流志》' + $(".date-price").find("span").text() + '期点杂志,每月7日,17日,27日出刊哦~',
        fbTextFunction: function() {
            return {
                des: '随时引领潮流生活,我正在看《YOHO!潮流志》' + $(".date-price").find("span").text() + '期点杂志,每月7日,17日,27日出刊哦~',
                name: '随时引领潮流生活,我正在看《YOHO!潮流志》' + $(".date-price").find("span").text() + '期点杂志,每月7日,17日,27日出刊哦~',
                caption: '随时引领潮流生活,我正在看《YOHO!潮流志》' + $(".date-price").find("span").text() + '期点杂志,每月7日,17日,27日出刊哦~',
                url: location.href
            }
        },
        tweetText: '随时引领潮流生活,我正在看《YOHO!潮流志》' + $(".date-price").find("span").text() + '期点杂志,每月7日,17日,27日出刊哦~',
        qqText: '随时引领潮流生活,我正在看《YOHO!潮流志》' + $(".date-price").find("span").text() + '期点杂志,每月7日,17日,27日出刊哦~'
    });

    //图片懒加载
    $('img.lazy').lazyload({
        placeholder: 'data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=='
    });

    //显示控制箭头
    (function() {
        $('.column-slide').on('mouseenter', function() {
            $('.column-slide').find('.slide-ctrl').hide();
            if ($(this).find('li').size() <= 4) return;
            clearTimeout(timer);
            $(this).find('.slide-ctrl').show();
        }).on('mouseleave', function(event) {
            var $that = $(this);
            timer = setTimeout(function() {
                $that.find('.slide-ctrl').hide();
            }, 1000)
        });

        $('.column-slide .slide-ctrl').on('mouseenter', function() {
            clearTimeout(timer);
            $(this).show();
        }).on('mouseleave', function() {
            timer = setTimeout(function() {
                $(this).hide();
            }, 100)
        });

    })();

    //封面杂志图滚动
    magazineSlide = new swiper('.mags-slide .swiper-container', {
        pagination: '.slide-ctrl-tabs',
        wrapperClass: 'slide-piclist',
        slideClass: 'magazine-swiper',
        paginationClickable: true,
        autoplay: 5000,
        loop: true,
        slidesPerView: 'auto',
        slideElement: 'li'
    });

    $('.column-slide.magazine-list').imgSlider({
        itemClass: 'magazine'
    });

    //当页面改变大小,ipad横竖屏切换重新加载插件
    $(window).resize(function() {
        clearTimeout(magazineTimer);
        magazineTimer = setTimeout(function() {
            $('.column-slide.magazine-list').imgSlider('resize');
        }, 0);
    });

    jsonp({
        url: YohoConfig.mainUrl + '/channel/magazine/ezine',
        success: function(response) {
            var data = response.data,
                len = data.length,
                item = '',
                ulNum = Math.ceil(len / 16),
                ulItem = '',
                ulAnimateIndex = 0;

            var animateWidth,
                slideWrapWidth,
                itemIndexStart,
                itemIndexEnd,
                i;

            $('.e-zine .slide-box').html('<div class="slide-piclist-wrap clearfix" style="position:relative;top:0;left:0;"></div>');

            //添加4个ul
            for (var i = 0; i < ulNum; i++) {
                ulItem += '<ul class="slide-piclist clearfix"></ul>';
            }

            $('.slide-piclist-wrap').html(ulItem);

            animateWidth = $('.mags-column').find('.slide-piclist').outerWidth();
            slideWrapWidth = animateWidth * ulNum;
            $('.slide-piclist-wrap').css({
                'width': slideWrapWidth
            });

            //分别插入数据到4个ul
            for (i = 0; i < ulNum; i++) {
                itemIndexStart = i * 16,
                    itemIndexEnd = i * 16 + 16;
                item = '';
                if (itemIndexEnd > len) {
                    itemIndexEnd = len;
                }
                for (var j = itemIndexStart; j < itemIndexEnd; j++) {
                    item += '<li data-type=' + data[j].magazineType + '><a href="javascript:;" title="' + data[j].releaseDate + '"><div class="img-wrap"><img src="' + data[j].cover + '" alt="" /></div><span>' + data[j].releaseDate + '</span></a></li>';
                }

                $('.slide-piclist-wrap').find('.slide-piclist').eq(i).html(item);
            }

            //滚动
            $('.mags-column').find('.slide-ctrl-prev').hide();


            $(window).resize(function() {
                animateWidth = $('.mags-column').find('.slide-piclist').outerWidth();
                slideWrapWidth = animateWidth * ulNum;

                $('.mags-column').on('click.next', '.slide-ctrl-next', function() {
                    if (ulAnimateIndex >= ulNum - 1) return;
                    if ($('.slide-piclist-wrap').is(':animated')) return;
                    if (ulAnimateIndex == ulNum - 2) {
                        $(this).hide();
                    }
                    $(this).siblings('.slide-ctrl-prev').show();
                    ulAnimateIndex++;
                    $('.slide-piclist-wrap').stop().animate({
                        'left': -animateWidth * ulAnimateIndex
                    }, 500);
                });

                $('.mags-column').on('click.prev', '.slide-ctrl-prev', function() {
                    if (ulAnimateIndex <= 0) return;
                    if ($('.slide-piclist-wrap').is(':animated')) return;
                    if (ulAnimateIndex === 1) {
                        $(this).hide();
                    }
                    $(this).siblings('.slide-ctrl-next').show();
                    ulAnimateIndex--;
                    $('.slide-piclist-wrap').stop().animate({
                        'left': -animateWidth * ulAnimateIndex
                    }, 500);
                });
                clearTimeout(timer);
                timer = setTimeout(function() {
                    $('.slide-piclist-wrap').css({
                        'width': slideWrapWidth
                    });
                    $('.slide-piclist-wrap').css({
                        'left': -animateWidth * ulAnimateIndex
                    }, 500);
                }, 0)
            }).resize();


            /*for(var i=0;i<len;i++){
                item += '<li data-type='+data[i].magazineType+'><a href='javascript:;' title=''+data[i].releaseDate+''><div class='img-wrap'><img src=''+data[i].cover+'' alt='' /></div><span>'+data[i].releaseDate+'</span></a></li>';
            }
            $('.mags-column .slide-piclist').html(item);
            $('.column-slide').imgSlider();     
            */

            $('.mags-column .slide-piclist').find('li').each(function() {
                if ($(this).data('type') === 4) {
                    $('<em class="border"></em><i class="special-icon"></i>').appendTo($(this).find('.img-wrap'));
                };
            });
        }
    });

    $('.magazine-list').on('click', '.magazine', function() {
        if (!$(this).find('img').attr('data-slide')) return;
        if ($(this).find('ul').size() >= 1) return;
        var data = decodeURIComponent($(this).find('img').attr('data-slide')),
            arr = eval('(' + data + ')'),
            len = arr.length,
            $picList = $('<ul style="display:none;" class="magazine-content"></ul').appendTo($(this)),
            item = '';

        for (i = 0; i < len; i++) {
            item += '<li><img src="" data-imgzoom="' + arr[i] + '" alt="" /></li>';

        }
        $(item).appendTo($picList);
        $(this).imgZoom({
            originalAttr: 'data-imgzoom',
            styleClass: 'magazine-zoom',
            isContainer: true
        });
    });
};