opal-browser 0.1.0.beta1 → 0.3.1

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

@@ -0,0 +1,47 @@
+module Browser; module DOM
+
+class Element < Node
+  # @!attribute editable
+  # @return [Boolean?] the value of contentEditable for this element
+  def editable
+    case `#@native.contentEditable`
+    when "true"
+      true
+    when "false"
+      false
+    when "inherit"
+      nil
+    end
+  end
+
+  def editable=(value)
+    value = case value
+    when true
+      "true"
+    when false
+      "false"
+    when nil
+      "inherit"
+    end
+    `#@native.contentEditable = #{value}`
+  end
+
+  def editable?
+    `#@native.isContentEditable`
+  end
+
+  # Execute a contentEditable command
+  def edit(command, value=nil)
+    command = command.gsub(/_./) { |i| i[1].upcase }
+    
+    focus
+
+    if value
+      `#{document}.native.execCommand(#{command}, false, #{value})`
+    else
+      `#{document}.native.execCommand(#{command}, false)`
+    end
+  end
+end
+
+end; end

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

@@ -0,0 +1,38 @@
+module Browser; module DOM; class Element < Node
+
+class Form < Element
+  def_selector "form"
+
+  # Capture the content of this form to a new {FormData} object,
+  #
+  # @return [FormData]
+  def form_data
+    FormData.create(self)
+  end
+
+  # Submit a form. This will fire a submit event.
+  def submit
+    `#@native.submit()`
+  end
+
+  # Reset a form. This will fire a reset event.
+  def reset
+    `#@native.reset()`
+  end
+
+  alias_native :action
+  alias_native :action=
+  alias_native :method
+  alias_native :method=
+  alias_native :target
+  alias_native :target=
+  alias_native :encoding
+  alias_native :encoding=
+
+  # Return a NodeSet containing all form controls belonging to this form element.
+  def controls
+    NodeSet[Native::Array.new(`#@native.elements`)]
+  end
+end
+
+end; end; end

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

@@ -0,0 +1,37 @@
+module Browser; module DOM; class Element < Node
+
+class Iframe < Element
+  def_selector "iframe"
+
+  # @!attribute src
+  # @return [String] the URL of the page to embed
+  alias_native :src
+  alias_native :src=
+
+  # @!attribute [r] content_window
+  # @return [Window] window of content of this iframe
+  def content_window
+    Browser::Window.new(`#@native.contentWindow`)
+  end
+
+  # @!attribute [r] content_document
+  # @return [Document] document of content of this iframe 
+  def content_document
+    DOM(`#@native.contentDocument || #@native.contentWindow.document`)
+  end
+
+  # Send a message to the iframe content's window.
+  #
+  # @param message [String] the message
+  # @param options [Hash] optional `to: target`
+  def send(message, options={})
+    content_window.send(message, options)
+  end
+end
+
+# Object is not an iframe, but acts the same.
+class Object < Iframe
+  def_selector "object"
+end
+
+end; end; end

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

@@ -0,0 +1,25 @@
+module Browser; module DOM; class Element < Node
+
+class Image < Element
+  def_selector "img"
+
+  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/input.rb

@@ -1,17 +1,64 @@
 module Browser; module DOM; class Element < Node
 
 class Input < Element
+  def_selector "input"
+
   def value
-    `#@native.value`
+    %x{
+      if (#@native.value == "") {
+        return nil;
+      }
+      else {
+        return #@native.value;
+      }
+    }
   end
 
   def value=(value)
     `#@native.value = #{value}`
   end
 
+  def name_
+    `#@native.name`
+  end
+
+  def type
+    `#@native.type`
+  end
+
+  def checked?
+    `#@native.checked`
+  end
+
+  def check!
+    `#@native.checked = 'checked'`
+  end
+
+  def uncheck!
+    `#@native.checked = ''`
+  end
+
+  def enabled?
+    `#@native.enabled`
+  end
+
+  def disable!
+    `#@native.disabled = 'disabled'`
+  end
+
+  def enable!
+    `#@native.disabled = ''`
+  end
+
   def clear
     `#@native.value = ''`
   end
+
+  # @!attribute [r] files
+  # @return [Array<File>] list of files attached to this {Input}
+  def files
+    Native::Array.new(`#@native.files`).map { |f| File.new(f.to_n) }
+  end
 end
 
 end; end; end

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

@@ -0,0 +1,17 @@
+module Browser; module DOM; class Element < Node
+
+class Media < Element
+  def play
+    `#@native.play()`
+  end
+end
+
+class Video < Media
+  def_selector "video"
+end
+
+class Audio < Media
+  def_selector "audio"
+end
+
+end; end; end

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

@@ -1,6 +1,9 @@
 module Browser; module DOM; class Element < Node
 
 class Offset
