fron 0.2.0rc1 → 1.0.0rc1

data/opal/fron/core_ext/time.rb

@@ -0,0 +1,6 @@
+# Time
+class Time
+  def to_date
+    Date.new year, month, day
+  end
+end

data/opal/fron/dom/document.rb

@@ -2,15 +2,18 @@ module DOM
   # This module is a wrapper for the native *document* object.
   module Document
     extend SingleForwardable
-    @doc = DOM::Element.new `document`
 
-    def_delegators :@doc, :find
+    def_delegators :doc, :find
 
     # Returns the active element
     #
     # @return [DOM::Element] The element
     def self.active_element
-      find ':focus'
+      doc.find ':focus'
+    end
+
+    def self.doc
+      DOM::Element.new `document`
     end
 
     # Returns the head element

data/opal/fron/dom/element.rb

@@ -4,6 +4,7 @@ module DOM
   # TODO: Describe the element creation ways here
   class Element < NODE
     extend ElementAccessor
+
     include Attributes
     include ClassList
     include Dimensions
@@ -20,16 +21,26 @@ module DOM
     # Modifier regexp
     MODIFIER_REGEXP    = /(#|\.)(.+?)(?=#|\.| |$)/
 
+    element_accessor :src
     element_accessor :value
     element_accessor :innerHTML, as: :html
 
-    element_accessor :readonly, default: false
-    element_accessor :checked,  default: false
-    element_accessor :disabled, default: false
+    element_accessor :readonly,        default: false
+    element_accessor :checked,         default: false
+    element_accessor :disabled,        default: false
+    element_accessor :spellcheck,      default: false
+    element_accessor :contentEditable, default: false, as: :contenteditable
+
+    element_accessor :scrollTop, as: :scroll_top, default: 0
+    element_accessor :scrollLeft, as: :scroll_left, default: 0
+    element_accessor :scrollWidth, as: :scroll_width, default: 0
+    element_accessor :scrollHeight, as: :scroll_height, default: 0
 
     element_method :focus
     element_method :blur
 
+    attribute_accessor :tabindex, default: nil
+
     # Initializes a new elment based on the data
     #
     # @param data [*] The data
@@ -38,21 +49,10 @@ module DOM
         tag, rest = data.match(TAG_REGEXP).to_a[1..2]
         @el = `document.createElement(#{tag})`
         `#{@el}._instance = #{self}`
-        rest = rest.gsub ATTRIBUTE_REGEXP do |match|
-          key, value = match.match(ATTRIBUTE_REGEXP).to_a[1..2]
-          self[key] = value
-          ''
-        end
-        rest = rest.gsub MODIFIER_REGEXP do |match|
-          type, value = match.match(MODIFIER_REGEXP).to_a[1..2]
-          case type
-          when '#'
-            self['id'] = value
-          when '.'
-            add_class value
-          end
-          ''
-        end
+
+        rest = apply_attributes rest
+        rest = apply_modifiers rest
+
         if (match = rest.match(/\s(.+)$/))
           self.text = match[0].strip
         end
@@ -128,6 +128,10 @@ module DOM
       DOM::NodeList.new `Array.prototype.slice.call(#{@el}.querySelectorAll(#{selector}))`
     end
 
+    def active?
+      DOM::Document.active_element == self
+    end
+
     # Returns the next element sibling
     #
     # @return [DOM::Element] The element
@@ -149,7 +153,7 @@ module DOM
     #
     # @return [Boolean] True if contains false if not
     def include?(other)
-      `#{@el}.contains(#{DOM::NODE.get_element(other)})`
+      `#{@el}.contains(#{DOM::NODE.get_element(other)})` || other == self
     end
 
     # Returns the path of the elemnt
@@ -164,5 +168,61 @@ module DOM
       end
       items.join ' '
     end
+
+    # Gets the z-index of the element
+    #
+    # @return [Number] The z-index
+    def z_index
+      `getComputedStyle(#{@el}).zIndex`.to_i
+    end
+
+    # Calls the click function on the element, this is needed for
+    # file inputs to programatically open the file browser.
+    #
+    # @return [Nil] Returns nothing
+    def click
+      `#{@el}.click() || Opal.nil`
+    end
+
+    def scroll_into_view
+      `#{@el}.scrollIntoView()`
+    end
+
+    def scroll_into_view_if_needed
+      `#{@el}.scrollIntoViewIfNeeded()`
+    end
+
+    private
+
+    # Applies attributes from the given string.
+    #
+    # @param string [String] The string
+    #
+    # @return [String] The string without the attributes
+    def apply_attributes(string)
+      string.gsub ATTRIBUTE_REGEXP do |match|
+        key, value = match.match(ATTRIBUTE_REGEXP).to_a[1..2]
+        self[key] = value
+        ''
+      end
+    end
+
+    # Applies modifiers from the given string.
+    #
+    # @param string [String] The string
+    #
+    # @return [String] The string without the modifiers
+    def apply_modifiers(string)
+      string.gsub MODIFIER_REGEXP do |match|
+        type, value = match.match(MODIFIER_REGEXP).to_a[1..2]
+        case type
+        when '#'
+          self['id'] = value
+        when '.'
+          add_class value
+        end
+        ''
+      end
+    end
   end
 end

data/opal/fron/dom/event.rb

@@ -110,7 +110,11 @@ module DOM
     #
     # @param name [String] The name of the method
     def method_missing(name)
-      `#{@event}[#{name}]`
+      `#{@event}[#{name}] || Opal.NIL`
+    end
+
+    def data
+      JSON.from_object(`#{@event}.data`)
     end
 
     # Returns the string represenation of the pressed key

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

@@ -48,20 +48,6 @@ module DOM
       `#{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

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

@@ -11,6 +11,31 @@ module DOM
       end
     end
 
+    # Defines a attributes accessor that is delegated to the
+    # underlying elements gieven attribute.
+    #
+    # Options:
+    # * **as** - Use this instead of the attribute as identifier
+    # * **default** - Return this value if the attribute is null or undefined
+    # * **coerce** - Coerse the string value of the attribute with this method
+    #
+    # @param attribute [Symbol] The attribute
+    # @param options [Hash] The options
+    def attribute_accessor(attribute, options = {})
+      options = { as: attribute, default: nil, coerce: nil }.merge!(options)
+
+      define_method options[:as] do
+        value = self[attribute] || options[:default]
+        next value unless options[:coerce]
+        value.send(options[:coerce])
+      end
+
+      define_method "#{options[:as]}=" do |value|
+        self[attribute] = value
+        send('_attribute_changed', attribute, value) if respond_to?(:_attribute_changed)
+      end
+    end
+
     # Defines a property accessor that is delegated to the
     # underlying element.
     #

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

@@ -101,7 +101,7 @@ module DOM
     def add_listener(type, capture = false)
       method = `function(e){#{ yield Event.new(`e`)}}`
 
-      @listeners       ||= {}
+      @listeners ||= {}
       @listeners[type] ||= []
       @listeners[type] << method
 

data/opal/fron/dom/node.rb

@@ -1,7 +1,9 @@
 require 'native'
 
 module DOM
-  # Node
+  # Low level wrapper for the Node class
+  #
+  # :reek:TooManyMethods
   class NODE
     include Events
     include Comparable
@@ -23,8 +25,8 @@ module DOM
     #
     # @param node [Native] The native node
     def initialize(node = nil)
-      fail 'A node must be provided!' unless node
-      fail 'Not a HTML Node given!' unless `#{node} instanceof Node`
+      raise 'A node must be provided!' unless node
+      raise 'Not a HTML Node given!' unless `#{node} instanceof Node`
       @el = node
       `#{@el}._instance = #{self}`
     end
@@ -108,7 +110,7 @@ module DOM
     # @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...
+      return what >> self unless where # Fix for firefox...
       `#{@el}.insertBefore(#{NODE.get_element what},#{NODE.get_element where})`
     end
 
@@ -147,7 +149,7 @@ module DOM
     # @return [Boolean] The compareable with the other node
     def <=>(other)
       return 0 if other == self
-      fail 'Nodes not Comparable!' if other.parent != parent
+      raise 'Nodes not Comparable!' if other.parent != parent
       other.index <=> index
     end
 

data/opal/fron/dom/style.rb

@@ -1,5 +1,3 @@
-# rubocop:disable MethodName
-
 module DOM
   # Style
   class Style

data/opal/fron/dom/window.rb

@@ -13,6 +13,20 @@ module DOM
       timeout { trigger 'popstate' }
     end
 
+    def self.replace_state(url)
+      return if url == state
+      `window.history.replaceState({},'',#{url})`
+      timeout { trigger 'popstate' }
+    end
+
+    def self.width
+      `window.innerWidth`
+    end
+
+    def self.height
+      `window.innerHeight`
+    end
+
     # Returns the locations pathname as state
     #
     # @return [String] The pathname

data/opal/fron/event_mock.rb

@@ -10,6 +10,13 @@ module EventMock
     # @return [Boolean] The verbosity
     attr_accessor :verbose
 
+    # Sets / gets the whether or not
+    # to mock events.
+    #
+    # @param value [Boolean] To mock or not
+    # @return [Boolean] The value
+    attr_accessor :mock
+
     # Triggers a syntetic event.
     #
     # @param element [DOM::Element] The element
@@ -35,20 +42,31 @@ module EventMock
         end
       end
       return unless `#{event}.propagate`
+      return unless element.respond_to?(:parent)
       return unless element.parent
       dispath_event element.parent, event, type
     end
 
     # Mocks triggers on DOM::Events
     def mock_events
-      DOM::Events.alias_method :old_trigger, :trigger
-      DOM::Events.define_method :trigger do |type, data = {}|
-        puts "Triggered syntetic event \"#{type}\" for \"#{path}\"" if EventMock.verbose
-        EventMock.trigger_event self, type, data
-      end
+      @mock = true
       yield
     ensure
-      DOM::Events.alias_method :trigger, :old_trigger
+      @mock = false
+    end
+  end
+end
+
+module DOM
+  # Events
+  module Events
+    # The old trigger method
+    alias old_trigger trigger
+
+    def trigger(type, data = {})
+      return old_trigger(type, data) if EventMock.mock
+      puts "Triggered syntetic event \"#{type}\" for \"#{path}\"" if EventMock.verbose
+      EventMock.trigger_event self, type, data
     end
   end
 end

data/opal/fron/js/scroll_into_view_if_needed.js

@@ -0,0 +1,27 @@
+if (!Element.prototype.scrollIntoViewIfNeeded) {
+  Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
+    centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
+
+    var parent = this.parentNode,
+        parentComputedStyle = window.getComputedStyle(parent, null),
+        parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
+        parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
+        overTop = this.offsetTop - parent.offsetTop < parent.scrollTop,
+        overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight),
+        overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft,
+        overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
+        alignWithTop = overTop && !overBottom;
+
+    if ((overTop || overBottom) && centerIfNeeded) {
+      parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2;
+    }
+
+    if ((overLeft || overRight) && centerIfNeeded) {
+      parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2;
+    }
+
+    if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
+      this.scrollIntoView(alignWithTop);
+    }
+  };
+}

