formagic 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: eaeeb3489a798aafed4d51440ab9fb4d933f9f27
+  data.tar.gz: c0717929f3661809eeab159d8419b940d38eb5a4
+SHA512:
+  metadata.gz: e41c4ae09383eed7c534784e4b8896e7938a3171c11dad5adbf282783cdec2089c798b8b1ca2816ec73ede8aade18c1973a055fbaf4790297538badf695ada8f
+  data.tar.gz: 0d8465bdc12df5d3d1e9d0e39cf57c10881552519899e0a8589cbf9bc1fb75b90dc8c1f2cbba7915b699e79350695f5dd750d48a784718db6aadf182db338f9d

data/.gitignore

@@ -0,0 +1,2 @@
+pkg/
+.DS_Store

data/CONTRIBUTING.md

@@ -0,0 +1,24 @@
+We love pull requests. Here’s a quick guide:
+
+1. Fork the repository.
+2. Make your changes in a topic branch.
+3. Squash your commits into a single one (more on that [here](http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html)).
+4. Rebase against `origin/master`, push to your fork and submit a pull request.
+5. If you are writing a new feature please add documentation for it by making another pull request to the `gh-pages` branch.
+
+At this point you’re waiting on us. We like to at least comment on, if not
+accept, pull requests within three business days (and, typically, one business
+day). We may suggest some changes or improvements or alternatives.
+
+Some things that will increase the chance that your pull request is accepted:
+
+* Fix a bug, refactor code or expand an existing feature.
+* Use the right syntax and naming conventions.
+* Update parts of the documentation that are affected by your contribution.
+
+**Git Commit Messages**
+
+* Capitalize your commit messages.
+* Start your message with a verb.
+* Use present tense.
+* Refer to the issue/PR number in your squashed commit message.

data/Gemfile

@@ -0,0 +1,3 @@
+source "http://rubygems.org"
+
+gemspec