+  attr_reader :element
+
+  # @private
   def initialize(element)
     @element = element
     @native  = element.to_n
@@ -10,6 +13,8 @@ class Offset
     DOM(`#@native.offsetParent || #{@element.document.root.to_n}`)
   end
 
+  # @!attribute x
+  # @return [Integer]
   def x
     get.x
   end
@@ -18,6 +23,8 @@ class Offset
     set value, nil
   end
 
+  # @!attribute y
+  # @return [Integer]
   def y
     get.y
   end
@@ -26,18 +33,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/position.rb

@@ -1,11 +1,15 @@
 module Browser; module DOM; class Element < Node
 
 class Position
+  attr_reader :element
+
+  # @private
   def initialize(element)
     @element = element
     @native  = element.to_n
   end
 
+  # @private
   def get
     offset        = @element.offset
     position      = offset.get
@@ -21,14 +25,19 @@ class Position
       parent_offset.y += parent.style['border-left-width'].to_i
     end
 
-    Browser::Position.new(position.x - parent_offset.x - @element.style['margin-left'].to_i,
-                          position.y - parent_offset.y - @element.style['margin-top'].to_i)
+    Browser::Position.new(
+      position.x - parent_offset.x - @element.style['margin-left'].to_i,
+      position.y - parent_offset.y - @element.style['margin-top'].to_i)
   end
 
+  # @!attribute [r] x
+  # @return [Integer] the position of the element on the x axis
   def x
     get.x
   end
 
+  # @!attribute [r] y
+  # @return [Integer] the position of the element on the y axis
   def y
     get.y
   end

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

@@ -1,48 +1,167 @@
 module Browser; module DOM; class Element < Node
 
+# @todo Consider using the new interfaces which allow for optional
+#       smooth transitions.
 class Scroll
+  attr_reader :element
+
+  # @private
   def initialize(element)
     @element = element
     @native  = element.to_n
+
+    # Portable support for Window#scroll and Document#scroll
+    @scrolling_native = @native
+    if [Document, Window].include?(@element.class)
+      # If we are a window, let's become a document first.
+      if defined? `#@scrolling_native.document`
+        @scrolling_native = `#@scrolling_native.document`
+      end
+      # There were slight disagreements in the past which element
+      # should we handle.
+      if defined? `#@scrolling_native.documentElement.scrollTop`
+        @scrolling_native = `#@scrolling_native.documentElement`
+      elsif defined? `#@scrolling_native.body.scrollTop`
+        @scrolling_native = `#@scrolling_native.body`
+      end
+    end
   end
 
-  def position
-    Browser::Position.new(`#@native.scrollLeft`, `#@native.scrollTop`)
+  # @overload to(x, y)
+  #
+  #   Scroll to the given x and y.
+  #
+  #   @param x [Integer] scroll to x on the x axis
+  #   @param y [Integer] scroll to y on the y axis
+  #
+  # @overload to(hash)
+  #
+  #   Scroll to the given x and y.
+  #
+  #   @param hash [Hash] the descriptor
+  #
+  #   @option hash [Integer] :x scroll to x on the x axis
+  #   @option hash [Integer] :y scroll to y on the y axis
+  #
+  # @overload to(symbol)
+  #
+  #   Scroll to :top or to :bottom
+  #
+  #   @param symbol [Symbol] either :top or :bottom
+  def to(*args)
+    x, y = nil, nil
+    case args.first
+    when Hash
+      x = args.first[:x]
+      y = args.first[:y]
+    when :top
+      y = 0
+    when :bottom
+      y = 99999999
+    else
+      x, y = args
+    end
+
+    set(x, y) if x || y
+
+    self
   end
 
-  def x
-    position.x
+  # @overload by(x, y)
+  #
+  #   Scroll by the given x and y.
+  #
+  #   @param x [Integer] scroll by x on the x axis
+  #   @param y [Integer] scroll by y on the y axis
+  #
+  # @overload by(hash)
+  #
+  #   Scroll by the given x and y.
+  #
+  #   @param hash [Hash] the descriptor
+  #
+  #   @option hash [Integer] :x scroll by x on the x axis
+  #   @option hash [Integer] :y scroll by y on the y axis
+  def by(*args)
+    case args.first
+    when Hash
+      x = args.first[:x] || 0
+      y = args.first[:y] || 0
+    else
+      x, y = args
+    end
+
+    set_by(x, y)
+
+    self
   end
 
-  def y
-    position.y
+  if Browser.supports? 'Element.scrollBy'
+    private def set_by(x, y)
+      `#@scrolling_native.scrollBy(#{x}, #{y})`
+    end
+  else
+    private def set_by(x, y)
+      set(self.x + x, self.y + y)
+    end
   end
 
