Gallery update..

app/uploaders/gallery_uploader.rb

@@ -35,7 +35,7 @@ class GalleryUploader < CarrierWave::Uploader::Base
   # end
   
   version :thumb do
-    process :resize_to_fit => [120, 90]
+    process :resize_to_fill => [120, 90]
   end
 
   # Add a white list of extensions which are allowed to be uploaded.

vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI.js

@@ -15,6 +15,9 @@ var galleryAPI = function(){
 			}else if(typeof g.urlVars['theater']!= "undefined"){
 				g.loadTheater(g.urlVars['theater']);
 				g.loadArea = "theater";
+			}else if(typeof g.urlVars['edit']!= "undefined"){
+				g.editAlbum(g.urlVars['edit']);
+				g.loadArea = "edit";
 			}else{
 				g.loadAlbums("all");
 				g.loadArea = "albums";
@@ -97,6 +100,14 @@ var galleryAPI = function(){
 
 		})
 	}
+	this.deleteAlbum = function(id){
+		if(confirm("Delete this Album?")){
+			$.post("delete_album",{aid:id},function(){
+				window.location = "orbit_gallery";
+			})
+		}
+	}
+
 	this.loadAlbums = function(id){
 		var headbtn = $('<a class="rgui bt-add rgbt" title="Add Album" href="albums" onclick="return false;"><span>Add Album</span></a>');
 		headbtn.click(function(){g.makeNewAlbum();})
@@ -106,7 +117,10 @@ var galleryAPI = function(){
 		$addsign.find("a").click(function(){g.makeNewAlbum();})
 		$.getJSON("get_albums",{cid:id},function(albums){
 			$.each(albums,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></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></div>");
 				g.albumArea.find("#imgholder").append($img);
 			})
 			g.albumArea.find("#imgholder").append($addsign);
@@ -115,13 +129,20 @@ var galleryAPI = function(){
 	this.loadImages = function(id){
 		//<iframe id="upload_panel" width="100%" scrolling="no" height="300" frameborder="0" src="upload_panel.html?id=16">
 
-		var headarea = $('<a class="rgui bt-back rgbt" title="Back to Albums" href="orbit_gallery"><span>Back to Album</span></a>');
+		var headarea = '<a class="rgui bt-back rgbt" title="Back to Albums" href="orbit_gallery"><span>Back to Album</span></a> ';
-		headarea.append($('<a class="rgui bt-add rgbt" title="Add Images" href="images" onclick="return false;"><span>Add Images</span></a>'));
+		headarea+='<a class="rgui bt-add rgbt" title="Add Images" href="images" onclick="return false;"><span>Add Images</span></a> ';
+		headarea+='<a class="rgui bt-del rgbt" title="Delete Album" href="delete" onclick="return false;"><span>Delete this album</span></a> ';
+		headarea+='<a class="rgui bt-edit rgbt" title="Edit Album" href="orbit_gallery?edit='+id+'" ><span>Edit</span></a>';
+		headarea = $(headarea);
 		var uploadpanel = $('<div id="upload_panel_holder" style="display:none; margin: 16px 0 50px 0;"><div class="rgfn"><a class="rgui bt-cls rgbt" title="Close" href="" onclick="return false;"><span id="album_name_span">Close Panel</span></a></div></div>');
 		var frame = $('<iframe id="upload_panel" width="100%" scrolling="no" height="300" frameborder="0" src="upload_panel"></iframe>');
-		headarea.find("a.bt-add").click(function(){
+		g.albumArea.find(".rghead .rgfn").html(headarea);
+		g.albumArea.find(".rghead .rgfn a.bt-add").click(function(){
 			showUploadPanel();
 		})
+		g.albumArea.find(".rghead .rgfn a.bt-del").click(function(){
+			g.deleteAlbum(id);
+		})
 		uploadpanel.find("a.bt-cls").click(function(){
 			uploadpanel.hide("slide");
 			frame.remove();
@@ -136,7 +157,7 @@ var galleryAPI = function(){
 				panelopen = true;
 			}
 		}
-		g.albumArea.find(".rghead .rgfn").html(headarea);
+		
 		g.albumArea.find(".rghead .rgfn").append(uploadpanel);
 		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>');
@@ -153,13 +174,216 @@ var galleryAPI = function(){
 
 	}
 	this.loadTheater = function(id){
-		var head = $('<a href="" class="rgui bt-back rgbt" title="Back"><span id="album_name_span">Back to photos</span></a></div><div class="rgtitle">Gallery</div>');
+		var imageArray;
-		g.albumArea.find("#imgholder").load("theater?pic="+id,function(theater){
+		var imagecount = 0;
-			var albumid = $(theater).find("#main_pic").attr("data-content");
+		var picHeight = 0;
-			head.attr("href","orbit_gallery?album="+albumid);
+		var bindHandlers = function(){
-			g.albumArea.find(".rghead .rgfn").html(head);
+			var $slidelist = $('.slidelist'),
+				$rslide = $('.rslide'),
+				$rslidenav = $('.rslidenav'),
+				$img = $("#main_pic img");
+			$(".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 a.togglescreen").click(function(){
+				toggleFullscreen();
+			})
+			$slidelist.find("a.list_element").click(function(){
+				imagecount = parseInt($(this).parent().attr("for"));
+				changeImage($(this));
+			})
+			$rslidenav.find("a.navN").click(function(){
+				nextpic($(this));
+			})
+			$rslidenav.find("a.navP").click(function(){
+				prevpic($(this));
+			})
+			$("a#nextpic").click(function(){
+				nextpic($(this));
+			})
+
+			$(document).keydown(function(e){
+			    if (e.keyCode == 37){ 
+			    	prevpic($rslidenav.find("a.navP"));
+			       return false;
+			    }
+			    if(e.keyCode == 39){
+			    	nextpic($rslidenav.find("a.navN"));
+			    	return false;
+			    }
+			    if(e.keyCode == 27){
+
+			    	toggleFullscreen();
+			    	return false;
+			    }
+			});
+
+			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");
+					$img.css({"padding":""})
+				}else{
+					$rslide.css("position","");
+					$rslide.addClass("fullscreen");
+					$img.css({"padding":($rslide.height()-$img.height())/2})
+				}
+			}
+			var changeImage = function(dom){
+				var pageurl = dom.attr('href');
+ 				$img.attr({"src":dom.attr("data-content"),"height":picHeight+"px"});
+ 				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);
+			    $(".slideinfo span.info").text(imageArray[imagecount].description);
+			    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;
+				}
+				$("a.navN").attr({"href":"orbit_gallery?theater="+imageArray[next]._id,"data-content":imageArray[next].file.url});
+				$("a.navP").attr({"href":"orbit_gallery?theater="+imageArray[prev]._id,"data-content":imageArray[prev].file.url});
+			};
+			updateNavigation();
+		}
+		
+		var preparestage = function(albumid){
+			$.getJSON("get_images",{aid:albumid},function(images){
+				imageArray = eval(images);
+				$.each(images,function(i,image){
+					if(image._id == id)
+						imagecount = i;
+				})
+				bindHandlers();
 			})
 		}
+
+		var head = $('<a href="" class="rgui bt-back rgbt" title="Back"><span id="album_name_span">Back to photos</span></a></div>');
+		var head1 = $('<a class="rgui bt-edit rgbt" title="Edit Album" href="" ><span>Edit</span></a>');
+		g.albumArea.find("#imgholder").load("theater?pic="+id,function(theater,response,xhr){
+			if(xhr.status == 404){
+				$(this).text("Pic not found.");
+				return false;
+			}
+			var albumid = $(theater).find("#main_pic").attr("data-content");
+			head.attr("href","orbit_gallery?album="+albumid);
+			head1.attr("href","orbit_gallery?edit="+albumid);
+			g.albumArea.find(".rghead .rgfn").html(head);
+			g.albumArea.find(".rghead .rgfn").append(head1);
+			picHeight = $(window).height() - ($("#orbit-bar").outerHeight() + $("#gallery_panel").outerHeight() + $("#orbit_gallery .rghead").outerHeight());
+			preparestage(albumid);
+		})
+	}
+
+	this.editAlbum = function(id){
+		var bindHandlers = function(){
+			$("#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");
+				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 .txtchange").each(function(){
+					dataArray.push({"id":$(this).attr("for"),"text": $(this).val()});
+				})
+				
+				$.post("update_album",{data:dataArray},function(){
+
+				})
+			})
+			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();})
+							}
+						}
+					})
+				}
+			})
+		}
+
+		var head = '<a href="orbit_gallery?album='+id+'" class="rgui bt-back rgbt" title="Back"><span id="album_name_span">Back to photos</span></a></div>';
+			head+='<a class="rgui bt-del bt-delete rgbt" onclick="return false;" style="display:none;" title="Delete Selected" href=""><span>Delete Selected</span></a>';
+			head+='<a class="rgui bt-save rgbt" onclick="return false;" style="display:none;" title="Save" href=""><span>Save</span>';
+		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("Album not found.");
+				return false;
+			}
+			bindHandlers();
+		})
+	}
+
+
 }
 
 

