opal-browser 0.1.0.beta1 → 0.3.1

data/opal/browser/dom/node_set.rb

@@ -1,21 +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  = []
+  # 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
 
-    list.each {|el|
-      if NodeSet === el
-        @literal.concat(el.to_a)
-      else
-        @literal.push DOM(Native.convert(el))
-      end
-    }
+  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|
@@ -30,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

@@ -1,16 +1,31 @@
 module Browser; module DOM
 
+# Encapsulates a text node.
+#
+# @see https://developer.mozilla.org/en-US/docs/Web/API/Text
 class Text < CharacterData
-  def self.create(*args)
-    $document.create_text(*args)
+  # (see Document#create_text)
+  def self.create(content)
+    $document.create_text(content)
   end
 
+  # @!attribute [r] whole
+  # @return [String] the whole text
+  #
+  # @see https://developer.mozilla.org/en-US/docs/Web/API/Text.wholeText
   def whole
     `#@native.wholeText`
   end
 
+  # Split the text node at a given offset.
+  #
+  # @param offset [Integer] the offset where to split the text node
+  #
+  # @return [Text] the newly created text node
+  #
+  # @see https://developer.mozilla.org/en-US/docs/Web/API/Text.splitText
   def split(offset)
-    `#@native.splitText(offset)`
+    DOM(`#@native.splitText(offset)`)
   end
 
   def inspect

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,13 +6,12 @@ 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'
 
-require 'browser/dom/compatibility'
-
 module Kernel
   # Parse an XML string into a DOM usable {Browser::DOM::Document}
   #
@@ -36,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');
@@ -67,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
@@ -76,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]

data/opal/browser/effects.rb

@@ -1,39 +1,216 @@
+require 'browser/animation_frame'
+
 module Browser; module DOM
 
 class Document < Element
+  # @!attribute [r] active_element
+  # @return [Element] the element with focus
   def active_element
     DOM(`#@native.activeElement`)
   end
 end
 
 class Element
+  # Show the 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 toggle
-    if style![:display] == :none
-      show
+  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(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

@@ -0,0 +1,40 @@
+module Browser; class Event
+
+class Animation < Event
+  handles 'animationend', 'animationiteration', 'animationstart'
+
+  def self.supported?
+    Browser.supports? 'Event.Animation'
+  end
+
+  class Definition < Definition
+    def animation=(value)
+      `#@native.animationName = #{value}`
+    end
+
+    def elapsed=(value)
+      `#@native.elapsedTime = #{value}`
+    end
+  end
+
+  if Browser.supports? 'Event.constructor'
+    def self.construct(name, desc)
+      `new AnimationEvent(#{name}, #{desc})`
+    end
+  elsif Browser.supports? 'Event.create'
+    def self.construct(name, desc)
+      %x{
+        var event = document.createEvent("AnimationEvent");
+            event.initAnimationEvent(name, desc.bubbles, desc.cancelable,
+              desc.animationName, desc.elapsedTime);
+
+        return event;
+      }
+    end
+  end if supported?
+
+  alias_native :name, :animationName
+  alias_native :elapsed, :elapsedTime
+end
+
+end; end

data/opal/browser/{dom/event → event}/audio_processing.rb

@@ -1,8 +1,10 @@
-module Browser; module DOM; class Event
+module Browser; class Event
 
 class AudioProcessing < Event
+  handles 'audioprocess'
+  
   def self.supported?
-    not $$[:AudioProcessingEvent].nil?
+    Browser.supports? 'Event.AudioProcessing'
   end
 
   class Definition < Definition
@@ -19,13 +21,15 @@ class AudioProcessing < Event
     end
   end
 
-  def self.create(name, &block)
-    new(`new AudioProcessingEvent(#{name}, #{Definition.new(&block)})`)
-  end
+  if Browser.supports? 'Event.constructor'
+    def self.construct(name, desc)
+      `new AudioProcessingEvent(#{name}, #{desc})`
+    end
+  end if supported?
 
   alias_native :time, :playbackTime
   alias_native :input, :inputBuffer
   alias_native :output, :outputBuffer
 end
 
-end; end; end
+end; end