formagic 0.1.0

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

@@ -0,0 +1,130 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT DATE
+# -----------------------------------------------------------------------------
+#
+# Dependencies:
+#= require vendor/datedropper
+#= require vendor/moment
+#
+# -----------------------------------------------------------------------------
+class @InputDatetime extends InputDate
+
+  # PRIVATE ===============================================
+
+  _update_value: ->
+    mt = moment(@$inputTime.val(), 'LT')
+    if ! mt.isValid()
+      mt = moment('1:00 pm', 'LT')
+
+    time_string = mt.utcOffset(@tzOffset).format().split('T')[1]
+    date_string = @$inputDate.val()
+
+    value = [ date_string, time_string ].join('T')
+
+    @$input.val(value)
+
+
+  _update_date_input: ->
+    m = moment(@$input.val()).utcOffset(@tzOffset)
+    @$inputDate.val ( if m.isValid() then m.format('YYYY-MM-DD') else '' )
+
+
+  _update_time_input: ->
+    m = moment(@$input.val()).utcOffset(@tzOffset)
+    @$inputTime.val ( if m.isValid() then m.format('h:mm a') else '' )
+
+
+  _update_date_label: ->
+    m = moment(@$inputDate.val()).utcOffset(@tzOffset)
+    @$dateLabel.html ( if m.isValid() then m.format('dddd, MMM D, YYYY') else 'Pick a date' )
+
+
+  _normalized_value: ->
+    # -- use local timezone to represent time
+    @tzOffset  = @config.timezoneOffset
+    @tzOffset ?= (new Date()).getTimezoneOffset() * -1
+
+    @value = moment(@value).utcOffset(@tzOffset).format()
+
+
+  _add_input: ->
+    @_normalized_value()
+
+    # -- hidden
+    @$input =$ "<input type='hidden' name='#{ @name }' value='#{ @value }' />"
+    @$el.append @$input
+
+    # -- date
+    @$inputDate =$ "<input type='text' class='input-datetime-date' />"
+    @$el.append @$inputDate
+    @$inputDate.on 'change', (e) =>
+      @_update_date_label()
+      @_update_value()
+
+    @_update_date_input()
+
+    # -- date label
+    @$dateLabel =$ "<div class='input-date-label'>"
+    @$el.append @$dateLabel
+    @$dateLabel.on 'click', (e) => @$inputDate.trigger 'click'
+
+    @_update_date_label()
+
+    # -- @
+    @$el.append "<span class='input-timedate-at'>@</span>"
+
+    # -- time
+    @$inputTime =$ "<input type='text' class='input-datetime-time' placeholder='1:00 pm' />"
+    @$el.append @$inputTime
+    @$inputTime.on 'change, keyup', (e) => @_update_value() ; @$input.trigger('change')
+
+    @_update_time_input()
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    # http://felicegattuso.com/projects/datedropper/
+    @config.pluginConfig ?= {}
+
+    config =
+      animation:       'fadein'
+      format:          'Y-m-d'
+      animate_current: false
+      textColor:       '#333'
+      borderColor:     '#f6f6f6'
+      boxShadow:       '0 0 2px rgba(0, 0, 0, 0.2)'
+      borderRadius:    4
+      maxYear:         2020
+
+    $.extend(config, @config.pluginConfig)
+
+    @$inputDate.dateDropper(config)
+
+    @config.onInitialize?(this)
+
+
+  updateValue: (@value) ->
+    @_normalized_value()
+    @$input.val(@value)
+
+    @_update_date_input()
+    @_update_date_label()
+    @_update_time_input()
+
+
+chr.formInputs['datetime'] = InputDatetime
+
+
+
+

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

