ad2games-ui_components 2.0.0

data/app/cells/checkbox_list/checkbox_list.yml

@@ -0,0 +1,7 @@
+description: 'A list of checkboxes.'
+examples:
+  - slim: |
+      - bootstrap_form_for(:foo, url: '/') do |f|
+        = ui_component 'checkbox_list', form: f,
+                                        name: 'foo',
+                                        values: %w(foo bar baz)

data/app/cells/checkbox_list/checkbox_list_cell.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+class CheckboxListCell < UiComponents::Cell
+  attribute :form, mandatory: true, description: 'A form object.'
+  attribute :name, mandatory: true, description: 'The name attribute.'
+  attribute :values, mandatory: true, description: 'The value attributes of the checkboxes.'
+  attribute :two_columns, description: 'Whether the checkboxes appear in two columns.'
+
+  def show
+    content_tag(:ul, box_li_tags, class: css_class)
+  end
+
+  private
+
+  def css_class
+    "ui-components-checkbox-list #{'two-columns' if options[:two_columns]}"
+  end
+
+  def box_li_tags
+    boxes.map do |box|
+      content_tag(:li, box)
+    end.join.html_safe
+  end
+
+  def boxes
+    options[:values].map do |value|
+      options[:form].check_box(options[:name], { multiple: true, label: label(value) }, value, nil)
+    end
+  end
+
+  def label(key)
+    controller.t(".#{options[:name]}.#{key}")
+  end
+end

data/app/cells/datagrid_filter/datagrid_filter.yml

@@ -0,0 +1,14 @@
+description: "Renders filters for Datagrid. Filters are retrieved from a grid instance via it's `filters` method. See [the Datagrid docs](https://github.com/bogdan/datagrid/wiki/Filters) on how to implement filters for a grid."
+examples:
+  - slim: |
+      - string_filter = OpenStruct.new options: {},
+                                      type: :string,
+                                      name: 'string',
+                                      header: 'String'
+      - select_filter = OpenStruct.new options: { select: -> { [['Baz', 'baz']] } },
+                                      type: :enum,
+                                      name: 'select',
+                                      header: 'Select'
+      - bootstrap_form_for(:foo, url: '/') do |f|
+        = ui_component('datagrid_filter', filter: string_filter, form: f)
+        = ui_component('datagrid_filter', filter: select_filter, form: f)

data/app/cells/datagrid_filter/datagrid_filter_cell.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+class DatagridFilterCell < FormCellBase
+  attribute :form, mandatory: true, description: 'A form object.'
+  attribute :filter, mandatory: true, description: 'A Datagrid filter object.'
+  attribute :width, description: 'The width of the component.'
+
+  def show
+    case options[:filter].type
+    when :enum
+      ui_component(:select, select_options)
+    when :string
+      options[:form].search_field(name_option, label: header_option)
+    else
+      raise 'Filter not supported'
+    end
+  end
+
+  private
+
+  def header_option
+    options[:filter].header
+  end
+
+  def name_option
+    options[:filter].name
+  end
+
+  def select_options
+    options.slice(:form, :width).merge(
+      name: name_option,
+      select_options: options[:filter].options[:select].call,
+      label: header_option
+    )
+  end
+end

data/app/cells/date_range/date_range.coffee

