onepage_mrhi/kissy/op_dever/topic-page.js

KISSY.add('op_dever/topic-page',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;
			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.background_image)) {
				waitLoadingImgs.push(self.data.background_image);
			}
			if (!S.isUndefined(self.data.button_image)) {
				waitLoadingImgs.push(self.data.button_image.url);
			}
			if (!S.isUndefined(self.data.upper_image)) {
				waitLoadingImgs.push(self.data.upper_image.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;
			}
		},
		/*页面渲染*/
		_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.background_image) && (S.isUndefined(data.background_isShow) || data.background_isShow == true) ) {
				var $topic_bg_image = $('<div class="ks-topic-bg-image"></div>').appendTo(target);
				$topic_bg_image.css({'background-image': 'url('+data.background_image+')'});
			}
			if (!S.isUndefined(data.upper_image) && (S.isUndefined(data.upper_image.isShow) || data.upper_image.isShow == true)) {
				var upper_image_width = Math.round(data.upper_image.width/2),
					upper_image_height = Math.round(data.upper_image.height/2);
				
				if (S.isUndefined(data.move)) { //默认不移动
					data.move = '';
				}
				
				var $style = {};
				var $anim_style = {'opacity':'1'};
				
				if (!S.isUndefined(data.position)) {
					switch (data.position) {
						case 'center': //居中
							$style = {
								'left':'50%',
								'top':'50%',
								'margin-left':'-'+upper_image_width/2+'px',
								'margin-top':'-'+upper_image_height/2+'px',
								'opacity': '0'
							};
							
							if (data.move == 'left') {
								$style.left = '70%';
								$anim_style.left = '50%';
							} else if (data.move == 'up') {
								$style.top = '70%';
								$anim_style.top = '50%';
							}
							break;
						case 'leftup': //左上
							$style = {
								'left':'0%',
								'top':'0%',
								'opacity': '0'
							};
							
							if (data.move == 'left') {
								$style.left = '20%';
								$anim_style.left = '0%';
							} else if (data.move == 'up') {
								$style.top = '20%';
								$anim_style.top = '0%';
							}
							break;
						case 'leftdown': //左下
							$style = {
								'left':'0%',
								'bottom':'0%',
								'opacity': '0'
							};
							
							if (data.move == 'left') {
								$style.left = '20%';
								$anim_style.left = '0%';
							} else if (data.move == 'up') {
								$style.bottom = '-20%';
								$anim_style.bottom = '0%';
							}
							break;
						case 'rightup': //右上
							$style = {
								'right':'0%',
								'top':'0%',
								'opacity': '0'
							};
							
							if (data.move == 'left') {
								$style.right = '-20%';
								$anim_style.right = '0%';
							} else if (data.move == 'up') {
								$style.top = '20%';
								$anim_style.top = '0%';
							}
							break;
						case 'rightdown': //右下
							$style = {
								'right':'0%',
								'bottom':'0%',
								'opacity':'0'
							};
							
							if (data.move == 'left') {
								$style.right = '-20%';
								$anim_style.right = '0%';
							} else if (data.move == 'up') {
								$style.bottom = '-20%';
								$anim_style.bottom = '0%';
							}
							break;
						default:
							alert('未知操作');
					}
				} else { //默认样式
					$style = {'left':'50%', 'top':'70%', 'margin-left':'-'+upper_image_width/2+'px', 'margin-top':'-'+upper_image_height/2+'px', 'opacity': '0'};
					$anim_style = {'top':'50%', 'opacity':'1'};
				}
				
				$style.width = upper_image_width; //上层图片缩放一倍
				
				var new_upper_image = $('<img class="layer_anim" src="'+data.upper_image.url+'" />');
				new_upper_image.css($style);
				target.append(new_upper_image);
				setTimeout(function () {
					new_upper_image.css($anim_style);
				}, 1);
			}
			
			if (!S.isUndefined(data.button_image) && (S.isUndefined(data.button_image.isShow) || data.button_image.isShow == true)) {
				var button_image_width = Math.round(data.button_image.width/2),
				button_image_height = Math.round(data.button_image.height/2);
				
				$style = {};
				
				if (!S.isUndefined(data.button_position)) {
					switch (data.button_position) {
						case 'up':
							$style = {
								'left':'50%',
								'top':'20%',
								'margin-left':'-'+button_image_width/2+'px'
							}
							break;
						case 'center':
							$style = {
								'left':'50%',
								'top':'50%',
								'margin-left':'-'+button_image_width/2+'px',
								'margin-top':'-'+button_image_height/2+'px'
							}
							break;
						case 'down':
							$style = {
								'left':'50%',
								'bottom':'20%',
								'margin-left':'-'+button_image_width/2+'px'
							}
							break;
							default:
								alert('未知操作');
					}
				} else {
					$style = {
						'left':'50%',
						'top':'50%',
						'margin-left':'-'+button_image_width/2+'px',
						'margin-top':'-'+button_image_height/2+'px'
					}
				}
				
				$style.width = button_image_width; //上层图片缩放一倍
				
				if (!S.isUndefined(data.button_link)) {
					var new_button_image = $('<a class="topic_button" href="'+data.button_link+'" ><img src="'+data.button_image.url+'" /></a>');
				} else {
					var new_button_image = $('<img class="topic_button" src="'+data.button_image.url+'" />');
				}
				new_button_image.css($style);
				target.append(new_button_image);
			}
			
			S.log('render done!');
			return self;
		}
	}, {
		ATTRS: {
			target: {
				value: "",
				getter: function (v) {
					return $(v);
				}
			}
		}
	});
	
	return TopicPage;
	
}, {requires:['node', 'dom', 'base', 'event', 'io', './topic-page.css']});