maiha-mjs 0.0.2

data/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2009 Your Name
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE 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/README

@@ -0,0 +1,89 @@
+Mjs
+===
+
+A slice for the Merb framework that offers Ajax actions like RJS with jQuery
+This privides new 'link_to' method for clients and 'page' object for servers.
+
+
+Methods
+=======
+
+* Merb::Controller#link_to(name, url='', opts={})
+    link_to now recognize :remote, :submit option
+
+* Merb::Controller#page
+    page method is reserved for RJS object.
+    You can access dom elements by it as many times and in anywhere.
+    No more ugly render(:update) block, just type 'page' as you want! 
+
+
+Setup
+=====
+
+Include jQuery as usual
+
+app/views/layouts/application.html.erb:
+  <%= js_include_tag  "jquery.js" -%>
+
+
+Example1
+========
+[ajax get request]
+
+1. Add :remote option to create ajax link
+
+    app/views/top/index.html.erb:
+       <div id="message"></div>
+       <%= link_to "hello", url(:action=>"hello"), :remote=>true %>
+                                                   ^^^^^^^^^^^^^
+    generates:
+       <a onclick="; $.getScript('/top/hello'); return false;" href="#">hello</a>
+    
+2. Use 'page' object to respond as RJS.
+
+    app/controllers/top.rb:
+       def hello
+         page[:message].text "Good morning!"
+         return page
+       end      
+
+    generates:
+       $("#message").text("Good morning!");
+
+
+Example2
+========
+[ajax post request]
+
+1. Add :submit option to specify a DOM element that should be serialized
+
+    app/views/top/index.html.erb:
+       <div id="edit">
+         <%= text_field ... %>
+         <%= text_area  ... %>
+         <%= link_to "update", url(:action=>"update"), :submit=>:edit %>
+                                                        ^^^^^^^^^^^^^
+    generates:
+        <a onclick="; $.post('/top/update', $('#edit input').serialize(), null, 'script');; return false;" href="#">update</a>
+    
+2. enjoy 'page' as you like
+
+    app/controllers/top.rb:
+       def update(id)
+         @item = Item.find(id)
+         ... # update logic is here
+         page[:message].text "successfully saved"
+         update_canvas_for(@item)
+         return page
+       end      
+
+       private
+         def update_canvas_for(item)
+           page[:workspace].html partial("record", :item=>item)
+         rescue => error
+           page[:message].text error.to_s
+           page << "alert('something wrong!')"
+         end
+
+
+Copyright (c) 2008 maiha@wota.jp, released under the MIT license

data/Rakefile

@@ -0,0 +1,55 @@
+require 'rubygems'
+require 'rake/gempackagetask'
+
+require 'merb-core'
+require 'merb-core/tasks/merb'
+
+GEM_NAME = "mjs"
+AUTHOR = "maiha"
+EMAIL = "maiha@wota.jp"
+HOMEPAGE = "http://github.com/maiha/mjs"
+SUMMARY = "A slice for the Merb framework that offers Ajax actions like RJS with jQuery"
+GEM_VERSION = "0.0.1"
+
+spec = Gem::Specification.new do |s|
+  s.rubyforge_project = 'merb'
+  s.name = GEM_NAME
+  s.version = GEM_VERSION
+  s.platform = Gem::Platform::RUBY
+  s.has_rdoc = true
+  s.extra_rdoc_files = ["README", "LICENSE", 'TODO']
+  s.summary = SUMMARY
+  s.description = s.summary
+  s.author = AUTHOR
+  s.email = EMAIL
+  s.homepage = HOMEPAGE
+  s.add_dependency('merb-slices', '>= 1.0.7.1')
+  s.require_path = 'lib'
+  s.files = %w(LICENSE README Rakefile TODO) + Dir.glob("{lib,spec,app,public,stubs}/**/*")
+end
+
+Rake::GemPackageTask.new(spec) do |pkg|
+  pkg.gem_spec = spec
+end
+
+desc "Install the gem"
+task :install do
+  Merb::RakeHelper.install(GEM_NAME, :version => GEM_VERSION)
+end
+
+desc "Uninstall the gem"
+task :uninstall do
+  Merb::RakeHelper.uninstall(GEM_NAME, :version => GEM_VERSION)
+end
+
+desc "Create a gemspec file"
+task :gemspec do
+  File.open("#{GEM_NAME}.gemspec", "w") do |file|
+    file.puts spec.to_ruby
+  end
+end
+
+require 'spec/rake/spectask'
+require 'merb-core/test/tasks/spectasks'
+desc 'Default: run spec examples'
+task :default => 'spec'

