opal-browser 0.2.0.beta1 → 0.3.2

data/opal/browser/dom/element.rb

@@ -1,40 +1,189 @@
-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'
+# 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.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(node)
+  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.const_defined?(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
   }
 
-  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
 
+  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
+
+  # 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
+  #
+  # @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
 
@@ -45,99 +194,205 @@ class Element < Node
     self
   end
 
-  def remove_class(*names)
-    classes = class_names - names
+  # 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
 
-    if classes.empty?
-      `#@native.removeAttribute('class')`
-    else
-      `#@native.className = #{classes.join ' '}`
-    end
+  # 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
 
-    self
+    rules.each {|rule|
+      if result = css(rule).first
+        break
+      end
+    }
+
+    result
   end
 
-  alias_native :class_name, :className
+  # 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 class_names
-    `#@native.className`.split(/\s+/).reject(&:empty?)
+    paths.each {|path|
+      if result = xpath(path).first
+        break
+      end
+    }
+
+    result
   end
 
-  alias attribute attr
+  alias attr []
 
-  def attribute_nodes
-    Native::Array.new(`#@native.attributes`, get: :item) { |e| DOM(e) }
-  end
+  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
 
-  def set(name, value, options = {})
-    if namespace = options[:namespace]
-      `#@native.setAttributeNS(#{namespace.to_s}, #{name.to_s}, #{value})`
+  # Click the element. it fires the element's click event.
+  def click
+    `#@native.click()`
+    self
+  end
+
+  # @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
-  end
 
-  alias [] get
-  alias []= set
+    self
+  end
 
-  alias attr get
-  alias attribute get
+  alias get_attribute []
 
-  alias get_attribute get
-  alias set_attribute set
+  alias get []
 
-  def key?(name)
-    !!self[name]
+  # @!attribute height
+  # @return [Integer] the height of the element
+  def height
+    size.height
   end
 
-  def keys
-    attributes_nodesmap(&:name)
+  def height=(value)
+    size.height = value
   end
 
-  def values
-    attribute_nodes.map(&:value)
-  end
+  # @!attribute id
+  # @return [String?] the ID of the element
+  def id
+    %x{
+      var id = #@native.id;
 
-  def remove_attribute(name)
-    `#@native.removeAttribute(name)`
+      if (id === "") {
+        return nil;
+      }
+      else {
+        return id;
+      }
+    }
   end
 
-  def size(*inc)
-    Size.new(self, *inc)
+  def id=(value)
+    `#@native.id = #{value.to_s}`
   end
 
-  def height
-    size.height
+  # 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 height=(value)
-    size.height = value
+  # Set the inner DOM with the given node.
+  #
+  # (see #append_child)
+  def inner_dom=(node)
+    clear
+
+    self << node
   end
 
-  def width
-    size.width
+  # @!attribute inner_html
+  # @return [String] the inner HTML of the element
+  def inner_html
+    `#@native.innerHTML`
   end
 
-  def width=(value)
-    size.width = value
+  def inner_html=(value)
+    `#@native.innerHTML = #{value}`
   end
 
-  def position
-    Position.new(self)
+  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)
 
@@ -152,116 +407,92 @@ 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
 
-  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
+  alias set []=
 
-  if Browser.supports?('Query.xpath') || Browser.loaded?('wicked-good-xpath')
-    if Browser.loaded? 'wicked-good-xpath'
-      `wgxpath.install()`
-    end
+  alias set_attribute []=
 
-    def xpath(path)
-      %x{
-        try {
-          var result = (#@native.ownerDocument || #@native).evaluate(path,
-            #@native, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-
-          return #{NodeSet.new(document,
-            Native::Array.new(`result`, get: :snapshotItem, length: :snapshotLength))};
-        }
-        catch (e) {
-          return #{NodeSet.new(document)};
-        }
-      }
-    end
-  else
-    def xpath(path)
-      raise NotImplementedError, 'query by XPath unsupported'
+  # 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)
     elsif block
       style.apply(&block)
+    else
+      raise ArgumentError, 'unknown data type'
     end
 
     self
@@ -276,113 +507,112 @@ class Element < Node
       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 data(what)
-    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];
-
-        if (value === undefined) {
-          return nil;
-        }
-        else {
-          return value;
-        }
-      }
-    end
+  # Remove an attribute from the element.
+  #
+  # @param name [String] the attribute name
+  def remove_attribute(name)
+    `#@native.removeAttribute(name)`
   end
 
-  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'
+  # Remove class names from the element.
+  #
+  # @param names [Array<String>] class names to remove
+  #
+  # @return [self]
+  def remove_class(*names)
+    classes = class_names - names
+
+    if classes.empty?
+      `#@native.removeAttribute('class')`
+    else
+      `#@native.className = #{classes.join ' '}`
     end
-  end
 
-  # @abstract
-  def window
-    document.window
+    self
   end
 
-  def inspect
-    "#<DOM::Element: #{name}>"
+  # @!attribute [r] size
+  # @return [Size] the size of the element
+  def size(*inc)
+    Size.new(self, *inc)
   end
 
-  class Attributes
-    include Enumerable
-
-    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'