formagic 0.1.0

data/app/assets/javascripts/formagic/inputs/select.coffee

@@ -0,0 +1,84 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT SELECT
+# -----------------------------------------------------------------------------
+
+class @InputSelect extends InputString
+
+  # PRIVATE ===============================================
+
+  _create_el: ->
+    @$el =$ "<div class='input-#{ @config.type } input-#{ @config.klass } input-#{ @config.klassName }'>"
+
+
+  _add_input: ->
+    @$input =$ """<select name='#{ @name }'></select>"""
+    @$el.append @$input
+
+    @_add_options()
+
+
+  _add_options: ->
+    if @config.optionsHashFieldName
+      @value = String(@value)
+      if @object
+        @config.optionsHash = @object[@config.optionsHashFieldName]
+      else
+        @config.optionsHash = { '': '--' }
+
+    if @config.collection
+      @_add_collection_options()
+
+    else if @config.optionsList
+      @_add_list_options()
+
+    else if @config.optionsHash
+      @_add_hash_options()
+
+
+  _add_collection_options: ->
+    for o in @config.collection.data
+      title    = o[@config.collection.titleField]
+      value    = o[@config.collection.valueField]
+      @_add_option(title, value)
+
+
+  _add_list_options: ->
+    data = @config.optionsList
+    for o in data
+      @_add_option(o, o)
+
+
+  _add_hash_options: ->
+    data = @config.optionsHash
+    for value, title of data
+      @_add_option(title, value)
+
+
+  _add_option: (title, value) ->
+    selected = if @value == value then 'selected' else ''
+    $option =$ """<option value='#{ value }' #{ selected }>#{ title }</option>"""
+    @$input.append $option
+
+
+  # PUBLIC ================================================
+
+  updateValue: (@value, @object) ->
+    @$input.html('')
+    @_add_options()
+
+    @$input.val(@value).prop('selected', true)
+
+
+chr.formInputs['select'] = InputSelect
+
+
+
+

data/app/assets/javascripts/formagic/inputs/select2.coffee

@@ -0,0 +1,33 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT SELECT 2
+# -----------------------------------------------------------------------------
+#
+# Dependencies:
+#= require vendor/select2
+#
+# -----------------------------------------------------------------------------
+
+class @InputSelect2 extends InputSelect
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    # https://select2.github.io/options.html
+    options = @config.pluginOptions || {}
+    @$input.select2(options)
+
+    @config.onInitialize?(this)
+
+
+chr.formInputs['select2'] = InputSelect2
+
+
+
+

data/app/assets/javascripts/formagic/inputs/string.coffee

