fron-ui 1.0.0rc2

data/lib/fron-ui.rb

@@ -0,0 +1 @@
+require 'fron_ui'

data/lib/fron_ui.rb

@@ -0,0 +1,5 @@
+require 'fron'
+require 'fron_ui/version'
+
+Opal.use_gem 'color'
+Opal.append_path File.expand_path('../../opal', __FILE__).untaint

data/lib/fron_ui/version.rb

@@ -0,0 +1,7 @@
+# Fron
+module Fron
+  # UI
+  module UI
+    VERSION = '1.0.0rc2'
+  end
+end

data/opal/fron-ui/base.rb

@@ -0,0 +1,49 @@
+# UI Module
+module UI
+  # Base Component
+  class Base < Fron::Component
+    tag 'ui-base'
+
+    style '&[disabled]' => { pointerEvents: :none,
+                             userSelect: :none,
+                             opacity: 0.4 }
+
+    attribute_accessor :tabindex
+
+    # Disabled state
+    #
+    # * Doesn't trigger events -> ???
+    # * Not selectable -> pointer-events: none;
+    # * Cannot be tabbed -> remove tabindex if there is one?
+    def disabled=(value)
+      super
+      if disabled
+        self[:_tabindex] = self[:tabindex] if self[:tabindex]
+        remove_attribute :tabindex
+        self[:disabled] = ''
+      else
+        self[:tabindex] = self[:_tabindex] if self[:_tabindex]
+        remove_attribute :_tabindex
+        remove_attribute :disabled
+      end
+    end
+
+    # Sets the readonly state
+    #
+    # @param value [Boolean] The value
+    def readonly=(value)
+      if value
+        self[:readonly] = ''
+      else
+        remove_attribute :readonly
+      end
+    end
+
+    # Sets the flex value
+    #
+    # @param value [Numeric] The value
+    def flex=(value)
+      @style.flex = value
+    end
+  end
+end

data/opal/fron-ui/behaviors/action.rb

@@ -0,0 +1,40 @@
+module UI
+  # Behaviors
+  module Behaviors
+    # Behavior for managing components
+    # that can respond to **action** - enter / space
+    #
+    # @author Gusztáv Szikszai
+    # @since  0.1.0
+    module Action
+      # Sets up the behavior:
+      #
+      # * Includes keydown behavior
+      # * Sets styles for :focus and :hover states
+      # * Sets up actions for enter and space
+      #
+      # @param base [Fron::Component] The includer
+      def self.included(base)
+        base.include Behaviors::Keydown
+        base.style cursor: :pointer,
+                   userSelect: :none,
+                   '> *' => { pointerEvents: :none },
+                   '&:focus, &:hover' => {
+                     color: -> { colors.focus },
+                     outline: :none
+                   }
+
+        base.keydown [:enter, :space], :action
+      end
+
+      # Action method, to be overriden.
+      #
+      # * Triggers click event
+      #
+      # @abstract
+      def action
+        trigger :click
+      end
+    end
+  end
+end

data/opal/fron-ui/behaviors/actions.rb

@@ -0,0 +1,40 @@
+module UI
+  module Behaviors
+    # Behaviors to handle basic method
+    # delegation via **action** attributes
+    # of the child components
+    #
+    # @author Gusztáv Szikszai
+    # @since  0.1.0
+    module Actions
+      IS_TOUCH = `'ontouchstart' in window && !window._phantom`
+
+      METHOD = IS_TOUCH ? :touchstart : :click
+
+      # Sets up the behavior:
+      #
+      # * Sets up event for the action
+      #
+      # @param base [Fron::Component] The includer
+      def self.included(base)
+        base.on METHOD, '[action]', :handle_action
+      end
+
+      private
+
+      # Handles the action event:
+      #
+      # * calls the method named as the
+      #   targets action attribute
+      # * stops the event
+      #
+      # @param event [DOM::Event] The event
+      def handle_action(event)
+        method = event.target[:action]
+        return unless respond_to?(method)
+        event.stop
+        send method, event
+      end
+    end
+  end
+end

data/opal/fron-ui/behaviors/confirmation.rb

@@ -0,0 +1,23 @@
+module UI
+  module Behaviors
+    # Behavior for defining methods with
+    # a confirmation dialog, the given method
+    # only will be called if the user accepts.
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    module Confirmation
+      # Sets up the behavior.
+      #
+      # @param base [Fron::Component] The includer
+      def self.included(base)
+        base.meta_def :confirmation do |name, message|
+          base.define_method "confirm_#{name}" do |*args|
+            break if message && !confirm(message)
+            send name, *args
+          end
+        end
+      end
+    end
+  end
+end

