fron 0.1.4 → 0.2.0rc1

data/opal/fron/core_ext/object.rb

@@ -0,0 +1,11 @@
+# Object
+# http://whytheluckystiff.net/articles/seeingMetaclassesClearly.html
+class Object
+  # Defines a class method
+  #
+  # @param name [String] The name of the method
+  # @param blk [Block] The body of the method
+  def meta_def(name, &blk)
+    (class << self; self; end).instance_eval { define_method name, &blk }
+  end
+end

data/opal/fron/core_ext/proc.rb

@@ -0,0 +1,19 @@
+# Proc
+class Proc
+  # Runs the given block after the given wait period
+  # if called continously
+  #
+  # @param ms [Numeric] The wait period
+  def throttle(ms)
+    Native `throttle(#{self}, #{ms}, {leading: false})`
+  end
+
+  # Runs the given block after the given wait period
+  # if called continously. The wait period restarts with each call
+  #
+  # @param ms [Numeric] The wait period
+  # @param leading [Boolean] To run the function at the start or not
+  def debounce(ms, leading = false)
+    Native `debounce(#{self}, #{ms}, #{leading})`
+  end
+end

data/opal/fron/{core-ext → core_ext}/string.rb

@@ -1,4 +1,8 @@
+# String
 class String
+  # Returns the camelized version of self
+  #
+  # @return [String] The camelized version
   def camelize
     `#{self}.replace(/(?:-|_|(\/))([a-z\d]*)/gi,function(m,first,second){
       return second.charAt(0).toUpperCase() + second.substr(1).toLowerCase()

data/opal/fron/dom.rb

@@ -1,13 +1,15 @@
-require './dom/modules/events'
-require './dom/modules/classlist'
-require './dom/modules/dimensions'
-require './dom/nodelist'
-require './dom/style'
-require './dom/node'
-require './dom/text'
-require './dom/element'
-require './dom/fragment'
-require './dom/document'
-require './dom/window'
-require './dom/event'
-require './dom/file-reader'
+require 'fron/dom/modules/events'
+require 'fron/dom/modules/classlist'
+require 'fron/dom/modules/dimensions'
+require 'fron/dom/modules/attributes'
+require 'fron/dom/modules/element_accessor'
+require 'fron/dom/nodelist'
+require 'fron/dom/style'
+require 'fron/dom/node'
+require 'fron/dom/text'
+require 'fron/dom/element'
+require 'fron/dom/fragment'
+require 'fron/dom/document'
+require 'fron/dom/window'
+require 'fron/dom/event'
+require 'fron/dom/file_reader'

data/opal/fron/dom/document.rb

@@ -1,28 +1,44 @@
 module DOM
+  # This module is a wrapper for the native *document* object.
   module Document
-    def self.activeElement
+    extend SingleForwardable
+    @doc = DOM::Element.new `document`
+
+    def_delegators :@doc, :find
+
+    # Returns the active element
+    #
+    # @return [DOM::Element] The element
+    def self.active_element
       find ':focus'
     end
 
+    # Returns the head element
+    #
+    # @return [DOM::Element] The head element
     def self.head
       @head ||= find 'head'
     end
 
+    # Returns the body element
+    #
+    # @return [DOM::Element] The body element
     def self.body
       @body ||= find 'body'
     end
 
+    # Returns the documents title
+    #
+    # @return [String] The title
     def self.title
       `document.title`
     end
 
+    # Sets the documents title with the given value
+    #
+    # @param value [String] The title
     def self.title=(value)
       `document.title = #{value}`
     end
-
-    def self.find(selector)
-      value = `document.querySelector(#{selector}) || false`
-      value ? DOM::Element.new(value) : nil
-    end
   end
 end

data/opal/fron/dom/element.rb

@@ -1,36 +1,60 @@
 module DOM
+  # Element
+  #
+  # TODO: Describe the element creation ways here
   class Element < NODE
+    extend ElementAccessor
+    include Attributes
     include ClassList
     include Dimensions
 
+    # @return [Style] The style object
     attr_reader :style
 
-    EVENT_TARGET_CLASS = self
+    # Attribute regexp
     ATTRIBUTE_REGEXP   = /\[(.*?)=(.*?)\]/
+
+    # Tag regexp
     TAG_REGEXP         = /(^[A-Za-z_\-0-9]+)(.*)/
