opal-browser 0.1.0.beta1 → 0.3.1

data/opal/browser/dom/element.rb

@@ -1,114 +1,398 @@
-require 'browser/dom/element/position'
-require 'browser/dom/element/offset'
-require 'browser/dom/element/scroll'
-
-require 'browser/dom/element/input'
+# Requires are moved to the bottom of this file.
 
 module Browser; module DOM
 
 class Element < Node
-  def self.create(*args)
-    $document.create_element(*args)
-  end
+  def self.create(*args, &block)
+    if Document === args.first
+      document = args.shift
+    else
+      document = $document
+    end
 
-  def self.new(node)
     if self == Element
-      case `node.nodeName`.downcase
-      when :input
-        Input.new(node)
+      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.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
 
-      else super
+    if self == Element
+      subclass = Element.subclasses.select do |subclass|
+        Element.native_is?(node, subclass)
+      end.last
+
+      if subclass
+        subclass.new(node)
+      else
+        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
   }
 
-  alias_native :id
+  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
 
-  def add_class(*names)
-    `#@native.className = #{(class_names + names).uniq.join ' '}`
+  if Browser.supports? 'Element.matches'
+    def self.native_matches? (native, selector)
+      `#{native}.matches(#{selector})`
+    end
+  elsif Browser.supports? 'Element.matches (Opera)'
+    def self.native_matches? (native, selector)
+      `#{native}.oMatchesSelector(#{selector})`
+    end
+  elsif Browser.supports? 'Element.matches (Internet Explorer)'
+    def self.native_matches? (native, selector)
+      `#{native}.msMatchesSelector(#{selector})`
+    end
+  elsif Browser.supports? 'Element.matches (Firefox)'
+    def self.native_matches? (native, selector)
+      `#{native}.mozMatchesSelector(#{selector})`
+    end
+  elsif Browser.supports? 'Element.matches (Chrome)'
+    def self.native_matches? (native, selector)
+      `#{native}.webkitMatchesSelector(#{selector})`
+    end
+  elsif Browser.loaded? 'Sizzle'
+    def self.native_matches? (native, selector)
+      `Sizzle.matchesSelector(#{native}, #{selector})`
+    end
+  else
+    def self.native_matches? (native, selector)
+      raise NotImplementedError, 'selector matching unsupported'
+    end
+  end
 
-    self
+  # Check whether the element matches the given selector.
+  #
+  # @param selector [String] the CSS selector
+  def =~(selector)
+    Element.native_matches?(@native, selector)
   end
 
-  def remove_class(*names)
-    `#@native.className = #{(class_names - names).join ' '}`
+  # Allow for case expressions
+  alias === =~
+
+  # Query for children with the given XPpaths.
+  #
+  # @param paths [Array<String>] the XPaths to look for
+  #
+  # @return [NodeSet]
+  def /(*paths)
+    NodeSet[paths.map { |path| xpath(path) }]
+  end
+
+  # Get the attribute with the given name.
+  #
+  # @param name [String] the attribute name
+  # @param options [Hash] options for the attribute
+  #
+  # @option options [String] :namespace the namespace for the attribute
+  #
+  # @return [String?]
+  def [](name, options = {})
+    attributes.get(name, options)
+  end
+
+  # Set the attribute with the given name and value.
+  #
+  # @param name [String] the attribute name
+  # @param value [Object] the attribute value
+  # @param options [Hash] the options for the attribute
+  #
+  # @option options [String] :namespace the namespace for the attribute
+  def []=(name, value, options = {})
+    attributes.set(name, value, options)
+  end
+
+  # Add class names to the element.
+  #
+  # @param names [Array<String>] class names to add
+  #
+  # @return [self]
+  def add_class(*names)
+    classes = class_names + names
+
+    unless classes.empty?
+      `#@native.className = #{classes.uniq.join ' '}`
+    end
 
     self
   end
 
-  alias_native :class_name, :className
+  # Get the first node that matches the given CSS selector or XPath.
+  #
+  # @param path_or_selector [String] an XPath or CSS selector
+  #
+  # @return [Node?]
+  def at(path_or_selector)
+    xpath(path_or_selector).first || css(path_or_selector).first
+  end
 
