tags.js

/**
 * @author fuqiang[[email protected]]
 * @version 20120813
 * @descrption 标签投稿浮出层
 */
define('module/tagsContribute', ['vendor/jquery', 'module/common', 'vendor/jquery.select'], function($, R, Select) {

	//调用方法:
	//(new tagsContribute('城市')).init('localUpdate'); //从本地上传init浮层
	//init的参数是初始化哪个tab的标致 还有一个type为:chooseByAlbum
	var tagsContribute = function(tag) {
		this.tag = tag; //保存初始化时候的tag
		this.disabledtab = false; //禁用tab切换标致
		//从相册选择的数据储存对象
		this.chooseData = {
			list: {},
			count: 0
		};
	};

	tagsContribute.prototype = {
		constructor: tagsContribute,
		createLay: function(contentHtml) {
			//内部总结构容器
			return '<div class="L_contribute L_contribute_local" node-type="contribute_content">' + contentHtml + '</div>';
		},
		upload_hd: function(subnav, albunnav) {
			//顶部容器
			return '<div class="upload_hd clearfix">' + subnav + albunnav + '</div>';
		},
		createSubnav: function() {
			//创建切换的tab
			var class1 = class2 = 'class="current"';
			class1 = this.cur === 0 ? class1: '';
			class2 = this.cur === 1 ? class2: '';
			var html = '<div class="m_subnav_a">' + '<div class="subnav clearfix">' + '<ul class="nav M_linkb">' + '<li ' + class1 + ' action-type="local_action"><a href="javascript:void(0);"><span class="bg">本地上传</span></a></li>' + '<li ' + class2 + ' action-type="choose_action"><a href="javascript:void(0);"><span class="bg">从相册选择</span></a></li>' + '</ul>' + '</div>' + '</div>';
			return html;
		},
		createAlbumNav: function(txt, append, act) {
			//创建顶部第二行内容html
			var html = '<div class="choose_album M_dotted_x clearfix">' + '<div class="m_browse_menu clearfix">' + '<div class="lf M_txta">' + txt + '<div class="se" node-type="tags_select"></div>' + append + '</div>' + '</div>' + '<div class="act_wrap">' + act + '</div>' + '</div>';
			return html;
		},
		localUpdateContent: function() {
			//创建本地上传部分的HTML，自己区分flash模式和普通模式
			var hasFlash = true;
			if (hasFlash) {
				return '<div class="upload_bd"></div>';
			} else {
				return '<div class="upload_bd"></div>';
			}
		},
		getPhotos: function(album_id, type, uid, page, callback) {
			R.CacheAjax.get(R.baseURL + 'photos/get_all', callback, {
				uid: uid,
				type: type,
				album_id: album_id,
				count: 30,
				page: page
			},
			'get');
		},
		chooseByAlbumContent: function() {
			//创建从相册选择照片部分的HTML 
			var html = '<div class="upload_bd">\
                    <div class="pic_list" node-type="albums_wrap">\
                        <ul class="plst clearfix" node-type="albums_list">\
                        </ul>\
                    </div>\
                    <div class="act_container clearfix">\
                        <a href="javascript:void(0)" action-type="next_action" class="M_btn_b btn_submit M_btn_b_dis"><span>下一步</span></a>\
                        <span class="M_txtb pics_count">已选中<em node-type="albums_choose_count"></em>张</span>\
                    </div>\
                   </div>';
			return html;
		},
		editTagsConetent: function(data) {
			//创建编辑标签部分的HTML
			//data 为选中的或者上传后得到的照片数组数据
			console.log(data);
			return '<div class="upload_bd" node-type="upload_bd">' + '<div class="input_message_container"></div>' + '</div>';
		},
		localUpdate: function() {
			//初始化从本地上传
			var subnav = this.createSubnav(),
			AlbumNav = this.createAlbumNav('<span class="sa">上传至</span>', '<span class="crt"><a class="M_btn_c M_btn_disb" href="">创建专辑</a></span>', '<label class="M_txtb watermark" for=""><input type="checkbox" id="">添加水印</label>'),
			html = '<div class="mod_upload mod_choose_pic">' + this.upload_hd(subnav, AlbumNav) + this.localUpdateContent() + '</div>';
			return html;
		},
		chooseByAlbum: function() {
			//初始化从相册选择
			var subnav = this.createSubnav(),
			AlbumNav = this.createAlbumNav('', '', '<span class="M_txtb tip">点击照片即选中，再次点击取消选中</span>'),
			html = '<div class="mod_upload mod_choose_pic">' + this.upload_hd(subnav, AlbumNav) + this.chooseByAlbumContent() + '</div>';
			return html;
		},
		//重新初始化从相册选择
		refreshChooseByAlbum: function() {
			var self = this;
			self.cur = 1;
			$('div[node-type=contribute_content]').html(self.chooseByAlbum());
			self.init_albums();
		},
		createAlbumItem: function(data) {
			var self = this,
			lis = '';
			$.each(data, function(index, item) {
				var cls = '';
				self.chooseData[item.album_id][item.photo_id] = item;
				if (self.chooseData.list[item.photo_id]) cls = 'selected';
				lis += '<li><div class="m_select"><a class="' + cls + '" action-type="choose_item" album_id="' + item.album_id + '" photo_id="' + item.photo_id + '" href="javascript:void(0);"><img width="120" height="120" src="' + R.PicBind(item, 'thumb150') + '"><span class="M_ico M_icon58"></span></a></div></li>';
			});
			return lis;
		},
		//填充从相册选择的内容-根据相册id
		initChooseByAlbum: function(args) {
			var self = this,
			album_id = args.split(',')[0],
			type = args.split(',')[1];
			$('ul[node-type=albums_list]').html('');
			var page = 1,
			lock = false,
			haspage = true;
			self.getPhotos(album_id, type, $GLOBAL_INFO['account_uid'], page, function(err, json) {
				$('ul[node-type=albums_list]').append(self.createAlbumItem(json.data.photo_list));
				if (json.data.total < page * 30) haspage = false;
			});
			$('em[node-type=albums_choose_count]').text(self.chooseData['count']);
			$('div[node-type=albums_wrap]').unbind('scroll').bind('scroll', function(e) {
				var wrapH = e.target.offsetHeight,
				scrolltop = e.target.scrollTop,
				scrollheight = e.target.scrollHeight;
				setTimeout(function() {
					if (scrolltop + wrapH >= scrollheight && haspage && ! lock) {
						lock = true;
						page++;
						self.getPhotos(album_id, type, $GLOBAL_INFO['account_uid'], page, function(err, json) {
							$('ul[node-type=albums_list]').append(self.createAlbumItem(json.data.photo_list));
							if (json.data.total < page * 30) haspage = false;
							lock = false;
						});
					}
				},
				200);
			});
		},
		init_albums: function() {
			//初始化相册select框  
			var self = this;
			R.CacheAjax.get(R.baseURL + 'albums/get_all', function(err, json) {
				var adapter = [],
				selectedIndex = 0,
				data = json.data.album_list;
				$.each(data, function(index, item) {
					if (item.count.photos <= 0 && self.cur === 1) return;
					adapter.push({
						name: item.caption.cutString(14, '...'),
						title: item.caption,
						id: item.album_id + ',' + item.type
					});
					if (item.type == 24) selectedIndex = index;
					if (!self.chooseData[item.album_id]) self.chooseData[item.album_id] = {};
				});
				self.Select = (new Select()).init($('div[node-type=tags_select]'), adapter, selectedIndex, 'tags_album_id', 0, null, null, 200, function(args) {
					if (self.cur === 0) {
						console.log(args);
					} else if (self.cur === 1) {
						self.initChooseByAlbum(args);
					}
				});
				if (self.cur === 1) self.initChooseByAlbum(data[selectedIndex]['album_id'] + ',' + data[selectedIndex]['type']);
			},
			{
				uid: $GLOBAL_INFO['account_uid'],
				count: 100,
				page: 1
			},
			'get');
		},
		savepics: function() {
			//上传照片调用的保存方法
		},
		inputMessage: function() {
			//第二部部分的HTML
			var self = this,
			subnav = this.createSubnav(),
			html = '<div class="mod_upload mod_input_message">' + this.upload_hd(subnav, '') + this.editTagsConetent(self.chooseData.list) + '</div>';
			return html;
		},
		init: function(type) {
			//弹出浮层
			var self = this;
			if (type == 'localUpdate') this.cur = 0;
			if (type == 'chooseByAlbum') this.cur = 1;
			var html = this.createLay(this[type]());
			R.pop.customTip(html, {
				title: '我要投稿',
				close: function() {
					self.unbind();
				},
				cancel: function() {
					self.unbind();
				}
			});
			this.init_albums();
			this.bind();
		},
		bind: function() {
			var self = this;
			//tab切换
			function tabToggle(el) {
				$(el).siblings('li').removeClass('current');
				$(el).addClass('current');
			}
			$('li[action-type=local_action]').live('click', function() {
				if (!self.disabledtab) {
					tabToggle(this);
					self.cur = 0;
					$('div[node-type=contribute_content]').html(self.localUpdate());
					self.init_albums();
				}
				return false;
			});
			$('li[action-type=choose_action]').live('click', function() {
				if (!self.disabledtab) {
					tabToggle(this);
					self.refreshChooseByAlbum();
				}
				return false;
			});
			//上下步-需要判断当前在哪一个状态,用cur,然后返回哪一个状态的第一步或者第二步 | 从本地上传没有上一步，只有下一步
			$('a[action-type=prev_action]').live('click', function() {
				self.disabledtab = false;
				if (self.cur == 1) {
					self.refreshChooseByAlbum();
				}
				return false;
			});
			$('a[action-type=next_action]').live('click', function() {
				self.disabledtab = true;
				if (self.cur === 0) self.savepics(); //从本地上传的下一步的函数
				else if (self.cur === 1 && self.chooseData.count > 0) $('div[node-type=contribute_content]').html(self.inputMessage()); //从照片选择的选择数据，传给第2步方法
				return false;
			});
			//选中图片的事件
			$('a[action-type=choose_item]').live('click', function() {
				var itstatus = $(this).attr('choose'),
				album_id = $(this).attr('album_id'),
				photo_id = $(this).attr('photo_id');
				if (itstatus == 1) {
					$(this).attr('choose', 0).removeClass('selected');
					delete self.chooseData.list[photo_id];
					self.chooseData['count']--;
					$('em[node-type=albums_choose_count]').text(self.chooseData['count']);
					if (self.chooseData['count'] <= 0) $('a[action-type=next_action]').addClass('M_btn_b_dis'); //disabled样式还没有，金龙在做
				} else {
					$(this).attr('choose', 1).addClass('selected');
					self.chooseData.list[photo_id] = self.chooseData[album_id][photo_id];
					self.chooseData['count']++;
					$('em[node-type=albums_choose_count]').text(self.chooseData['count']);
					if (self.chooseData['count'] > 0) $('a[action-type=next_action]').removeClass('M_btn_b_dis'); //disabled样式还没有，金龙在做
				}
				return false;
			});
		},
		unbind: function() {
			var actions = ['a[action-type=choose_item]', 'li[action-type=local_action]', 'li[action-type=choose_action]', 'a[action-type=prev_action]', 'a[action-type=next_action]'];
			$(actions.join(',')).die();
			$('div[node-type=albums_wrap]').unbind('scroll');
		}
	};

	return tagsContribute;
});