data/TODO

@@ -0,0 +1,15 @@
+TODO:
+
+- Fix Mjs.description and Mjs.version
+- Fix LICENSE with your name
+- Fix Rakefile with your name and contact info
+- Add your code to lib/mjs.rb
+- Add your Merb rake tasks to lib/mjs/merbtasks.rb
+
+Remove anything that you don't need:
+
+- app/controllers/main.rb Mjs::Main controller
+- app/views/layout/mjs.html.erb
+- spec/controllers/main_spec.rb controller specs
+- public/* any public files
+- stubs/* any stub files

data/app/controllers/application.rb

@@ -0,0 +1,5 @@
+class Mjs::Application < Merb::Controller
+  
+  controller_for_slice
+  
+end

data/app/controllers/main.rb

@@ -0,0 +1,7 @@
+class Mjs::Main < Mjs::Application
+  
+  def index
+    render
+  end
+  
+end

data/app/helpers/application_helper.rb

@@ -0,0 +1,63 @@
+module Merb
+  module Mjs
+    module ApplicationHelper
+      # @param *segments<Array[#to_s]> Path segments to append.
+      #
+      # @return <String> 
+      #  A path relative to the public directory, with added segments.
+      def image_path(*segments)
+        public_path_for(:image, *segments)
+      end
+      
+      # @param *segments<Array[#to_s]> Path segments to append.
+      #
+      # @return <String> 
+      #  A path relative to the public directory, with added segments.
+      def javascript_path(*segments)
+        public_path_for(:javascript, *segments)
+      end
+      
+      # @param *segments<Array[#to_s]> Path segments to append.
+      #
+      # @return <String> 
+      #  A path relative to the public directory, with added segments.
+      def stylesheet_path(*segments)
+        public_path_for(:stylesheet, *segments)
+      end
+      
+      # Construct a path relative to the public directory
+      # 
+      # @param <Symbol> The type of component.
+      # @param *segments<Array[#to_s]> Path segments to append.
+      #
+      # @return <String> 
+      #  A path relative to the public directory, with added segments.
+      def public_path_for(type, *segments)
+        ::Mjs.public_path_for(type, *segments)
+      end
+      
+      # Construct an app-level path.
+      # 
+      # @param <Symbol> The type of component.
+      # @param *segments<Array[#to_s]> Path segments to append.
+      #
+      # @return <String> 
+      #  A path within the host application, with added segments.
+      def app_path_for(type, *segments)
+        ::Mjs.app_path_for(type, *segments)
+      end
+      
+      # Construct a slice-level path.
+      # 
+      # @param <Symbol> The type of component.
+      # @param *segments<Array[#to_s]> Path segments to append.
+      #
+      # @return <String> 
+      #  A path within the slice source (Gem), with added segments.
+      def slice_path_for(type, *segments)
+        ::Mjs.slice_path_for(type, *segments)
+      end
+      
+    end
+  end
+end

data/app/views/layout/mjs.html.erb

@@ -0,0 +1,16 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>Fresh Mjs Slice</title>
+    <link href="<%= public_path_for :stylesheet, 'master.css' %>" type="text/css" charset="utf-8" rel="stylesheet" media="all" />
+    <script src="<%= public_path_for :javascript, 'master.js' %>" type="text/javascript" charset="utf-8"></script>
+  </head>
+  <!-- you can override this layout at slices/mjs/app/views/layout/mjs.html.erb -->
+  <body class="mjs-slice">
+  <div id="container">
+	  <h1>Mjs Slice</h1>
+    <div id="main"><%= catch_content :for_layout %></div>
+  </div>
+  </body>
+</html>

data/app/views/main/index.html.erb

@@ -0,0 +1 @@
+<strong><%= slice.description %></strong> (v. <%= slice.version %>)

data/lib/mjs.rb

@@ -0,0 +1,86 @@
+if defined?(Merb::Plugins)
+
+  $:.unshift File.dirname(__FILE__)
+
+  dependency 'merb-slices', :immediate => true
+  Merb::Plugins.add_rakefiles "mjs/merbtasks", "mjs/slicetasks", "mjs/spectasks"
+
+  # Register the Slice for the current host application
+  Merb::Slices::register(__FILE__)
+  
+  # Slice configuration - set this in a before_app_loads callback.
+  # By default a Slice uses its own layout, so you can swicht to 
+  # the main application layout or no layout at all if needed.
+  # 
+  # Configuration options:
+  # :layout - the layout to use; defaults to :mjs
+  # :mirror - which path component types to use on copy operations; defaults to all
+  Merb::Slices::config[:mjs][:layout] ||= :mjs
+  
+  # All Slice code is expected to be namespaced inside a module
+  module Mjs
+    
+    # Slice metadata
+    self.description = "A slice for the Merb framework that offers Ajax actions like RJS with jQuery"
+    self.version = "0.0.1"
+    self.author = "maiha"
+    
+    # Stub classes loaded hook - runs before LoadClasses BootLoader
+    # right after a slice's classes have been loaded internally.
+    def self.loaded
+      require 'mjs/helper'
+    end
+    
+    # Initialization hook - runs before AfterAppLoads BootLoader
+    def self.init
+      Merb::Controller.send(:include, ::Mjs::Helper)
+    end
+    
+    # Activation hook - runs after AfterAppLoads BootLoader
+    def self.activate
+    end
+    
+    # Deactivation hook - triggered by Merb::Slices.deactivate(Mjs)
+    def self.deactivate
+    end
+    
+    # Setup routes inside the host application
+    #
+    # @param scope<Merb::Router::Behaviour>
+    #  Routes will be added within this scope (namespace). In fact, any 
+    #  router behaviour is a valid namespace, so you can attach
+    #  routes at any level of your router setup.
+    #
+    # @note prefix your named routes with :mjs_
+    #   to avoid potential conflicts with global named routes.
+    def self.setup_router(scope)
+      # example of a named route
+      scope.match('/index(.:format)').to(:controller => 'main', :action => 'index').name(:index)
+      # the slice is mounted at /mjs - note that it comes before default_routes
+      scope.match('/').to(:controller => 'main', :action => 'index').name(:home)
+      # enable slice-level default routes by default
+      scope.default_routes
+    end
+    
+  end
+  
+  # Setup the slice layout for Mjs
+  #
+  # Use Mjs.push_path and Mjs.push_app_path
+  # to set paths to mjs-level and app-level paths. Example:
+  #
+  # Mjs.push_path(:application, Mjs.root)
+  # Mjs.push_app_path(:application, Merb.root / 'slices' / 'mjs')
+  # ...
+  #
+  # Any component path that hasn't been set will default to Mjs.root
+  #
+  # Or just call setup_default_structure! to setup a basic Merb MVC structure.
+  Mjs.setup_default_structure!
+  
+  # Add dependencies for other Mjs classes below. Example:
+  # dependency "mjs/other"
+
+
+  
+end

data/lib/mjs/helper.rb

@@ -0,0 +1,40 @@
+require 'mjs/java_script_context'
+
+module Mjs
+  module Helper
+    def page
+      @page ||= Mjs::JavaScriptContext.new
+    end
+
+    # override! :link_to # for Ajax
+    def link_to(name, url='', opts={})
+      opts[:href]   ||= url
+      if url.is_a?(DataMapper::Resource)
+        record = opts[:href]
+        if record.new_record?
+          opts[:href] = resource(record.class.name.downcase.pluralize.intern, :new)
+        else
+          opts[:href] = resource(record)
+        end
+      end
+
+      opts[:remote] ||= true if opts[:submit]
+      return super unless opts.delete(:remote)
+
+      submit = opts.delete(:submit)
+      target =
+        case submit
+        when Symbol then "$('##{submit} input')"
+        when String then "$('#{submit}')"
+        when NilClass    # GET requst
+        else
+          raise ArgumentError, "link_to :submit expects Symbol or String, but got #{submit.class.name}"
+        end
+
+      ajax = submit ? "$.post('#{opts[:href]}', #{target}.serialize(), null, 'script');" : "$.getScript('#{opts[:href]}')"
+      opts[:onclick] = "#{opts.delete(:onclick)}; #{ajax}; return false;"
+      opts[:href] = '#'
+      %{<a #{ opts.to_xml_attributes }>#{name}</a>}
+    end
+  end
+end

data/lib/mjs/java_script_context.rb

@@ -0,0 +1,478 @@
+require 'mjs/utils'
+
+#
+# This file is almost derived from prototype_helper.rb of RoR
+#
+module Mjs
+        class JavaScriptContext #:nodoc:
+
+          ######################################################################
+          ### define :each method for Rack::Response
+          ### because Merb::Rack::StreamWrapper can't create response body correctly
+          
+          def each(&callback)
+            callback.call(to_s)
+          end
+
+          def initialize
+            @lines = []
+          end
+  
+          def to_s
+            javascript = @lines * $/ 
+          end
+
+          # Returns a element reference by finding it through +id+ in the DOM. This element can then be
+          # used for further method calls. Examples:
+          #
+          #   page['blank_slate']                  # => $('blank_slate');
+          #   page['blank_slate'].show             # => $('blank_slate').show();
+          #   page['blank_slate'].show('first').up # => $('blank_slate').show('first').up();
+          #
+          # You can also pass in a record, which will use ActionController::RecordIdentifier.dom_id to lookup
+          # the correct id:
+          #
+          #   page[@post]     # => $('post_45')
+          #   page[Post.new]  # => $('new_post')
+          def [](id)
+            case id
+            when Symbol
+              JavaScriptElementProxy.new(self, "##{id}")
+            when String, NilClass
+              JavaScriptElementProxy.new(self, id)
+            else
+              raise NotImplementedError, "[MJS] RecordIdentifier.dom_id(id)"
+              JavaScriptElementProxy.new(self, ActionController::RecordIdentifier.dom_id(id))
+            end
+          end
+
+          # Returns an object whose <tt>to_json</tt> evaluates to +code+. Use this to pass a literal JavaScript
+          # expression as an argument to another JavaScriptGenerator method.
+          def literal(code)
+            raise NotImplementedError, "[MJS] ActiveSupport::JSON::Variable.new(code.to_s)"
+            ActiveSupport::JSON::Variable.new(code.to_s)
+          end
+
+          # Returns a collection reference by finding it through a CSS +pattern+ in the DOM. This collection can then be
+          # used for further method calls. Examples:
+          #
+          #   page.select('p')                      # => $$('p');
+          #   page.select('p.welcome b').first      # => $$('p.welcome b').first();
+          #   page.select('p.welcome b').first.hide # => $$('p.welcome b').first().hide();
+          #
+          # You can also use prototype enumerations with the collection.  Observe:
+          #
+          #   # Generates: $$('#items li').each(function(value) { value.hide(); });
+          #   page.select('#items li').each do |value|
+          #     value.hide
+          #   end
+          #
+          # Though you can call the block param anything you want, they are always rendered in the
+          # javascript as 'value, index.'  Other enumerations, like collect() return the last statement:
+          #
+          #   # Generates: var hidden = $$('#items li').collect(function(value, index) { return value.hide(); });
+          #   page.select('#items li').collect('hidden') do |item|
+          #     item.hide
+          #   end
+          #
+          def select(pattern)
+            JavaScriptElementCollectionProxy.new(self, pattern)
+          end
+
+          # Inserts HTML at the specified +position+ relative to the DOM element
+          # identified by the given +id+.
+          #
+          # +position+ may be one of:
+          #
+          # <tt>:top</tt>::    HTML is inserted inside the element, before the
+          #                    element's existing content.
+          # <tt>:bottom</tt>:: HTML is inserted inside the element, after the
+          #                    element's existing content.
+          # <tt>:before</tt>:: HTML is inserted immediately preceding the element.
+          # <tt>:after</tt>::  HTML is inserted immediately following the element.
+          #
+          # +options_for_render+ may be either a string of HTML to insert, or a hash
+          # of options to be passed to ActionView::Base#render.  For example:
+          #
+          #   # Insert the rendered 'navigation' partial just before the DOM
+          #   # element with ID 'content'.
+          #   # Generates: Element.insert("content", { before: "-- Contents of 'navigation' partial --" });
+          #   page.insert_html :before, 'content', :partial => 'navigation'
+          #
+          #   # Add a list item to the bottom of the <ul> with ID 'list'.
+          #   # Generates: Element.insert("list", { bottom: "<li>Last item</li>" });
+          #   page.insert_html :bottom, 'list', '<li>Last item</li>'
+          #
+          def insert_html(position, id, *options_for_render)
+            content = javascript_object_for(render(*options_for_render))
+            record "Element.insert(\"#{id}\", { #{position.to_s.downcase}: #{content} });"
+          end
+
+          # Replaces the inner HTML of the DOM element with the given +id+.
+          #
+          # +options_for_render+ may be either a string of HTML to insert, or a hash
+          # of options to be passed to ActionView::Base#render.  For example:
+          #
+          #   # Replace the HTML of the DOM element having ID 'person-45' with the
+          #   # 'person' partial for the appropriate object.
+          #   # Generates:  Element.update("person-45", "-- Contents of 'person' partial --");
+          #   page.replace_html 'person-45', :partial => 'person', :object => @person
+          #
+          def replace_html(id, *options_for_render)
+            call 'Element.update', id, render(*options_for_render)
+          end
+
+          # Replaces the "outer HTML" (i.e., the entire element, not just its
+          # contents) of the DOM element with the given +id+.
+          #
+          # +options_for_render+ may be either a string of HTML to insert, or a hash
+          # of options to be passed to ActionView::Base#render.  For example:
+          #
+          #   # Replace the DOM element having ID 'person-45' with the
+          #   # 'person' partial for the appropriate object.
+          #   page.replace 'person-45', :partial => 'person', :object => @person
+          #
+          # This allows the same partial that is used for the +insert_html+ to
+          # be also used for the input to +replace+ without resorting to
+          # the use of wrapper elements.
+          #
+          # Examples:
+          #
+          #   <div id="people">
+          #     <%= render :partial => 'person', :collection => @people %>
+          #   </div>
+          #
+          #   # Insert a new person
+          #   #
+          #   # Generates: new Insertion.Bottom({object: "Matz", partial: "person"}, "");
+          #   page.insert_html :bottom, :partial => 'person', :object => @person
+          #
+          #   # Replace an existing person
+          #
+          #   # Generates: Element.replace("person_45", "-- Contents of partial --");
+          #   page.replace 'person_45', :partial => 'person', :object => @person
+          #
+          def replace(id, *options_for_render)
+            call 'Element.replace', id, render(*options_for_render)
+          end
+
+          # Removes the DOM elements with the given +ids+ from the page.
+          #
+          # Example:
+          #
+          #  # Remove a few people
+          #  # Generates: ["person_23", "person_9", "person_2"].each(Element.remove);
+          #  page.remove 'person_23', 'person_9', 'person_2'
+          #
+          def remove(*ids)
+            loop_on_multiple_args 'Element.remove', ids
+          end
+
+          # Shows hidden DOM elements with the given +ids+.
+          #
+          # Example:
+          #
+          #  # Show a few people
+          #  # Generates: ["person_6", "person_13", "person_223"].each(Element.show);
+          #  page.show 'person_6', 'person_13', 'person_223'
+          #
+          def show(*ids)
+            loop_on_multiple_args 'Element.show', ids
+          end
+
+          # Hides the visible DOM elements with the given +ids+.
+          #
+          # Example:
+          #
+          #  # Hide a few people
+          #  # Generates: ["person_29", "person_9", "person_0"].each(Element.hide);
+          #  page.hide 'person_29', 'person_9', 'person_0'
+          #
+          def hide(*ids)
+            loop_on_multiple_args 'Element.hide', ids
+          end
+
+          # Toggles the visibility of the DOM elements with the given +ids+.
+          # Example:
+          #
+          #  # Show a few people
+          #  # Generates: ["person_14", "person_12", "person_23"].each(Element.toggle);
+          #  page.toggle 'person_14', 'person_12', 'person_23'      # Hides the elements
+          #  page.toggle 'person_14', 'person_12', 'person_23'      # Shows the previously hidden elements
+          #
+          def toggle(*ids)
+            loop_on_multiple_args 'Element.toggle', ids
+          end
+
+          # Displays an alert dialog with the given +message+.
+          #
+          # Example:
+          #
+          #   # Generates: alert('This message is from Rails!')
+          #   page.alert('This message is from Rails!')
+          def alert(message)
+            call 'alert', message
+          end
+
+          # Redirects the browser to the given +location+ using JavaScript, in the same form as +url_for+.
+          #
+          # Examples:
+          #
+          #  # Generates: window.location.href = "/mycontroller";
+          #  page.redirect_to(:action => 'index')
+          #
+          #  # Generates: window.location.href = "/account/signup";
+          #  page.redirect_to(:controller => 'account', :action => 'signup')
+          def redirect_to(location)
+            url = location.is_a?(String) ? location : @context.url_for(location)
+            record "window.location.href = #{url.inspect}"
+          end
+
+          # Reloads the browser's current +location+ using JavaScript
+          #
+          # Examples:
+          #
+          #  # Generates: window.location.reload();
+          #  page.reload
+          def reload
+            record 'window.location.reload()'
+          end
+
+          # Calls the JavaScript +function+, optionally with the given +arguments+.
+          #
+          # If a block is given, the block will be passed to a new JavaScriptGenerator;
+          # the resulting JavaScript code will then be wrapped inside <tt>function() { ... }</tt>
+          # and passed as the called function's final argument.
+          #
+          # Examples:
+          #
+          #   # Generates: Element.replace(my_element, "My content to replace with.")
+          #   page.call 'Element.replace', 'my_element', "My content to replace with."
+          #
+          #   # Generates: alert('My message!')
+          #   page.call 'alert', 'My message!'
+          #
+          #   # Generates:
+          #   #     my_method(function() {
+          #   #       $("one").show();
+          #   #       $("two").hide();
+          #   #    });
+          #   page.call(:my_method) do |p|
+          #      p[:one].show
+          #      p[:two].hide
+          #   end
+          def call(function, *arguments, &block)
+            record "#{function}(#{arguments_for_call(arguments, block)})"
+          end
+
+          # Assigns the JavaScript +variable+ the given +value+.
+          #
+          # Examples:
+          #
+          #  # Generates: my_string = "This is mine!";
+          #  page.assign 'my_string', 'This is mine!'
+          #
+          #  # Generates: record_count = 33;
+          #  page.assign 'record_count', 33
+          #
+          #  # Generates: tabulated_total = 47
+          #  page.assign 'tabulated_total', @total_from_cart
+          #
+          def assign(variable, value)
+            record "#{variable} = #{javascript_object_for(value)}"
+          end
+
+          # Writes raw JavaScript to the page.
+          #
+          # Example:
+          #
+          #  page << "alert('JavaScript with Prototype.');"
+          def <<(javascript)
+            @lines << javascript
+          end
+
+          # Executes the content of the block after a delay of +seconds+. Example:
+          #
+          #   # Generates:
+          #   #     setTimeout(function() {
+          #   #     ;
+          #   #     new Effect.Fade("notice",{});
+          #   #     }, 20000);
+          #   page.delay(20) do
+          #     page.visual_effect :fade, 'notice'
+          #   end
+          def delay(seconds = 1)
+            record "setTimeout(function() {\n\n"
+            yield
+            record "}, #{(seconds * 1000).to_i})"
+          end
+
+          # Starts a script.aculo.us visual effect. See
+          # ActionView::Helpers::ScriptaculousHelper for more information.
+          def visual_effect(name, id = nil, options = {})
+            record @context.send(:visual_effect, name, id, options)
+          end
+
+          # Creates a script.aculo.us sortable element. Useful
+          # to recreate sortable elements after items get added
+          # or deleted.
+          # See ActionView::Helpers::ScriptaculousHelper for more information.
+          def sortable(id, options = {})
+            record @context.send(:sortable_element_js, id, options)
+          end
+
+          # Creates a script.aculo.us draggable element.
+          # See ActionView::Helpers::ScriptaculousHelper for more information.
+          def draggable(id, options = {})
+            record @context.send(:draggable_element_js, id, options)
+          end
+
+          # Creates a script.aculo.us drop receiving element.
+          # See ActionView::Helpers::ScriptaculousHelper for more information.
+          def drop_receiving(id, options = {})
+            record @context.send(:drop_receiving_element_js, id, options)
+          end
+
+          private
+            def loop_on_multiple_args(method, ids)
+              record(ids.size>1 ?
+                "#{javascript_object_for(ids)}.each(#{method})" :
+                "#{method}(#{ids.first.to_json})")
+            end
+
+            def page
+              self
+            end
+
+            def record(line)
+              returning line = "#{line.to_s.chomp.gsub(/\;\z/, '')};" do
+                self << line
+              end
+            end
+
+            def render(*options_for_render)
+              old_format = @context && @context.template_format
+              @context.template_format = :html if @context
+              Hash === options_for_render.first ?
+                @context.render(*options_for_render) :
+                  options_for_render.first.to_s
+            ensure
+              @context.template_format = old_format if @context
+            end
+
+            def javascript_object_for(object)
+              object.respond_to?(:to_json) ? object.to_json : object.inspect
+            end
+
+            def arguments_for_call(arguments, block = nil)
+              arguments << block_to_function(block) if block
+              arguments.map { |argument| javascript_object_for(argument) }.join ', '
+            end
+
+            def block_to_function(block)
+              generator = self.class.new(@context, &block)
+              literal("function() { #{generator.to_s} }")
+            end
+
+            def method_missing(method, *arguments)
+              JavaScriptProxy.new(self, Mjs::Utils.camelize(method))
+            end
+        end                       # class JavaScriptGenerator
+
+#    class JavaScriptProxy < ActiveSupport::BasicObject #:nodoc:
+    # [TODO] BlackSlate is not supported yet
+    class JavaScriptProxy
+
+      def initialize(generator, root = nil)
+        @generator = generator
+        @generator << root if root
+      end
+
+      private
+        def method_missing(method, *arguments, &block)
+          if method.to_s =~ /(.*)=$/
+            assign($1, arguments.first)
+          else
+            call("#{Mjs::Utils.camelize(method, :lower)}", *arguments, &block)
+          end
+        end
+
+        def call(function, *arguments, &block)
+          append_to_function_chain!("#{function}(#{@generator.send(:arguments_for_call, arguments, block)})")
+          self
+        end
+
+        def assign(variable, value)
+          append_to_function_chain!("#{variable} = #{@generator.send(:javascript_object_for, value)}")
+        end
+
+        def function_chain
+          @function_chain ||= @generator.instance_variable_get(:@lines)
+        end
+
+        def append_to_function_chain!(call)
+          function_chain[-1].chomp!(';')
+          function_chain[-1] += ".#{call};"
+        end
+    end
+
+    class JavaScriptElementProxy < JavaScriptProxy #:nodoc:
+      def initialize(generator, id)
+        @id = id
+        super(generator, "$(#{id.to_json})")
+      end
+
+      # Allows access of element attributes through +attribute+. Examples:
+      #
+      #   page['foo']['style']                  # => $('foo').style;
+      #   page['foo']['style']['color']         # => $('blank_slate').style.color;
+      #   page['foo']['style']['color'] = 'red' # => $('blank_slate').style.color = 'red';
+      #   page['foo']['style'].color = 'red'    # => $('blank_slate').style.color = 'red';
+      def [](attribute)
+        append_to_function_chain!(attribute)
+        self
+      end
+
+      def []=(variable, value)
+        assign(variable, value)
+      end
+
+      def replace_html(*options_for_render)
+        call 'update', @generator.send(:render, *options_for_render)
+      end
+
+      def replace(*options_for_render)
+        call 'replace', @generator.send(:render, *options_for_render)
+      end
+
+      def reload(options_for_replace = {})
+        replace(options_for_replace.merge({ :partial => @id.to_s }))
+      end
+
+    end
+
+    class JavaScriptVariableProxy < JavaScriptProxy #:nodoc:
+      def initialize(generator, variable)
+        @variable = variable
+        @empty    = true # only record lines if we have to.  gets rid of unnecessary linebreaks
+        super(generator)
+      end
+
+      # The JSON Encoder calls this to check for the +to_json+ method
+      # Since it's a blank slate object, I suppose it responds to anything.
+      def respond_to?(method)
+        true
+      end
+
+      def to_json(options = nil)
+        @variable
+      end
+
+      private
+        def append_to_function_chain!(call)
+          @generator << @variable if @empty
+          @empty = false
+          super
+        end
+    end
+end