From 4209356e9d492139abdd969f60e1d8fae9fbd239 Mon Sep 17 00:00:00 2001 From: Harry Bomrah Date: Fri, 30 Aug 2013 20:28:31 +0800 Subject: [PATCH] new features in gallery image view.. and also tags for gallery completed. --- .../javascripts/basic/orbit_js_1.0.1.js | 17 +- .../javascripts/lib/jquery.pageslide.js | 112 +++++++---- app/assets/stylesheets/lib/tags-groups.css | 42 ++--- app/assets/stylesheets/lib/wrap-nav.css | 10 + .../gallery/app/assets/javascripts/gallery.js | 176 ++++++++++++++++-- .../javascripts/jquery.lite.image.resize.js | 136 ++++++++++++++ .../javascripts/jquery.mu.image.resize.js | 147 --------------- .../app/assets/stylesheets/gallery.css | 142 +++++++++++++- .../back_end/album_images_controller.rb | 49 ++++- .../gallery/back_end/albums_controller.rb | 60 ++++-- .../gallery/app/uploaders/gallery_uploader.rb | 2 +- .../gallery/back_end/albums/_album.html.erb | 6 +- .../gallery/back_end/albums/_form.html.erb | 116 ++++++++++++ .../gallery/back_end/albums/_image.html.erb | 8 + .../gallery/back_end/albums/edit.html.erb | 138 +------------- .../gallery/back_end/albums/index.html.erb | 2 +- .../gallery/back_end/albums/new.html.erb | 108 +---------- .../gallery/back_end/albums/show.html.erb | 91 +++++++-- .../built_in_modules/gallery/config/routes.rb | 9 +- 19 files changed, 855 insertions(+), 516 deletions(-) create mode 100644 vendor/built_in_modules/gallery/app/assets/javascripts/jquery.lite.image.resize.js delete mode 100644 vendor/built_in_modules/gallery/app/assets/javascripts/jquery.mu.image.resize.js create mode 100644 vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_form.html.erb 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 b030bc9d..d529babc 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 06877480..f72406ae 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 e715e474..dff88fc0 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 75fc22d8..a1bb13f7 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 9c01f3da..d1bd1e69 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 00000000..27873c32 --- /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: + *
+ * + *
+ * + * 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); diff --git a/vendor/built_in_modules/gallery/app/assets/javascripts/jquery.mu.image.resize.js b/vendor/built_in_modules/gallery/app/assets/javascripts/jquery.mu.image.resize.js deleted file mode 100644 index 484a9646..00000000 --- a/vendor/built_in_modules/gallery/app/assets/javascripts/jquery.mu.image.resize.js +++ /dev/null @@ -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 '
'; - }); - } - - 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 ); \ No newline at end of file diff --git a/vendor/built_in_modules/gallery/app/assets/stylesheets/gallery.css b/vendor/built_in_modules/gallery/app/assets/stylesheets/gallery.css index 9698274d..12b87077 100644 --- a/vendor/built_in_modules/gallery/app/assets/stylesheets/gallery.css +++ b/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; diff --git a/vendor/built_in_modules/gallery/app/controllers/panel/gallery/back_end/album_images_controller.rb b/vendor/built_in_modules/gallery/app/controllers/panel/gallery/back_end/album_images_controller.rb index 6775d874..2cd280c2 100644 --- a/vendor/built_in_modules/gallery/app/controllers/panel/gallery/back_end/album_images_controller.rb +++ b/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 -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 \ No newline at end of file diff --git a/vendor/built_in_modules/gallery/app/controllers/panel/gallery/back_end/albums_controller.rb b/vendor/built_in_modules/gallery/app/controllers/panel/gallery/back_end/albums_controller.rb index 5b358f83..bfb158a7 100644 --- a/vendor/built_in_modules/gallery/app/controllers/panel/gallery/back_end/albums_controller.rb +++ b/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 - @album_name = @album.name_translations - @cover = @album.cover - @tags = GalleryTag.all - end + @tags = get_tags end def set_cover - album = GalleryAlbum.find(params[:album_id]) - image = GalleryImage.find(params[:imageid]) - album.update_attributes({:cover_path => image.file.thumb.url, :cover=>params[:imageid]}) + if params[:set_cover] == "true" + album = GalleryAlbum.find(params[:album_id]) + image = GalleryImage.find(params[:image_id]) + 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 @@ -142,7 +155,7 @@ class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController render :json=>{"files"=>a}.to_json end - def new_images + def new_images @lastimage = GalleryImage.find(params[:last_image_id]) @album = GalleryAlbum.find(params[:album_id]) @newimages = @album.gallery_images.where(:created_at.gt => @lastimage.created_at) @@ -162,11 +175,28 @@ class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController def update @album = GalleryAlbum.find(params[:id]) - @album.update_attributes(params[:gallery_album]) - if params['delete_cover'] == "true" - @album.update_attributes(:cover=>"default") + tagsToDestroy = [] + tagsToAdd = [] + 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 end - @tags = GalleryTag.all - 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 diff --git a/vendor/built_in_modules/gallery/app/uploaders/gallery_uploader.rb b/vendor/built_in_modules/gallery/app/uploaders/gallery_uploader.rb index d8670a7a..f5f0b78d 100644 --- a/vendor/built_in_modules/gallery/app/uploaders/gallery_uploader.rb +++ b/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. diff --git a/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_album.html.erb b/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_album.html.erb index 7556f58f..a69d80cf 100644 --- a/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_album.html.erb +++ b/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_album.html.erb @@ -5,7 +5,6 @@ <% else %> <% end %> -

