opal-jquery 0.3.0.beta1 → 0.3.0.beta2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 25363d75e66b1ceff1ee1cf42b8043e042bda7d1
-  data.tar.gz: 4ebc01fd931f21b6b564ea6ad5276019b6eef6ee
+  metadata.gz: 499866c99d33ceac2b97f71b4f121ef64a21f6a5
+  data.tar.gz: 4136e110a9ea3c53c7bfe34fc8a12f115389fbca
 SHA512:
-  metadata.gz: fd980b4568e6e68c2aa5998fae67bc3b7a463e1c87c8984f95e3d66c343cb040a95c030aa032c5f2f0c3760ca38e560f0a00aef381c5c901a5641d253df4970d
-  data.tar.gz: a5f79ef93073c297f2458d1d0f5d804616f55add80a000e16a04915198130049cf6d530f6e2212ad69e1f2b36c40ca123f00e012ac3897875d99dd74d1ba7826
+  metadata.gz: 5e6e27e0bfbec3a81f3460fa2f624fbeaf6dafe20c1e64bf9f74667fadadd6fc99ca8e037c15928309a004b83817bd1af888ac770535558d1505e193793d4987
+  data.tar.gz: 6cd277e4dba261e78d4439dc14347779411160c2b26909fcea0ebd274f2d5827e6601dbc4b646d34b6ba0619baad300d17bb50237911922f29514378f6c481a9

data/.gitignore

@@ -5,3 +5,4 @@ build
 gh-pages
 /.bundle
 .yardoc
+/doc

data/.travis.yml

@@ -1,7 +1,6 @@
 language: ruby
 
 rvm:
-  - 1.8.7
   - 1.9.3
   - 2.0.0
-  - 2.1.0
+  - 2.1

data/.yardopts

@@ -0,0 +1,3 @@
+--markup markdown
+-
+CHANGELOG.md

data/CHANGELOG.md

@@ -1,4 +1,17 @@
-## edge
+# EDGE
+
+*   Move all files under `opal/jquery` require namespace, rather than
+    current `opal-jquery` require paths.
+
+*   Add `Browser::Window` class, and make `::Window` an instance of it.
+
+*   Make `Document` include `Browser::DocumentMethods` which is a simple
+    module to define custom methods for `Document`.
+
+*   Cleanup HTTP implementation.
+
+*   `Element#[]` and `Element#attr` now return `nil` for empty attributes,
+    instead of returning an empty string.
 
 *   Add `HTTP.setup` and `HTTP.setup=` to access `$.ajaxSetup`
 
@@ -10,7 +23,7 @@
 *   Add Promise support to `HTTP` get/post/put/delete methods. Also remove
     `HTTP#callback` and `#errback` methods.
 
-## 0.2.0 2014-03-12
+# 0.2.0 - March 12, 2013
 
 *   Add `Document.body` and `Document.head` shortcut to element instances.
 
@@ -24,18 +37,18 @@
 
 *   Expose `#detach` method on `Element`.
 
-## 0.1.2 2013-12-01
+# 0.1.2 - December 1, 2013
 
 *   Support setting html content through `Element#html()`.
 
 *   Add `Element` methods: `#get`, `#attr` and `#prop` by aliasing them to
     jquery implementations.
 
-## 0.1.1 2013-11-11
+# 0.1.1 - November 11, 2013
 
 *   Require `native` from stdlib for `HTTP` to use.
 
-## 0.1.0 2013-11-03
+# 0.1.0 - November 3, 2013
 
 *   Add `Window` and `$window` alias.
 
@@ -43,7 +56,7 @@
 
 *   `Event` is now a wrapper around native event from dom listeners.
 
-## 0.0.9 2013-06-15
+# 0.0.9 - June 15, 2013
 
 *   Revert earlier commit, and use `$document` as reference to jquery
     wrapped `document`.