data/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright © 2015 [Slate Studio, LLC](http://slatestudio.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,29 @@
+# Formagic
+
+*Easy to use javascript forms builder*
+
+This library is heavily used by Character project and provides a very easy and convinient way to build and customize forms with javascript. This supposed to be working with Rails on the first place.
+
+
+## Formagic Family:
+
+- [Character](https://github.com/slate-studio/chr): Powerful responsive javascript CMS for apps
+- [Mongosteen](https://github.com/slate-studio/mongosteen): An easy way to add RESTful actions for Mongoid models
+- [Inverter](https://github.com/slate-studio/inverter): An easy way to connect Rails templates content to Character CMS
+- [Loft](https://github.com/slate-studio/loft): Media assets manager for Character CMS
+
+
+## License
+
+Copyright © 2015 [Slate Studio, LLC](http://slatestudio.com). Formagic is free software, and may be redistributed under the terms specified in the [license](LICENSE.md).
+
+
+## About Slate Studio
+
+[![Slate Studio](https://slate-git-images.s3-us-west-1.amazonaws.com/slate.png)](http://slatestudio.com)
+
+Formagic is maintained and funded by [Slate Studio, LLC](http://slatestudio.com). Tweet your questions or suggestions to [@slatestudio](https://twitter.com/slatestudio) and while you’re at it follow us too.
+
+
+
+

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/images/datedropper/done.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M30.171,6.131l-0.858-0.858c-0.944-0.945-2.489-0.945-3.433,0L11.294,19.859l-5.175-5.174  c-0.943-0.944-2.489-0.944-3.432,0.001l-0.858,0.857c-0.943,0.944-0.943,2.489,0,3.433l7.744,7.75c0.944,0.945,2.489,0.945,3.433,0  L30.171,9.564C31.112,8.62,31.112,7.075,30.171,6.131z" fill="#f8f8f8"/></svg>

data/app/assets/images/datedropper/next.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M24.291,14.276L14.705,4.69c-0.878-0.878-2.317-0.878-3.195,0l-0.8,0.8c-0.878,0.877-0.878,2.316,0,3.194  L18.024,16l-7.315,7.315c-0.878,0.878-0.878,2.317,0,3.194l0.8,0.8c0.878,0.879,2.317,0.879,3.195,0l9.586-9.587  c0.472-0.471,0.682-1.103,0.647-1.723C24.973,15.38,24.763,14.748,24.291,14.276z" fill="#dddddd"/></svg>

data/app/assets/images/datedropper/prev.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M7.701,14.276l9.586-9.585c0.879-0.878,2.317-0.878,3.195,0l0.801,0.8c0.878,0.877,0.878,2.316,0,3.194  L13.968,16l7.315,7.315c0.878,0.878,0.878,2.317,0,3.194l-0.801,0.8c-0.878,0.879-2.316,0.879-3.195,0l-9.586-9.587  C7.229,17.252,7.02,16.62,7.054,16C7.02,15.38,7.229,14.748,7.701,14.276z" fill="#dddddd"/></svg>

data/app/assets/javascripts/formagic/form.coffee

@@ -0,0 +1,229 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# FORM
+# -----------------------------------------------------------------------------
+#
+# Generates form based on provided configuration schema. If schema is not
+# provided generates default form based on object keys. This uses Rails
+# conventions for managing names for attributes, arrays, hashs and nested
+# objects.
+#
+# -----------------------------------------------------------------------------
+
+class @Form
+  constructor: (@object, @config) ->
+    @groups    = []
+    @inputs    = {}
+    @$el       = $(@config.rootEl || "<form class='form'>")
+    @schema    = @_get_schema()
+    @isRemoved = false
+
+    @_build_schema(@schema, @$el)
+    @_add_nested_form_remove_button()
+
+
+  # PRIVATE ===============================================
+
+  _get_schema: ->
+    schema = @config.formSchema
+    if @object
+      schema ?= @_generate_default_schema()
+    return schema
+
+
+  _generate_default_schema: ->
+    schema = {}
+    for key, value of @object
+      schema[key] = @_generate_default_input_config(key, value)
+    return schema
+
+
+  _generate_default_input_config: (fieldName, value) ->
+    config = {}
+
+    if fieldName[0] == '_'
+      config.type = 'hidden'
+
+    else if value in [ true, false ]
+      config.type = 'checkbox'
+
+    else if value
+
+      if value.hasOwnProperty('url')
+        config.type = 'file'
+
+      else if value.length > 60
+        config.type = 'text'
+
+    return config
+
+
+  # INPUTS ================================================
+
+  _build_schema: (schema, $el) ->
+    for fieldName, config of schema
+      config.fieldName = fieldName
+
+      if config.type == 'group'
+        group = @_generate_inputs_group(fieldName, config)
+        $el.append group.$el
+
+      else
+        input = @_generate_input(fieldName, config)
+        $el.append input.$el
+
+
+  _generate_inputs_group: (klassName, groupConfig) ->
+    $group =$ """<div class='group #{ klassName }' />"""
+
+    if groupConfig.inputs
+      @_build_schema(groupConfig.inputs, $group)
+
+    group = { $el: $group, klassName: klassName, onInitialize: groupConfig.onInitialize }
+    @groups.push group
+
+    return group
+
+
+  _generate_input: (fieldName, inputConfig) ->
+    if @object
+      value = @object[fieldName]
+
+    else
+      value = inputConfig.default
+
+    value ?= ''
+
+    inputName = inputConfig.name || fieldName
+    input     = @_render_input(inputName, inputConfig, value)
+    @inputs[fieldName] = input
+
+    return input
+
+
+  _render_input: (name, config, value) ->
+    inputConfig = $.extend {}, config
+
+    inputConfig.label    ?= name.titleize()
+    inputConfig.type     ?= 'string'
+    inputConfig.klass    ?= 'stacked'
+    inputConfig.klassName = name
+
+    inputClass  = chr.formInputs[inputConfig.type]
+    inputClass ?= chr.formInputs['string']
+
+    inputName = if @config.namePrefix then "#{ @config.namePrefix }[#{ name }]" else "[#{ name }]"
+
+    # add prefix for nested form inputs
+    if inputConfig.type == 'form' || inputConfig.type == 'documents'
+      inputConfig.namePrefix = inputName.replace("[#{ name }]", "[#{ name }_attributes]")
+
+    else
+      inputConfig.namePrefix = @config.namePrefix
+
+    return new inputClass(inputName, value, inputConfig, @object)
+
+
+  # NESTED ================================================
+
+  _add_nested_form_remove_button: ->
+    if @config.removeButton
+      # add hidden input to the form
+      fieldName          = '_destroy'
+      input              = @_render_input(fieldName, { type: 'hidden' }, false)
+      @inputs[fieldName] = input
+      @$el.append input.$el
+      # remove button
+      @$removeButton =$ """<a href='#' class='nested-form-delete'>Delete</a>"""
+      @$el.append @$removeButton
+      @$removeButton.on 'click', (e) =>
+        e.preventDefault()
+        if confirm('Are you sure?')
+          input.updateValue('true')
+          @$el.hide()
+          @isRemoved = true
+          @config.onRemove?(this)
+
+
+  _forms: ->
+    forms = [ @ ]
+    addNestedForms = (form) ->
+      for name, input of form.inputs
+        if input.config.type == 'form' || input.config.type == 'documents'
+          forms = forms.concat(input.forms)
+          addNestedForms(form) for form in input.forms
+    addNestedForms(@)
+
+    return forms
+
+
+  # PUBLIC ================================================
+
+  destroy: ->
+    group.destroy?() for group in @groups
+    input.destroy?() for name, input of @inputs
+    @$el.remove()
+
+
+  serialize: (obj={}) ->
+    # serialize everything except file inputs
+    obj[input.name] = input.value for input in @$el.serializeArray()
+
+    for form in @_forms()
+      # serialize file inputs for all forms (including nested)
+      for name, input of form.inputs
+        if input.config.type == 'file' or input.config.type == 'image'
+          file = input.$input.get()[0].files[0]
+          obj["__FILE__#{ input.name }"] = file
+          if input.isEmpty() then obj[input.removeName()] = 'true'
+
+      # remove fields with ignoreOnSubmission
+      for name, input of form.inputs
+        if input.config.ignoreOnSubmission
+          delete obj[name]
+
+    return obj
+
+
+  hash: (hash={}) ->
+    for name, input of @inputs
+      input.hash(hash)
+    return hash
+
+
+  initializePlugins: ->
+    for group in @groups
+      group.onInitialize?(@, group)
+
+    for name, input of @inputs
+      input.initialize()
+
+
+  showValidationErrors: (errors) ->
+    @hideValidationErrors()
+    for inputName, messages of errors
+      input        = @inputs[inputName]
+      firstMessage = messages[0]
+      input.showErrorMessage(firstMessage)
+
+
+  hideValidationErrors: ->
+    for inputName, input of @inputs
+      input.hideErrorMessage()
+
+
+  updateValues: (object) ->
+    for name, value of object
+      if @inputs[name]
+        @inputs[name].updateValue(value, object)
+
+
+
+

data/app/assets/javascripts/formagic/group.coffee

@@ -0,0 +1,28 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# EXPANDABLE GROUP
+# -----------------------------------------------------------------------------
+#
+# Usage: onInitialize: (form, group) -> new ExpandableGroup(form, group, 'Details')
+#
+# -----------------------------------------------------------------------------
+
+class @ExpandableGroup
+  constructor: (@form, @group, name) ->
+    @$expander =$ """<a href='#' class='group-edit hidden'>#{ name }</a>"""
+    @group.$el.before @$expander
+
+    @$expander.on 'click', (e) =>
+      @$expander.toggleClass('hidden')
+      e.preventDefault()
+
+
+
+

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

@@ -0,0 +1,83 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT CHECKBOX
+# -----------------------------------------------------------------------------
+class @InputCheckbox extends InputString
+  constructor: (@name, @value, @config, @object) ->
+    @_create_el()
+    @_add_input()
+    @_add_label()
+
+    return this
+
+
+  # PRIVATE ===============================================
+
+  _create_el: ->
+    @$el =$ "<label for='#{ @name }' class='input-#{ @config.type } input-#{ @config.klass } input-#{ @config.klassName }'>"
+
+
+  _safe_value: ->
+    if not @value or @value == 'false' or @value == 0 or @value == '0'
+      return false
+    else
+      return true
+
+
+  _add_input: ->
+    # for boolean checkbox to be serialized correctly we need a hidden false
+    # value which is used by default and overriden by checked value
+    @$false_hidden_input =$ "<input type='hidden' name='#{ @name }' value='false' />"
+    @$el.append @$false_hidden_input
+
+    @$input =$ "<input type='checkbox' id='#{ @name }' name='#{ @name }' value='true' #{ if @_safe_value() then 'checked' else '' } />"
+    @$el.append @$input
+
+
+  # PUBLIC ================================================
+
+  updateValue: (@value) ->
+    @$input.prop('checked', @_safe_value())
+
+
+  hash: (hash={}) ->
+    hash[@config.klassName] = @$input.prop('checked')
+    return hash
+
+
+chr.formInputs['checkbox'] = InputCheckbox
+
+
+# -----------------------------------------------------------------------------
+# INPUT CHECKBOX SWITCH
+# -----------------------------------------------------------------------------
+class @InputCheckboxSwitch extends InputCheckbox
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    @$switch =$ "<div class='switch'>"
+    @$el.append @$switch
+
+    @$false_hidden_input =$ "<input type='hidden' name='#{ @name }' value='false' />"
+    @$switch.append @$false_hidden_input
+
+    @$input =$ "<input type='checkbox' id='#{ @name }' name='#{ @name }' value='true' #{ if @_safe_value() then 'checked' else '' } />"
+    @$switch.append @$input
+
+    @$checkbox =$ "<div class='checkbox'>"
+    @$switch.append @$checkbox
+
+
+chr.formInputs['switch'] = InputCheckboxSwitch
+
+
+
+

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

@@ -0,0 +1,55 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT COLOR
+# -----------------------------------------------------------------------------
+class @InputColor extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_color_preview: ->
+    @$colorPreview =$ "<div class='preview'>"
+    @$el.append @$colorPreview
+
+
+  _update_color_preview: ->
+    @$colorPreview.css { 'background-color': "##{ @$input.val() }" }
+
+
+  _validate_input_value: ->
+    if (/^(?:[0-9a-f]{3}){1,2}$/i).test(@$input.val())
+      @hideErrorMessage()
+    else
+      @showErrorMessage('Invalid hex value')
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    @$input.attr('placeholder', @config.placeholder || 'e.g. #eee')
+
+    @_add_color_preview()
+    @_update_color_preview()
+
+    @$input.on 'change keyup',  (e) =>
+      @hideErrorMessage()
+      @_validate_input_value()
+      @_update_color_preview()
+
+    @config.onInitialize?(this)
+
+
+chr.formInputs['color'] = InputColor
+
+
+
+
+

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

@@ -0,0 +1,69 @@
+# -----------------------------------------------------------------------------
+# 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 @InputDate extends InputString
+
+  # PRIVATE ===============================================
+
+  _update_date_label: ->
+    date = @$input.val()
+    date_formatted = moment(date).format("dddd, MMMM Do, YYYY")
+    @$dateLabel.html(date_formatted)
+
+
+  _add_input: ->
+    @$input =$ "<input type='text' name='#{ @name }' value='#{ @_safe_value() }' class='input-datetime-date' />"
+    @$el.append @$input
+    @$input.on 'change', (e) => @_update_date_label()
+
+    @$dateLabel =$ "<div class='input-date-label'>"
+    @$el.append @$dateLabel
+    @$dateLabel.on 'click', (e) => @$input.trigger 'click'
+
+    @_update_date_label()
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    # http://felicegattuso.com/projects/datedropper/
+    @config.pluginConfig ?= {}
+
+    config =
+      animation: 'fadein'
+      format:    'Y-m-d'
+
+    $.extend(config, @config.pluginConfig)
+
+    @$input.dateDropper(config)
+
+    @config.onInitialize?(this)
+
+
+  updateValue: (@value) ->
+    @$input.val(@value)
+    # @TODO: check if required, cause change event might be triggered
+    #@_update_date_label()
+
+
+chr.formInputs['date'] = InputDate
+
+
+
+