opal-browser 0.2.0 → 0.3.3

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,6 +38,11 @@ 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]
@@ -45,6 +50,17 @@ class Node
     `#@native === #{Native.convert(other)}`
   end
 
+  # Initialize a new node after `#dup` or `#clone`.
+  #
+  # This method is not to be called directly. Use `Node#dup` or
+  # `Node#clone`.
+  #
+  # 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.
   #
   # When passing a {String} a text node will be created.
@@ -59,6 +75,8 @@ class 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)
@@ -78,6 +96,8 @@ class 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)
@@ -114,6 +134,7 @@ class Node
     unless node
       node = DOM(&block)
     end
+    node = node.to_dom(document) if Opal.respond_to? node, :to_dom
 
     unless native?(node)
       if String === node
@@ -135,6 +156,7 @@ class Node
     unless node
       node = DOM(&block)
     end
+    node = node.to_dom(document) if Opal.respond_to? node, :to_dom
 
     unless native?(node)
       if String === node
@@ -154,6 +176,7 @@ class Node
   # @param node [Node] the node to append to
   def append_to(node)
     node << self
+    self
   end
 
   # Get an array of ancestors.
@@ -183,11 +206,16 @@ class Node
     NodeSet.new(parents)
   end
 
+  def attached?
+    `#@native.isConnected`
+  end
+
   alias before add_previous_sibling
 
   # Remove the node from its parent.
   def remove
     parent.remove_child(self) if parent
+    self
   end
 
   # Remove all the children of the node.
@@ -253,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
@@ -290,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=
 
@@ -357,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
@@ -380,6 +416,7 @@ class Node
   # @param node [Node] the node to prepend to
   def prepend_to(node)
     node >> self
+    self
   end
 
   # @!attribute previous
@@ -407,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.
@@ -416,6 +454,8 @@ class Node
   # @param node [Node] the node to replace with
   # @return [Node] the passed node
   def replace(node)
+    node = node.to_dom(document) if Opal.respond_to? node, :to_dom
+
     unless native?(node)
       if String === node
         node = `#@native.ownerDocument.createTextNode(node)`
@@ -426,7 +466,7 @@ class Node
 
     `#@native.parentNode.replaceChild(node, #@native)`
 
-    node
+    DOM(node)
   end
 
   alias replace_with replace

data/opal/browser/dom/node_set.rb

@@ -35,6 +35,10 @@ class NodeSet
     end
   end
 
+  def respond_to_missing?(name, *)
+    @literal.respond_to?(name)
+  end
+
   # Get the first node matching the given CSS selectors.
   #
   # @param rules [Array<String>] the CSS selectors to match with
@@ -67,7 +71,7 @@ class NodeSet
 
   # Query for children matching the given CSS selector.
   #
-  # @param selector [String] the CSS selector
+  # @param path [String] the CSS selector
   #
   # @return [NodeSet]
   def css(path)
@@ -83,7 +87,7 @@ class NodeSet
   #
   # @return [NodeSet] the new {NodeSet} with the matching nodes
   def filter(expression)
-    @literal.select { |node| node =~ expression }
+    NodeSet[@literal.select { |node| node =~ expression }]
   end
 
   # Search for multiple selectors
@@ -91,6 +95,11 @@ class NodeSet
     NodeSet[@literal.map { |node| node.search(*what) }]
   end
 
+  # Outer HTML of the entire nodeset
+  def outer_html
+    @literal.map(&:outer_html).join
+  end
+
   # Query for children matching the given XPath.
   #
   # @param path [String] the XPath
@@ -105,6 +114,8 @@ class NodeSet
   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

@@ -6,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
@@ -33,9 +34,33 @@ 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
@@ -50,10 +75,18 @@ module Kernel
       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');
@@ -62,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

data/opal/browser/effects.rb

@@ -1,3 +1,5 @@
+require 'browser/animation_frame'
+
 module Browser; module DOM
 
 class Document < Element
@@ -14,37 +16,201 @@ class Element
   # @param what [Symbol] how to display it
   def show(what = :block)
     style[:display] = what
+    self
   end
 
   # Hide the element.
   def hide
     style[:display] = :none
+    self
+  end
+
+  def visible?
+    # Let's check if we want to lie about the real visibility of an element.
+    # It could be wise to lie about it when it's in a process of animation...
+    if !@virtually_visible.nil?
+      @virtually_visible
+    else
+      style![:display] != :none
+    end
   end
 
   # Toggle the visibility of the element, hide it if it's shown, show it if
   # it's hidden.