data/opal/fron-ui/behaviors/dropdown.rb

@@ -0,0 +1,27 @@
+module UI
+  module Behaviors
+    # Behavior for managing opening / closing
+    # of a dropdown.
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    module Dropdown
+      # Sets up the behavior.
+      #
+      # @param base [Fron::Component] The includer
+      def self.included(base)
+        base.register self, [:dropdown]
+      end
+
+      # Handles the initialization of
+      # the component
+      #
+      # @param item [Hash] The arguments
+      def self.dropdown(item)
+        input, dropdown = item[:args].map { |id| instance_variable_get("@#{id}") }
+        input.on(:focus) { dropdown.open }
+        input.on(:blur)  { dropdown.close }
+      end
+    end
+  end
+end

data/opal/fron-ui/behaviors/file.rb

@@ -0,0 +1,48 @@
+module UI
+  module Behaviors
+    module File
+      class << self
+        def handle_change
+          return unless file
+          @instance.send(@instance._on_file_select, file)
+          file_input.value = ''
+        end
+
+        def file_input
+          @file_input ||= create_file_input
+        end
+
+        def file
+          file_input.files[0]
+        end
+
+        def create_file_input
+          input = DOM::Element.new :input
+          input[:type] = :file
+          input.on(:change) { handle_change }
+          input >> DOM::Document.body
+          input.hide
+          input
+        end
+
+        def included(base)
+          base.register self, [:on_file_select]
+          base.attr_reader :_on_file_select
+        end
+
+        def select(instance)
+          @instance = instance
+          file_input.click
+        end
+
+        def on_file_select(item)
+          @_on_file_select = item[:args][0]
+        end
+      end
+
+      def select_file
+        UI::Behaviors::File.select self
+      end
+    end
+  end
+end

data/opal/fron-ui/behaviors/intendable_children.rb

@@ -0,0 +1,76 @@
+module UI
+  module Behaviors
+    # Behavior for handling intent for selecting
+    # elements.
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    module IntendableChildren
+      # Sets up the behavior:
+      #
+      # * Sets styles for children
+      #
+      # @param base [Fron::Component] The includer
+      def self.included(base)
+        base.style '> .hidden' => { display: :none },
+                   '> *:hover' => { background: -> { dampen colors.input, 0.05 } },
+                   '> *.intended' => { background: -> { dampen colors.input, 0.1 } }
+      end
+
+      # Intends selection for the
+      # next intendable item
+      def intend_next
+        intend_with :first, :next
+      end
+
+      # Intends selection for the
+      # previous intendable item
+      def intend_previous
+        intend_with :last, :previous
+      end
+
+      # Intends an item
+      #
+      # @param tail [Symbol] First or last
+      # @param method [Symbol] Next or previous
+      def intend_with(tail, method)
+        children = intend_children
+        index = children.index(intended)
+        next_indenteded = begin
+                            case method
+                            when :next
+                              children[index + 1]
+                            when :previous
+                              children[index - 1]
+                            end
+                          rescue
+                            nil
+                          end
+        intend next_indenteded || intend_children.send(tail)
+      end
+
+      # Intends the given item
+      #
+      # @param item [Fron::Component] The item
+      def intend(item)
+        return unless item
+        intended.remove_class(:intended) if intended
+        item.add_class(:intended)
+      end
+
+      # Returns the currently intended item
+      #
+      # @return [Fron::Component] The item
+      def intended
+        find('.intended')
+      end
+
+      # Returns the children that can be intended
+      #
+      # @return [Array<Fron::Component>] The items
+      def intend_children
+        children.select { |child| !child.has_class :hidden }
+      end
+    end
+  end
+end

data/opal/fron-ui/behaviors/keydown.rb

@@ -0,0 +1,31 @@
+module UI
+  module Behaviors
+    # Behavior for managing key presses
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    module Keydown
+      class << self
+        TYPES = %w(keyup keydown)
+
+        # Sets up the behavior.
+        #
+        # @param base [Fron::Component] The includer
+        def included(base)
+          base.register self, TYPES
+        end
+
+        TYPES.each do |type|
+          define_method type do |item|
+            on type do |event|
+              keys = Array(item[:args].first)
+              break unless keys.include?(event.key)
+              event.stop
+              send item[:args][1], event
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/opal/fron-ui/behaviors/loop.rb