vendor/built_in_modules/gallery/app/assets/stylesheets/gallery.css

@@ -55,7 +55,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	padding: 0 8px;
 	}
 .rgbody {
-	padding: 20px 0 0 20px;
+	/*padding: 20px 0 0 20px;*/
 	}
 .rgfn { float: right; padding: 4px 8px 0 0; }
 .rgalbum, .rgphoto { float: left; margin: 0 16px 24px 0; }
@@ -185,7 +185,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 	overflow: hidden;
 	position: relative;
 	}
-.comp img{ display: block; width: 100%; height: auto; margin: 0 auto; cursor: pointer; min-height: 250px; }
+.comp img{ display: block; width: auto; height: auto; margin: 0 auto; cursor: pointer; min-height: 250px; }
 .comp .full{ width: auto; height: auto; max-width: 100%; max-height: 100%; }
 .rslidenav { 
 	position: absolute;
@@ -433,12 +433,12 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
 .bt-languages:active { background-position: -477px -72px; }
 
 .inputui {
-	background: transparent 0 0 url(../../images/gallery/inputui.png) no-repeat;
+	background: transparent 0 0 url(../../../assets/gallery/inputui.png) no-repeat;
 	padding: 0 0 0 4px;
 	margin: 0 0 8px 0;
 	}
 .inputui span {
-	background: transparent 0 0 url(../../images/gallery/inputui.png) no-repeat;
+	background: transparent 0 0 url(../../../assets/gallery/inputui.png) no-repeat;
 	padding: 0 4px 0 0;
 	display: block;
 	}

vendor/built_in_modules/gallery/app/controllers/panel/gallery/back_end/orbit_galleries_controller.rb

@@ -44,7 +44,6 @@ class Panel::Gallery::BackEnd::OrbitGalleriesController < OrbitBackendController
 	end
 
 	def upload_image
-		
 		albumid = params['aid'];
 		@album = GalleryAlbum.find(albumid)
 		@files = params['files']
@@ -70,12 +69,54 @@ class Panel::Gallery::BackEnd::OrbitGalleriesController < OrbitBackendController
 
 	def theater
 		picid = params["pic"]
-		image = GalleryImage.find(picid)
+		@image = GalleryImage.find(picid)
-		@albumid = image.gallery_album_id
+		@albumid = @image.gallery_album_id
-		@url = image.file.url
+		album = GalleryAlbum.find(@albumid)
+		@images = album.gallery_images.all
 		render :layout=>false
 	end
 
+	def delete_album
+		aid = params['aid']
+		album = GalleryAlbum.find(aid)
+		album.delete
+		render :json =>{"success"=>true}.to_json
+	end
+
+	def edit_album
+		aid = params['aid']
+		album = GalleryAlbum.find(aid)
+		@images = album.gallery_images.all
+		@album_name = album.name
+		@cover = album.cover
+		render :layout => false
+	end
+
+	def set_cover
+		aid = params['aid']
+		album = GalleryAlbum.find(aid)
+		image = GalleryImage.find(params[:imageid])
+		album.update_attributes({:cover_path => image.file.thumb.url, :cover=>params[:imageid]})
+		render :json =>{"success"=>true}.to_json
+	end
+
+	def delete_images
+		images = params['images']
+		images.each do |image|
+			img = GalleryImage.find(image)
+			img.delete
+		end
+		if params['delete_cover'] == "true"
+			debugger
+			album = GalleryAlbum.find(params['aid'])
+			album.update_attributes(:cover=>"default")
+		end
+		render :json =>{"success"=>true}.to_json
+	end
+
+	def update_album
+		render :json =>{"success"=>true}.to_json
+	end
 end
 
 

vendor/built_in_modules/gallery/app/models/gallery_album.rb

@@ -4,7 +4,8 @@ class GalleryAlbum
 
   	field :name
   	field :description
-  	field :album_cover, default: "default"
+  	field :cover, default: "default"
+  	field :cover_path
 
   	belongs_to :gallery_category
   	has_many :gallery_images, :autosave => true, :dependent => :destroy

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/orbit_galleries/edit_album.html.erb

@@ -0,0 +1,24 @@
+<div class="albumname_edit">
+	<label for="">Album Name:</label>
+	<div class="inputui rginput rgih26 w380"><span><input type="text" id='album_name_text' value="<%= @album_name %>" class="txtchange" /></span></div>
+</div>
+<div id='description_loader'>
+	<% @images.each do |image| %>
+	<div class="rgphoto_edit">
+		<a href="orbit_gallery?theater=<%= image.id %>"><img src="<%= image.file.url %>"></a>
+		<div class="inputui rginput rgih98 w380">
+			<span>
+				<textarea  name="description_box" class="txtchange" for="<%= image.id%>"><%= image.description %></textarea>
+			</span>
+		</div>
+		<div class="edit_fn">
+			<a class="rgui rgbt rgbtsg bt-dels" onclick="return false;" title="Delete" href="<%= image.id %>">Delete</a>
+			<% if image.id.to_s == @cover %>
+				<a class="rgui rgbt rgbtsg bt-cover setcover" onclick="return false;" title="Set Cover" href="<%= image.id %>">Set Cover</a>
+			<% else %>
+				<a class="rgui rgbt rgbtsg bt-cover" onclick="return false;" title="Set Cover" href="<%= image.id %>">Set Cover</a>
+			<% end %>
+		</div>
+	</div>
+	<% end %>
+</div>

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/orbit_galleries/theater.html.erb

@@ -7,38 +7,27 @@
 	</div> -->
 	<div class="rslide" style="position:relative; width:100%;">
 		<div class="rslideinside"><div id="loading" style="display:none;"></div>
-			<div class="comp" id='main_pic' data-content='<%= @albumid %>'><img src="<%= @url %>" alt="" /></div>
+			<div class="comp" id='main_pic' data-content='<%= @image.gallery_album_id %>'><a href="" id="nextpic" class="navN" title="下一張" onclick="return false;" ><img src="<%= @image.file.url %>" alt="" /></a></div>
 			<div class="rslidenav">
-				<a href="" class="navP" title="上一張">Prev</a>
+				<a href="" class="navP" title="上一張" onclick="return false;">Prev</a>
-				<a href="" class="navN" title="下一張">Next</a>
+				<a href="" class="navN" title="下一張" onclick="return false;">Next</a>
 			</div>
 		</div>
 		<div class="slidelist">
 			<ul id='galleryimagelist' style="display:none;">
-				<!--<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
+				<% i=0 %>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
+				<% @images.each do |image| %>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
+					<li for="<%= i %>"><a href="orbit_gallery?theater=<%= image.id %>" class="list_element" data-content="<%= image.file.url %>" onclick="return false;"><img src="<%= image.file.thumb.url %>" alt=""/></a></li>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
+					<% i=i+1 %>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
+				<% end  %>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>
-				<li><a href=""><img src="../../images/gallery/sample.jpg" alt=""/></a></li>-->
 			</ul>
 		</div>
 		<div class="slidectrl">
-			<a href="" class="togglescreen" title="切換全螢幕">Screen</a>
+			<a href="" class="togglescreen" title="切換全螢幕" onclick="return false;">Screen</a>
-			<a href="" class="togglelist" title="顯示照片清單">List</a>
+			<a href="" class="togglelist" title="顯示照片清單" onclick="return false;">List</a>
-			<a href="" class="sharebt" id="sharebt" title="複製照片連結">Share</a>
 			<div class="slideinfo">
-				<b class="info">PORSCHE</b>
+			<!-- 	<b class="info"><%= @image.title %></b> -->
-				<span class="info"></span>
+				<span class="info"><%= @image.description %></span>
 			</div>
 		</div>
 	</div>

vendor/built_in_modules/gallery/config/routes.rb

@@ -13,6 +13,11 @@ Rails.application.routes.draw do
 	      	match "upload_panel" => "orbit_galleries#upload_panel"
 	      	match "get_images" => "orbit_galleries#get_images"
 	      	match "theater" => "orbit_galleries#theater"
+	      	match "delete_album" => "orbit_galleries#delete_album"
+	      	match "edit_album" => "orbit_galleries#edit_album"
+	      	match "set_cover" => "orbit_galleries#set_cover"
+	      	match "delete_images" => "orbit_galleries#delete_images"
+	      	match "update_album" => "orbit_galleries#update_album"
 	      end
 	  	end
 	end