opal-browser 0.2.0.beta1 → 0.3.2

data/opal/browser/dom/element/attributes.rb

@@ -0,0 +1,111 @@
+module Browser; module DOM; class Element < Node
+
+class Attributes
+  attr_reader :namespace
+
+  def initialize(element, options)
+    @element   = element
+    @native    = element.to_n
+    @namespace = options[:namespace]
+  end
+
+  if Browser.supports?('Element.className') || Browser.supports?('Element.htmlFor')
+    def [](name, options = {})
+      if name == :class && Browser.supports?('Element.className')
+        name = :className
+      elsif name == :for && Browser.supports?('Element.htmlFor')
+        name = :htmlFor
+      end
+
+      if namespace = options[:namespace] || @namespace
+        `#@native.getAttributeNS(#{namespace.to_s}, #{name.to_s}) || nil`
+      else
+        `#@native.getAttribute(#{name.to_s}) || nil`
+      end
+    end
+
+    def []=(name, value, options = {})
+      if name == :class && Browser.supports?('Element.className')
+        name = :className
+      elsif name == :for && Browser.supports?('Element.htmlFor')
+        name = :htmlFor
+      end
+
+      if namespace = options[:namespace] || @namespace
+        if value
+          `#@native.setAttributeNS(#{namespace.to_s}, #{name.to_s}, #{value})`
+        else
+          `#@native.removeAttributeNS(#{namespace.to_s}, #{name.to_s})`
+        end
+      else
+        if value
+          `#@native.setAttribute(#{name.to_s}, #{value.to_s})`
+        else
+          `#@native.removeAttribute(#{name.to_s})`
+        end
+      end
+    end
+  else
+    def [](name, options = {})
+      if namespace = options[:namespace] || @namespace
+        `#@native.getAttributeNS(#{namespace.to_s}, #{name.to_s}) || nil`
+      else
+        `#@native.getAttribute(#{name.to_s}) || nil`
+      end
+    end
+
+    def []=(name, value, options = {})
+      if namespace = options[:namespace] || @namespace
+        if value
+          `#@native.setAttributeNS(#{namespace.to_s}, #{name.to_s}, #{value})`
+        else
+          `#@native.removeAttributeNS(#{namespace.to_s}, #{name.to_s})`
+        end
+      else
+        if value
+          `#@native.setAttribute(#{name.to_s}, #{value.to_s})`
+        else
+          `#@native.removeAttribute(#{name.to_s})`
+        end
+      end
+    end
+  end
+
+  # Deletes an attribute with a given name
+  # @return [String] an attribute value before deletion
+  def delete(name)
+    attr = self[name]
+    self[name] = nil
+    attr
+  end
+
+  include Enumerable
+
+  def each(&block)
+    return enum_for :each unless block_given?
+
+    @element.attribute_nodes.each {|attr|
+      yield attr.name, attr.value
+    }
+
+    self
+  end
+
+  alias get []
+
+  def has_key?(name)
+    !!self[name]
+  end
+
+  def merge!(hash)
+    hash.each {|name, value|
+      self[name] = value
+    }
+
+    self
+  end
+
+  alias set []=
+end
+
+end; end; end

data/opal/browser/dom/element/button.rb

@@ -0,0 +1,31 @@
+module Browser; module DOM; class Element < Node
+
+class Button < Element
+  def_selector "button"
+
+  def disabled?
+    `#@native.disabled`
+  end
+
+  def disabled=(value)
+    `#@native.disabled = #{value}`
+  end
+
+  def autofocus?
+    `#@native.autofocus`
+  end
+
+  def autofocus=(value)
+    `#@native.autofocus = #{value}`
+  end
+
+  def name_
+    `#@native.name`
+  end
+
+  def name_=(value)
+    `#@native.name = #{value}`
+  end
+end
+
+end; end; end

data/opal/browser/dom/element/custom.rb