@@ -0,0 +1,41 @@
+module UI
+  module Behaviors
+    module Loop
+      # Update / Render Loop
+      def self.included(base)
+        base.register self, [:act]
+      end
+
+      def data
+        @data ||= {}
+      end
+
+      def update!(type, *args)
+        if type.is_a?(Array)
+          type.each { |item| update_act(*item) }
+        else
+          update_act(type, *args)
+        end
+        raise "Could not render #{self} because it's not defined!" unless respond_to?(:render)
+        render
+      end
+
+      def replace!(data)
+        @data = data
+        render
+      end
+
+      def update_act(type, *args)
+        raise "There is no update with the name #{type}!" unless @acts[type]
+        updated_data = @acts[type].call(*(args + [data]))
+        raise "Update didn't return a hash insted I got #{udpated_data}!" unless updated_data.is_a?(Hash)
+        data.merge! updated_data
+      end
+
+      def self.act(item)
+        @acts ||= {}
+        @acts[item[:args].first] = item[:block]
+      end
+    end
+  end
+end

data/opal/fron-ui/behaviors/render.rb

@@ -0,0 +1,30 @@
+module UI
+  module Behaviors
+    # Behavior for rendering with requestAnimationFrame
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    module Render
+      # Sets up the behavior:
+      #
+      # * Defines the render method that will call
+      #   the render proc
+      #
+      # @param base [Fron::Component] The includer
+      def self.included(base)
+        base.register self, [:render]
+        base.define_method :render do |&block|
+          @render_proc.call
+          block.call if block
+        end
+      end
+
+      # Defines the render proc from the item
+      #
+      # @param item [Hash] The arguments
+      def self.render(item)
+        @render_proc = Fron::RenderProc.new method(item[:args].first)
+      end
+    end
+  end
+end

data/opal/fron-ui/behaviors/rest.rb

@@ -0,0 +1,121 @@
+require 'promise'
+
+module UI
+  module Behaviors
+    # Behavior for giving a component REST methods.
+    #
+    # @see http://en.wikipedia.org/wiki/Representational_state_transfer
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    module Rest
+      extend Fron::Eventable
+
+      # Sets up the behavior.
+      #
+      # @param base [Fron::Component] The includer
+      def self.included(base)
+        base.register self, [:rest]
+      end
+
+      # Sets the rest options from the registry
+      #
+      # @param item [Hash] The item
+      def self.rest(item)
+        @rest_options = OpenStruct.new item[:args].first
+      end
+
+      # Updates the model with the given data.
+      #
+      # @param data [Hash] The data
+      #
+      # @yield The updated data
+      def update(data, &block)
+        request :patch, @data[:id], data, &block
+      end
+
+      # Destroyes the model
+      #
+      # @yield if the action was successfull
+      def destroy(&block)
+        request :delete, @data[:id], &block
+      end
+
+      # Creates a new model with the given data.
+      #
+      # @param data [Hash] The data
+      #
+      # @yield The actual created data
+      def create(data, &block)
+        request :post, '', data, &block
+      end
+
+      # Returns all recrods
+      #
+      # @yieldreturn [Array<Hash>] The recrods
+      def all(&block)
+        request :get, '', &block
+      end
+
+      # Makes a requests to server
+      #
+      # :reek:FeatureEnvy
+      #
+      # @param method [Symbol, String] The request method
+      # @param path [String] The URL
+      # @param params [Hash] The parameters
+      #
+      # @yield [Hash] The returned data
+      def request(method, path, params = {})
+        promise = Promise.new
+        req = create_request path
+        req.request method.upcase, params do |response|
+          if response.status == 0
+            raise_error :no_connection, "Could not connect to: #{req.url}", promise
+          elsif (200..300).cover?(response.status)
+            data =  response_json(response)
+            promise.resolve data unless promise.realized?
+            yield data if block_given?
+          else
+            raise_error :wrong_status, response_json(response)['error'], promise
+            yield nil if block_given?
+          end
+        end
+        promise
+      end
+
+      private
+
+      # Raises an error on the parent class.
+      #
+      # @param type [Symbol] The type
+      # @param message [String] The message
+      def raise_error(type, message, promise)
+        promise.reject(message) unless promise.realized?
+        UI::Behaviors::Rest.trigger type, message
+        UI::Behaviors::Rest.trigger :error, [type, message]
+      end
+
+      # Tries to parse the json response,
+      # raises error if it's invalid.
+      #
+      # @param response [Fron::Response] The response
+      #
+      # @return [Hash] The parsed data
+      def response_json(response)
+        response.json
+      rescue StandardError
+        raise_error :invalid_json, 'Invalid JSON data!'
+      end
+
+      # Creates a request object
+      #
+      # @param path [String] The URL
+      #
+      # @return [Fron::Request] The request
+      def create_request(path)
+        Fron::Request.new "#{@rest_options.url}/#{path}", 'Content-Type' => 'application/json'
+      end
+    end
+  end
+end