-  def toggle
-    if style![:display] == :none
-      show
-    else
+  def toggle(what = :block)
+    if visible?
       hide
+    else
+      show(what)
     end
+    self
   end
 
   # Set the focus on the element.
   def focus
     `#@native.focus()`
+    self
   end
 
   # Blur the focus from the element.
   def blur
     `#@native.blur()`
+    self
   end
 
   # Check if the element is focused.
   def focused?
     `#@native.hasFocus`
   end
+
+  # Queue the block to happen when currently queued animations finish or during
+  # the next animation frame.
+  def animation_queue &block
+    promise = Promise.new
+
+    promise_resolve = proc do
+      @animation_promise = nil if @animation_promise == promise
+      promise.resolve
+    end
+
+    @animation_promise = (@animation_promise || Promise.value(true)).then do
+      animation_frame do
+        yield promise_resolve
+      end
+      promise
+    end
+  end
+
+  # Transform an element smoothly using CSS transitions, jQuery style. Yield
+  # a block afterwards if it's provided.
+  def animate(properties, duration: 0.4.s, easing: :ease, resolve: false, &block)
+    animation_queue(resolve) do |res|
+      duration = 0.6.s if duration == :slow
+      duration = 0.2.s if duration == :fast
+
+      original_value = style['transition']
+
+      style['transition'] = [original_value,
+                            *properties.keys.map do |key|
+                              "#{key} #{duration} #{easing}"
+                            end].compact.join(", ")
+
+      properties.each do |key, value|
+        style[key] = value
+      end
+
+      promise = Promise.new
+
+      one :transitionend do |*args|
+        style['transition'] = original_value
+
+        yield(*args) if block_given?
+
+        res.call
+      end
+    end
+    self
+  end
+
+  # Show a hidden element with a "fade in" animation. Yield a block afterwards.
+  def fade_in(**kwargs, &block)
+    animation_queue do |resolve|
+      if !visible?
+        @virtually_visible = true
+        show
+
+        style[:opacity] = 0.0
+        animate opacity: 1.0, **kwargs do |*args|
+          @virtually_visible = nil
+          style[:opacity] = nil
+          yield(*args) if block_given?
+        end
+      end
+      resolve.call
+    end
+    self
+  end
+
+  # Hide a visible element with a "fade out" animation. Yield a block afterwards.
+  def fade_out(**kwargs, &block)
+    animation_queue do |resolve|
+      if visible?
+        @virtually_visible = false
+
+        style[:opacity] = 1.0
+        animate opacity: 0.0, **kwargs do |*args|
+          @virtually_visible = nil
+          style[:opacity] = nil
+          hide
+          yield(*args) if block_given?
+        end
+      end
+      resolve.call
+    end
+    self
+  end
+
+  # Toggle a visibility of an element with a "fade in"/"fade out" animation. Yield
+  # a block afterwards.
+  def fade_toggle(**kwargs, &block)
+    if visible?
+      fade_out(**kwargs, &block)
+    else
+      fade_in(**kwargs, &block)
+    end
+    self
+  end
+
+  # Show a hidden element with a "slide down" animation. Yield a block afterwards.
+  def slide_down(**kwargs, &block)
+    animation_queue do |resolve|
+      if !visible?
+        @virtually_visible = true
+        show
+        height = size.height
+        orig_height = style[:height]
+        style[:height] = 0.px
+
+        animate height: height.px, **kwargs do |*args|
+          @virtually_visible = nil
+          style[:height] = orig_height
+          yield(*args) if block_given?
+        end
+      end
+      resolve.call
+    end
+    self
+  end
+
+  # Hide a visible element with a "slide up" animation. Yield a block afterwards.
+  def slide_up(**kwargs, &block)
+    animation_queue do |resolve|
+      if visible?
+        @virtually_visible = false
+        orig_height = style[:height]
+
+        animate height: 0.px, **kwargs do |*args|
+          @virtually_visible = nil
+          style[:height] = orig_height
+          hide
+          yield(*args) if block_given?
+        end
+      end
+      resolve.call
+    end
+    self
+  end
+
+  # Toggle a visibility of an element with a "slide up"/"slide down" animation.
+  # Yield a block afterwards.
+  def slide_toggle(**kwargs, &block)
+    if visible?
+      slide_up(**kwargs, &block)
+    else
+      slide_down(**kwargs, &block)
+    end
+    self
+  end
 end
 
 end; end

