opal-browser 0.2.0 → 0.3.0

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

@@ -1,5 +1,7 @@
 module Browser; module DOM; class Element < Node
 
+# @todo Consider using the new interfaces which allow for optional
+#       smooth transitions.
 class Scroll
   attr_reader :element
 
@@ -7,57 +9,114 @@ class Scroll
   def initialize(element)
     @element = element
     @native  = element.to_n
-  end
 
-  if Browser.supports? 'Element.scroll'
-    def to(*args)
-      if Hash === args.first
-        x = args.first[:x] || self.x
-        y = args.first[:y] || self.y
-      else
-        x, y = args
+    # 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
 
-      `#@native.scrollTop  = #{y}`
-      `#@native.scrollLeft = #{x}`
+  # @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
 
-    def position
-      Browser::Position.new(`#@native.scrollLeft`, `#@native.scrollTop`)
+    set(x, y) if x || y
+
+    self
+  end
+
+  # @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
-  elsif Browser.supports? 'Element.pageOffset'
-    def to(*args)
-      if Hash === args.first
-        x = args.first[:x] || self.x
-        y = args.first[:y] || self.y
-      else
-        x, y = args
-      end
 
-      `#@native.pageYOffset = #{y}`
-      `#@native.pageXOffset = #{x}`
+    set_by(x, y)
+
+    self
+  end
+
+  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
+
+  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
 
     def position
-      Position.new(`#@native.pageXOffset`, `#@native.pageYOffset`)
+      Browser::Position.new(`#@scrolling_native.scrollLeft`, `#@scrolling_native.scrollTop`)
     end
   else
-    # @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
-    def to(*args)
+    private def set(x=nil, y=nil)
       raise NotImplementedError, 'scroll on element unsupported'
     end
 
@@ -81,55 +140,28 @@ class Scroll
   # @!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`
-  end
-
-  # @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)
-    if Hash === args.first
-      x = args.first[:x] || 0
-      y = args.first[:y] || 0
-    else
-      x, y = args
-    end
-
-    `#@native.scrollBy(#{x}, #{y})`
-
-    self
+    `#@scrolling_native.scrollWidth`
   end
 
   if Browser.supports? 'Element.scrollIntoViewIfNeeded'
-    def to(align = true)
-      `#@native.scrollIntoViewIfNeeded(align)`
+    def into_view(align = true)
+      `#@scrolling_native.scrollIntoViewIfNeeded(align)`
     end
   else
-    def to(align = true)
+    # Non-standard. Not supported by modern Firefox. Use {#into_view!}
+    def into_view(align = true)
       raise NotImplementedError
     end
   end
 
-  def to!(align = true)
-    `#@native.scrollIntoView(align)`
+  def into_view!(align = true)
+    `#@scrolling_native.scrollIntoView(align)`
   end
 end
 

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

@@ -1,6 +1,8 @@
 module Browser; module DOM; class Element < Node
 
 class Select < Element
