opal-ferro 0.10.0 → 0.10.1

data/opal/opal-ferro/elements/ferro_form.js.rb

@@ -0,0 +1,257 @@
+module Ferro
+
+  # This module contains all form releated elements.
+  module Form
+    # Creates a form container.
+    # In the DOM creates a: <div>.
+    # A <div> is used instead of a <form> DOM element,
+    # so we don't have to prevent any default actions.
+    class Base < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype  = :div
+      end
+    end
+
+    # Creates an input element.
+    # In the DOM creates a: <input type="?">.
+    # Specify option :type to set the location.
+    # Use one of these values:
+    # :text, :password, :reset, :radio, :checkbox, :color,
+    # :date, :datetime-local, :email, :month, :number,
+    # :range, :search, :tel, :time, :url, :week.
+    # Or leave blank to create a :text input.
+    class Input < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :input
+        @options[:type] ||= :text
+        @options[:value] = option_replace :content
+        @disabled = option_replace :disabled, false
+      end
+
+      # Setter method for input value.
+      def value
+        `#{@element}.value`
+      end
+
+      # Getter method for input value.
+      def value=(value)
+        `#{@element}.value = #{value}`
+      end
+
+      # Set input focus to this element.
+      # TODO: Find out why this doesn't seem to work.
+      def set_focus
+        `#{element}.focus()`
+      end
+
+      # Internal method.
+      def _after_create
+        disable if @disabled
+
+        if [:text, :password, :number].include?(@options[:type])
+          `#{@element}.addEventListener("keydown",function(e){self.$keydowned(e);})`
+        end
+      end
+
+      # Callback for :text, :password, :number types.
+      # Catches 'enter' key and calls `entered`.
+      def keydowned(event)
+        entered if Native(event).keyCode == 13
+      end
+
+      # Callback for :text, :password, :number types.
+      # Override this method to catch the 'enter' key.
+      def entered;end
+
+      # Disable this input.
+      def disable
+        set_attribute(:disabled, :disabled)
+      end
+
+      # Enable this input.
+      def enable
+        remove_attribute(:disabled)
+      end
+    end
+
+    # Creates a label element.
+    # In the DOM creates a: <label>.
+    # Specify option :for with the id of the input as value
+    # to set couple the label to an input.
+    class Label < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :label
+      end
+    end
+
+    # Creates a fieldset element.
+    # In the DOM creates a: <fieldset>.
+    # Specify option :legend to set a title.
+    class Fieldset < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :fieldset
+        # @legend  = @options[:legend]
+      end
+    end
+
+    # Creates a textarea input element.
+    # In the DOM creates a: <textarea>.
+    # Specify option :size to set its size.
+    # Default size is: { rows: 40, cols: 5 }.
+    class Textarea < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :textarea
+        @size    = { rows: 40, cols: 5 }
+      end
+    end
+
+    # Creates a form output element.
+    # In the DOM creates a: <output>.
+    class Output < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :output
+      end
+    end
+
+    # Container class for all clickable elements.
+    class Clickable < Input
+
+      # Internal method.
+      def _after_create
+        `#{@element}.addEventListener("click",function(e){#{clicked};document.activeElement.blur()})`
+        super
+      end
+
+      # Override this method to define what happens after
+      # element has been clicked.
+      def clicked;end
+    end
+
+    # Creates a form button.
+    # In the DOM creates a: <input type='button'>.
+    class Button < Clickable
+
+      # Internal method.
+      def _before_create
+        @options[:type] = :button
+        super
+      end
+    end
+
+    # Creates a form submit button.
+    # In the DOM creates a: <input type='submit'>.
+    class Submit < Clickable
+
+      # Internal method.
+      def _before_create
+        @options[:type] = :submit
+        super
+      end
+    end
+
+    # Creates a clickable block element.
+    # In the DOM creates a: <div>.
+    class Block < Clickable
+
+      # Internal method.
+      def _before_create
+        super
+        @domtype = :div
+      end
+    end
+
+    # Creates a clickable checkbox.
+    # In the DOM creates a: <input type='checkbox'>.
+    class CheckBox < Clickable
+
+      # Internal method.
+      def _before_create
+        @options[:type] = :checkbox
+        super
+      end
+
+      # Test if checkbox is checked.
+      #
+      # @return [Boolean] True if checkbox is checked
+      def checked?
+        `#{@element}.checked`
+      end
+    end
+
+    # Creates a select list with options.
+    # In the DOM creates a: <select> and <option>.
+    # Specify option :list = Hash to set selectable options.
+    class Select < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :select
+        @list = option_replace :list, {}
+        super
+      end
+
+      # Internal method.
+      # TODO Use _after_create
+      def after_create
+        @list.each do |value, content|
+          add_option(value, content)
+        end
+
+        `#{@element}.addEventListener("change",function(e){#{changed};document.activeElement.blur()})`
+        super
+      end
+
+      # Override this method to specify what happens after the
+      # select elements value is changed.
+      def changed;end
+
+      # Manually add an option to the select element
+      #
+      # @param [String, Symbol] value Key of the option
+      # @param [String] content Content to be displayed in the select list
+      # @return [ElementVar] Returns the newly created element
+      def add_option(value, content)
+        add_child(
+          "opt_#{value}",
+          Element::Var,
+          domtype: :option,
+          value: value,
+          content: content
+        )
+      end
+
+      # Returns the currently selected option.
+      #
+      # @return [Hash] Returns a hash with keys: :option and :text
+      def selection
+        option = `#{element}.options[#{element}.selectedIndex].value`
+        text   = `#{element}.options[#{element}.selectedIndex].text`
+        { option: option, text: text }
+      end
+
+      # Set the selected option.
+      #
+      # @param [String, Symbol] option Key of the option
+      def select(option)
+        `for(var i=0; i < #{element}.options.length; i++) {
+          if (#{element}.options[i].value === #{option}) {
+            #{element}.selectedIndex = i;
+            break;
+          }
+        }`
+      end
+    end
+  end
+end

