opal-browser 0.2.0 → 0.3.3

data/opal/browser/dom/document.rb

@@ -1,6 +1,8 @@
 module Browser; module DOM
 
 class Document < Element
+  include DocumentOrShadowRoot
+
   # Get the first element matching the given ID, CSS selector or XPath.
   #
   # @param what [String] ID, CSS selector or XPath
@@ -24,20 +26,67 @@ class Document < Element
   # @return [Element?] the body element of the document
   def body
     DOM(`#@native.body`)
+  rescue ArgumentError
+    raise '$document.body is not defined; try to wrap your code in $document.ready{}'
   end
 
   # Create a new element for the document.
   #
   # @param name [String] the node name
-  # @param options [Hash] optional `:namespace` name
+  # @param builder [Browser::DOM::Builder] optional builder to append element to
+  # @param options [String] :namespace optional namespace name
+  # @param options [String] :is optional WebComponents is parameter
+  # @param options [String] :id optional id to set
+  # @param options [Array<String>] :classes optional classes to set
+  # @param options [Hash] :attrs optional attributes to set
   #
   # @return [Element]
-  def create_element(name, options = {})
+  def create_element(name, builder=nil, **options, &block)
+    opts = {}
+
+    if options[:is] ||= (options.dig(:attrs, :is))
+      opts[:is] = options[:is]
+    end
+
     if ns = options[:namespace]
-      DOM(`#@native.createElementNS(#{ns}, #{name})`)
+      elem = `#@native.createElementNS(#{ns}, #{name}, #{opts.to_n})`
     else
-      DOM(`#@native.createElement(name)`)
+      elem = `#@native.createElement(name, #{opts.to_n})`
     end
+
+    if options[:classes]
+      `#{elem}.className = #{Array(options[:classes]).join(" ")}`
+    end
+
+    if options[:id]
+      `#{elem}.id = #{options[:id]}`
+    end
+
+    if options[:attrs]
+      options[:attrs].each do |k,v|
+        next unless v
+        `#{elem}.setAttribute(#{k}, #{v})`
+      end
+    end
+
+    dom = DOM(elem)
+
+    if block_given?
+      dom.inner_dom(builder, &block)
+    end
+
+    if builder
+      builder << dom
+    end
+
+    dom
+  end
+
+  # Create a new document fragment.
+  #
+  # @return [DocumentFragment]
+  def create_document_fragment
+    DOM(`#@native.createDocumentFragment()`)
   end
 
   # Create a new text node for the document.
@@ -49,6 +98,15 @@ class Document < Element
     DOM(`#@native.createTextNode(#{content})`)
   end
 
+  # Create a new comment node for the document.
+  #
+  # @param content [String] the comment content
+  #
+  # @return [Comment]
+  def create_comment(content)
+    DOM(`#@native.createComment(#{content})`)
+  end
+
   def document
     self
   end
@@ -98,7 +156,13 @@ class Document < Element
 
   # Check if the document is ready.
   def ready?
-    `#@native.readyState === "complete"`
+    `#@native.readyState === "complete" || #@native.readyState === "interactive"`
+  end
+
+  # @!attribute referrer
+  # @return [String] the referring document, or empty string if direct access
+  def referrer
+    `#@native.referrer`
   end
 
   # @!attribute root
@@ -111,14 +175,6 @@ class Document < Element
     `#@native.documentElement = #{Native.convert(element)}`
   end
 
-  # @!attribute [r] style_sheets
-  # @return [Array<CSS::StyleSheet>] the style sheets for the document
-  def style_sheets
-    Native::Array.new(`#@native.styleSheets`) {|e|
-      CSS::StyleSheet.new(e)
-    }
-  end
-
   # @!attribute title
   # @return [String] the document title
   def title
@@ -129,6 +185,18 @@ class Document < Element
     `#@native.title = value`
   end
 
+  # @!attribute [r] hidden?
+  # @return [Boolean] is the page considered hidden?
+  def hidden?
+    `#@native.hidden`
+  end
+
+  # @!attribute [r] visibility
+  # @return [String] the visibility state of the document - prerender, hidden or visible
+  def visibility
+    `#@native.visibilityState`
+  end
+
   if Browser.supports? 'Document.view'
     def window
       Window.new(`#@native.defaultView`)

data/opal/browser/dom/document_fragment.rb

@@ -1,7 +1,25 @@
 module Browser; module DOM
 
+# TODO: DocumentFragment is not a subclass of Element, but
+#       a subclass of Node. It implements a ParentNode.
+#
+# @see https://github.com/opal/opal-browser/pull/46
 class DocumentFragment < Element
+  def self.new(node)
+    if self == DocumentFragment
+      if defined? `#{node}.mode`
+        ShadowRoot.new(node)
+      else
+        super
+      end
+    else
+      super
+    end
+  end
 
+  def self.create
+    $document.create_document_fragment
+  end
 end
 
 end; end

data/opal/browser/dom/document_or_shadow_root.rb

@@ -0,0 +1,19 @@
+module Browser; module DOM
+
+# Document and ShadowRoot have some methods and properties in common.
+# This solution mimics how it's done in DOM.
+#
+# @see https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot
+module DocumentOrShadowRoot
+  # @!attribute [r] style_sheets
+  # @return [Array<CSS::StyleSheet>] the style sheets for the document
+  def style_sheets
+    Native::Array.new(`#@native.styleSheets`) {|e|
+      CSS::StyleSheet.new(e)
+    }
+  end
+
+  alias stylesheets style_sheets
+end
+
+end; end

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

@@ -32,9 +32,17 @@ class Attributes
       end
 
       if namespace = options[:namespace] || @namespace
-        `#@native.setAttributeNS(#{namespace.to_s}, #{name.to_s}, #{value})`
+        if value
+          `#@native.setAttributeNS(#{namespace.to_s}, #{name.to_s}, #{value})`
+        else
+          `#@native.removeAttributeNS(#{namespace.to_s}, #{name.to_s})`
+        end
       else
-        `#@native.setAttribute(#{name.to_s}, #{value.to_s})`
+        if value
+          `#@native.setAttribute(#{name.to_s}, #{value.to_s})`
+        else
+          `#@native.removeAttribute(#{name.to_s})`
+        end
       end
     end
   else
@@ -48,13 +56,29 @@ class Attributes
 
     def []=(name, value, options = {})
       if namespace = options[:namespace] || @namespace
-        `#@native.setAttributeNS(#{namespace.to_s}, #{name.to_s}, #{value})`
+        if value
+          `#@native.setAttributeNS(#{namespace.to_s}, #{name.to_s}, #{value})`
+        else
+          `#@native.removeAttributeNS(#{namespace.to_s}, #{name.to_s})`
+        end
       else
-        `#@native.setAttribute(#{name.to_s}, #{value.to_s})`
+        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)

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

@@ -36,7 +36,7 @@ class Data
 
   def assign(data)
     data.each {|name, value|
-      `#@native.$data[name] = value`
+      self[name] = value
     }
 
     self
@@ -60,7 +60,22 @@ class Data
   end
 
   def []=(name, value)
-    `#@native.$data[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
 

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,6 +1,8 @@
 module Browser; module DOM; class Element < Node
 
 class Input < Element
+  def_selector "input"
+
   def value
     %x{
       if (#@native.value == "") {
@@ -16,13 +18,47 @@ class Input < Element
     `#@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