fron 0.1.4 → 0.2.0rc1

data/opal/fron/dom/{file-reader.rb → file_reader.rb}

@@ -1,12 +1,17 @@
 module DOM
+  # File Reader
   class FileReader
     include Events
 
+    # Initialzies the fire reader
     def initialize
       @el = `new FileReader()`
     end
 
-    def readAsDataURL(file)
+    # Read the given file as data url
+    #
+    # @param file [Native] The file
+    def read_as_data_url(file)
       return unless file
       `#{@el}.readAsDataURL(file.native)`
     end

data/opal/fron/dom/fragment.rb

@@ -1,5 +1,7 @@
 module DOM
+  # Fragment
   class Fragment < NODE
+    # Initializes the document fragment
     def initialize
       @el = `document.createDocumentFragment()`
     end

data/opal/fron/dom/modules/attributes.rb

@@ -0,0 +1,43 @@
+module DOM
+  # Attributes
+  module Attributes
+    # Returns the value of the attribute with the given name
+    #
+    # @param name [String] The name of the attribute
+    #
+    # @return [String] The value
+    def [](name)
+      `#{@el}.getAttribute(#{name}) || Opal.nil`
+    end
+
+    # Sets the value of the attribute with the given name with the given value
+    #
+    # @param name [String] The name
+    # @param value [String] The value
+    #
+    # @return [type] [description]
+    def []=(name, value)
+      if value
+        `#{@el}.setAttribute(#{name},#{value})`
+      else
+        remove_attribute name
+      end
+    end
+
+    # Returns if the element has the given attribute
+    #
+    # @param name [String] The attribute
+    #
+    # @return [Boolean] True / False
+    def attribute?(name)
+      `#{@el}.hasAttribute(#{name})`
+    end
+
+    # Removes the given attribute
+    #
+    # @param name [String] The attributes name
+    def remove_attribute(name)
+      `#{@el}.removeAttribute(#{name})`
+    end
+  end
+end

data/opal/fron/dom/modules/classlist.rb

@@ -1,26 +1,39 @@
 module DOM
+  # ClassList management for DOM::Element
   module ClassList
-    def addClass(*classes)
-      classes.each do |cls|
-        `#{@el}.classList.add(#{cls})`
-      end
+    # Adds classes to the class list
+    #
+    # @param classes [Array] The classes
+    def add_class(*classes)
+      classes.each { |cls| `#{@el}.classList.add(#{cls})` }
     end
 
-    def removeClass(*classes)
-      classes.each do |cls|
-        `#{@el}.classList.remove(#{cls})`
-      end
+    # Removes classes from the class list
+    #
+    # @param classes [Array] The classes
+    def remove_class(*classes)
+      classes.each { |cls| `#{@el}.classList.remove(#{cls})` }
     end
 
-    def hasClass(cls)
+    # Returns whether the class list has the given class or not
+    #
+    # @param cls [String] The class
+    #
+    # @return [Boolean] True if it has false if not
+    def has_class(cls)
       `#{@el}.classList.contains(#{cls})`
     end
 
-    def toggleClass(cls,value = nil)
-      if value || (value == nil && !hasClass(cls))
-        addClass cls
+    # Toggles the given class based on the second argument,
+    # or if omitted then toggles the class.
+    #
+    # @param cls [String] The class
+    # @param value [Boolean] The value
+    def toggle_class(cls, value = nil)
+      if value || (value.nil? && !has_class(cls))
+        add_class cls
       else
-        removeClass cls
+        remove_class cls
       end
     end
   end

data/opal/fron/dom/modules/dimensions.rb

@@ -1,35 +1,105 @@
 require 'native'
-
 module DOM
+  # Dimensions module for returning node like elements position on the screen.
+  #
+  # Features:
+  # * Accessors for *top*, *left*, *right*, *bottom*, width and height
+  # * Positions are compensated with *scroll* *position*
   module Dimensions
-
+    # Returns the top position of the element
+    #
+    # @return [Number] The top position
     def top
-      `#{clientRect}.top` + Window.scrollY
+      `#{client_rect}.top` + Window.scroll_y
     end
 
+    # Returns the left position of the element
+    #
+    # @return [Number] The left position
     def left
-      `#{clientRect}.left` + Window.scrollX
+      `#{client_rect}.left` + Window.scroll_x
     end
 
+    # Returns the right position of the element
+    #
+    # @return [Number] The right position
     def right
