From 17763f2cdc63b650f993832c364724fedf8bfc7b Mon Sep 17 00:00:00 2001 From: chiu Date: Fri, 10 Jan 2020 00:14:41 +0800 Subject: [PATCH] 1.change the default color of gallery frame 2.let user can rotate images 3.add playable feature for show page --- app/assets/javascripts/gallery.js | 85 ++++++++- app/assets/javascripts/theater.js | 57 +++++- app/assets/stylesheets/theater.css | 9 +- app/controllers/admin/galleries_controller.rb | 179 ++++++++++++------ app/controllers/admin/images_controller.rb | 8 +- app/uploaders/gallery_uploader.rb | 44 +++-- app/views/admin/galleries/_form.html.erb | 2 +- app/views/admin/galleries/show.html.erb | 9 + app/views/admin/images/edit_image.html.erb | 1 + app/views/galleries/show.html.erb | 2 +- config/locales/en.yml | 7 + config/locales/zh_tw.yml | 7 + config/routes.rb | 1 + 13 files changed, 329 insertions(+), 82 deletions(-) diff --git a/app/assets/javascripts/gallery.js b/app/assets/javascripts/gallery.js index 012a840..c5b7912 100644 --- a/app/assets/javascripts/gallery.js +++ b/app/assets/javascripts/gallery.js @@ -1,3 +1,14 @@ +function rotate(){ + $("#crop_div").dialog("open"); +} +function change_degree(degree_change){ + var degree_org = parseInt($('#show_degree').text()) + degree_org+=degree_change + if (degree_org==360 || degree_org==-360){ + degree_org = 0 + } + $('#show_degree').text(degree_org) +} function init_upload(temp_length){ var value = $("input[name='all_upload_length']") if (value.val()==''){ @@ -119,15 +130,22 @@ function batch_crop(){ function select_all() { $('#imgholder').find("input[type='checkbox']:not(:checked)").trigger('click') } -function translate(ele,pretext,text){ +function translate(ele,pretext,text,return_flag){ + var return_value if (navigator.onLine) { $.ajax({ url : "/admin/galleries/translate", dataType : "json", type : "post", + async: false, data:{text:text}, success:function(data){ - ele.html(pretext + data.translate) + if (return_flag){ + return_value = data.translate + } + else{ + ele.html(pretext + data.translate) + } }, error:function(){ var back = text.split('.')[1].split('_') @@ -135,7 +153,12 @@ function translate(ele,pretext,text){ for (i=0;i ','gallery.close_panel') + translate($('.add-imgs'),' ','gallery.close_panel',false) $('.rgbody').stop(true, false).animate({'padding-bottom': 280}, 300); $("#edit-order-btn").hide(); $.ajax({ @@ -381,7 +412,7 @@ $(function() { last_image_id = d.last_image_id; }) } else { - translate($('.add-imgs'),' ','gallery.add_image') + translate($('.add-imgs'),' ','gallery.add_image',false) $('.files').empty() $('#file-list').checkListLength(); $('.rgbody').stop(true, false).animate({'padding-bottom': 0}, 300); @@ -416,5 +447,43 @@ $(function() { }) } + var buttons_option={} + var op_fn1 = function() { + var check_img = $('#imgholder').find("input[type='checkbox']:checked").parents('li').find('img'); + check_img.each(function(){ + check_img.css('transform','rotate('+$('#show_degree').text()+'deg)'); + }); + } + var op_fn2 = function() { + var confirm_msg = translate('','','gallery.confirm_msg',true) + if ( confirm (confirm_msg) ){ + var check_li = $('#imgholder').find("input[type='checkbox']:checked").parents('li'); + var image_ids =[]; + check_li.each(function(){ + image_ids.push($(this).data('image-id')); + }); + if (navigator.onLine) { + window.location.href = '/admin/galleries/rotate_images?image_ids=' + image_ids.join(',') +'&rotate_angle=' + $('#show_degree').text() + } else { + alert('Please connect the network and try again later!') + } + console.log(image_ids) + $(this).dialog("close"); + } + + } + var op_fn3 = function() { $(this).dialog("close"); } + var op1 = translate('','','gallery.review',true) + var op2 = translate('','','gallery.rotate',true) + var op3 = translate('','','gallery.close_panel',true) + buttons_option[op1] = op_fn1 + buttons_option[op2] = op_fn2 + buttons_option[op3] = op_fn3 + $("#crop_div").dialog({ + autoOpen: false, + show: "blind", + hide: "explode", + buttons: buttons_option + }); }); diff --git a/app/assets/javascripts/theater.js b/app/assets/javascripts/theater.js index 6ae0264..ca55282 100644 --- a/app/assets/javascripts/theater.js +++ b/app/assets/javascripts/theater.js @@ -25,7 +25,12 @@ var GalleryTheater = function(){ gt.thumbStrip = null; gt.descriptionArea = null; gt.isTheaterInitialized = false; - + var play_flag = false; + var button_left_string = '', + button_right_string = '', + button_play_string = '', + button_stop_string = '', + playtimeoutID; var initialize = function(){ gt.stage = $("#gallery-theater-stage"); gt.closeBtn = gt.stage.find(".gallery-close"); @@ -49,7 +54,12 @@ var GalleryTheater = function(){ } var addButton = function () { $('.theaterButton').remove(); - $(' ').insertAfter($('img.gal-active')); + if (!play_flag){ + $(button_left_string+button_play_string+button_right_string).insertAfter($('img.gal-active')); + } + else{ + $(button_left_string+button_stop_string+button_right_string).insertAfter($('img.gal-active')); + } if (!$(".gal-prev").length) { $('#theaterPreviousButton').remove(); } if (!$(".gal-next").length) { $('#theaterNextButton').remove(); } @@ -59,6 +69,18 @@ var GalleryTheater = function(){ $('#theaterNextButton').click(function () { gt.nextPic(); }); + $('#theaterPlayButton').click(function () { + play_flag = true; + playtimeoutID = window.setInterval(function(){ + gt.playallPic(); + },3000) + window.onhashchange() + }); + $('#theaterStopButton').click(function () { + play_flag = false; + window.onhashchange() + window.clearInterval(playtimeoutID) + }); } addButton(); @@ -198,7 +220,33 @@ var GalleryTheater = function(){ } } } - + gt.playallPic = function(){ + if(loadingProcess == 0){ + mainPicLoading = 1; + nextPicLoading = 1; + prevPicLoading = 1; + if(gt.hasNextImage()){ + currentPic.image = gt.albumData.images[currentPic.index + 1]; + currentPic.index = currentPic.index + 1; + setMainPic("next"); + } + else{ + currentPic.image = gt.albumData.images[0]; + currentPic.index = 0; + setMainPic(); + gt.isTheaterInitialized = false; + setTimeout(function(){ + loadingProcess = 0; + nextPicLoading = 0; + $('.theaterButton').remove() + $("img.gallery-image.gal-prev.gal-inactive").remove(); + img = $("img.gallery-image.gal-active"); + img.eq(0).remove(); + window.onhashchange() + },100) + } + } + } gt.previousPic = function(){ @@ -310,6 +358,9 @@ var GalleryTheater = function(){ setThumbNavs(); } setMainPic(); + if (!$('.theaterButton').length){ + window.onhashchange() + } } diff --git a/app/assets/stylesheets/theater.css b/app/assets/stylesheets/theater.css index ca912d0..26969a8 100644 --- a/app/assets/stylesheets/theater.css +++ b/app/assets/stylesheets/theater.css @@ -465,15 +465,18 @@ body { } /* 相本裡的左右控制鍵 */ +#theaterPlayButton,#theaterStopButton{ + left:30%; +} .theaterButton{ position: absolute; text-align: center; -width: 45%; -bottom: 50px; +width: 35%; +bottom: 1.8em; background-color: transparent; border: none; color: white; -padding: 15px 32px; +padding: 0.4em 1em; text-align: center; text-decoration: none; display: inline-block; diff --git a/app/controllers/admin/galleries_controller.rb b/app/controllers/admin/galleries_controller.rb index 712c94a..34e404b 100644 --- a/app/controllers/admin/galleries_controller.rb +++ b/app/controllers/admin/galleries_controller.rb @@ -38,62 +38,135 @@ class Admin::GalleriesController < OrbitAdminController end end end + + def rotate_images + begin + image_ids = params['image_ids'].split(',') + images = AlbumImage.find(image_ids) + count = images.length + rot_ang = params[:rotate_angle].to_i + images.each_with_index do |image,index| + if !(image.album_crops.first.nil?) + w_and_h = image.file.get_w_and_h + cords = image.album_crops.map{|v| [[v.crop_x.to_f,v.crop_y.to_f], + [v.crop_x.to_f,v.crop_y.to_f+v.crop_h.to_f], + [v.crop_w.to_f+v.crop_x.to_f,v.crop_y.to_f], + [v.crop_w.to_f+v.crop_x.to_f,v.crop_y.to_f+v.crop_h.to_f]]}[0] + rot_diff = rot_ang/90 + if (rot_diff) % 2 == 1 + new_w = (w_and_h[1]).to_f + new_h = (w_and_h[0]).to_f + else + new_w = (w_and_h[0]).to_f + new_h = (w_and_h[1]).to_f + end + + rot_times = rot_diff % 4 + deg = (90.0*rot_times/180*Math::PI) + cords = cords.collect do |cord| + x = cord[0]-w_and_h[0].to_f/2 + y = cord[1]-w_and_h[1].to_f/2 + [x*Math.cos(deg)-y*Math.sin(deg)+new_w/2,x*Math.sin(deg)+y*Math.cos(deg)+new_h/2] + end + all_x = cords.collect do |cord| + cord[0] + end + all_y = cords.collect do |cord| + cord[1] + end + image.album_crops.first.update_attributes(crop_x: all_x.min,crop_y: all_y.min,crop_w: all_x.max - all_x.min,crop_h: all_y.max - all_y.min) + end + end + variable = AlbumVariable.first + if variable.nil? + variable = AlbumVariable.new + end + variable.finish = false + variable.save! + Thread.new do + variable = AlbumVariable.first + images.each_with_index do |image,index| + variable.progress_percent = (index*100.0/count).floor.to_s+'%' + image.file.rotate_ang(rot_ang) + all_version = image.file.versions.map{|k,v| k} + begin + variable.progress_filename = image[:file].to_s + all_version.each do |version| + if !(version.to_s == 'resized' && crop_but_no_backup(image)) + image.file.recreate_versions! version + image.save! + end + end + rescue => e + variable.progress_filename = e.inspect.to_s + puts e.inspect + end + variable.save! + end + variable.finish = true + variable.save! + end + rescue => e + puts e.inspect + end + redirect_to :controller=> 'images' ,:action => 'crop_process' + end def save_crop begin - images = AlbumImage.all.select{|value| params[:id].include? value.id.to_s} - id = images.first.album_id.to_s - x = params['x'] - y = params['y'] - w = params['w'] - h = params['h'] - cords = x.zip(y,w,h) - count = cords.length - images.each_with_index do |image,index| - cord = cords[index] - if image.album_crops.first.nil? - image.album_crops.create(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3]) - else - image.album_crops.first.update_attributes(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3]) - end - end - variable = AlbumVariable.first - if variable.nil? - variable = AlbumVariable.new - end - variable.finish = false - variable.save! - Thread.new do - variable = AlbumVariable.first - images.each_with_index do |image,index| - variable.progress_percent = (index*100.0/count).floor.to_s+'%' - all_version = image.file.versions.map{|k,v| k} - begin - #org_fname = image.file.path - #org_extname = File.extname(org_fname) - #org_fname.slice! org_extname - #FileUtils.cp(org_fname + org_extname, org_fname + '_resized' + org_extname) - variable.progress_filename = image[:file].to_s - all_version.each do |version| - if !(version.to_s == 'resized' && crop_but_no_backup(image)) - image.file.recreate_versions! version - image.save! - end - end - rescue => e - variable.progress_filename = e.inspect.to_s - puts e.inspect - end - variable.save! + images = AlbumImage.all.select{|value| params[:id].include? value.id.to_s} + id = images.first.album_id.to_s + x = params['x'] + y = params['y'] + w = params['w'] + h = params['h'] + cords = x.zip(y,w,h) + count = cords.length + images.each_with_index do |image,index| + cord = cords[index] + if image.album_crops.first.nil? + image.album_crops.create(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3]) + else + image.album_crops.first.update_attributes(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3]) + end end - variable.finish = true + variable = AlbumVariable.first + if variable.nil? + variable = AlbumVariable.new + end + variable.finish = false variable.save! - end - rescue => e - puts e.inspect - end - redirect_url = "/admin/galleries/crop_process" - render :json => {'href' => redirect_url}.to_json + Thread.new do + variable = AlbumVariable.first + images.each_with_index do |image,index| + variable.progress_percent = (index*100.0/count).floor.to_s+'%' + all_version = image.file.versions.map{|k,v| k} + begin + #org_fname = image.file.path + #org_extname = File.extname(org_fname) + #org_fname.slice! org_extname + #FileUtils.cp(org_fname + org_extname, org_fname + '_resized' + org_extname) + variable.progress_filename = image[:file].to_s + all_version.each do |version| + if !(version.to_s == 'resized' && crop_but_no_backup(image)) + image.file.recreate_versions! version + image.save! + end + end + rescue => e + variable.progress_filename = e.inspect.to_s + puts e.inspect + end + variable.save! + end + variable.finish = true + variable.save! + end + rescue => e + puts e.inspect + end + redirect_url = "/admin/galleries/crop_process" + render :json => {'href' => redirect_url}.to_json end def call_translate text = params['text'] @@ -180,7 +253,7 @@ class Admin::GalleriesController < OrbitAdminController def index Album.each do |album| if album.album_colors.first.nil? - album.album_colors.create('color' => '#000000') + album.album_colors.create('color' => 'transparent') end end @tags = @module_app.tags @@ -199,7 +272,7 @@ class Admin::GalleriesController < OrbitAdminController @color_save = AlbumColor.desc('updated_at').first[:color] end else - @color_save = '#000000' + @color_save = 'transparent' end if request.xhr? render :partial => "album", :collection => @albums diff --git a/app/controllers/admin/images_controller.rb b/app/controllers/admin/images_controller.rb index ccf622b..dc49e9c 100644 --- a/app/controllers/admin/images_controller.rb +++ b/app/controllers/admin/images_controller.rb @@ -1,5 +1,7 @@ class Admin::ImagesController < OrbitAdminController before_filter :setup_vars + def crop_process + end def batch_crop images = params['image_ids'].split(',') @img = [] @@ -47,7 +49,11 @@ class Admin::ImagesController < OrbitAdminController images = params['images'] images.each do |image| img = AlbumImage.find(image) - FileUtils.rm_rf(File.dirname(img.file.path)) + begin + FileUtils.rm_rf(File.dirname(img.file.path)) + rescue => e + puts ["can't delete",e] + end img.delete end if params['delete_cover'] == "true" diff --git a/app/uploaders/gallery_uploader.rb b/app/uploaders/gallery_uploader.rb index f66b08a..539ffc7 100644 --- a/app/uploaders/gallery_uploader.rb +++ b/app/uploaders/gallery_uploader.rb @@ -100,19 +100,39 @@ class GalleryUploader < CarrierWave::Uploader::Base # rescue ::MiniMagick::Error, ::MiniMagick::Invalid => e # raise CarrierWave::ProcessingError.new("Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: #{e}") # end - def optimize (*arg) - manipulate! do |img| - return img unless img.mime_type.match /image\/jpeg/ - img.strip - img.combine_options do |c| - c.quality "90" - c.depth "24" - c.interlace "plane" - end - img - end + def get_w_and_h + if have_crop? + img = MiniMagick::Image.open(model.file.resized.path) + else + img = MiniMagick::Image.open(model.file.path) + end + [img[:width], img[:height]] + end + def rotate_ang(angle) + if have_crop? + img_path = model.file.resized.path + else + img_path = model.file.path + end + puts img_path + img = MiniMagick::Image.open(img_path) + img.rotate(angle) + puts img + img.write(img_path) + end + def optimize (*arg) + manipulate! do |img| + return img unless img.mime_type.match /image\/jpeg/ + img.strip + img.combine_options do |c| + c.quality "90" + c.depth "24" + c.interlace "plane" end - private + img + end + end + private def resizer size_of_file = size.to_f / (2**20) if size_of_file > 5 diff --git a/app/views/admin/galleries/_form.html.erb b/app/views/admin/galleries/_form.html.erb index e48d91a..77898af 100644 --- a/app/views/admin/galleries/_form.html.erb +++ b/app/views/admin/galleries/_form.html.erb @@ -103,7 +103,7 @@ input.minicolors-input{ <% if @album.album_colors.first.nil? %> - <% @album.album_colors.new('color' => '#000000') %> + <% @album.album_colors.new('color' => 'transparent') %> <% end %> <%= f.fields_for :album_colors do |album_color_form| %>
diff --git a/app/views/admin/galleries/show.html.erb b/app/views/admin/galleries/show.html.erb index f0eaeed..b9806d7 100644 --- a/app/views/admin/galleries/show.html.erb +++ b/app/views/admin/galleries/show.html.erb @@ -16,6 +16,15 @@ <%= t('gallery.checked') %>
+
+ <%= t('gallery.crop_div').html_safe %> +
+ 0° +
+ + +
+ <%= t('gallery.rotate_images') %> <%= t('gallery.batch_crop') %> <%= t('gallery.deselect') %> <% if can_edit_or_delete?(@album) %> diff --git a/app/views/admin/images/edit_image.html.erb b/app/views/admin/images/edit_image.html.erb index b21fed7..f90a6da 100644 --- a/app/views/admin/images/edit_image.html.erb +++ b/app/views/admin/images/edit_image.html.erb @@ -31,6 +31,7 @@ y[0] = e.detail.y w[0] = e.detail.width h[0] = e.detail.height + console.log('x:'+x+'y:'+y) }, viewMode: 2, zoomOnWheel: false, diff --git a/app/views/galleries/show.html.erb b/app/views/galleries/show.html.erb index d7273f4..9cf75dd 100644 --- a/app/views/galleries/show.html.erb +++ b/app/views/galleries/show.html.erb @@ -4,7 +4,7 @@ <%= javascript_include_tag "theater" %> <% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %>