onepage/kissy/op_dever/topic-page-2.js

KISSY.add('vogue/topic-page-2',function (S, Node, DOM, Base, Event, IO) {
	var $ = Node.all;
	
	var TopicPage = function (target, config) {
		var self = this;
		if(!config) config = {};
		if(target) S.mix(config, {target: target});
		TopicPage.superclass.constructor.call(self, config);
		return self;
	}
	
	S.extend(TopicPage, Base, {
		/*设置页面数据*/
		setData: function (data) {
			var self = this;
			self.data = data;
			S.log(data);
			return self;
		},
		getData: function () {
			var self = this;
			return self.data;
		},
		/*代理页面渲染*/
		render: function () {
			var self = this;
			self._load(self._render);
			return self;
		},
		
		/*页面图片加载完成后回调*/
		_load: function (callback) {
			var self = this;
			
			var waitLoadingImgs = [];
			if (!S.isUndefined(self.data.bgimage_url)) {
				waitLoadingImgs.push(self.data.bgimage_url);
			}
			
			for ( var key in self.data.layers) {
				if (!S.isUndefined(self.data.layers[key].url))
					waitLoadingImgs.push(self.data.layers[key].url);
			}
			
			var hasLoadingTimes = 0;
			for (var i = 0; i < waitLoadingImgs.length; i++) {
				var oi = new Image();
				oi.src = waitLoadingImgs[i];
				oi.onload = function () {
					++hasLoadingTimes;
				};
			}
			
			var ID = setInterval(function () {
				if (hasLoadingTimes == waitLoadingImgs.length) {
					clearInterval(ID);
					S.log('image loading done');
					//self._sleep(3);
					callback(self);
				}
			}, 10);
			
			return self;
		},
		_sleep: function (s) {
			var start = new Date().getTime();
			while(true) {
				if (new Date().getTime()-start > s*1000)
					break;
			}
		},
		_amin: function (node, style) {
			setTimeout(function () {
				node.css(style);
			}, 100);
		},
		/*页面渲染*/
		_render: function (self) {
			var data = self.data,
				target = self.get('target');
			
			target.html('');
			
//			if (!S.isUndefined(data.background_color)) {
//				target.css({'background-color': data.background_color});
//			}
			if (!S.isUndefined(data.bgimage_url) && (S.isUndefined(data.bgimage_isShow) || data.bgimage_isShow == true) ) {
				var $topic_bg_image = $('<div class="ks-topic-bg-image"></div>').appendTo(target);
				$topic_bg_image.css({'background-image': 'url('+data.bgimage_url+')'});
			}
			
			for ( var key in self.data.layers) {
				
				var layer_data = self.data.layers[key];
				
				if ((!S.isUndefined(layer_data.url) || !S.isUndefined(layer_data.video_url)) && (S.isUndefined(layer_data.isShow) || layer_data.isShow == true)) {
					if (!S.isUndefined(layer_data.url)) {
						var image_width = Math.round(layer_data.width/2),
							image_height = Math.round(layer_data.height/2);
					}
					if (!S.isUndefined(layer_data.video_url)) {
						var image_width = Math.round(layer_data.video_width),
							image_height = Math.round(layer_data.video_height);
					}
					
					if (S.isUndefined(layer_data.position)) { //布局：默认左上
						layer_data.position = 'leftup';
					}
					if (S.isUndefined(layer_data.action)) { //动作：默认静止
						layer_data.action = 'rest';
					}
					
					var $begin_style = {}, $end_style = {'opacity':'1'}; //用开始样式和结束样式来产生动画效果
					
					switch (layer_data.position) {
						case 'center':
							$begin_style = {
								'left':'50%',
								'top':'50%',
								'margin-left':'-'+image_width/2+'px',
								'margin-top':'-'+image_height/2+'px',
								'opacity': '0'
							};
							if (layer_data.action == 'left') {
								$begin_style.left = '70%';
								$end_style.left = '50%';
							} else if (layer_data.action == 'up') {
								$begin_style.top = '70%';
								$end_style.top = '50%';
							}
							break;
						case 'up':
							$begin_style = {
								'left':'50%',
								'top':'0%',
								'margin-left':'-'+image_width/2+'px',
								'opacity': '0'
							};
							if (layer_data.action == 'left') {
								$begin_style.left = '70%';
								$end_style.left = '50%';
							} else if (layer_data.action == 'up') {
								$begin_style.top = '20%';
								$end_style.top = '0%';
							}
							break;
						case 'down':
							$begin_style = {
								'left':'50%',
								'bottom':'6%',
								'margin-left':'-'+image_width/2+'px',
								'opacity': '0'
							};
							if (layer_data.action == 'left') {
								$begin_style.left = '70%';
								$end_style.left = '50%';
							} else if (layer_data.action == 'up') {
								$begin_style.bottom = '-14%';
								$end_style.bottom = '6%';
							}
							break;
						case 'leftup':
							$begin_style = {
								'left':'0%',
								'top':'0%',
								'opacity': '0'
							};
							if (layer_data.action == 'left') {
								$begin_style.left = '20%';
								$end_style.left = '0%';
							} else if (layer_data.action == 'up') {
								$begin_style.top = '20%';
								$end_style.top = '0%';
							}
							break;
						case 'leftdown':
							$begin_style = {
								'left':'0%',
								'bottom':'0%',
								'opacity': '0'
							};
							if (layer_data.action == 'left') {
								$begin_style.left = '20%';
								$end_style.left = '0%';
							} else if (layer_data.action == 'up') {
								$begin_style.bottom = '-20%';
								$end_style.bottom = '0%';
							}
							break;
						case 'rightup':
							$begin_style = {
								'right':'0%',
								'top':'0%',
								'opacity': '0'
							};
							if (layer_data.action == 'left') {
								$begin_style.right = '-20%';
								$end_style.right = '0%';
							} else if (layer_data.action == 'up') {
								$begin_style.top = '20%';
								$end_style.top = '0%';
							}
							break;
						case 'rightdown':
							$begin_style = {
								'right':'0%',
								'bottom':'0%',
								'opacity': '0'
							};
							if (layer_data.action == 'left') {
								$begin_style.right = '-20%';
								$end_style.right = '0%';
							} else if (layer_data.action == 'up') {
								$begin_style.bottom = '-20%';
								$end_style.bottom = '0%';
							}
							break;
						default:
							alert('未知操作');
					}
					
					$begin_style.width = image_width; //图层图片尺寸压缩一倍
					
					if (!S.isUndefined(layer_data.url)) {
						var layer_image = $('<img class="layer_anim" src="'+layer_data.url+'" />');
					}
					if (!S.isUndefined(layer_data.url) && !S.isUndefined(layer_data.link) && layer_data.link) {
						var layer_image = $('<a class="layer_anim" href="'+layer_data.link+'" target="_blank"><img src="'+layer_data.url+'" style="width:100%" /></a>');
					}
					
					if (!S.isUndefined(layer_data.video_url)) {
						//var layer_image = $('<embed class="layer_anim" src="'+layer_data.video_url+'" allowFullScreen="true" quality="high" width="'+layer_data.video_width+'" height="'+layer_data.video_height+'" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>');
						var layer_image = $('<div class="layer_anim" style="width:'+layer_data.video_width+'px;height:'+layer_data.video_height+'px;background-color:#ccc;color:#fff;font-size:20px;text-align:center;line-height:'+layer_data.video_height+'px;" >视频</div>');
					}
					
					layer_image.css($begin_style);
					target.append(layer_image);
					
					self._amin(layer_image, $end_style);
				}
				
			}
			
			S.log('render done!');
			return self;
		}
	}, {
		ATTRS: {
			target: {
				value: "",
				getter: function (v) {
					return $(v);
				}
			}
		}
	});
	
	return TopicPage;
	
}, {requires:['node', 'dom', 'base', 'event', 'io', './topic-page-2.css']});