data/opal/opal-ferro/elements/ferro_inline.js.rb

@@ -0,0 +1,137 @@
+module Ferro
+
+  # This module contains all 'inline' elements.
+  module Element
+    # Creates a block element. Alias for BaseElement.
+    # In the DOM creates a: <div>.
+    class Block < BaseElement
+    end
+
+    # Creates an inline text element.
+    # In the DOM creates a: <p> or <h1> .. <h6> depending on
+    # option :size. Set to 1..6 to create <h.> elements.
+    # Leave option blank or use 0 to create <p> elements.
+    class Text < BaseElement
+
+      # Internal method.
+      def _before_create
+        @size    = option_replace :size, 0
+        @domtype = @size == 0 ? :p : "h#{@size}"
+      end
+    end
+
+    # Creates an inline element.
+    # In the DOM creates a: <ol> or <ul> depending on
+    # option :type. Set to '1', 'A', 'a', 'I' or 'i' to create <ol>
+    # elements. Leave option blank to create <ul> elements.
+    class List < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = @options.has_key?(:type) ? :ol : :ul
+        @items   = []
+        @id      = Sequence.new 'list_'
+      end
+
+      # Add an item to the (un)ordered list.
+      #
+      # @param [String] element_class Ruby classname for the new element
+      # @param [Hash] options Any options for the new element
+      def add_item(element_class, options = {})
+        @items << add_child(@id.next, element_class, options).sym
+      end
+
+      # The number of items in the list.
+      #
+      # @return [Integer] Returns the number of items in the list
+      def item_count
+        @items.length
+      end
+
+      # The first item in the list.
+      #
+      # @return [element] Returns first element in the list
+      def first_item
+        @children[@items.first]
+      end
+
+      # The last item in the list.
+      #
+      # @return [element] Returns last element in the list
+      def last_item
+        @children[@items.last]
+      end
+
+      # Remove an item from the (un)ordered list.
+      #
+      # @param [Symbol] sym The symbol of the item to be removed
+      def unlist_item(sym)
+        @items.delete_if { |item| item == sym }
+      end
+    end
+
+    # Creates an inline element.
+    # In the DOM creates a: <li>.
+    # To be used together with {List}.
+    class ListItem < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :li
+      end
+
+      # Remove this item from the list and the DOM.
+      def destroy
+        super
+        parent.unlist_item(@sym)
+      end
+    end
+
+    # Creates an inline element.
+    # In the DOM creates a: <a>.
+    # When link is clicked will navigate to the new location within the
+    # application or page 404 if not found.
+    # Specify option :href to set the location.
+    class Anchor < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :a
+        @href = @options[:href]
+      end
+
+      # Internal method.
+      def _after_create
+        `#{@element}.addEventListener("click",function(e){e.preventDefault();history.pushState(null,null,#{@href});#{clicked};document.activeElement.blur();})`
+      end
+
+      # Set a new html reference for this item.
+      #
+      # @param [String] value New reference
+      def update_href(value)
+        @href = value
+        set_attribute('href', @href)
+      end
+
+      # Callback for click event. Calls `router.navigated`.
+      # Override this method to change its behavior.
+      def clicked
+        router.navigated
+      end
+    end
+
+    # Creates an inline element.
+    # In the DOM creates a: <a>.
+    # When link is clicked will navigate to a location outside the
+    # application and in a new tab.
+    # Specify option :target to set the location.
+    class ExternalLink < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :a
+        @options[:target] ||= '_blank'
+      end
+    end
+  end
+end

