fron-ui 1.0.0rc2

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

@@ -0,0 +1,111 @@
+require 'fron-ui/components/input'
+require 'fron-ui/components/dropdown'
+require 'fron-ui/components/color_panel'
+
+module UI
+  # Component for selecting colors by a color picker
+  # or just typing.
+  #
+  # Features:
+  # * Typing a CSS color (hex or named) and
+  #   pressing enter will update the color panel.
+  # * Has a rectange for showing the selected color.
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class ColorPicker < Base
+    include UI::Behaviors::Dropdown
+
+    extend Forwardable
+
+    tag 'ui-color-picker'
+
+    component :input, UI::Input, spellcheck: false
+    component :div, 'div'
+
+    component :dropdown, UI::Dropdown do
+      component :color_panel, UI::ColorPanel
+    end
+
+    style display: 'inline-block',
+          position: :relative,
+          div: { boxShadow: '0 0 1px 1px rgba(0,0,0,0.2) inset',
+                 borderRadius: -> { theme.border_radius.em },
+                 pointerEvents: :none,
+                 position: :absolute,
+                 bottom: 0.3.em,
+                 right: 0.3.em,
+                 top: 0.3.em,
+                 width: 2.em },
+          input: { paddingRight: -> { (theme.size * 1.25).em },
+                   boxSizing: 'border-box',
+                   width: '100%' }
+
+    on :change, :input, :update_dropdown
+    on :change, 'ui-color-wheel', :update_input
+    on :change, 'ui-color-wheel, input', :delegate_change
+
+    def_delegators :input, :value
+    def_delegators :dropdown, :color_panel
+
+    dropdown :input, :dropdown
+
+    # Delegates the change event
+    # so the target would be the picker
+    # not the color panel
+    #
+    # @param event [DOM::Event] The event
+    def delegate_change(event)
+      event.stop
+      trigger :change
+    end
+
+    # Initializes the component:
+    #
+    # * When the input gets the focus
+    #   update the dropdown.
+    # * Set default value to **white**
+    def initialize
+      super
+      @input.on(:focus) { update_dropdown }
+      @input.value = '#FFFFFF'
+    end
+
+    # Sets the value of the component
+    #
+    # @param value [String] The CSS color (hex or named)
+    def value=(value)
+      return if @input.value == value
+      @input.value = value
+      update_dropdown
+      trigger :change
+    end
+
+    private
+
+    # Updates the dropdown with the
+    # inputs value:
+    #
+    # * If the color is invalid update the input
+    # * Alwas render color of the rectange
+    def update_dropdown
+      color_panel.color = @input.value
+    rescue
+      update_input
+    ensure
+      render
+    end
+
+    # Update the value of the input
+    # from the color panel.
+    def update_input
+      @input.value = color_panel.to_css
+      render
+    end
+
+    # Renders the rectange
+    def render
+      @div.style.background = color_panel.to_css
+    end
+  end
+end

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

@@ -0,0 +1,61 @@
+module UI
+  # Component for layout out children either
+  # vertically or horizontally using flexbox.
+  #
+  # Attributes:
+  # * *direction*:
+  #   * *column* - lays out chilren vertically
+  #   * *row* (default) - lays out children horizontally
+  # * *compact*:
+  #   * *true* - no spacing between the children
+  #   * *false* (default) - there is spacing between the children
+  #
+  # @example
+  #   component :box, UI::Container, compact: true, direction: :column
+  #
+  # @author Gusztáv Szikszai
+  # @since  0.1.0
+  class Container < Base
+    tag 'ui-container'
+
+    style display: :flex,
+          fontFamily: -> { theme.font_family },
+          '&[direction=column]' => {
+            flexDirection: :column,
+            '&:not([compact]) > * + *' => {
+              marginTop: -> { theme.spacing.em }
+            }
+          },
+          '&[align=center]' => {
+            justifyContent: 'center'
+          },
+          '&[align=end]' => {
+            justifyContent: 'flex-end'
+          },
+          '&[direction=row]:not([compact]) > * + *' => {
+            marginLeft: -> { theme.spacing.em }
+          }
+
+    attribute_accessor :direction
+    attribute_accessor :align
+
+    # Initializes the container by setting
+    # default value for direction to column.
+    def initialize
+      super
+      self[:direction] ||= :column
+    end
+
+    # Sets / removes the compact attribute
+    # based on the value.
+    #
+    # @param value [Boolean] The value
+    def compact=(value)
+      if !value
+        remove_attribute :compact
+      else
+        self[:compact] = ''
+      end
+    end
+  end
+end

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