@@ -0,0 +1,69 @@
+$(document).on 'uic:domchange', (e) ->
+  today = -> moment().startOf('day')
+  yesterday = today().subtract(1, 'days')
+  ranges = {
+    'Yesterday': [yesterday, yesterday],
+    'Last 7 Days': [today().subtract(7, 'days'), yesterday],
+    'Last 14 Days': [today().subtract(14, 'days'), yesterday],
+    'Last 30 Days': [today().subtract(30, 'days'), yesterday],
+    'Month to Date': [
+      today().startOf('month'),
+      today()
+    ],
+    'Last Month': [
+      today().subtract(1, 'month').startOf('month'),
+      today().subtract(1, 'month').endOf('month').startOf('day')
+    ]
+  }
+
+  defaults = {
+    ranges: ranges,
+    opens: 'right',
+    format: 'YYYY-MM-DD',
+    submitOnChange: false
+  }
+
+  $(e.target).find('.ui-components-date-range').each (_i, el) ->
+    $el = $(el)
+    $form = $el.parents('form')
+    $start_input = $($el.data().start)
+    $end_input = $($el.data().end)
+
+    start_date = _.find [$el.data('startDate'), $start_input.val(), yesterday],
+                        (val) -> val && val.toString().length > 0
+    end_date = _.find [$el.data('endDate'), $end_input.val(), yesterday],
+                      (val) -> val && val.toString().length > 0
+
+    options = _.extend({},
+      defaults,
+      _.pick($el.data(), ['dateLimit', 'ranges', 'submitOnChange']),
+      { startDate: start_date, endDate: end_date })
+
+    options.ranges = _.mapObject(options.ranges, (v, k) -> _.map(v, (v) -> moment(v)))
+    options.startDate = moment(options.startDate)
+    options.endDate = moment(options.endDate)
+
+    reset = (start, end) ->
+      end.startOf('day')
+
+      $start_input.val(start.format('YYYY-MM-DD'))
+      $end_input.val(end.format('YYYY-MM-DD'))
+
+      label = 'Custom Range'
+      for range_label, range of options.ranges
+        if range[0].diff(start) == 0 and range[1].diff(end) == 0
+          label = range_label
+
+      $el.html(
+        label + ' (' + start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD') + ')'
+      )
+
+    callback = (start, end) ->
+      reset(start, end)
+
+      if ($el.data().submitOnChange)
+        $form.submit()
+
+    $el.daterangepicker(options, callback)
+
+    reset(options.startDate, options.endDate)

data/app/cells/date_range/date_range.yml

@@ -0,0 +1,7 @@
+description: 'A date-range selector with configurable ranges.'
+examples:
+  - slim: |
+      - bootstrap_form_for(:foo, url: '/') do |f|
+        = ui_component 'date_range', form: f,
+                                     name: 'foo',
+                                     date_limit: { days: 7 }

data/app/cells/date_range/date_range_cell.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+class DateRangeCell < FormCellBase
+  attribute :form, mandatory: true, description: 'A form object.'
+  attribute :name, mandatory: true, description: 'The name attribute.'
+  attribute :label, description: 'A label.'
+  attribute :ranges, description: 'A hash of selectable ranges of the form ' \
+                                  '`{ label => [from_date, to_date] }`'
+  attribute :date_limit, description: 'The maximum span between the selected ' \
+    'start and end dates. Can have any property you can add to a ' \
+    '[moment](http://momentjs.com/docs/#/durations/creating/) object (i.e. ' \
+    'days, months)'
+  attribute :start_date, description: 'Default start date'
+  attribute :end_date, description: 'Default end date'
+  attribute :submit_on_change, description: 'Whether the enclosing form should be ' \
+    'automatically submitted on value change'
+
+  def show
+    [
+      date_field(:from),
+      date_field(:to),
+      select_div
+    ].join
+  end
+
+  private
+
+  def date_field(type)
+    options[:form].text_field(
+      "#{options[:name]}_#{type}",
+      id: "#{id}_#{type}",
+      skip_label: true,
+      style: 'display: none'
+    )
+  end
+
+  def select_div
+    options[:form].form_group(:daterange, label: label) do
+      content_tag(:div, '', class: 'ui-components-date-range form-control', data: data)
+    end
+  end
+
+  def data
+    options.slice(:ranges, :date_limit, :submit_on_change).merge(
+      start_date: start_date.to_s, end_date: end_date.to_s,
+      start: "##{id}_from", end: "##{id}_to")
+  end
+
+  def id
+    "date_range_#{name_param}"
+  end
+
+  def label
+    { text: options[:label] } if options[:label]
+  end
+end

