opal-browser 0.1.0.beta1 → 0.2.0.beta1

data/opal/browser/dom/document.rb

@@ -11,8 +11,18 @@ class Document < Element
     end
   end
 
-  def window
-    Window.new(`#@native.defaultView`)
+  if Browser.supports? 'Document.view'
+    def window
+      Window.new(`#@native.defaultView`)
+    end
+  elsif Browser.supports? 'Document.window'
+    def window
+      Window.new(`#@native.parentWindow`)
+    end
+  else
+    def window
+      raise NotImplementedError, 'window from document unsupported'
+    end
   end
 
   def create_text(content)
@@ -28,15 +38,11 @@ class Document < Element
       }
     }
 
-    xpath(what).first || css(what).first
+    css(what).first || xpath(what).first
   end
 
   alias at []
 
-  def cookies
-    Cookies.new(@native) if defined?(`#@native.cookie`)
-  end
-
   def document
     self
   end
@@ -45,10 +51,6 @@ class Document < Element
     "#<DOM::Document: #{children.inspect}>"
   end
 
-  def location
-    Location.new(`#@native.location`) if `#@native.location`
-  end
-
   def title
     `#@native.title`
   end

data/opal/browser/dom/element.rb

@@ -1,8 +1,10 @@
 require 'browser/dom/element/position'
 require 'browser/dom/element/offset'
 require 'browser/dom/element/scroll'
+require 'browser/dom/element/size'
 
 require 'browser/dom/element/input'
+require 'browser/dom/element/image'
 
 module Browser; module DOM
 
@@ -13,11 +15,12 @@ class Element < Node
 
   def self.new(node)
     if self == Element
-      case `node.nodeName`.downcase
-      when :input
-        Input.new(node)
+      name = `node.nodeName`.capitalize
 
-      else super
+      if Element.const_defined?(name)
+        Element.const_get(name).new(node)
+      else
+        super
       end
     else
       super
@@ -33,13 +36,23 @@ class Element < Node
   alias_native :id
 
   def add_class(*names)
-    `#@native.className = #{(class_names + names).uniq.join ' '}`
+    classes = class_names + names
+
+    unless classes.empty?
+      `#@native.className = #{classes.uniq.join ' '}`
+    end
 
     self
   end
 
   def remove_class(*names)
-    `#@native.className = #{(class_names - names).join ' '}`
+    classes = class_names - names
+
+    if classes.empty?
+      `#@native.removeAttribute('class')`
+    else
+      `#@native.className = #{classes.join ' '}`
+    end
 
     self
   end
@@ -102,7 +115,23 @@ class Element < Node
   end
 
   def size(*inc)
-    Size.new(`#@native.offsetWidth`, `#@native.offsetHeight`)
+    Size.new(self, *inc)
+  end
+
+  def height
+    size.height
+  end
+
+  def height=(value)
+    size.height = value
+  end
+
+  def width
+    size.width
+  end
+
+  def width=(value)
+    size.width = value
   end
 
   def position
@@ -173,23 +202,53 @@ class Element < Node
     }.flatten.uniq
   end
 
-  def css(path)
-    NodeSet.new(document, Native::Array.new(`#@native.querySelectorAll(path)`))
+  if Browser.supports? 'Query.css'
+    def css(path)
+      %x{
+        try {
+          var result = #@native.querySelectorAll(path);
+
+          return #{NodeSet.new(document,
+            Native::Array.new(`result`))};
+        }
+        catch(e) {
+          return #{NodeSet.new(document)};
+        }
+      }
+    end
+  elsif Browser.loaded? 'Sizzle'
+    def css(path)
+      NodeSet.new(document, `Sizzle(#{path}, #@native)`)
+    end
+  else
+    def css(selector)
+      raise NotImplementedError, 'query by CSS selector unsupported'
+    end
   end
 