@@ -0,0 +1,141 @@
+require 'fron-ui/components/input'
+require 'fron-ui/components/icon'
+require 'fron-ui/components/dropdown'
+require 'fron-ui/components/calendar'
+
+module UI
+  # Component for selecting a date
+  #
+  # Features:
+  # * Input field for manual input
+  # * Dropdown with calendar for date selection
+  # * Selected date is highlighted
+  #
+  # @attr_reader [Date] value The value of the component
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  class DatePicker < Base
+    include UI::Behaviors::Keydown
+    include UI::Behaviors::Dropdown
+    extend Forwardable
+
+    attr_reader :value
+
+    tag 'ui-date-picker'
+
+    style color: -> { readable_color colors.input },
+          display: 'inline-block',
+          position: :relative,
+          '> ui-icon' => { width: -> { theme.size.em },
+                           position: :absolute,
+                           fontSize: 1.2.em,
+                           bottom: 0,
+                           right: 0,
+                           top: 0 },
+          input: { paddingRight: -> { (theme.size * 1.25).em },
+                   boxSizing: 'border-box',
+                   width: '100%' },
+          'table td[date]' => { cursor: :pointer,
+                                '&:hover' => { color: -> { readable_color(colors.primary) },
+                                               background: -> { colors.primary },
+                                               fontWeight: 600 } },
+          'table td[date].selected' => { color: -> { readable_color(colors.focus) },
+                                         background: -> { colors.focus },
+                                         fontWeight: 600 }
+
+    component :input, UI::Input
+    component :icon,  UI::Icon, glyph: :calendar
+
+    component :dropdown, UI::Dropdown do
+      component :calendar, UI::Calendar
+    end
+
+    def_delegators :input, :active?, :focus, :blur
+
+    on :click,  'td[date]', :select
+    on :change, 'input',    :changed
+    on :rendered, :render
+
+    keydown :down, :next
+    keydown :up,   :prev
+
+    dropdown :input, :dropdown
+
+    # Initialize the component by
+    # setting the default value for today.
+    def initialize
+      super
+      @input.on(:focus) { render }
+      @dropdown.on :mousedown, &:prevent_default
+      self.value = Date.today
+    end
+
+    # Selects the next date, if shift is down
+    # it select the same date in the next month,
+    #
+    # @param event [DOM::Event] The event
+    def next(event)
+      self.value = if event.shift?
+                     @value.next_month
+                   else
+                     @value + 1
+                   end
+    end
+
+    # Selects the previous date, if shift is down
+    # it select the same date in the previous month,
+    #
+    # @param event [DOM::Event] The event
+    def prev(event)
+      self.value = if event.shift?
+                     @value.prev_month
+                   else
+                     @value - 1
+                   end
+    end
+
+    # Sets the value of the field
+    #
+    # @param date [Date] The date
+    def value=(date)
+      date = parse_date(date)
+      raise "Supplied value '#{date}' is not a date or cound't be coerced into one!" unless date.is_a?(Date)
+      changed = @value != date
+      @value = date
+      @input.value = @value.strftime
+      @dropdown.calendar.render @value
+      trigger :change if changed
+    end
+
+    def parse_date(raw)
+      Date.parse(raw)
+    rescue
+      raw
+    end
+
+    # Selects the clicked td
+    #
+    # @param event [DOM::Event] The event
+    def select(event)
+      self.value = Date.parse(event.target[:date])
+    end
+
+    # Updates the value after the change
+    # of the input, if it's a wrong date
+    # it sets it for today.
+    def changed
+      self.value = Date.parse(@input.value)
+    rescue
+      self.value = Date.today
+      warn 'Wrong date input!'
+    end
+
+    # Renders the component
+    def render
+      cell = @dropdown.find("td[date='#{value}']")
+      return unless cell
+      cell.add_class :selected
+    end
+  end
+end

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

