Permalink
Browse files

photo library now opens in modal window. upload queue on right side o…

…f album form
  • Loading branch information...
gregawoods committed Apr 5, 2012
1 parent a17c757 commit 44865380ed27caebf8548afb31f8e838901f1025
@@ -14,9 +14,9 @@ Spud.Admin.Photos = new function(){
});
$('body').on('submit', '#spud_admin_photo_album_form, #spud_admin_photo_gallery_form', self.submittedPhotoAlbumOrGalleryForm)
$('body').on('submit', '#spud_admin_photo_form', self.submittedPhotoForm);
- //$('body').on('click', '.spud_admin_photo_mass_destroy', self.massDestroySelected);
- $('body').on('click', '.spud_admin_photo_ui_thumb_selectable input[type=checkbox]', self.invertPhotoUiThumbCheckbox);
- $('body').on('click', '.spud_admin_photo_ui_thumb_selectable', self.selectedPhotoUiThumb);
+ $('body').on('click', '.spud_admin_photos_btn_remove', self.clickedPhotoRemoveFromLibrary)
+ $('body').on('click', '.spud_admin_photo_ui_thumbs_selectable .spud_admin_photo_ui_thumb', self.selectedPhotoUiThumb);
+ $('body').on('click', '#spud_admin_photo_album_action_library', self.clickedPhotoLibrary);
self.markSelectedPhotoUiThumbs();
// html5 drag and drop file
@@ -27,14 +27,11 @@ Spud.Admin.Photos = new function(){
droparea.addEventListener('drop', self.droppedFile, false);
};
- this.submittedPhotoAlbumOrGalleryForm = function(e){
- // update photo checkboxes
- $('.spud_admin_photo_ui_thumb').each(function(){
- var item = $(this);
- var checkbox = item.find('input[type=checkbox]');
- checkbox.attr('checked', (item.parents('.spud_admin_photos_selection_left').length>0));
+ this.clickedPhotoRemoveFromLibrary = function(e){
+ $(this).parents('.spud_admin_photo_ui_thumb').fadeOut(200, function(){
+ $(this).remove();
});
- }
+ };
/* Handle file uploads passed via iframe (legacy support)
* -------------------------------------------------------- */
@@ -55,22 +52,13 @@ Spud.Admin.Photos = new function(){
$('#dialog').dialog('close');
};
- // need to invert the checkbox state so that it gets properly checked/uncheckd when `selectedPhotoUiThumb` fires
- this.invertPhotoUiThumbCheckbox = function(e){
- $(this).attr('checked', !$(this).attr('checked'));
- };
-
this.selectedPhotoUiThumb = function(e){
- var checkbox = $(this).find('input[type=checkbox]');
- if(checkbox){
- if(checkbox.attr('checked')){
- $(this).removeClass('spud_admin_photo_ui_thumb_selected');
- checkbox.attr('checked', false);
- }
- else{
- $(this).addClass('spud_admin_photo_ui_thumb_selected');
- checkbox.attr('checked', true);
- }
+ var thumb = $(this);
+ if(thumb.hasClass('spud_admin_photo_ui_thumb_selected')){
+ $(this).removeClass('spud_admin_photo_ui_thumb_selected');
+ }
+ else{
+ $(this).addClass('spud_admin_photo_ui_thumb_selected');
}
};
@@ -127,9 +115,9 @@ Spud.Admin.Photos = new function(){
// send FormData object as ajax request
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e){ self.onPhotoUploadProgress(e, progressBar) }, false);
- xhr.addEventListener('load', self.onPhotoUploadComplete, false);
- xhr.addEventListener('error', self.onPhotoUploadFailure, false);
- xhr.addEventListener('abort', self.onPhotoUploadCancel, false);
+ xhr.addEventListener('load', function(e){ self.onPhotoUploadComplete(e, progressBar); }, false);
+ xhr.addEventListener('error', function(e){ self.onPhotoUploadFailure(e, progressBar); }, false);
+ xhr.addEventListener('abort', function(e){ self.onPhotoUploadCancel(e, progressBar); }, false);
xhr.open('POST', form.attr('action'));
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send(fd);
@@ -161,7 +149,7 @@ Spud.Admin.Photos = new function(){
progressBar.find('.progress').addClass('progress-success');
progressBar.find('.spud_admin_photo_progress_status').text('Processing');
}
- };
+ };
this.onPhotoUploadComplete = function(e, progressBar){
// success
@@ -174,7 +162,7 @@ Spud.Admin.Photos = new function(){
element.replaceWith(photo.html);
}
else{
- var target = $('#spud_admin_photos_selected .spud_admin_photo_ui_thumbs, #spud_admin_photos');
+ var target = $('#spud_admin_photos_selected, #spud_admin_photos');
target.prepend(photo.html).fadeIn(200);
}
$('#dialog').dialog('close');
@@ -194,6 +182,74 @@ Spud.Admin.Photos = new function(){
progressBar.find('.progress').addClass('progress-danger');
};
+ /*
+ * Add From Photo Library
+ ------------------------------- */
+
+ this.clickedPhotoLibrary = function(e){
+ var url = this.href;
+ $.ajax({
+ url:url,
+ success:self.photoLibraryLoaded
+ });
+ return false;
+ };
+
+ this.photoLibraryLoaded = function(html){
+ var dialog = $("#dialog");
+ if(dialog.length == 0){
+ dialog = $('<div id="dialog" style="display:hidden;"></div>').appendTo('body');
+ }
+ dialog.html(html);
+ $('#spud_admin_photos_selected .spud_admin_photo_ui_thumb').each(function(){
+ var id = $(this).attr('id');
+ var dupe = dialog.find('#'+id);
+ if(dupe){
+ dupe.remove();
+ }
+ });
+ dialog.dialog({
+ width: 660,
+ modal: true,
+ height: 450,
+ title: 'My Photo Library',
+ buttons: {
+ 'Add Selected': self.addSelectedPhotosFromLibrary,
+ 'Delete Selected': self.deleteSelectedPhotosFromLibrary
+ }
+ });
+ };
+
+ this.addSelectedPhotosFromLibrary = function(e){
+ $('#spud_admin_photo_library .spud_admin_photo_ui_thumb_selected')
+ .removeClass('spud_admin_photo_ui_thumb_selected')
+ .prependTo('#spud_admin_photos_selected')
+ .hide()
+ .fadeIn(200);
+ $(this).dialog('close');
+ };
+
+ this.deleteSelectedPhotosFromLibrary = function(e){
+ var ids = $.map($('.spud_admin_photo_ui_thumb_selected'), function(val, i){
+ return $(val).attr('rel');
+ });
+ $.ajax({
+ type: 'POST',
+ url: '/spud/admin/photos/mass_destroy',
+ data: {spud_photo_ids:ids},
+ success: function(data, textStatus, jqXHR){
+ $('.spud_admin_photo_ui_thumb_selected').fadeOut(200, function(){
+ $(this).remove();
+ });
+ },
+ error: function(jqXHR, textStatus, errorThrown){
+ console.log('An error occurred:')
+ console.log(arguments);
+ }
+ })
+
+ };
+
/*
* Drag & Drop File Upload Queue
-------------------------------- */
@@ -12,7 +12,7 @@
margin: 15px 0;
}
.spud_admin_photo_ui_thumbs{
- height: 350px;
+ height: 300px;
padding: 0;
border: 1px solid #cacaca;
margin: 15px 0;
@@ -50,16 +50,19 @@
.spud_admin_photo_ui_thumbs_selectable .spud_admin_photo_ui_thumb{
cursor: pointer;
}
+.spud_admin_photo_ui_thumbs_selectable .spud_admin_photo_ui_thumb_controls{
+ display: none;
+}
.spud_admin_photo_ui_thumb_selected{
border: 3px solid #006CCC;
- margin: -3px 30px 30px -3px;
+ margin: 13px;
+}
+.spud_admin_photo_ui_thumb_small.spud_admin_photo_ui_thumb_selected{
+ margin: 9px;
}
.spud_admin_photo_ui_thumbs_sortable .spud_admin_photo_ui_thumb{
cursor: move;
}
-.spud_admin_photo_ui_thumb_selected:nth-child(6n){
- margin-right: -3px;
-}
.spud_admin_photo_ui_thumb h5{
font-size: 12px;
color: white;
@@ -86,7 +89,7 @@
background: rgba(0,0,0,0.5);
border-bottom-right-radius: 15px;
}
-.spud_admin_photos_btn_delete{
+.spud_admin_photos_btn_remove, .spud_admin_photos_btn_delete{
background: url('/assets/spud/photos/buttons/x_16x16.png');
height: 16px;
width: 16px;
@@ -111,19 +114,25 @@
right: 0;
}
+#spud_admin_photo_album_actions{
+
+}
+
/* Upload Queue
---------------------------- */
+#spud_admin_photo_album_form{
+
+}
.spud_admin_photo_progress{
margin: 10px 0;
}
#spud_admin_photo_upload_queue{
background: white;
- position: fixed;
- top: 10px;
- right: 10px;
padding: 15px;
- width: 300px;
- height: 120px;
+ margin: 0 0 0 10px;
+ width: 250px;
+ height: 270px;
+ float: right;
border: 1px solid #cacaca;
- overflow-y: hidden;
+ overflow-y: scroll;
}
@@ -1,6 +1,6 @@
class Spud::Admin::PhotoAlbumsController < Spud::Admin::ApplicationController
- before_filter :get_album, :only => [:show, :edit, :update, :destroy]
+ before_filter :get_album, :only => [:show, :edit, :update, :destroy, :library]
respond_to :html, :json, :xml
layout 'spud/admin/spud_photos'
@@ -4,7 +4,7 @@ class Spud::Admin::PhotosController < Spud::Admin::ApplicationController
before_filter :get_photo, :only => [:show, :edit, :update, :destroy]
respond_to :html, :json, :xml, :js
- layout 'spud/admin/spud_photos'
+ layout false
def index
@photos = SpudPhoto.all
@@ -1,2 +1,7 @@
module Spud::Admin::PhotosHelper
-end
+
+ def photo_is_selected
+ return (@photo_album && @photo_album.photo_ids.include?(photo.id))
+ end
+
+end
@@ -4,28 +4,26 @@
<fieldset>
<legend>Photo Album Info</legend>
- <div class="control-group">
- <%= f.label :title, :class => "control-label" %>
- <div class="controls">
- <%= f.text_field :title %>
- </div>
+ <div class="control-group">
+ <%= f.label :title, :class => "control-label" %>
+ <div class="controls">
+ <%= f.text_field :title %>
</div>
+ </div>
</fieldset>
<fieldset class="spud_admin_photos_album_fieldset">
- <%= link_to "New Photo", new_spud_admin_photo_path, :class => "spud_admin_photo_create ajax btn btn-primary", :title => "New Photo" %>
- <legend>Select Photos</legend>
- <div id="spud_admin_photos_selected" class="spud_admin_photos_selection_left">
- <h4>Selected:</h4>
- <div class="spud_admin_photo_ui_thumbs spud_admin_photo_ui_thumbs_sortable">
- <%= render :partial => '/spud/admin/photos/photo', :collection => @photo_album.photos %>
- </div>
+ <legend>Selected Photos</legend>
+ <div id="spud_admin_photo_album_actions" class="control-group">
+ <%= link_to "Photo Library", spud_admin_photos_path, :class => "btn btn-primary", :id => 'spud_admin_photo_album_action_library' %>
+ <%= link_to "Upload Photo", new_spud_admin_photo_path, :class => "ajax btn btn-primary", :title => "New Photo" %>
</div>
- <div id="spud_admin_photos_available" class="spud_admin_photos_selection_right">
- <h4>Available:</h4>
- <div class="spud_admin_photo_ui_thumbs spud_admin_photo_ui_thumbs_sortable">
- <%= render :partial => '/spud/admin/photos/photo', :collection => @photo_album.photos_available %>
- </div>
+ <div id="spud_admin_photo_upload_queue">
+ <h5 id="spud_admin_photo_upload_queue_label">Queued Uploads: <span>0</span></h5>
+ <div id="spud_admin_photo_upload_queue_bars"></div>
+ </div>
+ <div id="spud_admin_photos_selected" class="control-group spud_admin_photo_ui_thumbs spud_admin_photo_ui_thumbs_sortable">
+ <%= render :partial => '/spud/admin/photos/photo', :collection => @photo_album.photos %>
</div>
</fieldset>
@@ -34,11 +32,4 @@
or <%=link_to "cancel", request.referer, :class => "btn" %>
</div>
-<% end %>
-
-<div id="spud_admin_photo_upload_queue">
- <h5 id="spud_admin_photo_upload_queue_label">Queued Uploads: <span>0</span></h5>
- <div id="spud_admin_photo_upload_queue_bars">
-
- </div>
-</div>
+<% end %>
@@ -1,9 +1,13 @@
-<div id="spud_admin_photo_<%= photo.id %>" class="spud_admin_photo_ui_thumb spud_admin_photo_ui_thumb_small" style="background-image:url('<%= photo.photo.url(:spud_admin_small) %>')">
+<%= content_tag :div,
+ :rel => photo.id,
+ :id => "spud_admin_photo_#{photo.id}",
+ :style => "background-image:url('#{photo.photo.url(:spud_admin_small)}')",
+ :class => "spud_admin_photo_ui_thumb spud_admin_photo_ui_thumb_small" do %>
<div style="display:none;">
- <%= check_box_tag 'spud_photo_album[photo_ids][]', photo.id, (@photo_album && @photo_album.photo_ids.include?(photo.id)) %>
+ <%= hidden_field_tag 'spud_photo_album[photo_ids][]', photo.id %>
</div>
<div class="spud_admin_photo_ui_thumb_controls">
<%= link_to 'Edit', edit_spud_admin_photo_path(photo), :class => 'ajax spud_admin_photos_btn_edit' %>
- <%= link_to 'Delete', spud_admin_photo_path(photo), :method => :delete, :remote => true, :class => 'spud_admin_photos_btn_delete', :confirm => 'Are you sure? This will permanently delete the photo from all albums it currently belongs to.' %>
+ <%= link_to 'Delete', '#', :class => 'spud_admin_photos_btn_remove' %>
</div>
-</div>
+<% end %>
@@ -1,12 +1,3 @@
-<%= content_for :data_controls do %>
- <!--
- <%= link_to 'Delete Selected', mass_destroy_spud_admin_photos_path, :class => 'spud_admin_photo_mass_destroy btn btn-danger', :confirm => 'Are you sure?' %>
- -->
- <%= link_to "New Photo", new_spud_admin_photo_path, :class => "spud_admin_photo_create ajax btn btn-primary", :title => "New Photo" %>
-<% end %>
-
-<%= content_for :detail do %>
- <div id="spud_admin_photos" class="spud_admin_photo_ui_thumbs">
- <%= render :partial => 'photo', :collection => @photos %>
- <div>
-<% end %>
+<div id="spud_admin_photo_library" class="spud_admin_photo_ui_thumbs spud_admin_photo_ui_thumbs_selectable">
+ <%= render :partial => 'photo', :collection => @photos %>
+<div>
View
@@ -3,6 +3,7 @@
namespace :spud do
namespace :admin do
resources :photos do
+ get 'library', :on => :collection
post 'mass_destroy', :on => :collection
end
resources :photo_albums

0 comments on commit 4486538

Please sign in to comment.