formagic 0.1.0

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

@@ -0,0 +1,154 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT LIST
+# -----------------------------------------------------------------------------
+# Allows to create/delete/reorder list items connected to dynamic or static
+# collection. Value should be an array of objects.
+#
+# All items should be unique for now.
+#
+# Dependencies:
+#= require ./list_reorder
+#= require ./list_typeahead
+#
+# -----------------------------------------------------------------------------
+
+class @InputList extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    # @TODO: check if we can use @config.name instead of @config.target
+    # @config.target ?= @config.klassName
+
+    # hidden input that stores ids, we use __LIST__ prefix to identify
+    # ARRAY input type and process it's value while form submission.
+    name = if @config.namePrefix then "#{ @config.namePrefix }[__LIST__#{ @config.target }]" else "[__LIST__#{ @config.target }]"
+
+    @$input =$ "<input type='hidden' name='#{ name }' value='' />"
+    @$el.append @$input
+
+    # list holder for items
+    @reorderContainerClass = @config.klassName
+    @$items =$ "<ul class='#{ @reorderContainerClass }'></ul>"
+    @$el.append @$items
+
+    # other options might be added here (static collection)
+
+    @_create_typeahead_el(@config.typeahead.placeholder)
+
+    @_render_items()
+    @_update_input_value()
+
+
+  _update_input_value: ->
+    ids = []
+    @$items.children('li').each (i, el) -> ids.push $(el).attr('data-id')
+
+    # @TODO: we need a better separator here, comma is too generic
+    #        it's used cause most cases list of IDs concidered to be here,
+    #        we might make this a @config setting.
+    value = ids.join(',')
+
+    @$input.val(value)
+    @$input.trigger('change')
+
+
+  _remove_item: ($el) ->
+    id = $el.attr('data-id')
+    delete @objects[id]
+
+    $el.parent().remove()
+    @_update_input_value()
+
+
+  _ordered_ids: ->
+    ids = @$input.val().split(',')
+    if ids[0] == '' then ids = []
+    return ids
+
+
+  _render_items: ->
+    @$items.html('')
+    @objects = {}
+
+    for o in @value
+      @_render_item(o)
+
+
+  _render_item: (o) ->
+    @_add_object(o)
+
+    if @config.itemTemplate
+      item = @config.itemTemplate(o)
+    else
+      item = o[@config.titleFieldName]
+
+    listItem =$ """<li data-id='#{ o._id }'>
+                     <span class='icon-reorder' data-container-class='#{ @reorderContainerClass }'></span>
+                     #{ item }
+                     <a href='#' class='action_remove'>Remove</a>
+                   </li>"""
+    @$items.append(listItem)
+    @_update_input_value()
+
+
+  _add_object: (o) ->
+    @_normalize_object(o)
+    @objects[o._id] = o
+
+
+  _normalize_object: (o) ->
+    o._id ?= o.id
+    if ! o._id then console.log("::: list item is missing an 'id' or '_id' :::")
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    # typeahead
+    @_bind_typeahead()
+
+    # remove
+    @$items.on 'click', '.action_remove', (e) =>
+      e.preventDefault()
+      if confirm('Are you sure?') then @_remove_item($(e.currentTarget))
+
+    @_bind_reorder()
+
+    @config.onInitialize?(this)
+
+
+  updateValue: (@value) ->
+    @_render_items()
+
+
+  hash: (hash={}) ->
+    hash[@config.target] = @$input.val()
+    ordered_objects = []
+
+    for id in @_ordered_ids()
+      ordered_objects.push(@objects[id])
+
+    hash[@config.klassName] = ordered_objects
+    return hash
+
+
+include(InputList, inputListReorder)
+include(InputList, inputListTypeahead)
+
+
+chr.formInputs['list'] = InputList
+
+
+
+

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

@@ -0,0 +1,39 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT LIST REORDER
+# -----------------------------------------------------------------------------
+
+@inputListReorder =
+
+  # PRIVATE ===============================================
+
+  _bind_reorder: ->
+    list = @$items.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) =>
+      e.target.parentNode.insertBefore(e.target, e.detail.insertBefore)
+      @_update_input_value()
+      return false
+    ), false
+
+
+
+