data/opal/fron/js/syntetic_event.js

@@ -1,16 +1,23 @@
-SynteticEvent = function(target, data){
-  this.target = target
-  this.defaultPrevented = false
-  this.immediatePropagate = true
-  this.propagate = true
-  this.data = data
-}
+var SynteticEvent = function(target, data){
+  this.immediatePropagate = true;
+  this.defaultPrevented = false;
+  this.propagate = true;
+  this.target = target;
+  for (var key in data) {
+    this[key] = data[key];
+  }
+};
+
 SynteticEvent.prototype.stopImmediatePropagation = function(){
-  this.immediatePropagate = false
-}
+  this.immediatePropagate = false;
+};
+
 SynteticEvent.prototype.stopPropagation = function(){
-  this.propagate = false
-}
+  this.propagate = false;
+};
+
 SynteticEvent.prototype.preventDefault = function(){
-  this.defaultPrevented = true
-}
+  this.defaultPrevented = true;
+};
+
+window.SynteticEvent = SynteticEvent;

data/opal/fron/request/request.rb

@@ -1,7 +1,7 @@
 require 'json'
 
 module Fron
-  # Request
+  # Low level wrapper for the XMLHTTPRequest class
   class Request
     extend Eventable
     extend Forwardable
@@ -10,13 +10,13 @@ module Fron
     #
     # @param value [String] The URL
     # @return [String] The URL