-  def xpath(path)
-    result = []
+  if Browser.supports?('Query.xpath') || Browser.loaded?('wicked-good-xpath')
+    if Browser.loaded? 'wicked-good-xpath'
+      `wgxpath.install()`
+    end
 
-    begin
+    def xpath(path)
       %x{
-        var tmp = (#@native.ownerDocument || #@native).evaluate(
-          path, #@native, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+        try {
+          var result = (#@native.ownerDocument || #@native).evaluate(path,
+            #@native, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
 
-        result = #{Native::Array.new(`tmp`, get: :snapshotItem, length: :snapshotLength)};
+          return #{NodeSet.new(document,
+            Native::Array.new(`result`, get: :snapshotItem, length: :snapshotLength))};
+        }
+        catch (e) {
+          return #{NodeSet.new(document)};
+        }
       }
-    rescue; end
-
-    NodeSet.new(document, result)
+    end
+  else
+    def xpath(path)
+      raise NotImplementedError, 'query by XPath unsupported'
+    end
   end
 
   def style(data = nil, &block)
@@ -201,29 +260,41 @@ class Element < Node
       style.replace(data)
     elsif data.is_a?(Enumerable)
       style.assign(data)
-    end
-
-    if block
+    elsif block
       style.apply(&block)
     end
 
     self
   end
 
-  def style!
-    CSS::Declaration.new(`#{window.to_n}.getComputedStyle(#@native, null)`)
+  if Browser.supports? 'CSS.computed'
+    def style!
+      CSS::Declaration.new(`#{window.to_n}.getComputedStyle(#@native, null)`)
+    end
+  elsif Browser.supports? 'CSS.current'
+    def style!
+      CSS::Declaration.new(`#@native.currentStyle`)
+    end
+  else
+    def style!
+      raise NotImplementedError, 'computed style unsupported'
+    end
   end
 
   def data(what)
-    unless defined?(`#@native.$data`)
-      `#@native.$data = {}`
-    end
-
     if Hash === what
+      unless defined?(`#@native.$data`)
+        `#@native.$data = {}`
+      end
+
       what.each {|name, value|
         `#@native.$data[name] = value`
       }
     else
