view.js

/**
 * @author fuqiang[[email protected]]
 * @version 20120514
 * @description 暂时作为照片详情页的views集合
 */
define('module/view', ['module/common', 'module/model', 'module/tool', 'vendor/jquery', 'module/mask', 'module/like', 'module/userRelation'], function(R, MODEL, tool, $, mask, like, userRelation) {

	var TOOL = tool.DetailTool;

	var ExifHeight = 56;

	var set = function(options) {
		for (var i in options) {
			this[i] = options[i];
		}
		return this;
	};

	var DetailView = {
		Desc: R.Backbone.View.extend({
			el: $('dd[node-type=desc]'),
			lookbig: $('a[node-type=get_big_img]'),
			template: $('#T_Desc').html(),
			model: MODEL.DetailDB,
			set: set,
			events: {
				'click [action-type=comment]': 'toComment',
				'click [action-type=edit_desc]': 'editDesc',
				'click [action-type=like],[action-type=unlike]': 'smallLike'
			},
			toComment: function() {
				var self = this;
				TOOL.isLogin(function() {
					R.scrollTo('[action-type=comment]');
					$(self.commentEl).focus();
				});
				return false;
			},
			editDesc: function(e) {
				var self = this,
				$info = this.model.get('$info');
				TOOL.isLogin(function() {
					var PhotoDB = self.model.get('PhotoDB'),
					AlbumDB = self.model.get('AlbumDB');
					R.pop.editPhoto({
						photoID: self.id,
						caption: PhotoDB['caption'],
						tags: PhotoDB['tags'],
						show_SetCover: ! AlbumDB['type'] == '18',
						isCover: !! PhotoDB['is_cover'],
						afterEvent: function(json) {
							$(e.target).closest('dl').find('.desc em').html(json['caption']);
							TOOL.addTagItem(json['tags'], json['uid'] != $info['account_uid'], true);
							TOOL.emStyle();
							$.extend(PhotoDB, json);
							self.model.unset(PhotoDB['photo_id']);
							self.model.unsetLike(PhotoDB['photo_id']);
						}
					});
				});
				return false;
			},
			smallLike: function(e) {
				var that = this,
				self = this.Photo,
				target = $('[node-type=like_small]'),
				type = target.attr('action-type'),
				PhotoDB = that.model.get('PhotoDB');
				if (!self.likeflag) return false;
				self.likeflag = false;
				TOOL.isLogin(function() {
					self.Mylike[type].call(target, target, function(target, count, like) {
						var biglike = $('[action-type=biglike]'),
						em = biglike.find('em'),
						span = biglike.find('.bg>span'),
						list = self.allList ? self.allList['photo_list'] || self.allList: undefined,
						cls = like ? 'M_icon7_on': 'M_icon7';
						PhotoDB['is_liked'] = like;
						self.likeflag = true;
						span.attr('class', 'M_ico ' + cls);
						em.text(count);
						list && self.upslide(list, PhotoDB);
						if (self.detail_comment) {
							self.detail_comment.destroyMixAllCache();
							self.updateComment(self.detail_comment.mode);
						}
						that.model.unset(PhotoDB['photo_id']);
						that.model.unsetLike(PhotoDB['photo_id']);
					});
				});
				return false;
			},
			render: function() {
				var T = this.model.get(this.id),
				bigurl = R.baseURL + T['uid'] + (T['type'] == 15 ? '/wbphotos/large/photo_id/': '/photos/largephoto_id/') + T['photo_id'];
				$(this.el).html(R.Mu.render(this.template, T));
				$(this.lookbig).attr('href', bigurl);
				return this;
			}
		}),
		Exif: R.Backbone.View.extend({
			el: $('#exif'),
			elwrap: $('div[node-type=exif]'),
			moreEl: $('a[action-type=more_exif]'),
			msg: ['更多EXIF信息', '收起'],
			template: $('#T_Exif').html(),
			set: set,
			events: {
				'click [action-type=more_exif]': 'Exiftoggle',
				'click [action-type=more_exif_disabled]': 'Exifdisabled'
			},
			createExifObject: function(json) {
				var ret = [],
				exifmap = {
					'Model': '相机型号',
					'Make': '厂家',
					'DateTimeOriginal': '拍摄日期',
					'FocalLength': '焦距',
					'FNumber': '光圈',
					'ExposureTime': '曝光时间',
					'ISOSpeedRatings': '感光度',
					'ExposureProgram': '曝光程序',
					'MeteringMode': '测光模式'
				},
				lists = ['Make', 'Model', 'DateTimeOriginal', 'FocalLength', 'FNumber', 'ExposureTime', 'ISOSpeedRatings', 'ExposureProgram', 'MeteringMode'];
				lists.forEach(function(key) {
					var name = exifmap[key],
					value = json[key] || '未知';
					ret.push({
						key: name,
						value: value
					});
				});
				return {
					exif: ret
				};
			},
			Exifdisabled: function() {
				return false;
			},
			Exiftoggle: function(e) {
				var self = this;
				TOOL.isLogin(function() {
					var exif = $(self.elwrap),
					isauto = exif.attr('class') === 'p1',
					cls = isauto ? 'p2': 'p1',
					style = isauto ? {
						height: 'auto'
					}: {
						height: ExifHeight,
						overflow: 'hidden'
					},
					txt = isauto ? 1: 0;
					exif.attr('class', cls);
					exif.css(style);
					$(e.target).text(self.msg[txt]);
				});
				return false;
			},
			render: function() {
				var data = this.createExifObject(this.model);
				$(this.elwrap).html(R.Mu.render(this.template, data)).
				css({
					'height': ExifHeight,
					overflow: 'hidden'
				});
				$(this.moreEl).show().text(this.msg[0]);
			}
		}),
		lastTip: R.Backbone.View.extend({
			el: $('body'),
			elWrap: 'div[node-type=lastTip]',
			template: $('#T_lastTip').html(),
			set: set,
			model: MODEL.DetailDB,
			events: {
				'click div[action-type=close_tips]': 'closeTip',
				'click a[node-type=forward_album]': 'forwardAlbum',
				'click a[node-type=like_album]': 'likeAlbum',
				'click a[action-type=GotoFirst]': 'GotoFirst'
			},
			closeTip: function() {
				$(this.elWrap).remove();
				this.Photo.lastMask.hide();
				return false;
			},
			forwardAlbum: function() {
				var AlbumDB = this.model.get('AlbumDB'),
				$info = this.model.get('$info'),
				pic = AlbumDB['cover_pic'] === "" ? R.baseIMG + '/common/status_0.png': AlbumDB['cover_pic'];
				$('div[action-type=close_tips]').trigger('click');
				R.pop.forwardDialog({
					caption: AlbumDB['caption'],
					who: $info['owner_data']['name'],
					uid: $info['owner_uid'],
					target_id: AlbumDB['album_id'],
					target_uid: AlbumDB['uid'],
					url: pic,
					type: AlbumDB['type'] == 3 ? 3: 1,
					albumId: AlbumDB['album_id'],
					img: pic
				});
				return false;
			},
			likeAlbum: function(e) {
				var AlbumDB = this.model.get('AlbumDB'),
				target = $('[node-type=like_album]');
				if (AlbumDB['is_liked']) {
					this.albumLike.unlike.call(target, target, function() {
						AlbumDB['is_liked'] = false;
					});
				} else {
					this.albumLike.like.call(target, target, function() {
						AlbumDB['is_liked'] = true;
					});
				}
				return false;
			},
			GotoFirst: function() {
				var self = this.Photo;
				$('div[action-type=close_tips]').trigger('click');
				if (this.isLikePage) {
					self.updatePage(this.likesIds[0]);
				} else {
					self.updatePage(this.commonIds[0]);
				}
				return false;
			},
			createLastTipObject: function(data, recommend) {
				var ret = {},
				lisSp = [],
				moresize = 0,
				hasmore = false,
				$info = this.model.get('$info'),
				AlbumDB = this.model.get('AlbumDB'),
				PhotoDB = this.model.get('PhotoDB'),
				isLikePage = this.isLikePage;
				data.album_list = data.album_list.filter(function(i) {
					if (i['album_id'] == AlbumDB['album_id']) {
						return false;
					} else if (i['type'] != 1) {
						lisSp.push(i);
						return false;
					}
					moresize++;
					if (moresize > 4) {
						hasmore = true;
					}
					return true;
				});
				data.album_list = data.album_list.slice(0, 4);
				data.album_list = Array.prototype.concat.call([], data.album_list, lisSp.slice(0, 4 - data.album_list.length));
				data.album_list.forEach(function(i) {
					i['cover_pic_ret'] = function() {
						if (i['cover_pic'] === "") {
							if (i['property'] == 5) return R.baseIMG + 'common/status_3.png';
							if (i['property'] == 3) return R.baseIMG + 'common/status_ilustri.png';
							if (i['property'] == 18) return R.baseIMG + 'common/default_head.png';
							return R.baseIMG + 'common/status_0.png';
						}
						return i['cover_pic'];
					};
					i['title'] = i['caption'].cutString(18, '...', 0);
					i['albumURL'] = R.baseURL + $info['owner_uid'] + (i['type'] == 3 ? '/talbum/index': '/albums/detail/album_id/' + i['album_id']);
				});

				recommend.recommendPhoto.forEach(function(i) {
					i['href'] = function() {
						var type = (this.type == 2) ? '/photos/detail': 'talbum/detail';
						return R.baseURL + this.uid + type + '/photo_id/' + this.photo_id;
					};
				});

				$.extend(ret, data);
				$.extend(ret, recommend);
				$.extend(ret, {
					top_pic: function() {
						if (isLikePage) {
							return $info['owner_data']['avatar_large'];
						}
						return AlbumDB['cover_pic'];
					},
					top_pic_href: function() {
						if (isLikePage) {
							return R.baseURL + $info['owner_uid'] + '/photos/';
						}
						return this.album_url;
					},
					act_bar: function() {
						if (isLikePage) {
							return '';
						}
						var is_like = AlbumDB['is_liked'] ? '_on': '',
						zf = '<a node-type="forward_album" href="#" class="M_btn_b btn_repost"><span><em class="M_ico M_icon47"></em>转发</span></a>',
						like = '<a action-data="target_id=' + AlbumDB['album_id'] + '&like_uid=' + AlbumDB['uid'] + '&type=' + AlbumDB['type'] + '&property=' + AlbumDB['property'] + '&is_private=false" node-type="like_album" href="#" class="M_btn_b btn_like"><span><em class="M_ico M_icon46' + is_like + '"></em>喜欢</span></a>';
						return zf + like;
					},
					album_name: AlbumDB['caption'],
					album_url: R.baseURL + AlbumDB['uid'] + (AlbumDB['type'] == 3 ? '/talbum/index': '/albums/detail/album_id/' + AlbumDB['album_id']),
					href: R.baseURL + AlbumDB['uid'] + '/photos',
					name: AlbumDB['screen_name'],
					recommend_more: R.baseURL + 'welcome/hot',
					top_main: function() {
						if (isLikePage) {
							return '<div class="m_thumb m_thumb_b"><a href="' + this.top_pic_href() + '"><img src="' + this.top_pic() + '" width="90" height="90"></a></div>';
						}
						return '<div class="img_wrap"><a href="' + this.top_pic_href() + '"><img width="90" height="90" src="' + this.top_pic() + '"></a></div>';
					},
					last_txt: function() {
						if (isLikePage) {
							return this.name + '<a class="album_name" href="' + R.baseURL + AlbumDB['uid'] + '/likes/photos">喜欢的照片</a>没有下一页了哦！';
						}
						return '专辑<a class="album_name" href="' + this.album_url + '">' + this.album_name + '</a>没有下一页了哦！';
					},
					more: function() {
						if (data.album_list.length < 4) return '';
						return '<a href="' + R.baseURL + AlbumDB['uid'] + '/albums' + '">更多</a>';
					}
				});
				return ret;
			},
			render: function() {
				var data = this.createLastTipObject(this.album, this.recommend),
				Photo = this.Photo,
				toppx = ($(window).height() - 500) / 2;
				$(this.el).append(R.Mu.render(this.template, data));
				$(this.elWrap).css({
					top: toppx < 0 ? 0: toppx,
					left: ($(document).width() - 690) / 2,
					'z-index': 9999
				});
				if (!Photo.lastMask) Photo.lastMask = new mask(40);
				Photo.lastMask.show();
			},
			initialize: function() {
				this.albumLike = new like($('.F_cols_main'));
				this.albumLike.recommandLike = true;
			}
		}),
		userBox: R.Backbone.View.extend({
			el: $('div[node-type=user_box]'),
			model: MODEL.DetailDB,
			set: set,
			template: $('#T_userBox').html(),
			batchData: function(data) {
				var self = this,
				$info = this.model.get('$info');
				$.extend(data, {
					myAlbumUrl: R.baseURL + data['uid'] + '/photos/',
					ta: function() {
						var gender = data['gender'],
						isSelf = data['uid'] == $info['account_uid'];
						R.isSelf = isSelf;
						return isSelf ? '我': ((gender == 'm') ? '他': '她');
					},
					cutname: function() {
						var name = data['screen_name'],
						size = 10;
						if (data['verified'] === 0) size = 12;
						return name.cutString(size, '...');
					},
					ver: R.getVerifiedIcon(data['verified']),
					attention: R.isSelf ? '': self.follow.addfollow(data['is_follow'], data['uid'])
				});
				return data;
			},
			render: function() {
				var data = this.batchData(this.model.get('AlbumDB'));
				$(this.el).html(R.Mu.render(this.template, data));
			},
			initialize: function() {
				this.follow = new userRelation($(this.el), 'relation M_linka', true);
				this.follow.addEvent();
			}
		}),
		editMenu: R.Backbone.View.extend({
			el: $('div[node-type=operat]'),
			model: MODEL.DetailDB,
			template: $('#T_editMenu').html(),
			ownerMap: {
				addtag: true,
				move: true,
				deletephoto: true,
				setcover: true,
				setavatar: true,
				prettify: true
			},
			otherMap: {
				favorites: true
			},
			everyoneMap: {
				zoning: true
			},
			getMenuList: function() {
				var list = {},
				P = this.model.get('PhotoDB'),
				A = this.model.get('AlbumDB'),
				$info = this.model.get('$info'),
				$detail = this.model.get('$detail'),
				owner = P['uid'] == $info['account_uid'];
				if (A['property'] == 1) $.extend(list, this.everyoneMap);
				if (owner) $.extend(list, this.ownerMap);
				else $.extend(list, this.otherMap);
				if (A['type'] == 18) list['move'] = false;
				list['isLikePage'] = ! $detail['is_likes_page'];
				return list;
			},
			render: function() {
				var data = this.getMenuList();
				$(this.el).html(R.Mu.render(this.template, data));
				if (data.hasOwnProperty('zoning')) {
					var zoning_before = $('#T_zoning_before').html();
					$('[node-type=zoning_before]').append(zoning_before);
				}
			}
		}),
		RightBar: R.Backbone.View.extend({
			el: $('div[node-type=right_bar]'),
			model: MODEL.DetailDB,
			template: $('#T_rightBar').html(),
			getBarList: function() {
				var list = {
					transmit: true
				},
				P = this.model.get('PhotoDB'),
				A = this.model.get('AlbumDB');
				if (A['property'] != 1 || (P.hasOwnProperty('is_private') && P['is_private'])) list['transmit'] = false;
				return list;
			},
			render: function() {
				var data = this.getBarList();
				$(this.el).html(R.Mu.render(this.template, data));
			}
		}),
		Property: R.Backbone.View.extend({
			el: $('div[node-type=property_node]'),
			model: MODEL.DetailDB,
			template: $('#T_Property').html(),
			getLimits: function() {
				var list = {},
				P = this.model.get('PhotoDB'),
				A = this.model.get('AlbumDB'),
				limits = this.options.icons_limits;
				var cur = A['property'];
				if (P['is_private']) cur = 6;
				list['limit_txt'] = limits[cur][0];
				list['limit_icon'] = limits[cur][1];
				return list;
			},
			changeLimitClass: function() {
				var cls = '_un',
				spancls = '_un',
				actype = '',
				P = this.model.get('PhotoDB'),
				A = this.model.get('AlbumDB');
				if (A['property'] == 1 && ! P['is_private']) {
					cls = '_sm';
					spancls = '';
					actype = 'intransit';
				}
				$('[action-type=intransmit]').attr('class', 'M_txtb M_transmit' + cls).find('span').attr({
					'class': 'M_ico M_icon4' + spancls,
					'action-type': actype
				});
			},
			render: function() {
				var data = this.getLimits();
				$(this.el).html(R.Mu.render(this.template, data));
				this.changeLimitClass();
			}
		}),
		Persons: R.Backbone.View.extend({
			el: $('[node-type=zoning_list]'),
			model: MODEL.DetailDB,
			template: $('#T_Persons').html(),
			range: 11,
			events: {
				"click [node-type=more_User]": "userToggle"
			},
			userToggle: function(e) {
				var target = $(e.target),
				text = target.text();
				if (text == "查看更多") {
					$(this.el).find('li').show();
					target.text('收起');
				} else {
					$(this.el).find('li:gt(' + this.range + ')').hide();
					target.text('查看更多');
				}
				return false;
			},
			getPersons: function() {
				var MODEL = this.model,
				PhotoDB = MODEL.get('PhotoDB'),
				$info = MODEL.get('$info'),
				persons = PhotoDB['persons'],
				ret = {},
				list = [];
				if (persons.length === 0) return {
					persons: false
				};
				$.each(persons, function(index, data) {
					if (data['adder_uid'] == $info['account_uid'] || R.isSelf) data['isSelf'] = true;
					data['related_url'] = R.baseURL + data['related_uid'] + '/photos';
					list.push(data);
				});
				ret = {
					persons: {
						data: list
					}
				};
				if (list.length > this.range) ret.more = true;
				return ret;
			},
			render: function() {
				var data = this.getPersons();
				$(this.el).html(R.Mu.render(this.template, data));
				$(this.el).find('li:gt(' + this.range + ')').hide();
			}
		})
	};

	return {
		DetailView: DetailView
	};
});