-      `#{clientRect}.right` + Window.scrollX
+      `#{client_rect}.right` + Window.scroll_x
     end
 
+    # Returns the bottom position of the element
+    #
+    # @return [Number] The bottom position
     def bottom
-      `#{clientRect}.bottom` + Window.scrollY
+      `#{client_rect}.bottom` + Window.scroll_y
     end
 
+    # Returns the width of the element
+    #
+    # @return [Number] The width
     def width
-      `#{clientRect}.width`
+      `#{client_rect}.width`
     end
 
+    # Returns the height of the element
+    #
+    # @return [Number] The height
     def height
-      `#{clientRect}.height`
+      `#{client_rect}.height`
+    end
+
+    # Returns the top scroll position of the element
+    #
+    # @return [Number] The height
+    def scroll_top
+      `#{@el}.scrollTop`
+    end
+
+    # Returns the left scroll position of the element
+    #
+    # @return [Number] The height
+    def scroll_left
+      `#{@el}.scrollLeft`
+    end
+
+    # Returns whether or not the element covers the given position
+    #
+    # @param pos [Point] The point
+    #
+    # @return [Boolean] True if covers false if not
+    def cover?(pos)
+      (left...(left + width)).cover?(pos.x) && (top...(top + height)).cover?(pos.y)
+    end
+
+    # Returns if the element is visible or not.
+    #
+    # The element is visible if:
+    # * The size is 0
+    #   * display: none
+    #   * Element not in the dom
+    #   * Width & Height set to 0
+    # * It is outside of the viewport
+    #
+    # The following is not checked because the element is still visible in a sense
+    # because it has a width & height but it is transparent.
+    # * opacity: 0
+    # * visibility: hidden
+    #
+    # @return [Boolean] True if visible, false if not
+    def visible?
+      size_visible  = width > 0 && height > 0
+      vert_visible  = ((`#{client_rect}.top` + height) > 0) && `#{client_rect}.top` < `window.innerHeight`
+      horiz_visible = ((`#{client_rect}.left` + width) > 0) && `#{client_rect}.left` < `window.innerWidth`
+
+      size_visible && vert_visible && horiz_visible
     end
 
     private
 
-    def clientRect
+    # Gets the bounding client rect of element.
+    #
+    # @return [Hash] The rect
+    def client_rect
       `#{@el}.getBoundingClientRect()`
     end
   end

data/opal/fron/dom/modules/element_accessor.rb

@@ -0,0 +1,35 @@
+module DOM
+  # Element accessor methods
+  module ElementAccessor
+    # Defines a method that is delegated to the
+    # underlying element.
+    #
+    # @param method [Symbol] The name of the method
+    def element_method(method)
+      define_method method do
+        `#{@el}[#{method}]()`
+      end
+    end
+
+    # Defines a property accessor that is delegated to the
+    # underlying element.
+    #
+    # Options:
+    # * **as** - Use this instead of the property as identifier
+    # * **default** - Return this value if the property is null or undefined
+    #
+    # @param property [Symbol] The property
+    # @param options [Hash] The options
+    def element_accessor(property, options = {})
+      options = { as: property, default: nil }.merge!(options)
+
+      define_method options[:as] do
+        `#{@el}[#{property}] || #{options[:default]}`
+      end
+
+      define_method "#{options[:as]}=" do |value|
+        `#{@el}[#{property}] = #{value}`
+      end
+    end
+  end
+end

data/opal/fron/dom/modules/events.rb

@@ -1,36 +1,71 @@
 module DOM
+  # Events module for managing events for elements and element like nodes (SVG Element for example).
+  #
+  # Features:
+  # * Store event listeners for listing and removal
+  # * Shorthand *on* and *on!* for non capture / capture
+  # * Triggering event dynamically
   module Events
+    # @return [Hash] The listeners in a hash
     attr_reader :listeners
 
+    # Triggers an event with the given type and data
+    #
+    # @param type [String] The type
+    # @param data [Hash] The data
     def trigger(type, data = {})
