vczero.github.io/meitu/js/home/info.js

define('home/info', function(require, exports, module) {
	var _ = require('lib/underscore');
	var $ = require('lib/zepto_pj');
	var router = require('common/data').router[1];
	var Events = require('lib/events');
	var info = new Events();
	var wrapper = $('#SN_TPL');
	var tpl = $('#tpl').html();
	//隐藏和显示
	var SN_info_btn = $('#SN_info_btn');
	var SN_info = $('.SN_info');
	var SN_info_item = $('.SN_info_item');
	SN_info_btn.on('click', function() {
		if (parseInt(SN_info.css('height')) > 100) {
			SN_info.css('height', '25px');
			$('.SN_info_btn_icon').css('fontSize', '20px');
			SN_info_item.hide();
		} else {
			SN_info.css('height', '130px');
			SN_info_item.show();
			$('.SN_info_btn_icon').css('fontSize', '17px');
		}
	});
	
	//外部触发
	info.on('refresh', function(){
		var width = document.body.clientWidth;
		var items = info.get('list');
		var router = info.get('router');
		
		var data = {
			width: width - 20,
			tui_width: width - 140,
			list: router,
			data: items
		};
		var html = _.template(tpl)(data);
		wrapper.html(html);
		
		//使用动画
		var wrapperContent = $('.SN_info_wrapper');
		var wholeLength = width * data.list.length;
		wrapper.css('width', wholeLength);
		
		//默认隐藏在底部
		SN_info.fadeIn();//加载
		SN_info.css('height', '25px');
		$('.SN_info_btn_icon').css('fontSize', '20px');
		SN_info_item.hide();
		
		//记录初始位置
		var startX = 0;
		wrapperContent.on('touchstart', function(e) {
			startX = e.changedTouches[0].clientX;
		});
		wrapperContent.on('touchend', endTouch);
		
		//动画
		function endTouch(e) {
			var dis = e.changedTouches[0].clientX - startX;
			//获取当前translate3d的位置
			var transform = wrapperContent.css('transform') || wrapperContent.css('-webkit-transform');
			var currentPos = parseInt(transform.split(',')[0].split('(')[1]);
			
			//移动
			if (Math.abs(dis) > 20) {
				//左移
				if (dis < -20) {
					var w = 0;
					var handle = setInterval(function() {
						w += width / 8;
						if (w <= width && Math.abs(currentPos) < (wholeLength - width - 10)) {
							var newX = (currentPos - w);
							wrapperContent.css('transform', 'translate3d(' + newX + 'px, 0px, 0px)');
							wrapperContent.css('-webkit-transform', 'translate3d(' + newX + 'px, 0px, 0px)');
						} else {
							clearInterval(handle);
						}
	
					}, 30);
				}
	
				//右移
				if (dis > 20) {
					var w = 0;
					var handle = setInterval(function() {
						w += width / 8;
						if (w <= width && Math.abs(currentPos) > 10) {
							var newX = (currentPos + w);
							wrapperContent.css('transform', 'translate3d(' + newX + 'px, 0px, 0px)');
							wrapperContent.css('-webkit-transform', 'translate3d(' + newX + 'px, 0px, 0px)');
						} else {
							clearInterval(handle);
						}
					}, 30);
				}
			}
		}

		
	});
	return info;

});