brand.js 5.96 KB
var $ = require('yoho.jquery'),
	Swiper = require('yoho.iswiper'),
	Mustache = require('yoho.mustache'),
	FetchBrand = require('./fetchbrand'),
	jgestures = require('jgestures');

var fetching = false,
	pagecount = 10,
	page = window.global_totalcount >= pagecount ? pagecount : window.global_totalcount,
	loaded = {},
	slideCache = [],
	slideMap = {},
	lastScrollY = window.pageYOffset,
	scrollY = window.pageYOffset,
	innerHeight,
	topViewPort,
	bottomViewPort;
/**
 *获得模板
 */
var template;
var parenttop = 145 * pagecount;
window.slideCache1 = [];
window.slideCache2 = [];
window.slideCache3 = [];

function showLoadPreview() {
	document.querySelector('.loadmore').style.display = 'block';
}

function hideLoadPreview() {
	document.querySelector('.loadmore').style.display = 'none';
}
/**
 * 更新节点缓存
 * @param  {[type]} node [description]
 * @return {[type]}      [description]
 */
function updateSlideCache(node) {
	var list = node.querySelectorAll('.infislide');
	var len = list.length;
	var obj;
	for (var i = 0; i < len; i++) {
		parenttop += list[i].offsetHeight;
		list[i].setAttribute('offtop', parenttop);
		var tempimglist = list[i].querySelectorAll('.img');
		obj = {
			node: list[i],
			id: list[i].getAttribute('data-id'),
			imgs: tempimglist
		}
		var tempsrclist = [];
		for (var j = 0; j < tempimglist.length; j++) {
			var srctext = tempimglist[j].getAttribute('data-src');
			tempsrclist.push(srctext);
		}
		obj.srclist = tempsrclist;
		window['slideCache' + global_brandcat].push(obj);
	};
}
/**
 * 检查元素是否可见
 * @param  {[type]}  id [description]
 * @return {Boolean}    [description]
 * 
 */
function isVisible(id) {
	var offTop, offsetHeight, data, node;
	if (slideMap[id]) {
		offTop = slideMap[id].offTop;
		offsetHeight = slideMap[id].offsetHeight;
	} else {
		node = document.getElementById('s-' + id);
		offsetHeight = parseInt(node.offsetHeight);
		var offtop = node.getAttribute('offtop') || node.offTop;
		offTop = parseInt(node.getAttribute('offtop'));
		data = {
			node: node,
			offTop: offTop,
			offsetHeight: offsetHeight
		};
		slideMap[id] = data;
		var swiper = node.querySelector('.swiper-container');
		var swiperid = swiper.getAttribute('id');
		new Swiper('.swiper-container' + swiperid, {
			pagination: '.swiper-pagination' + swiperid,
			lazyLoading: true,
			lazyLoadingInPrevNext: true,
			loop: false,
			autoplay: false
		});
	}
	if (offTop + offsetHeight > topViewPort && offTop < bottomViewPort) {
		return true;
	} else {
		return false;
	}
}
/**
 * 更新图片
 * @param  {[type]} node [description]
 * @param  {[type]} src  [description]
 * @return {[type]}      [description]
 */
function handler(node, src) {
	node.src = src;
	node.style.opacity = 1;
	loaded[src] = true;
}
/**
 * 检测滚动的回调
 * @return {[type]} [description]
 */
function handleDefer() {
	var list = window['slideCache' + global_brandcat];
	for (var i = 0, len = list.length; i < len; i++) {
		if (isVisible(list[i].id)) {
			var obj = list[i],
				imgs = obj.imgs,
				srclist = obj.srclist;
			for (var j = 0; j < srclist.length; j++) {
				var img = new Image();
				img.onload = handler(imgs[j], srclist[j]);;
				img.src = srclist[j];
			}
		}
	}
}
/**
 * 抓取数据
 * @return {[type]} [description]
 */
function fetchBrands() {
	if (fetching) {
		return;
	} else {
		fetching = true;
	}
	var senddata = {
		brandcat: global_brandcat,
		start: page,
		count: pagecount
	};
	var sendparams = {
		data: senddata,
		url: global_fetchdataurl
	};
	FetchBrand.FetchBrandDataInfo('brands', sendparams, function(data) {
		var frag;
		frag = document.createElement('div');
		frag.innerHTML = Mustache.render(template, {
			brandList: data.data.brandList
		});
		window.global_totalcount = data.data.total;
		document.getElementById(global_showpannel).appendChild(frag);
		updateSlideCache(frag);
		fetching = false;
		handleScroll(null, true);
		page += pagecount;
	});
}
/**
 * 模拟滚动的函数
 * @param  {[type]} e     [description]
 * @param  {[type]} force [description]
 * @return {[type]}       [description]
 */
function handleScroll(e, force) {
	if (page > window.global_totalcount) {
		return;
	}
	if (!force && lastScrollY === window.scrollY) {
		window.setTimeout(handleScroll, 500);
		return;
	} else {
		lastScrollY = window.scrollY;
	}
	scrollY = window.scrollY;
	innerHeight = window.innerHeight; //窗口高度
	topViewPort = scrollY - 15000;
	bottomViewPort = scrollY + innerHeight + 15000;
	if (window.scrollY + innerHeight + 2000 > document.body.offsetHeight) { //是否提前到底
		fetchBrands();
	}
	handleDefer();
	window.setTimeout(handleScroll, 500);
}
/**抓取数据**/
function getBrand(catid) {
	page = 0;
	global_showpannel = 'showpannel' + catid;
	global_brandcat = catid;
	window.scrollTo(0, 0);
	fetchBrands();
}
/**
 * 初始化
 * @param  {[type]} ) {	window.setTimeout(handleScroll, 100);	fetchBrands();} [description]
 * @return {[type]}   [description]
 */
$(document).ready(function() {
	$.get('/cuxiao/newfestival/brandinfo', function(data) {
		template = data;
		Mustache.parse(template);
		window.setTimeout(handleScroll, 100);
		fetchBrands();
		$('.navitemwrapper').bind('tapone', function() {
			var nowActHeader = $(this),
				preActHeader = $('.newfestivalbrandheader').data('actheadtag') || $('.hasunderline'),
				tagId = nowActHeader.attr('tagid'),
				nowActContent = $('#' + tagId),
				preActContent = $('.newfestivalbrandheader').data('actcontenttag') || $('.newfestivalbrandwrapper .show');
			preActHeader.removeClass('hasunderline');
			nowActHeader.addClass('hasunderline');
			$('.newfestivalbrandheader').data('actheadtag', nowActHeader);
			preActContent.empty(); //清掉上个界面的数据
			parenttop = nowActContent.offset().top; //重置高度
			preActContent.removeClass('show').addClass('hide');
			nowActContent.removeClass('hide').addClass('show');
			$('.newfestivalbrandheader').data('actcontenttag', nowActContent);
			var catid = tagId.replace(/showpannel/, '');
			getBrand(catid);
			localStorage.setItem('brandcat', catid);
		});

	});
});