ruby_gallery 0.1.5 → 0.1.6

data/app/assets/javascripts/ruby_gallery.js

@@ -1,51 +1,73 @@
-
-  clearInterval(window.refeshWork);
-	window.refeshWork = null;
+$(document).ready(function(){	
   
-  jQuery('#fileupload').fileupload({
-     dropZone: $('#fileupload'),
-  	 progressInterval: 20,		
-     add: function(e,data){
-       
-       if ($('span#upload_button').attr('status') == 'process'){
-  	  		return false;
-        } else {
-  				var types = /(\.|\/)(png|jpg|gif|jpeg)$/i;
-  				var file = data.files[0];
-  				if (types.test(file.type) || types.test(file.name) ){
-  					$('span.upload-button span').html("<%= t('details.processing') %>");
-						$("span#no-file").remove();
-  	    	  $('#file_box ul#photos_album').append("<li class='photo-cat new-photo' ><div id='progress' class='pic-icon' ></div></li>");
-  				  data.submit();
-  	 			} else {
-  				  alert("<%= t('details.please_upload_image_file')%>");
-  				}
-  			}
-     },
-  	 progressall: function(e, data){
-  			//   		  var progress = parseInt(data.loaded / data.total * 100, 10);
-  			// $('#file_box ul#photos_album li.new-photo').find('#progress div.bar').css('width',progress + '%' );
-  	 },
-  	 done: function(e, data){
-  	   
-  		var report = '';
-  		if(data.result != 'failed'){
-  		  var res = data.result;
-				$('span#upload_button span').html("<%= t('details.upload_picture') %>");
-				$('#file_box ul#photos_album li.new-photo').fadeOut('slow', function() {
-
-				  	$('#file_box ul#photos_album li.new-photo').remove();
-				  	$('#file_box ul#photos_album').append(res);
+  $(document.body).delegate("a.gallery-colorbox", "click", function(e){
+    $(this).colorbox({rel: "ruby_gallery"});
+    e.preventDefault();
+  });
+    
+  $('ul.ruby-gallery-sortable').sortable({
+    stop: function(event, ui){
+      $('ul.ruby-gallery-sortable').children().each(function(index){
+        $(this).find('input[name="position-item"]').val(index);
+      });
+      var arr_pos = []
+    	 $(':hidden[name^="position-item"]').each(function(){
+    	  arr_pos.push($(this).val());
+    	 });
 
-			   });
-			  
-				// var t=setTimeout(function(){
-				// }, 2000);	
-  		} else {
-  			$('#file_box ul#photos_album li.new-photo').html("<%= t('details.upload_failed') %>");
-		  	var t = setTimeout(function(){
-						$('#file_box ul#photos_album li.new-photo').remove();
-				}, 2000);
-  		}
-  	 }	
-  });
+    	 var arr_key = $("li.photo-cat").map(function(){
+         return this.getAttribute("key");
+       }).get();
+       var json_str = "";
+       for(var i = 0; i < arr_pos.length && arr_key.length; i ++ ) {
+         json_str += "{'id':'" + arr_key[i] + "', 'position':'" + arr_pos[i] + "'},"
+       }
+       var json = eval("[" + json_str + "]")
+      $.ajax({
+        url: $("ul#photos_album").attr("data_url"),
+        data: {'json': json},
+        type: "PUT",
+        success: function(res){
+        }
+      })
+    }
+  });
+  
+  $(document.body).delegate('span.remove-photo', 'click', function(e){
+    var _this = this
+    $.ajax({
+      url: "/" + $('div.file-box').attr('data_model') + "/" + $('div.file-box').attr('model_id') + "/delete_photo?photo_id="+ $(this).attr('photo_id') ,
+      type: "DELETE",
+      success: function(e){
+        if(e == "ok"){
+          var dom = $(_this).parent().find("li.photo_" + $(_this).attr('photo_id') + "").selector.toString();
+          $(dom).remove();
+        }else{
+          
+        }
+      }
+    });
+    e.preventDefault();
+  });
+  
+  $(document.body).delegate('li.photo-cat a','mouseover',function(event){
+     $(this).parent().find('span.remove-photo').addClass('blur');
+     $(this).parent().find('span.remove-photo').removeClass('hide');    
+  });
+  
+  $(document.body).delegate('li.photo-cat a','mouseout',function(event){
+    $(this).parent().find('span.remove-photo').removeClass('blur');
+    $(this).parent().find('span.remove-photo').addClass('hide');    
+  });
+  
+  $(document.body).delegate('span.remove-photo','mouseover',function(event){
+      $(this).removeClass('blur');
+      $(this).removeClass('hide');    
+  });
+  
+  $(document.body).delegate('span.remove-photo','mouseout',function(event){
+    $(this).addClass('blur');
+    $(this).removeClass('hide');    
+    
+  });
+});

data/app/assets/stylesheets/colorbox.css

@@ -0,0 +1,93 @@
+/*
+    Colorbox Core Style:
+    The following CSS is consistent between example themes and should not be altered.
+*/
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative;}
+#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
+.cboxIframe{width:100%; height:100%; display:block; border:0;}
+#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
+
+/* 
+    User Style:
+    Change the following styles to modify the appearance of Colorbox.  They are
+    ordered & tabbed in a way that represents the nesting of the generated HTML.
+*/
+#cboxOverlay{background:url(/assets/overlay.png) repeat 0 0;}
+#colorbox{outline:0;}
+    #cboxTopLeft{width:21px; height:21px; background:url(/assets/controls.png) no-repeat -101px 0;}
+    #cboxTopRight{width:21px; height:21px; background:url(/assets/controls.png) no-repeat -130px 0;}
+    #cboxBottomLeft{width:21px; height:21px; background:url(/assets/controls.png) no-repeat -101px -29px;}
+    #cboxBottomRight{width:21px; height:21px; background:url(/assets/controls.png) no-repeat -130px -29px;}
+    #cboxMiddleLeft{width:21px; background:url(/assets/controls.png) left top repeat-y;}
+    #cboxMiddleRight{width:21px; background:url(/assets/controls.png) right top repeat-y;}
+    #cboxTopCenter{height:21px; background:url(/assets/border.png) 0 0 repeat-x;}
+    #cboxBottomCenter{height:21px; background:url(/assets/border.png) 0 -29px repeat-x;}
+    #cboxContent{background:#fff; overflow:hidden;}
+        .cboxIframe{background:#fff;}
+        #cboxError{padding:50px; border:1px solid #ccc;}
+        #cboxLoadedContent{margin-bottom:28px;}
+        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
+        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
+        #cboxLoadingOverlay{background:url(/assets/loading_background.png) no-repeat center center;}
+        #cboxLoadingGraphic{background:url(/assets/loading.gif) no-repeat center center;}
+
+        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
+        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
+        
+        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
+        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
+
+        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
+        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(/assets/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
+        #cboxPrevious:hover{background-position:-75px -25px;}
+        #cboxNext{position:absolute; bottom:0; left:27px; background:url(/assets/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
+        #cboxNext:hover{background-position:-50px -25px;}
+        #cboxClose{position:absolute; bottom:0; right:0; background:url(/assets/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
+        #cboxClose:hover{background-position:-25px -25px;}
+
+/*
+  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
+  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
+  See: http://jacklmoore.com/notes/ie-transparency-problems/
+*/
+.cboxIE #cboxTopLeft,
+.cboxIE #cboxTopCenter,
+.cboxIE #cboxTopRight,
+.cboxIE #cboxBottomLeft,
+.cboxIE #cboxBottomCenter,
+.cboxIE #cboxBottomRight,
+.cboxIE #cboxMiddleLeft,
+.cboxIE #cboxMiddleRight {
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
+}
+
+/*
+  The following provides PNG transparency support for IE6
+  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
+*/
+.cboxIE6 #cboxTopLeft{background:url(/assets/ie6/borderTopLeft.png);}
+.cboxIE6 #cboxTopCenter{background:url(/assets/ie6/borderTopCenter.png);}
+.cboxIE6 #cboxTopRight{background:url(/assets/ie6/borderTopRight.png);}
+.cboxIE6 #cboxBottomLeft{background:url(/assets/ie6/borderBottomLeft.png);}
+.cboxIE6 #cboxBottomCenter{background:url(/assets/ie6/borderBottomCenter.png);}
+.cboxIE6 #cboxBottomRight{background:url(/assets/ie6/borderBottomRight.png);}
+.cboxIE6 #cboxMiddleLeft{background:url(/assets/ie6/borderMiddleLeft.png);}
+.cboxIE6 #cboxMiddleRight{background:url(/assets/ie6/borderMiddleRight.png);}
+
+.cboxIE6 #cboxTopLeft,
+.cboxIE6 #cboxTopCenter,
+.cboxIE6 #cboxTopRight,
+.cboxIE6 #cboxBottomLeft,
+.cboxIE6 #cboxBottomCenter,
+.cboxIE6 #cboxBottomRight,
+.cboxIE6 #cboxMiddleLeft,
+.cboxIE6 #cboxMiddleRight {
+    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
+}

data/app/assets/stylesheets/entypo.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+<defs >
+<font id="entypo" horiz-adv-x="508" ><font-face
+    font-family="Entypo"
+    units-per-em="1000"
+    panose-1="0 0 0 0 0 0 0 0 0 0"
+    ascent="750"
+    descent="-250"
+    alphabetic="0" />
+<missing-glyph horiz-adv-x="500" />
+</font>
+</defs>
+</svg>

data/app/assets/stylesheets/ruby_gallery.css.scss

@@ -1,93 +1,114 @@
 @import "bourbon";
 
+@font-face {
+    font-family: "entypo";
+    src: url('/assets/entypo.eot');
+    src: url('/assets/entypo.eot?#iefix') format('embedded-opentype'),
+         url('/assets/entypo.woff') format('woff'),
+         url('/assets/entypo.ttf') format('truetype'),
+         url('/assets/entypo.svg#EntypoRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+span.entypo-icon-1{
+  font-family: "entypo";
+  font-size: 3em;
+  color: #004F67;
+  cursor: pointer;
+}
+
 form.fileupload{
-  width:110px;
+  width:75px;
   float:left;
 }
 
 div.upload-box{
   display: block;
   margin: 0 auto !important;
-  width: 500px !important;
+  width: 450px !important;
+  div.legend {
+    border-bottom: 3px solid #bbb;
+    margin-bottom: 10px;
+    color: #999;
+    font-weight: bold;
+    font-size: 14px;
+  }
 }
 
 
 div.file-box{
-  
   display:block;
   margin-bottom: 5px;
   height:185px;
-  span#attachment_display{
+  width: 100%;
+  ul {
     @include clearfix;
-    span{
-      float: left;
-      display:block;
-      height:20px;
-      float: left;
-    }
-    strong {
-      float:left;
-      margin-top: 20px;
-    }
-  }
-}
-
-
-
-ul.activities-button-list{
-  display:block;
-  width:305px;
-  margin-top:10px;
-  margin-left:98px;
-  li.btn{
-    display:block;
-    float:left;
-    width: 100px;
-    height:20px;
-    @include linear-gradient(lighten(#80C66D, 5%), darken(#80C66D, 10%));
-    border: 1px solid #ccc;
-    border-left:none;
-    padding-top: 5px;
-    text-align:center;
-    color:#fff;
-    &:hover{
-      cursor:pointer;
-    }
+    width: 100%;
+    height: 275px;
+    overflow-y: scroll;
+    list-style: none;
+    display: inline-block;
     
-    &:active{
-      @include linear-gradient(#80C66D, darken(#80C66D, 20%));
-      @include box-shadow(inset 0 0 2px darken(#80C66D, 30%));
-    }
-    
-    &.selected{
-      @include linear-gradient(#80C66D, darken(#80C66D, 20%));
-      @include box-shadow(inset 0 0 2px darken(#80C66D, 30%));
+    border: 1px solid #999;
+    @include box-shadow(1px 3px 5px 0px #999);
+    li.photo-cat {
+      position: relative;
+      float: left;
+      width: 130px;
+      height: 125px;
+      margin-top: 10px;
+      text-align: center;
+      span.remove-photo {
+        position: absolute;
+        top: 5px ;
+        right: 10px;
+      }
+      a.gallery-colorbox{
+        text-decoration: none;
+        img{
+          @include box-shadow(1px 0px 3px 0px #999);
+        }
+      }
     }
   }
-  
-  li.btn.first{
-    border-left: 1px solid #ccc;
-    border-radius: 5px 0px 0px 5px;
-  }
-  
-  li.btn.last{
-     border-left:none;
-     border-radius: 0px 5px 5px 0px;
-     
-  }
-  
 }
 
 span.upload-button {
   float:none;
   @include button(pill);
+  background: green;
 }
 
-a.upload-button{
-   @include button(pill);
+div.pic-icon{
+  background: url("/assets/upload_processing.gif");
+  margin:45px;
+  width:35px;
+  height:35px;
 }
 
+
 span.upload-button.have-file{
   float:none;
   @include button(pill,#FCF0BF);  
+  background: red;
+}
+
+.hide {
+  display: none;
+}
+
+.blur{
+  opacity:0.3;
+}
+
+.close-link {
+  text-decoration: none;
+  color: #2D67C4 !important;
+  
+  &:hover{
+    text-decoration: none;
+    color: #2D67C4 !important;
+    background: none; 
+  }
 }

data/app/helpers/ruby_gallery/ruby_gallery_helper.rb

@@ -1,25 +1,97 @@
 module RubyGallery::RubyGalleryHelper
   def show_gallery_images(model_name, opts={})
     object = model_name.to_s.singularize.classify.constantize.find(params[:id])
-    content_tag(:div, class: "upload-box") do
-      [content_tag(:div, 'upload album', class: "legend"),
+    opts = {reorder: true, multiple_upload: true}.merge(opts)
+    content = ""
+    content += content_tag(:div, class: "upload-box") do
+      [content_tag(:div, 'Upload album', class: "legend"),
       content_tag(:div, class: "form-box") do
-        [content_tag(:form, id: "fileupload", class: "fileupload", method: "POST", enctype: "multipart/form-data", action: "/#{model_name}") do
-          content_tag(:span, id: "upload_button", class: "upload-button btn btn-success fileinput-button") do
+        [content_tag(:form, id: "fileupload", class: "fileupload", method: "POST", enctype: "multipart/form-data", action: "/#{model_name}/upload_album?id=#{params[:id]}", multipart: true) do
+          content_tag(:span, id: "upload_button", class: "upload-button btn btn-success fileinput-button", status: "") do
             [content_tag(:i, "", class: "icon-plus icon-white"),
-            content_tag(:span, "Upload picture"),
-            tag(:input, class: "upload-button-input", type: :file, multiple: "")].join.html_safe
+            content_tag(:span, "Upload"),
+            tag(:input, class: "upload-button-input", type: :file, multiple: "multiple", name: "file[]")].join.html_safe
           end
         end,
-        content_tag(:a, "Close", class: "cancel-button cancel-link", href: "#")].join.html_safe
+        content_tag(:a, "Close", class: "close-link", href: "#")].join.html_safe
       end].join.html_safe +
-      
-      content_tag(:div , id: "file_box", class: "file-box") do
-        content_tag(:ul, id: "photos_album", class: "album") do
+
+      [content_tag(:div , id: "file_box", class: "file-box", data_model: "#{model_name}", model_id: "#{object.id}") do
+         content_tag(:ul, id: "photos_album", class: "album #{opts[:reorder] ? "ruby-gallery-sortable" : ""}", data_url: "/#{model_name}/update_ruby_gallery_position?id=#{object.id}") do
           
+          if object.nil? || object.album_photos.size == 0
+             content_tag(:span, "No file selected", id: "no_file")
+          else
+            img_array = []
+            object.album_photos.order("position ASC").each do |photo|
+              img_array.push(content_tag(:li, class: "photo-cat photo_#{photo.id}" , key: "#{photo.id}") do
+                [content_tag(:span, raw("✖"), class: "entypo-icon-1 remove-photo hide", photo_id: photo.id),
+                content_tag(:a, class: "gallery-colorbox", href: "#{photo.photo.url(:original)}") do
+                  tag(:img, src: photo.photo.url(:medium), width: '120', height: '120', rel: "ruby_gallery")
+                end,
+                tag(:input, type: :hidden, name: "position-item", class: "item-position", value: "#{photo.position}")
+                ].join.html_safe
+              end)
+            end
+             img_array.join.html_safe # conclude what to be displayed
+          end
         end
-      end
-    
+      end].join.html_safe 
     end
+    
+    content += javascript_tag(%Q[
+      
+      function renderPhoto(photoResult) {
+        return function() {
+          $('#file_box ul#photos_album li.new-photo').remove();
+	  	    $('#file_box ul#photos_album').append(photoResult);
+  	    }
+      }
+      $(function () {
+        
+        
+        $('#fileupload').fileupload({
+           dropZone: $('#fileupload'),
+        	 progressInterval: 20,		
+           add: function(e,data){
+             if ($('span#upload_button').attr('status') == 'process'){
+        	  		return false;
+              } else {
+        				var types = /(.)(png|jpg|gif|jpeg)$/i;
+        				var file = data.files[0];
+        				if (types.test(file.type) || types.test(file.name) ){
+        					$('span.upload-button span').html("processing");
+        					$("span#no_285.giffile").remove();
+        					$("span#no_file").remove();
+        	    	  $('#file_box ul#photos_album').append("<li class='photo-cat new-photo' ><div id='progress' class='pic-icon' ></div></li>");
+        				  data.submit();
+        	 			} else {
+        				  alert("Please upload image files");
+        				}
+        			}
+           },
+        	 progressall: function(e, data){
+        			var progress = parseInt(data.loaded / data.total * 100, 10);
+        			$('#file_box ul#photos_album li.new-photo').find('#progress div.bar').css('width',progress + '%' );
+        	 },
+        	 done: function(e, data){
+        		var report = '';
+        		if(data.result != 'failed'){
+        		  $('span#upload_button span').html("Upload");
+        		  var fn = renderPhoto(data.result);
+        		  $('#file_box ul#photos_album li.new-photo').fadeOut();
+        		  fn.call();
+        		} else {
+        			$('#file_box ul#photos_album li.new-photo').html("Upload failed!");
+        	  	var t = setTimeout(function(){
+        					$('#file_box ul#photos_album li.new-photo').remove();
+        			}, 2000);
+        		}
+        	 }	
+        });
+      });
+    ])
+    
+    return content.html_safe
   end
 end