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

This commit is contained in:
Harry Bomrah 2013-08-30 20:28:31 +08:00 committed by saurabhbhatia
parent 3123c5de0a
commit 4209356e9d
19 changed files with 855 additions and 516 deletions

View File

@ -485,15 +485,14 @@ function openSlide() {
$(window).resize(function() { $(window).resize(function() {
$(this).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954; $(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 { } else {
$(this).pageslide(); $openSlide.pageslide();
}; };
});
$('.bottomnav .open-slide').on('click', function() { $('.bottomnav .open-slide').on('click', function() {
$('.table tr').removeClass('active'); $('.table tr').removeClass('active');
$('.filter-item').removeClass('active') $('.filter-item').removeClass('active')

View File

@ -12,13 +12,14 @@
!(function($){ !(function($){
// Convenience vars for accessing elements // Convenience vars for accessing elements
var $body = $('#main-wrap'), var $body = $('#main-wrap'),
$bottomNav = $('.bottomnav'),
$pageslide = $('#pageslide'), $pageslide = $('#pageslide'),
$viewPage = $('#view-page'); $viewPage = $('#view-page');
var _sliding = false, // Mutex to assist closing only once var _sliding = false, // Mutex to assist closing only once
_lastCaller; // Used to keep track of last element to trigger pageslide _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 ) { if( $pageslide.length == 0 ) {
$pageslide = $('<div />').attr( 'id', 'pageslide' ) $pageslide = $('<div />').attr( 'id', 'pageslide' )
.css( 'display', 'none' ) .css( 'display', 'none' )
@ -28,11 +29,12 @@
/* /*
* Private methods * Private methods
*/ */
function _load( url, useIframe ) { function _load( url, useIframe, callback,element ) {
// Are we loading an element from the page or a URL? // Are we loading an element from the page or a URL?
if ( url.indexOf("#") === 0 ) { if ( url.indexOf("#") === 0 ) {
// Load a page element // Load a page element
$(url).clone(true).appendTo( $pageslide.empty() ).show(); $(url).clone(true).appendTo( $pageslide.empty() ).show();
if(callback)callback.call(this,$pageslide,element);
} else { } else {
// Load a URL. Into an iframe? // Load a URL. Into an iframe?
if( useIframe ) { if( useIframe ) {
@ -49,9 +51,11 @@
$viewPage.find('.content').html( iframe ); $viewPage.find('.content').html( iframe );
$viewPage.clone(true).appendTo( $pageslide.empty() ).show(); $viewPage.clone(true).appendTo( $pageslide.empty() ).show();
$viewPage.find('.content').empty(); $viewPage.find('.content').empty();
if(callback)callback.call(this,$viewPage,element);
} else { } else {
$viewPage.find('.content').load(url, function(){ $viewPage.find('.content').load(url, function(){
$viewPage.clone(true).appendTo( $pageslide.empty() ).show(); $viewPage.clone(true).appendTo( $pageslide.empty() ).show();
if(callback)callback.call(this,$viewPage,element);
}); });
} }
@ -64,6 +68,7 @@
function _start( direction, speed ) { function _start( direction, speed ) {
var slideWidth = $pageslide.outerWidth( true ), var slideWidth = $pageslide.outerWidth( true ),
bodyAnimateIn = {}, bodyAnimateIn = {},
bottomnavAnimateIn = {},
slideAnimateIn = {}; slideAnimateIn = {};
// If the slide is open or opening, just ignore the call // If the slide is open or opening, just ignore the call
@ -83,6 +88,7 @@
$pageslide.css({ left: '-' + (slideWidth-61) + 'px', right: 'auto' }); $pageslide.css({ left: '-' + (slideWidth-61) + 'px', right: 'auto' });
}; };
bodyAnimateIn['margin-left'] = '+=' + slideWidth; bodyAnimateIn['margin-left'] = '+=' + slideWidth;
bottomnavAnimateIn['left'] = '+=' + slideWidth;
if($(window).width() <= 1440 && slideWidth > 963 ) { if($(window).width() <= 1440 && slideWidth > 963 ) {
bodyAnimateIn['width'] = $body.width(); bodyAnimateIn['width'] = $body.width();
} }
@ -92,6 +98,7 @@
// Animate the slide, and attach this slide's settings to the element // Animate the slide, and attach this slide's settings to the element
$body.animate(bodyAnimateIn, speed); $body.animate(bodyAnimateIn, speed);
$bottomNav.animate(bottomnavAnimateIn, speed);
$pageslide.show().animate(slideAnimateIn, speed, function() { $pageslide.show().animate(slideAnimateIn, speed, function() {
_sliding = false; _sliding = false;
$pageslide.children('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true }); $pageslide.children('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
@ -108,7 +115,7 @@
$.fn.pageslide = function(options) { $.fn.pageslide = function(options) {
var $elements = this; var $elements = this;
// On click // On click
$elements.on(clickEvent, function(e) { $elements.bind(clickEvent, function(e) {
var $self = $(this), var $self = $(this),
settings = $.extend({ href: $self.attr('href') }, options); settings = $.extend({ href: $self.attr('href') }, options);
@ -121,7 +128,7 @@
$.pageslide.close(); $.pageslide.close();
} else { } else {
// Open // Open
$.pageslide( settings ); $.pageslide( settings,$self );
if($('.item-groups').length) { if($('.item-groups').length) {
$('.item-menu > a, .navbar-inner').removeClass("active"); $('.item-menu > a, .navbar-inner').removeClass("active");
@ -140,7 +147,16 @@
$pageName = $self.parents('.item-title').children('a').text(); $pageName = $self.parents('.item-title').children('a').text();
$('.page-name').text($pageName); $('.page-name').text($pageName);
} else if($('.tags-groups').length) { } 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 { } else {
$(this).parents("tr").addClass("active").siblings().removeClass("active");; $(this).parents("tr").addClass("active").siblings().removeClass("active");;
} }
@ -151,9 +167,9 @@
}; };
}); });
}; };
/* /*
* Default settings * Default settings
*/ */
$.fn.pageslide.defaults = { $.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. href: null, // Override the source of the content. Optional in most cases, but required when opening pageslide programmatically.
W: 264, W: 264,
closeFn : null, closeFn : null,
openFn : null openFn : null,
loadComplete : null
}; };
/* /*
* Public methods * Public methods
*/ */
// Open the pageslide // Open the pageslide
$.pageslide = function( options ) { $.pageslide = function( options,element ) {
// Extend the settings with those the user has provided // Extend the settings with those the user has provided
var settings = $.extend({}, $.fn.pageslide.defaults, options); var settings = $.extend({}, $.fn.pageslide.defaults, options);
var convertToFunction = function(fn){ var convertToFunction = function(fn){
var x = new Function(); var x = new Function();
x = fn; x = fn;
@ -190,16 +206,19 @@
if(settings.closeFn) { if(settings.closeFn) {
$.fn.pageslide.defaults.closeFn = convertToFunction(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? // 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) ) { if( ($pageslide.is(':visible') && $pageslide.data( 'W' ) != settings.W) || ($pageslide.is(':visible') && $pageslide.data( 'direction' ) != settings.direction) ) {
$.pageslide.close(function(){ $.pageslide.close(function(){
$pageslide.css({'width': settings.W}); $pageslide.css({'width': settings.W});
_load( settings.href, settings.iframe ); _load( settings.href, settings.iframe, settings.loadComplete, element );
_start( settings.direction, settings.speed ); _start( settings.direction, settings.speed );
}); });
} else { } else {
_load( settings.href, settings.iframe ); _load( settings.href, settings.iframe, settings.loadComplete,element );
if( $pageslide.is(':hidden') ) { if( $pageslide.is(':hidden') ) {
$pageslide.css({'width': settings.W}); $pageslide.css({'width': settings.W});
_start( settings.direction, settings.speed ); _start( settings.direction, settings.speed );
@ -218,14 +237,15 @@
}; };
}; };
// Close the pageslide // Close the pageslide
$.pageslide.close = function( callback ) { $.pageslide.close = function( callback ) {
var $pageslide = $('#pageslide'), var $pageslide = $('#pageslide'),
slideWidth = $pageslide.outerWidth( true ), slideWidth = $pageslide.outerWidth( true ),
speed = $pageslide.data( 'speed' ), speed = $pageslide.data( 'speed' ),
bodyAnimateIn = {}, bodyAnimateIn = {},
bottomnavAnimateIn = {};
slideAnimateIn = {} slideAnimateIn = {}
// If the slide isn't open, just ignore the call // If the slide isn't open, just ignore the call
@ -239,9 +259,10 @@
break; break;
default: default:
bodyAnimateIn['margin-left'] = '-=' + slideWidth; bodyAnimateIn['margin-left'] = '-=' + slideWidth;
bottomnavAnimateIn['left'] = '-=' + slideWidth;
slideAnimateIn['left'] = '-=' + slideWidth; slideAnimateIn['left'] = '-=' + slideWidth;
if($pageslide.find('.preview').length) { if($pageslide.find('.preview').length) {
// $pageslide.find('.preview').cycle('destroy'); $pageslide.find('.preview').cycle('destroy');
$pageslide.find('.preview img').removeAttr('style'); $pageslide.find('.preview img').removeAttr('style');
} }
break; break;
@ -257,11 +278,13 @@
} }
} else if($('.tags-groups').length) { } else if($('.tags-groups').length) {
$('.tags-groups').children('li').removeClass("active"); $('.tags-groups').children('li').removeClass("active");
$('.rgalbum').removeClass("active-single");
} else { } else {
$("tr").removeClass("active"); $("tr").removeClass("active");
}; };
$pageslide.animate(slideAnimateIn, speed); $pageslide.animate(slideAnimateIn, speed);
$bottomNav.animate(bottomnavAnimateIn, speed);
$body.animate(bodyAnimateIn, speed, function() { $body.animate(bodyAnimateIn, speed, function() {
$pageslide.hide(); $pageslide.hide();
_sliding = false; _sliding = false;
@ -288,23 +311,30 @@
}; };
}; };
/* Events */ //data load complete callback
$.pageslide.loadComplete = function(callback) {
if(typeof callback === "function"){
$.fn.pageslide.defaults.loadComplete = callback;
};
};
// Don't let clicks to the pageslide close the window /* Events */
// Don't let clicks to the pageslide close the window
$pageslide.click(function(e) { $pageslide.click(function(e) {
e.stopPropagation(); e.stopPropagation();
}); });
// Close the pageslide if the document is clicked or the users presses the ESC key, unless the pageslide is modal // 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) { $(document).bind('click keyup', function(e) {
// If this is a keyup event, let's see if it's an ESC key // If this is a keyup event, let's see if it's an ESC key
if( e.type == "keyup" && e.keyCode != 27) return; if( e.type == "keyup" && e.keyCode != 27) return;
// Make sure it's visible, and we're not modal // Make sure it's visible, and we're not modal
if( $pageslide.is( ':visible' ) && !$pageslide.data( 'modal' ) ) { if( $pageslide.is( ':visible' ) && !$pageslide.data( 'modal' ) ) {
$.pageslide.close(); $.pageslide.close();
} }
}); });
function setScroll(){ function setScroll(){
$pageslide.children('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true }); // set nano scroll $pageslide.children('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true }); // set nano scroll
}; };

View File

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

View File

@ -41,6 +41,16 @@
.bottomnav .action { .bottomnav .action {
margin-bottom: 6px; 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 { .bottomnav .pagination {
margin: 0; margin: 0;
} }

View File

@ -20,30 +20,27 @@
$(function() { $(function() {
var $container = $('.gallery'), var $container = $('.gallery'),
$containerData = $container.data(); $containerData = $container.data();
$container.imagesLoaded(function(){
$container.imagesLoaded( function(){
var $albumname = $('.albumname'), var $albumname = $('.albumname'),
$img = $('.rgalbum img'); $img = $('.rgalbum img');
$img.muImageResize({width: 200, height:200}); $('.rgalbum > a').rsImg();
if($containerData.galleryId == 'gallery') { if($containerData.galleryId == 'gallery') {
$container.masonry({ $container.masonry({
itemSelector : '.rgalbum', itemSelector : '.rgalbum',
isAnimated: true, isAnimated: true,
}); });
$albumname.each(function(i) { $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({ $(this).css({
'bottom': "auto", 'bottom': "auto",
'top': 0, 'top': 0,
}); });
$(this).hover(function() { $(this).hover(function() {
$(this).stop(true, true).delay(500).animate({ $(this).stop(true, true).delay(500).animate({
'top': '-='+($H-$imgH), 'top': '-='+($H-$albumblock),
},($H-$imgH)*10) },($H-$albumblock)*10)
},function() { },function() {
$(this).stop(true, true); $(this).stop(true, true);
$(this).css({ $(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() { $(this).parents('.gallery_info').nextAll('.albumtag').slideToggle(300, function() {
$container.masonry({ $container.masonry({
itemSelector : '.rgalbum', 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({ $('.add-imgs').on({
click: function() { click: function() {
$('#fileupload').slideToggle(300, function() { $('#fileupload').slideToggle(300, function() {
@ -91,15 +234,16 @@ $(function() {
success : function(data){ success : function(data){
var $e = $(data); var $e = $(data);
$imgs = $e.find("img"); $imgs = $e.find("img");
$imgs.muImageResize({width: 200, height:200});
$("#imgholder").append($e); $("#imgholder").append($e);
$os = $e.find("a.open");
$os.pageslide({
loadComplete: function(instance,elem) {
bindEvent(instance,elem);
}
});
} }
}) })
} }
}); });

View File

@ -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);

View File

@ -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 );

View File

@ -23,6 +23,7 @@
overflow: hidden; overflow: hidden;
margin: 0 0 10px; margin: 0 0 10px;
width: 200px; width: 200px;
height: 200px;
-webkit-transition: all .2s linear; -webkit-transition: all .2s linear;
-moz-transition: all .2s linear; -moz-transition: all .2s linear;
-o-transition: all .2s linear; -o-transition: all .2s linear;
@ -34,7 +35,8 @@
#orbit_gallery .rgalbum:hover a img { #orbit_gallery .rgalbum:hover a img {
-webkit-filter: blur(2px); -webkit-filter: blur(2px);
} }
#orbit_gallery .rgalbum a span { #orbit_gallery .rgalbum a:after {
content: "";
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -51,7 +53,7 @@
-o-transition: all .2s linear; -o-transition: all .2s linear;
transition: all .2s linear; transition: all .2s linear;
} }
#orbit_gallery .rgalbum:hover a span { #orbit_gallery .rgalbum:hover a:after {
opacity: .4; opacity: .4;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40); filter: alpha(opacity=40);
@ -67,6 +69,7 @@
font-size: 30px; font-size: 30px;
font-family: 'Playfair Display SC', sans-serif; font-family: 'Playfair Display SC', sans-serif;
line-height: 28px; line-height: 28px;
z-index: 1;
opacity: .0; opacity: .0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0); filter: alpha(opacity=0);
@ -143,26 +146,82 @@
list-style: none; list-style: none;
} }
#imgholder .rgalbum { #imgholder .rgalbum {
position: relative;
float: left; float: left;
margin: 5px; margin: 5px;
padding: 5px; padding: 5px;
width: 200px; width: 200px;
background: #FFFFFF; background: #FFFFFF;
overflow: hidden;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
-moz-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); 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; -webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top; -moz-transition-property: left, right, top;
-ms-transition-property: left, right, top; -ms-transition-property: left, right, top;
-o-transition-property: left, right, top; -o-transition-property: left, right, top;
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 { #imgholder .rgalbum a {
display: block; display: block;
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
width: 200px; width: 200px;
height: 200px;
-webkit-transition: all .2s linear; -webkit-transition: all .2s linear;
-moz-transition: all .2s linear; -moz-transition: all .2s linear;
-o-transition: all .2s linear; -o-transition: all .2s linear;
@ -171,7 +230,80 @@
#imgholder .rgalbum a img { #imgholder .rgalbum a img {
max-width: none; 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 */ /* File Upload */
#upload-panel { #upload-panel {
@ -200,7 +332,7 @@
#fileupload .fileupload-buttonbar .navbar { #fileupload .fileupload-buttonbar .navbar {
margin-bottom: 0; margin-bottom: 0;
} }
#fileupload .fileupload-buttonbar .navbar button { #fileupload .fileupload-buttonbar .navbar .add-photo {
border: none; border: none;
border-right: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4;
background-color: transparent; background-color: transparent;
@ -209,7 +341,7 @@
text-decoration: none; text-decoration: none;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff;
} }
#fileupload .fileupload-buttonbar .navbar button:hover { #fileupload .fileupload-buttonbar .navbar .add-photo:hover {
color: #333333; color: #333333;
text-decoration: none; text-decoration: none;
background-color: #EDEDED; background-color: #EDEDED;

View File

@ -21,9 +21,54 @@ class Panel::Gallery::BackEnd::AlbumImagesController < OrbitBackendController
end end
if params['delete_cover'] == "true" if params['delete_cover'] == "true"
album = GalleryAlbum.find(params['id']) album = GalleryAlbum.find(params['id'])
album.update_attributes(:cover=>"default") album.update_attributes(:cover=>"default",:cover_path => nil)
end end
render :json =>{"success"=>true}.to_json 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 end

View File

@ -3,6 +3,10 @@ class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController
open_for_manager :except => [:index,:show,:update] open_for_manager :except => [:index,:show,:update]
open_for_sub_manager :except => [:index, :show] 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 # before_filter lambda
def index def index
@ -15,6 +19,15 @@ class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController
def show def show
@album = GalleryAlbum.find(params[:id]) @album = GalleryAlbum.find(params[:id])
@images = @album.gallery_images @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 end
def new def new
@ -40,19 +53,19 @@ class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController
end end
def edit def edit
if is_manager? || is_admin? || is_sub_manager?
@album = GalleryAlbum.find(params[:id]) @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 end
def set_cover def set_cover
album = GalleryAlbum.find(params[:album_id]) if params[:set_cover] == "true"
image = GalleryImage.find(params[:imageid]) album = GalleryAlbum.find(params[:album_id])
album.update_attributes({:cover_path => image.file.thumb.url, :cover=>params[:imageid]}) 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 render :json =>{"success"=>true}.to_json
end end
@ -162,11 +175,28 @@ class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController
def update def update
@album = GalleryAlbum.find(params[:id]) @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
end end
@tags = GalleryTag.all new_tags.each do |tag|
render :action => :show 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
end end

View File

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

View File

@ -5,7 +5,6 @@
<% else %> <% else %>
<img src="<%= album.cover_path %>"> <img src="<%= album.cover_path %>">
<% end %> <% end %>
<span></span>
<p class="albumname"><%= album.name %></p> <p class="albumname"><%= album.name %></p>
</a> </a>
<ul class="gallery_info clearfix"> <ul class="gallery_info clearfix">
@ -14,8 +13,9 @@
<li class="albumcateg"></li> <li class="albumcateg"></li>
</ul> </ul>
<ul class="albumtag"> <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%> <%end%>
</ul> </ul>
</li> </li>

View File

@ -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>

View File

@ -2,4 +2,12 @@
<a href="<%= panel_gallery_back_end_album_image_path(image) %>"> <a href="<%= panel_gallery_back_end_album_image_path(image) %>">
<img src="<%= image.file.thumb %>"> <img src="<%= image.file.thumb %>">
</a> </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> </li>

View File

@ -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 %> <% 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>

View File

@ -21,7 +21,7 @@ end %>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "jquery.masonry.min.js" %> <%= 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 "gallery" %>
<% end %> <% end %>

View File

@ -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 %> <% end %>
</div>

View File

@ -1,6 +1,6 @@
<%= stylesheet_link_tag "gallery" %> <%= stylesheet_link_tag "gallery" %>
<%= stylesheet_link_tag "lib/tags-groups" %>
<!-- <div class="topnav clearfix"> <!-- <div class="topnav clearfix">
<ul class="breadcrumb text-info pull-left"> <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> <li><a href="/orbit_4.0.1/admin/dashboards/dashboards.shtml">Dashboard</a> <span class="divider">/</span></li>
@ -11,12 +11,16 @@
<!-- Bottom Nav --> <!-- Bottom Nav -->
<div class="bottomnav clearfix"> <div class="bottomnav clearfix">
<div class="action pull-left"> <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>
<div class="action pull-right"> <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> </div>
<form action="<%= panel_gallery_back_end_upload_image_path %>", id='fileupload'> <form action="<%= panel_gallery_back_end_upload_image_path %>", id='fileupload'>
<!-- Redirect browsers with JavaScript disabled to the origin page --> <!-- Redirect browsers with JavaScript disabled to the origin page -->
@ -26,7 +30,7 @@
<div class="navbar-inner"> <div class="navbar-inner">
<ul class="nav"> <ul class="nav">
<li> <li>
<div class="fileinput-button"> <div class="fileinput-button add-photo">
<i class="icon-plus icon-white"></i> <i class="icon-plus icon-white"></i>
<span>Add files...</span> <span>Add files...</span>
<input type="file" name="files[]" multiple> <input type="file" name="files[]" multiple>
@ -34,13 +38,13 @@
<input type="hidden" value="<%= @album.id.to_s %>" name="album_id" id="fileupload_aid" /> <input type="hidden" value="<%= @album.id.to_s %>" name="album_id" id="fileupload_aid" />
</li> </li>
<li> <li>
<button type="submit" class="start"> <button type="submit" class="start add-photo">
<i class="icon-upload icon-white"></i> <i class="icon-upload icon-white"></i>
<span>Start upload</span> <span>Start upload</span>
</button> </button>
</li> </li>
<li> <li>
<button type="reset" class="cancel"> <button type="reset" class="cancel add-photo">
<i class="icon-ban-circle icon-white"></i> <i class="icon-ban-circle icon-white"></i>
<span>Cancel upload</span> <span>Cancel upload</span>
</button> </button>
@ -86,18 +90,83 @@
<h3><%= @album.name %></h3> <h3><%= @album.name %></h3>
<p class="muted"><%= @album.description.html_safe %></p> <p class="muted"><%= @album.description.html_safe %></p>
</div> </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| %> <% @images.each do |image| %>
<%= render :partial=>"image", :object=>image %> <%= render :partial=>"image", :object=>image %>
<% end %> <% end %>
</ul> </ul>
</div> </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 %> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "jquery.masonry.min.js" %> <%= 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 "gallery" %>
<%= javascript_include_tag "lib/checkbox.card" %>
<%= javascript_include_tag "file-upload/vendor/jquery.ui.widget.js" %> <%= javascript_include_tag "file-upload/vendor/jquery.ui.widget.js" %>
<%= javascript_include_tag "file-upload/tmpl.min.js" %> <%= javascript_include_tag "file-upload/tmpl.min.js" %>
<%= javascript_include_tag "file-upload/load-image.min.js" %> <%= javascript_include_tag "file-upload/load-image.min.js" %>

View File

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