fron-ui 1.0.0rc2

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

@@ -0,0 +1,67 @@
+module UI
+  module Behaviors
+    # Behavior for handling for selecting
+    # one of the children of the component.
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    module SelectableChildren
+      # Sets up the behavior:
+      #
+      # * Sets up click event for the selecting
+      # * Sets styles for children to have pointer cursor
+      #
+      # @param base [Fron::Component] The includer
+      def self.included(base)
+        base.on :click, :on_select
+        base.attribute_accessor :multiple, default: false
+        base.attribute_accessor :deselectable, default: false
+        base.style '> *' => { cursor: :pointer }
+      end
+
+      # Runs when a child is clicked
+      #
+      # @param event [DOM::Event] The event
+      def on_select(event)
+        select children.find { |child| child.include?(event.target) }
+      end
+
+      # Selects the given child
+      #
+      # @param child [Fron::Component] The child
+      def select(child)
+        return unless child
+        return if !deselectable && selected == child
+        deselect if !multiple && selected != child
+        child.toggle_class :selected
+        trigger :selected_change
+        true
+      end
+
+      # Deselects all selected children
+      def deselect
+        Array(selected).each { |item| item.remove_class :selected }
+      end
+
+      # Selects the first child
+      def select_first
+        select children.first
+      end
+
+      # Selects the last child
+      def select_last
+        select children.last
+      end
+
+      # Returns the selected child
+      #
+      # @return [Fron::Component] The child
+      def selected
+        selected = children.select { |child| child.has_class :selected }
+        return nil if selected.empty?
+        return selected.first if selected.count == 1
+        selected
+      end
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+module UI
+  module Behaviors
+    # Behavior for seralizing and
+    # deseralizing data from named
+    # (having a name attribute) components
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    module Serialize
+      # Populates items with the given data
+      #
+      # @param data [Hash] The data
+      def load(data)
+        @data = data
+        find_all('[name]').each do |item|
+          item.value = @data[item[:name]]
+        end
+      end
+
+      # Gathers the data from elements
+      #
+      # :reek:FeatureEnvy
+      #
+      # @return [Hash] The data
+      def data
+        find_all('[name]').each_with_object(@data || {}) do |item, memo|
+          memo[item[:name]] = item.value
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+module UI
+  module Behaviors
+    module Shortcuts
+      def self.included(base)
+        base.register self, [:shortcut]
+      end
+
+      def self.shortcut(item)
+        initialize_shortcuts
+        shortcut, action = item[:args]
+        shortcuts << { parts: shortcut.split(Fron::Keyboard::DELIMETERS), action: action }
+      end
+
+      def initialize_shortcuts
+        @shortcut_event = DOM::Window.on(:keyup) do |event|
+          break if DOM::Document.active_element
+          break unless visible?
+
+          combo = Fron::Keyboard.calculate_shortcut event
+
+          shortcuts.each do |shortcut|
+            next unless shortcut[:parts].sort == combo.sort
+            send shortcut[:action]
+            event.stop
+            break
+          end
+        end
+      end
+
+      def shortcuts
+        @shortcuts ||= []
+      end
+    end
+  end
+end

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

@@ -0,0 +1,56 @@
+module UI
+  module Behaviors
+    # Behavior for managing state into
+    # search part of the location.
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    module State
+      # Sets up the behavior.
+      #
+      # @param base [Fron::Component] The includer
+      def self.included(base)
+        base.register self, [:state_changed]
+      end
+
+      # Sets up events for popstate to handle
+      # back and forward buttons.
+      #
+      # @param item [Hash] The arguments
+      def self.state_changed(item)
+        method = item[:args][0]
+        DOM::Window.on('popstate') { send method }
+        timeout do
+          send method
+        end
+      end
+
+      # Returns the decoded state.
+      #
+      # @return The state
+      def state
+        search = `location.search`[1..-1]
+        StateSerializer.decode(`window.atob(#{search})`)
+      rescue
+        ''
+      end
+
+      # Sets the state
+      #
+      # @param new_state The new state
+      def state=(new_state, options = {})
+        return if state == new_state
+        path = yield if block_given?
+        hash = `window.btoa(#{StateSerializer.encode(new_state)})`
+        new_url = path.to_s + '?' + hash
+        if options.to_h[:replace]
+          DOM::Window.replace_state new_url
+        else
+          DOM::Window.state = new_url
+        end
+      end
+
+      alias set_state state=
+    end
+  end
+end

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