+  def_selector "select"
+
   def value
     %x{
       if (#@native.value == "") {
@@ -12,6 +14,10 @@ class Select < Element
     }
   end
 
+  def value= value
+    `#@native.value = #{value.to_n}`
+  end
+
   def labels
     NodeSet[Native::Array.new(`#@native.labels`)]
   end

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

@@ -29,6 +29,18 @@ class Size
   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

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

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

@@ -1,6 +1,8 @@
 module Browser; module DOM; class Element < Node
 
 class Textarea < Element
+  def_selector "textarea"
+
   def value
     %x{
       if (#@native.value == "") {

data/opal/browser/dom/element.rb

@@ -1,76 +1,152 @@
-require 'browser/dom/element/attributes'
-require 'browser/dom/element/data'
-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/select'
-require 'browser/dom/element/image'
-require 'browser/dom/element/template'
-require 'browser/dom/element/textarea'
+# Requires are moved to the bottom of this file.
 
 module Browser; module DOM
 
 class Element < Node
-  def self.create(*args)
-    $document.create_element(*args)
+  def self.create(*args, &block)
+    if Document === args.first
+      document = args.shift
+    else
+      document = $document
+    end
+
+    if self == Element
+      document.create_element(*args, &block)
+    elsif @tag_name
+      document.create_element(@tag_name, *args, &block)
+    elsif @selector
+      # That's crude, but should cover the most basic cases.
+      # Just in case, you can override it safely. To reiterate:
+      # .create is not to be used inside libraries, those are
+      # expected to use the Document#create_element API.
+      kwargs = {}
+      kwargs = args.pop if Hash === args.last
+      custom_attrs, custom_id, custom_classes = nil, nil, nil
+      tag_name = (@selector.scan(/^[\w-]+/).first || "div").upcase
+      classes = @selector.scan(/\.([\w-]+)/).flatten
+      classes |= custom_classes if custom_classes = kwargs.delete(:classes)
+      id = @selector.scan(/#([\w-]+)/).flatten.first
+      id = custom_id if custom_id = kwargs.delete(:id)
+      attrs = @selector.scan(/\[([\w-]+)=((["'])(.*?)\3|[\w_-]*)\]/).map { |a,b,_,d| [a,d||b] }.to_h
+      attrs = attrs.merge(custom_attrs) if custom_attrs = kwargs.delete(:attrs)
+      document.create_element(tag_name, *args, classes: classes, id: id, attrs: attrs, **kwargs, &block)
+    else
+      raise NotImplementedError
+    end
   end
 
-  def self.new(node)
+  def self.subclasses
+    @subclasses ||= []
+  end
+
+  # Define a selector for subclass dispatch
+  #
+  # Example:
+  # ```
+  # class CustomElement < Browser::DOM::Element
+  #   def_selector "div.hello-world"
+  # end
+  # ```
+  def self.def_selector(selector)
+    Element.subclasses << self
+
+    @selector = selector
+
+    # A special case to speedup dispatch
+    @tag_name = selector.upcase unless selector =~ /[^\w-]/
+  end
+
+  def self.selector
+    @selector
+  end
+
+  def self.tag_name
+    @tag_name
+  end
+
+  def self.new(*args, &block)
+    if args.length == 1 && !block_given? && Opal.native?(args[0])
+      # Use `.new` as a wrapping method.
+      node = args[0]
+    else
+      # Use `.new` as an alias for `.create`.
+      return create(*args, &block)
+    end
+
     if self == Element
-      name = `node.nodeName`.capitalize
+      subclass = Element.subclasses.select do |subclass|
+        Element.native_is?(node, subclass)
+      end.last
 
-      if Element.constants.include?(name)
-        Element.const_get(name).new(node)
+      if subclass
+        subclass.new(node)
       else
-        super
+        super(node)
       end
     else
-      super
+      super(node)
     end
   end
 
   include Event::Target
 
   target {|value|
-    DOM(value) rescue nil
+    begin
+      DOM(value)
+    rescue StandardError, JS::Error
+      nil
+    end
   }
 
+  def self.native_is? (native, klass)
+    if tag_name = klass.tag_name
+      is = `(#{native}.getAttribute("is") || "")`
+      `#{tag_name} === #{is}.toUpperCase() || #{tag_name} === #{native}.nodeName`
+    else
+      Element.native_matches?(native, klass.selector)
+    end
+  end
+
   if Browser.supports? 'Element.matches'
-    def =~(selector)
-      `#@native.matches(#{selector})`
+    def self.native_matches? (native, selector)
+      `#{native}.matches(#{selector})`
     end
   elsif Browser.supports? 'Element.matches (Opera)'
-    def =~(selector)
-      `#@native.oMatchesSelector(#{selector})`
+    def self.native_matches? (native, selector)
+      `#{native}.oMatchesSelector(#{selector})`
     end
   elsif Browser.supports? 'Element.matches (Internet Explorer)'
-    def =~(selector)
-      `#@native.msMatchesSelector(#{selector})`
+    def self.native_matches? (native, selector)
+      `#{native}.msMatchesSelector(#{selector})`
     end
   elsif Browser.supports? 'Element.matches (Firefox)'
-    def =~(selector)
-      `#@native.mozMatchesSelector(#{selector})`
+    def self.native_matches? (native, selector)
+      `#{native}.mozMatchesSelector(#{selector})`
     end
   elsif Browser.supports? 'Element.matches (Chrome)'
-    def =~(selector)
-      `#@native.webkitMatchesSelector(#{selector})`
+    def self.native_matches? (native, selector)
+      `#{native}.webkitMatchesSelector(#{selector})`
     end
   elsif Browser.loaded? 'Sizzle'
-    def =~(selector)
-      `Sizzle.matchesSelector(#@native, #{selector})`
+    def self.native_matches? (native, selector)
+      `Sizzle.matchesSelector(#{native}, #{selector})`
     end
   else
-    # Check whether the element matches the given selector.
-    #
-    # @param selector [String] the CSS selector
-    def =~(selector)
+    def self.native_matches? (native, selector)
       raise NotImplementedError, 'selector matching unsupported'
     end
   end
 
+  # Check whether the element matches the given selector.
+  #
+  # @param selector [String] the CSS selector
+  def =~(selector)
+    Element.native_matches?(@native, selector)
+  end
+
+  # Allow for case expressions
+  alias === =~
+
   # Query for children with the given XPpaths.
   #
   # @param paths [Array<String>] the XPaths to look for
@@ -190,13 +266,13 @@ class Element < Node
   if Browser.supports? 'Query.css'
     def css(path)
       NodeSet[Native::Array.new(`#@native.querySelectorAll(path)`)]
-    rescue
+    rescue StandardError, JS::Error
       NodeSet[]
     end
   elsif Browser.loaded? 'Sizzle'
     def css(path)
       NodeSet[`Sizzle(path, #@native)`]
-    rescue
+    rescue StandardError, JS::Error
       NodeSet[]
     end
   else
@@ -210,6 +286,12 @@ class Element < Node
     end
   end
 
+  # Click the element. it fires the element's click event.
+  def click
+    `#@native.click()`
+    self
+  end
+
   # @overload data()
   #
   #   Return the data for the element.
@@ -271,13 +353,10 @@ class Element < Node
   end
 
   # Set the inner DOM of the element using the {Builder}.
-  def inner_dom(&block)
+  def inner_dom(builder=nil, &block)
     clear
 
-    # FIXME: when block passing is fixed
-    doc = document
-
-    self << Builder.new(doc, self, &block).to_a
+    self << Builder.new(document, builder, &block).to_a
   end
 
   # Set the inner DOM with the given node.
@@ -289,6 +368,16 @@ class Element < Node
     self << node
   end
 
+  # @!attribute inner_html
+  # @return [String] the inner HTML of the element
+  def inner_html
+    `#@native.innerHTML`
+  end
+
+  def inner_html=(value)
+    `#@native.innerHTML = #{value}`
+  end
+
   def inspect
     inspect = name.downcase
 
@@ -300,7 +389,7 @@ class Element < Node
       inspect += '.' + class_names.join('.')
     end
 
-    "#<DOM::Element: #{inspect}>"
+    "#<#{self.class.name.gsub("Browser::","")}: #{inspect}>"
   end
 
   # @!attribute offset
@@ -319,16 +408,22 @@ class Element < Node
     offset.set(*value)
   end
 
+  # @!attribute outer_html
+  # @return [String] the outer HTML of the element
+  def outer_html
+    `#@native.outerHTML`
+  end
+
   # @!attribute [r] position
   # @return [Position] the position of the element
   def position
-    Position.new(self)
+    @position ||= Position.new(self)
   end
 
   # @!attribute [r] scroll
   # @return [Scroll] the scrolling for the element
   def scroll
-    Scroll.new(self)
+    @scroll ||= Scroll.new(self)
   end
 
   # Search for all the children matching the given XPaths or CSS selectors.
@@ -346,6 +441,27 @@ class Element < Node
 
   alias set_attribute []=
 
+  # Creates or accesses the shadow root of this element
+  #
+  # @param open [Boolean] set to false if you want to create a closed
+  #                       shadow root
+  #
+  # @return [ShadowRoot]
+  def shadow (open = true)
+    if root = `#@native.shadowRoot`
+      DOM(root)
+    else
+      DOM(`#@native.attachShadow({mode: #{open ? "open" : "closed"}})`)
+    end
+  end
+
+  # Checks for a presence of a shadow root of this element
+  #
+  # @return [Boolean]
+  def shadow?
+    `!!#@native.shadowRoot`
+  end
+
   # @overload style()
   #
   #   Return the style for the element.
@@ -429,6 +545,18 @@ class Element < Node
     Size.new(self, *inc)
   end
 
+  # Toggle class names of the element.
+  #
+  # @param names [Array<String>] class names to toggle
+  #
+  # @return [self]
+  def toggle_class(*names)
+    to_remove, to_add = names.partition { |name| class_names.include? name }
+
+    add_class(*to_add)
+    remove_class(*to_remove)
+  end
+
   # @!attribute width
   # @return [Integer] the width of the element
   def width
@@ -456,7 +584,7 @@ class Element < Node
            #@native, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)`,
         get:    :snapshotItem,
         length: :snapshotLength)]
-    rescue
+    rescue StandardError, JS::Error
       NodeSet[]
     end
   else
@@ -472,3 +600,20 @@ class Element < Node
 end
 
 end; end
+
+require 'browser/dom/element/attributes'
+require 'browser/dom/element/data'
+require 'browser/dom/element/position'
+require 'browser/dom/element/offset'
+require 'browser/dom/element/scroll'
+require 'browser/dom/element/size'
+
+require 'browser/dom/element/button'
+require 'browser/dom/element/image'
+require 'browser/dom/element/form'
+require 'browser/dom/element/input'
+require 'browser/dom/element/select'
+require 'browser/dom/element/template'
+require 'browser/dom/element/textarea'
+require 'browser/dom/element/iframe'
+require 'browser/dom/element/media'

data/opal/browser/dom/mutation_observer.rb

@@ -9,11 +9,11 @@ class MutationObserver
     Browser.supports? :MutationObserver
   end
 
-  include Native
+  include Native::Wrapper
 
   # Encapsulates a recorded change.
   class Record
-    include Native
+    include Browser::NativeCachedWrapper
 
     # @!attribute [r] type
     # @return [:attributes, :tree, :cdata] the type of the recorded change