Permalink
Browse files

Refactored JavaScriptHelper into PrototypeHelper and ScriptaculousHel…

…per. Added PrototypeHelper::JavaScriptGenerator and PrototypeHelper#update_page for easily modifying multiple elements in an Ajax response.

git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@3036 5ecf4fe2-1ee6-0310-87b1-e25e094e27de
  • Loading branch information...
1 parent fb1efca commit d99ed9bd6a90a01422bee43970930033efdab08d @sstephenson sstephenson committed Nov 14, 2005
View
@@ -1,5 +1,21 @@
*SVN*
+* Added PrototypeHelper::JavaScriptGenerator and PrototypeHelper#update_page for easily modifying multiple elements in an Ajax response. [Sam Stephenson] Example:
+
+ update_page do |page|
+ page.insert_html :bottom, 'list', '<li>Last item</li>'
+ page.visual_effect :highlight, 'list'
+ page.hide 'status-indicator', 'cancel-link'
+ end
+
+ generates the following JavaScript:
+
+ new Insertion.Bottom("list", "<li>Last item</li>");
+ new Effect.Highlight("list");
+ ["status-indicator", "cancel-link"].each(Element.hide);
+
+* Refactored JavaScriptHelper into PrototypeHelper and ScriptaculousHelper [Sam Stephenson]
+
* Update to latest script.aculo.us version (as of [3031])
* Updated docs for in_place_editor, fixes a couple bugs and offers extended support for external controls [Justin Palmer]
Oops, something went wrong.
Oops, something went wrong.
@@ -0,0 +1,105 @@
+require File.dirname(__FILE__) + '/javascript_helper'
+
+module ActionView
+ module Helpers
+ # Provides a set of helpers for calling Scriptaculous JavaScript
+ # functions, including those which create Ajax controls and visual effects.
+ #
+ # To be able to use these helpers, you must include the Prototype
+ # JavaScript framework and the Scriptaculous JavaScript library in your
+ # pages. See the documentation for ActionView::Helpers::JavaScriptHelper
+ # for more information on including the necessary JavaScript.
+ #
+ # The Scriptaculous helpers' behavior can be tweaked with various options.
+ # See the documentation at http://script.aculo.us for more information on
+ # using these helpers in your application.
+ module ScriptaculousHelper
+ # Returns a JavaScript snippet to be used on the Ajax callbacks for
+ # starting visual effects.
+ #
+ # Example:
+ # <%= link_to_remote "Reload", :update => "posts",
+ # :url => { :action => "reload" },
+ # :complete => visual_effect(:highlight, "posts", :duration => 0.5)
+ #
+ # If no element_id is given, it assumes "element" which should be a local
+ # variable in the generated JavaScript execution context. This can be
+ # used for example with drop_receiving_element:
+ #
+ # <%= drop_receving_element (...), :loading => visual_effect(:fade) %>
+ #
+ # This would fade the element that was dropped on the drop receiving
+ # element.
+ #
+ # You can change the behaviour with various options, see
+ # http://script.aculo.us for more documentation.
+ def visual_effect(name, element_id = false, js_options = {})
+ element = element_id ? "'#{element_id}'" : "element"
+ js_options[:queue] = "'#{js_options[:queue]}'" if js_options[:queue]
+ "new Effect.#{name.to_s.camelize}(#{element},#{options_for_javascript(js_options)});"
+ end
+
+ # Makes the element with the DOM ID specified by +element_id+ sortable
+ # by drag-and-drop and make an Ajax call whenever the sort order has
+ # changed. By default, the action called gets the serialized sortable
+ # element as parameters.
+ #
+ # Example:
+ # <%= sortable_element("my_list", :url => { :action => "order" }) %>
+ #
+ # In the example, the action gets a "my_list" array parameter
+ # containing the values of the ids of elements the sortable consists
+ # of, in the current order.
+ #
+ # You can change the behaviour with various options, see
+ # http://script.aculo.us for more documentation.
+ def sortable_element(element_id, options = {})
+ options[:with] ||= "Sortable.serialize('#{element_id}')"
+ options[:onUpdate] ||= "function(){" + remote_function(options) + "}"
+ options.delete_if { |key, value| PrototypeHelper::AJAX_OPTIONS.include?(key) }
+
+ [:tag, :overlap, :constraint, :handle].each do |option|
+ options[option] = "'#{options[option]}'" if options[option]
+ end
+
+ options[:containment] = array_or_string_for_javascript(options[:containment]) if options[:containment]
+ options[:only] = array_or_string_for_javascript(options[:only]) if options[:only]
+
+ javascript_tag("Sortable.create('#{element_id}', #{options_for_javascript(options)})")
+ end
+
+ # Makes the element with the DOM ID specified by +element_id+ draggable.
+ #
+ # Example:
+ # <%= draggable_element("my_image", :revert => true)
+ #
+ # You can change the behaviour with various options, see
+ # http://script.aculo.us for more documentation.
+ def draggable_element(element_id, options = {})
+ javascript_tag("new Draggable('#{element_id}', #{options_for_javascript(options)})")
+ end
+
+ # Makes the element with the DOM ID specified by +element_id+ receive
+ # dropped draggable elements (created by draggable_element).
+ # and make an AJAX call By default, the action called gets the DOM ID
+ # of the element as parameter.
+ #
+ # Example:
+ # <%= drop_receiving_element("my_cart", :url =>
+ # { :controller => "cart", :action => "add" }) %>
+ #
+ # You can change the behaviour with various options, see
+ # http://script.aculo.us for more documentation.
+ def drop_receiving_element(element_id, options = {})
+ options[:with] ||= "'id=' + encodeURIComponent(element.id)"
+ options[:onDrop] ||= "function(element){" + remote_function(options) + "}"
+ options.delete_if { |key, value| PrototypeHelper::AJAX_OPTIONS.include?(key) }
+
+ options[:accept] = array_or_string_for_javascript(options[:accept]) if options[:accept]
+ options[:hoverclass] = "'#{options[:hoverclass]}'" if options[:hoverclass]
+
+ javascript_tag("Droppables.add('#{element_id}', #{options_for_javascript(options)})")
+ end
+ end
+ end
+end
Oops, something went wrong.

0 comments on commit d99ed9b

Please sign in to comment.