+      data = if data.is_a?(Event)
+               data.instance_variable_get('@event')
+             elsif data.respond_to?(:to_json)
+               `JSON.parse(#{data.to_json})`
+             end
       %x{
         var event = document.createEvent("HTMLEvents");
         event.initEvent(#{type}, true, true);
-        for (key in #{data}) {
-          value = #{data}[key];
+        dat = #{data};
+        for (key in dat) {
+          value = dat[key];
           event[key] = value;
         }
         #{@el}.dispatchEvent(event);
       }
     end
 
+    # Listens on the given type of event with capture
+    #
+    # @param type [String] The type
+    #
+    # @yieldparam event [Event] The event
     def on!(type, &listener)
-      _on type, true, &listener
+      add_listener type, true, &listener
     end
 
+    # Listens on the given type of event without capture
+    #
+    # @param type [String] The type
+    #
+    # @yieldparam event [Event] The event
     def on(type, &listener)
-      _on type, &listener
+      add_listener type, &listener
     end
 
+    # Removes events
+    #
+    # * If type and method given removes the exact event
+    # * If only type is given removes events with that type
+    # * If no arguments are passed removes all attached events
+    #
+    # @param type [String] The type
+    # @param method [Function] The listener returned from *on*
     def off(type = nil, method = nil)
       return unless @listeners
 
-      if type == nil
+      if type.nil?
         @listeners.keys.each do |ltype|
-          removeListeners ltype
+          remove_listeners ltype
         end
-      elsif method == nil
-        removeListeners type
+      elsif method.nil?
+        remove_listeners type
       else
         return unless @listeners[type].index(method)
         @listeners[type].delete method
@@ -39,23 +74,32 @@ module DOM
       end
     end
 
-    def delegate(type,selector, &listener)
+    # Delegates the events with the given type
+    # if they match the given selector
+    #
+    # @param type [String] The type
+    # @param selector [type] The selector
+    #
+    # @yieldparam event [Event] The event
+    def delegate(type, selector)
       on type do |event|
-        if event.target.matches selector
-          listener.call event
-        end
+        break unless event.target.matches selector
+        yield event
       end
     end
 
     private
 
-    def _on(type, capture = false, &listener)
-      klass = if defined? self.class::EVENT_TARGET_CLASS
-                self.class::EVENT_TARGET_CLASS
-              else
-                Hash
-              end
-      method = `function(e){#{ listener.call Event.new(`e`,klass)}}`
+    # Adds an event listener for the given type.
+    #
+    # @param type [String] The type
+    # @param capture [Boolean] To use capture or not
+    #
+    # @return [Function] The native function for later removal
+    #
+    # @yieldparam event [Event] The event
+    def add_listener(type, capture = false)
+      method = `function(e){#{ yield Event.new(`e`)}}`
 
       @listeners       ||= {}
       @listeners[type] ||= []
@@ -65,7 +109,10 @@ module DOM
       method
     end
 
-    def removeListeners(type)
+    # Removes all events with the given type
+    #
+    # @param type [String] The type
+    def remove_listeners(type)
       @listeners[type].each do |method|
         @listeners[type].delete method
         `#{@el}.removeEventListener(#{type},#{method})`

data/opal/fron/dom/node.rb

@@ -1,111 +1,170 @@
 require 'native'
 
 module DOM
+  # Node
   class NODE
-    EVENT_TARGET_CLASS = self
-
     include Events
     include Comparable
 
+    # Returns the ruby instance associated to the node,
+    # or creates a new instance if there is none.
+    #
+    # @param node [Native] The node
+    #
+    # @return [DOM::NODE] The ruby node
+    def self.from_node(node)
+      return nil unless node
+      instance = `#{node}._instance || Opal.nil`
+      return instance if instance && instance.is_a?(DOM::NODE)
+      new node
+    end
+
+    # Initializes the node with the given native node
+    #
+    # @param node [Native] The native node
     def initialize(node = nil)
-      raise "A node must be provided!" unless node
-      raise "Not a HTML Node given!" unless `#{node} instanceof Node`
+      fail 'A node must be provided!' unless node
+      fail 'Not a HTML Node given!' unless `#{node} instanceof Node`
       @el = node
+      `#{@el}._instance = #{self}`
     end
 
-    # Cloning
-    # ---------------------------------------
+    # Clones the node without child nodes
+    #
+    # @return [DOM::NODE] The new node
     def dup
       self.class.new `#{@el}.cloneNode()`
     end
 
+    # Clones the node with child nodes
+    #
+    # @return [DOM::NODE] The new node
     def dup!
       self.class.new `#{@el}.cloneNode(true)`
     end
 
-    # Hierarchy
-    # ---------------------------------------
-    def parentNode
-      el = `#{@el}.parentNode || false`
-      el ? DOM::NODE.new(el) : nil
+    # Returns the parent node
+    #
+    # @return [DOM::NODE] The parent node
+    def parent_node
+      DOM::Element.from_node `#{@el}.parentNode || Opal.nil`
     end
 
+    # Returns the parent element
+    #
+    # @return [DOM::NODE] The parent element
     def parent
-      el = `#{@el}.parentElement || false`
-      el ? DOM::NODE.new(el) : nil
+      DOM::Element.from_node `#{@el}.parentElement || Opal.nil`
     end
 
+    # Removes all the child nodes
     def empty
-      children.each { |node| node.remove! }
+      children.each(&:remove!)
     end
 
+    # Returns if the node is empty or not
+    #
+    # @return [Boolean] True if empty false if not
     def empty?
       `#{@el}.childNodes.length === 0`
     end
 
+    # Returns the child nodes as a NodeList
+    #
+    # @return [DOM::NodeList] The node list
     def children
       NodeList.new `Array.prototype.slice.call(#{@el}.childNodes)`
     end
 
-    # Remove
-    # ---------------------------------------
+    # Removes the given elment from the node
+    #
+    # @param el [DOM::NODE] The element
     def remove(el)
-      `#{@el}.removeChild(#{NODE.getElement el})`
+      `#{@el}.removeChild(#{NODE.get_element el})`
     end
 
+    # Removes self from parent node
     def remove!
       return unless parent
       parent.remove self
     end
 
-    # Hierarchy Manipulation
-    # ---------------------------------------
-    def << el
-      `#{@el}.appendChild(#{NODE.getElement el})`
+    # Inserts other node into self
+    #
+    # @param other [DOM::NODE] The other node
+    def <<(other)
+      `#{@el}.appendChild(#{NODE.get_element other})`
     end
 
-    def >> el
-      `#{NODE.getElement el}.appendChild(#{@el})`
+    # Inserts self into other node
+    #
+    # @param other [DOM::NODE] The other node
+    def >>(other)
+      `#{NODE.get_element other}.appendChild(#{@el})`
     end
 
-    def insertBefore(what,where)
+    # Inserts the given node before the other given node
+    #
+    # @param what [DOM::NODE] The node to insert
+    # @param where [DOM::NODE] The other node
+    def insert_before(what, where)
       return what >> self unless where # Fir for firefox...
-      `#{@el}.insertBefore(#{NODE.getElement what},#{NODE.getElement where})`
+      `#{@el}.insertBefore(#{NODE.get_element what},#{NODE.get_element where})`
     end
 
-    # Text manipulation
-    # ---------------------------------------
+    # Returns the text content of the node
+    #
+    # @return [String] The text content
     def text
       `#{@el}.textContent`
     end
 
+    # Sets the text content of the node with the given value
+    #
+    # @param text [String] The new value
     def text=(text)
       `#{@el}.textContent = #{text}`
     end
 
+    # Normalizes the node removing extra text nodes
     def normalize!
       `#{@el}.normalize()`
     end
 
-    # Comparabe methods
-    # ---------------------------------------
-    def ==(obj)
-      `#{NODE.getElement(obj)} === #{@el}`
+    # Compars self with other node
+    #
+    # @param other [DOM::NODE] Other node
+    #
+    # @return [Boolean] True if the same false if not
+    def ==(other)
+      `#{NODE.get_element(other)} === #{@el}`
     end
 
-    def <=>(obj)
-      if obj == self then return 0 end
-      if obj.parent != parent then raise 'Nodes not Comparable!' end
-      obj.index <=> index
+    # Compars self position with other node
+    #
+    # @param other [DOM::NODE] Other node
+    #
+    # @return [Boolean] The compareable with the other node
+    def <=>(other)
+      return 0 if other == self
+      fail 'Nodes not Comparable!' if other.parent != parent
+      other.index <=> index
     end
 
+    # Returns the index of the node
+    #
+    # @return [Integer] Zero based index
     def index
-      parent.children.index self
+      return nil unless parent
+      NodeList.new(`Array.prototype.slice.call(#{@el}.parentNode.children)`).index self
     end
 
-    private
-
-    def self.getElement(obj)
+    # Gets the native node from the given object
+    #
+    # @param obj [Object] The object
+    #
+    # @return [Native] The native node
+    def self.get_element(obj)
       if `#{obj} instanceof Node`
         obj
       elsif obj.is_a?(NODE)