Updated clippings and favorites to use jquery and bootstrap modals.

bborn · Sep 6, 2012 · 0d8acbd · 0d8acbd
1 parent aa61a96
commit 0d8acbd
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 78 deletions.
diff --git a/app/assets/javascripts/community_engine.js b/app/assets/javascripts/community_engine.js
@@ -5,6 +5,7 @@
 //= require jquery-ui
 //= require bootstrap
 //= require bootstrap-dropdown
+//= require bootstrap-modal
 //
 ///////////////////////////////////////////
 // UTILITIES                             //
@@ -60,11 +61,7 @@ function submitViaAjax(form) {
         console.log('Failed to receive return script.');
       }
     },
-    error: function(jqXHR, textStatus, errorThrown) {
-      console.log(jqXHR);
-      console.log(textStatus);
-      console.log(errorThrown);
-    }
+    error: logError
   });
 }
 
@@ -84,11 +81,7 @@ $('.delete-via-ajax').live('click', function(event){
 		        console.log('Failed to receive return script.');
 		      }
 		    },
-		    error: function(jqXHR, textStatus, errorThrown) {
-		      console.log(jqXHR);
-		      console.log(textStatus);
-		      console.log(errorThrown);
-		    }
+		    error: logError
 		});
 	}
 })
@@ -117,11 +110,7 @@ $('.edit-via-ajax').live('click', function(){
         console.log('Failed to receive return script.');
       }
     },
-    error: function(jqXHR, textStatus, errorThrown) {
-      console.log(jqXHR);
-      console.log(textStatus);
-      console.log(errorThrown);
-    }
+    error: logError
   });
 });
 
@@ -135,7 +124,7 @@ $('.act-via-ajax').live('click', function(event){
   	method = $this.closest('form').attr('method');
   } else if ($this.is("a")) {
   	action = $this.attr('href');
-  	method = $this.attr('method');
+  	method = $this.attr('data-method');
   } else {
   	console.log('Could not identify element type.');
   	return false;
@@ -146,15 +135,19 @@ $('.act-via-ajax').live('click', function(event){
     dataType: 'html',
     success: function(response) {
       if(response) {
-        $this.replaceWith('<div class="alert alert-info">' + response + '</div>');
+        $this.effect("pulsate", { times:1 }, 250);
+        $this.replaceWith(response);
+        $('#' + $this.attr('id')).effect("pulsate", { times:2 }, 500);
       } else {
         console.log('Failed to receive return script.');
       }
     },
-    error: function(jqXHR, textStatus, errorThrown) {
-      console.log(jqXHR);
-      console.log(textStatus);
-      console.log(errorThrown);
-    }
+    error: logError
   });
-});
+});
+
+function logError(jqXHR, textStatus, errorThrown) {
+  console.log(jqXHR);
+  console.log(textStatus);
+  console.log(errorThrown);
+}
diff --git a/app/views/clippings/_clipping.html.haml b/app/views/clippings/_clipping.html.haml
@@ -1,11 +1,5 @@
 %div{ :id => "clipping_#{clipping.id}"}
-  - if favorite = clipping.has_been_favorited_by(current_user, request.remote_ip)
-    .favorite
-      = link_to_remote '<span class="badge badge-info"><i class="icon-heart"></i>'.html_safe+clipping.favorited_count.to_s+'</span>'.html_safe, :url => favorite_path('clipping', clipping.id, favorite.id), :method => :delete, :loading => "new Effect.Fade($$('#clipping_#{clipping.id} .favorite i').first())", :title => :un_favorite_this.l if logged_in?
-      %span.label.label-info= :in_your_favorites.l
-  - else
-    .favorite  
-      = link_to_remote '<span class="badge"><i class="icon-heart"></i>'.html_safe+clipping.favorited_count.to_s+'</span>'.html_safe, :url => favorites_path('clipping', clipping.id), :loading => "new Effect.Pulsate($$('#clipping_#{clipping.id} .favorite i').first() )", :title => :un_favorite_this.l
+  =render :partial => 'clippings/favorite', :locals => {:clipping => clipping}
   %a{:href=>"#{user_clipping_url(clipping.user, clipping)}", :title => h(truncate_words(clipping.description)) }     
     = h(truncate_words(clipping.description))
     %br

diff --git a/app/views/clippings/_favorite.html.haml b/app/views/clippings/_favorite.html.haml
@@ -0,0 +1,7 @@
+- if favorite = clipping.has_been_favorited_by(current_user, request.remote_ip)
+  .favorite
+    = link_to '<span class="badge badge-info"><i class="icon-heart"></i>'.html_safe+clipping.favorited_count.to_s+'</span>'.html_safe + ' <span class="label label-info">'.html_safe + :in_your_favorites.l + '</span>'.html_safe, favorite_path('clipping', clipping.id, favorite.id), :method => :delete, :class => 'act-via-ajax', :id => 'favorite-clipping-'+clipping.id.to_s if logged_in?
+- else
+  .favorite  
+    = link_to '<span class="badge"><i class="icon-heart"></i>'.html_safe+clipping.favorited_count.to_s+'</span>'.html_safe, favorites_path('clipping', clipping.id), :method => :post, :class => 'act-via-ajax', :id => 'favorite-clipping-'+clipping.id.to_s
+
diff --git a/app/views/clippings/_meta.html.haml b/app/views/clippings/_meta.html.haml
@@ -14,7 +14,7 @@
 
   - if favorite = clipping.has_been_favorited_by(current_user, request.remote_ip)
     .favorite
