diff --git a/app/assets/javascripts/basic/orbit_js_1.0.1.js b/app/assets/javascripts/basic/orbit_js_1.0.1.js index b030bc9dd..d529babcf 100644 --- a/app/assets/javascripts/basic/orbit_js_1.0.1.js +++ b/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') diff --git a/app/assets/javascripts/lib/jquery.pageslide.js b/app/assets/javascripts/lib/jquery.pageslide.js index 06877480a..f72406aee 100644 --- a/app/assets/javascripts/lib/jquery.pageslide.js +++ b/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 = $('
').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); \ No newline at end of file diff --git a/app/assets/stylesheets/lib/tags-groups.css b/app/assets/stylesheets/lib/tags-groups.css index e715e474a..dff88fc0a 100644 --- a/app/assets/stylesheets/lib/tags-groups.css +++ b/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; } diff --git a/app/assets/stylesheets/lib/wrap-nav.css b/app/assets/stylesheets/lib/wrap-nav.css index 75fc22d87..a1bb13f7f 100644 --- a/app/assets/stylesheets/lib/wrap-nav.css +++ b/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; } diff --git a/vendor/built_in_modules/gallery/app/assets/javascripts/gallery.js b/vendor/built_in_modules/gallery/app/assets/javascripts/gallery.js index 9c01f3da3..d1bd1e698 100644 --- a/vendor/built_in_modules/gallery/app/assets/javascripts/gallery.js +++ b/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(), - $H = $(this).height()+20, - $fontSize = parseInt($(this).css('font-size')); - $lineHeight = parseInt($(this).css('line-height')); - if($H > $imgH) { + var $albumblock = $(this).closest('a').height(), + $H = $(this).outerHeight(true); + if($H > $albumblock) { $(this).css({ 'bottom': "auto", 'top': 0, }); $(this).hover(function() { $(this).stop(true, true).delay(500).animate({ - 'top': '-='+($H-$imgH), - },($H-$imgH)*10) + 'top': '-='+($H-$albumblock), + },($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', @@ -63,7 +60,153 @@ $(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); + } + }); } }) } }); - - - diff --git a/vendor/built_in_modules/gallery/app/assets/javascripts/jquery.lite.image.resize.js b/vendor/built_in_modules/gallery/app/assets/javascripts/jquery.lite.image.resize.js new file mode 100644 index 000000000..27873c32d --- /dev/null +++ b/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: + *<%= album.name %>