opal-browser 0.2.0.beta1 → 0.3.2

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/{dom/event → event}/animation.rb

@@ -1,6 +1,8 @@
-module Browser; module DOM; class Event
+module Browser; class Event
 
 class Animation < Event
+  handles 'animationend', 'animationiteration', 'animationstart'
+
   def self.supported?
     Browser.supports? 'Event.Animation'
   end
@@ -35,4 +37,4 @@ class Animation < Event
   alias_native :elapsed, :elapsedTime
 end
 
-end; end; end
+end; end

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

@@ -1,6 +1,8 @@
-module Browser; module DOM; class Event
+module Browser; class Event
 
 class AudioProcessing < Event
+  handles 'audioprocess'
+  
   def self.supported?
     Browser.supports? 'Event.AudioProcessing'
   end
@@ -30,4 +32,4 @@ class AudioProcessing < Event
   alias_native :output, :outputBuffer
 end
 
-end; end; end
+end; end

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

@@ -1,11 +1,13 @@
-module Browser; module DOM
+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)
       data = super(`{ bubbles: true, cancelable: true }`)
       block.call(data) if block
@@ -13,10 +15,12 @@ class Event
       data.to_n
     end
 
+    # Set the event as bubbling.
     def bubbles=(value)
       `#@native.bubbles = #{value}`
     end
 
+    # Set the event as cancelable.
     def cancelable=(value)
       `#@native.cancelable = #{value}`
     end
@@ -49,7 +53,7 @@ class Event
     def self.included(klass)
       klass.instance_eval {
         def self.target(&block)
-          DOM::Event::Target.register(&block)
+          Event::Target.register(&block)
         end
       }
     end
@@ -57,6 +61,7 @@ class Event
     class Callback
       attr_reader :target, :name, :selector
 
+      # @private
       def initialize(target, name, selector = nil, &block)
         @target   = target
         @name     = name
@@ -64,10 +69,14 @@ class Event
         @block    = block
       end
 
-      def call(e)
-        to_proc.call(e)
+      # Call the callback with the given event.
+      #
+      # @param event [native] the native event object
+      def call(event)
+        to_proc.call(event)
       end
 