@@ -0,0 +1,63 @@
+module UI
+  module Behaviors
+    # Behavior for managing style transitions.
+    #
+    # @author Gusztáv Szikszai
+    # @since 0.1.0
+    module Transition
+      # Sets up the behavior:
+      #
+      # * Listens on animation end events (prefixed)
+      #
+      # @param base [Fron::Component] The includer
+      def self.included(base)
+        base.on :animationend, :on_transition_end
+        base.on :webkitAnimationEnd, :on_transition_end
+        base.on :oanimationend, :on_transition_end
+        base.on :MSAnimationEnd, :on_transition_end
+        base.meta_def :transition do |animation_name, options|
+          name = "#{tagname}-#{animation_name}"
+          options[:animation_name] = name
+          Fron::Sheet.add_animation name, options[:frames]
+          @registry << { method: Transition.method(:init_transition),
+                         args: [animation_name, options],
+                         id: SecureRandom.uuid }
+        end
+      end
+
+      # Handles animation end events, and
+      # calls the callback if sepcified.
+      #
+      # @param event [DOM::Event] The event
+      def on_transition_end(event)
+        options = @transitions[event.animationName.split('-').last]
+        send options[:callback] if options &&
+                                   options[:callback] &&
+                                   respond_to?(options[:callback])
+        @transition_callback.call if @transition_callback
+      end
+
+      # Adds the transitions animations to
+      # the stylesheet.
+      #
+      # @param item [Hash] The item data
+      def self.init_transition(item)
+        name = item[:args][0]
+        options = item[:args][1]
+        @transitions ||= {}
+        @transitions[name] = options
+      end
+
+      # Starts the transition with the given name.
+      #
+      # @param name [String] The name of the transition
+      def transition!(name, &block)
+        options = @transitions[name]
+        @style.animation = [options[:animation_name],
+                            options[:duration],
+                            options[:delay], 'both'].join(' ')
+        @transition_callback = block
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+module UI
+  # Base component for elements that handle
+  # *action* (enter or space) as well as clicks.
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Action < Base
+    include UI::Behaviors::Action
+
+    tag 'ui-action'
+
+    # Initializes the component by setting the tabindex.
+    def initialize
+      super
+      self[:tabindex] ||= 0
+    end
+  end
+end

data/opal/fron-ui/components/box.rb

@@ -0,0 +1,17 @@
+require 'fron-ui/components/container'
+
+module UI
+  # Box component with background, padding
+  # and border radius
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Box < Container
+    tag 'ui-box'
+
+    style borderRadius: -> { (theme.border_radius * 2).em },
+          color: -> { readable_color colors.background },
+          padding: -> { (theme.spacing * 1.75).em },
+          background: -> { colors.background }
+  end
+end

data/opal/fron-ui/components/button.rb

@@ -0,0 +1,61 @@
+require 'fron-ui/components/action'
+
+module UI
+  # Button component.
+  #
+  # It has the following types:
+  # * primary
+  # * success
+  # * danger
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Button < Action
+    tag 'ui-button'
+
+    style padding: -> { "0 #{(theme.spacing * 1.4).em}" },
+          borderRadius: -> { theme.border_radius.em },
+          fontFamily: -> { theme.font_family },
+          lineHeight: -> { theme.size.em },
+          height: -> { theme.size.em },
+          textOverflow: :ellipsis,
+          display: 'inline-block',
+          whiteSpace: :nowrap,
+          textAlign: :center,
+          userSelect: :none,
+          fontWeight: '600',
+          overflow: :hidden,
+          '&[type]:focus' => { boxShadow: -> { theme.focus_box_shadow.call } },
+          '&[shape=square]' => { minWidth: -> { theme.size.em },
+                                 height: -> { theme.size.em },
+                                 justifyContent: :center,
+                                 display: 'inline-flex',
+                                 alignItems: :center,
+                                 padding: '0' },
+          '> *' => { pointerEvents: :none }
+
+    Fron::Sheet.helper.colors.to_h.keys.each do |type|
+      style "&[type=#{type}]" => { color: -> { readable_color(colors[type]) },
+                                   background: -> { colors[type] } }
+    end
+
+    # Initializes the button by setting
+    # the type to primary.
+    def initialize
+      super
+      self[:type] ||= :primary
+    end
+
+    def loading!(text = '')
+      @_text = self.text
+      self.text = text
+      self.disabled = true
+    end
+
+    def reset!
+      self.disabled = false
+      self.text = @_text
+      @_text = nil
+    end
+  end
+end