data/app/assets/javascripts/formagic/inputs/list_typeahead.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 LIST TYPEAHEAD
+# -----------------------------------------------------------------------------
+
+@inputListTypeahead =
+
+  # PRIVATE ===============================================
+
+  _create_typeahead_el: (placeholder) ->
+    # typeahead input for adding new items
+    @typeaheadInput =$ "<input type='text' placeholder='#{ placeholder }' />"
+    @$el.append @typeaheadInput
+
+
+  _bind_typeahead: ->
+    limit = @config.typeahead.limit || 5
+    dataSource = new Bloodhound
+      datumTokenizer: Bloodhound.tokenizers.obj.whitespace(@config.titleFieldName)
+      queryTokenizer: Bloodhound.tokenizers.whitespace
+      remote:
+        url:    @config.typeahead.url
+        # exclude objects that are already in the list
+        filter: (parsedResponse) =>
+          data = []
+          for o in parsedResponse
+            @_normalize_object(o) ; if ! @objects[o._id] then data.push(o)
+          return data
+      limit:  limit
+
+    dataSource.initialize()
+
+    @typeaheadInput.typeahead({
+      hint:       false
+      highlight:  true
+    }, {
+      name:       @config.klassName
+      displayKey: @config.titleFieldName
+      source:     dataSource.ttAdapter()
+    })
+
+    @typeaheadInput.on 'typeahead:selected', (e, object, dataset) =>
+      @_render_item(object)
+      @typeaheadInput.typeahead('val', '')
+
+
+
+

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

@@ -0,0 +1,93 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT MARKDOWN
+# -----------------------------------------------------------------------------
+# Markdown input supports syntax highlighting and optional compilation to html.
+#
+# Config options:
+#   label         - Input label
+#   aceOptions    - Custom options for overriding default ones
+#   htmlFieldName - Input name for generated HTML content
+#
+# Input config example:
+#   body_md: { type: 'markdown', label: 'Article', htmlFieldName: 'body_html' }
+#
+# Dependencies:
+#= require vendor/marked
+#= require vendor/ace
+#= require vendor/mode-markdown
+#
+# -----------------------------------------------------------------------------
+
+class @InputMarkdown extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    if @config.htmlFieldName
+      @$inputHtml =$ "<input type='hidden' name='[#{ @config.htmlFieldName }]' />"
+      @$el.append @$inputHtml
+
+    @$input =$ "<input type='hidden' name='#{ @name }' value='#{ @_safe_value() }' />"
+    @$el.append @$input
+
+    @$editor =$ "<div></div>"
+    @$el.append @$editor
+
+
+  _update_inputs: ->
+    md_source = @session.getValue()
+    @$input.val(md_source)
+    @$input.trigger('change')
+
+    if @$inputHtml
+      html = marked(md_source)
+      @$inputHtml.val(html)
+      @$inputHtml.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/markdown")
+
+    # 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) ->
+    @session.setValue(@value)
+    @_update_inputs()
+
+
+chr.formInputs['markdown'] = InputMarkdown
+
+
+
+

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

@@ -0,0 +1,32 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT PASSWORD
+# -----------------------------------------------------------------------------
+class @InputPassword extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    @$input =$ "<input type='password' name='#{ @name }' value='#{ @value }' />"
+    @$input.on 'keyup', (e) => @$input.trigger('change')
+    @$el.append @$input
+
+
+  # PUBLIC ================================================
+
+  updateValue: (@value) ->
+    @$input.val(@value)
+
+
+chr.formInputs['password'] = InputPassword
+
+
+
+

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

@@ -0,0 +1,53 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT REDACTOR
+# -----------------------------------------------------------------------------
+#
+# Dependencies:
+#= require redactor
+#= require vendor/redactor.fixedtoolbar
+#= require ./redactor_character
+# -----------------------------------------------------------------------------
+
+class @InputRedactor extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    @$el.css('opacity', 0)
+    @$input =$ "<textarea class='redactor' name='#{ @name }' rows=1>#{ @_safe_value() }</textarea>"
+    @$el.append @$input
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    @$input.redactor(@_redactor_options())
+
+    @$el.css('opacity', 1)
+
+    @config.onInitialize?(this)
+
+
+  updateValue: (@value) ->
+    @_trigger_change = false
+    @$input.redactor('code.set', @value)
+
+
+include(InputRedactor, redactorCharacter)
+
+
+chr.formInputs['redactor'] = InputRedactor
+
+
+
+

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

