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($(this).hasClass('view-page')) {
-            $(this).pageslide({ W: $pageslideW, iframe: true });
-        } else if($('.item-groups').length) {
-            $(this).pageslide({ W: 324 });
-        } else {
-             $(this).pageslide();
-        };
-    });
+    if($('.item-groups').length) {
+        $os = $openSlide.not('.view-page');
+        $vp = $openSlide.filter('.view-page.open-slide');
+        $os.pageslide({ W: 324 });
+        $vp.pageslide({ W: $pageslideW, iframe: true });
+    } else {
+         $openSlide.pageslide();
+    };
     $('.bottomnav .open-slide').on('click', function() {
         $('.table tr').removeClass('active');
         $('.filter-item').removeClass('active')

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

@@ -12,13 +12,14 @@
 !(function($){
     // Convenience vars for accessing elements
     var $body = $('#main-wrap'),
+        $bottomNav = $('.bottomnav'),
         $pageslide = $('#pageslide'),
         $viewPage = $('#view-page');
     
     var _sliding = false,   // Mutex to assist closing only once
         _lastCaller;        // Used to keep track of last element to trigger pageslide
     
-	// If the pageslide element doesn't exist, create it
+    // If the pageslide element doesn't exist, create it
     if( $pageslide.length == 0 ) {
          $pageslide = $('<div />').attr( 'id', 'pageslide' )
                                   .css( 'display', 'none' )
@@ -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,10 +68,11 @@
     function _start( direction, speed ) {
         var slideWidth = $pageslide.outerWidth( true ),
             bodyAnimateIn = {},
+            bottomnavAnimateIn = {},
             slideAnimateIn = {};
         
         // If the slide is open or opening, just ignore the call
-        if( $pageslide.is(':visible') || _sliding ) return;	        
+        if( $pageslide.is(':visible') || _sliding ) return;         
         _sliding = true;
                                                                     
         switch( direction ) {
@@ -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");;
                 }
@@ -151,9 +167,9 @@
             };
 
         });                   
-	};
-	
-	/*
+    };
+    
+    /*
      * Default settings 
      */
     $.fn.pageslide.defaults = {
@@ -164,18 +180,18 @@
         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
     };
-	
-	/*
+    
+    /*
      * Public methods 
      */
-	
-	// Open the pageslide
-	$.pageslide = function( options ) {	    
-	    // Extend the settings with those the user has provided
+    
+    // Open the pageslide
+    $.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);
         }
-	    
-	    // Are we trying to open in different direction?
+        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 );
@@ -218,18 +237,19 @@
         };
 
 
-	};
+    };
 
-	// Close the pageslide
-	$.pageslide.close = function( callback ) {
+    // Close the pageslide
+    $.pageslide.close = function( callback ) {
         var $pageslide = $('#pageslide'),
             slideWidth = $pageslide.outerWidth( true ),
             speed = $pageslide.data( 'speed' ),
             bodyAnimateIn = {},
+            bottomnavAnimateIn = {};
             slideAnimateIn = {}
-            	        
+                        
         // If the slide isn't open, just ignore the call
-        if( $pageslide.is(':hidden') || _sliding ) return;	        
+        if( $pageslide.is(':hidden') || _sliding ) return;          
         _sliding = true;
         
         switch( $pageslide.data( 'direction' ) ) {
@@ -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;
@@ -287,26 +310,33 @@
             $.fn.pageslide.defaults.openFn = callback;
         };
     };
-	
-	/* Events */
-	
-	// Don't let clicks to the pageslide close the window
+
+    //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
     $pageslide.click(function(e) {
         e.stopPropagation();
     });
 
-	// Close the pageslide if the document is clicked or the users presses the ESC key, unless the pageslide is modal
-	$(document).bind('click keyup', function(e) {
-	    // If this is a keyup event, let's see if it's an ESC key
+    // Close the pageslide if the document is clicked or the users presses the ESC key, unless the pageslide is modal
+    $(document).bind('click keyup', function(e) {
+        // If this is a keyup event, let's see if it's an ESC key
         if( e.type == "keyup" && e.keyCode != 27) return;
-	    
-	    // Make sure it's visible, and we're not modal	    
-	    if( $pageslide.is( ':visible' ) && !$pageslide.data( 'modal' ) ) {	        
-	        $.pageslide.close();
-	    }
-	});
+        
+        // Make sure it's visible, and we're not modal      
+        if( $pageslide.is( ':visible' ) && !$pageslide.data( 'modal' ) ) {          
+            $.pageslide.close();
+        }
+    });
     function setScroll(){
         $pageslide.children('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true }); // set nano scroll
     };
-	
+    
 })(jQuery);

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;
 }