-
-
Save paceaux/e6664d31263341d1d531 to your computer and use it in GitHub Desktop.
This makes a safe Form Object with information about all of the forms in a web page. Protects the JS from the Data
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//wrap it all in an anonymous function | |
//This keeps our code safe from other JavaScript,and we don't polute the global namespace | |
(function() { | |
//create the encapsulating variable | |
var taForm; | |
//add a namespacing function so that we can inject modules to it | |
taForm = { | |
namespace: function(ns_string) { | |
var parts = ns_string.split('.'), | |
parent = taForm, | |
i; | |
if (parts[0] === "taForm") { | |
parts = parts.slice(1); | |
} | |
for (i = 0; i < parts.length; i += 1) { | |
// create a property if it doesn't exist | |
if (typeof parent[parts[i]] === 'undefined') { | |
parent[parts[i]] = {}; | |
} | |
parent = parent[parts[i]]; | |
} | |
return parent; | |
} | |
}; | |
//add modules to the form, they're variables because we may want to access them later | |
var bindUIEvents = taForm.namespace('bindUIEvents'), | |
data = taForm.namespace('data'), | |
classes = taForm.namespace('classes'), | |
functions = taForm.namespace('functions'); | |
//Add data | |
taForm.data = { | |
formNameSpaces: { | |
form: 'taForm', | |
fieldset: '.taForm__fieldset', | |
legend: '.fieldset__legend', | |
field: '.field', | |
label: '.field__label', | |
validation: '', | |
toggleTo: '', | |
toggleFrom: '' | |
}, | |
global: 'TransamericaForms', | |
forms: [] | |
}; | |
//Create some classes. these will become objects. | |
//This creates a form data api | |
classes.formObject = function(form, i) { | |
this.indx = i; | |
this.node = form; | |
this.dataObject = {}; | |
this.setName = function(string) { | |
form.name = string; | |
}; | |
this.getName = function() { | |
if (this.node.name) { | |
return this.node.name; | |
} else { | |
this.setName('taForm-n-' + this.indx); | |
return 'taForm-n-' + this.indx; | |
} | |
}; | |
this.setID = function(string) { | |
form.id = string; | |
}; | |
this.getID = function() { | |
if (this.node.id) { | |
return this.node.id; | |
} else { | |
this.setID('taForm-id-' + this.indx); | |
return 'taForm-id-' + this.indx; | |
} | |
}; | |
this.getFieldsets = function(form) { | |
var formNameSpaces = taForm.data.formNameSpaces, | |
fieldsetNS = formNameSpaces.fieldset, | |
formFieldsets = form.querySelectorAll(fieldsetNS), | |
fieldsets = new taForm.classes.fieldsetsObject(); | |
[].forEach.call(formFieldsets, function(el, i) { | |
fieldsets[i] = new classes.fieldsetObject(el); | |
}); | |
return fieldsets; | |
}; | |
this.Action = function() { | |
return form.action; | |
}; | |
this.action = this.Action(); | |
this.name = this.getName(); | |
this.id = this.getID(); | |
this.fieldsets = this.getFieldsets(form); | |
this.dataObject = { | |
id: this.getID(), | |
name: this.getName(), | |
fieldsets: this.fieldsets | |
}; | |
return this.dataObject; | |
}; | |
classes.fieldsetsObject = function() { | |
return this; | |
}; | |
classes.fieldsetObject = function(fieldsetNode) { | |
var formNameSpaces = taForm.data.formNameSpaces, | |
fields = new taForm.classes.fields(), | |
legendNS = formNameSpaces.legend; | |
this.label = fieldsetNode.querySelector(legendNS) !== null ? fieldsetNode.querySelector(legendNS).innerText || fieldsetNode.querySelector(legendNS).text : ''; | |
this.className = fieldsetNode.className; | |
[].forEach.call(fieldsetNode.querySelectorAll(formNameSpaces.field), function(el, i) { | |
fields[i] = new classes.fieldObject(el); | |
}); | |
this.fields = fields; | |
return this; | |
}; | |
classes.fields = function() { | |
return this; | |
}; | |
classes.fieldObject = function(fieldNode) { | |
this.label = ''; | |
var formNameSpaces = taForm.data.formNameSpaces, | |
fieldLabelNS = formNameSpaces.label; | |
//a field could have a label, if there's more than one,we have radio buttons, or zero, a button | |
switch (true) { | |
case (fieldNode.querySelectorAll(fieldLabelNS).length > 1): | |
this.label = "a lot of labels"; | |
break; | |
case (fieldNode.querySelectorAll(fieldLabelNS).length === 1): | |
this.label = fieldNode.querySelector(fieldLabelNS).innerText; | |
break; | |
case (fieldNode.querySelectorAll(fieldLabelNS).length < 1): | |
break; | |
default: | |
break; | |
} | |
this.className = fieldNode.className; | |
return this; | |
}; | |
//create some functions | |
//create the Forms | |
functions.createFormObjects = function() { | |
var forms = document.getElementsByClassName(taForm.data.formNameSpaces.form); | |
[].forEach.call(forms, function(form, i) { | |
var newForm = new taForm.classes.formObject(form, i); | |
taForm.data.forms.push(newForm); | |
}); | |
console.log(taForm.data.forms); | |
taForm.functions.addToWindow('formData', taForm.data.forms); | |
}; | |
//This determines what we're going to put on the window object (make global) | |
//This prevents someone from trying to manipulate our form functions | |
functions.addToWindow = function(prop, arg) { | |
var globalNS = taForm.data.global; | |
if (!window[globalNS]) { | |
window[globalNS] = {}; | |
} | |
if (prop && arg) { | |
window[globalNS][prop] = arg; | |
} | |
}; | |
//initialize everything | |
taForm.init = function(taForm) { | |
taForm.functions.createFormObjects(); | |
}; | |
//aaaaand ... GO! | |
taForm.init(taForm); | |
})(window, navigator, $, jQuery); | |
//here we inject window, navigator, and jQuery. WE decide what global variables can get in |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Now w/ JS Lint