@@ -0,0 +1,173 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT "NESTED" FORM
+# -----------------------------------------------------------------------------
+# Name for this input comes from the Rails gem 'nested_forms'.
+#
+# Public methods:
+#   initialize()
+#   hash(hash)
+#   updateValue(@value)
+#   showErrorMessage(message)
+#   hideErrorMessage()
+#   addNewForm(object)
+#
+# Dependencies:
+#= require ./documents_reorder
+#
+# -----------------------------------------------------------------------------
+
+class @InputForm
+  constructor: (@name, @nestedObjects, @config, @object) ->
+    @forms = []
+
+    @config.namePrefix   ||= name
+    @config.removeButton   = true
+    @config.formSchema._id = { type: 'hidden', name: 'id' }
+    @reorderContainerClass = "nested-forms-#{@config.klassName}"
+
+    @_create_el()
+
+    @_add_label()
+    @_add_forms()
+    @_add_new_button()
+
+    return this
+
+
+  # PRIVATE ===============================================
+
+  _create_el: ->
+    @$el =$ "<div class='input-stacked nested-forms 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_forms: ->
+    @$forms =$ "<ul>"
+    @$label.after @$forms
+
+    # if not default value which means no objects
+    if @nestedObjects != ''
+      @_sort_nested_objects()
+
+      for i, object of @nestedObjects
+        namePrefix = "#{ @config.namePrefix }[#{ i }]"
+        @forms.push @_render_form(object, namePrefix, @config)
+
+      @_bind_forms_reorder()
+
+
+  _sort_nested_objects: ->
+    if @config.sortBy
+      @config.formSchema[@config.sortBy] = { type: 'hidden' }
+      if @nestedObjects
+        # this is not required but make things a bit easier on the backend
+        # as object don't have to be in a specific order.
+        @nestedObjects.sort (a, b) => parseFloat(a[@config.sortBy]) - parseFloat(b[@config.sortBy])
+        # normalizes nested objects positions
+        (o[@config.sortBy] = parseInt(i) + 1) for i, o of @nestedObjects
+
+
+  _render_form: (object, namePrefix, config) ->
+    formConfig = $.extend {}, config,
+      namePrefix: namePrefix
+      rootEl:     "<li>"
+
+    form = new Form(object, formConfig)
+    @$forms.append form.$el
+
+    return form
+
+
+  _add_new_button: ->
+    label = @config.newButtonLabel || "Add"
+    @$newButton =$ """<a href='#' class='nested-form-new'>#{ label }</a>"""
+    @$el.append @$newButton
+    @$newButton.on 'click', (e) => e.preventDefault() ; @addNewForm()
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    for nestedForm in @forms
+      nestedForm.initializePlugins()
+
+    @config.onInitialize?(this)
+
+
+  hash: (hash={}) ->
+    objects = []
+    objects.push(form.hash()) for form in @forms
+    hash[@config.fieldName] = objects
+    return hash
+
+
+  showErrorMessage: (message) ->
+    @$el.addClass 'error'
+    @$errorMessage.html(message)
+
+
+  hideErrorMessage: ->
+    @$el.removeClass 'error'
+    @$errorMessage.html('')
+
+
+  addNewForm: (object=null) ->
+    namePrefix    = "#{ @config.namePrefix }[#{ Date.now() }]"
+    newFormConfig = $.extend({}, @config)
+
+    delete newFormConfig.formSchema._id
+
+    form = @_render_form(object, namePrefix, newFormConfig)
+    form.initializePlugins()
+
+    if @config.sortBy
+      @_add_form_reorder_button(form)
+      prevForm = _last(@forms)
+      position = if prevForm then prevForm.inputs[@config.sortBy].value + 1 else 1
+
+      # @TODO: having an issue here for scenario when no nested object are there for new object
+      # form.inputs doesn't include sortBy field
+      console.log @config
+      console.log @config.sortBy
+      console.log form.inputs
+
+      form.inputs[@config.sortBy].updateValue(position)
+
+    @forms.push(form)
+
+    @config.onNew?(form)
+
+    return form
+
+
+  updateValue: (@nestedObjects, @object) ->
+    @$forms.remove()
+    @forms = []
+    @_add_forms()
+
+
+include(InputForm, inputFormReorder)
+
+
+chr.formInputs['form']      = InputForm
+chr.formInputs['documents'] = InputForm
+
+
+
+

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

