opal-browser 0.2.0.beta1 → 0.3.2

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
@@ -49,7 +49,7 @@ class MutationObserver
         []
       end
 
-      NodeSet.new($document, array)
+      NodeSet[array]
     end
 
     # @!attribute [r] removed
@@ -61,7 +61,7 @@ class MutationObserver
         []
       end
 
-      NodeSet.new($document, array)
+      NodeSet[array]
     end
 
     # @!attribute [r] target

data/opal/browser/dom/node.rb

@@ -4,7 +4,7 @@ module Browser; module DOM
 #
 # @see https://developer.mozilla.org/en-US/docs/Web/API/Node
 class Node
-  include Native
+  include Browser::NativeCachedWrapper
 
   ELEMENT_NODE                = 1
   ATTRIBUTE_NODE              = 2
@@ -38,20 +38,27 @@ class Node
     end
   end
 
+  def initialize(node)
+    raise ArgumentError, "Please ensure that #initialize of #{self.class} accepts one argument" unless node
+    super
+  end
+
   # Return true of the other element is the same underlying DOM node.
   #
   # @return [Boolean]
   def ==(other)
-    `#@native === #{Native.try_convert(other)}`
+    `#@native === #{Native.convert(other)}`
   end
 
-  # Return true if the node name matches the given name case-insensitively.
+  # Initialize a new node after `#dup` or `#clone`.
   #
-  # @param name [String] the name to match with
+  # This method is not to be called directly. Use `Node#dup` or
+  # `Node#clone`.
   #
-  # @return [Boolean]
-  def =~(name)
-    self.name.downcase == name.downcase
+  # This method creates a deep detached clone of a DOM subtree to be used
+  # in the same document. The new node will have all events detached.
+  def initialize_copy(old)
+    set_native_reference `#{old.to_n}.cloneNode(true)`
   end
 
   # Append a child to the node.
@@ -65,36 +72,79 @@ class Node
   #
   # @return [self]
   def <<(node)
-    if native?(node)
+    if Opal.respond_to? node, :each
+      node.each { |n| self << n }
+      return self
+    elsif Opal.respond_to? node, :to_dom
+      node = node.to_dom(document)
+    end
+
+    unless native?(node)
+      if String === node
+        node = `#@native.ownerDocument.createTextNode(node)`
+      else
+        node = Native.convert(node)
+      end
+    end
+
+    `#@native.appendChild(node)`
+
+    self
+  end
+
+  def >>(node)
+    if Opal.respond_to? node, :each
+      node.each { |n| self >> n }
+      return self
+    elsif Opal.respond_to? node, :to_dom
+      node = node.to_dom(document)
+    end
+
+    unless native?(node)
+      if String === node
+        node = `#@native.ownerDocument.createTextNode(node)`
+      else
+        node = Native.convert(node)
+      end
+    end
+
+    if `#@native.firstChild == null`
       `#@native.appendChild(node)`
-    elsif node.respond_to? :each
-      node.each { |n| add_child(n) }
-    elsif String === node
-      `#@native.appendChild(#@native.ownerDocument.createTextNode(node))`
     else
-      `#@native.appendChild(#{Native.convert(node)})`
+      `#@native.insertBefore(node, #@native.firstChild)`
     end
 
     self
   end
 
-  alias add_child <<
+  def add_child(node = nil, &block)
+    unless node
+      node = DOM(&block)
+    end
+
+    self << node
+  end
 
   # Add the passed node after this one.
   #
   # When passing a {String} a text node will be created.
   #
   # @param node [String, Node, #to_n] the node to add
-  def add_next_sibling(node)
-    if native?(node)
-      `#@native.parentNode.insertBefore(node, #@native.nextSibling)`
-    elsif String === node
-      `#@native.parentNode.insertBefore(
-        #@native.ownerDocument.createTextNode(node), #@native.nextSibling)`
-    else
-      `#@native.parentNode.insertBefore(#{Native.convert(node)},
-        #@native.nextSibling)`
+  def add_next_sibling(node = nil, &block)
+    unless node
+      node = DOM(&block)
+    end
+    node = node.to_dom(document) if Opal.respond_to? node, :to_dom
+
+    unless native?(node)
+      if String === node
+        node = `#@native.ownerDocument.createTextNode(node)`
+      else
+        node = Native.convert(node)
+      end
     end
+
+    `#@native.parentNode.insertBefore(node, #@native.nextSibling)`
   end
 
   # Add the passed node before this one.
@@ -102,15 +152,21 @@ class Node
   # When passing a {String} a text node will be created.
   #
   # @param node [String, Node, #to_n] the node to add
-  def add_previous_sibling(node)
-    if native?(node)
-      `#@native.parentNode.insertBefore(node, #@native)`
-    elsif String === node
-      `#@native.parentNode.insertBefore(
-        #@native.ownerDocument.createTextNode(node), #@native)`
-    else
-      `#@native.parentNode.insertBefore(#{Native.convert(node)}, #@native)`
+  def add_previous_sibling(node = nil, &block)
+    unless node
+      node = DOM(&block)
+    end
+    node = node.to_dom(document) if Opal.respond_to? node, :to_dom
+
+    unless native?(node)
+      if String === node
+        node = `#@native.ownerDocument.createTextNode(node)`
+      else
+        node = Native.convert(node)
+      end
     end
+
+    `#@native.parentNode.insertBefore(node, #@native)`
   end
 
   alias after add_next_sibling
@@ -119,7 +175,8 @@ class Node
   #
   # @param node [Node] the node to append to
   def append_to(node)
-    node.add_child(self)
+    node << self
+    self
   end
 
   # Get an array of ancestors.
@@ -130,7 +187,7 @@ class Node
   #
   # @return [NodeSet]
   def ancestors(expression = nil)
-    return NodeSet.new(document) unless parent
+    return NodeSet[] unless parent
 
     parents = [parent]
 
@@ -143,12 +200,14 @@ class Node
     end
 
     if expression
-      parents.select! {|p|
-        p.matches? expression
-      }
+      parents.select! { |p| p =~ expression }
     end
 
-    NodeSet.new document, parents
+    NodeSet.new(parents)
+  end
+
+  def attached?
+    `#@native.isConnected`
   end
 
   alias before add_previous_sibling
@@ -156,11 +215,12 @@ class Node
   # Remove the node from its parent.
   def remove
     parent.remove_child(self) if parent
+    self
   end
 
   # Remove all the children of the node.
   def clear
-    children.each(&:remove)
+    children.remove
   end
 
   # @!attribute content
@@ -209,7 +269,7 @@ class Node
   # @!attribute children
   # @return [NodeSet] the children of the node
   def children
-    NodeSet.new(document, Native::Array.new(`#@native.childNodes`))
+    NodeSet[Native::Array.new(`#@native.childNodes`)]
   end
 
   def children=(node)
@@ -221,12 +281,22 @@ class Node
     node_type == COMMENT_NODE
   end
 
-  # @!attribute [r] document
+  # Return true if the node is a custom element.
+  def custom?
+    false
+  end
+
+  # @!attribute [rw] document
   # @return [Document?] the document the node is attached to
   def document
     DOM(`#@native.ownerDocument`) if defined?(`#@native.ownerDocument`)
   end
 
+  # Detach a node and transfer it to another document.
+  def document=(new_document)
+    `#{Native.try_convert(new_document, new_document)}.adoptNode(#@native)`
+  end
+
   # Return true if the node is a document.
   def document?
     node_type == DOCUMENT_NODE
@@ -258,16 +328,6 @@ class Node
     node_type == DOCUMENT_FRAGMENT_NODE
   end
 
-  # @!attribute inner_html
-  # @return [String] the inner HTML of the node
-  def inner_html
-    `#@native.innerHTML`
-  end
-
-  def inner_html=(value)
-    `#@native.innerHTML = #{value}`
-  end
-
   alias inner_text content
   alias inner_text= content=
 
@@ -277,13 +337,6 @@ class Node
     element_children.last
   end
 
-  # Check if the node matches the given CSS selector.
-  #
-  # @param expression [String] the CSS selector
-  def matches?(expression)
-    false
-  end
-
   # @!attribute name
   # @return [String] the name of the node
   def name
@@ -332,6 +385,14 @@ class Node
     `#@native.nodeType`
   end
 
+  # @!attribute outer_html
+  # @return [String] the simulated outer html of the node
+  def outer_html
+    div = $document.create_element("DIV")
+    div << self.dup
+    div.inner_html
+  end
+
   # @!attribute parent
   # @return [Element?] the parent of the node
   def parent
@@ -339,7 +400,7 @@ class Node
   end
 
   def parent=(node)
-    `#@native.parentNode = #{Native.try_convert(node)}`
+    `#@native.parentNode = #{Native.convert(node)}`
   end
 
   def parse(text, options = {})
@@ -350,6 +411,14 @@ class Node
     raise NotImplementedError
   end
 