data/opal/fron-ui/components/calendar.rb

@@ -0,0 +1,129 @@
+module UI
+  # A component for rendering a month calendar for a given date.
+  #
+  # It has the following features:
+  # * Navigate to next / previous month
+  # * Yields all the days (with their cells) for extended usage
+  # * Displays the name of the rendered month (and year if it's not the same)
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class Calendar < Base
+    include UI::Behaviors::Actions
+    extend Forwardable
+
+    tag 'ui-calendar'
+
+    component :header, UI::Container, direction: :row do
+      component :icon,  UI::Icon,  glyph: 'arrow-left-b', clickable: true, action: :prev_month
+      component :label, UI::Label, flex: 1
+      component :icon,  UI::Icon,  glyph: 'arrow-right-b', clickable: true, action: :next_month
+    end
+
+    component :table, :table do
+      component :thead, :thead do
+        component :tr, :tr
+      end
+
+      component :tbody, :tbody
+    end
+
+    def_delegators :table, :tbody, :thead
+    def_delegators :header, :label
+
+    style color: -> { readable_color colors.input },
+          borderRadius: -> { theme.border_radius.em },
+          padding: -> { (theme.spacing * 1.25).em },
+          background: -> { colors.input },
+          display: :block,
+          minWidth: 18.em,
+          'ui-label' => { textAlign: :center,
+                          fontWeight: 700 },
+          'ui-icon' => { width: -> { (theme.spacing * 2).em } },
+          'ui-container' => { borderBottomWidth: -> { (theme.border_size / 2).em },
+                              borderBottomColor: -> { dampen colors.input, 0.05 },
+                              paddingBottom: -> { theme.spacing.em },
+                              borderBottomStyle: :solid },
+          table: { borderSpacing: 0.4.em,
+                   'td[date]' => { background: -> { dampen colors.input, 0.05 },
+                                   color: -> { readable_color(dampen(colors.input, 0.05)) } },
+                   'th' => { fontSize: 0.8.em,
+                             padding: -> { "#{theme.spacing.em} 0" },
+                             opacity: 0.6 },
+                   'td, th' => { borderRadius: -> { theme.border_radius.em },
+                                 textAlign: :center,
+                                 height: 2.em,
+                                 width: 2.em } }
+
+    # Initializes the calendar with todays date
+    def initialize
+      super
+      render
+    end
+
+    # Renders the next month in the calendar
+    def next_month
+      render @date.next_month
+    end
+
+    # Renders the previous month in the calendar
+    def prev_month
+      render @date.prev_month
+    end
+
+    # Renders the calendar for the given date
+    #
+    # @param date [Date] The date
+    def render(date = Date.today)
+      @date = date
+      label.text = date.strftime date.year == Date.today.year ? '%B' : '%B %Y'
+      render_header
+      render_body(date) do |*args|
+        yield(*args) if block_given?
+      end
+      trigger :rendered
+    end
+
+    private
+
+    # Renders the table header with the shortnames
+    def render_header
+      thead.tr.empty
+      Date.this_week.each do |day|
+        thead.tr << DOM::Element.new("th #{day.strftime('%a')}")
+      end
+    end
+
+    # Renders the table body with the days
+    def render_body
+      tbody.empty
+
+      @date.days_for_calendar.each_slice(7) do |data|
+        row = DOM::Element.new('tr')
+        row >> tbody
+
+        data.each do |day|
+          td = Td.new(day)
+          td >> row
+          next if day.is_a?(String)
+          yield day, td
+        end
+      end
+    end
+
+    # Cell for the calendar body
+    class Td < Fron::Component
+      tag 'td'
+
+      # Initialize the cell with the day
+      #
+      # @param day [Date] The day
+      def initialize(day)
+        super nil
+        return if day.is_a?(String)
+        self[:date] = day
+        self.text = day.day
+      end
+    end
+  end
+end