data/opal/opal-ferro/elements/ferro_misc.js.rb

@@ -0,0 +1,60 @@
+module Ferro
+  module Element
+    # Creates a miscellaneous element.
+    # In the DOM creates a: <img>.
+    # Will be changed to use <figure> and <figcaption>
+    # Specify option :src to set the source url.
+    class Image < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :img
+        @options[:alt] ||= @options[:src]
+      end
+    end
+
+    # Creates a miscellaneous element.
+    # In the DOM creates a: <canvas>.
+    class Canvas < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :canvas
+      end
+    end
+
+    # Creates a miscellaneous element.
+    # In the DOM creates a: <script>.
+    # Specify option :invoke = false to prevent the script
+    # from being executed.
+    class Script < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = :script
+        @run     = option_replace :invoke, true
+      end
+
+      # Internal method.
+      def _after_create
+        load
+        invoke if @run
+      end
+
+      # Override method to specify the content of the Javascript.
+      def load;end
+
+      # Override method to specify the execution of the script.
+      def invoke;end
+    end
+
+    # Creates any kind of element depending on option :domtype.
+    class Var < BaseElement
+
+      # Internal method.
+      def _before_create
+        @domtype = option_replace :domtype, :div
+      end
+    end
+  end
+end

data/opal/opal-ferro/ferro_base_element.js.rb