+  # Prepend the node to the passed one.
+  #
+  # @param node [Node] the node to prepend to
+  def prepend_to(node)
+    node >> self
+    self
+  end
+
   # @!attribute previous
   # @return [Node?] the previous sibling of the node
   def previous
@@ -375,6 +444,7 @@ class Node
   # Remove the given node from the children of this node.
   def remove_child(node)
     `#@native.removeChild(#{Native.try_convert(node)})`
+    self
   end
 
   # Replace the node with the given one.
@@ -384,11 +454,23 @@ class Node
   # @param node [Node] the node to replace with
   # @return [Node] the passed node
   def replace(node)
-    `#@native.parentNode.replaceChild(#@native, #{Native.try_convert(node)})`
+    node = node.to_dom(document) if Opal.respond_to? node, :to_dom
+
+    unless native?(node)
+      if String === node
+        node = `#@native.ownerDocument.createTextNode(node)`
+      else
+        node = Native.convert(node)
+      end
+    end
 
-    node
+    `#@native.parentNode.replaceChild(node, #@native)`
+
+    DOM(node)
   end
 
+  alias replace_with replace
+
   alias text content
   alias text= content=
 

data/opal/browser/dom/node_set.rb

@@ -1,25 +1,20 @@
 module Browser; module DOM
 
+# Allows manipulation of a set of {Node}s.
 class NodeSet
-  attr_reader :document
-
-  def initialize(document, list = [])
-    @document = document
-    @literal  = []
-
-    list.each {|el|
-      if NodeSet === el
-        @literal.concat(el.to_a)
-      else
-        @literal.push DOM(Native.convert(el))
-      end
-    }
+  # Create a new {NodeSet} from the given nodes.
+  #
+  # Note that the nodes are flattened and converted with DOM automatically,
+  # this means you can pass {NodeSet}s and {Native::Array}s as well.
+  def self.[](*nodes)
+    new(nodes.flatten.map { |x| DOM(Native.convert(x)) }.uniq)
   end
 
-  def respond_to_missing?(name)
-    @literal.respond_to?(name)
+  def initialize(literal)
+    @literal = literal
   end
 
+  # Any other method will be called on every node in the set.
   def method_missing(name, *args, &block)
     unless @literal.respond_to? name
       each {|el|
@@ -34,59 +29,93 @@ class NodeSet
     if `result === #@literal`
       self
     elsif Array === result
-      NodeSet.new(@document, result)
+      NodeSet.new(result)
     else
       result
     end
   end
 
-  def dup
-    NodeSet.new(document, to_ary.dup)
+  def respond_to_missing?(name, *)
+    @literal.respond_to?(name)
   end
 
-  def filter(expression)
-    NodeSet.new(document, @literal.select { |node| node.matches?(expression) })
-  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)
+    each {|node|
+      if node = node.at_css(*rules)
+        return node
+      end
+    }
 
-  def after(node)
-    last.after node
+    nil
   end
 
-  def at(path)
-    raise NotImplementedError
-  end
+  # Get the first node matching the given XPath.
+  #
+  # @param paths [Array<String>] the XPath to match with
+  #
+  # @return [Node?]
+  def at_xpath(*paths)
+    each {|node|
+      if node = node.at_xpath(*paths)
+        return node
+      end
+    }
 
-  def at_css(*rules)
-    raise NotImplementedError
+    nil
   end
 
-  def at_xpath(*paths)
-    raise NotImplementedError
+  # Query for children matching the given CSS selector.
+  #
+  # @param path [String] the CSS selector
+  #
+  # @return [NodeSet]
+  def css(path)
+    NodeSet[@literal.map {|node|
+      node.css(path)
+    }]
   end
 
-  def before
-    first.before
+  # Create another {NodeSet} with all the nodes that match the given
+  # expression.
+  #
+  # @param expression [String] a CSS selector
+  #
+  # @return [NodeSet] the new {NodeSet} with the matching nodes
+  def filter(expression)
+    NodeSet[@literal.select { |node| node =~ expression }]
   end
 
-  def children
-    result = NodeSet.new(document)
-
-    each { |n| result.concat(n.children) }
-
-    result
+  # Search for multiple selectors
+  def search(*what)
+    NodeSet[@literal.map { |node| node.search(*what) }]
   end
 
-  def css(*paths)
-    raise NotImplementedError
+  # Outer HTML of the entire nodeset
+  def outer_html
+    @literal.map(&:outer_html).join
   end
 