data/app/cells/form_cell_base.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+class FormCellBase < UiComponents::Cell
+  include ActionView::Helpers::FormOptionsHelper
+
+  private
+
+  def name
+    options.fetch(:name)
+  end
+
+  def name_param
+    "#{form.object_name}_#{name}".underscore
+  end
+
+  def label
+    options[:label]
+  end
+
+  def form
+    options.fetch(:form)
+  end
+
+  def t(key)
+    I18n.t("ui_components.#{self.class.to_s.underscore}.#{key}")
+  end
+end

data/app/cells/hello_world/hello_world.slim

@@ -0,0 +1 @@
+h1= "Hello, #{name}!"

data/app/cells/hello_world/hello_world.yml

@@ -0,0 +1,5 @@
+description: 'Just a test component.'
+examples:
+  - description: 'A basic example.'
+    attributes:
+      name: 'John'

data/app/cells/hello_world/hello_world_cell.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+class HelloWorldCell < UiComponents::Cell
+  attribute :name, mandatory: true, description: 'A name.'
+end

data/app/cells/markdown_readonly/markdown_readonly.coffee

@@ -0,0 +1,5 @@
+$(document).on 'uic:domchange', (e) ->
+  $(e.target).find('[data-toggle="markdown-readonly"]').each (_, el) ->
+    $el = $(el)
+    $el.html(marked(decodeURIComponent($el.data('markdown'))))
+    $el.show()

data/app/cells/markdown_readonly/markdown_readonly.slim

@@ -0,0 +1 @@
+div{ data-toggle="markdown-readonly" data-markdown=URI.escape(options[:content]) }

data/app/cells/markdown_readonly/markdown_readonly.yml

@@ -0,0 +1,4 @@
+description: 'Renders markdown text on the client side.'
+examples:
+  - attributes:
+      content: "# Heading\n\nLorem ipsum..."

data/app/cells/markdown_readonly/markdown_readonly_cell.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+class MarkdownReadonlyCell < UiComponents::Cell
+  attribute :content, mandatory: true, description: 'Markdown text.'
+end

data/app/cells/markdown_textarea/markdown_textarea.coffee

@@ -0,0 +1,9 @@
+$ ->
+  selector = $('[data-toggle="markdown"]')
+  selector.change ->
+    $this = $(this)
+    target = $this.data('target')
+    preview = marked($this.val())
+    $(target).html(preview)
+
+  selector.trigger('change')

data/app/cells/markdown_textarea/markdown_textarea.slim

@@ -0,0 +1,9 @@
+= form_group do
+  ul.nav.nav-tabs.nav-tabs-borderless
+    li.active
+      a href="##{edit_id}" data-toggle='tab' = t('.edit')
+    li
+      a href="##{preview_id}" data-toggle='tab' = t('.preview')
+  .tab-content
+    .tab-pane.active id=edit_id = textarea
+    .tab-pane.panel.panel-default.panel-body id=preview_id

data/app/cells/markdown_textarea/markdown_textarea.yml

@@ -0,0 +1,8 @@
+description: 'A Markdown editor with preview functionality.'
+examples:
+  - slim: |
+      - bootstrap_form_for(:foo, url: '/') do |f|
+        = ui_component 'markdown_textarea', form: f,
+                                            name: 'bar',
+                                            value: '# It works!',
+                                            label: 'Foo'

data/app/cells/markdown_textarea/markdown_textarea_cell.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+class MarkdownTextareaCell < FormCellBase
+  attribute :name, mandatory: true, description: "The textarea's name attribute."
+  attribute :form, mandatory: true, description: 'A Rails form object.'
+  attribute :value, description: "The textarea's content."
+  attribute :rows, description: 'Number of rows.'
+  attribute :label, description: 'A label for the form input.'
+
+  private
+
+  def textarea
+    form.text_area options[:name], textarea_opts
+  end
+
+  def textarea_opts
+    opts = {
+      skip_label: true,
+      rows: options[:rows] || 10,
+      control_col: 'col-sm-12',
+      label_col: '',
+      data: { toggle: 'markdown', target: "##{preview_id}" }
+    }
+
+    opts[:value] = options[:value] if options[:value]
+
+    opts
+  end
+
+  def form_group
+    form.__send__(:form_group_builder, name, label: label) do
+      yield.html_safe
+    end
+  end
+
+  def preview_id
+    "markdown_textarea_preview_#{name_param}"
+  end
+
+  def edit_id
+    "markdown_textarea_edit_#{name_param}"
+  end
+end