@@ -0,0 +1,160 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT STRING
+# -----------------------------------------------------------------------------
+# Basic string input implementation, this is base class for many chr inputs.
+# This input also serves as a demo for implementing other input types.
+#
+# Public methods:
+#   initialize()              - run input plugin initializations if any
+#   hash(hash)                - update hash with inputs: hash[name] = value
+#   updateValue(@value)       - update inputs value
+#   showErrorMessage(message) - show error (validation) message for input
+#   hideErrorMessage()        - hide error message
+#
+# Dependencies:
+#= require vendor/jquery.typeahead
+#
+# -----------------------------------------------------------------------------
+class @InputString
+  constructor: (@name, @value, @config, @object) ->
+    @_create_el()
+    @_add_label()
+    @_add_input()
+    @_add_placeholder()
+    @_add_disabled()
+    @_add_required()
+    @_add_limit()
+
+    return this
+
+
+  # PRIVATE ===============================================
+
+  _safe_value: ->
+    if typeof(@value) == 'object'
+      return JSON.stringify(@value)
+    else
+      return _escapeHtml(@value)
+
+
+  _create_el: ->
+    @$el =$ "<label for='#{ @name }' class='input-#{ @config.type } input-#{ @config.klass } input-#{ @config.klassName }'>"
+
+
+  _add_label: ->
+    @$label        =$ "<span class='label'>#{ @config.label }</span>"
+    @$errorMessage =$ "<span class='error-message'></span>"
+    @$label.append(@$errorMessage)
+    @$el.append(@$label)
+
+
+  _add_input: ->
+    @$input =$ "<input type='text' name='#{ @name }' value='#{ @_safe_value() }' />"
+    # trigger change event on keyup so value is cached while typing
+    @$input.on 'keyup', (e) => @$input.trigger('change')
+    @$el.append @$input
+
+
+    if @config.options and $.isArray(@config.options)
+      data = new Bloodhound
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')
+        queryTokenizer: Bloodhound.tokenizers.whitespace
+        local:          $.map @config.options, (opt) -> { value: opt }
+
+      data.initialize()
+
+      @$input.typeahead({
+        hint:      true
+        highlight: true
+        minLength: 1
+      },
+      {
+        name:       'options'
+        displayKey: 'value'
+        source:     data.ttAdapter()
+      })
+
+
+  _add_placeholder: ->
+    if @config.klass in [ 'placeholder', 'stacked' ]
+      @$input.attr 'placeholder', @config.label
+
+    if @config.placeholder
+      @$input.attr 'placeholder', @config.placeholder
+
+
+  _add_disabled: ->
+    if @config.disabled
+      @$input.prop('disabled', true)
+      @$el.addClass('input-disabled')
+
+
+  _add_required: ->
+    if @config.required
+      @$el.addClass('input-required')
+
+
+  _add_limit: ->
+    if @config.limit
+      @$charCounter =$ "<span class='input-character-counter'></span>"
+      @$errorMessage.before @$charCounter
+      @$input.on 'keyup', =>
+        @_update_character_counter()
+      @_update_character_counter()
+
+
+  _update_character_counter: ->
+    characters = @$input.val().length
+    left       = @config.limit - characters
+
+    if left >= 0
+      @$charCounter.html("(#{ left } left)")
+
+    else
+      @$charCounter.html("(#{ left })")
+
+
+    if characters > @config.limit
+      @$charCounter.addClass('exceeds')
+    else
+      @$charCounter.removeClass('exceeds')
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @config.onInitialize?(this)
+
+
+  hash: (hash={}) ->
+    hash[@config.klassName] = @$input.val()
+    return hash
+
+
+  updateValue: (@value) ->
+    @$input.val(@value)
+
+
+  showErrorMessage: (message) ->
+    @$el.addClass('error')
+    @$errorMessage.html(message)
+
+
+  hideErrorMessage: ->
+    @$el.removeClass('error')
+    @$errorMessage.html('')
+
+
+chr.formInputs['string'] = InputString
+
+
+
+

data/app/assets/javascripts/formagic/inputs/text.coffee

@@ -0,0 +1,43 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT TEXT
+# -----------------------------------------------------------------------------
+#
+# Dependencies:
+#= require vendor/jquery.scrollparent
+#= require vendor/jquery.textarea_autosize
+#
+# -----------------------------------------------------------------------------
+class @InputText extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    @$input =$ "<textarea class='autosize' name='#{ @name }' rows=1>#{ @_safe_value() }</textarea>"
+    # trigger change event on keyup so value is cached while typing
+    @$input.on 'keyup', (e) => @$input.trigger('change')
+    @$el.append @$input
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    @$input.textareaAutoSize()
+
+    @config.onInitialize?(this)
+
+
+chr.formInputs['text'] = InputText
+
+
+
+

data/app/assets/javascripts/formagic.coffee

@@ -0,0 +1,22 @@
+#= require ./formagic/form
+#= require ./formagic/group
+
+#= require ./formagic/inputs/hidden
+#= require ./formagic/inputs/string
+#= require ./formagic/inputs/text
+#= require ./formagic/inputs/checkbox
+#= require ./formagic/inputs/color
+#= require ./formagic/inputs/date
+#= require ./formagic/inputs/datetime
+#= require ./formagic/inputs/document
+#= require ./formagic/inputs/documents
+#= require ./formagic/inputs/file
+#= require ./formagic/inputs/html
+#= require ./formagic/inputs/image
+#= require ./formagic/inputs/list
+#= require ./formagic/inputs/markdown
+#= require ./formagic/inputs/password
+#= require ./formagic/inputs/redactor
+#= require ./formagic/inputs/select
+#= require ./formagic/inputs/select2
+#= require ./formagic/inputs/time