@@ -0,0 +1,75 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# REDACTOR CUSTOM VERSION
+#= require ./redactor_images
+# -----------------------------------------------------------------------------
+
+# change default fast speed from 200 to 10 as it's used by redactor modals
+# while closing
+console.log ':: [redactor-character] change $.fx.speeds.fast from 200 to 10 ::'
+$.fx.speeds.fast = 10
+
+@redactorCharacter =
+
+  # PRIVATE ===============================================
+
+  # TODO: fixed toolbar disabled on mobile
+  _redactor_options: ->
+    @_trigger_change = true
+
+    config = @_get_default_config()
+    @config.redactorOptions ?= {}
+
+    $.extend(config, @config.redactorOptions)
+
+    if (! chr.isMobile()) && config.plugins.indexOf('fixedtoolbar') == -1
+      config.plugins.push('fixedtoolbar')
+
+    if Loft? && config.plugins.indexOf('loft') == -1
+      config.plugins.push('loft')
+
+    if chr.isMobile()
+      config.toolbarFixed = false
+      # config.toolbarFixedTopOffset = 40
+
+    return config
+
+
+  _get_default_config: () ->
+    focus:            false
+    imageFloatMargin: '20px'
+    buttonSource:     true
+    pastePlainText:   true
+    scrollTarget:     chr.module.view.$content
+    plugins:          []
+    buttons:          [ 'html',
+                        'formatting',
+                        'bold',
+                        'italic',
+                        'deleted',
+                        'unorderedlist',
+                        'orderedlist',
+                        'link' ]
+
+    # to have caching working we need to trigger 'change' event for textarea
+    # when content got changed in redactor, but skip this when updating value
+    # via `updateValue` method
+    changeCallback: =>
+      if @_trigger_change
+        @$input.trigger('change')
+      @_trigger_change = true
+
+    initCallback: ->
+      new RedactorImages(this)
+
+
+
+
+

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

