1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
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
unless const_defined? :TOGGLE_EFFECTS
TOGGLE_EFFECTS = [:toggle_appear, :toggle_slide, :toggle_blind]
end
# 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.
#
# For toggling visual effects, you can use :toggle_appear, :toggle_slide, and
# :toggle_blind which will alternate between appear/fade, slidedown/slideup, and
# blinddown/blindup respectively.
#
# 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]
if TOGGLE_EFFECTS.include? name.to_sym
"Effect.toggle(#{element},'#{name.to_s.gsub(/^toggle_/,'')}',#{options_for_javascript(js_options)});"
else
"new Effect.#{name.to_s.camelize}(#{element},#{options_for_javascript(js_options)});"
end
end
# Needs more work so + isn't required for concation of effects. Currently, you have to do:
#
# page.parallel_effects do
# page.visual_effect(:highlight, 'dom_id') +
# page.visual_effect(:fade, 'dom_id')
# end
#
# ...naturally, it would be better just to do
#
# page.parallel_effects do
# page.visual_effect :highlight, 'dom_id'
# page.visual_effect :fade, 'dom_id'
# end
def parallel_effects(js_options = {}) #:nodoc:
"new Effect.Parallel([" + yield + "], #{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
|