@@ -0,0 +1,187 @@
+module Ferro
+  # This class encapsulates all functionality of
+  # Master Object Model elements.
+  # Every Ferro element should (indirectly) inherit from this class.
+  # Ferro elements should not be instanciated directly. Instead the parent
+  # element should call the add_child method.
+  class BaseElement
+
+    include Elementary
+    
+    attr_reader :parent, :sym, :children, :element, :domtype
+
+    # Create the element and continue the creation
+    # process (casading).
+    # Ferro elements should not be instanciated directly. Instead the
+    # parent element should call the add_child method.
+    #
+    # @param [String] parent The parent Ruby element
+    # @param [String] sym The symbolized name for the element
+    # @param [Hash] options Any options for the creation process
+    def initialize(parent, sym, options = {})
+      @parent   = parent
+      @sym      = sym
+      @children = {}
+      @element  = nil
+      @domtype  = :div
+      @states   = {}
+      @options  = options
+
+      creation
+    end
+
+    # Searches the element hierarchy upwards until the factory is found
+    def factory
+      @parent.factory
+    end
+
+    # Searches the element hierarchy upwards until the root element is
+    # found
+    def root
+      @parent.root
+    end
+
+    # Searches the element hierarchy upwards an element is found that is
+    # a component
+    def component
+      @parent.component
+    end
+
+    # Searches the element hierarchy upwards until the router is found
+    def router
+      @parent.router
+    end
+
+    # Delete a key from the elements options hash. Will be renamed
+    # to option_delete.
+    #
+    # @param [key] key Key of the option hash to be removed
+    # @param [value] default Optional value to use if option value is nil
+    # @return [value] Return the current option value or value of
+    #   default parameter
+    def option_replace(key, default = nil)
+      value = @options[key] || default
+      @options.delete(key) if @options.has_key?(key)
+      value
+    end
+
+    # Add states to the element. A state toggles a CSS class with the
+    # same (dasherized) name as the state.
+    # If the state is thruthy (not nil or true) the CSS class is added
+    # to the element. Otherwise the CSS class is removed.
+    #
+    # @param [Array] states An array of state names to add to the
+    #   element. All disabled (false) state initially.
+    def add_states(states)
+      states.each do |state|
+        add_state(state)
+      end
+    end
+
+    # Add a state to the element. A state toggles a CSS class with the
+    # same (dasherized) name as the state.
+    # If the state is thruthy (not nil or true) the CSS class is added
+    # to the element. Otherwise the CSS class is removed.
+    #
+    # @param [String] state The state name to add to the element
+    # @param [value] value The initial enabled/disabled state value
+    def add_state(state, value = false)
+      @states[state] = [factory.dasherize(state), value]
+      classify_state @states[state]
+    end
+
+    # Update the value of the state.
+    #
+    # @param [String] state The state name
+    # @param [Boolean] active The new value of the state. Pass
+    #   true to enable and set the CSS class
+    #   false to disable and remove the CSS class
+    #   nil to skip altering state and the CSS class
+    def update_state(state, active)
+      if !active.nil?
+        @states.each do |s, v|
+          v[1] = active if s == state
+          classify_state v
+        end
+      end
+    end
+
+    # Toggle the boolean value of the state
+    #
+    # @param [String] state The state name
+    def toggle_state(state)
+      @states.select { |s, _| s == state }.each do |s, v|
+        v[1] = !v[1]
+        classify_state v
+      end
+    end
+
+    # Add or remove the CSS class for the state
+    #
+    # @param [String] state The state name
+    def classify_state(state)
+      if state[1]
+        `#{element}.classList.add(#{state[0]})`
+      else
+        `#{element}.classList.remove(#{state[0]})`
+      end
+    end
+
+    # Determine if the state is active
+    #
+    # @param [String] state The state name
+    # @return [Boolean] The state value
+    def state_active?(state)
+      @states[state][1]
+    end
+
+    # Get the current html value of the element
+    #
+    # @return [String] The html value
+    def value
+      `#{@element}.innerHTML`
+    end
+
+    # Get the current text content of the element
+    #
+    # @return [String] The text value
+    def get_text
+      `#{@element}.textContent`
+    end
+
+    # Set the current text content of the element
+    #
+    # @param [String] value The new text value
+    def set_text(value)
+      # https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
+      `#{@element}.textContent = #{value}`
+    end
+
+    # Set the current html content of the element. Use with caution if
+    # the html content is not trusted, it may be invalid or contain scripts.
+    #
+    # @param [String] raw_html The new html value
+    def html(raw_html)
+      `#{@element}.innerHTML = #{raw_html}`
+    end
+
+    # Set an attribute value on the elements corresponding DOM element
+    #
+    # @param [String] name The attribute name
+    # @param [String] value The attribute value
+    def set_attribute(name, value)
+      if name == 'scrollTop'
+        `#{element}.scrollTop=#{value}`
+      else
+        `#{element}.setAttribute(#{name}, #{value})`
+      end
+    end
+
+    # Remove an attribute value on the elements corresponding DOM element
+    #
+    # @param [String] name The attribute name
+    def remove_attribute(name)
+      `#{element}.removeAttribute(#{name})`
+    end
+  end
+end