| Class | Mack::JavaScript::Framework::PrototypeSelector |
| In: |
lib/mack-javascript/helpers/prototype_helper.rb
|
| Parent: | Mack::JavaScript::Selector |
# File lib/mack-javascript/helpers/prototype_helper.rb, line 192
192: def add_class(klass)
193: invoke ["addClassName", klass]
194: end
Will give you the immediate children underneath the selected elements
Example: say you have the following html:
<div class=‘rakim’>
<ul>
...
</ul>
</div>
<div class=‘rakim’>
<p>Eric B</p>
<div id='technique'>
...
</div>
</div>
page.select(’.rakim’).children would give you a collection consisting of the ul element, the p element, and the div with id ‘technique‘
# File lib/mack-javascript/helpers/prototype_helper.rb, line 147
147: def children
148: invoke ["childElements"], :flatten_uniq => true
149: end
Makes the selected elements draggable.
options github.com/madrobby/scriptaculous/wikis/draggable
| :revert: | if true, will revert after being dropped. ‘failure’ |
will instruct the draggable not to revert if
successfully dropped in a droppable.
| :ghosting: | if true, will clone the element and drag the clone |
| :zindex: | The css z-index of the draggable item. |
# File lib/mack-javascript/helpers/prototype_helper.rb, line 403
403: def draggable(options = nil)
404: each "new Draggable(elem, #{options_for_effects(options)})"
405: end
| :accept: | if set to a css class, the selected elements will only accept elements dragged to it with that class. |
| :hoverclass: | a droppable element will have this class added to it when an element is dragged over it. |
| :remote: | takes a hash of ajax options, the same as given to page.ajax if this options is, an ajax call is made using the specified options along. Added to the url is an id parameter which has the id of the element that was dropped |
if a block is given, the blocks code will be executed when a succesful drop is done.
Example
options = {:remote => {:url => ’/stuff’}} page.select(‘bucket’).droppable options do |p|
p.alert('you dropped it!')
end
This code will make the element with id ‘bucket’ droppable. If an element is dropped onto it, an ajax call to the url ’/stuff’ will be sent with an id parameter of the id of the dropped element. Then an js alert box with the message ‘you dropped it’ will appear.
# File lib/mack-javascript/helpers/prototype_helper.rb, line 434
434: def droppable(options = nil, &block)
435: remote_options = options.delete(:remote)
436: if remote_options || block_given?
437: func = Mack::JavaScript::Function.new(session_id, 'elem')
438: if remote_options
439: remote_options[:with] ||= "'id=' + elem.id"
440: func << Mack::JavaScript::ScriptGenerator.new(session_id).ajax(remote_options)
441: end
442: func.body(&block) if block_given?
443: options.merge!(:onDrop => func)
444: end
445: each "Droppables.add(elem, #{options_for_effects(options)})"
446: end
# File lib/mack-javascript/helpers/prototype_helper.rb, line 119
119: def each(func, options = {})
120: add "each(function(elem){#{func}})", options
121: end
Custom visual effects. Supports the following effect names: highlight, scale, opacity, move, fade, appear, blindUp, blindDown, slideUp, slideDown, dropOut, grow, shrink, puff, switchOff, squish, fold, pulsate, shake, scrollTo
# File lib/mack-javascript/helpers/prototype_helper.rb, line 340
340: def effect(name, options = nil)
341: invoke ['visualEffect', name.to_s, options_for_effects(options)]
342: end
# File lib/mack-javascript/helpers/prototype_helper.rb, line 349
349: def hide()
350: invoke ['hide']
351: end
inserts html into the selected place for the specfied elemets
position may be one of:
| :top: | HTML is inserted inside the element, before the element‘s existing content. |
| :bottom: | HTML is inserted inside the element, after the element‘s existing content. |
| :before: | HTML is inserted immediately preceding the element. |
| :after: | HTML is inserted immediately following the element. |
Example
<div class=‘rakim’>
<ul>
...
</ul>
</div>
<div class=‘rakim’>
<p>Eric B</p>
<div id='technique'>
...
</div>
</div>
page.select(’.rakim’).insert(:before, "<h1> The R </h1>") would result in:
<h1> The R </h2> <div class=‘rakim’>
<ul>
...
</ul>
</div>
<h1> The R </h2> <div class=‘rakim’>
<p>Eric B</p>
<div id='technique'>
...
</div>
</div>
Tip: use this with a partial containing your html: page.select(’.rakim’).insert(:before, render(:partial, ‘the_r’, :format => :html))
# File lib/mack-javascript/helpers/prototype_helper.rb, line 260
260: def insert(position, html)
261: invoke ["insert", "{#{position.to_s}: '#{escape_javascript(html)}'}"]
262: end
# File lib/mack-javascript/helpers/prototype_helper.rb, line 106
106: def invoke(arr, options = {})
107: arr.collect! do |arg|
108: if !arg.is_a?(String) || arg =~ /^function/ || arg =~ /^null$/ || arg =~ /^\{.*\}$/
109: arg
110: else
111: "'#{arg}'"
112: end
113: end
114: function = "invoke(#{arr.compact.join(',')})"
115: function << '.flatten().uniq()' if options.delete(:flatten_uniq)
116: add function, options
117: end
# File lib/mack-javascript/helpers/prototype_helper.rb, line 332
332: def morph(hsh, options = nil)
333: #hsh is an object of style values
334: invoke ['morph', options_for_javascript(hsh), options_for_effects(options)]
335: end
adds an event listener to the selected elements. If options[:prevent_default] == true the default behavior of the event isn‘t taken
Example
page.select(’.rakim a’).peep ‘click’, :prevent_default => true do |p|
p.select('#sucka_mcs').effect(:fade)
end
After running this code, if you click any a tag under any element with the class ‘rakim’, the element with id "sucka_mcs" will fade. Because of the option :prevent_default => true, the default action when clicking the a tag (the browser goes to its href url) isn‘t done. This can also be used in conjunction with trigger to make and call custom events.
# File lib/mack-javascript/helpers/prototype_helper.rb, line 375
375: def peep(event_name, options = {}, &block)
376: invoke ["observe", event_name, event_function(options[:prevent_default], &block)]
377: end
removes the selected elements from the DOM
# File lib/mack-javascript/helpers/prototype_helper.rb, line 307
307: def remove
308: invoke ['remove']
309: end
# File lib/mack-javascript/helpers/prototype_helper.rb, line 205
205: def remove_attribute(name)
206: set_attribute(name, nil)
207: end
# File lib/mack-javascript/helpers/prototype_helper.rb, line 196
196: def remove_class(klass = '')
197: invoke ["removeClassName", klass]
198: end
replaces the selected html.
repace may be:
| :inner: | The inner html of the selected elements are replaced |
| :outer: | the selected elements themselves are replaced |
Example
<div class=‘rakim’>
<p>Dont Sweat the Techinique</p>
</div> <div class=‘rakim’>
<p>Follow the Leader</p>
</div>
page.select(’.rakim’).replace(:inner, "<p>Paid in Full</p>") would result in
<div class=‘rakim’>
<p>Paid in Full</p>
</div> <div class=‘rakim’>
<p>Paid in Full</p>
</div>
if we then did: page.select(’.rakim’).replace(:outer, "<div class=‘schoolyD’><p>SaturdayNight</p></div>") the result would be
<div class=‘schoolyD’>
<p>SaturdayNight</p>
</div> <div class=‘schoolyD’>
<p>SaturdayNight</p>
</div>
# File lib/mack-javascript/helpers/prototype_helper.rb, line 301
301: def replace(replace, html)
302: function = {:inner =>"update",:outer => 'replace'}[replace.to_sym]
303: invoke [function, escape_javascript(html)]
304: end
# File lib/mack-javascript/helpers/prototype_helper.rb, line 102
102: def select
103: "$$(#{@selector})"
104: end
# File lib/mack-javascript/helpers/prototype_helper.rb, line 200
200: def set_attribute(name, value)
201: value = "null" if value.nil?
202: invoke ["writeAttribute", name, value]
203: end
takes away any event listeners on the ‘event_name’ event fot the selected elements
# File lib/mack-javascript/helpers/prototype_helper.rb, line 380
380: def stop_peeping(event_name)
381: invoke ["stopObserving", event_name]
382: end
# File lib/mack-javascript/helpers/prototype_helper.rb, line 353
353: def toggle()
354: invoke ['toggle']
355: end