Ruby on Rails with Ajax: Modifying the Slide Show
(Page 1 of 4 )
In this conclusion to a two-part article, you'll learn how to drag and drop slides in our example slideshow to modify it, and how to filter by category. This article is excerpted from chapter six of the book
Ruby on Rails: Up and Running, written by Bruce A. Tate and Curt Hibbs (O'Reilly, 2006; ISBN: 0596101325). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.
Drag and Drop Everything (Almost Everything)
We have already displayed a list of thumbnails of all photos that are in the slideshow and enabled the user to drag them around to rearrange their order in the slideshow. Now let's add a second list of thumbnails, showing all photos that are not being used in the slideshow.
We'll let the user add a photo to the slideshow by dragging it from the list of unused photos and dropping it onto the slideshow thumbnails. Similarly, we can enable the user to remove photos from the slideshow by dragging its thumbnail from the slideshow and dropping on the unused photos list. Finally, we'll allow the user to filter the unused photos list by category.
As you might expect, we can accomplish all that in a very small amount of code. We will add a mere 58 lines of Ruby code to the models and controllers, 47 lines to the view templates, and 16 lines to our CSS stylesheet! Figure 6-4 gives you a preview of how this is going to look when we're done.
Figure 6-4. Preview of drag-and-drop slideshow editing
Let's start by updating the slideshow's edit template. Edit photos/app/views/slideshows/edit.rhtml to look like this:
<h1>Editing slideshow</h1>
<div id='slideshow-contents'>
<p style='text-align: center;'><b>Slideshow Photos</b></p>
<div id='slideshow-thumbs'>
<%= render :partial => 'show_slides_draggable' %>
</div>
</div>
<div id='slideshow-photo-picker'>
<p style='text-align: center;'><b>Unused Photos</b></p>
<div id='slideshow-photos'>
<%= render :partial => 'photo_picker' %>
</div>
</div>
<div id='slideshow-attributes'>
<p><%= link_to 'Play this Slideshow', :action => 'show', :id => @slideshow %></p>
<div style='border: thin solid; padding-left: 1em;'>
<p style='text-align: center;'><b>Attributes</b></p>
<%= start_form_tag :action => 'update', :id => @slideshow %>
<%= render :partial => 'form' %>
<%= submit_tag 'Save Attributes' %>
<%= end_form_tag %>
</div>
<p>
<b>Hint:</b> Drag and drop photos between the
two lists to add and remove photos from the
slideshow. Drag photos within the slideshow to
rearrange their order.
</p>
</div>
<%= drop_receiving_element("slideshow-contents",
:update => "slideshow-thumbs",
:url => {:action => "add_photo" },
:accept => "photos",
:droponempty => "true",
:loading => visual_effect(:fade),
:complete => visual_effect(:highlight, 'sortable_thumbs')
) %>
This file has been almost entirely rewritten, so there are no marked-as-changed lines. You can see that I have laid out this edit page into three sections:
<div id='slideshow-contents'> . . . </div>
<div id='slideshow-photo-picker'> . . . </div>
<div id='slideshow-attributes'> . . . </div>
Only the slideshow-photo-picker is new. It shows the list of unused photos that can be added to the slideshow. We will set up the CSS stylesheet to display these sections side-by-side as you saw them in Figure 6-4.
slideshow-contents is rendered by the partial template show_slides_draggable,
slideshow-photo-picker is rendered by the partial template photo_picker, and slideshow-attributes is mostly rendered by the form partial template that was generated from the scaffolding. I say "mostly" because I added a few things inline around the rendering of form.
Next: Drag and Drop Everything (Almost Everything) continued >>
More Ruby-on-Rails Articles
More By O'Reilly Media
|
 This article is excerpted from chapter six of the book Ruby on Rails: Up and Running, written by Bruce A. Tate and Curt Hibbs (O'Reilly, 2006; ISBN: 0596101325). Check it out today at your favorite bookstore. Buy this book now.
|
|
