Skip to content

Instantly share code, notes, and snippets.

@danjohnson3141

danjohnson3141/form.js.coffee

Created September 6, 2016 20:09
Show Gist options
  • Save danjohnson3141/e0898cb9a140ac7d6822af9ab11e2110 to your computer and use it in GitHub Desktop.
Save danjohnson3141/e0898cb9a140ac7d6822af9ab11e2110 to your computer and use it in GitHub Desktop.
Download ZIP
Formication
Raw
form.js.coffee
class App.Models.Form extends App.Models.SourceModel
initialize: (@options) ->
@nullToBlank()
@formElements = {}
id: ->
if @get('object').get('id')
"<label class='id-column'>ID: #{@get('object').get('id')}</label>"
label: (attribute, label, html_attributes = '') ->
if @get('object').get('id')
"<label id='#{attribute}'>#{label} <span #{html_attributes}>#{@get('object').get(attribute)}</span></label>"
colorPicker: (attribute, label, required = false, html_attributes = '') ->
@add(attribute, label, required, 'colorPicker')
required = if(required == true) then 'required' else ''
text = "<div class='app-styles'>"
if label != ""
text += "<h4><label class='#{required}'>#{label}</label></h4>"
text += "<div class='color-shower color-picker' id='#{attribute}-preview' style='background-color: #{@get('object').get(attribute)};'>"
text += "<div class='bullseye-center'><input #{required} id='#{attribute}' #{html_attributes} class='noWarn' maxlength='7' type='text' value='#{@get('object').get(attribute)}'></div>"
text += "</div></div>"
text
textArea: (attribute, label, required = false, html_attributes = '', autofocus = false, helperText = '') ->
@add(attribute, label, required, 'textarea')
required = if(required == true) then 'required' else ''
autofocus = if(autofocus == true) then 'autofocus' else ''
helperText = if(helperText) then " <i class='fa fa-question-circle' data-helper-text='custom' alt='#{helperText}'></i>" else ''
text = ""
if label != ""
text += "<label class='#{required}'>#{label} #{helperText}</label>"
text += "<textarea #{required} id='#{attribute}' #{html_attributes} class='js-has-escape'>#{escape(@get('object').get(attribute))}</textarea>"
text
text: (attribute, label, required = false, html_attributes = '', autofocus = false, helperText = '', maxlength = '', type = 'text') ->
@add(attribute, label, required, type)
required = if(required) then 'required' else ''
autofocus = if(autofocus) then 'autofocus' else ''
helperText = if(helperText) then " <i class='fa fa-question-circle' data-helper-text='custom' alt='#{helperText}'></i>" else ''
maxlength = if(maxlength) then "#{maxlength}" else ''
text = ''
if label != ''
text += "<label class='#{required}'>#{label} #{helperText}</label>"
attr = if @get('object').get(attribute) == undefined then '' else @get('object').get(attribute)
text += "<input #{required} #{autofocus} id='#{attribute}' #{html_attributes} type='#{type}' class='js-has-escape' value='#{escape(attr)}' maxlength='#{maxlength}' />"
text
hidden: (attribute, value, label = 'n/a') ->
@add(attribute, label, false, 'hidden')
"<input id='#{attribute}' type='hidden' value='#{value}'>"
wysiwyg: (attribute, label, required = false, html_attributes = '', maxlength = null, helperText = '') ->
@add(attribute, label, required, html_attributes, 'wysiwyg')
required = if(required == true) then 'required' else ''
maxlength = if(maxlength) then "maxlength=#{maxlength}" else ''
helperText = if(helperText) then " <i class='fa fa-question-circle' data-helper-text='custom' alt='#{helperText}'></i>" else ''
"<label class='#{required}'>#{label} #{helperText}</label>
<textarea #{required} #{maxlength} id='#{attribute}' class='redactor'>#{@get('object').get(attribute)}</textarea><p class='maxchar-warning'></p>"
select: (attribute, label, required = false, html_attributes = '', helperText = '') ->
@add(attribute, label, required, 'select')
required = if(required == true) then 'required' else ''
helperText = if(helperText) then " <i class='fa fa-question-circle' data-helper-text='custom' alt='#{helperText}'></i>" else ''
html = "<label class='#{required}'>#{label} #{helperText}</label>
<select #{required} id='#{attribute}' #{html_attributes}>
<option value=''>Select ...</option>"
_.each @get('object').get(attribute), (object) ->
selected = ''
if object.selected
selected = 'selected'
html += "<option #{required} data-info='#{object.data}'' value='#{object.id}' #{selected}>#{object.name}</option>"
html += "</select>"
checkbox: (attribute, label, required = false, html_attributes = '', helperText = '', defaultValue = '') ->
@add(attribute, label, required, 'checkbox')
required = if(required == true) then 'required' else ''
checked = ''
helperText = if(helperText) then " <i class='fa fa-question-circle' data-helper-text='custom' alt='#{helperText}'></i>" else ''
if @get('object').get(attribute) == true
checked = 'checked'
if @get('object').get(attribute) == false
checked = ''
if @get('object').get(attribute) == undefined
checked = defaultValue
"<label class='#{required}'> <input type='checkbox' #{checked} id='#{attribute}' #{html_attributes} /> <span>#{label} #{helperText}</span></label><br />"
checkbutton: (attribute, label, required = false, html_attributes = '') ->
@add(attribute, label, required, 'checkbutton')
required = if(required == true) then 'required' else ''
checked = ''
if @get('object').get(attribute)
checked = 'checked'
"<div class='checkbox-button'><label><input class='hide' type='checkbox' #{checked} id='#{attribute}'><span>#{label}</span></div>"
tag_cloud: (tags) ->
tags = _.sortBy(tags, 'tag_type_name')
@add('tags', '', false, 'tags')
@formElements["tags"].tags = tags
output = ""
type_name = ""
_.each tags, (tag) ->
if tag.tag_type_name && tag.tag_type_name != type_name
output += "<div class='clear'></div>"
output += "<h4>#{tag.tag_type_name} <span class='tag-type-description'>(#{tag.tag_type_description})</span></h4>"
checked = if tag.selected == true then "checked" else ""
output += "<div class='checkbox-button'><label><input class='tag-checkbox hide' name='tag-button' id='tag_#{tag.id}' data-tag-id='#{tag.id}' type='checkbox' #{checked}><span>#{tag.name}</span></label></div>"
type_name = tag.tag_type_name
output
userRoleCloud: (userRoles) ->
@add('user_roles', '', false, 'user_roles')
@formElements["user_roles"].userRoles = userRoles
output = ""
_.each userRoles, (userRole) ->
checked = if userRole.selected == true then "checked" else ""
disabled = if userRole.selected == true then "disabled" else ""
output += "<div class='checkbox-button'><label><input class='tag-checkbox hide' name='tag-button' #{disabled} id='user_role_#{userRole.id}' data-tag-id='#{userRole.id}' type='checkbox' #{checked}><span>#{userRole.name}</span></label></div>"
output
datePicker: (attribute, label, required = false, html_attributes = '', helperText = '', default_date) ->
@add(attribute, label, required, 'datePicker')
date = if typeof default_date != 'undefined' then default_date else moment(@get('object').get(attribute)).format('YYYY-MM-DD')
helperText = if(helperText) then " <i class='fa fa-question-circle' data-helper-text='custom' alt='#{helperText}'></i>" else ''
required = if(required == true) then 'required' else ''
"<label class='#{required}'>#{label} #{helperText}:</label>
<input type='date' value='#{date}' id='#{attribute}' #{html_attributes}>"
dateTimePicker: (attribute, label, required = false, html_attributes = '', helperText = '') ->
@add(attribute, label, required, 'dateTimePicker')
helperText = if(helperText) then " <i class='fa fa-question-circle' data-helper-text='custom' alt='#{helperText}'></i>" else ''
required = if(required == true) then 'required' else ''
if @get("object").get(attribute)
formatted_date = (@get("object").get(attribute)).split(" ")[0]
formatted_time = (@get("object").get(attribute)).split(" ")[1]
else
formatted_time = ''
formatted_date = ''
return '<label class="' + required + '">' + label + ' ' + helperText + ':</label>
<input class="date-time-inputs" type="date" value="' + formatted_date + '" id="' + attribute + '-date" placeholder="yyyy-mm-dd" />
<input class="date-time-inputs" type="time" value="' + formatted_time + '" id="' + attribute + '-time" step="900" placeholder="hh:mm:ss" />'
add: (attribute, label, required, type) ->
@formElements[attribute] = {label: label, required: required, type: type}
getFormValues: ->
formValues = {}
_.each @formElements, (values, attribute) ->
if values.type == 'dateTimePicker'
if ($('#' + attribute + '-date').val() != "" && $('#' + attribute + '-time').val() != "")
formValues[attribute] = $('#' + attribute + '-date').val() + 'T' + $('#' + attribute + '-time').val()
else
formValues[attribute] = null
else
formValues[attribute] = $('#' + attribute ).val()
if formValues[attribute] == ''
formValues[attribute] = null
if values.type == 'checkbox' || values.type == 'checkbutton'
formValues[attribute] = $('#' + attribute + '').prop('checked')
if values.type == "tags"
formValues[attribute] = {}
formValues[attribute]["add"] = []
formValues[attribute]["delete"] = []
_.each values.tags, (tag) ->
if tag.post_tag_id == null && $('#tag_' + tag.id).prop('checked')
formValues[attribute]["add"].push tag.id
if tag.post_tag_id != null && !$('#tag_' + tag.id).prop('checked')
formValues[attribute]["delete"].push tag.post_tag_id
if tag.event_tag_id == null && $('#tag_' + tag.id).prop('checked')
formValues[attribute]["add"].push tag.id
if tag.event_tag_id != null && !$('#tag_' + tag.id).prop('checked')
formValues[attribute]["delete"].push tag.event_tag_id
if values.type == "user_roles"
formValues[attribute] = []
_.each values.userRoles, (userRole) ->
if userRole.user_role_id == null && $('#user_role_' + userRole.id).prop('checked')
formValues[attribute].push userRole.id
formValues
validate: ->
self = @
errors = ''
formValues = @getFormValues()
_.each formValues, (value, attribute) ->
if self.formElements[attribute].required && (!value || value.replace(/<(?:.|\n)*?>/gm, '').replace(/\r?\n|\r/g, '') == "") && $("[id^=#{attribute}]").is(":visible")
errors += self.formElements[attribute].label + ' cannot be blank<br />'
return
if self.formElements[attribute].type == 'email' && !App.validEmail(value)
errors += self.formElements[attribute].label + ' has invalid email address<br />'
if self.formElements[attribute].type == 'url' && !App.validUrl(value)
errors += self.formElements[attribute].label + ' has invalid URL.<br />'
# value.replaces below are to strip html and newlines from redactor text. Fixes `<p><br></p>` and `<p><br></p>\n` problems.
if self.formElements[attribute].type == 'colorPicker' && (value == null || !value.match(/^#([A-Fa-f0-9]{6})$/))
errors += self.formElements[attribute].label + " has an invalid hex value. Example: <strong>#00a3e4</strong><br />"
if errors != ''
App.displayFlashMessage errors, 'errors'
return false
true
nullToBlank: ->
self = @
_.each @options.object.attributes, (attribute, name) ->
if attribute == null
self.options.object.set(name, '')
apiError: (errors) ->
self = @
error_messages = ''
_.each errors.errors, (error, name) ->
if self.formElements[name]
error_messages += self.formElements[name].label + ': ' + error + '</br>'
else
error_messages += name + ': ' + error + '</br>'
App.displayFlashMessage error_messages, 'errors'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment