new features in gallery image view.. and also tags for gallery completed.

app/assets/javascripts/basic/orbit_js_1.0.1.js

@@ -485,15 +485,14 @@ function openSlide() {
     $(window).resize(function() {
         $(this).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954;
     })
-    $openSlide.each(function() {
+    if($('.item-groups').length) {
-        if($(this).hasClass('view-page')) {
+        $os = $openSlide.not('.view-page');
-            $(this).pageslide({ W: $pageslideW, iframe: true });
+        $vp = $openSlide.filter('.view-page.open-slide');
-        } else if($('.item-groups').length) {
+        $os.pageslide({ W: 324 });
-            $(this).pageslide({ W: 324 });
+        $vp.pageslide({ W: $pageslideW, iframe: true });
     } else {
-             $(this).pageslide();
+         $openSlide.pageslide();
     };
-    });
     $('.bottomnav .open-slide').on('click', function() {
         $('.table tr').removeClass('active');
         $('.filter-item').removeClass('active')

app/assets/javascripts/lib/jquery.pageslide.js

@@ -12,6 +12,7 @@
 !(function($){
     // Convenience vars for accessing elements
     var $body = $('#main-wrap'),
+        $bottomNav = $('.bottomnav'),
         $pageslide = $('#pageslide'),
         $viewPage = $('#view-page');
     
@@ -28,11 +29,12 @@
     /*
      * Private methods 
      */
-    function _load( url, useIframe ) {
+    function _load( url, useIframe, callback,element ) {
         // Are we loading an element from the page or a URL?
         if ( url.indexOf("#") === 0 ) {                
             // Load a page element                
             $(url).clone(true).appendTo( $pageslide.empty() ).show();
+            if(callback)callback.call(this,$pageslide,element);
         } else {
             // Load a URL. Into an iframe?
             if( useIframe ) {
@@ -49,9 +51,11 @@
                 $viewPage.find('.content').html( iframe );
                 $viewPage.clone(true).appendTo( $pageslide.empty() ).show();
                 $viewPage.find('.content').empty();
+                if(callback)callback.call(this,$viewPage,element);
             } else {
                 $viewPage.find('.content').load(url, function(){
                     $viewPage.clone(true).appendTo( $pageslide.empty() ).show();
+                    if(callback)callback.call(this,$viewPage,element);
                 });
             }
             
@@ -64,6 +68,7 @@
     function _start( direction, speed ) {
         var slideWidth = $pageslide.outerWidth( true ),
             bodyAnimateIn = {},
+            bottomnavAnimateIn = {},
             slideAnimateIn = {};
         
         // If the slide is open or opening, just ignore the call
@@ -83,6 +88,7 @@
                     $pageslide.css({ left: '-' + (slideWidth-61) + 'px', right: 'auto' });
                 };
                 bodyAnimateIn['margin-left'] = '+=' + slideWidth;
+                bottomnavAnimateIn['left'] = '+=' + slideWidth;
                 if($(window).width() <= 1440 && slideWidth > 963 ) {
                     bodyAnimateIn['width'] = $body.width();
                 }
@@ -92,6 +98,7 @@
                     
         // Animate the slide, and attach this slide's settings to the element
         $body.animate(bodyAnimateIn, speed);
+        $bottomNav.animate(bottomnavAnimateIn, speed);
         $pageslide.show().animate(slideAnimateIn, speed, function() {
             _sliding = false;
             $pageslide.children('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
@@ -108,7 +115,7 @@
     $.fn.pageslide = function(options) {
         var $elements = this;
         // On click
-        $elements.on(clickEvent, function(e) {
+        $elements.bind(clickEvent, function(e) {
             var $self = $(this),
                 settings = $.extend({ href: $self.attr('href') }, options);
 
@@ -121,7 +128,7 @@
                 $.pageslide.close();
             } else {                 
                 // Open
-                $.pageslide( settings );
+                $.pageslide( settings,$self );
 
                 if($('.item-groups').length) {
                     $('.item-menu > a, .navbar-inner').removeClass("active");
@@ -140,7 +147,16 @@
                     $pageName = $self.parents('.item-title').children('a').text();
                     $('.page-name').text($pageName);
                 } else if($('.tags-groups').length) {
-                    $(this).parents('li').addClass("active").siblings().removeClass("active").parent('ul').siblings().children('li').removeClass("active");
+                    if($('.gallery').length) {
+                        $(this).closest('.rgalbum').addClass('active-single').siblings().removeClass('active-single');
+                        if($(this).closest('ul').hasClass('photo-action')) {
+                            $('.checkbox').prop('checked', false);
+                            $('.rgalbum').removeClass('active');
+                            $('.deletephoto, .deselect, .addtags').addClass('hide');
+                        }
+                    } else {
+                        $(this).closest('li').addClass("active").siblings().removeClass("active").parent('ul').siblings().children('li').removeClass("active");
+                    }
                 } else {
                     $(this).parents("tr").addClass("active").siblings().removeClass("active");;
                 }
@@ -164,7 +180,8 @@
         href:       null,       // Override the source of the content. Optional in most cases, but required when opening pageslide programmatically.
         W:          264,
         closeFn :   null,
-        openFn :    null
+        openFn :    null,
+        loadComplete : null
     };
     
     /*
@@ -172,10 +189,9 @@
      */
     
     // Open the pageslide
-	$.pageslide = function( options ) {	    
+    $.pageslide = function( options,element ) {     
         // Extend the settings with those the user has provided
         var settings = $.extend({}, $.fn.pageslide.defaults, options);
-
         var convertToFunction = function(fn){
             var x = new Function();
             x = fn;
@@ -190,16 +206,19 @@
         if(settings.closeFn) {
             $.fn.pageslide.defaults.closeFn = convertToFunction(settings.closeFn);
         }
+        if(settings.loadComplete) {
+            $.fn.pageslide.defaults.loadComplete = convertToFunction(settings.loadComplete);
+        }
         
         // Are we trying to open in different direction?
         if( ($pageslide.is(':visible') && $pageslide.data( 'W' ) != settings.W) || ($pageslide.is(':visible') && $pageslide.data( 'direction' ) != settings.direction) ) {
             $.pageslide.close(function(){
                 $pageslide.css({'width': settings.W});
-                _load( settings.href, settings.iframe );
+                _load( settings.href, settings.iframe, settings.loadComplete, element );
                 _start( settings.direction, settings.speed );
             });
         } else {                
-            _load( settings.href, settings.iframe );
+            _load( settings.href, settings.iframe, settings.loadComplete,element );
             if( $pageslide.is(':hidden') ) {
                 $pageslide.css({'width': settings.W});
                 _start( settings.direction, settings.speed );
@@ -226,6 +245,7 @@
             slideWidth = $pageslide.outerWidth( true ),
             speed = $pageslide.data( 'speed' ),
             bodyAnimateIn = {},
+            bottomnavAnimateIn = {};
             slideAnimateIn = {}
                         
         // If the slide isn't open, just ignore the call
@@ -239,9 +259,10 @@
                 break;
             default:
                 bodyAnimateIn['margin-left'] = '-=' + slideWidth;
+                bottomnavAnimateIn['left'] = '-=' + slideWidth;
                 slideAnimateIn['left'] = '-=' + slideWidth;
                 if($pageslide.find('.preview').length) {
-                    // $pageslide.find('.preview').cycle('destroy');
+                    $pageslide.find('.preview').cycle('destroy');
                     $pageslide.find('.preview img').removeAttr('style');
                 }
                 break;
@@ -257,11 +278,13 @@
             }
         } else if($('.tags-groups').length) {
             $('.tags-groups').children('li').removeClass("active");
+            $('.rgalbum').removeClass("active-single");
         } else {
             $("tr").removeClass("active");
         };
         
         $pageslide.animate(slideAnimateIn, speed);
+        $bottomNav.animate(bottomnavAnimateIn, speed);
         $body.animate(bodyAnimateIn, speed, function() {
             $pageslide.hide();
             _sliding = false;
@@ -288,6 +311,13 @@
         };
     };
 
+    //data load complete callback
+    $.pageslide.loadComplete = function(callback) {
+        if(typeof callback === "function"){
+            $.fn.pageslide.defaults.loadComplete = callback;
+        };
+    };
+    
     /* Events */
     
     // Don't let clicks to the pageslide close the window

app/assets/stylesheets/lib/tags-groups.css

@@ -6,22 +6,22 @@
 .tags .lead .badge {
 	margin-top: 5px;
 }
-.tags .tags-groups {
+.tags-groups {
 	list-style: none;
 	margin: 0 0 20px;
 	padding: 0;
 }
-.tags .tags-groups:after {
+.tags-groups:after {
 	content: "";
 	clear: both;
 	height: 0;
 	display: block;
 	visibility: hidden;
 }
-.tags .tags-groups.module-tags li.default a {
+.tags-groups.module-tags li.default a {
 	margin-left: 5px;
 }
-.tags .tags-groups li {
+.tags-groups li {
 	overflow: hidden;
 	float: left;
 	width: auto;
@@ -39,7 +39,7 @@
 		 -o-transition: all .2s linear;
 			transition: all .2s linear;
 }
-.tags .tags-groups li.mark {
+.tags-groups li.mark {
 	width: 0;
 	height: 0;
 	padding: 0;
@@ -49,28 +49,28 @@
 	opacity: 0;
 	visibility: hidden;
 }
-.tags .tags-groups li.active {
+.tags-groups li.active {
 	background-color: #3a87ad;
 }
-.tags .tags-groups li.active .amount {
+.tags-groups li.active .amount {
 	color: #8cb8be;
 }
-.tags .tags-groups li a {
+.tags-groups li a {
 	text-decoration: none;
 	color: #ededed;
 }
-.tags .tags-groups li .amount {
+.tags-groups li .amount {
 	color: #fdcf3b;
 	float: right;
 	margin-left: 15px;
 }
-.tags .tags-groups li .card {
+.tags-groups li .card {
 	position: relative;
 	margin: 0;
 	width: 18px;
 	height: 18px;
 }
-.tags .tags-groups li .card:after {
+.tags-groups li .card:after {
 	font-family: FontAwesome;
 	content: '\f111';
 	color: #fdcf3b;
@@ -82,13 +82,13 @@
 	left: 0;
 	top: 0;
 }
-.tags .tags-groups li .card.active:after {
+.tags-groups li .card.active:after {
 	content: '\f058';
 	font-size: 18px;
 	left: -2px;
 	top: 1px;
 }
-.tags .tags-groups li .card input {
+.tags-groups li .card input {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -110,10 +110,10 @@
 #tags-merger form {
 	margin-bottom: 0;
 }
-#tags-merger .tags .tags-groups li {
+#tags-merger .tags-groups li {
 	cursor: pointer;
 }
-#tags-merger .tags .tags-groups li.def {
+#tags-merger .tags-groups li.def {
 	background-color: #468847;
 }
 #tags-merger .modal-body .pull-left {
@@ -127,22 +127,22 @@
 
 
 
-.tags .tags-groups li.default {
+.tags-groups li.default {
 	background-color: #468847;
 }
-.tags .tags-groups li.default.active {
+.tags-groups li.default.active {
 	background-color: #3a87ad;
 }
-.tags .tags-groups li.default .amount {
+.tags-groups li.default .amount {
 	color: #8cbe9a;
 }
-.tags .tags-groups li.default.active .amount {
+.tags-groups li.default.active .amount {
 	color: #8cb8be;
 }
-.tags .tags-groups li.default .card:after {
+.tags-groups li.default .card:after {
 	color: #8cbe9a;
 }
-.tags .tags-groups li.active .card:after {
+.tags-groups li.active .card:after {
 	color: #8cb8be;
 }
 

app/assets/stylesheets/lib/wrap-nav.css

@@ -41,6 +41,16 @@
 .bottomnav .action {
   margin-bottom: 6px;
 }
+.bottomnav .divider {
+  display: inline-block;
+  position: relative;
+  margin: 0 5px;
+  background-color: #E0E0E0;
+  width: 1px;
+  height: 16px;
+  top: 5px;
+  box-shadow: 1px 0 0 #FFF;
+}
 .bottomnav .pagination {
   margin: 0;
 }

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

@@ -20,30 +20,27 @@
 $(function() {
 	var $container = $('.gallery'),
 		$containerData = $container.data();
-
+	$container.imagesLoaded(function(){
-	$container.imagesLoaded( function(){
 		var $albumname = $('.albumname'),
 			$img = $('.rgalbum img');
-		$img.muImageResize({width: 200, height:200});
+		$('.rgalbum > a').rsImg();
 		if($containerData.galleryId == 'gallery') {
 			$container.masonry({
 				itemSelector : '.rgalbum',
 				isAnimated: true,
 			});
 			$albumname.each(function(i) {
-				var $imgH = $(this).prevAll($img).height(),
+				var $albumblock = $(this).closest('a').height(),
-					$H = $(this).height()+20,
+					$H = $(this).outerHeight(true);
-					$fontSize = parseInt($(this).css('font-size'));
+				if($H > $albumblock) {
-					$lineHeight = parseInt($(this).css('line-height'));
-				if($H > $imgH) {
 					$(this).css({
 						'bottom': "auto",
 						'top': 0,
 					});
 					$(this).hover(function() {
 						$(this).stop(true, true).delay(500).animate({
-							'top': '-='+($H-$imgH),
+							'top': '-='+($H-$albumblock),
-						},($H-$imgH)*10)
+						},($H-$albumblock)*10)
 					},function() {
 						$(this).stop(true, true);
 						$(this).css({
@@ -53,7 +50,7 @@ $(function() {
 					});
 				};
 			});
-			$('#orbit_gallery').delegate('.icons-tag','click',function(){
+			$('#orbit_gallery').delegate('.icons-tag', clickEvent, function(){
 				$(this).parents('.gallery_info').nextAll('.albumtag').slideToggle(300, function() {
 					$container.masonry({
 						itemSelector : '.rgalbum',
@@ -64,6 +61,152 @@ $(function() {
 		};
 	});
 
+	var bindEvent = function(instance,elem){
+		var $e = elem,
+			image_id = $e.closest(".rgalbum").data("image-id");
+			obj = photosData.filter(function(a) {
+					return a.id == image_id;
+				})[0];
+		switch($e.attr("for")){
+			case "description":
+				if(obj.description){
+					instance.find("textarea").each(function(){
+						if(obj.description[$(this).attr("for")])
+							$(this).val(obj.description[$(this).attr("for")]);
+					})
+					
+				}
+				instance.find("input[type=hidden]").val(image_id);
+				break;
+			case "tags":
+				instance.find('.tags-groups').cardCheck({
+       			 	item: '.card'
+    			});
+    			for(i = 0; i < obj.tags.length; i++){
+    				instance.find("input[value="+obj.tags[i]+"]").parent().addClass('active');
+    				instance.find("input[value="+obj.tags[i]+"]").prop("checked","checked");
+    			}
+    			instance.find("form").submit(function(event) {
+    				var checkboxes = $(this).find("input[type=checkbox]:checked"),
+    					tag_ids = [],
+    					image_ids =[image_id];
+
+    				checkboxes.each(function(){
+    					tag_ids.push($(this).val());
+    				})
+    				
+    				$.post("/panel/gallery/back_end/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){
+    					$.pageslide.close();
+    					photosData = json;
+    				})
+    				return false;
+    			});
+    			break;
+    		case "batch":
+    			instance.find('.tags-groups').cardCheck({
+       			 	item: '.card'
+    			});
+    			instance.find("form").submit(function(event) {
+    				var checkboxes = $(this).find("input[type=checkbox]:checked"),
+    					tag_ids = [],
+    					image_ids =[],
+    					images =  $("#imgholder .rgalbum.active");
+    				checkboxes.each(function(){
+    					tag_ids.push($(this).val());
+    				})
+    				images.each(function(){
+    					image_ids.push($(this).data("image-id"));
+    				})
+    				$.post("/panel/gallery/back_end/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){
+    					$.pageslide.close();
+    					photosData = json;
+    				})
+    				return false;
+    			});
+    			break;
+		}
+	}
+
+	$('form[data-remote]').bind("ajax:success",function(evt, data, status){
+		$.pageslide.close();
+		photosData = data;
+	})
+
+	var photosData = null;
+	if($("#imgholder").length){
+		$.getJSON(window.location.pathname, function(json, textStatus) {
+			photosData = json;
+		});
+	}
+	$('.open').pageslide({
+		loadComplete: function(instance,elem) {
+			bindEvent(instance,elem);
+		}
+	})
+	
+
+	$("#imgholder").on(clickEvent, '.photo_cover', function(event) {
+		var image_id = $(this).closest(".rgalbum").data("image-id"),
+			album_id = $("#imgholder").data("gallery-id"),
+			set_cover = true;
+		if($(this).children().hasClass("icons-star-2")){
+			$(".icons-star").removeClass("icons-star").addClass('icons-star-2');
+			$(this).children().removeClass("icons-star-2").addClass("icons-star");
+		}else{
+			$(this).children().removeClass("icons-star").addClass("icons-star-2");
+			set_cover = false;
+		}
+		$.post("/panel/gallery/back_end/set_cover",{"album_id":album_id,"image_id":image_id,"set_cover":set_cover});
+
+	});
+
+	$("#delete_selected_photos_btn").click(function(){
+		var photos_to_delete = [],
+			delete_cover = false,
+			$photos = $(".rgalbum.active"),
+			album_id = $("#imgholder").data("gallery-id");
+		$('.modal-body .spinning').fadeIn('fast');
+		$('.modal-body .text-warning').hide(0);
+		$photos.each(function(){
+			photos_to_delete.push($(this).data('image-id'));
+			if ($(this).find(".icons-star").length) {
+				delete_cover = true;
+			};
+		});
+		 $.ajax({
+		 	url : "/panel/gallery/back_end/delete_photos",
+		 	type : "POST",
+		 	data : {"images":photos_to_delete,"delete_cover":delete_cover,"album_id":album_id},
+		 	success : function(){
+		 		$photos.slideUp(300,function() {
+		 			$(this).remove();
+		 		});
+		 		$('#dialog').modal('hide');
+		 		$('.modal-body .spinning').hide();
+				$('.modal-body .text-warning').show();
+				$('.deletephoto, .deselect, .addtags').addClass('hide')
+		 	}
+		 });
+	})
+
+	$('#imgholder').on(clickEvent, '.checkbox', function() {
+		$(this).prop('checked') ? $(this).closest('.rgalbum').addClass('active') : $(this).closest('.rgalbum').removeClass('active');
+		var checkLength = $("#imgholder .rgalbum.active");
+		checkLength.length ? $('.deletephoto, .deselect, .addtags').removeClass('hide') : $('.deletephoto, .deselect, .addtags').addClass('hide');
+	});
+	$('.deselect').on(clickEvent, function(event) {
+		$('.rgalbum').removeClass('active');
+		$('.checkbox').prop('checked', false)
+		$('.deletephoto, .deselect, .addtags').addClass('hide')
+		event.preventDefault();
+	});
+	$('.phtot-action').delegate('li', clickEvent, function(event) {
+		$('.checkbox').prop('checked', false)
+		$('.rgalbum').removeClass('active');
+		$('.deletephoto, .deselect, .addtags').removeClass('hide')
+	});
+
+    // 
 	$('.add-imgs').on({
 		click: function() {
 			$('#fileupload').slideToggle(300, function() {
@@ -91,15 +234,16 @@ $(function() {
 			success : function(data){
 				var $e = $(data);
 				$imgs = $e.find("img");
-				$imgs.muImageResize({width: 200, height:200});
 				$("#imgholder").append($e);
-
+				$os = $e.find("a.open");
+				$os.pageslide({
+					loadComplete: function(instance,elem) {
+						bindEvent(instance,elem);
+					}
+				});
 			}
 		})
 
 	}
 });
 
-
-
-

vendor/built_in_modules/gallery/app/assets/javascripts/jquery.lite.image.resize.js

@@ -0,0 +1,136 @@
+/* ===================================================
+ * jquery-lite-image-resize v.1.0.1
+ * https://github.com/RayChang/jquery-lite-image-resize
+ * ===================================================
+ * How to use ?
+ *
+ * HTML element closest to the image to add class "resizeimg".
+ * 
+ * Example:
+ * <div class="resizeimg">
+ *     <img src="images url" />
+ * </div>
+ *
+ * Or you can use:
+ * $('your class').rsImg();
+ *
+ * Note : HTML structure must be a structure like the example above.
+ * 
+*/
+
+!function ($) {
+
+    "use strict";
+    
+    var ResizeImg = function(element, elementLength, i) {
+        this.element = $(element);
+        this.element.data('exists', true);
+        this.elementLength = elementLength;
+        this.index = i;
+    };
+    ResizeImg.prototype.resize = function(callback) {
+        var $img = this.element.children('img').eq(0),
+            elW = this.element.innerWidth(),
+            elH = this.element.innerHeight(),
+            elScale = elW/elH,
+            ell = this.elementLength,
+            index = this.index,
+            image = document.createElement("img");
+        image.src = $img.attr('src');
+        this.element.css({
+            'position': 'relative',
+            'overflow': 'hidden',
+        });
+        function imageLoadComplete() {
+            var imgW = image.width,
+                imgH = image.height,
+                imgScale = imgW/imgH,
+                portrait = {
+                    'position': 'absolute',
+                    'height': '100%',
+                    'width': 'auto',
+                    'max-width': 'none',
+                    'left': '50%',
+                    'top': 0,
+                    'margin-left': imgW*(elH/imgH)/-2
+                },
+                landscape = {
+                    'position': 'absolute',
+                    'height': 'auto',
+                    'max-height': 'none',
+                    'width': '100%',
+                    'left': 0,
+                    'top': '50%',
+                    'margin-top': imgH*(elW/imgW)/-2
+                },
+                center = {
+                    'position': 'absolute',
+                    'height': '100%',
+                    'width': '100%',
+                    'top': 0,
+                    'left': 0
+                };
+            if(imgScale < 1) {
+                if(elScale < 1) {
+                    if(elScale > imgScale) {
+                        $img.css(landscape);
+                    } else {
+                        $img.css(portrait);
+                    };
+                } else {
+                   $img.css(landscape); 
+                };
+            };
+
+            if(imgScale > 1) {
+                if(elScale > 1) {
+                    if(elScale > imgScale) {
+                        $img.css(landscape);
+                    } else {
+                        $img.css(portrait);
+                    };
+                } else {
+                    $img.css(portrait);
+                };
+            };
+
+            if(imgScale == 1) {
+                if(elScale < 1) {
+                    $img.css(portrait);
+                } else if(elScale > 1) {
+                    $img.css(landscape);
+                } else {
+                    $img.css(center);
+                };
+            };
+            $img.fadeTo(500, 1);
+            
+            if(index == ell && callback) {
+                ResizeImg.prototype.callback(callback)
+            }
+        }
+        if(/MSIE 8.0/g.test($ua)) {
+            imageLoadComplete();
+        } else {
+            image.onload = imageLoadComplete;
+        }
+    };
+
+    ResizeImg.prototype.callback = function(callback) {
+        callback();
+    };
+
+    $.fn.rsImg = function (callback) {
+        var elementLength = this.length - 1;
+        this.each(function (i) {
+            if(!$(this).data('exists')) {
+                $(this).children("img").fadeTo(0,0);
+                new ResizeImg(this, elementLength, i).resize(callback);
+            };
+        });
+    };
+
+    $(function() {
+        $('.resizeimg').rsImg();
+    });
+}(window.jQuery);

vendor/built_in_modules/gallery/app/assets/javascripts/jquery.mu.image.resize.js

@@ -1,147 +0,0 @@
-(function( $ ) {
-	$.fn.muImageResize = function( params ) {
-		var _defaultSettings = {
-			width:300,
-			height:300,
-			wrap_fix:true // Let image display like in-line.
-		};
-		var _set = $.extend(_defaultSettings, params); 
-		// var isIE7 = $.browser.msie && (7 == ~~ $.browser.version);
-
-		//var anyDynamicSource = $(this).attr("src");
-		//$(this).attr("src",anyDynamicSource+ "?" + new Date().getTime());
-
-		// Just bind load event once per element.
-		return this.one('load', function() {
-			// Remove all attributes and CSS rules.
-			this.removeAttribute( "width" );
-			this.removeAttribute( "height" );
-			this.style.width = this.style.height = "";
-			
-			var ow, oh;
-			
-			//[workaround] - msie need get width early
-			if (/MSIE/g.test($ua))
-			{
-				// Get original size for calcutation.
-				ow = this.width;
-				oh = this.height;
-			}
-			
-			if (_set.wrap_fix) {
-				$(this).wrap(function(){
-					return '<div style="width:'+_set.width+'px; height:'+_set.height+'px; display:inline-block;" />';
-				});
-			}
-			
-			if (!/MSIE/g.test($ua))
-			{
-				// Get original size for calcutation.
-				ow = this.width;
-				oh = this.height;
-			}
-			
-			// if cannot get width or height.
-			if (0==ow || 0==oh){
-				$(this).width(_set.width);
-				$(this).height(_set.height);
-			}else{
-					
-				// Merge position settings
-				var sh_margin_type='';
-
-				// if original image's width > height.
-				if (ow > oh) {
-					p = oh / _set.height; 
-					oh = _set.height; 
-					ow = ow / p;
-					
-					// original image width smaller than settings.
-					if (ow < _set.width){
-						// need to resize again, 
-						// because new image size range must can cover settings' range, than we can crop it correctly. 
-						p = ow / _set.width; 
-						ow = _set.width;
-						oh = oh / p;
-						
-						// the crop range would be in the center of new image size.
-						sh = (oh-_set.height)/2;
-						t=sh+'px';
-						r=_set.width+'px';
-						b=(_set.height+sh)+'px';
-						l='0px';
-						
-						// need to be adjust top position latter.
-						sh_margin_type = 'margin-top';
-						
-					// original image width bigger than settings.
-					}else{
-						// new image range can cover settings' range. 
-						sh = (ow-_set.width)/2;
-						t='0px';
-						r=(_set.width+sh)+'px';
-						b=_set.height+'px';
-						l=sh+'px';
-						// need to be adjust left position latter.
-						sh_margin_type = 'margin-left';
-					}
-				// ref above, change width to height then do same things.
-				}else{
-					p = ow / _set.width;
-					ow = _set.width;
-					oh = oh / p;
-
-					if (oh < _set.height) {
-						p = oh / _set.height;
-						oh = _set.height;
-						ow = ow / p;
-						
-						sh = (ow-_set.width)/2;
-						t='0px';
-						r=(_set.width+sh)+'px';
-						b=_set.height+'px';
-						l=sh+'px';
-						sh_margin_type = 'margin-left';
-					}else{
-						sh = (oh-_set.height)/2;
-						t=sh+'px';
-						r=_set.width+'px';
-						b=(_set.height+sh)+'px';
-						l='0px';
-						sh_margin_type = 'margin-top';
-					}
-				}
-				
-				// Resize img.
-				$(this).width(ow);
-				$(this).height(oh);
-				
-				// Crop img by set clip style.
-				$(this).css('clip','rect('+t+' '+r+' '+b+' '+l+')');
-
-				var osh = 0;
-				if('auto' != $(this).css(sh_margin_type)){
-					osh = parseInt($(this).css(sh_margin_type));
-				}
-			
-				if (0 < sh) {sh*=-1;}
-				sh += osh;
-				
-				$(this).css(sh_margin_type, sh+'px');
-				// $(this).css('position','absolute');
-			}
-			$(this).fadeIn('slow');
-		})
-		.one( "error", function() {
-			//$(this).hide();
-		})
-		.each(function() {
-			$(this).hide();
-			// Trigger load event (for Gecko and MSIE)
-			if ( this.complete || /MSIE/g.test($ua) ) {
-				$( this ).trigger( "load" ).trigger( "error" );
-			}
-		});
-	};
-	
-})( jQuery );

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

@@ -23,6 +23,7 @@
 	overflow: hidden;
 	margin: 0 0 10px;
 	width: 200px;
+	height: 200px;
 	-webkit-transition: all .2s linear;
 	   -moz-transition: all .2s linear;
 		 -o-transition: all .2s linear;
@@ -34,7 +35,8 @@
 #orbit_gallery .rgalbum:hover a img {
 	-webkit-filter: blur(2px);
 }
-#orbit_gallery .rgalbum a span {
+#orbit_gallery .rgalbum a:after {
+	content: "";
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -51,7 +53,7 @@
 		 -o-transition: all .2s linear;
 			transition: all .2s linear;
 }
-#orbit_gallery .rgalbum:hover a span {
+#orbit_gallery .rgalbum:hover a:after {
 	opacity: .4;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
 	filter: alpha(opacity=40);
@@ -67,6 +69,7 @@
 	font-size: 30px;
 	font-family: 'Playfair Display SC', sans-serif;
 	line-height: 28px;
+	z-index: 1;
 	opacity: .0;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	filter: alpha(opacity=0);
@@ -143,26 +146,82 @@
 	list-style: none;
 }
 #imgholder .rgalbum {
+	position: relative;
 	float: left;
 	margin: 5px;
 	padding: 5px;
 	width: 200px;
 	background: #FFFFFF;
+	overflow: hidden;
 	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
 	   -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
 			box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+		 -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
 	-webkit-transition-property: left, right, top;
 	   -moz-transition-property: left, right, top;
 		-ms-transition-property: left, right, top;
 		 -o-transition-property: left, right, top;
 			transition-property: left, right, top;
-		 -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+}
+#imgholder .rgalbum.active {
+	background-color: #51a351;
+}
+#imgholder .rgalbum.active-single {
+	background-color: #F89406;
+}
+#imgholder .rgalbum .photo-action {
+	margin: 0;
+	list-style: none;
+	left: 5px;
+	right: 5px;
+	height: 0;
+	position: absolute;
+	background-color: #FFF;
+	bottom: 5px;
+	opacity: .9;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+	filter: alpha(opacity=90);
+    -webkit-transition: all .2s linear;
+       -moz-transition: all .2s linear;
+         -o-transition: all .2s linear;
+            transition: all .2s linear;
+}
+#imgholder .rgalbum:hover .photo-action {
+	padding: 5px;
+	height: 30px;
+}
+#imgholder .rgalbum .photo-action li {
+	display: inline-block;
+	float: left;
+	color: #777;
+	font-size: 11px;
+	line-height: 30px;
+	cursor: pointer;
+	width: 33%;
+	text-align: center;
+	font-size: 1.2em;
+}
+#imgholder .rgalbum .photo-action a {
+	color: #777;
+	display: block;
+	text-decoration: none;
+	width: 100%;
+	height: 100%;
+}
+#imgholder .rgalbum .photo-action li:hover a {
+	color: #08C;
+}
+#imgholder .rgalbum .photo-action .icons-star {
+	color: #F8A900;
+	font-size: 1.4em;
+	line-height: 1.4em;
 }
 #imgholder .rgalbum a {
 	display: block;
 	overflow: hidden;
 	margin: 0;
 	width: 200px;
+	height: 200px;
 	-webkit-transition: all .2s linear;
 	   -moz-transition: all .2s linear;
 		 -o-transition: all .2s linear;
@@ -171,7 +230,80 @@
 #imgholder .rgalbum a img {
 	max-width: none;
 }
+#imgholder .rgalbum .check {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 40px;
+	height: 40px;
+}
+#imgholder .rgalbum .check:after {
+	font-family: FontAwesome;
+	font-weight: normal;
+	font-style: normal;
+	color: #F2F2F2;
+	text-decoration: inherit;
+	content: "\f00c";
+	line-height: 25px;
+	text-indent: 20px;
+	font-size: 1.3em;
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 0px;
+	height: 0px;
+	border-style: solid;
+	border-width: 0 40px 40px 0;
+	border-color: transparent #FFF transparent transparent;	
+}
+#imgholder .rgalbum.active .check:after {
+	color: #FFF;
+	border-color: transparent #51a351 transparent transparent;
+}
+#imgholder .rgalbum.active-single .check:after {
+	color: #FFF;
+	border-color: transparent #F89406 transparent transparent;
+}
+#imgholder .rgalbum input[type="checkbox"] {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 3;
+	display: block;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+	opacity: 0;
+}
 
+/* Page Silde */
+#view-photo-tags .phtot-tags {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+#view-photo-tags .phtot-tags li {
+	margin: 0 5px 5px 0;
+	white-space: nowrap;
+}
+
+/* Dialog */
+.modal-body {
+	min-height: 80px;
+	line-height: 80px;
+	text-align: center;
+}
+.modal-body .spinning {
+	display: none;
+	position: absolute;
+	width: 70px;
+	height: 70px;
+	top: 50%;
+	left: 50%;
+	margin: -35px 0 0 -35px;
+}
 
 /* File Upload */
 #upload-panel {
@@ -200,7 +332,7 @@
 #fileupload .fileupload-buttonbar .navbar {
 	margin-bottom: 0;
 }
-#fileupload .fileupload-buttonbar .navbar button {
+#fileupload .fileupload-buttonbar .navbar .add-photo {
 	border: none;
 	border-right: 1px solid #d4d4d4;
 	background-color: transparent;
@@ -209,7 +341,7 @@
 	text-decoration: none;
 	text-shadow: 0 1px 0 #ffffff;
 }
-#fileupload .fileupload-buttonbar .navbar button:hover {
+#fileupload .fileupload-buttonbar .navbar .add-photo:hover {
 	color: #333333;
 	text-decoration: none;
 	background-color: #EDEDED;

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

@@ -21,9 +21,54 @@ class Panel::Gallery::BackEnd::AlbumImagesController < OrbitBackendController
 		end
 		if params['delete_cover'] == "true"
 			album = GalleryAlbum.find(params['id'])
-			album.update_attributes(:cover=>"default")
+			album.update_attributes(:cover=>"default",:cover_path => nil)
 		end
 		render :json =>{"success"=>true}.to_json
 	end
 
+	def update_image
+		image = GalleryImage.find(params[:image_id])
+		image.update_attributes(params[:gallery_image])
+		image.save
+		@album = GalleryAlbum.find(image.gallery_album_id.to_s)
+		@images = @album.gallery_images
+	    @image_content = []
+	    @images.each do |image|
+	      @image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tagged_ids}
+	    end
+	    render :json => @image_content.to_json
+	end
+
+	def delete_photos
+		images = params['images']
+		images.each do |image|
+			img = GalleryImage.find(image)
+			img.delete
+		end
+		if params['delete_cover'] == "true"
+			album = GalleryAlbum.find(params['album_id'])
+			album.update_attributes(:cover=>"default",:cover_path => nil)
+		end
+		render :json =>{"success"=>true}.to_json
+	end
+
+	def image_tagging
+		images = params[:image_ids]
+		tags = params[:tag_ids]
+		i = nil
+		images.each do |image|
+			img = GalleryImage.find(image)
+			img.tagged_ids = tags
+			img.save
+			i = img
+		end
+		@album = GalleryAlbum.find(i.gallery_album_id.to_s)
+		@images = @album.gallery_images
+	    @image_content = []
+	    @images.each do |image|
+	      @image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tagged_ids}
+	    end
+		render :json=>@image_content.to_json
+	end
+
 end

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

@@ -3,6 +3,10 @@ class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController
   open_for_manager :except => [:index,:show,:update]
   open_for_sub_manager :except => [:index, :show]
 
+  before_filter :only => [ :new, :create, :edit, :update ] do |controller|
+    @categories = get_categories_for_form
+  end
+
   # before_filter lambda
   
   def index
@@ -15,6 +19,15 @@ class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController
   def show
     @album = GalleryAlbum.find(params[:id])
     @images = @album.gallery_images
+    @image_content = []
+    @images.each do |image|
+      @image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tagged_ids}
+    end
+    @tags = get_tags
+    respond_to do |h|
+      h.html
+      h.json {render json: @image_content}
+    end
   end
 
   def new
@@ -40,19 +53,19 @@ class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController
   end
 
   def edit
-    if is_manager? || is_admin? || is_sub_manager?
       @album = GalleryAlbum.find(params[:id])
-      @images = @album.gallery_images.all
+      @tags = get_tags
-      @album_name = @album.name_translations
-      @cover = @album.cover
-      @tags = GalleryTag.all
-    end
   end
 
   def set_cover
+    if params[:set_cover] == "true"
       album = GalleryAlbum.find(params[:album_id])
-    image = GalleryImage.find(params[:imageid])
+      image = GalleryImage.find(params[:image_id])
-    album.update_attributes({:cover_path => image.file.thumb.url, :cover=>params[:imageid]})
+      album.update_attributes({:cover_path => image.file.thumb.url, :cover=>params[:image_id]})
+    else
+      album = GalleryAlbum.find(params[:album_id])
+      album.update_attributes({:cover_path => nil, :cover=>"default"})
+    end
     render :json =>{"success"=>true}.to_json
   end
 
@@ -162,11 +175,28 @@ class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController
 
   def update
     @album = GalleryAlbum.find(params[:id])
-    @album.update_attributes(params[:gallery_album])
+    tagsToDestroy = []
-    if params['delete_cover'] == "true"
+    tagsToAdd = []
-      @album.update_attributes(:cover=>"default")
+    new_tags = params[:gallery_album][:tag_ids]
+    old_tags = @album.tagged_ids
+    old_tags.each do |tag|
+       if !new_tags.include?(tag)
+        tagsToDestroy << tag
         end
-    @tags = GalleryTag.all
+    end
-    render :action => :show
+    new_tags.each do |tag|
+      if !old_tags.include?(tag)
+        tagsToAdd << tag
+      end
+    end
+    update_children_image_tag(tagsToDestroy,tagsToAdd)
+    @album.update_attributes(params[:gallery_album])
+    redirect_to panel_gallery_back_end_album_path(@album)
+  end
+
+  def update_children_image_tag(tagsToDestroy,tagsToAdd)
+      # tagsToDestroy will contain  all tag ids which have to be deleted from the galley_images
+      # tagsToAdd will contain all tag ids which ve to be added in tall gallery_images
+
   end
 end

vendor/built_in_modules/gallery/app/uploaders/gallery_uploader.rb

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

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_album.html.erb

@@ -5,7 +5,6 @@
     <% else %>
      <img src="<%= album.cover_path %>">
     <% end %>
-    <span></span>
     <p class="albumname"><%= album.name %></p>
   </a>
   <ul class="gallery_info clearfix">
@@ -14,8 +13,9 @@
     <li class="albumcateg"></li>
   </ul>
   <ul class="albumtag">
-    <% @tags.each do |tag| %>
+    <% album.tagged_ids.each do |tag| %>
-       <li class="label"><%=t(tag.name)%></li>
+      <% r = @tags.select { |k| k.id.to_s == tag } %>
+       <li class="label"><%= r.map {|t| t.name}[0]%></li>
     <%end%>
   </ul>
 </li>

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_form.html.erb

@@ -0,0 +1,116 @@
+<% content_for :page_specific_css do %>
+  <%= stylesheet_link_tag "lib/main-forms" %>
+  <%= stylesheet_link_tag "lib/fileupload" %>
+  <%= stylesheet_link_tag "lib/main-list" %>
+<% end %>
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "lib/bootstrap-fileupload" %>
+  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
+  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
+  <%= javascript_include_tag "lib/modal-preview" %>
+  <%= javascript_include_tag "lib/file-type" %>
+<% end %>
+<%= f.error_messages %>
+   <fieldset>           
+            <!-- Input Area -->
+            <div class="input-area">
+
+              <!-- Module Tabs -->
+              <div class="nav-name"><strong>Module</strong></div>
+              <ul class="nav nav-pills module-nav">
+                <li class="active">
+                  <a href="#basic" data-toggle="tab">Basic</a>
+                </li>
+                <li>
+                  <a href="#tag" data-toggle="tab">Tags</a>
+                </li>
+              </ul>
+
+              <!-- Module -->
+              <div class="tab-content module-area">
+
+                <!-- Basic Module -->
+                <div class="tab-pane fade in active" id="basic">
+
+                  <!-- Category -->
+                  <div class="control-group">
+                    <label class="control-label muted">Category</label>
+                    <div class="controls">
+                     <%= f.select(:category_id, @categories.collect {|p| [ p.title, p.id ] }) %>
+                    </div>
+                  </div>
+
+                </div>
+ <!-- Tag Module -->
+                <div class="tab-pane fade" id="tag">
+
+                  <!-- Tag -->
+                  <div class="control-group">
+                    <label class="control-label muted">Tag</label>
+                    <div class="controls" data-toggle="buttons-checkbox">
+                      <%@tags.each do |tag|%>
+                          <label class="checkbox inline btn <%= 'active' if @album.tag_ids.include?(tag.id) %>">
+                            <%= check_box_tag 'gallery_album[tag_ids][]', tag.id, @album.tag_ids.include?(tag.id)%>
+                            <%= tag.name %>
+                          </label>
+                      <%end %>
+                    </div>
+                  </div>
+
+                </div>
+
+              </div>
+              <div class="nav-name"><strong>Language</strong></div>
+                 <ul class="nav nav-pills language-nav">
+                  <% @site_valid_locales.each_with_index do |locale, i| %>
+                   <% if i == 0 %>
+                      <li class="active">
+                        <a href=".en" data-toggle="tab">English</a>
+                      </li>
+                   <% else %>
+                      <li>
+                        <a href=".tw_zh" data-toggle="tab">Chinese</a>
+                      </li>
+                   <% end %>
+                   <% end %>
+                </ul>
+                <div class="tab-content language-area">
+              <!-- Language Tabs -->
+               
+                 
+                    <% @site_valid_locales.each_with_index do |locale, i| %>
+                       <% if i == 0 %>
+                         <div class="tab-pane fade in active en">
+                       <% else %>
+                          <div class="tab-pane fade tw_zh">
+                        <% end %>
+                          <div class="control-group input-title">
+                            <%= f.fields_for :name_translations do |name| %>
+                                <%= label_tag(locale, t("gallery.album_name"),:class=>"control-label muted") %>
+                                <div class="controls">
+                                   <%= name.text_field locale, :class => "input-block-level", :placeholder=>"Title",:value => (@album.name_translations[locale] rescue nil) %>
+                                </div>
+                             <% end %> 
+                          </div>
+                          <div class="control-group input-content">
+                             <%= f.fields_for :description_translations do |desc| %>
+                                 <%= label_tag(locale, t("gallery.album_desc"), :class=>"control-label muted") %>
+                                <div class="controls">
+                                  <div class="textarea">
+                                    <%= desc.text_area locale, :class => "ckeditor input-block-level", :value => (@album.description_translations[locale] rescue nil)%>
+                                  </div>
+                                </div>
+                            <% end %>
+                          </div>
+                        </div>
+                    <% end %>
+                           
+              </div>
+             
+            </div>
+            <!-- Form Actions -->
+            <div class="form-actions">
+              <%= f.submit t("gallery.save"), :class=> "btn btn-primary bt-form-save" %>
+            </div>
+
+          </fieldset>

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_image.html.erb

@@ -2,4 +2,12 @@
 	<a href="<%= panel_gallery_back_end_album_image_path(image) %>">
     	<img src="<%= image.file.thumb %>">
 	</a>
+	<ul class="photo-action clearfix">
+		<li class="photo_cover"><i class="<%= (@album.cover.to_s == image.id.to_s)? "icons-star" : "icons-star-2" %>"></i></li>
+		<li class="phtot_depiction"><a href="#view-photo-depiction" class="open" for="description"><i class="icon-comment-alt"></i></a></li>
+		<li class="phtot_tag"><a href="#view-photo-tags" class="open" for="tags"><i class="icons-tag"></i></a></li>
+	</ul>
+	<div class="check">
+		<input type="checkbox" class="checkbox">
+	</div>
 </li>

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/edit.html.erb

@@ -1,137 +1,3 @@
-<%= stylesheet_link_tag "gallery" %>
+<%= form_for @album, :url => panel_gallery_back_end_album_path(@album), :html => {:class => 'form-horizontal main-forms'} do |f| %>
-<div id="orbit_gallery" class="rg">
+  <%= render :partial => 'form', :locals => {:f => f} %>
-  <div class="rgbody">
-    <div id="imgholder">
-<ul class="breadcrumb">
-	<li><span>Home</span><span class="divider">/</span></li>
-	<li><span><%= t('gallery.gallery') %></span><span class="divider">/</span></li>
-	<li class="text-blue"><%= t(:edit) %></li>
-</ul>
-<ul class="nav nav-tabs">
-	<% @site_valid_locales.each_with_index do |locale, i| %>
-    <li <%= ( i == 0 ) ? "class=active" : '' %>><a data-toggle="tab" href=".<%= locale %>"><%= I18nVariable.from_locale(locale) %></a></li>
-	<% end %>
-</ul>
-<!-- <form id="edit_album" action="update_album" method="post"> -->
-<%= form_for @album, :url => panel_gallery_back_end_album_path(@album), :html => {:class => 'clear'} do |f| %>
-	<div class="tab_content">
-			<div class="albumname_edit">
-          <%= f.fields_for :name_translations do |name| %>
-            <%= f.label t("gallery.album_name") %>
-            <div class="inputui rginput rgih26 w380">
-               <% @site_valid_locales.each_with_index do |locale, i| %>
-                  <% if i == 0 %>
-                    <div class="<%= locale %> fade tab-pane in active">
-                  <% else %>
-                    <div class="<%= locale %> fade tab-pane" >
-                  <% end %>
-              <%= name.text_field locale, :value => (@album_name[locale]), :class => "txtchange" %>
-            </div>
-              <% end %>
-            </div>
-          <% end %>
-			</div>
-
-			<div class='description_loader'>
-				<% @images.each_with_index do |image,x| %>
-					<div class="rgphoto_edit <%= locale %>" data-content="<%= image.id %>">
-              <%= link_to panel_gallery_back_end_album_image_path(image) do %>
-                <img src="<%= image.file.thumb.url %>" />
-              <% end %>
-						<div class="inputui rginput rgih98 w380">
-							<%= f.fields_for :gallery_images, image do |j| %>
-                <%= j.hidden_field :id, :value => (image.id) %>
-                <%= j.hidden_field :_destroy, :value => false, :class => "del_field" %>
-								<%= j.fields_for :description_translations do |desc|  %>
-                <% @site_valid_locales.each_with_index do |locale, i| %>
-                  <% if i == 0 %>
-                    <div class="<%= locale %> fade tab-pane in active">
-                  <% else %>
-                    <div class="<%= locale %> fade tab-pane" >
-                  <% end %>
-									<%= desc.text_area locale, :value => (image.description_translations[locale] rescue nil), :class => "txtchange" %>
-                </div>
-                  <% end %>
-								<% end %>
-							<% end %>
-						</div>
-						<div class="edit_fn" no="<%= x %>">
-							<% if image.id.to_s == @cover %>
-								<a class="btn btn-primary rgbtsg bt-cover setcover active" onclick="return false;" title="<%= t("gallery.cover") %>" href="set_cover" for="<%= image.id %>"><span class="icon-star icon-white"></span></a>
-							<% else %>
-								<a class="btn rgbtsg bt-cover" onclick="return false;" title="<%= t("gallery.set_cover") %>" href="set_cover" for="<%= image.id %>"><span class="icon-star-empty"></span></a>
-							<% end %>
-							<a class="btn rgbtsg bt-tag" onclick="return false;" title="<%= t("gallery.photo_tag") %>" href="<%= image.id %>"><span class="icon-tags"></span></a>
-							<a class="btn rgbtsg bt-dels" onclick="return false;" title="<%= t(:delete_) %>" href="<%= image.id %>"><span class="icon-trash"></span></a>
-						</div>
-					</div>
-				<% end %>
-			</div>	
-		
-      <input type="hidden" name="delete_cover" value="false" class="del_cover" />
-	 <div class="form-actions form-fixed pagination-right rghead">
-  		<div class="rgfn">
-    	 	<a href="<%= panel_gallery_back_end_album_path(@album) %>" 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>
-        <%= f.submit t('gallery.save'), :class=>'bt-save icon-ok btn btn-primary pull-right', :style=>"display:none;" %>
-      </div>
-    </div>
-  </div>
 <% end %>
-</div>
-  </div>
-  <!-- tag part -->
-  <div id="tag_panel" class="my_scroll">
-    <div class="scrollbar">
-      <div class="track">
-        <div class="thumb">
-          <div class="end"></div>
-        </div>
-      </div>
-    </div>
-     <% 
-        @locales = Array.new
-        @site_valid_locales.each do |locale|
-          @locales << locale
-        end
-      %>
-    <div class="viewport">
-      <div class="overview">
-        <ul class="tag_list" id="gallery_tag_list">
-          <% @tags.each do |tag| %>
-             <li data-content="<%= tag.id %>"><input id="tag_<%= tag.id %>" type="checkbox"><label for="tag_<%= tag.id %>"><%= tag.name %></label><span style="display:none;"><%= tag[@locales[1]] %> <%= tag[@locales[0]] %></span></li>
-          <% end %>
-        </ul>
-      </div>
-    </div>
-     <div class="tag_search"><div class="icon-search"></div><input type="text" value="<%= t('gallery.search_tags') %>" onblur="if(this.value=='')this.value='<%= t('gallery.search_tags') %>';" onfocus="if(this.value=='<%= t("gallery.search_tags") %>')this.value='';" id="tag_search_box"> <div class="tag_save"><a class="btn bt-save"><i class="icon-ok"></i><%= I18n.t("gallery.save") %></a></div></div>
-  </div>
-  
-  <script type="text/javascript">
-      var $tag_panel = $('#tag_panel');
-          orbit_bar_height = $('#orbit-bar').outerHeight();
-          action_panel_height = $('.form-actions').outerHeight();
-          window_height = $(window).height();
-      
-      $tag_panel.height( window_height - orbit_bar_height - 90 );
-      $tag_panel.tinyscrollbar();
-
-      $(window).resize(function(){
-        $tag_panel.tinyscrollbar_update('relative');
-        $tag_panel.height( $(window).height() - orbit_bar_height - 90 );
-      });
-
-      
-  </script>
-  <!-- tag end -->
- 
-
-<% content_for :page_specific_javascript do %>
-  <%= javascript_include_tag "galleryAPI" %>
-<% end %>
-
-<script type="text/javascript">
-  galleryAPI.prototype.locale = "<%= I18n.locale %>";
-  var gallery = new galleryAPI();
-  gallery.initialize();
-  gallery.editAlbum("<%= params[:id] %>");
-</script>

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/index.html.erb

@@ -21,7 +21,7 @@ end %>
 
 <% content_for :page_specific_javascript do %>
   <%= javascript_include_tag "jquery.masonry.min.js" %>
-  <%= javascript_include_tag "jquery.mu.image.resize.js" %>
+  <%= javascript_include_tag "jquery.lite.image.resize.js" %>
   <%= javascript_include_tag "gallery" %>
 <% end %>
 

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/new.html.erb

@@ -1,105 +1,5 @@
-<%= form_for @album, :url => {:action => "create"}, :class=>"form-horizontal main-forms" do |f| %>
+<div id="poststuff">
-          <fieldset>           
+<%= form_for @album, :url => {:action => "create"},  :html => {:class => 'form-horizontal main-forms'} do |f| %>
-            <!-- Input Area -->
+       <%= render :partial => 'form', :locals => {:f => f} %>
-            <div class="input-area">
-
-              <!-- Module Tabs -->
-              <div class="nav-name"><strong>Module</strong></div>
-              <ul class="nav nav-pills module-nav">
-                <li class="active">
-                  <a href="#basic" data-toggle="tab">Basic</a>
-                </li>
-                <li>
-                  <a href="#tag" data-toggle="tab">Tags</a>
-                </li>
-              </ul>
-
-              <!-- Module -->
-              <div class="tab-content module-area">
-
-                <!-- Basic Module -->
-                <div class="tab-pane fade in active" id="basic">
-
-                  <!-- Category -->
-                  <div class="control-group">
-                    <label class="control-label muted">Category</label>
-                    <div class="controls">
-                     <%= f.select(:category_id, @categories.collect {|p| [ p.title, p.id ] },{:prompt => t("gallery.select_category")}) %>
-                    </div>
-                  </div>
-
-                </div>
- <!-- Tag Module -->
-                <div class="tab-pane fade" id="tag">
-
-                  <!-- Tag -->
-                  <div class="control-group">
-                    <label class="control-label muted">Tag</label>
-                    <div class="controls" data-toggle="buttons-checkbox">
-                      <%@tags.each do |t|%>
-                         <label class="checkbox inline btn">
-                           <%= check_box_tag "t[]", t.id %>
-                           <%= label_tag t.name%>
-                         </label>
-                      <%end %>
-                    </div>
-                  </div>
-
-                </div>
-
-              </div>
-              <div class="nav-name"><strong>Language</strong></div>
-                 <ul class="nav nav-pills language-nav">
-                  <% @site_valid_locales.each_with_index do |locale, i| %>
-                   <% if i == 0 %>
-                      <li class="active">
-                        <a href=".en" data-toggle="tab">English</a>
-                      </li>
-                   <% else %>
-                      <li>
-                        <a href=".tw_zh" data-toggle="tab">Chinese</a>
-                      </li>
-                   <% end %>
-                   <% end %>
-                </ul>
-                <div class="tab-content language-area">
-              <!-- Language Tabs -->
-               
-                 
-                    <% @site_valid_locales.each_with_index do |locale, i| %>
-                       <% if i == 0 %>
-                         <div class="tab-pane fade in active en">
-                       <% else %>
-                          <div class="tab-pane fade tw_zh">
-                        <% end %>
-                          <div class="control-group input-title">
-                            <%= f.fields_for :name_translations do |name| %>
-                                <%= label_tag(locale, t("gallery.album_name"),:class=>"control-label muted") %>
-                                <div class="controls">
-                                   <%= name.text_field locale, :class => "input-block-level", :placeholder=>"Title" %>
-                                </div>
-                             <% end %> 
-                          </div>
-                          <div class="control-group input-content">
-                             <%= f.fields_for :description_translations do |desc| %>
-                                 <%= label_tag(locale, t("gallery.album_desc"), :class=>"control-label muted") %>
-                                <div class="controls">
-                                  <div class="textarea">
-                                    <%= desc.text_area locale, :class => "ckeditor input-block-level" %>
-                                  </div>
-                                </div>
-                            <% end %>
-                          </div>
-                        </div>
-                    <% end %>
-                           
-              </div>
-             
-            </div>
-            <!-- Form Actions -->
-            <div class="form-actions">
-              <%= f.submit t("gallery.save"), :class=> "btn btn-primary bt-form-save" %>
-            </div>
-
-          </fieldset>
 <% end %>
+</div>

vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/show.html.erb

@@ -1,6 +1,6 @@
 
 <%= stylesheet_link_tag "gallery" %>
-
+<%= stylesheet_link_tag "lib/tags-groups" %>
 <!-- <div class="topnav clearfix">
   <ul class="breadcrumb text-info pull-left">
     <li><a href="/orbit_4.0.1/admin/dashboards/dashboards.shtml">Dashboard</a> <span class="divider">/</span></li>
@@ -11,12 +11,16 @@
 <!-- Bottom Nav -->
 <div class="bottomnav clearfix">
   <div class="action pull-left">
-    <a href="<%= panel_gallery_back_end_albums_path %>" class="btn"><i class="icons-back"></i> Back</a>
+    <a href="<%= panel_gallery_back_end_albums_path %>" class="btn btn-small"><i class="icons-back"></i> Back</a>
   </div>
   <div class="action pull-right">
-    <a href="#" class="btn btn-success"><i class="icon-edit"></i> Edit</a>
+    <a href="#" class="btn btn-inverse btn-small deselect hide">Deselect</a>
-    <%= link_to (content_tag(:i,"",:class=>"icon-trash")), panel_gallery_back_end_album_path(@album), :class=>"btn btn-danger", :confirm => "Are you sure?", :method=>:delete %>
+    <a href="#dialog" data-toggle="modal" class="btn btn-warning btn-small deletephoto hide"><i class="icons-cross-3"></i> Delete Photo</a>
-    <a href="#" class="add-imgs btn btn-primary"><i class="icons-plus"></i> Add Image</a>
+    <a href="#view-photo-tags" class="btn btn-primary btn-small addtags open hide" for="batch"><i class="icons-tag"></i> Add Tags</a>
+    <a href="<%= edit_panel_gallery_back_end_album_path(@album) %>" class="btn btn-small btn-success"><i class="icon-edit"></i> Edit</a>
+    <b class="divider"></b>
+    <%= link_to (content_tag(:i,"",:class=>"icon-trash")), panel_gallery_back_end_album_path(@album), :class=>"btn btn-small btn-danger", :confirm => "Are you sure?", :method=>:delete %>
+    <a href="#" class="add-imgs btn btn-small btn-primary"><i class="icons-plus"></i> Add Image</a>
   </div>
   <form action="<%= panel_gallery_back_end_upload_image_path %>", id='fileupload'>
     <!-- Redirect browsers with JavaScript disabled to the origin page -->
@@ -26,7 +30,7 @@
         <div class="navbar-inner">
           <ul class="nav">
             <li>
-              <div class="fileinput-button">
+              <div class="fileinput-button add-photo">
                 <i class="icon-plus icon-white"></i>
                 <span>Add files...</span>
                 <input type="file" name="files[]" multiple>
@@ -34,13 +38,13 @@
                 <input type="hidden" value="<%= @album.id.to_s %>" name="album_id" id="fileupload_aid" />
             </li>
             <li>
-              <button type="submit" class="start">
+              <button type="submit" class="start add-photo">
                 <i class="icon-upload icon-white"></i>
                 <span>Start upload</span>
               </button>
             </li>
             <li>
-              <button type="reset" class="cancel">
+              <button type="reset" class="cancel add-photo">
                 <i class="icon-ban-circle icon-white"></i>
                 <span>Cancel upload</span>
               </button>
@@ -86,18 +90,83 @@
     <h3><%= @album.name %></h3>
     <p class="muted"><%= @album.description.html_safe %></p>
   </div> 
-  <ul id="imgholder" class="gallery clearfix" data-gallery-id="album">
+  <ul id="imgholder" class="gallery clearfix" data-gallery-id="<%= @album.id.to_s %>">
     <% @images.each do |image| %>
       <%= render :partial=>"image", :object=>image %>
     <% end %>
   </ul>
 </div>
+ <div id="dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Delete item" aria-hidden="true">
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+      <h3>Delete Photo?</h3>
+    </div>
+    <div class="modal-body">
+      <span class="text-warning text-center">This action can not be restored, are you sure you want to delete?</span>
+      <div class="spinning">
+        <i class="icon-spinner icon-spin icon-4x"></i>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+      <button class="delete-item btn btn-danger" id="delete_selected_photos_btn">Delete</button>
+    </div>
+  </div>
+  <div id="view-photo-tags" class="nano" style="display:none">
+      <div class="content">
+        <form>
+          <fieldset>
+           <legend>Tags</legend>
+            <ul class="tags-groups">
+              <% @tags.each do |tag| %>
+              <li class="filter-item">
+                <p class="card pull-left">
+                  <input type="checkbox" value="<%= tag.id.to_s %>">
+                </p>
+                <a>
+                  <% @site_valid_locales.each_with_index do |locale, i| %>
+                    <span class="tag"><%= tag.name_translations[locale] %></span>
+                    <% if @site_valid_locales.count-1 != i %>
+                      /
+                    <% end %>  
+                  <% end %>
+                </a>
+              </li>
+              <% end %>
+            </ul>
+            <div class="form-actions">
+              <a href="javascript:$.pageslide.close()" class="btn btn-small">Cancel</a>
+              <input type="submit" value="Save" class="btn btn-primary" />
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    </div>
+
+    <div id="view-photo-depiction" class="nano" style="display:none">
+      <div class="content">
+        <form for="description" method="post" data-remote="true" action="/panel/gallery/back_end/update_image">
+          <fieldset>
+            <legend>Description</legend>
+             <% @site_valid_locales.each_with_index do |locale, i| %>
+                <label><%= I18nVariable.from_locale(locale) %></label>
+                <textarea rows="10" name="gallery_image[description_translations][<%= locale %>]" for="<%= locale %>"></textarea>
+            <% end %>
+            <div class="form-actions">
+              <a href="javascript:$.pageslide.close()" class="btn btn-small">Cancel</a>
+              <input type="submit" value="Save" class="btn btn-primary" />
+              <input type="hidden" value="" name="image_id" />
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    </div>
 
 <% content_for :page_specific_javascript do %>
   <%= javascript_include_tag "jquery.masonry.min.js" %>
-  <%= javascript_include_tag "jquery.mu.image.resize.js" %>
+  <%= javascript_include_tag "jquery.lite.image.resize.js" %>
   <%= javascript_include_tag "gallery" %>
-
+  <%= javascript_include_tag "lib/checkbox.card" %>
   <%= javascript_include_tag "file-upload/vendor/jquery.ui.widget.js" %>
   <%= javascript_include_tag "file-upload/tmpl.min.js" %>
   <%= javascript_include_tag "file-upload/load-image.min.js" %>

vendor/built_in_modules/gallery/config/routes.rb

@@ -9,9 +9,12 @@ Rails.application.routes.draw do
       	match "save_tags" => "tags#save_tags"
       	match "albums/save_tags" => "tags#save_tags"
         match "new_images" => "albums#new_images"
-        
-       	resources :albums do 
         match "set_cover" => "albums#set_cover"
+        match "delete_photos" => "album_images#delete_photos"
+        match "update_image" => "album_images#update_image"
+        match "image_tagging" => "album_images#image_tagging"
+       	resources :albums do 
+      		
       		match "imgs" => "albums#imgs"
       		match "upload_panel" => "albums#upload_panel"
       		match "images_tags" => "albums#images_tags"
@@ -26,8 +29,6 @@ Rails.application.routes.draw do
     		match "album_images/#!/:id" => "album_images#show"
     	
     		resources :album_images 
-        resources :gallery_categories
-        resources :tags
    		end
 	    
     	namespace :front_end do