+      # Get the native function linked to the callback.
       def to_proc
         @proc ||= -> event {
           %x{
@@ -86,10 +95,13 @@ class Event
         }
       end
 
+      # @!attribute [r] event
+      # @return [Class] the class for the event
       def event
         Event.class_for(@name)
       end
 
+      # Stop listening for the event linked to the callback.
       def off
         target.off(self)
       end
@@ -102,6 +114,7 @@ class Event
         @pair   = pair
       end
 
+      # Stop listening for the event linked to the delegate.
       def off
         delegate = @target.delegated[@name]
         delegate.last.delete(@pair)
@@ -115,6 +128,26 @@ class Event
 
     Delegates = Struct.new(:callback, :handlers)
 
+    # @overload on(name, &block)
+    #
+    #   Start listening for an event on the target.
+    #
+    #   @param name [String] the event name
+    #
+    #   @yieldparam event [Event] the event
+    #
+    #   @return [Callback]
+    #
+    # @overload on(name, selector, &block)
+    #
+    #   Start listening for an event on the target children.
+    #
+    #   @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 on(name, selector = nil, &block)
       raise ArgumentError, 'no block has been given' unless block
 
@@ -152,6 +185,13 @@ class Event
       end
     end
 
+    # Start listening for an event in the capturing phase.
+    #
+    # @param name [String] the event name
+    #
+    # @yieldparam event [Event] the event
+    #
+    # @return [Callback]
     def on!(name, &block)
       raise ArgumentError, 'no block has been given' unless block
 
@@ -230,6 +270,44 @@ 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.
+    #
+    # @overload off(what)
+    #   Stop listening for an event.
+    #
+    #   @param what [Callback, String, Regexp] what to stop listening for
     def off(what = nil)
       case what
       when Callback
@@ -295,6 +373,12 @@ class Event
       end
     end
 
+    # Trigger an event on the target.
+    #
+    # @param event [String] the event name
+    # @param args [Array] optional arguments to the event callback
+    #
+    # @yieldparam definition [Definition] definition to customize the event
     def trigger(event, *args, &block)
       if event.is_a? String
         event = Event.create(event, *args, &block)
@@ -303,7 +387,12 @@ class Event
       dispatch(event)
     end
 
-    # Trigger the event without bubbling.
+    # Trigger an event on the target without bubbling.
+    #
+    # @param event [String] the event name
+    # @param args [Array] optional arguments to the event callback
+    #
+    # @yieldparam definition [Definition] definition to customize the event
     def trigger!(event, *args, &block)
       trigger event, *args do |e|
         block.call(e) if block
@@ -356,7 +445,7 @@ class Event
       return if element.nil? || element == event.on
 
       delegates.handlers.each {|selector, block|
-        if element.matches? selector
+        if element =~ selector
           new    = event.dup
           new.on = element
 
@@ -369,4 +458,4 @@ class Event
   end
 end
 
-end; end
+end

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

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

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

@@ -1,6 +1,8 @@
-module Browser; module DOM; class Event
+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; end
+end; end

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

@@ -1,6 +1,8 @@
-module Browser; module DOM; class Event
+module Browser; class Event
 
 class Close < Event
+  handles 'close'
+
   def self.supported?
     Browser.supports? 'Event.Close'
   end
@@ -44,4 +46,4 @@ class Close < Event
   alias_native :clean?, :wasClean
 end
 
-end; end; end
+end; end

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

@@ -1,6 +1,8 @@
-module Browser; module DOM; class Event
+module Browser; class Event
 
 class Composition < UI
+  handles 'compositionend', 'compositionstart', 'compositionupdate'
+
   def self.supported?
     Browser.supports? 'Event.Composition'
   end
@@ -47,4 +49,4 @@ class Composition < UI
   end
 end
 
-end; end; end
+end; end

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

@@ -1,6 +1,6 @@
 require 'ostruct'
 
-module Browser; module DOM; class Event
+module Browser; class Event
 
 class Custom < Event
   def self.supported?
@@ -17,7 +17,7 @@ class Custom < Event
 
   if Browser.supports? 'Event.constructor'
     def self.construct(name, desc)
-      `new CustomEvent(name, {
+      `return new CustomEvent(name, {
         bubbles:    desc.bubbles,
         cancelable: desc.cancelable,
         detail:     desc })`
@@ -62,4 +62,4 @@ class Custom < Event
   end
 end
 
-end; end; end
+end; end

data/opal/browser/event/data_transfer.rb

@@ -0,0 +1,95 @@
+require 'browser/blob'
+
+module Browser; class Event
+
+# {DataTransfer} is an object which manages included data to
+# an event of type {Event::Drag} or {Event::Clipboard}.
+class DataTransfer
+  include NativeCachedWrapper
+
+  # @!attribute [rw] effect
+  # @return [Symbol] Effect of this drop operation.
+  #   Must be one of: :none, :copy, :link or :move.
+  def effect
+    `#@native.dropEffect`
+  end
+
+  def effect= (effect)
+    `#@native.dropEffect = #{effect}`
+  end
+
+  # Extract some text data from this {DataTransfer} instance.
+  def [] (type)
+    `#@native.getData(#{type})`
+  end
+
+  # Embed some text data in this {DataTransfer} instance.
+  def []= (type, value)
+    `#@native.setData(#{type}, #{Native.convert(value)})`
+  end
+
+  # Clear some (or all, if type is not specified) text data from
+  # this {DataTransfer} instance.
+  def clear (type=nil)
+    `#@native.clearData(#{type.to_n})`
+  end
+
+  # @!attribute [w] drag_image
+  # Sets a drag image for this {DataTransfer}. Use some
+  # {DOM::Element::Image} or {Canvas} as a value.
+  def drag_image= (image)
+    `#@native.setDragImage(#{Native.convert(image)})`
+  end
+
+  # @!attribute [r] files
+  # @return [Array<File>] list of files attached to this {DataTransfer}
+  def files
+    Native::Array.new(`#@native.files`).map { |f| File.new(f.to_n) }
+  end
+
+  # @!attribute [r] items
+  # @return [Array<Item>] list of items attached to this {DataTransfer}
+  def items
+    Native::Array.new(`#@native.items`).map { |i| Item.new(i.to_n) }
+  end
+
+  # An instance of `DataTransferItem`
+  class Item
+    include NativeCachedWrapper
+
+    # @!attribute [r] kind
+    # @return [Symbol] kind of an item: :string or :file
+    def kind
+      `#@native.kind`
+    end
+
+    def string?; kind == 'string';           end
+    def file?;   kind == 'file' && to_file;  end # Some files can't be resolved...
+
+    # @!attribute [r] type
+    # @return [String] mime type of an item
+    def type
+      `#@native.type`
+    end
+
+    # Convert to string and call back once ready, or return a
+    # promise if a block isn't given.
+    def to_string(&block)
+      promise = nil
+      if !block
+        promise = Promise.new
+        block = proc { |i| promise.resolve(i) }
+      end
+      `#@native.getAsString(#{block.to_n})`
+      return promise
+    end
+
+    # Convert to file or return nil if impossible
+    def to_file
+      as_file = `#@native.getAsFile()`
+      File.new(as_file) if as_file
+    end
+  end
+end
+
+end; end

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

@@ -1,6 +1,8 @@
-module Browser; module DOM; class Event
+module Browser; class Event
 
 class DeviceLight < Event
+  handles 'devicelight'
+
   def self.supported?
     Browser.supports? 'Event.DeviceLight'
   end
@@ -20,4 +22,4 @@ class DeviceLight < Event
   alias_native :value
 end
 
-end; end; end
+end; end