-  def class_names
-    `#@native.className`.split(/\s+/).reject(&:empty?)
+  # Get the first node matching the given CSS selectors.
+  #
+  # @param rules [Array<String>] the CSS selectors to match with
+  #
+  # @return [Node?]
+  def at_css(*rules)
+    result = nil
+
+    rules.each {|rule|
+      if result = css(rule).first
+        break
+      end
+    }
+
+    result
   end
 
-  alias attribute attr
+  # Get the first node matching the given XPath.
+  #
+  # @param paths [Array<String>] the XPath to match with
+  #
+  # @return [Node?]
+  def at_xpath(*paths)
+    result = nil
 
-  def attribute_nodes
-    Native::Array.new(`#@native.attributes`, get: :item) { |e| DOM(e) }
+    paths.each {|path|
+      if result = xpath(path).first
+        break
+      end
+    }
+
+    result
   end
 
+  alias attr []
+
+  alias attribute []
+
+  # @!attribute [r] attributes
+  # @return [Attributes] the attributes for the element
   def attributes(options = {})
     Attributes.new(self, options)
   end
 
-  def get(name, options = {})
-    if namespace = options[:namespace]
-      `#@native.getAttributeNS(#{namespace.to_s}, #{name.to_s}) || nil`
-    else
-      `#@native.getAttribute(#{name.to_s}) || nil`
+  # @!attribute [r] attribute_nodes
+  # @return [NodeSet] the attribute nodes for the element
+  def attribute_nodes
+    NodeSet[Native::Array.new(`#@native.attributes`, get: :item)]
+  end
+
+  # @!attribute [r] class_name
+  # @return [String] all the element class names
+  alias_native :class_name, :className
+
+  # @!attribute [r] class_names
+  # @return [Array<String>] all the element class names
+  def class_names
+    `#@native.className`.split(/\s+/).reject(&:empty?)
+  end
+
+  if Browser.supports? 'Query.css'
+    def css(path)
+      NodeSet[Native::Array.new(`#@native.querySelectorAll(path)`)]
+    rescue StandardError, JS::Error
+      NodeSet[]
+    end
+  elsif Browser.loaded? 'Sizzle'
+    def css(path)
+      NodeSet[`Sizzle(path, #@native)`]
+    rescue StandardError, JS::Error
+      NodeSet[]
     end
+  else
+    # Query for children matching the given CSS selector.
+    #
+    # @param selector [String] the CSS selector
+    #
+    # @return [NodeSet]
+    def css(selector)
+      raise NotImplementedError, 'query by CSS selector unsupported'
+    end
+  end
+
+  # Click the element. it fires the element's click event.
+  def click
+    `#@native.click()`
+    self
   end
 
-  def set(name, value, options = {})
-    if namespace = options[:namespace]
-      `#@native.setAttributeNS(#{namespace.to_s}, #{name.to_s}, #{value})`
+  # @overload data()
+  #
+  #   Return the data for the element.
+  #
+  #   @return [Data]
+  #
+  # @overload data(hash)
+  #
+  #   Set data on the element.
+  #
+  #   @param hash [Hash] the data to set
+  #
+  #   @return [self]
+  def data(value = nil)
+    data = Data.new(self)
+
+    return data unless value
+
+    if Hash === value
+      data.assign(value)
     else
-      `#@native.setAttribute(#{name.to_s}, #{value.to_s})`
+      raise ArgumentError, 'unknown data type'
     end
+
+    self
   end
 
-  alias [] get
-  alias []= set
+  alias get_attribute []
 
-  alias attr get
-  alias attribute get
+  alias get []
 
-  alias get_attribute get
-  alias set_attribute set
+  # @!attribute height
+  # @return [Integer] the height of the element
+  def height
+    size.height
+  end
 
-  def key?(name)
-    !!self[name]
+  def height=(value)
+    size.height = value
   end
 