-  def search(*what)
-    map { |n| n.search(*what) }.flatten.uniq
+  # Query for children matching the given XPath.
+  #
+  # @param path [String] the XPath
+  #
+  # @return [NodeSet]
+  def xpath(path)
+    NodeSet[@literal.map {|node|
+      node.xpath(path)
+    }]
   end
 
-  def inspect
-    "#<DOM::NodeSet: #{@literal.inspect[1 .. -2]}"
+  def to_ary
+    @literal
   end
+
+  alias to_a to_ary
 end
 
 end; end

data/opal/browser/dom/shadow_root.rb

@@ -0,0 +1,12 @@
+module Browser; module DOM
+
+class ShadowRoot < DocumentFragment
+  include DocumentOrShadowRoot
+
+  # Use: Element#shadow
+  def self.create
+    raise ArgumentError
+  end
+end
+
+end; end

data/opal/browser/dom/text.rb

@@ -5,8 +5,8 @@ module Browser; module DOM
 # @see https://developer.mozilla.org/en-US/docs/Web/API/Text
 class Text < CharacterData
   # (see Document#create_text)
-  def self.create(*args)
-    $document.create_text(*args)
+  def self.create(content)
+    $document.create_text(content)
   end
 
   # @!attribute [r] whole

data/opal/browser/dom.rb

@@ -1,4 +1,3 @@
-require 'browser/dom/event'
 require 'browser/dom/node_set'
 require 'browser/dom/node'
 require 'browser/dom/attribute'
@@ -7,9 +6,10 @@ require 'browser/dom/text'
 require 'browser/dom/cdata'
 require 'browser/dom/comment'
 require 'browser/dom/element'
+require 'browser/dom/document_or_shadow_root'
 require 'browser/dom/document'
 require 'browser/dom/document_fragment'
-require 'browser/dom/builder'
+require 'browser/dom/shadow_root'
 require 'browser/dom/mutation_observer'
 
 module Kernel
@@ -34,29 +34,59 @@ module Kernel
     DOM(`doc`)
   end
 
-  # Wrap a native element or create a DOM tree using the {Paggio::HTML} DSL.
+  # @overload DOM(document = $document, &block)
+  #
+  #   Create a DOM tree using the {Paggio::HTML} DSL.
+  #
+  #   @param document [Browser::DOM::Document] the document instance
+  #     we intend to use
+  #
+  #   @return [Browser::DOM::Node, Browser::DOM::NodeSet]
+  #
+  # @overload DOM(string, document = $document)
+  #
+  #   Create a DOM tree from a HTML string.
+  #
+  #   @param string [String] the HTML string
+  #   @param document [Browser::DOM::Document] the document instance
+  #     we intend to use
+  #
+  #   @return [Browser::DOM::Node]
+  #
+  # @overload DOM(native)
+  #
+  #   Wrap a native element to create a DOM tree.
+  #
+  #   @param native [Native] the Native node
+  #
+  #   @return [Browser::DOM::Node]
   #
-  # @return [Browser::DOM::Node]
   def DOM(*args, &block)
     if block
       document = args.shift || $document
-      element  = args.shift
-
-      roots = Browser::DOM::Builder.new(document, element, &block).to_a
+      roots    = Browser::DOM::Builder.new(document, &block).to_a
 
       if roots.length == 1
         roots.first
       else
-        Browser::DOM::NodeSet.new(document, roots)
+        Browser::DOM::NodeSet.new(roots)
       end
     else
       what     = args.shift
       document = args.shift || $document
 
-      if native?(what)
+      what = what.to_dom(document) if Opal.respond_to? what, :to_dom
+
+      if `typeof(#{what}) === 'undefined' || #{what} === null`
+        raise ArgumentError, 'argument is null'
+      elsif native?(what)
         Browser::DOM::Node.new(what)
       elsif Browser::DOM::Node === what
         what
+      elsif Opal.respond_to? what, :each # eg. NodeSet, Array
+        document.create_element("DIV").tap do |div|
+          div << what
+        end
       elsif String === what
         %x{
           var doc = #{Native.try_convert(document)}.createElement('div');
@@ -65,7 +95,7 @@ module Kernel
           return #{DOM(`doc.childNodes.length == 1 ? doc.childNodes[0] : doc`)};
         }
       else
-        raise ArgumentError, "argument not DOM convertible"
+        raise ArgumentError, 'argument is not DOM convertible'
       end
     end
   end
@@ -74,12 +104,6 @@ end
 module Browser
 
 class Window
-  include DOM::Event::Target
-
-  target {|value|
-    $window if `#{value} == window`
-  }
-
   # Get the {DOM::Document} for this window.
   #
   # @return [DOM::Document]