-      = link_to_remote image_tag('icons/heart_off.png'), :url => favorite_path('clipping', clipping.id, favorite.id), :method => :delete, :loading => "new Effect.Pulsate($$('#clipping_#{clipping.id}_meta .favorite img').first())", :title => :un_favorite_this.l if logged_in?
+      = link_to image_tag('icons/heart_off.png'), :url => favorite_path('clipping', clipping.id, favorite.id), :method => :delete, :title => :un_favorite_this.l if logged_in?
       = image_tag('icons/heart_off.png') unless logged_in?
 
       %span.small.quiet= clipping.favorited_count

diff --git a/app/views/clippings/load_images_from_uri.js.erb b/app/views/clippings/load_images_from_uri.js.erb
@@ -0,0 +1 @@
+$('#clipping_image_list').html("<%= @images ? render(:partial => 'clippings/images', :formats => [:html], :locals => {:images => @images}).gsub('"', '\\"').gsub("\n", "").html_safe : "<h1>Sorry, there was an error fetching the images from the page you requested</h1><a href='#{params[:uri]}'>Go back...</a>" %>")
diff --git a/app/views/clippings/load_images_from_uri.js.rjs b/app/views/clippings/load_images_from_uri.js.rjs
diff --git a/app/views/clippings/new_clipping.html.haml b/app/views/clippings/new_clipping.html.haml
@@ -5,8 +5,7 @@
       = configatron.community_name
       \- 
       =:new_clipping.l
-    = javascript_include_tag 'lightbox'
-    = stylesheet_link_tag 'lightbox'
+    = javascript_include_tag 'community_engine'
     = stylesheet_link_tag 'application'
     = stylesheet_link_tag 'layout'
   %body
@@ -18,11 +17,10 @@
     %ul#clipping_image_list.thumbnails
       = image_tag 'spinner.gif', :plugin => "community_engine"
       =:loading_images.l
-      = javascript_include_tag 'community_engine'
       %script{"type"=>"text/javascript"}
-        = remote_function(:url => { :controller => 'clippings', :action => "load_images_from_uri", :uri => params[:uri] }, :method => :post )
-    =link_to :cancel_and_go_back_to.l+ @clipping.url, params[:uri], :class => 'btn btn-mini'
-    #form_div{"style"=>"display:none;"}
+        ="$('#clipping_image_list').html($.post('#{load_images_from_uri_path(:uri => params[:uri]).html_safe}'));"
+    =link_to :cancel_and_go_back_to.l + ' ' + @clipping.url, params[:uri], :class => 'btn btn-mini btn-primary'
+    #lightbox.modal.hide.fade{:style => 'padding-top: 60px;'}
       = bootstrap_form_for(:clipping, :url => user_clippings_path(@user), :html => {:class => "form form-horizontal"} ) do |f|
         = f.text_field :url
 
@@ -40,14 +38,9 @@
         .controls= f.submit :create.l
 
   :javascript
-    image_list = $('clipping_image_list')
-    Event.observe(image_list, 'click', function(e){
-      element = Event.element(e);
-      if (element.parentNode.tagName.toLowerCase() == 'li' ){
-        $('clipping_image_url').value = element.src;
-        $('clipping_preview').src = element.src;
-        new Lightbox.base('form_div');
-      }
-      return;
+    $("#clipping_image_list img").live('click', function(){
+      $('#clipping_image_url').val($(this).attr('src'));
+      $('#clipping_preview').attr('src', $(this).attr('src'));
+      $('#lightbox').modal();
     });
 
diff --git a/app/views/favorites/create.js.erb b/app/views/favorites/create.js.erb
@@ -0,0 +1,10 @@
+<% if @favorite.new_record? %>
+  <%= @favorite.errors.full_messages.join(', ').html_safe %>
+<% else %>
+  <% case @favorite.favoritable.class.to_s.tableize %>
+    <% when 'clippings' %>
+      <%= render :partial => 'clippings/favorite', :locals => {:clipping => @favorite.favoritable} %>
+    <% when 'posts' %>
+      <%= render :partial => 'posts/meta', :locals => {:post => @favorite.favoritable} %>
+  <% end %>
+<% end %>
diff --git a/app/views/favorites/create.js.rjs b/app/views/favorites/create.js.rjs
diff --git a/app/views/favorites/destroy.js.erb b/app/views/favorites/destroy.js.erb
@@ -0,0 +1,6 @@
+<% case @favorite.favoritable.class.to_s.tableize %>
+  <% when 'clippings' %>
+      <%= render :partial => 'clippings/favorite', :locals => {:clipping => @favorite.favoritable} %>
+  <% when 'posts' %>
+      <%= render :partial => 'posts/meta', :locals => {:post => @favorite.favoritable} %>
+<% end %>
diff --git a/app/views/favorites/destroy.js.rjs b/app/views/favorites/destroy.js.rjs
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		$('#clipping_image_list').html("<%= @images ? render(:partial => 'clippings/images', :formats => [:html], :locals => {:images => @images}).gsub('"', '\\"').gsub("\n", "").html_safe : "<h1>Sorry, there was an error fetching the images from the page you requested</h1><a href='#{params[:uri]}'>Go back...</a>" %>")