@@ -0,0 +1,166 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# REDACTOR IMAGES
+# -----------------------------------------------------------------------------
+
+class @RedactorImages
+  constructor: (@redactor) ->
+
+    @redactor.opts.modal.imageEdit       = @_modal_edit_image()
+    @redactor.image.update               = ($image) => @update($image)
+    @redactor.image.showEdit             = ($image) => @_show_edit($image)
+    @redactor.image.loadEditableControls = ($image) => @_load_editable_controls($image)
+
+
+  _modal_edit_image: ->
+    """<section id="redactor-modal-image-edit">
+         <label>Image Alternative Text</label>
+         <input type="text" id="redactor-image-title" />
+
+         <label class="redactor-image-position-option">Position</label>
+         <select class="redactor-image-position-option" id="redactor-image-align">
+           <option value="none">None</option>
+           <option value="left">Left</option>
+           <option value="center">Center</option>
+           <option value="right">Right</option>
+         </select>
+
+         <label class="redactor-image-link-option">Link URL</label>
+         <input type="text" id="redactor-image-link-url" class="redactor-image-link-option" />
+
+         <label class="redactor-image-link-option">Link Title</label>
+         <input type="text" id="redactor-image-link-title" class="redactor-image-link-option" />
+
+         <label class="redactor-image-link-option"><input type="checkbox" id="redactor-image-link-blank"> Open link in new tab</label>
+       </section>"""
+
+
+  update: ($image) ->
+    @redactor.image.hideResize()
+    @redactor.buffer.set()
+
+    $link = $image.closest('a')
+
+    $image.attr('alt', $('#redactor-image-title').val())
+
+    @redactor.image.setFloating($image)
+
+    # as link
+    link  = $.trim($('#redactor-image-link-url').val())
+    title = $.trim($('#redactor-image-link-title').val())
+
+    if link != ''
+
+      target = if ( $('#redactor-image-link-blank').prop('checked') ) then true else false
+
+      if $link.size() == 0
+        a =$ "<a href='#{ link }' title='#{ title }'>#{ @redactor.utils.getOuterHtml($image) }</a>"
+
+        if target
+          a.attr('target', '_blank')
+
+        $image.replaceWith(a)
+
+      else
+        $link.attr('href', link)
+        $link.attr('title', title)
+
+        if target
+          $link.attr('target', '_blank')
+
+        else
+          $link.removeAttr('target')
+
+    else if $link.size() != 0
+      $link.replaceWith(@redactor.utils.getOuterHtml($image))
+
+    @redactor.modal.close()
+    @redactor.observe.images()
+    @redactor.code.sync()
+
+
+  _show_edit: ($image) ->
+    $link = $image.closest('a')
+
+    @redactor.image.hideResize()
+    @redactor.modal.load('imageEdit', @redactor.lang.get('edit'), 705)
+
+    @redactor.modal.createCancelButton()
+    @redactor.image.buttonDelete = @redactor.modal.createDeleteButton(@redactor.lang.get('_delete'))
+    @redactor.image.buttonSave   = @redactor.modal.createActionButton(@redactor.lang.get('save'))
+
+    @redactor.image.buttonDelete.on 'click', $.proxy(( => @redactor.image.remove($image) ), @redactor)
+    @redactor.image.buttonSave.on   'click', $.proxy(( => @redactor.image.update($image) ), @redactor)
+
+    $('#redactor-image-title').val($image.attr('alt'))
+
+    if ! @redactor.opts.imageLink
+      $('.redactor-image-link-option').hide()
+
+    else
+      $redactorImageLinkUrl   = $('#redactor-image-link-url')
+      $redactorImageLinkTitle = $('#redactor-image-link-title')
+
+      $redactorImageLinkUrl.attr('href', $image.attr('src'))
+
+      if $link.size() != 0
+        $redactorImageLinkUrl.val($link.attr('href'))
+        $redactorImageLinkTitle.val($link.attr('title'))
+
+        if $link.attr('target') == '_blank'
+          $('#redactor-image-link-blank').prop('checked', true)
+
+    if ! @redactor.opts.imagePosition
+      $('.redactor-image-position-option').hide()
+
+    else
+      floatValue = if ($image.css('display') == 'block' && $image.css('float') == 'none') then 'center' else $image.css('float')
+      $('#redactor-image-align').val(floatValue)
+
+    @redactor.modal.show()
+
+
+  # for some reason when image is a link, tooltip is shown with the image edit dialog,
+  # add e.stopPropagation() to skip tooltip callback
+  _load_editable_controls: ($image) ->
+    imageBox =$ '<span id="redactor-image-box" data-redactor="verified">'
+    imageBox.css('float', $image.css('float')).attr('contenteditable', false)
+
+    if $image[0].style.margin != 'auto'
+      imageBox.css
+        marginTop:    $image[0].style.marginTop
+        marginBottom: $image[0].style.marginBottom
+        marginLeft:   $image[0].style.marginLeft
+        marginRight:  $image[0].style.marginRight
+
+      $image.css('margin', '')
+
+    else
+      imageBox.css({ 'display': 'block', 'margin': 'auto' })
+
+    $image.css('opacity', '.5').after(imageBox)
+
+    if @redactor.opts.imageEditable
+      # editter
+      @redactor.image.editter =$ "<span id='redactor-image-editter' data-redactor='verified'>Edit</span>"
+      @redactor.image.editter.attr('contenteditable', false)
+      @redactor.image.editter.on('click', $.proxy(( (e) => e.stopPropagation() ; @redactor.image.showEdit($image) ), @redactor))
+
+      imageBox.append(@redactor.image.editter)
+
+      # position correction
+      editerWidth = @redactor.image.editter.innerWidth()
+      @redactor.image.editter.css('margin-left', '-' + editerWidth/2 + 'px')
+
+    return @redactor.image.loadResizableControls($image, imageBox)
+
+
+
+