Class: Mack::JavaScript::Framework::JquerySelector

Inherits:
Selector show all
Defined in:
lib/mack-javascript/helpers/jquery_helper.rb

Constant Summary collapse

@@effects =

This general mapping taken from the awesome JRails plugin

{
  :appear => {:function => 'fadeIn'},
  :blind_down => {:mode => 'blind', :function => 'show', :options => {:direction => 'vertical'}},
  :blind_up => {:mode => 'blind', :function => 'hide', :options => {:direction => 'vertical'}},
  :blind_right => {:mode => 'blind', :function => 'show', :options => {:direction => 'horizontal'}},
  :blind_left => {:mode => 'blind', :function => 'hide', :options => {:direction => 'horizontal'}},
  :bounce_in => {:mode => 'bounce', :function => 'show', :options => {:direction => 'up'}},
  :bounce_out => {:mode => 'bounce', :function => 'hide', :options => {:direction => 'up'}},
  :drop_in => {:mode => 'drop', :function => 'show', :options => {:direction => 'up'}},
  :drop_out => {:mode => 'drop', :function => 'hide', :options => {:direction => 'down'}},
  :fade => {:function => 'fadeOut'},
  :fold_in => {:mode => 'fold', :function => 'hide'},
  :fold_out => {:mode => 'fold', :function => 'show'},
  :grow => {:mode => 'scale', :function => 'show'},
  :highlight => {:mode => 'highlight', :function => 'show'},
  :puff => {:mode => 'puff', :function => 'hide'},
  :pulsate => {:mode => 'pulsate', :function => 'show'},
  :shake => {:mode => 'shake', :function => 'show'},
  :shrink => {:mode => 'scale', :function => 'hide'},
  :slide_down => {:mode => 'slide', :function => 'show', :options => {:direction => 'up'}},
  :slide_up => {:mode => 'slide', :function => 'hide', :options => {:direction => 'up'}},
  :slide_right => {:mode => 'slide', :function => 'show', :options => {:direction => 'left'}},
  :slide_left => {:mode => 'slide', :function => 'hide', :options => {:direction => 'left'}},
  :squish => {:mode => 'scale', :function => 'hide', :options => {:origin => "['top','left']"}},
  :switch_on => {:mode => 'clip', :function => 'show', :options => {:direction => 'vertical'}},
  :switch_off => {:mode => 'clip', :function => 'hide', :options => {:direction => 'vertical'}},
  :toggle_appear => {:function => 'fadeToggle'},
  :toggle_slide => {:mode => 'slide', :function => 'toggle', :options => {:direction => 'up'}},
  :toggle_blind => {:mode => 'blind', :function => 'toggle', :options => {:direction => 'vertical'}},
}

Instance Attribute Summary

Attributes inherited from Selector

#session_id

Instance Method Summary collapse

Methods inherited from Selector

#add, #initialize, #to_s

Methods included from ViewHelpers::StringHelpers

#escape_javascript

Constructor Details

This class inherits a constructor from Mack::JavaScript::Selector

Instance Method Details

#add_class(klass) ⇒ Object

– Attributes –#



197
198
199
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 197

def add_class(klass)
  add "addClass('#{klass}')"
end

#all_next(selector = nil) ⇒ Object

gets every next sibling for each element selected Takes an optional selector as an argument



181
182
183
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 181

def all_next(selector = nil)
  add "nextAll(#{optional_selector(selector)})"
end

#all_previous(selector = nil) ⇒ Object

gets every previous sibling for each element selected Takes an optional selector as an argument



187
188
189
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 187

def all_previous(selector = nil)
  add "prevAll(#{optional_selector(selector)})"
end

#ancestors(selector = nil) ⇒ Object

returns a collection of every parent up the chain to the root of the document for each selected element. This method also takes an optional selector as an argument.

Example:

for the html

<div class=‘big_daddy_kane’>

<div id='long_live'>
  <ul class='raw'>
    <li id='featuring'>with Kool G Rap</li>
  </ul>
</div>

</div>

