caisson 0.0.1 → 0.0.2

data/README.md

@@ -1,7 +1,7 @@
 Caisson
 ===============
 
-Caisson will provide a set of tools to facilitate the integration of Zurb-Foundation to your Rails project.
+Caisson provide a set of tools to facilitate the integration of Zurb-Foundation to your Rails project.
 
 Install
 -------
@@ -19,6 +19,18 @@ gem 'zurb-foundation'
 gem 'caisson'
 ```
 
+In your application.js
+
+```javascript
+//= require foundation
+//= require caisson
+```
+
+In your application.scss
+```css
+@import "foundation";
+```
+
 Orbit Slider
 -----
 

data/app/assets/javascripts/caisson/base.coffee

@@ -1,5 +1,9 @@
 class Caisson
   constructor: () ->
+    $(document).foundation()
+
+    FormCaisson.load()
+
     $('div[data-caisson]').each (i, component) =>
         switch $(component).data('caisson')
           when 'orbit-slider' then new OrbitSlider $(component)

data/app/assets/javascripts/caisson/form/fields/base.coffee

@@ -0,0 +1,115 @@
+#*************************************************************************************
+# TOCOMMENT
+#*************************************************************************************
+@caissonMod "FormCaisson", ->
+  @caissonMod "Field", ->
+    class @Base
+      #*************************************************************************************
+      # CONSTRUCTOR
+      #*************************************************************************************
+      constructor: (@field) ->
+        @build()
+
+      #*************************************************************************************
+      # PUBLIC INSTANCE METHODS
+      #*************************************************************************************
+      build: () ->
+        @initPlaceholder()
+        @tagField()
+
+        @field.on('validate', (e) => @validate())
+        @field.blur (e) => @validate() if @hasErrors()
+
+
+      closest: (path) -> @field.closest(path)
+
+      data: (key, val) -> @field.data key, val
+
+
+      hasApproximateName: (names) ->
+        return name for name in names when name is @field.attr('name') or @field.attr('name').indexOf("[#{name}]") > 0
+
+        return ''
+
+
+      hideErrors: ->
+        @wrapper().removeClass('errors')
+        @wrapper().find('div.error-messages').fadeOut 500, -> $(this).remove()
+        $('#form-caisson-flash-' + @id()).fadeOut 500, -> $(this).remove()
+
+
+      find: (key) -> @field.find key
+
+      hasErrors: -> @wrapper().hasClass('errors')
+
+      id: () -> @field.attr('id')
+
+      input: () -> if @field[0].tagName.toLowerCase() == 'input' then @field else $(@field.find('input'))
+
+      isPlaceholder: () -> @field.attr('placeholder') isnt undefined
+
+      isSubmitAuto: () -> @field.data('submit') is 1
+
+      label: () -> @wrapper().find('label')
+
+      labelText: () -> @label().text()
+
+      showErrors: (messages) ->
+        @removeErrorMessages()
+        @wrapper().addClass('errors')
+        @popErrors messages
+
+
+      validate: () ->
+        v = @validator()
+
+        if v.validate() then @hideErrors() else @showErrors v.messages
+
+
+      validateWithAjax: (url, caller, callback) ->
+        $.getJSON url, (data) =>
+          if data['state'] is 'error' then @showErrors([data['message']])
+          caller[callback]()
+
+
+      validator: () -> new FormCaisson.Field.Validator(@field.data('validations'), @field.val())
+
+      wrapper: () -> @field.closest('div.field')
+
+
+      #*************************************************************************************
+      # PRIVATE INSTANCE METHODS
+      #*************************************************************************************
+      initPlaceholder: () ->
+        if @isPlaceholder()
+          @input().placeholder()
+          @input().focus (e) => $(@wrapper().find('.ui-placeholder')).addClass('focus')
+          @input().blur (e) => $(@wrapper().find('.ui-placeholder')).removeClass('focus')
+
+
+      removeErrorMessages: () ->
+        @wrapper().find('div.error-messages').remove()
+        $('#form-caisson-flash-' + @id()).remove()
+
+
+      popErrors: (messages) ->
+        content = ''
+        content += '<span class="text">' + message + '</span>' for message in messages
+
+        flashPop = $('<div class="form-caisson-flash error" id="form-caisson-flash-' + @id() + '">').html(content)
+
+        flashPop.click () -> $(@).fadeOut(700)
+
+        if @hasErrors() then $('body').append(flashPop) else $('body').append(flashPop.hide().fadeIn(700))
+
+        align = ((@field.outerHeight() - flashPop.outerHeight()) / 2)
+
+        flashPop.css
+          "left": (@field.offset().left + (@field.outerWidth())) + "px"
+          "top": (@field.offset().top + align) + "px"
+
+
+      tagField: () ->
+        @field.data('caisson', 'field')
+        @field.attr('data-caisson', 'field')
+        @field.attr('id', 'field-caisson-' + Math.floor(Math.random()*10000)) if not @field.attr('id')

data/app/assets/javascripts/caisson/form/fields/checkbox.coffee

@@ -0,0 +1,13 @@
+#*************************************************************************************
+# TOCOMMENT
+#*************************************************************************************
+@caissonMod "FormCaisson", ->
+  @caissonMod "Field", ->
+    class @Checkbox extends FormCaisson.Field.Base
+      #*************************************************************************************
+      # CONSTRUCTOR
+      #*************************************************************************************
+      constructor: (@field) ->
+        if @isSubmitAuto() then @input().change (event) => @closest('form').submit()
+
+        super @field

data/app/assets/javascripts/caisson/form/fields/select.coffee

@@ -0,0 +1,14 @@
+#*************************************************************************************
+# TOCOMMENT
+# TODO : Add keyboard shortcuts
+#*************************************************************************************
+@caissonMod "FormCaisson", ->
+  @caissonMod "Field", ->
+    class @SelectField extends FormCaisson.Field.Base
+      #*************************************************************************************
+      # CONSTRUCTOR
+      #*************************************************************************************
+      constructor: (@field) ->
+        if @isSubmitAuto() then $(@field).change (event) => @closest('form').submit()
+
+        super @field

data/app/assets/javascripts/caisson/form/fields/text_field.coffee

@@ -0,0 +1,22 @@
+#*************************************************************************************
+# TOCOMMENT
+#*************************************************************************************
+@caissonMod "FormCaisson", ->
+  @caissonMod "Field", ->
+    class @TextField extends FormCaisson.Field.Base
+      #*************************************************************************************
+      # CONSTRUCTOR
+      #*************************************************************************************
+      constructor: (@field) ->
+        super @field
+
+
+      #*************************************************************************************
+      # PUBLIC INSTANCE METHODS
+      #*************************************************************************************
+      #getCreditCardType: () -> @validator().getCreditCardType @field.val()
+
+
+      #*************************************************************************************
+      # PRIVATE INSTANCE METHODS
+      #*************************************************************************************

data/app/assets/javascripts/caisson/form/fields/validator.coffee

@@ -0,0 +1,116 @@
+#*************************************************************************************
+# TOCOMMENT
+#*************************************************************************************
+@caissonMod "FormCaisson", ->
+  @caissonMod "Field", ->
+    class @Validator
+      #*************************************************************************************
+      # CONSTRUCTOR
+      #*************************************************************************************
+      constructor: (specs, @value) ->
+        @specs = if specs then specs.split(' ') else []
+        @messages = []
+
+
+      #*************************************************************************************
+      # PUBLIC INSTANCE METHODS
+      #*************************************************************************************
+      checkSpec: (spec) ->
+        stripped_spec = spec.split('-')[0]
+
+        if stripped_spec is 'blank'
+          @isBlank()
+        else if @notBlank()
+          switch stripped_spec
+            when 'confirm' then @isConfirmed spec
+            when 'creditcard' then @isCreditCard spec
+            when 'creditcardname' then @isCreditCardName()
+            when 'creditcardexpiration' then @isCreditCardExpiration()
+            when 'email' then @isEmail()
+            when 'length' then @isLengthEql spec
+            when 'max' then @isMax spec
+            when 'min' then @isMin spec
+            when 'numeric' then @isNumeric()
+            when 'within' then @isWithin spec
+            else
+
+
+      getCreditCardType: (rawCCNumber) ->
+        ccNumber = rawCCNumber.replace(/(\s|-)/g, '')
+
+        if /^4[0-9]{12}(?:[0-9]{3})?$/.test(ccNumber)
+          'visa'
+        else if /^5[1-5][0-9]{14}$/.test(ccNumber)
+          'mastercard'
+        else if /^3[47][0-9]{13}$/.test(ccNumber)
+          'amex'
+        else
+          ''
+
+
+      isValid: () -> @messages.length is 0
+
+      validate: () ->
+        @checkSpec spec for spec in @specs if @specs
+
+        return @isValid()
+
+
+      #*************************************************************************************
+      # PRIVATE INSTANCE METHODS
+      #*************************************************************************************
+      isBlank: () -> if @value is "" then @messages.push 'Le champ ne peut être vide.'
+
+      isConfirmed: (spec) ->
+        [tag, idOtherField] = spec.split('-')
+
+        if @value isnt $('#' + idOtherField).val() then @messages.push 'La confirmation est erronée'
+
+
+      isCreditCard: (spec) ->
+        types = spec.replace('creditcard-', '').split('-')
+        currentType = @getCreditCardType @value
+        if $.inArray(currentType, types) is -1 then @messages.push "Le numéro de carte de crédit est invalide."
+
+
+      isCreditCardName: () -> if not /^\S+ \S+/.test(@value) then @messages.push "Entrez le nom complet figurant sur votre carte."
+
+      isCreditCardExpiration: () ->
+        value = @value.replace('/', '').replace('-', '').replace(' ', '')
+
+        value = value.slice(0,2) + '20' + value.slice(2,4) if value.length is 4
+
+        if value.length is 6 and /^[0-9]*$/.test value
+          expiration = new Date(value.slice(2,6), Number(value.slice(0,2)) - 1, 31)
+
+          if expiration < new Date() then @messages.push "Votre carte de crédit est expirée."
+        else
+          @messages.push "La date d'expiration est doit avoir un format MM/AA."
+
+
+      isEmail: () -> if not /^[a-zA-Z0-9.\$#%+-\/=?_]+@([a-zA-Z0-9.\-]+\.)+[a-zA-Z0-9.\-]{2,6}$/.test(@value) then @messages.push 'Le courriel est invalide.'
+
+      isLengthEql: (spec) ->
+        [tag, length] = spec.split('-')
+        if @value.length != Number(length) then @messages.push "Le champ doit contenir #{length} caractères."
+
+      isMax: (spec) ->
+        [tag, max] = spec.split('-')
+        if @value.length > Number(max) then @messages.push "Le champ doit contenir moins de #{max} caractères."
+
+
+      isMin: (spec) ->
+        [tag, min] = spec.split('-')
+        if @value.length < Number(min) then @messages.push "Le champ doit contenir plus de #{min} caractères."
+
+
+      isNumeric: -> if not /^$|^([\-]?[0-9]*)?([\.,][0-9]*)?$/.test(@value) then @messages.push 'Le champ doit être numérique.'
+
+      isWithin: (spec) ->
+        [tag, min, max] = spec.split('-')
+
+        @isMin "min-#{min}"
+        @isMax "max-#{max}"
+
+
+      notBlank: () -> @value isnt ""

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

@@ -0,0 +1,119 @@
+#*************************************************************************************
+# TOCOMMENT
+#*************************************************************************************
+@caissonMod "FormCaisson", ->
+  class @Form
+    #*************************************************************************************
+    # CONSTRUCTOR
+    #*************************************************************************************
+    constructor: (@form) ->
+      @fields = []
+
+      @initFormId()
+      @initEvents()
+      @initFields()
+
+
+    #*************************************************************************************
+    # PUBLIC INSTANCE METHODS
+    #*************************************************************************************
+    field: (id) -> return f for f in @fields when f.id() is id
+
+    hasErrors: () -> @form.find('div.field.errors').length > 0
+
+    hasField: (id) -> if @field(id) then true else false
+
+    hideErrors: () -> field.hideErrors() for field in @fields
+
+    id: () -> @form.attr('id')
+
+    send: (callback) ->
+      if @validate()
+        callback = {} if not callback
+        callback['loading'](true) if callback['loading']
+
+        $.ajax(
+          type: @form.attr('method')
+          url: @form.attr("action") + '.json'
+          dataType: "json"
+          data: @form.serialize()
+          complete: (data) -> callback['loading'](false) if callback['loading']
+          error: (xhr, ajax_error) =>
+            switch xhr.status
+              when 400 then @setFieldErrors $.parseJSON(xhr.responseText)
+              when 401 then #alert '401'
+              else @showAjaxError xhr.responseText, ajax_error
+          statusCode: callback
+        )
+
+
+    validate: () ->
+      field.validate() for field in @fields
+
+      if @hasErrors()
+        @form.find('div.field.errors:first input').focus()
+        return false
+      else
+        return true
+
+
+    #*************************************************************************************
+    # PRIVATE INSTANCE METHODS
+    #*************************************************************************************
+    initEvents: () ->
+      @form.on('validate', (e) => @validate())
+      @form.on('send', (e) => @send())
+
+      @form.submit (e) =>
+        if @validate()
+          field.input().trigger 'before-submit-form' for field in @fields
+
+          $(e.target).find('input[type=submit]').attr 'disabled', 'disabled'
+          $(e.target).find('button').attr 'disabled', 'disabled'
+
+          return true
+        else
+          return false
+
+
+    initField: (path, fieldClass) -> @form.find(path).each (i, elem) => @fields.push new fieldClass $(elem)
+
+
+    initFields: ->
+      @initField 'input.checkbox',      FormCaisson.Field.Checkbox
+      @initField 'select',              FormCaisson.Field.SelectField
+      #@_initField 'div.switch-field',    FormCaisson.Field.SwitchField
+      @initField 'input.text-field',    FormCaisson.Field.TextField
+      #@_initField 'input.percent-field', FormCaisson.Field.PercentField
+      #@_initField 'input.money-field',   FormCaisson.Field.MoneyField
+      #@_initField 'div.time-field',      FormCaisson.Field.TimeField
+
+
+    initFormId: ->
+      @form.data('caisson', 'form')
+      @form.attr('data-caisson', 'form')
+      @form.attr('id', 'form-caisson-' + Math.floor(Math.random()*10000)) if not @form.attr('id')
+
+
+    setFieldErrors: (errors) ->
+      names = (k for k,v of errors)
+
+      for field in @fields
+        errorKey = field.hasApproximateName names
+
+        if errorKey
+          field.showErrors $.flatten(errors[errorKey])
+        else if field.hasErrors()
+          field.hideErrors()
+
+      return errors
+
+
+    showAjaxError: (message, ajax_error) ->
+      left = ($('body').width() - 700) / 2
+
+      pop = $('<div id="ajax-error" style="display:none;margin-left:' + left + 'px"><h1>AJAX : ' + ajax_error + '</h1>' + message + '</div>')
+      pop.dblclick (e) -> $(e.target).closest('div#ajax-error').remove()
+
+      $('body').before pop
+      pop.fadeIn(500)

data/app/assets/javascripts/caisson/form/form_caisson.coffee

@@ -0,0 +1,30 @@
+#*************************************************************************************
+# TOCOMMENT
+#*************************************************************************************
+@caissonMod "FormCaisson", ->
+  #*************************************************************************************
+  # PUBLIC MODULE METHODS
+  #*************************************************************************************
+  @findFormById = (id) -> return form for form in @forms when form.id() is id
+
+  @findFieldById = (id) -> return form.field(id) for form in @forms when form.hasField(id)
+
+  @initForms = () -> $('form').each (i, form) => @forms.push new FormCaisson.Form $(form)
+
+  @initHelpers = () ->
+    $.fn.caisson = () ->
+      switch $(this).data('caisson')
+        when "form" then FormCaisson.findFormById $(this).attr('id')
+        when "field" then FormCaisson.findFieldById $(this).attr('id')
+        else FormCaisson.findFieldById $(this).closest('div[data-caisson]').attr('id') if $(this).closest('div[data-caisson]')
+
+
+  @load = () ->
+    @forms = []
+    @initForms()
+    @initHelpers()
+
+
+  @reload = () -> @load()
+
+

data/app/assets/javascripts/caisson/index.js

@@ -1,2 +1,4 @@
+//= require ./module
 //= require ./base
+//= require_tree ./form
 //= require ./orbit-slider

data/app/assets/javascripts/caisson/module.coffee

@@ -0,0 +1,8 @@
+@caissonMod = (names, fn) ->
+  names = names.split '.' if typeof names is 'string'
+  space = @[names.shift()] ||= {}
+  space.caissonMod ||= @caissonMod
+  if names.length
+    space.caissonMod names, fn
+  else
+    fn.call space

data/app/assets/javascripts/caisson/orbit-slider.coffee

@@ -3,7 +3,8 @@
 #*************************************************************************************
 class @OrbitSlider
   constructor: (@holder) ->
-    @holder.orbit @buildAttributes()
+    # DEPRECATED IN VERSION 4
+    #@holder.orbit @buildAttributes()
 
 
   buildAttributes: () ->

data/app/assets/stylesheets/caisson/base.css.scss

@@ -0,0 +1,7 @@
+@import "foundation";
+
+div.line-checkbox{margin-bottom:1em;}
+div.field-percent{
+  input{float:left;width:6em;}
+  span.postfix{float:left;width:3em;}
+}

data/app/assets/stylesheets/caisson/index.css

@@ -0,0 +1,3 @@
+/*
+*= require_tree .
+*/