-    attr_accessor :url
+    attr_reader :url
 
     # Sets / gets the headers for the request
     #
     # @param value [Hash] The headers
     # @return [Hash] The headers
-    attr_accessor :headers
+    attr_reader :headers
 
     def_delegators :class, :trigger
 
@@ -38,21 +38,23 @@ module Fron
     # @param data [Hash] The data
     #
     # @yieldparam response [Response] The response
-    def request(method = 'GET', data = nil, &callback)
-      if ready_state == 0 || ready_state == 4
-        @callback = callback
-        if method.upcase == 'UPLOAD'
-          send 'POST', @url, data.to_form_data
-        elsif method.upcase == 'GET' && data
-          send method, @url + '?' + data.to_query_string.to_s, nil
-        else
-          data = data.to_json if data
-          send method, @url, data
-        end
-        trigger :loading
-      else
-        fail 'The request is already running!'
-      end
+    def request(method = 'GET', data = {}, &callback)
+      raise 'The request is already running!' if ready_state != 0 && ready_state != 4
+      method = method.upcase
+      @callback = callback
+
+      args = case method
+             when 'UPLOAD'
+               ['POST', @url, data.to_form_data]
+             when 'GET'
+               [method, "#{@url}?#{data.to_query_string}"]
+             else
+               [method, @url, data.to_json]
+             end
+
+      send(*args)
+
+      trigger :loading
     end
 
     # Runs a GET request
@@ -90,7 +92,7 @@ module Fron
     # @param method [String] The method
     # @param url [String] The URL
     # @param data [*] The data
-    def send(method, url, data)
+    def send(method, url, data = nil)
       `#{@request}.open(#{method}, #{url})`
       `#{@request}.withCredentials = true`
       set_headers