@@ -0,0 +1,177 @@
+# use_strict: true
+# helpers: truthy
+
+module Browser; module DOM; class Element < Node
+
+# CustomElements implementation for opal-browser. See examples/custom_elements/.
+#
+# @see https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+# @abstract This class should not be used directly. Please extend it and implement needed methods.
+class Custom < Element
+  # The reason why we wrap class definition with an eval is kind of selfish. I want it to work
+  # with opal-optimizer which doesn't support the new class syntax. I would do it with prototypes,
+  # but the prototypes system is so messy I gave up.
+  #
+  # Therefore, for it to be cleaned up, one of those two must happen:
+  # - we raise the supported ES version in Opal and we implement those ES syntax features in
+  #   rkelly-turbo. And then we remove the polyfill.
+  # - we reimplement it in terms of prototypes.
+  %x{
+    var make_custom_class = Function('self,base_class',
+      '"use strict"; \
+      var klass = class extends base_class { \
+        constructor() { \
+          super(); \
+          self.$_dispatch_constructor(this); \
+        } \
+        connectedCallback() { \
+          return this.$$opal_native_cached.$attached(); \
+        } \
+        disconnectedCallback() { \
+          return this.$$opal_native_cached.$detached(); \
+        } \
+        adoptedCallback() { \
+          return this.$$opal_native_cached.$adopted(); \
+        } \
+        attributeChangedCallback(attr, from, to) { \
+          if (from === null) from = Opal.nil; \
+          if (to === null) to = Opal.nil; \
+          return this.$$opal_native_cached.$attribute_changed(attr, from, to); \
+        } \
+        \
+        static get observedAttributes() { \
+          return self.$observed_attributes(); \
+        } \
+      }; \
+      klass.$$opal_class = self; \
+      return klass;'
+    );
+  } if Browser.supports? 'Custom Elements' #'
+
+  module ClassMethods
+    if Browser.supports? 'Custom Elements'
+      # Defines a new custom element. This should come as the last call
+      # in the class definition, because at this point the methods may
+      # be called!
+      #
+      # @opalopt uses:_dispatch_constructor,attached,detached,adopted,attribute_changed,observed_attributes
+      def def_custom(tag_name, base_class: nil, extends: nil)
+        if `base_class !== nil`
+        elsif self.superclass == Custom
+          base_class = `HTMLElement`
+        elsif self.ancestors.include? Custom
+          base_class = `#{self.superclass}.custom_class`
+        else
+          raise ArgumentError, "You must define base_class"
+        end
+
+        @custom_class = `make_custom_class(self, #{base_class})`
+        @observed_attributes ||= []
+
+        def_selector tag_name
+
+        %x{
+          if ($truthy(#{extends})) customElements.define(#{tag_name}, #{@custom_class}, {extends: #{extends}});
+          else customElements.define(#{tag_name}, #{@custom_class});
+        }
+      end
+    elsif Browser.supports? 'MutationObserver'
+      # Can we polyfill it?
+      Browser::DOM::MutationObserver.new do |obs|
+        obs.each do |e|
+          target = e.target
+
+          case e.type
+          when :attribute
+            if Custom::Mixin === target && target.class.observed_attributes.include?(e.name)
+              target.attribute_changed(e.name, e.old, target[e.name])
+            end
+          when :tree
+            e.added.each { |n| n.attached_once if Custom::Mixin === n }
+            e.removed.each { |n| n.detached_once if Custom::Mixin === n }
+          end
+        end
+      end.observe($document, tree: true, children: true, attributes: :old)
+    end
+
+    unless Browser.supports? 'Custom Elements'
+      # The polyfilled implementation. Define the selector and then
+      # try to upgrade the elements that are already in the document.
+      def def_custom(tag_name, base_class: nil, extends: nil)
+        def_selector tag_name
+
+        $document.body.css(tag_name).each do |elem|
+          _dispatch_constructor(elem.to_n)&.attached_once
+        end
+      end
+    end
+
+    private def _dispatch_constructor(obj)
+      %x{
+        if (typeof obj.$$opal_native_cached !== 'undefined') {
+          delete obj.$$opal_native_cached;
+          return self.$new(obj);
+        }
+        else {
+          self.$new(obj);
+          return nil;
+        }
+      }
+    end
+
+    # This must be defined before def_custom is called!
+    attr_accessor :observed_attributes
+
+    attr_reader :custom_class
+  end
+
+  module Mixin
+    def self.included(klass)
+      klass.extend ClassMethods
+    end
+
+    # @abstract
+    def attached
+    end
+
+    # @abstract
+    def detached
+    end
+
+    # @abstract
+    def adopted
+    end
+
+    # Note: for this method to fire, you will need to define
+    # the observed attributes.
+    #
+    # @abstract
+    def attribute_changed(attr, from, to)
+    end
+
+    # Return true if the node is a custom element.
+    def custom?
+      true
+    end
+
+    # Those methods keep track of the attachment status of the elements,
+    # so that #attached/#detached isn't called twice.
+    unless Browser.supports? 'Custom Elements'
+      # @private
+      def attached_once
+        attached unless @_polyfill_attached
+        @_polyfill_attached = true
+      end
+
+      # @private
+      def detached_once
+        detached if @_polyfill_attached
+        @_polyfill_attached = false
+      end
+    end
+  end
+
+  include Mixin
+end
+
+end; end; end

data/opal/browser/dom/element/data.rb

@@ -0,0 +1,82 @@
+module Browser; module DOM; class Element < Node
+
+class Data
+  attr_reader :element
+
+  def initialize(element)
+    @element = element
+    @native  = element.to_n
+
+    unless defined?(`#@native.$data`)
+      `#@native.$data = {}`
+    end
+  end
+
+  include Enumerable
+
+  def each(&block)
+    return enum_for :each unless block
+
+    %x{
+      var data = #@native.$data;
+
+      for (var key in data) {
+        #{block.call `key`, `data[key]`};
+      }
+    }
+
+    @element.attributes.each {|name, value|
+      if name =~ /^data-(.*)$/
+        block.call $1, value
+      end
+    }
+
+    self
+  end
+
+  def assign(data)
+    data.each {|name, value|
+      self[name] = value
+    }
+
+    self
+  end
+
+  def [](name)
+    if data = @element["data-#{name}"]
+      return data
+    end
+
+    %x{
+      var value = #@native.$data[name];
+
+      if (value === undefined) {
+        return nil;
+      }
+      else {
+        return value;
+      }
+    }
+  end
+
+  def []=(name, value)
+    `delete #@native.$data[name]`
+    if [true, false, nil].include?(value)
+      @element["data-#{name}"] = value
+    elsif value.respond_to? :to_str
+      @element["data-#{name}"] = value.to_str
+    elsif value.respond_to? :to_int
+      @element["data-#{name}"] = value.to_int.to_s
+    else
+      `#@native.$data[name] = value`
+    end
+  end
+
+  def delete(name)
+    data = self[name]
+    self[name] = nil
+    data
+  end
+end
+
+end; end; end

data/opal/browser/dom/element/editable.rb

@@ -0,0 +1,47 @@
+module Browser; module DOM
+
+class Element < Node
+  # @!attribute editable
+  # @return [Boolean?] the value of contentEditable for this element
+  def editable
+    case `#@native.contentEditable`
+    when "true"
+      true
+    when "false"
+      false
+    when "inherit"
+      nil
+    end
+  end
+
+  def editable=(value)
+    value = case value
+    when true
+      "true"
+    when false
+      "false"
+    when nil
+      "inherit"
+    end
+    `#@native.contentEditable = #{value}`
+  end
+
+  def editable?
+    `#@native.isContentEditable`
+  end
+
+  # Execute a contentEditable command
+  def edit(command, value=nil)
+    command = command.gsub(/_./) { |i| i[1].upcase }
+    
+    focus
+
+    if value
+      `#{document}.native.execCommand(#{command}, false, #{value})`
+    else
+      `#{document}.native.execCommand(#{command}, false)`
+    end
+  end
+end
+
+end; end

data/opal/browser/dom/element/form.rb

@@ -0,0 +1,38 @@
+module Browser; module DOM; class Element < Node
+
+class Form < Element
+  def_selector "form"
+
+  # Capture the content of this form to a new {FormData} object,
+  #
+  # @return [FormData]
+  def form_data
+    FormData.create(self)
+  end
+
+  # Submit a form. This will fire a submit event.
+  def submit
+    `#@native.submit()`
+  end
+
+  # Reset a form. This will fire a reset event.
+  def reset
+    `#@native.reset()`
+  end
+
+  alias_native :action
+  alias_native :action=
+  alias_native :method
+  alias_native :method=
+  alias_native :target
+  alias_native :target=
+  alias_native :encoding
+  alias_native :encoding=
+
+  # Return a NodeSet containing all form controls belonging to this form element.
+  def controls
+    NodeSet[Native::Array.new(`#@native.elements`)]
+  end
+end
+
+end; end; end

data/opal/browser/dom/element/iframe.rb

@@ -0,0 +1,37 @@
+module Browser; module DOM; class Element < Node
+
+class Iframe < Element
+  def_selector "iframe"
+
+  # @!attribute src
+  # @return [String] the URL of the page to embed
+  alias_native :src
+  alias_native :src=
+
+  # @!attribute [r] content_window
+  # @return [Window] window of content of this iframe
+  def content_window
+    Browser::Window.new(`#@native.contentWindow`)
+  end
+
+  # @!attribute [r] content_document
+  # @return [Document] document of content of this iframe 
+  def content_document
+    DOM(`#@native.contentDocument || #@native.contentWindow.document`)
+  end
+
+  # Send a message to the iframe content's window.
+  #
+  # @param message [String] the message
+  # @param options [Hash] optional `to: target`
+  def send(message, options={})
+    content_window.send(message, options)
+  end
+end
+
+# Object is not an iframe, but acts the same.
+class Object < Iframe
+  def_selector "object"
+end
+
+end; end; end

data/opal/browser/dom/element/image.rb

@@ -1,6 +1,8 @@
 module Browser; module DOM; class Element < Node
 
 class Image < Element
+  def_selector "img"
+
   def complete?
     `#@native.complete`
   end

data/opal/browser/dom/element/input.rb

@@ -1,17 +1,64 @@
 module Browser; module DOM; class Element < Node
 
 class Input < Element
+  def_selector "input"
+
   def value
-    `#@native.value`
+    %x{
+      if (#@native.value == "") {
+        return nil;
+      }
+      else {
+        return #@native.value;
+      }
+    }
   end
 
   def value=(value)
     `#@native.value = #{value}`
   end
 
+  def name_
+    `#@native.name`
+  end
+
+  def type
+    `#@native.type`
+  end
+
+  def checked?
+    `#@native.checked`
+  end
+
+  def check!
+    `#@native.checked = 'checked'`
+  end
+
+  def uncheck!
+    `#@native.checked = ''`
+  end
+
+  def enabled?
+    `#@native.enabled`
+  end
+
+  def disable!
+    `#@native.disabled = 'disabled'`
+  end
+
+  def enable!
+    `#@native.disabled = ''`
+  end
+
   def clear
     `#@native.value = ''`
   end
+
+  # @!attribute [r] files
+  # @return [Array<File>] list of files attached to this {Input}
+  def files
+    Native::Array.new(`#@native.files`).map { |f| File.new(f.to_n) }
+  end
 end
 
 end; end; end

data/opal/browser/dom/element/media.rb

@@ -0,0 +1,17 @@
+module Browser; module DOM; class Element < Node
+
+class Media < Element
+  def play
+    `#@native.play()`
+  end
+end
+
+class Video < Media
+  def_selector "video"
+end
+
+class Audio < Media
+  def_selector "audio"
+end
+
+end; end; end

data/opal/browser/dom/element/offset.rb

@@ -3,6 +3,7 @@ module Browser; module DOM; class Element < Node
 class Offset
   attr_reader :element
 
+  # @private
   def initialize(element)
     @element = element
     @native  = element.to_n
@@ -12,6 +13,8 @@ class Offset
     DOM(`#@native.offsetParent || #{@element.document.root.to_n}`)
   end
 
+  # @!attribute x
+  # @return [Integer]
   def x
     get.x
   end
@@ -20,6 +23,8 @@ class Offset
     set value, nil
   end
 
+  # @!attribute y
+  # @return [Integer]
   def y
     get.y
   end

data/opal/browser/dom/element/position.rb

@@ -1,11 +1,15 @@
 module Browser; module DOM; class Element < Node
 
 class Position
+  attr_reader :element
+
+  # @private
   def initialize(element)
     @element = element
     @native  = element.to_n
   end
 
+  # @private
   def get
     offset        = @element.offset
     position      = offset.get
@@ -21,14 +25,19 @@ class Position
       parent_offset.y += parent.style['border-left-width'].to_i
     end
 
-    Browser::Position.new(position.x - parent_offset.x - @element.style['margin-left'].to_i,
-                          position.y - parent_offset.y - @element.style['margin-top'].to_i)
+    Browser::Position.new(
+      position.x - parent_offset.x - @element.style['margin-left'].to_i,
+      position.y - parent_offset.y - @element.style['margin-top'].to_i)
   end
 
+  # @!attribute [r] x
+  # @return [Integer] the position of the element on the x axis
   def x
     get.x
   end
 
+  # @!attribute [r] y
+  # @return [Integer] the position of the element on the y axis
   def y
     get.y
   end