Skip to content

Instantly share code, notes, and snippets.

@paceaux
Last active August 29, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paceaux/e6664d31263341d1d531 to your computer and use it in GitHub Desktop.
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
//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
@paceaux
Copy link
Author

paceaux commented Dec 12, 2014

Now w/ JS Lint

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment