orbit-basic/vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI.js.erb

<%# encoding: utf-8 %>
// refresh the imagesArray
// viewonly tags

$.extend($.expr[':'], {
	'containsi': function (elem, i, match, array) {
		return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
	}
});
var galleryAPI = function(){
	g = this;
	this.urlVars = rcom.getUrlVars();
	this.albumArea = $("#orbit_gallery");
	this.loadArea = null;
	this.tagList = $("ul#gallery_tag_list");
	// this.authenticated = false;
	this.initialize = function(callbackFn){
		$(document).ready(function(){
			bindHandlers();
			var passid = null;
			if(typeof g.urlVars['cat']!= "undefined"){
				g.loadArea = "albums";
				passid = g.urlVars['cat'];
				g.loadAlbums(g.urlVars['cat']);
			}else if(typeof g.urlVars['album']!= "undefined"){
				g.loadArea = "images";
				passid = g.urlVars['album'];
				g.loadImages(g.urlVars['album']);
			}else if(typeof g.urlVars['theater']!= "undefined"){
				g.loadArea = "theater";
				passid = g.urlVars['theater'];
				g.loadTheater(g.urlVars['theater']);
			}else if(typeof g.urlVars['edit']!= "undefined"){
				g.loadArea = "edit";
				passid = g.urlVars['edit'];
				g.editAlbum(g.urlVars['edit']);
			}else if(typeof g.urlVars['tag']!= "undefined"){
				g.loadArea = "albums";
				passid = g.urlVars['tag'];
				g.loadAlbums(g.urlVars['tag']);
			}else if(g.urlVars["locale"]){
				g.loadArea = "albums";
				g.loadAlbums("all");
			}else if(g.urlVars.length == 0) {
				g.loadArea = "albums";
				g.loadAlbums("all");
			}
			if(typeof callbackFn == "function"){
				callbackFn.call(this,g.loadArea,passid);
			}
		})
		var bindHandlers = function(){
			$("#filter .filter_btns a").click(function(){
				if(!$(this).hasClass("active")){
					$(this).addClass("active");
					if(g.urlVars.length == 0)
						window.location = "orbit_gallery?" + $(this).attr("href");
					else
						window.location = window.location.href +"&"+ $(this).attr("href");
				}else{
					$(this).removeClass("active");
					var loc = window.location.href;
					var url = loc.replace($(this).attr("href")+"&","");
					if(url == loc)
						url = loc.replace($(this).attr("href"),"");

					if(url.charAt(url.length-1)=="&" || url.charAt(url.length-1)=="?")
						url = url.substr(0,url.length-1);
				    window.location = url;
				}
			})
			
		}
		$("#filter .filter-clear a").click(function(){
			var loc = window.location.href;
			var url = null;
			var forwhat = $(this).attr("for");
			$("#filter ."+forwhat+" a.active").each(function(){
				$(this).removeClass("active");
				url = loc.replace($(this).attr("href")+"&","");
				if(url == loc)
					url = loc.replace($(this).attr("href"),"");

				if(url.charAt(url.length-1)=="&" || url.charAt(url.length-1)=="?")
					url = url.substr(0,url.length-1);
				loc = url;
			})
			window.location = url;
		})
	}
	this.makeNewAlbum = function(){
		$.get("add_album",function(html){
			rcom.modalWindow({loadHtml:html,width:400,height:320,"closeBtn":false},function(dom){
				dom.find("#album_name_save_btn").click(function(){
					var options ={
						cid : dom.find("select#category_list").val(),
						albumname : {
							"en" : dom.find("#name_en").val(),
							"zh_tw" : dom.find("#name_zh_tw").val()
						},
						albumdesc : {
							"en" : dom.find("#desc_en").val(),
							"zh_tw" : dom.find("#desc_zh_tw").val()
						}
					}
					if(options.cid){
						$.post("create_album",options,function(response){
							if(g.loadArea == "albums")
								g.loadAlbums("all");
							rcom.modalWindowClose();
						})
					}
				})
				dom.find("#album_name_close_btn").click(function(){
					rcom.modalWindowClose();
				})
			})

		})
	}
	this.deleteAlbum = function(id){
		if(confirm("<%= I18n.t('gallery.del_album?') %>")){
			$.post("delete_album",{aid:id},function(){
				window.location = "orbit_gallery";
			})
		}
	}

	this.loadAlbums = function(id){
		g.loadFooterPanel(g.loadArea,id,function(headbtn){
			headbtn = $(headbtn);
			headbtn.click(function(){g.makeNewAlbum();})
			g.albumArea.find(".rghead .rgfn").html(headbtn);
		})
		
		g.albumArea.addClass('o_gallery');
		g.albumArea.find("#imgholder").empty();
		// var $addsign = $('<div class="rgalbum"><a id="global_add" class="rgui bt-addnew" href="add" onclick="return false;">Add Album</a></div>');
		// $addsign.find("a").click(function(){g.makeNewAlbum();})

		if(id!="all"){
			var cids = [];
			var tids = [];
			var href = null;
		    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		    for(var i = 0; i < hashes.length; i++){
		        hash = hashes[i].split('=');
		        if(hash[0]=="cat"){
		        	cids.push(hash[1]);
		        	href = "cat="+hash[1];
		    	}else if(hash[0]=="tag"){
		    		tids.push(hash[1]);
		    		href = "tag="+hash[1];
		    	}
		        $("#filter .filter_btns a[href='"+href+"']").addClass("active");
		    }
		    if(cids.length == 0)
		    		cids = "all";
		}else{
			var cids = "all";
		}
		$.getJSON("get_albums",{cid:cids,tid:tids},function(categories){
			$.each(categories,function(x,category){
				$.each(category,function(i,album){
					if(album.cover == "default")
						var $img = $("<div class='rgalbum'><a title='"+album.description+"' href='?album="+album._id+"'><img src='../../../assets/gallery/default.jpg' width='120px' height='90px'/></a><span class='albumname'>"+album.name+"</span><span class='categoryname'>"+album.category_name+"</span><span class='tagnames'></span></div>");
					else
						var $img = $("<div class='rgalbum'><a title='"+album.description+"' href='?album="+album._id+"'><img src='"+album.cover_path+"' width='120px' height='90px'/></a><span class='albumname'>"+album.name+"</span><span class='categoryname'>"+album.category_name+"</span><span class='tagnames'></span></div>");
					var tag_string = "";
					for(tag in album.tag_names){
						tag_string+= '<span class="label label-tags">' + album.tag_names[tag] + '</span>';
					}
					$img.find(".tagnames").html(tag_string);
					g.albumArea.find("#imgholder").append($img);
				})
			})
			// g.albumArea.find("#imgholder").append($addsign);
		})
	}
	this.loadImages = function(id){
		var panelopen = false;
		g.loadFooterPanel(g.loadArea,id,function(headerPanel){
			headarea = $(headerPanel);
			g.albumArea.find(".rghead .rgfn").html(headarea);
				$('.bt-tag').click(function(){
					$(this).toggleClass("active");
					var $tag_panel = $('#tag_panel'),
						tag_panel_position = 0;

					if( $tag_panel.css('right') == '0px' ){
						tag_panel_position = -200;
					}
					$tag_panel.animate({'right':tag_panel_position}, 300);

					g.albumArea
						.delay(200)
						.animate({'margin-right':tag_panel_position+200},300);
					return false;
				});
			g.albumArea.find("#tag_search_box").keyup(function(e){
				sval = $(this).val();
				if(sval == "<%= I18n.t('gallery.search_tags') %>")
						sval = "";
				sval = sval.replace(/(^\s*)|(\s*$)/g,'');
				if(sval){
					var re1 = new RegExp("^[\u4E00-\uFA29]*$"); //Chinese character range 
					var re2 = new RegExp("^[\uE7C7-\uE7F3]*$");
					if ((re1.test(sval) && (re2.test(sval)))){
						$("#gallery_tag_list li span:not(:contains("+sval+"))").parent().slideUp();
					}else{
						$("#gallery_tag_list li span:not(:containsi("+sval+"))").parent().slideUp();
					}
				}else{
					$("#gallery_tag_list li").slideDown();
				}
			})
			g.albumArea.find("#tag_panel .bt-save").click(function(){
				g.saveTags(id,g.loadArea);
			})
			g.albumArea.find(".rghead .rgfn .bt-add").click(function(){
				showUploadPanel();
			})
			g.albumArea.find(".rghead .rgfn .bt-del").click(function(){
				g.deleteAlbum(id);
			})
		})
		var uploadpanel = $('<div id="upload_panel_holder"><div class="rgfn"><a class="bt-cls btn btn-primary pull-right" title="Close" href="" onclick="return false;"><i class="icon-remove icon-white"></i>Close Panel</a></div></div>');
		var frame = $('<iframe id="upload_panel" width="100%" scrolling="no" height="294" frameborder="0" src="upload_panel"></iframe>');
		uploadpanel.find(".bt-cls").click(function(){
			uploadpanel.hide("slide");
			frame.remove();
			g.loadImages(id);
			panelopen = false;
		})
		var showUploadPanel = function(){
			if(!panelopen){
				uploadpanel.prepend(frame);
				uploadpanel.show("slide");
				panelopen = true;
			}
		}
		
		g.albumArea.addClass('o_album');
		g.albumArea.find(".rghead .rgfn").append(uploadpanel);
		g.albumArea.find("#imgholder").empty();
		$("#filter").remove();
		g.albumArea.css("margin-top","");
		$.getJSON("get_images",{aid:id},function(album){
			$.each(album.images,function(i,image){
				var thumb = image.file.thumb.url;
				var $img = $("<div class='rgphoto'><a title='"+image.description+"' href='?theater="+image._id+"'><img src='"+thumb+"'/></a></div>");
				g.albumArea.find("#imgholder").append($img);
			})
			g.tagList.find("input").attr("checked",false);
			if(typeof album.tag_names == "undefined"){
				$.each(album.tags,function(i,tag){
					g.tagList.find("li[data-content="+tag+"] input").attr("checked",true);
				})
			}else{
				$.each(album.tag_names,function(i,tagname){
					$li = $("<li><label>"+tagname+"</label><span style='display:none;'>"+tagname+"</span></li>");
					g.tagList.append($li);
				})
			}
			// g.albumArea.find("#imgholder").append($addsign);
		})
		// g.albumArea.find("#imgholder").append($addsign);
		// tag
		
	}
	this.loadTheater = function(id){
		var imageArray;
		var imagecount = 0;
		var picHeight = 0;
		var bindHandlers = function(){
			var $slidelist = $('.slidelist'),
				$rslide = $('.rslide'),
				$rslidenav = $('.rslidenav'),
				$img = $("#main_pic img"),
				wHeight = $(window).height();

				$("#main_pic").height(picHeight);
				$img.height("100%");
			
			$('.bt-tag').click(function(){
				if(!$(this).hasClass("active"))
					updatePhotoTag();
				$(this).toggleClass("active");
				var $tag_panel = $('#tag_panel'),
					tag_panel_position = 0;

				if( $tag_panel.css('right') == '0px' ){
					tag_panel_position = -200;
				}
				$tag_panel.animate({'right':tag_panel_position}, 300);

				g.albumArea
					.delay(200)
					.animate({'margin-right':tag_panel_position+200},300);
				return false;
			});
			var updatePhotoTag = function(){
				var tags = imageArray[imagecount].tag_ids;
				g.tagList.find("input").attr("checked",false);
				for(tag in tags){
					g.tagList.find("li[data-content="+tags[tag]+"] input").attr("checked",true);
				}
			}
			g.albumArea.find("#tag_search_box").keyup(function(e){
				sval = $(this).val();
				if(sval == "<%= I18n.t('gallery.search_tags') %>")
						sval = "";
				sval = sval.replace(/(^\s*)|(\s*$)/g,'');
				if(sval){
					var re1 = new RegExp("^[\u4E00-\uFA29]*$"); //Chinese character range 
					var re2 = new RegExp("^[\uE7C7-\uE7F3]*$");
					if ((re1.test(sval) && (re2.test(sval)))){
						$("#gallery_tag_list li span:not(:contains("+sval+"))").parent().slideUp();
					}else{
						$("#gallery_tag_list li span:not(:containsi("+sval+"))").parent().slideUp();
					}
						
				}else{
					$("#gallery_tag_list li").slideDown();
				}
			})
			g.albumArea.find("#tag_panel .bt-save").click(function(){
				g.saveTags(imageArray[imagecount]._id,g.loadArea);
			})
			$(".slidectrl a.togglelist").click(function(){
				var rslide_h = $rslide.outerHeight();
				if ( $slidelist.height() < 1 ){
					$slidelist.stop().animate({'height':rslide_h - 30}, 300);
					$slidelist.find("ul").show();
				} else {
					$slidelist.stop().animate({'height':'0px'}, 300);
					$slidelist.find("ul").hide();
				}
			})
			$(".slidectrl .togglescreen").click(function(){
				toggleFullscreen();
			})
			$(".slidectrl .browserfullscreen").click(function(){
				browserFullScreen();
			})
			$slidelist.find(".list_element").click(function(){
				imagecount = parseInt($(this).parent().attr("for"));
				changeImage($(this));
			})
			$rslidenav.find(".navN").click(function(){
				nextpic($(this));
			})
			$rslidenav.find("a.navP").click(function(){
				prevpic($(this));
			})
			$("#nextpic").click(function(){
				nextpic($(this));
			})

			$(document).keydown(function(e){
			    if (e.keyCode == 37){ 
			    	prevpic($rslidenav.find(".navP"));
			       return false;
			    }
			    if(e.keyCode == 39){
			    	nextpic($rslidenav.find(".navN"));
			    	return false;
			    }
			    if(e.keyCode == 27){
			    	toggleFullscreen();
			    	$rslide.removeClass('browserFullScreen');
			    	return false;
			    }
			    if(e.keyCode == 70 || e.keyCode == 102){
			    	if($rslide.hasClass("fullscreen"))
			    	 browserFullScreen();
			    }
			});
			var browserFullScreen = function(){
				var el = document.documentElement,
      				rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
    			rfs.call(el);
    			$rslide.addClass('browserFullScreen');
			}
			var nextpic = function(dom){
				if(imagecount == imageArray.length - 1)
					imagecount = 0;
				else
					imagecount++;
				changeImage(dom);
			}
			var prevpic = function(dom){
				if(imagecount == 0)
					imagecount = imageArray.length - 1
				else
					imagecount--;
				changeImage(dom);
			}
			var toggleFullscreen = function(){
				if($rslide.hasClass("fullscreen")){
					$rslide.css("position","relative");
					$rslide.removeClass("fullscreen");
					$(".slidectrl .browserfullscreen").hide();
					$img.css({"padding":""})
					$("#main_pic").height(picHeight );
				}else{
					 $("#main_pic").height(wHeight);
					// $img.height("100%");
					$rslide.css("position","");
					$rslide.addClass("fullscreen");
					$img.css({"padding":($rslide.height()-$img.height())/2})
					$(".slidectrl .browserfullscreen").show();
				}
			}
			var changeImage = function(dom){
				var pageurl = dom.attr('href');
				$img.fadeOut(200,function(){
					$img.attr({"src":dom.attr("data-content"),"height":picHeight+"px"});
					$img.fadeIn(200);
	 				if($rslide.hasClass("fullscreen")){
	 					$img.css({"padding":($rslide.height()-$img.height())/2})
	 				}
	 				$slidelist.stop().animate({'height':'0px'}, 300);
					$slidelist.find("ul").hide();
				    if(pageurl!=window.location){
				      window.history.pushState({path:pageurl},'',pageurl);
				    }
				    // $(".slideinfo b.info").text(imageArray[imagecount].title);
				    if($('.bt-tag').hasClass("active"))
				    	updatePhotoTag();
				    $(".slideinfo .info").text(imageArray[imagecount].description);
				    if(imageArray.length > 1)
				    	updateNavigation();
			    })

			}
			var updateNavigation = function(){
				var next, prev;
				if(imagecount == 0){
					next = 1;
					prev = imageArray.length - 1; 
				}else if(imagecount == imageArray.length - 1){
					next = 0
					prev = imageArray.length - 2;
				}else{
					next = imagecount + 1;
					prev = imagecount - 1;
				}
				$(".navN").attr({"href":"orbit_gallery?theater="+imageArray[next]._id,"data-content":imageArray[next].file.url});
				$(".navP").attr({"href":"orbit_gallery?theater="+imageArray[prev]._id,"data-content":imageArray[prev].file.url});
			};
			if(imageArray.length > 1)
				updateNavigation();
		}
		
		var preparestage = function(albumid){
			$.getJSON("get_images",{aid:albumid},function(album){
				imageArray = eval(album.images);
				$.each(album.images,function(i,image){
					if(image._id == id)
						imagecount = i;
				})
				bindHandlers();
			})
		}
		g.albumArea.find("#imgholder").load("theater?pic="+id,function(theater,response,xhr){
			if(xhr.status == 404){
				$(this).text("<%= I18n.t('gallery.pic_not_found') %>.");
				return false;
			}
			$("#filter").remove();
			g.albumArea.css("margin-top","");
			var albumid = $(theater).find("#main_pic").attr("data-content");
			g.loadFooterPanel(g.loadArea,id,function(head){
				head = $(head);		
				g.albumArea.find(".rghead .rgfn").html(head);
				g.albumArea.find(".bt-back").attr("href","orbit_gallery?album="+albumid);
				g.albumArea.find(".bt-edit").attr("href","orbit_gallery?edit="+albumid);	
			})
			g.albumArea.css("margin-bottom","0");
			picHeight = $(window).height() - ($("#orbit-bar").outerHeight() + $("#orbit_gallery .form-actions").outerHeight());
			preparestage(albumid);
			
		});
	}

	this.editAlbum = function(id){
		var bindHandlers = function(){
			$(".nav .nav-tabs a").click(function(){
				$(".tab_content .tab-pane").hide();

			})
			$(".description_loader .edit_fn .bt-cover").click(function(){
				$(".bt-cover").removeClass("setcover");
				$(this).addClass("setcover");
				$.post("set_cover",{"imageid":$(this).attr("href"),"aid":id},function(){})
			})
			$(".description_loader .edit_fn .bt-dels").click(function(){
				$(this)
					.toggleClass("setdelete btn-danger active")
					.find('span').toggleClass('icon-white');
				if($(".description_loader .edit_fn .setdelete").length > 0){
					g.albumArea.find(".rghead .rgfn .bt-delete").show();
				}else{
					g.albumArea.find(".rghead .rgfn .bt-delete").hide();
				}
			})
			g.albumArea.find(".rghead .rgfn .bt-save").click(function(){
				// var dataArray =  Array();
				// $(".description_loader .en .txtchange").each(function(){
				// 	var thisid = $(this).attr("for");
				// 	dataArray.push({"id":thisid,"text":{"en":$(this).val(),"zh_tw":$(".description_loader .zh_tw .txtchange[for="+thisid+"]").val()}});
				// })
				// var albumnm = Array();
				// $(".albumname_edit .txtchange").each(function(){
				// 	albumnm.push($(this).val())
				// })
				 // var dataArray = $("form#edit_album").serialize();
				// $.post("update_album",{"data":dataArray},function(){

				// })

			})
			var tag_panel_hidden = true;
			var last_clicked = null;
			$('.bt-tag').click(function(){
				$(this).toggleClass("active");
				
				var $tag_panel = $('#tag_panel'),
					tag_panel_position = 0;
					if( $tag_panel.css('right') == '0px' ){
						tag_panel_position = -200;
					}
				if(last_clicked == $(this))
					alert("same")
				else
					alert("no")
				$tag_panel.animate({'right':tag_panel_position}, 300);

				g.albumArea
					.delay(200)
					.animate({'margin-right':tag_panel_position+200},300);
					
				return false;
			});
			g.albumArea.find("#tag_search_box").keyup(function(e){
				sval = $(this).val();
				if(sval == "<%= I18n.t('gallery.search_tags') %>")
						sval = "";
				sval = sval.replace(/(^\s*)|(\s*$)/g,'');
				if(sval){
					var re1 = new RegExp("^[\u4E00-\uFA29]*$"); //Chinese character range 
					var re2 = new RegExp("^[\uE7C7-\uE7F3]*$");
					if ((re1.test(sval) && (re2.test(sval)))){
						$("#gallery_tag_list li span:not(:contains("+sval+"))").parent().slideUp();
					}else{
						$("#gallery_tag_list li span:not(:containsi("+sval+"))").parent().slideUp();
					}
						
				}else{
					$("#gallery_tag_list li").slideDown();
				}
			})
			g.albumArea.find("#tag_panel .bt-save").click(function(){
				g.saveTags(imageArray[imagecount]._id,g.loadArea);
			})
			var tempval;
			$(".txtchange").focus(function(){
				tempval = $(this).val();
			}).keyup(function(){
				if($(this).val() != tempval)
					g.albumArea.find(".rghead .rgfn .bt-save").show();
			})
			g.albumArea.find(".rghead .rgfn .bt-delete").click(function(){
				var images_to_delete = new Array();
				var delete_cover = false;
				var doms_to_delete = new Array();
				var thiscover = $(".description_loader .edit_fn .setcover").attr("href");
				$(".description_loader .edit_fn .bt-dels").each(function(){
					if($(this).hasClass("setdelete")){
						images_to_delete.push($(this).attr("href"));
						doms_to_delete.push($(this).parent().parent());
						if(thiscover == $(this).attr("href"))
							delete_cover = true;
					}
				})
				if(confirm("Deleting "+images_to_delete.length+" image(s)?")){
					$.post("delete_images",{"images":images_to_delete,"delete_cover":delete_cover,"aid":id},function(response){
						if(response.success){
							for(dom in doms_to_delete){
								doms_to_delete[dom].hide("slide",function(){$(this).remove();})
							}
						}
						g.albumArea.find(".rghead .rgfn .bt-delete").hide();
					})
				}
			})
		}
		$("#filter").remove();
		g.albumArea.addClass('o_album_edit');
		g.albumArea.css("margin-top","");
		var head ='<a href="orbit_gallery?album='+id+'" class="bt-back btn pull-left" title="<%= I18n.t("gallery.back_to_photos") %>"><i class="icon-arrow-left icon-black"></i><%= I18n.t("gallery.back_to_photos") %></a></div>';
			head+='<a class="bt-del bt-delete btn btn-primary pull-right" onclick="return false;" style="display:none;" title="<%= I18n.t("gallery.delete_selected") %>" href=""><i class="icon-trash icon-white"></i><%= I18n.t("gallery.delete_selected") %></a>';
			head+='<a class="bt-save btn btn-primary pull-right" onclick="return false;" style="display:none;" title="Save" href=""><i class="icon-ok icon-white"></i>Save</a>';
		g.albumArea.find(".rghead .rgfn").html(head);
		g.albumArea.find("#imgholder").load("edit_album?aid="+id,function(data,response,xhr){
			if(xhr.status == 404){
				$(this).text("<%= I18n.t('gallery.album_not_found') %>");
				return false;
			}
			bindHandlers();
		})
	}
	this.saveTags = function(id,tagsfor){
		var tagids = new Array();
		g.tagList.find("li input:checked").each(function(){
			tagids.push($(this).parent().attr("data-content"));
		})
		var tag = null;
		if(g.loadArea == "images")
			tag = "album";
		else if(g.loadArea == "theater")
			tag = "pic";

		$.post("save_tags",{"id":id,"tag":tag,"tids":tagids},function(){

		})	
	}
}
galleryAPI.prototype.locale = "en";