<%= album.name %>

    @@ -14,8 +13,9 @@
    - <% @tags.each do |tag| %> -
  • <%=t(tag.name)%>
    • + <% album.tagged_ids.each do |tag| %> + <% r = @tags.select { |k| k.id.to_s == tag } %> +
  • <%= r.map {|t| t.name}[0]%>
    • <%end%>
\ No newline at end of file diff --git a/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_form.html.erb b/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_form.html.erb new file mode 100644 index 00000000..716603ab --- /dev/null +++ b/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 %> +
+ +
+ + +
Module
+ + + +
+ + +
+ + +
+ +
+ <%= f.select(:category_id, @categories.collect {|p| [ p.title, p.id ] }) %> +
+
+ +
+ +
+ + +
+ +
+ <%@tags.each do |tag|%> + + <%end %> +
+
+ +
+ +
+
Language
+
    + <% @site_valid_locales.each_with_index do |locale, i| %> + <% if i == 0 %> +
  • + English +
    • + <% else %> +
  • + Chinese +
    • + <% end %> + <% end %> +
+
+ + + + <% @site_valid_locales.each_with_index do |locale, i| %> + <% if i == 0 %> +
+ <% else %> +
+ <% end %> +
+ <%= f.fields_for :name_translations do |name| %> + <%= label_tag(locale, t("gallery.album_name"),:class=>"control-label muted") %> +
+ <%= name.text_field locale, :class => "input-block-level", :placeholder=>"Title",:value => (@album.name_translations[locale] rescue nil) %> +
+ <% end %> +
+
+ <%= f.fields_for :description_translations do |desc| %> + <%= label_tag(locale, t("gallery.album_desc"), :class=>"control-label muted") %> +
+
+ <%= desc.text_area locale, :class => "ckeditor input-block-level", :value => (@album.description_translations[locale] rescue nil)%> +
+
+ <% end %> +
+
+ <% end %> + +
+ +
+ +
+ <%= f.submit t("gallery.save"), :class=> "btn btn-primary bt-form-save" %> +
+ +
\ No newline at end of file diff --git a/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_image.html.erb b/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_image.html.erb index 773a23bd..d5016d8b 100644 --- a/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_image.html.erb +++ b/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/_image.html.erb @@ -2,4 +2,12 @@ +
    +
  • ">
    • +
    • +
    • +
+
+ +
\ No newline at end of file diff --git a/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/edit.html.erb b/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/edit.html.erb index 31346bce..f99bedb3 100644 --- a/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/edit.html.erb +++ b/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/albums/edit.html.erb @@ -1,137 +1,3 @@ -<%= stylesheet_link_tag "gallery" %> -