@@ -0,0 +1,67 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT "NESTED" FORM REORDER
+# -----------------------------------------------------------------------------
+
+@inputFormReorder =
+  # PRIVATE ===============================================
+
+  _bind_forms_reorder: ->
+    if @config.sortBy
+      list = @$forms.addClass(@reorderContainerClass).get(0)
+
+      new Slip(list)
+
+      list.addEventListener 'slip:beforeswipe', (e) -> e.preventDefault()
+
+      list.addEventListener 'slip:beforewait', ((e) ->
+        if $(e.target).hasClass("icon-reorder") then e.preventDefault()
+      ), false
+
+      list.addEventListener 'slip:beforereorder', ((e) ->
+        if not $(e.target).hasClass("icon-reorder") then e.preventDefault()
+      ), false
+
+      list.addEventListener 'slip:reorder', ((e) =>
+        # this event called for all parent lists, add a check for context:
+        # process this event only if target form is in the @forms list.
+        targetForm = @_find_form_by_target(e.target)
+        if targetForm
+          # when `e.detail.insertBefore` is null, item put to the end of the list.
+          e.target.parentNode.insertBefore(e.target, e.detail.insertBefore)
+
+          $targetForm =$ e.target
+          prevForm    = @_find_form_by_target($targetForm.prev().get(0))
+          nextForm    = @_find_form_by_target($targetForm.next().get(0))
+
+          prevFormPosition      = if prevForm then prevForm.inputs[@config.sortBy].value else 0
+          nextFormPosition      = if nextForm then nextForm.inputs[@config.sortBy].value else 0
+          newTargetFormPosition = prevFormPosition + Math.abs(nextFormPosition - prevFormPosition) / 2.0
+
+          targetForm.inputs[@config.sortBy].updateValue(newTargetFormPosition)
+
+        return false
+      ), false
+
+      @_add_form_reorder_button(form) for form in @forms
+
+
+  _add_form_reorder_button: (form) ->
+    form.$el.append("""<div class='icon-reorder' data-container-class='#{@reorderContainerClass}'></div>""").addClass('reorderable')
+
+
+  _find_form_by_target: (el) ->
+    if el
+      for form in @forms
+        if form.$el.get(0) == el then return form
+    return null
+
+
+

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

@@ -0,0 +1,114 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT FILE
+# -----------------------------------------------------------------------------
+# @TODO: add clear button when file is picked for the first time and you want
+#        to cancel that pick
+# -----------------------------------------------------------------------------
+class @InputFile extends InputString
+  constructor: (@name, @value, @config, @object) ->
+    @_create_el()
+
+    @_add_label()
+    @_add_input()
+    @_update_state()
+    @_add_required()
+
+    return this
+
+
+  # PRIVATE ===============================================
+
+  _create_el: ->
+    @$el =$ "<div class='input-#{ @config.type } input-#{ @config.klass } input-#{ @config.klassName }'>"
+
+
+  _add_input: ->
+    @$link =$ "<a href='#' target='_blank' title=''></a>"
+    @$el.append(@$link)
+
+    @$input =$ "<input type='file' name='#{ @name }' id='#{ @name }'>"
+    @$el.append @$input
+
+    @_add_clear_button()
+    @_add_remove_checkbox()
+
+
+  _add_clear_button: ->
+    @$clearButton =$ "<a href='#' class='input-file-clear'></a>"
+    @$input.after @$clearButton
+    @$clearButton.hide()
+
+    @$clearButton.on 'click', (e) =>
+      # clear file input:
+      # http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery
+      @$input.replaceWith(@$input = @$input.clone(true))
+      @$clearButton.hide()
+      e.preventDefault()
+
+    @$input.on 'change', (e) =>
+      @$clearButton.show()
+
+
+  _add_remove_checkbox: ->
+    removeInputName     = @removeName()
+    @$removeLabel       =$ "<label for='#{ removeInputName }'>Remove</label>"
+    @$hiddenRemoveInput =$ "<input type='hidden' name='#{ removeInputName }' value='false'>"
+    @$removeInput       =$ "<input type='checkbox' name='#{ removeInputName }' id='#{ removeInputName }' value='true'>"
+    @$link.after(@$removeLabel)
+    @$link.after(@$removeInput)
+    @$link.after(@$hiddenRemoveInput)
+
+
+  _update_inputs: ->
+    @$link.html(@filename).attr('title', @filename).attr('href', @value.url)
+
+
+  _update_state: (@filename=null) ->
+    @$input.val('')
+    @$removeInput.prop('checked', false)
+
+    if @value.url
+      @filename = _last(@value.url.split('/'))
+      if @filename == '_old_' then @filename = null # carrierwave filename workaround
+
+    if @filename
+      @$el.removeClass('empty')
+      @_update_inputs()
+    else
+      @$el.addClass('empty')
+
+
+  # PUBLIC ================================================
+
+  # when no file uploaded and no file selected, send remove flag so
+  # carrierwave does not catch _old_ value
+  isEmpty: ->
+    ( ! @$input.get()[0].files[0] && ! @filename )
+
+
+  removeName: ->
+    @name.reverse().replace('[', '[remove_'.reverse()).reverse()
+
+
+  updateValue: (@value, @object) ->
+    @_update_state()
+
+
+  hash: (hash={})->
+    # @TODO: file input type does not support caching and versioning as of now
+    return hash
+
+
+chr.formInputs['file'] = InputFile
+
+
+
+

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