page.select(‘#featuring’).ancestors will give you a collection consisting of both divs and the ul. page.select(‘#featuring’).ancestors(‘#long_live’) will give you the div with id ‘long_live’



157
158
159
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 157

def ancestors(selector = nil)
  add "parents(#{optional_selector(selector)})"
end

#children ⇒ Object

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’



129
130
131
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 129

def children
  add "children()"
end

#draggable(options = nil) ⇒ Object

Makes the selected elements draggable.

options can be a hash or a string. The following strings are supported

disable

temporarily disables dragging functionality

enable

re-enables dragging functionality

destroy

disables dragging functionality

The options hash has many…well, options, the full list of which can be found here: docs.jquery.com/UI/Draggable/draggable#toptions Some usefule ones include:

:opacity

opacity of the element once dragging starts

:scroll

if true, container auto-scrolls while dragging.

:zIndex

z-index for the helper while being dragged.

:helper

Possible values: ‘original’, ‘clone’. The ‘clone’ option will produce the ‘ghosting’ effect.

:revert

if set to true, the element will return to its 

start position when dragging stops. Also accepts the 
strings "valid" and "invalid": If set to invalid, revert 
will only occur if the draggable has not been dropped on
a droppable. For valid, it's the other way around.



507
508
509
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 507

def draggable(options = nil)
  add "draggable(#{drag_and_drop_options(options)})"
end

#droppable(options = nil, &block) ⇒ Object

Makes the selected elements droppable.

options can be a hash or a string. The following strings are supported

disable

temporarily disables dropping functionality

enable

re-enables dropping functionality

destroy

disables dropping functionality

all options are at docs.jquery.com/UI/Droppables/droppable Some useful ones include:

:accept

a css selector that defines what type of draggable

elements it accepts. For instance, if :accept => '.block',
only draggable objects with the class 'block' will be selected
:activeClass

The class that should be added to the droppable while an acceptable draggable is being dragged.

:hoverClass

The class that should be added to the droppable while being hovered by an acceptable draggable.

:tolerance

Specifies which mode to use for testing whether a draggable is ‘over’ a droppable. Possible values: ‘fit’, ‘intersect’, ‘pointer’, ‘touch’. Default value: ‘intersect’.

: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 = => ‘.trash’, :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 with class ‘trash’ 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.



550
551
552
553
554
555
556
557
558
559
560
561
562
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 550

def droppable(options = nil, &block)
  remote_options = options.delete(:remote)
  if remote_options || block_given?
    func =  Mack::JavaScript::Function.new(session_id, 'ev', 'ui')
    if remote_options
      remote_options[:with] ||= "'id=' + $(ui.draggable).attr('id')"
      func << Mack::JavaScript::ScriptGenerator.new(session_id).ajax(remote_options)
    end
    func.body(&block) if block_given?
    options.merge!(:drop => func)
  end
  add "droppable(#{drag_and_drop_options(options)})"
end

#effect(name, options = nil) ⇒ Object

custom effects. ‘name’ corresponds to the keys of the hash above



416
417
418
419
420
421
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 416

def effect(name, options = nil)
  effect = @@effects[name]
  args = [effect[:mode] ? "'#{effect[:mode]}'" : nil,    
          options_for_effects((effect[:options] || {}).merge(options || {}))]
  add "#{effect[:function]}(#{args.compact.join(',')})"
end

#hide(fx = nil, options = nil) ⇒ Object 



435
436
437
438
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 435

def hide(fx = nil, options = nil)
  args = [fx ? "'#{fx}'" : nil, options_for_effects(options)]
  add "hide(#{args.compact.join(',')})"
end

#insert(position, html) ⇒ Object

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))



267
268
269
270
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 267

def insert(position, html)
  position = {:bottom => 'append', :top => 'prepend'}[position.to_sym] || position.to_s
  add "#{position}('#{escape_javascript(html)}')"
end

#morph(hsh, options = nil) ⇒ Object