data/opal/browser/event/all.rb

@@ -0,0 +1,26 @@
+# browser/event/all: Load support for all events
+
+require 'browser/event/focus'
+require 'browser/event/wheel'
+require 'browser/event/data_transfer'
+require 'browser/event/composition'
+require 'browser/event/animation'
+require 'browser/event/audio_processing'
+require 'browser/event/before_unload'
+require 'browser/event/composition'
+require 'browser/event/clipboard'
+require 'browser/event/device_light'
+require 'browser/event/device_motion'
+require 'browser/event/device_orientation'
+require 'browser/event/device_proximity'
+require 'browser/event/drag'
+require 'browser/event/gamepad'
+require 'browser/event/hash_change'
+require 'browser/event/progress'
+require 'browser/event/page_transition'
+require 'browser/event/pop_state'
+require 'browser/event/storage'
+require 'browser/event/touch'
+require 'browser/event/sensor'
+require 'browser/event/message'
+require 'browser/event/close'

data/opal/browser/event/animation.rb

@@ -1,6 +1,8 @@
 module Browser; class Event
 
 class Animation < Event
+  handles 'animationend', 'animationiteration', 'animationstart'
+
   def self.supported?
     Browser.supports? 'Event.Animation'
   end

data/opal/browser/event/audio_processing.rb

@@ -1,6 +1,8 @@
 module Browser; class Event
 
 class AudioProcessing < Event
+  handles 'audioprocess'
+  
   def self.supported?
     Browser.supports? 'Event.AudioProcessing'
   end

data/opal/browser/event/base.rb

@@ -1,11 +1,11 @@
 module Browser
 
 class Event
-  include Native
+  include Native::Wrapper
 
   # @see https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
   class Definition
-    include Native
+    include Native::Wrapper
 
     # @private
     def self.new(&block)
@@ -270,6 +270,37 @@ class Event
       end
     end
 
+    # @overload one(name, &block)
+    #
+    #   Start listening for an event on the target. Remove the event after firing
+    #   so that it is fired at most once.
+    #
+    #   @param name [String] the event name
+    #
+    #   @yieldparam event [Event] the event
+    #
+    #   @return [Callback]
+    #
+    # @overload one(name, selector, &block)
+    #
+    #   Start listening for an event on the target children. Remove the event after
+    #   firing so that it is fired at most once.
+    #
+    #   @param name [String] the event name
+    #   @param selector [String] the CSS selector to trigger the event on
+    #
+    #   @yieldparam event [Event] the event
+    #
+    #   @return [Delegate]
+    def one (name, selector = nil, &block)
+      raise ArgumentError, 'no block has been given' unless block
+
+      cb = on name, selector do |*args|
+        out = block.call(*args)
+        cb.off
+        out
+      end
+    end
     # @overload off()
     #   Stop listening for any event.
     #
@@ -344,7 +375,7 @@ class Event
 
     # Trigger an event on the target.
     #
-    # @param name [String] the event name
+    # @param event [String] the event name
     # @param args [Array] optional arguments to the event callback
     #
     # @yieldparam definition [Definition] definition to customize the event
@@ -358,7 +389,7 @@ class Event
 
     # Trigger an event on the target without bubbling.
     #
-    # @param name [String] the event name
+    # @param event [String] the event name
     # @param args [Array] optional arguments to the event callback
     #
     # @yieldparam definition [Definition] definition to customize the event

data/opal/browser/event/before_unload.rb

@@ -1,6 +1,8 @@
 module Browser; class Event
 
 class BeforeUnload < Event
+  handles 'beforeunload'
+
   def self.supported?
     Browser.supports? 'Event.BeforeUnload'
   end

data/opal/browser/event/clipboard.rb

@@ -1,6 +1,8 @@
 module Browser; class Event
 
 class Clipboard < Event
+  handles 'copy', 'cut', 'paste'
+
   def self.supported?
     Browser.supports? 'Event.Clipboard'
   end
@@ -23,6 +25,13 @@ class Clipboard < Event
 
   alias_native :data
   alias_native :type, :dataType
+
+  # Returns a {DataTransfer} related to this event
+  #
+  # @see https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
+  def transfer
+    DataTransfer.new(`#@native.clipboardData`)
+  end
 end
 
 end; end

data/opal/browser/event/close.rb

@@ -1,6 +1,8 @@
 module Browser; class Event
 
 class Close < Event
+  handles 'close'
+
   def self.supported?
     Browser.supports? 'Event.Close'
   end