@@ -0,0 +1,76 @@
+module UI
+  # Base component for handling drags.
+  #
+  # @see UI::ColorPanel
+  # @see UI::Slider
+  #
+  # @attr value_x [Float] The value of the x axis (0..1)
+  # @attr value_y [Float] The value of the y axis (0..1)
+  # @attr vertical [Boolean] Whether or not to allow vertical drag
+  # @attr horizontal [Boolean] Whether or not to allow horizontal drag
+  # @attr_reader drag [Fron::Drag] The drag instance
+  #
+  # @author Gusztáv Szikszai
+  # @since 0.1.0
+  # @abstract
+  class Drag < Base
+    tag 'ui-drag'
+
+    attr_accessor :vertical, :horizontal
+    attr_reader :drag
+
+    component :handle, 'ui-drag-handle'
+
+    style background: -> { colors.input },
+          display: 'inline-block',
+          position: :relative,
+          'ui-drag-handle' => {
+            background: -> { rgba(readable_color(colors.input), 0.5) },
+            transform: 'translateX(-50%) translateY(-50%)',
+            pointerEvents: :none,
+            position: :absolute,
+            borderRadius: '50%',
+            height: 1.em,
+            width: 1.em
+          }
+
+    # Axes for the drag
+    AXES = {
+      horizontal: { coord: :x, style: :left, side: :width },
+      vertical: { coord: :y, style: :top, side: :height }
+    }
+
+    # Initializes the component
+    def initialize
+      super
+      AXES.keys.each { |axis| send("#{axis}=", true) }
+
+      @drag = Fron::Drag.new self, 0
+      @drag.on(:move) { |position| on_drag_move position }
+    end
+
+    # Moves the handle from the position in each axis
+    #
+    # @param position [Fron::Point] The point
+    def on_drag_move(position)
+      point = position - Fron::Point.new(left, top)
+
+      AXES.each do |key, axis|
+        next unless send(key)
+        @handle.style[axis[:style]] = point.send(axis[:coord]).clamp(0, send(axis[:side])).px
+      end
+
+      trigger 'change'
+    end
+
+    AXES.values.each do |axis|
+      define_method "value_#{axis[:coord]}" do
+        @handle.style.send(axis[:style]).to_i / send(axis[:side])
+      end
+
+      define_method "value_#{axis[:coord]}=" do |position|
+        @handle.style[axis[:style]] = (position.clamp(0, 1) * send(axis[:side])).px
+      end
+    end
+  end
+end

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

@@ -0,0 +1,72 @@
+require 'fron-ui/components/container'
+
+module UI
+  # Component for handling open / closed state
+  # and stop events when clicking inside the
+  # component to prevent closing.
+  #
+  # @author Gusztáv Szikszai
+  # @since  0.1.0
+  class Dropdown < Container
+    include UI::Behaviors::Transition
+
+    tag 'ui-dropdown'
+
+    style boxShadow: '0 0.3em 0.625em -0.3em rgba(0,0,0,0.75)',
+          transition: 'opacity 320ms, transform 320ms',
+          borderRadius: -> { theme.border_radius.em },
+          background: -> { colors.input },
+          pointerEvents: :none,
+          position: :absolute,
+          display: :none,
+          zIndex: 100,
+          '&.open' => { display: :block, pointerEvents: :auto },
+          '&[vertical=top]' => { marginBottom: -> { (theme.spacing / 2).em },
+                                 bottom: '100%' },
+          '&[vertical=bottom]' => { marginTop: -> { (theme.spacing / 2).em },
+                                    top: '100%' },
+          '&[horizontal=left]' => { right: 0 },
+          '&[horizontal=right]' => { left: 0 }
+
+    transition :show, duration: '320ms',
+                      frames: { '0%' =>   { opacity: 0, transform: 'translateY(0.5em)' },
+                                '100%' => { opacity: 1, transform: 'translateY(0)' } }
+
+    transition :hide, duration: '320ms',
+                      frames: { '0%' =>   { opacity: 1, transform: 'translateY(0)' },
+                                '100%' => { opacity: 0, transform: 'translateY(0.5em)' } }
+
+    # Opens the component:
+    #
+    # * adds the *open* class
+    # * sets the *position* attribute to either top or bottom depending
+    #   where is more space in the screen
+    def open
+      self[:vertical] = position?(:top, :scroll_y, :innerHeight) ? :top : :bottom
+      self[:horizontal] = position?(:left, :scroll_x, :innerWidth) ? :left : :right
+      add_class 'open'
+      transition! :show
+    end
+
+    # Closes the component
+    def close
+      transition! :hide do
+        remove_class 'open'
+      end
+    end
+
+    private
+
+    # Returns which side to display the dropdown
+    # to based on parameters.
+    #
+    # @param style [Symbol] Which style to use
+    # @param scroll [Symbol] Which scroll position to use
+    # @param size [Symbol] Which window size to use
+    #
+    # @return [Bollean] True or False
+    def position?(style, scroll, size)
+      parent && (parent.send(style) - DOM::Window.send(scroll)) > `window[#{size}] / 2`
+    end
+  end
+end