Takes a hash of css properties you want the selected elements to ‘morph’ into. Say you want all elements with class rakim to transition to only having half the opacity and having a red background, and you want the transition to last 4 seconds page.select(‘.rakim’).morph(=> 0.5, :backgroundColor => ‘#f00’, :duration => 4000) You can see a list of css properties here www.w3schools.com/CSS/css_reference.asp The properties in your hash should be camelcase: :backgroundColor instead of background-color



377
378
379
380
381
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 377

def morph(hsh, options = nil)
  options[:complete] = options.delete(:callback) if options && options[:callback]
  args = [options_for_javascript(hsh), options_for_effects(options)]
  add "animate(#{args.compact.join(',')})"
end

#next(selector = nil) ⇒ Object

gets the next immediate sibling for each element selected Takes an optional selector as an argument



169
170
171
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 169

def next(selector = nil)
  add "next(#{optional_selector(selector)})"
end

#parent ⇒ Object

returns a collection of the immediate parent of each selected element



134
135
136
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 134

def parent
  add "parent()"
end

#peep(event_name, options = {}, &block) ⇒ Object

adds an event listener to the selected elements. If options == 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.



465
466
467
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 465

def peep(event_name, options = {}, &block)
  add "bind('#{event_name}', #{event_function(options[:prevent_default], &block)})"
end

#previous(selector = nil) ⇒ Object

gets the previous immediate sibling for each element selected Takes an optional selector as an argument



175
176
177
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 175

def previous(selector = nil)
  add "prev(#{optional_selector(selector)})"
end

#remove ⇒ Object

removes the selected elements from the DOM



315
316
317
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 315

def remove
  add "remove()"
end

#remove_attribute(name) ⇒ Object 



211
212
213
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 211

def remove_attribute(name)
  add "removeAttr('#{name}')"
end

#remove_class(klass = '') ⇒ Object 



202
203
204
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 202

def remove_class(klass = '')
  add "removeClass('#{klass}')"
end

#replace(replace, html) ⇒ Object

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>



309
310
311
312
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 309

def replace(replace, html)
  function =  {:inner =>"html",:outer => 'replaceWith'}[replace.to_sym]
  add "#{function}('#{escape_javascript(html)}')"
end

#select ⇒ Object 



99
100
101
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 99

def select
  "$(#{@selector})"
end

#set_attribute(name, value) ⇒ Object 



206
207
208
209
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 206

def set_attribute(name, value)
  value = "'#{value}'" if value.is_a? String
  add "attr('#{name}', #{value})" 
end

#show(fx = nil, options = nil) ⇒ Object

show() shows an element, hide() hides it, and toggle() shows a hidden and hides a shown.

The first parameter, fx, can be any one of the following: blind, bounce, clip, core, drop, explode, fold, highlight, pulsate, scale, shake, slide. You can see above that the majority of the custom effects are built using either show or hide paired with an fx Note: the arguments for the following three methods are unique to jquery



430
431
432
433
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 430

def show(fx = nil, options = nil)
  args = [fx ? "'#{fx}'" : nil, options_for_effects(options)]
  add "show(#{args.compact.join(',')})"
end

#siblings(selector = nil) ⇒ Object

gets all siblings for each element selected Takes an optional selector as an argument



163
164
165
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 163

def siblings(selector = nil)
  add "siblings(#{optional_selector(selector)})"
end

#stop_peeping(event_name) ⇒ Object

takes away any event listeners on the ‘event_name’ event fot the selected elements



470
471
472
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 470

def stop_peeping(event_name)
  add "unbind('#{event_name}')"
end

#toggle(fx = nil, options = nil) ⇒ Object 



440
441
442
443
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 440

def toggle(fx = nil, options = nil)
  args = [fx ? "'#{fx}'" : nil, options_for_effects(options)]
  add "toggle(#{args.compact.join(',')})"
end

#trigger(event_name) ⇒ Object

triggers the ‘event_name’ event on the selected elements.



475
476
477
 
# File 'lib/mack-javascript/helpers/jquery_helper.rb', line 475

def trigger(event_name)
  add "trigger('#{event_name}')"
end