-  def keys
-    attributes_nodesmap(&:name)
+  # @!attribute id
+  # @return [String?] the ID of the element
+  def id
+    %x{
+      var id = #@native.id;
+
+      if (id === "") {
+        return nil;
+      }
+      else {
+        return id;
+      }
+    }
   end
 
-  def values
-    attribute_nodes.map(&:value)
+  def id=(value)
+    `#@native.id = #{value.to_s}`
   end
 
-  def remove_attribute(name)
-    `#@native.removeAttribute(name)`
+  # Set the inner DOM of the element using the {Builder}.
+  def inner_dom(builder=nil, &block)
+    self.inner_dom = Builder.new(document, builder, &block).to_a
+    self
   end
 
-  def size(*inc)
-    Size.new(`#@native.offsetWidth`, `#@native.offsetHeight`)
+  # Set the inner DOM with the given node.
+  #
+  # (see #append_child)
+  def inner_dom=(node)
+    clear
+
+    self << node
   end
 
-  def position
-    Position.new(self)
+  # @!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
+
+    if id
+      inspect += '.' + id + '!'
+    end
+
+    unless class_names.empty?
+      inspect += '.' + class_names.join('.')
+    end
+
+    "#<#{self.class.name.gsub("Browser::","")}: #{inspect}>"
   end
 
+  # @!attribute offset
+  # @return [Offset] the offset of the element
   def offset(*values)
     off = Offset.new(self)
 
@@ -123,168 +407,212 @@ class Element < Node
     offset.set(*value)
   end
 
-  def scroll
-    Scroll.new(self)
-  end
-
-  def inner_dom(&block)
-    # FIXME: when block passing is fixed
-    doc = document
-    clear; Builder.new(doc, self, &block)
-
-    self
-  end
-
-  def inner_dom=(node)
-    clear; self << node
-  end
-
-  def /(*paths)
-    paths.map { |path| xpath(path) }.flatten.uniq
-  end
-
-  def at(path)
-    xpath(path).first || css(path).first
+  # @!attribute outer_html
+  # @return [String] the outer HTML of the element
+  def outer_html
+    `#@native.outerHTML`
   end
 
-  def at_css(*rules)
-    rules.each {|rule|
-      found = css(rule).first
-
-      return found if found
-    }
-
-    nil
+  # @!attribute [r] position
+  # @return [Position] the position of the element
+  def position
+    @position ||= Position.new(self)
   end
 
-  def at_xpath(*paths)
-    paths.each {|path|
-      found = xpath(path).first
-
-      return found if found
-    }
-
-    nil
+  # @!attribute [r] scroll
+  # @return [Scroll] the scrolling for the element
+  def scroll
+    @scroll ||= Scroll.new(self)
   end
 
+  # Search for all the children matching the given XPaths or CSS selectors.
+  #
+  # @param selectors [Array<String>] mixed list of XPaths and CSS selectors
+  #
+  # @return [NodeSet]
   def search(*selectors)