+
+    # Modifier regexp
     MODIFIER_REGEXP    = /(#|\.)(.+?)(?=#|\.| |$)/
 
+    element_accessor :value
+    element_accessor :innerHTML, as: :html
+
+    element_accessor :readonly, default: false
+    element_accessor :checked,  default: false
+    element_accessor :disabled, default: false
+
+    element_method :focus
+    element_method :blur
+
+    # Initializes a new elment based on the data
+    #
+    # @param data [*] The data
     def initialize(data)
       if `typeof #{data} === 'string'`
-        match, tag, rest = data.match(TAG_REGEXP).to_a
+        tag, rest = data.match(TAG_REGEXP).to_a[1..2]
         @el = `document.createElement(#{tag})`
+        `#{@el}._instance = #{self}`
         rest = rest.gsub ATTRIBUTE_REGEXP do |match|
-          m,key,value = match.match(ATTRIBUTE_REGEXP).to_a
+          key, value = match.match(ATTRIBUTE_REGEXP).to_a[1..2]
           self[key] = value
           ''
         end
         rest = rest.gsub MODIFIER_REGEXP do |match|
-          m,type,value = match.match(MODIFIER_REGEXP).to_a
+          type, value = match.match(MODIFIER_REGEXP).to_a[1..2]
           case type
-          when "#"
+          when '#'
             self['id'] = value
-          when "."
-            addClass value
+          when '.'
+            add_class value
           end
           ''
         end
-        if (m = rest.match /\s(.+)$/)
-          self.text = m[0].strip
+        if (match = rest.match(/\s(.+)$/))
+          self.text = match[0].strip
         end
       else
         super data
@@ -38,6 +62,11 @@ module DOM
       @style = Style.new @el
     end
 
+    # Returns whether or not the element matches the given selector
+    #
+    # @param selector [String] The selector
+    #
+    # @return [Boolean] True if matches false if not
     def matches(selector)
       %x{
         var proto = Element.prototype
@@ -50,81 +79,90 @@ module DOM
       }
     end
 
-    # Visiblity
-    # --------------------------------
+    # Hides the element
     def hide
       @style.display = 'none'
     end
 
+    # Shows the element
     def show
-      @style.display = 'block'
-    end
-
-    # Attribute access
-    # --------------------------------
-    def [](name)
-      `#{@el}.getAttribute(#{name})`
-    end
-
-    def []=(name,value)
-      `#{@el}.setAttribute(#{name},#{value})`
-    end
-
-    # Traversing
-    # --------------------------------
-    def find(selector)
-      value = `#{@el}.querySelector(#{selector}) || false`
-      value ? DOM::Element.new(value) : nil
-    end
-
-    # HTML Modification
-    # --------------------------------
-    def html
-      `#{@el}.innerHTML`
-    end
-
-    def html=(value)
-      `#{@el}.innerHTML = #{value}`
-    end
-
-    def value
-      `#{@el}.value`
-    end
-
-    def value=(value)
-      `#{@el}.value = #{value}`
-    end
-
-    def checked
-      `!!#{@el}.checked`
-    end
-
-    def checked=(value)
-      `#{@el}.checked = #{value}`
-    end
-
-    def disabled
-      `#{@el}.disabled`
-    end
-
-    def disabled=(value)
-      `#{@el}.disabled = #{value}`
-    end
-
-    def focus
-      `#{@el}.focus()`
+      @style.display = ''
     end
 
+    # Return the files of the element
+    #
+    # @return [Array] The files
     def files
       Native `#{@el}.files`
     end
 
+    # Returns the lowercased tag name of the lement
+    #
+    # @return [String] The tag name
     def tag
       `#{@el}.tagName`.downcase
     end
 
+    # Returns the id of the element
+    #
+    # @return [String] The id
     def id
       self['id']
     end
+
+    # Returns the element matching the given selector or nil
+    #
+    # @param selector [String] The selector
+    #
+    # @return [DOM::Element] The element
+    def find(selector)
+      DOM::Element.from_node `#{@el}.querySelector(#{selector}) || Opal.nil`
+    end
+
+    # Finds all of the elements matching the selector.
+    #
+    # @param selector [String] The selector
+    #
+    # @return [NodeList] The elements
+    def find_all(selector)
+      DOM::NodeList.new `Array.prototype.slice.call(#{@el}.querySelectorAll(#{selector}))`
+    end
+
+    # Returns the next element sibling
+    #
+    # @return [DOM::Element] The element
+    def next
+      DOM::Element.from_node `#{@el}.nextElementSibling || Opal.nil`
+    end
+
+    # Returns the previous element sibling
+    #
+    # @return [DOM::Element] The element
+    def previous
+      DOM::Element.from_node `#{@el}.previousElementSibling || Opal.nil`
+    end
+
+    # Returns whether or not the given node
+    # is inside the node.
+    #
+    # @param other [DOM::NODE] The other node
+    #
+    # @return [Boolean] True if contains false if not
+    def include?(other)
+      `#{@el}.contains(#{DOM::NODE.get_element(other)})`
+    end
+
+    # Returns the path of the elemnt
+    #
+    # @return [String] The path
+    def path
+      element = self
+      items = [element.tag]
+      while element.parent
+        items.unshift element.parent.tag
+        element = element.parent
+      end
+      items.join ' '
+    end
   end
 end

data/opal/fron/dom/event.rb

@@ -1,6 +1,7 @@
 module DOM
+  # Event
   class Event
-
+    # Special keys for converions
     SPECIAL_KEYS = {
       8 => 'backspace',
       9 => 'tab',
@@ -94,95 +95,164 @@ module DOM
       221 => ']',
       222 => '\'',
       224 => 'cmd',
-      57392 => 'ctrl',
-      63289 => 'num'
+      57_392 => 'ctrl',
+      63_289 => 'num'
     }
 
-    def initialize(e,targetClass)
-      @e = e
-      @targetClass = targetClass
+    # Initializes the event
+    #
+    # @param event [Event] The native event
+    def initialize(event)
+      @event = event
+    end
+
+    # Runs missing method calls
+    #
+    # @param name [String] The name of the method
+    def method_missing(name)
+      `#{@event}[#{name}]`
     end
 
+    # Returns the string represenation of the pressed key
+    #
+    # @return [String] The pressed key
     def key
-      return SPECIAL_KEYS[keyCode] if SPECIAL_KEYS[keyCode]
-      `String.fromCharCode(#{keyCode}).toLowerCase()`
+      return SPECIAL_KEYS[key_code] if SPECIAL_KEYS[key_code]
+      `String.fromCharCode(#{key_code}).toLowerCase()`
     end
 
-    def stopImmediatePropagation
-      `#{@e}.stopImmediatePropagation()`
+    # Stops the immediate propagation of the event
+    def stop_immediate_propagation
+      `#{@event}.stopImmediatePropagation()`
     end
 
-    def dataTransfer
-      Native `#{@e}.dataTransfer`
+    # Returns the native dataTransfrer object
+    #
+    # @return [Object] The object
+    def data_transfer
+      Native `#{@event}.dataTransfer`
     end
 
+    # Returns the index of the pressed mouse button
+    #
+    # @return [Numeric] The index
     def button
-      `#{@e}.button`
+      `#{@event}.button`
     end
 
+    # Returns the target of the event
+    #
+    # @return [DOM::NODE] The target
     def target
-      @targetClass.new `#{@e}.target`
+      DOM::Element.from_node `#{@event}.target`
     end
 
-    def charCode
-      `#{@e}.charCode`
+    # Returns the character code of the pressed key
+    #
+    # @return [Numeric] The code
+    def char_code
+      `#{@event}.charCode`
     end
 
-    def keyCode
-      `#{@e}.keyCode`
+    # Returns the key code of the pressed key
+    #
+    # @return [Numeric] The code
+    def key_code
+      `#{@event}.keyCode`
     end
 
+    # Stops the event
     def stop
-      preventDefault
-      stopPropagation
+      prevent_default
+      stop_immediate_propagation
+      stop_propagation
+    end
+
+    # Returns whether the default was prevented or not
+    #
+    # @return [Boolean] True if it has false if not
+    def default_prevented?
+      `#{@event}.defaultPrevented`
     end
 
-    def preventDefault
-      `#{@e}.preventDefault()`
+    # Prevents the default action of the event
+    def prevent_default
+      `#{@event}.preventDefault()`
     end
 
-    def stopPropagation
-      `#{@e}.stopPropagation()`
+    # Stops the propagation of the event
+    def stop_propagation
+      `#{@event}.stopPropagation()`
     end
 
-    def pageX
-      `#{@e}.pageX`
+    # Returns the pageX coordinate of the event
+    #
+    # @return [Numeric] The coordinate
+    def page_x
+      `#{@event}.pageX`
     end
 
-    def pageY
-      `#{@e}.pageY`
+    # Returns the pageY coordinate of the event
+    #
+    # @return [Numeric] The coordinate
+    def page_y
+      `#{@event}.pageY`
     end
 
-    def screenX
-      `#{@e}.screenX`
+    # Returns the screenX coordinate of the event
+    #
+    # @return [Numeric] The coordinate
+    def screen_x
+      `#{@event}.screenX`
     end
 
-    def screenY
-      `#{@e}.screenY`
+    # Returns the screenY coordinate of the event
+    #
+    # @return [Numeric] The coordinate
+    def screen_y
+      `#{@event}.screenY`
     end
 
-    def clientX
-      `#{@e}.clientX`
+    # Returns the clientX coordinate of the event
+    #
+    # @return [Numeric] The coordinate
+    def client_x
+      `#{@event}.clientX`
     end
 
-    def clientY
-      `#{@e}.clientY`
+    # Returns the clientY coordinate of the event
+    #
+    # @return [Numeric] The coordinate
+    def client_y
+      `#{@event}.clientY`
     end
 
+    # Returns whether the alt key has been pressed
+    #
+    # @return [Boolan] True if pressed false if not
     def alt?
-      `#{@e}.altKey`
+      `#{@event}.altKey`
     end
 
+    # Returns whether the shift key has been pressed
+    #
+    # @return [Boolan] True if pressed false if not
     def shift?
-      `#{@e}.shiftKey`
+      `#{@event}.shiftKey`
     end
 
+    # Returns whether the control key has been pressed
+    #
+    # @return [Boolan] True if pressed false if not
     def ctrl?
-      `#{@e}.ctrlKey`
+      `#{@event}.ctrlKey`
     end
 
+    # Returns whether the meta (apple) key has been pressed
+    #
+    # @return [Boolan] True if pressed false if not
     def meta?
-      `#{@e}.metaKey`
+      `#{@event}.metaKey`
     end
   end
 end