@@ -52,13 +65,13 @@
 
 *   Depreceate $document.title and $document.title=.
 
-## 0.0.8 2013-05-02
+# 0.0.8 - May 2, 2013
 
 *   Depreceate Document in favor of $document global.
 
 *   Add HTTP.delete() for creating DELETE request.
 
-## 0.0.7 2013-02-20
+# 0.0.7 - February 20, 2013
 
 *   Add Element#method_missing which forwards missing calls to try and call
     method as a native jquery function/plugin.

data/Gemfile

@@ -1,5 +1,5 @@
 source 'https://rubygems.org'
 gemspec
 
-gem 'opal', github: 'opal/opal'
-# gem 'opal', path: '../opal'
+gem 'opal',       github: 'opal/opal'
+gem 'opal-rspec', github: 'opal/opal-rspec'

data/README.md

@@ -1,4 +1,4 @@
-# opal-jquery
+# opal-jquery: jQuery Wrapper For Opal
 
 [![Build Status](http://img.shields.io/travis/opal/opal-jquery/master.svg)](http://travis-ci.org/opal/opal-jquery)
 
@@ -7,23 +7,7 @@ and providing a nice ruby syntax for dealing with jQuery instances.
 
 See the Opal website for [documentation](http://opalrb.org/docs/jquery).
 
-## Documentation
-
-```ruby
-elements = Element.find('.foo')
-# => [<div class="foo">, ...]
-
-elements.class
-# => JQuery
-
-elements.on(:click) do
-  alert "element was clicked"
-end
-```
-
-### Getting Started
-
-#### Installation
+## Installation
 
 Install opal-jquery from RubyGems:
 
@@ -36,10 +20,77 @@ Or include it in your Gemfile for Bundler:
 ```ruby
 gem 'opal-jquery'
 ```
+## Running Specs
+
+Get the dependencies:
+
+    $ bundle install
+
+### Browser
+
+You can run the specs in any web browser, by running the `config.ru` rack file:
+
+    $ bundle exec rackup
+
+And then visiting `http://localhost:9292` in any web browser.
+
+### Phantomjs
+
+You will need phantomjs to run the specs outside the browser.  It can
+be downloaded at [http://phantomjs.org/download.html](http://phantomjs.org/download.html)
+
+On osx you can install through homebrew
+
+    $ brew update; brew install phantomjs
+
+Run the tests inside a phantom.js runner:
+
+    $ bundle exec rake
+
+### Zepto
+
+opal-jquery also supports zepto. To run specs for zepto use the rake task:
+
+    $ bundle exec rake zepto
+
+## Getting Started
+
+### Usage
+
+`opal-jquery` can now be easily added to your opal application sources using a
+standard require:
+
+```ruby
+# app/application.rb
+require 'opal'
+require 'jquery'
+require 'opal-jquery'
+
+alert "Hello from jquery + opal"
+```
+
+> **Note**: this file requires two important dependencies, `jquery` and `opal-jquery`.
+> You need to bring your own `jquery.js` file as the gem does not include one. If
+> you are using the asset pipeline with rails, then this should be available
+> already, otherwise download a copy and place it into `app/` or whichever directory
+> you are compiling assets from. You can alternatively require a zepto instance.
+
+The `#alert` method is provided by `opal-jquery`. If the message displays, then
+`jquery` support should be working.
 
-### Interacting with the DOM
+### How does opal-jquery work
 
-#### Finding elements
+`opal-jquery` provides an `Element` class, whose instances are toll-free
+bridged instances of jquery objects. Just like ruby arrays are just javascript
+arrays, `Element` instances are just jquery objects. This makes interaction
+with jquery plugins much easier.
+
+Also, `Element` will try to bridge with Zepto if it cannot find jQuery loaded,
+making it ideal for mobile applications as well.
+
+## Interacting with the DOM
+
+### Finding Elements
 
 opal-jquery provides the `Element` class, which can be used to find elements in
 the current document:
@@ -79,7 +130,7 @@ el.find '.foo'
 # => #<Element .... >
 ```
 
-#### Running code on document ready
+### Running code on document ready
 
 Just like jQuery, opal-jquery requires the document to be ready to
 be able to fully interact with the page. Any top level access should
@@ -93,7 +144,7 @@ end
 
 The `Kernel#alert` method is shown above too.
 
-#### Event handling
+### Event handling
 
 The `Element#on` method is used to attach event handlers to elements:
 
@@ -122,7 +173,15 @@ Element.find('#my_link').on(:click) do |evt|
 end
 ```
 
-#### CSS styles and classnames
+You can access the element which triggered the event by `#current_target`.
+
+```ruby
+Document.on :click do |evt|
+  puts "clicked on: #{evt.current_target}"
+end
+```
+
+### CSS styles and classnames
 
 The various jQuery methods are available on `Element` instances:
 
@@ -157,7 +216,7 @@ el.css 'color'
 # => 'blue'
 ```
 
-### HTTP/AJAX requests
+## HTTP/AJAX requests
 
 jQuery's Ajax implementation is also wrapped in the top level HTTP
 class.
@@ -201,7 +260,7 @@ The request is actually triggered inside the `HTTP.get` method, but due
 to the async nature of the request, the callback and errback handlers can
 be added anytime before the request returns.
 
-#### Handling responses
+### Handling responses
 
 Web apps deal with JSON responses quite frequently, so there is a useful
 `#json` helper method to get the JSON content from a request:
@@ -231,49 +290,6 @@ request.errback { |response|
 }
 ```
 
-#### Other options
-
-`HTTP` accepts the usual `$.ajax` options:
-
-```ruby
-HTTP.get '/search', data: {q: 'foo'}, async: false do |response|
-  p response.body
-end
-```
-
-## Running Specs
-
-Get the dependencies:
-
-    $ bundle install
-
-### Browser
-
-You can run the specs in any web browser, by running the `config.ru` rack file:
-
-    $ bundle exec rackup
-
-And then visiting `http://localhost:9292` in any web browser.
-
-### Phantomjs
-
-You will need phantomjs to run the specs outside the browser.  It can
-be downloaded at [http://phantomjs.org/download.html](http://phantomjs.org/download.html)
-
-On osx you can install through homebrew
-
-    $ brew update; brew install phantomjs
-
-Run the tests inside a phantom.js runner:
-
-    $ bundle exec rake
-
-### Zepto
-
-opal-jquery also supports zepto. To run specs for zepto use the rake task:
-
-    $ bundle exec rake zepto
-
 ##  License
 
 (The MIT License)
@@ -297,3 +313,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
+

data/lib/opal/jquery.rb

@@ -1,4 +1,13 @@
-require 'opal'
-require 'opal/jquery/version'
+if RUBY_ENGINE == 'opal'
+  require 'opal/jquery/window'
+  require 'opal/jquery/document'
+  require 'opal/jquery/element'
+  require 'opal/jquery/event'
+  require 'opal/jquery/http'
+  require 'opal/jquery/kernel'
+else
+  require 'opal'
+  require 'opal/jquery/version'
 
-Opal.append_path File.expand_path('../../../opal', __FILE__).untaint
+  Opal.append_path File.expand_path('../..', __FILE__).untaint
+end

data/lib/opal/jquery/document.rb

@@ -0,0 +1,93 @@
+require 'opal/jquery/constants'
+require 'opal/jquery/element'
+
+module Browser
+  # {Document} includes these methods to extend {Element}.
+  #
+  # Generally, you will want to use the {::Document} top level instance of
+  # {Element}.
+  #
+  # ## Usage
+  #
+  # A useful method on {Document} is the {#ready?} method, which can be used to
+  # run a block once the document is ready. This is equivalent to passing a
+  # function to the `jQuery` constructor.
+  #
+  #     Document.ready? do
+  #       puts "Page is ready to use!"
+  #     end
+  #
+  # Just like jQuery, multiple blocks may be passed to {#ready?}.
+  #
+  # ### Document head and body elements
+  #
+  # Every document has atleast two elements: a `head` and `body`. For
+  # convenience, these are both exposed as {#head} and {#body} respectively,
+  # and are just instances of {Element}.
+  #
+  #     puts Document.head
+  #     puts Document.body
+  #
+  #     # => #<Element: [<head>]>
+  #     # => #<Element: [<body>]>
+  #
+  # ### Events
+  #
+  # {Document} instances also have {#on}, {#off} and {#trigger} methods for
+  # handling events. These all just delegate to their respective methods on
+  # {Element}, using `document` as the context.
+  #
+  #     Document.on :click do |evt|
+  #       puts "someone clicked somewhere in the document"
+  #     end
+  #
+  module DocumentMethods
+    `var $ = #{JQUERY_SELECTOR.to_n}` # cache $ for SPEED
+
+    # Register a block to run once the document/page is ready.
+    #
+    # @example
+    #   Document.ready? do
+    #     puts "ready to go"
+    #   end
+    #
+    def ready?(&block)
+      `$(#{block})` if block_given?
+    end
+
+    # Returns document title.
+    #
+    # @return [String]
+    def title
+      `document.title`
+    end
+
+    # Set document title.
+    #
+    # @param title [String]
+    def title=(title)
+      `document.title = title`
+    end
+
+    # {Element} instance wrapping `document.head`.
+    #
+    # @return [Element]
+    def head
+      Element.find `document.head`
+    end
+
+    # {Element} instance wrapping `document.body`.
+    #
+    # @return [Element]
+    def body
+      Element.find `document.body`
+    end
+  end
+end
+
+# Top level {Document} instance wrapping `window.document`.
+Document = Element.find(`document`)
+Document.send(:extend, Browser::DocumentMethods)
+
+# TODO: this will be removed soon (here for compatibility)
+$document = Document

data/lib/opal/jquery/element.rb

@@ -0,0 +1,669 @@
+require 'native'
+require 'opal/jquery/constants'
+
+# {Element} is a toll-free bridged class that maps to native jQuery instances.
+#
+# As {Element} maps to a jQuery object, it can be used to represent 0, 1, or
+# more actual DOM elements. {Element} exposes a more ruby-esqe interface to
+# jQuery.
+#
+# ## Usage
+#
+# {Element} instances can be created in a number of ways.
+#
+# ### Creating new Elements
+#
+# A new element can be created using the {Element.new} method.
+#
+#     el = Element.new(:div)
+#     el.id = "title"
+#     p el
+#     # => #<Element [<div id="title">]>
+#
+# This is a nicer version of creating a javascript element using
+# `document.createElement` and then wrapping it in a jquery object.
+#
+# ### Finding existing elements in dom
+#
+# Any valid jQuery selector expressions can be used with either {Element.find}
+# or {Element.[]}.
+#
+#     foos = Element.find('.foo')
+#     # => #<Element [<div class="foo">]>
+#
+#     links = Element['a']
+#     # => #<Element [<a>, <a class="bar">]>
+#
+# Alternatively, {Element.id} can be used to find an element by its document
+# id (or nil is returned for no match).
+#
+#     bar = Element.id 'bar'
+#     # => Element or nil
+#
+# ### DOM Content from string
+#
+# Finally, an {Element} instance can be created by parsing a string of html
+# content. This will parse multiple elements, like jquery, if string content
+# contains them:
+#
+#     Element.parse '<div id="title">hello world</div>'
+#     # => #<Element [<div id="title">]>
+#
+class Element < `#{JQUERY_CLASS.to_n}`
+  `var $ = #{JQUERY_SELECTOR.to_n}` # cache $ for SPEED
+
+  include Enumerable
+
+  # Find elements by the given css selector.
+  #
+  # Returns an empty {Element} if no matching elements.
+  #
+  # @param selector [String] css selector
+  # @return [Element]
+  def self.find(selector)
+    `$(#{selector})`
+  end
+
+  # Find elements by the given css selector.
+  #
+  # Returns an empty {Element} if no matching elements.
+  #
+  # @param selector [String] css selector
+  # @return [Element]
+  def self.[](selector)
+    `$(#{selector})`
+  end
+
+  # Find an element by the given id.
+  #
+  # If no matching element, then `nil` will be returned. A matching element
+  # becomes the sole element in the returned collection.
+  #
+  # @param id [String] dom element id
+  # @return [Element, nil]
+  def self.id(id)
+    %x{
+      var el = document.getElementById(id);
+
+      if (!el) {
+        return nil;
+      }
+
+      return $(el);
+    }
+  end
+
+  # Create a new dom element, wrapped as {Element} instance with the given
+  # `tag` name.
+  #
+  # @param tag [String] valid html tag name
+  # @return [Element]
+  def self.new(tag = 'div')
+    `$(document.createElement(tag))`
+  end
+
+  # Parse a string of html content into an {Element} instance.
+  #
+  # If no valid elements in string, then an empty collection will be returned.
+  #
+  # @param str [String] html content to parse
+  # @return [Element]
+  def self.parse(str)
+    `$(str)`
+  end
+
+  # Expose jQuery plugins to become available in ruby code. By default,
+  # jQuery methods or plugins must be manually exposed as ruby methods.
+  # This method simply creates an aliasing ruby method to call the original
+  # javascript function.
+  #
+  # @example
+  #   # Expose bootstraps jQuery `modal` function
+  #   Element.expose :modal
+  #
+  #   Element.find('.my-modal').modal
+  #
+  # @param methods [String, Symbol] all methods to expose to ruby
+  # @return nil
+  def self.expose(*methods)
+    methods.each do |method|
+      alias_native method
+    end
+  end
+
+  # @return The original css selector used to create {Element}
+  attr_reader :selector
+
+  # @!method after(content)
+  #
+  # Inserts the given `content` after each element in this set of elements.
+  # This method can accept either another {Element}, or a string.
+  #
+  # @param content [String, Element] string or element to insert
+  alias_native :after
+
+  # @!method before(content)
+  #
+  # Insert the given `content` before each element in this set of elements.
+  # The given `content` can be either an {Element}, or a string.
+  #
+  # @param content [String, Element] string or element to insert
+  alias_native :before
+
+  # @!method parent(selector = nil)
+  #
+  # Returns a new {Element} set with the parents of each element in this
+  # collection. An optional `selector` argument can be used to filter the
+  # results to match the given selector. Result may be empty.
+  #
+  # @param selector [String] optional filter
+  # @return [Element]
+  alias_native :parent
+
+  # @!method parents(selector = nil)
+  #
+  # Returns a new {Element} set with all parents of each element in this
+  # collection. An optional `selector` may be provided to filter the
+  # selection. Resulting collection may be empty.
+  #
+  # @example Without filtering collection
+  #   Element.find('#foo').parents
+  #   # => #<Element [<div id="wrapper">, <body>, <html>]>
+  #
+  # @example Using a filter
+  #   Element.find('#foo').parents('div')
+  #   # => #<Element [<div id="wrapper">]
+  #
+  # @param selector [String] optional filter
+  # @return [Element]
+  alias_native :parents
+
+  # @!method prev(selector = nil)
+  alias_native :prev
+
+  # @!method remove(selector = nil)
+  alias_native :remove
+
+  # @!method hide(duration = 400)
+  alias_native :hide
+
+  # @!method show(duration = 400)
+  alias_native :show
+
+  # @!method toggle(duration = 400)
+  alias_native :toggle
+
+  # @!method children(selector = nil)
+  alias_native :children
+
+  # @!method blur
+  alias_native :blur
+
+  # @!method closest(selector)
+  alias_native :closest
+
+  # @!method detach(selector = nil)
+  alias_native :detach
+
+  # @!method focus
+  alias_native :focus
+
+  # @!method find(selector)
+  alias_native :find
+
+  # @!method next(selector = nil)
+  alias_native :next
+
+  # @!method siblings(selector = nil)
+  alias_native :siblings
+
+  # @!method text(text = nil)
+  #
+  # Get or set the text content of each element in this collection. Setting
+  # the content is provided as a compatibility method for jquery. Instead
+  # {#text=} should be used for setting text content.
+  #
+  # If no `text` content is provided, then the text content of this element
+  # will be returned.
+  #
+  # @see #text=
+  # @param text [String] text content to set
+  # @return [String]
+  alias_native :text
+
+  # @!method trigger(event)
+  #
+  # Trigger an event on this element. The given `event` specifies the event
+  # type.
+  #
+  # @param event [String, Symbol] event type
+  alias_native :trigger
+
+  # @!method append(content)
+  #
+  # @param content [String, Element]
+  alias_native :append
+
+  # @!method serialize
+  alias_native :serialize
+
+  # @!method is(selector)
+  # @return [true, false]
+  alias_native :is
+
+  # @!method filter(selector)
+  # @param selector [String]
+  # @return [Element]
+  alias_native :filter
+
+  # @!method last
+  #
+  # Returns a new {Element} instance containing the last element in this
+  # current set.
+  #
+  # @return [Element]
+  alias_native :last
+
+  # @!method wrap(wrapper)
+  # @param wrapper [String, Element] html content, selector or element
+  # @return [Element]
+  alias_native :wrap
+
+  # @!method stop
+  #
+  # Stop any currently running animations on element.
+  alias_native :stop
+
+  # @!method clone
+  #
+  # Clone all elements inside this collection, and return as a new instance.
+  # @return [Element]
+  alias_native :clone
+
+  # @!method empty
+  #
+  # Remove all child nodes from each element in this collection.
+  alias_native :empty
+
+  # @!method get
+  alias_native :get
+
+  # @!method prop(name, value = nil)
+  #
+  # Get or set the property `name` on each element in collection.
+  alias_native :prop
+
+  alias succ next
+  alias << append
+
+  # @!method []=(attr, value)
+  #
+  # Set the given attribute `attr` on each element in this collection.
+  #
+  # @see http://api.jquery.com/attr/
+  alias_native :[]=, :attr
+
+  # @!method add_class(class_name)
+  alias_native :add_class, :addClass
+
+  # @!method append_to(element)
+  alias_native :append_to, :appendTo
+
+  # @!method has_class?(class_name)
+  alias_native :has_class?, :hasClass
+
+  # @!method html=(content)
+  #
+  # Set the html content of each element in this collection to the passed
+  # content. Content can either be a string or another {Element}.
+  #
+  # @param content [String, Element]
+  alias_native :html=, :html
+
+  # @!method remove_attr(attr)
+  alias_native :remove_attr, :removeAttr
+
+  # @!method remove_class(class_name)
+  alias_native :remove_class, :removeClass
+
+  # @!method text=(text)
+  #
+  # Set text content of each element in this collection.
+  #
+  # @see #text
+  # @param text [String]
+  alias_native :text=, :text
+
+  # @!method toggle_class
+  alias_native :toggle_class, :toggleClass
+
+  # @!method value=(value)
+  alias_native :value=, :val
+
+  # @!method scroll_top=(value)
+  alias_native :scroll_top=, :scrollTop
+
+  # @!method scroll_top
+  alias_native :scroll_top, :scrollTop
+
+  # @!method scroll_left=(value)
+  alias_native :scroll_left=, :scrollLeft
+
+  # @!method scroll_left
+  alias_native :scroll_left, :scrollLeft
+
+  # @!method remove_attribute(attr)
+  alias_native :remove_attribute, :removeAttr
+
+  # @!method slide_down(duration = 400)
+  alias_native :slide_down, :slideDown
+
+  # @!method slide_up(duration = 400)
+  alias_native :slide_up, :slideUp
+
+  # @!method slide_toggle(duration = 400)
+  alias_native :slide_toggle, :slideToggle
+
+  # @!method fade_toggle(duration = 400)
+  alias_native :fade_toggle, :fadeToggle
+
+  # @!method height=(value)
+  alias_native :height=, :height
+
+  # @!method width=(value)
+  alias_native :width=, :width
+
+  # @!method outer_width(include_margin = false)
+  alias_native :outer_width, :outerWidth
+
+  # @!method outer_height(include_margin = false)
+  alias_native :outer_height, :outerHeight
+
+  def to_n
+    self
+  end
+
+  def [](name)
+    `self.attr(name) || nil`
+  end
+
+  def attr(name, value=nil)
+    if value.nil?
+      `self.attr(name) || nil`
+    else
+      `self.attr(name, value)`
+    end
+  end
+
+  def has_attribute?(name)
+    `!!self.attr(name)`
+  end
+
+  def append_to_body
+    `self.appendTo(document.body)`
+  end
+
+  def append_to_head
+    `self.appendTo(document.head)`
+  end
+
+  # Returns the element at the given index as a new {Element} instance.
+  # Negative indexes can be used and are counted from the end. If the
+  # given index is outside the range then `nil` is returned.
+  #
+  # @param index [Integer] index
+  # @return [Element, nil]
+  def at(index)
+    %x{
+      var length = self.length;
+
+      if (index < 0) {
+        index += length;
+      }
+
+      if (index < 0 || index >= length) {
+        return nil;
+      }
+
+      return $(self[index]);
+    }
+  end
+
+  # Returns the CSS class name of the firt element in self collection.
+  # If the collection is empty then an empty string is returned. Only
+  # the class name of the first element will ever be returned.
+  #
+  # @return [String]
+  def class_name
+    %x{
+      var first = self[0];
+      return (first && first.className) || "";
+    }
+  end
+
+  # Sets the CSS class name of every element in self collection to the
+  # given string. self does not append the class names, it replaces
+  # the entire current class name.
+  #
+  # @param name [String] class name to set
+  def class_name=(name)
+    %x{
+      for (var i = 0, length = self.length; i < length; i++) {
+        self[i].className = name;
+      }
+    }
+    self
+  end
+
+  # Get or set css properties on each element in self collection. If
+  # only the `name` is given, then that css property name is read from
+  # the first element in the collection and returned. If the `value`
+  # property is also given then the given css property is set to the
+  # given value for each of the elements in self collection. The
+  # property can also be a hash of properties and values.
+  def css(name, value=nil)
+    if value.nil? && name.is_a?(String)
+      return `self.css(name)`
+    else
+      name.is_a?(Hash) ? `self.css(#{name.to_n})` : `self.css(name, value)`
+    end
+    self
+  end
+
+  # Set css values over time to create animations. The first parameter is a
+  # set of css properties and values to animate to. The first parameter
+  # also accepts a special :speed value to set animation speed. If a block
+  # is given, the block is run as a callback when the animation finishes.
+  def animate(params, &block)
+    speed = params.has_key?(:speed) ? params.delete(:speed) : 400
+    %x{
+      self.animate(#{params.to_n}, #{speed}, function() {
+        #{block.call if block_given?}
+      })
+    }
+  end
+
+  def data(*args)
+    %x{
+      var result = self.data.apply(self, args);
+      return result == null ? nil : result;
+    }
+  end
+
+  # Start a visual effect (e.g. fadeIn, fadeOut, …) passing its name.
+  # Underscored style is automatically converted (e.g. `effect(:fade_in)`).
+  # Also accepts additional arguments and a block for the finished callback.
+  def effect(name, *args, &block)
+    name = name.gsub(/_\w/) { |match| match[1].upcase }
+    args = args.map { |a| a.to_n if a.respond_to? :to_n }.compact
+    args << `function() { #{block.call if block_given?} }`
+    `self[#{name}].apply(self, #{args})`
+  end
+
+  def visible?
+    `self.is(':visible')`
+  end
+
+  def offset
+    Native(`self.offset()`)
+  end
+
+  def each
+    `for (var i = 0, length = self.length; i < length; i++) {`
+      yield `$(self[i])`
+    `}`
+    self
+  end
+
+  def first
+    `self.length ? self.first() : nil`
+  end
+
+  def html(content = undefined)
+    %x{
+      if (content != null) {
+        return self.html(content);
+      }
+
+      return self.html() || '';
+    }
+  end
+
+  def id
+    %x{
+      var first = self[0];
+      return (first && first.id) || "";
+    }
+  end
+
+  def id=(id)
+    %x{
+      var first = self[0];
+
+      if (first) {
+        first.id = id;
+      }
+
+      return self;
+    }
+  end
+
+  def tag_name
+    `self.length > 0 ? self[0].tagName.toLowerCase() : #{nil}`
+  end
+
+  def inspect
+    %x{
+      if      (self[0] === document) return '#<Element [document]>'
+      else if (self[0] === window  ) return '#<Element [window]>'
+
+      var val, el, str, result = [];
+
+      for (var i = 0, length = self.length; i < length; i++) {
+        el  = self[i];
+        if (!el.tagName) { return '#<Element ['+el.toString()+']'; }
+
+        str = "<" + el.tagName.toLowerCase();
+
+        if (val = el.id) str += (' id="' + val + '"');
+        if (val = el.className) str += (' class="' + val + '"');
+
+        result.push(str + '>');
+      }
+
+      return '#<Element [' + result.join(', ') + ']>';
+    }
+  end
+
+  def to_s
+    %x{
+      var val, el, result = [];
+
+      for (var i = 0, length = self.length; i < length; i++) {
+        el  = self[i];
+
+        result.push(el.outerHTML)
+      }
+
+      return result.join(', ');
+    }
+  end
+
+  # Returns the number of elements in this collection. May be zero.
+  # @return [Integer]
+  def length
+    `self.length`
+  end
+
+  # Returns `true` if this collection has 1 or more elements, `false`
+  # otherwise.
+  #
+  # @return [true, false]
+  def any?
+    `self.length > 0`
+  end
+
+  # Returns `true` if this collection contains no elements, `false` otherwise.
+  #
+  # @return [true, false]
+  def empty?
+    `self.length === 0`
+  end
+
+  alias empty? none?
+
+  def on(name, sel = nil, &block)
+    %x{
+      var wrapper = function(evt) {
+        if (evt.preventDefault) {
+          evt = #{Event.new `evt`};
+        }
+
+        return block.apply(null, arguments);
+      };
+
+      block._jq_wrap = wrapper;
+
+      if (sel == nil) {
+        self.on(name, wrapper);
+      }
+      else {
+        self.on(name, sel, wrapper);
+      }
+    }
+
+    block
+  end
+
+  def off(name, sel, block = nil)
+    %x{
+      if (sel == null) {
+        return self.off(name);
+      }
+      else if (block === nil) {
+        return self.off(name, sel._jq_wrap);
+      }
+      else {
+        return self.off(name, sel, block._jq_wrap);
+      }
+    }
+  end
+
+  alias size length
+
+  def value
+    `self.val() || ""`
+  end
+
+  def height
+    `self.height() || nil`
+  end
+
+  def width
+    `self.width() || nil`
+  end
+
+  def position
+    Native(`self.position()`)
+  end
+end