@@ -0,0 +1,57 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT HIDDEN
+# -----------------------------------------------------------------------------
+class @InputHidden
+  constructor: (@name, @value, @config, @object) ->
+    @_create_el()
+
+    return this
+
+
+  # PRIVATE ===============================================
+
+  _create_el: ->
+    @$el =$ "<input type='hidden' name='#{ @name }' value='#{ @_safe_value() }' />"
+
+
+  _safe_value: ->
+    if typeof(@value) == 'object'
+      return JSON.stringify(@value)
+    else
+      _escapeHtml(@value)
+
+
+  # PUBLIC ================================================
+
+  showErrorMessage: (message) -> ;
+
+
+  hideErrorMessage: -> ;
+
+
+  initialize: ->
+    @config.onInitialize?(this)
+
+
+  hash: (hash={}) ->
+    hash[@config.klassName] = @$el.val()
+    return hash
+
+
+  updateValue: (@value) ->
+    @$el.val(@value)
+
+
+chr.formInputs['hidden'] = InputHidden
+
+
+
+

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

@@ -0,0 +1,81 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT HTML
+# -----------------------------------------------------------------------------
+#
+# Config options:
+#   label      - Input label
+#   aceOptions - Custom options for overriding default ones
+#
+# Input config example:
+#   body_html: { type: 'html', label: 'Article' }
+#
+# Dependencies:
+#= require vendor/ace
+#= require vendor/mode-html
+#
+# -----------------------------------------------------------------------------
+
+class @InputHtml extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    @$input =$ "<input type='hidden' name='#{ @name }' value='#{ @_safe_value() }' />"
+    @$el.append @$input
+
+    @$editor =$ "<div></div>"
+    @$el.append @$editor
+
+
+  _update_inputs: ->
+    @value = @editor.getSession().getValue()
+    @$input.val(@value)
+    @$input.trigger('change')
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    @editor = ace.edit(@$editor.get(0))
+    @editor.$blockScrolling = Infinity
+
+    @session = @editor.getSession()
+    @session.setValue(@$input.val())
+    @session.setUseWrapMode(true)
+    @session.setMode("ace/mode/html")
+
+    # ace options: https://github.com/ajaxorg/ace/wiki/Configuring-Ace
+    @editor.setOptions
+      autoScrollEditorIntoView: true
+      minLines:                 5
+      maxLines:                 Infinity
+      showLineNumbers:          false
+      showGutter:               false
+      highlightActiveLine:      false
+      showPrintMargin:          false
+
+    @session.on 'change', (e) => @_update_inputs()
+
+    @config.onInitialize?(this)
+
+
+  updateValue: (@value) ->
+    @editor.getSession().setValue(@value)
+    @$input.val(@value)
+
+
+chr.formInputs['html'] = InputHtml
+
+
+
+

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

@@ -0,0 +1,28 @@
+# -----------------------------------------------------------------------------
+# INPUT FILE IMAGE
+# -----------------------------------------------------------------------------
+# Config options:
+#   thumbnail(object) - method that returns thumbnail for input
+# -----------------------------------------------------------------------------
+class @InputFileImage extends InputFile
+  _add_input: ->
+    @$link =$ "<a href='#' target='_blank' title=''></a>"
+    @$el.append @$link
+
+    @$thumb =$ "<img src='' />"
+    @$el.append @$thumb
+
+    @$input =$ "<input type='file' name='#{ @name }' id='#{ @name }' />"
+    @$el.append @$input
+
+    @_add_clear_button()
+    @_add_remove_checkbox()
+
+
+  _update_inputs: ->
+    @$link.html(@filename).attr('title', @filename).attr('href', @value.url)
+    image_thumb_url = if @config.thumbnail then @config.thumbnail(@object) else @value.url
+    @$thumb.attr('src', image_thumb_url).attr('alt', @filename)
+
+
+chr.formInputs['image'] = InputFileImage