data/app/cells/modal/modal.coffee

@@ -0,0 +1,2 @@
+#= require jquery
+#= require bootstrap

data/app/cells/modal/modal.slim

@@ -0,0 +1,12 @@
+.modal.fade id=id
+  .modal-dialog
+    .modal-content
+      .modal-header
+        button.close aria-label="Close" data-dismiss="modal" type="button"
+          span aria-hidden="true"  ×
+        h4.modal-title= title
+      .modal-body
+        p= content
+      - if buttons
+        .modal-footer
+          = buttons

data/app/cells/modal/modal.yml

@@ -0,0 +1,22 @@
+description: "I didn't change the default description."
+examples:
+  - description: 'A simple modal.'
+    slim: |
+      = ui_component 'modal', id: 'alice',
+                              title: "Hello!",
+                              content: "'If you knew Time as well as I do,' said the Hatter, " \
+                                       "'you wouldn't talk about wasting IT. It's HIM.'"
+
+      button.btn.btn-default data-toggle="modal" data-target="#alice"
+        = 'Click me!'
+
+  - description: 'A modal with buttons.'
+    slim: |
+      = ui_component 'modal', id: 'hatter',
+                              title: "Hello!",
+                              content: "'If you knew Time as well as I do,' said the Hatter, " \
+                                       "'you wouldn't talk about wasting IT. It's HIM.'",
+                              buttons: [:close, :submit]
+
+      button.btn.btn-default data-toggle="modal" data-target="#hatter"
+        = 'Click me!'

data/app/cells/modal/modal_cell.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+class ModalCell < UiComponents::Cell
+  attribute :id, mandatory: true, description: 'The HTML id attribute.'
+  attribute :content, mandatory: true, description: "The modal's content."
+  attribute :title, description: 'A title.'
+  attribute :buttons, description: 'An array of button types. ' \
+                                   'Valid types are `:close` and `:submit`.'
+
+  private
+
+  def buttons
+    return unless @buttons
+    @buttons.map do |button|
+      case button
+      when :close then close_button
+      when :submit then submit_button
+      else raise "'#{button}' button not implemented"
+      end
+    end.join
+  end
+
+  def close_button
+    content_tag('button', class: 'btn btn-default', data: { dismiss: 'modal' }) do
+      I18n.t('ui_components.modal.close')
+    end
+  end
+
+  def submit_button
+    submit_tag(I18n.t('ui_components.modal.save'), class: 'btn btn-primary')
+  end
+end

data/app/cells/select/select.coffee

@@ -0,0 +1,35 @@
+#= require jquery
+#= require chosen/chosen.jquery
+#= require ajax-chosen/lib/ajax-chosen
+#= require underscore
+
+# Selects all options of a multi-select box belonging to a optgroup, when
+# clicking on the optgroup label.
+init_group_selectable = (select) ->
+  chosen = select.next()
+  chosen.on 'click', '.group-result', (e) ->
+    target = $(e.target)
+    group_name = target.text()
+    options = select.find('optgroup[label="' + group_name + '"]').children()
+    options.attr('selected', 'selected')
+    select.trigger('chosen:updated')
+
+$ ->
+  $('.ui-components-select').each ->
+    $this = $(this)
+
+    data = transform_keys $this.data(), underscore
+    data.search_contains = true
+    $this.chosen data
+
+    init_group_selectable($this)
+
+    if data.remote_options
+      $this.ajaxChosen
+        type: 'GET'
+        url: data.remote_options
+        dataType: 'json'
+
+underscore = (str) -> str.replace /[A-Z]/g, (m) -> '_' + m.toLowerCase()
+
+transform_keys = (obj, f) -> _.object _.map obj, (v, k) -> [f(k), v]