-  def to(what)
-    x   = what[:x] || self.x
-    y   = what[:y] || self.y
+  if Browser.supports? 'Element.scroll'
+    private def set(x=nil, y=nil)
+      `#@scrolling_native.scrollTop  = #{y}` if y
+      `#@scrolling_native.scrollLeft = #{x}` if x
+    end
 
-    `#@native.scrollTop = #{y}`
-    `#@native.scrollLeft = #{x}`
+    def position
+      Browser::Position.new(`#@scrolling_native.scrollLeft`, `#@scrolling_native.scrollTop`)
+    end
+  else
+    private def set(x=nil, y=nil)
+      raise NotImplementedError, 'scroll on element unsupported'
+    end
 
-    self
+    def position
+      raise NotImplementedError, 'scroll on element unsupported'
+    end
+  end
+
+  # @!attribute [r] x
+  # @return [Integer] the scroll position on the x axis
+  def x
+    position.x
+  end
+
+  # @!attribute [r] y
+  # @return [Integer] the scroll position on the y axis
+  def y
+    position.y
   end
 
+  # @!attribute [r] height
+  # @return [Integer] the height of the scroll
   def height
-    `#@native.scrollHeight`
+    `#@scrolling_native.scrollHeight`
   end
 
+  # @!attribute [r] width
+  # @return [Integer] the width of the scroll
   def width
-    `#@native.scrollWidth`
+    `#@scrolling_native.scrollWidth`
   end
 
-  def by(what)
-    x = what[:x] || 0
-    y = what[:y] || 0
-
-    `#@native.scrollBy(#{x}, #{y})`
+  if Browser.supports? 'Element.scrollIntoViewIfNeeded'
+    def into_view(align = true)
+      `#@scrolling_native.scrollIntoViewIfNeeded(align)`
+    end
+  else
+    # Non-standard. Not supported by modern Firefox. Use {#into_view!}
+    def into_view(align = true)
+      raise NotImplementedError
+    end
+  end
 
-    self
+  def into_view!(align = true)
+    `#@scrolling_native.scrollIntoView(align)`
   end
 end
 

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

@@ -0,0 +1,42 @@
+module Browser; module DOM; class Element < Node
+
+class Select < Element
+  def_selector "select"
+
+  def value
+    %x{
+      if (#@native.value == "") {
+        return nil;
+      }
+      else {
+        return #@native.value;
+      }
+    }
+  end
+
+  def value= value
+    `#@native.value = #{value.to_n}`
+  end
+
+  def labels
+    NodeSet[Native::Array.new(`#@native.labels`)]
+  end
+
+  def options
+    NodeSet[Native::Array.new(`#@native.options`)]
+  end
+
+  def option
+    DOM(`#@native.options[#@native.selectedIndex]`)
+  end
+
+  def index
+    `#@native.selectedIndex`
+  end
+
+  alias_native :multiple?, :multiple
+  alias_native :required?, :required
+  alias_native :length
+end
+
+end; end; end

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

@@ -0,0 +1,46 @@
+module Browser; module DOM; class Element < Node
+
+class Size
+  attr_reader :element
+
+  # @private
+  def initialize(element, *inc)
+    @element = element
+    @native  = element.to_n
+    @include = inc
+  end
+
+  # @!attribute width
+  # @return [Integer] the element width
+  def width
+    `#@native.offsetWidth`
+  end
+
+  def width=(value)
+    @element.style[:width] = value
+  end
+
+  # @!attribute height
+  # @return [Integer] the element height
+  def height
+    `#@native.offsetHeight`
+  end
+
+  def height=(value)
+    @element.style[:height] = value
+  end
+
+  # @!attribute client_width
+  # @return [Integer] the content-box width of an element
+  def client_width
+    `#@native.clientWidth`
+  end
+
+  # @!attribute client_height
+  # @return [Integer] the content-box height of an element
+  def client_height
+    `#@native.clientHeight`
+  end
+end
+
+end; end; end

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

@@ -0,0 +1,11 @@
+module Browser; module DOM; class Element < Node
+
+class Template < Element
+  def_selector "template"
+
+  def content
+    DOM(`#@native.content`)
+  end
+end
+
+end; end; end

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

@@ -0,0 +1,26 @@
+module Browser; module DOM; class Element < Node
+
+class Textarea < Element
+  def_selector "textarea"
+
+  def value
+    %x{
+      if (#@native.value == "") {
+        return nil;
+      }
+      else {
+        return #@native.value;
+      }
+    }
+  end
+
+  def value=(value)
+    `#@native.value = #{value}`
+  end
+
+  def clear
+    `#@native.value = ''`
+  end
+end
+
+end; end; end