-    NodeSet.new document, selectors.map {|selector|
+    NodeSet.new selectors.map {|selector|
       xpath(selector).to_a.concat(css(selector).to_a)
     }.flatten.uniq
   end
 
-  def css(path)
-    NodeSet.new(document, Native::Array.new(`#@native.querySelectorAll(path)`))
-  end
-
-  def xpath(path)
-    result = []
-
-    begin
-      %x{
-        var tmp = (#@native.ownerDocument || #@native).evaluate(
-          path, #@native, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+  alias set []=
 
-        result = #{Native::Array.new(`tmp`, get: :snapshotItem, length: :snapshotLength)};
-      }
-    rescue; end
+  alias set_attribute []=
 
-    NodeSet.new(document, result)
+  # 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.
+  #
+  #   @return [CSS::Declaration]
+  #
+  # @overload style(data)
+  #
+  #   Set the CSS style as string or set of values.
+  #
+  #   @param data [String, Hash] the new style
+  #
+  #   @return [self]
+  #
+  # @overload style(&block)
+  #
+  #   Set the CSS style from a CSS builder DSL.
+  #
+  #   @return [self]
   def style(data = nil, &block)
     style = CSS::Declaration.new(`#@native.style`)
 
     return style unless data || block
 
-    if data.is_a?(String)
+    if String === data
       style.replace(data)
-    elsif data.is_a?(Enumerable)
+    elsif Hash === data
       style.assign(data)
-    end
-
-    if block
+    elsif block
       style.apply(&block)
+    else
+      raise ArgumentError, 'unknown data type'
     end
 
     self
   end
 
-  def style!
-    CSS::Declaration.new(`#{window.to_n}.getComputedStyle(#@native, null)`)
-  end
-
-  def data(what)
-    unless defined?(`#@native.$data`)
-      `#@native.$data = {}`
+  if Browser.supports? 'CSS.computed'
+    def style!
+      CSS::Declaration.new(`#{window.to_n}.getComputedStyle(#@native, null)`)
     end
-
-    if Hash === what
-      what.each {|name, value|
-        `#@native.$data[name] = value`
-      }
-    else
-      %x{
-        var value = #@native.$data[what];
-
-        if (value === undefined) {
-          return nil;
-        }
-        else {
-          return value;
-        }
-      }
+  elsif Browser.supports? 'CSS.current'
+    def style!
+      CSS::Declaration.new(`#@native.currentStyle`)
+    end
+  else
+    # @!attribute [r] style!
+    # @return [CSS::Declaration] get the computed style for the element
+    def style!
+      raise NotImplementedError, 'computed style unsupported'
     end
   end
 
-  def matches?(selector)
-    `#@native.matches(#{selector})`
+  # Remove an attribute from the element.
+  #
+  # @param name [String] the attribute name
+  def remove_attribute(name)
+    `#@native.removeAttribute(name)`
   end
 
-  def window
-    document.window
-  end
+  # Remove class names from the element.
+  #
+  # @param names [Array<String>] class names to remove
+  #
+  # @return [self]
+  def remove_class(*names)
+    classes = class_names - names
 
-  def inspect
-    "#<DOM::Element: #{name}>"
+    if classes.empty?
+      `#@native.removeAttribute('class')`
+    else
+      `#@native.className = #{classes.join ' '}`
+    end
+
+    self
   end
 
-  class Attributes
-    include Enumerable
+  # @!attribute [r] size
+  # @return [Size] the size of the element
+  def size(*inc)
+    Size.new(self, *inc)
+  end
 
-    attr_reader :namespace
+  # 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 }
 
-    def initialize(element, options)
-      @element   = element
-      @namespace = options[:namespace]
-    end
+    add_class(*to_add)
+    remove_class(*to_remove)
+  end
 
-    def each(&block)
-      return enum_for :each unless block_given?
+  # @!attribute width
+  # @return [Integer] the width of the element
+  def width
+    size.width
+  end
 
-      @element.attribute_nodes.each {|attr|
-        yield attr.name, attr.value
-      }
+  def width=(value)
+    size.width = value
+  end
 
-      self
-    end
+  # @!attribute [r] window
+  # @return [Window] the window for the element
+  def window
+    document.window
+  end
 
-    def [](name)
-      @element.get_attribute(name, namespace: @namespace)
+  if Browser.supports?('Query.xpath') || Browser.loaded?('wicked-good-xpath')
+    if Browser.loaded? 'wicked-good-xpath'
+      `wgxpath.install()`
     end
 
-    def []=(name, value)
-      @element.set_attribute(name, value, namespace: @namespace)
+    def xpath(path)
+      NodeSet[Native::Array.new(
+        `(#@native.ownerDocument || #@native).evaluate(path,
+           #@native, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)`,
+        get:    :snapshotItem,
+        length: :snapshotLength)]
+    rescue StandardError, JS::Error
+      NodeSet[]
     end
-
-    def merge!(hash)
-      hash.each {|name, value|
-        self[name] = value
-      }
-
-      self
+  else
+    # Query for children matching the given XPath.
+    #
+    # @param path [String] the XPath
+    #
+    # @return [NodeSet]
+    def xpath(path)
+      raise NotImplementedError, 'query by XPath unsupported'
     end
   end
 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'