+      return self["data-#{what}"] if self["data-#{what}"]
+
+      return unless defined?(`#@native.$data`)
+
       %x{
         var value = #@native.$data[what];
 
@@ -237,10 +308,37 @@ class Element < Node
     end
   end
 
-  def matches?(selector)
-    `#@native.matches(#{selector})`
+  if Browser.supports? 'Element.matches'
+    def matches?(selector)
+      `#@native.matches(#{selector})`
+    end
+  elsif Browser.supports? 'Element.matches (Opera)'
+    def matches?(selector)
+      `#@native.oMatchesSelector(#{selector})`
+    end
+  elsif Browser.supports? 'Element.matches (Internet Explorer)'
+    def matches?(selector)
+      `#@native.msMatchesSelector(#{selector})`
+    end
+  elsif Browser.supports? 'Element.matches (Firefox)'
+    def matches?(selector)
+      `#@native.mozMatchesSelector(#{selector})`
+    end
+  elsif Browser.supports? 'Element.matches (Chrome)'
+    def matches?(selector)
+      `#@native.webkitMatchesSelector(#{selector})`
+    end
+  elsif Browser.loaded? 'Sizzle'
+    def matches?(selector)
+      `Sizzle.matchesSelector(#@native, #{selector})`
+    end
+  else
+    def matches?(selector)
+      raise NotImplementedError, 'selector matching unsupported'
+    end
   end
 
+  # @abstract
   def window
     document.window
   end

data/opal/browser/dom/element/image.rb

@@ -0,0 +1,23 @@
+module Browser; module DOM; class Element < Node
+
+class Image < Element
+  def complete?
+    `#@native.complete`
+  end
+
+  def cross?
+    `#@native.crossOrigin`
+  end
+
+  def height
+    `#@native.naturalHeight`
+  end
+
+  def width
+    `#@native.naturalWidth`
+  end
+end
+
+Img = Image
+
+end; end; end

data/opal/browser/dom/element/offset.rb

@@ -1,6 +1,8 @@
 module Browser; module DOM; class Element < Node
 
 class Offset
+  attr_reader :element
+
   def initialize(element)
     @element = element
     @native  = element.to_n
@@ -26,18 +28,33 @@ class Offset
     set nil, value
   end
 
-  def get
-    doc  = @element.document
-    root = doc.root.to_n
-    win  = doc.window.to_n
+  if Browser.supports? 'Element.getBoundingClientRect'
+    def get
+      doc  = @element.document
+      root = doc.root.to_n
+      win  = doc.window.to_n
+
+      %x{
+        var box = #@native.getBoundingClientRect(),
+            y   = box.top + (#{win}.pageYOffset || #{root}.scrollTop) - (#{root}.clientTop || 0),
+            x   = box.left + (#{win}.pageXOffset || #{root}.scrollLeft) - (#{root}.clientLeft || 0);
+      }
 
-    %x{
-      var box = #@native.getBoundingClientRect(),
-          y   = box.top + (#{win}.pageYOffset || #{root}.scrollTop) - (#{root}.clientTop || 0),
-          x   = box.left + (#{win}.pageXOffset || #{root}.scrollLeft) - (#{root}.clientLeft || 0);
-    }
+      Browser::Position.new(`x`, `y`)
+    end
+  else
+    def get
+      doc  = document
+      root = doc.root.to_n
+      win  = doc.window.to_n
 
-    Browser::Position.new(`x`, `y`)
+      %x{
+        var y = (#{win}.pageYOffset || #{root}.scrollTop) - (#{root}.clientTop || 0),
+            x = (#{win}.pageXOffset || #{root}.scrollLeft) - (#{root}.clientLeft || 0);
+      }
+
+      Browser::Position.new(`x`, `y`)
+    end
   end
 
   def set(*value)

data/opal/browser/dom/element/scroll.rb

@@ -6,8 +6,38 @@ class Scroll
     @native  = element.to_n
   end
 
-  def position
-    Browser::Position.new(`#@native.scrollLeft`, `#@native.scrollTop`)
+  if Browser.supports? 'Element.scroll'
+    def to(what)
+      x   = what[:x] || self.x
+      y   = what[:y] || self.y
+
+      `#@native.scrollTop  = #{y}`
+      `#@native.scrollLeft = #{x}`
+    end
+
+    def position
+      Browser::Position.new(`#@native.scrollLeft`, `#@native.scrollTop`)
+    end
+  elsif Browser.supports? 'Element.pageOffset'
+    def to(what)
+      x   = what[:x] || self.x
+      y   = what[:y] || self.y
+
+      `#@native.pageYOffset = #{y}`
+      `#@native.pageXOffset = #{x}`
+    end
+
+    def position
+      Position.new(`#@native.pageXOffset`, `#@native.pageYOffset`)
+    end
+  else
+    def to(what)
+      raise NotImplementedError, 'scroll on element unsupported'
+    end
+
+    def position
+      raise NotImplementedError, 'scroll on element unsupported'
+    end
   end
 
   def x
@@ -18,16 +48,6 @@ class Scroll
     position.y
   end
 
-  def to(what)
-    x   = what[:x] || self.x
-    y   = what[:y] || self.y
-
-    `#@native.scrollTop = #{y}`
-    `#@native.scrollLeft = #{x}`
-
-    self
-  end
-
   def height
     `#@native.scrollHeight`
   end

data/opal/browser/dom/element/size.rb

@@ -0,0 +1,29 @@
+module Browser; module DOM; class Element < Node
+
+class Size
+  attr_reader :element
+
+  def initialize(element, *inc)
+    @element = element
+    @native  = element.to_n
+    @include = inc
+  end
+
+  def width
+    `#@native.offsetWidth`
+  end
+
+  def width=(value)
+    @element.style[:width] = value
+  end
+
+  def height
+    `#@native.offsetHeight`
+  end
+
+  def height=(value)
+    @element.style[:height] = value
+  end
+end
+
+end; end; end

data/opal/browser/dom/event.rb

@@ -1,5 +1,4 @@
 require 'browser/dom/event/base'
-
 require 'browser/dom/event/ui'
 require 'browser/dom/event/mouse'
 require 'browser/dom/event/keyboard'
@@ -31,46 +30,15 @@ require 'browser/dom/event/close'
 module Browser; module DOM
 
 class Event
-  def self.names
-    return @names if @names
-
-    @names = Hash.new { |_, k| k }
-    @names.merge!({
-      load:  'DOMContentLoaded',
-      hover: 'mouse:over'
-    })
+  def self.aliases
+    @aliases ||= {
+      'dom:load' => 'DOMContentLoaded',
+      'hover'    => 'mouse:over'
+    }
   end
 
   def self.name_for(name)
-    names[name].gsub(?:, '')
-  end
-
-  def self.classes
-    @classes ||= {
-      Animation         => $$[:AnimationEvent],
-      AudioProcessing   => $$[:AudioProcessingEvent],
-      BeforeUnload      => $$[:BeforeUnloadEvent],
-      Composition       => $$[:CompositionEvent],
-      Clipboard         => $$[:ClipboardEvent],
-      DeviceLight       => $$[:DeviceLightEvent],
-      DeviceMotion      => $$[:DeviceMotionEvent],
-      DeviceOrientation => $$[:DeviceOrientationEvent],
-      DeviceProximity   => $$[:DeviceProximityEvent],
-      Drag              => $$[:DragEvent],
-      Gamepad           => $$[:GamepadEvent],
-      HashChange        => $$[:HashChangeEvent],
-      Progress          => $$[:ProgressEvent],
-      PageTransition    => $$[:PageTransitionEvent],
-      PopState          => $$[:PopStateEvent],
-      Storage           => $$[:StorageEvent],
-      Touch             => $$[:TouchEvent],
-      Sensor            => $$[:SensorEvent],
-      Mouse             => $$[:MouseEvent],
-      Keyboard          => $$[:KeyboardEvent],
-      Focus             => $$[:FocusEvent],
-      Wheel             => $$[:WheelEvent],
-      Custom            => $$[:CustomEvent]
-    }
+    (aliases[name] || name).gsub(?:, '')
   end
 
   def self.class_for(name)
@@ -149,66 +117,95 @@ class Event
       when 'wheel'
         Wheel
 
-      when 'abort', 'afterprint', 'beforeprint', 'cached', 'canplay', 'canplaythrough',
-           'change', 'chargingchange', 'chargingtimechange', 'checking', 'close',
-           'dischargingtimechange', 'DOMContentLoaded', 'downloading', 'durationchange',
-           'emptied', 'ended', 'error', 'fullscreenchange', 'fullscreenerror', 'input',
-           'invalid', 'levelchange', 'loadeddata', 'loadedmetadata', 'noupdate', 'obsolete',
-           'offline', 'online', 'open', 'orientationchange', 'pause', 'pointerlockchange',
-           'pointerlockerror', 'play', 'playing', 'ratechange', 'readystatechange', 'reset',
-           'seeked', 'seeking', 'stalled', 'submit', 'success', 'suspend', 'timeupdate',
-           'updateready', 'visibilitychange', 'volumechange', 'waiting'
+      when 'abort', 'afterprint', 'beforeprint', 'cached', 'canplay',
+           'canplaythrough', 'change', 'chargingchange', 'chargingtimechange',
+           'checking', 'close', 'dischargingtimechange', 'DOMContentLoaded',
+           'downloading', 'durationchange', 'emptied', 'ended', 'error',
+           'fullscreenchange', 'fullscreenerror', 'input', 'invalid',
+           'levelchange', 'loadeddata', 'loadedmetadata', 'noupdate', 'obsolete',
+           'offline', 'online', 'open', 'orientationchange', 'pause',
+           'pointerlockchange', 'pointerlockerror', 'play', 'playing',
+           'ratechange', 'readystatechange', 'reset', 'seeked', 'seeking',
+           'stalled', 'submit', 'success', 'suspend', 'timeupdate', 'updateready',
+           'visibilitychange', 'volumechange', 'waiting'
         Event
 
       else
         Custom
     end
+  end
 
-    if type != Event && type.supported?
-      type
-    else
-      Event
-    end
+  def self.supported?
+    true
   end
 
   def self.create(name, *args, &block)
     name  = name_for(name)
     klass = class_for(name)
 
-    event = if klass == self
-      new(`new window.Event(#{name}, #{Definition.new(&block)})`)
-    else
-      klass.create(name, &block)
-    end
-
+    event = klass.new(klass.construct(name, klass.const_get(:Definition).new(&block)))
     event.arguments = args
 
     event
   end
 
-  def self.new(value, *args)
-    klass, _ = classes.find {|_, constructor|
-      Native.is_a?(value, constructor)
-    }
+  if Browser.supports? 'Event.constructor'
+    def self.construct(name, desc)
+      `new Event(#{name}, #{desc})`
+    end
+  elsif Browser.supports? 'Event.create'
+    def self.construct(name, desc)
+      %x{
+        var event = document.createEvent("HTMLEvents");
+            event.initEvent(name, desc.bubbles, desc.cancelable);
+
+        #{return Native(`event`).merge!(desc)};
+      }
+    end
+  elsif Browser.supports? 'Event.createObject'
+    def self.construct(name, desc)
+      Native(`document.createEventObject()`) \
+        .merge!(desc) \
+        .merge!(`{ type: name }`) \
+        .to_n
+    end
+  else
+    def self.construct(name, desc)
+      Native(desc).merge!(`{ type: name }`).to_n
+    end
+  end
+
+  def self.new(value, callback = nil)
+    return super unless self == Event
 
-    if !klass || klass == self
-      super(value, *args)
+    klass = class_for(callback ? callback.name : `value.type`)
+
+    if klass == Event
+      super
     else
-      klass.new(value, *args)
+      klass.new(value, callback)
     end
   end
 
-  attr_reader :target, :callback
+  attr_reader :callback
+  attr_writer :on
 
-  def initialize(native, callback = nil)
-    super(native)
+  def initialize(event, callback = nil)
+    super(event)
 
-    @target    = Target.convert(`#@native.target`)
-    @callback, = callback # TODO: change this when super is fixed
+    @callback = callback
   end
 
-  def off
-    @callback.off if @callback
+  def name
+    `#@native.type`
+  end
+
+  def on
+    @on || Target.convert(`#@native.currentTarget`)
+  end
+
+  def target
+    Target.convert(`#@native.srcElement || #@native.target`)
   end
 
   def arguments
@@ -221,20 +218,36 @@ class Event
 
   alias_native :bubbles?, :bubbles
   alias_native :cancelable?, :cancelable
-  alias_native :name, :type
   alias_native :data
   alias_native :phase, :eventPhase
   alias_native :at, :timeStamp
 
+  def off
+    @callback.off if @callback
+  end
+
   def stopped?
     `!!#@native.stopped`
   end
 
-  def stop!
+  def stop
     `#@native.stopPropagation()` if defined?(`#@native.stopPropagation`)
-    `#@native.preventDefault()` if defined?(`#@native.preventDefault`)
     `#@native.stopped = true`
   end
+
+  def prevent
+    `#@native.preventDefault()` if defined?(`#@native.preventDefault`)
+    `#@native.prevented = true`
+  end
+
+  def prevented?
+    `!!#@native.prevented`
+  end
+
+  def stop!
+    prevent
+    stop
+  end
 end
 
 end; end