atome-opal-browser 0.3.9.5

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

@@ -0,0 +1,25 @@
+module Browser; module DOM; class Element < Node
+
+class Image < Element
+  def_selector "img"
+
+  def complete?
+    `#@native.complete`
+  end
+
+  def cross?
+    `#@native.crossOrigin`
+  end
+
+  def height
+    `#@native.naturalHeight`
+  end
+
+  def width
+    `#@native.naturalWidth`
+  end
+end
+
+Img = Image
+
+end; end; end

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

@@ -0,0 +1,64 @@
+module Browser; module DOM; class Element < Node
+
+class Input < Element
+  def_selector "input"
+
+  def 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,43 @@
+module Browser
+
+  module DOM
+
+    class Element < Node
+
+      class Media < Element
+        def play
+          `#@native.play()`
+        end
+
+        def pause
+          `#@native.pause()`
+        end
+
+        def muted
+          `#@native.muted=true`
+        end
+
+        def unmuted
+          `#@native.muted=false`
+        end
+
+        def currentTime= (val)
+          `#@native.currentTime = #{val}`
+        end
+
+        def currentTime
+          `#@native.currentTime`
+        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

@@ -0,0 +1,89 @@
+module Browser; module DOM; class Element < Node
+
+class Offset
+  attr_reader :element
+
+  # @private
+  def initialize(element)
+    @element = element
+    @native  = element.to_n
+  end
+
+  def parent
+    DOM(`#@native.offsetParent || #{@element.document.root.to_n}`)
+  end
+
+  # @!attribute x
+  # @return [Integer]
+  def x
+    get.x
+  end
+
+  def x=(value)
+    set value, nil
+  end
+
+  # @!attribute y
+  # @return [Integer]
+  def y
+    get.y
+  end
+
+  def y=(value)
+    set nil, value
+  end
+
+  if Browser.supports? 'Element.getBoundingClientRect'
+    def get
+      doc  = @element.document
+      root = doc.root.to_n
+      win  = doc.window.to_n
+
+      %x{
+        var box = #@native.getBoundingClientRect(),
+            y   = box.top + (#{win}.pageYOffset || #{root}.scrollTop) - (#{root}.clientTop || 0),
+            x   = box.left + (#{win}.pageXOffset || #{root}.scrollLeft) - (#{root}.clientLeft || 0);
+      }
+
+      Browser::Position.new(`x`, `y`)
+    end
+  else
+    def get
+      doc  = document
+      root = doc.root.to_n
+      win  = doc.window.to_n
+
+      %x{
+        var y = (#{win}.pageYOffset || #{root}.scrollTop) - (#{root}.clientTop || 0),
+            x = (#{win}.pageXOffset || #{root}.scrollLeft) - (#{root}.clientLeft || 0);
+      }
+
+      Browser::Position.new(`x`, `y`)
+    end
+  end
+
+  def set(*value)
+    position = @element.style![:position]
+
+    if position == :static
+      @element.style[:position] = :relative
+    end
+
+    offset = get
+    top    = @element.style![:top].to_u
+    left   = @element.style![:left].to_u
+
+    if Browser::Position === value.first
+      x, y = value.first.x, value.first.y
+    elsif Hash === value.first
+      x, y = value.first[:x], value.first[:y]
+    else
+      x, y = value
+    end
+
+    @element.style[:left] = (x.px - offset.x) + left if x
+    @element.style[:top]  = (y.px - offset.y) + top  if y
+  end
+end
+
+end; end; end

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

@@ -0,0 +1,46 @@
+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
+    parent        = offset.parent
+    parent_offset = Browser::Position.new(0, 0)
+
+    if @element.style[:position] == :fixed
+      unless parent =~ :html
+        parent_offset = parent.offset
+      end
+
+      parent_offset.x += parent.style['border-top-width'].to_i
+      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)
+  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
+end
+
+end; end; end