So, I realized that a lot of new coders will look at this mess and think WTF is vbrtrmn thinking, this code is insane!
So, here's what I'm doing..
First the basic function creation, it requires:
p = The parent id or full object of where you want to stick the new object.
i = The new id of the object you're creating
t = element type (p,h1) - required
h = innerHTML - pass '' for nothing
a = attributes - should be passed as: attribute=value:attribute=value:attribute=value
z = styles - should be passed as: style=value:style=value:style=value
be sure to use the javascript style names, instead of the CSS ones ie: background-color == backgroundColor
debug - this turns on alerts
Code:
function objBuilder(p,i,t,h,a,z,debug) {
This turns on debugging alerts, if you mess up, it will alert you
Code:
debug = (debug==1)?1:0;
These are some function variables. I like to use these, so I don't have to type as much junk.
d is basically a "shortcut to"
document so I can call
d.getElementById.
s just means 'string' and
exit is
0.
Code:
var d = document;
var s = 'string';
var exit=0;
Here I'm checking to see if the Parent ID (
p) passed in is an object or a string (
s='string'; see above).
Now, you may be wondering where the heck the
if statement is, using
?: is a quick way of doing if statements.
This can also be written as:
Code:
if (typeof p=='string') {
p = document.getElementById(p);
} else {
p = p;
}
As you can see, this is much smaller than that mess.
Code:
p = (typeof p==s) ? d.getElementById(p) : p;
This checks to see if the new id is a string.
Also can be written as
Code:
if (typeof i!='string') {
// call eO (error out) function (see below)
eO('New id must be a string value.');
} else {
null;
}
Again this is much nicer.
Code:
(typeof i!=s)?eO('New id must be a string value.'):null;
Checks to see if the
i, aka new id exists, if so, error out.
Code:
(d.getElementById(i))?eO('An element with that id already exists.'):null;
These check to see if the rest of the data passed in are strings, otherwise they error out; again they can be written in long format too, but I'm lazy and having 30 lines of if/else is crap
Code:
(typeof t!=s)?eO('Element type must be a string value.'):null;
(typeof h!=s)?eO('innerHTML must be a string.'):null;
(typeof a!=s)?eO('Attributes must be a string.'):null;
(typeof z!=s)?eO('Styles must be a string.'):null;
Now the
eO function, below, will set exit to 0, if anything above calls
eO
Here I'm createing a new element,
t is the type, specified, when the
objBuilder function was called. I'm assigning that Element to
EL
Code:
var EL=d.createElement(t);
Here I'm appending the created Element to the parent.
Now, I'm going to assign the specified ID.
Now, I'm inputting any innerHTML.
Here's the tricky part, the attributes, I ask for the attributes to be sent in key/value pairs, seperated with colons, let's say you were doing a table:
border=1:cellpadding=0:cellspacing=0:width=100%
In this
for loop, I am splitting the attributes at the
:, this creates an array of key/value pairs... something like this:
Code:
a.split(':')[0] = 'border=1';
a.split(':')[1] = 'cellpadding=0';
a.split(':')[2] = 'cellspacing=0';
a.split(':')[3] = 'width=100%';
So, I'm getting the length, in that case it would be 4.
Code:
for(var n=0;n<a.split(':').length;n++) {
If the current key/value pair is empty, stop the
for loop.
Code:
if (a.split(':')[n]=='') break;
If this key/value pair does not have an equal sign, then...
Code:
(!a.split(':')[n].match(/=/))?
...then call the
eO function, and alert an error... else ...
Code:
eO('Error in attributes missing equal (=) sign in '+ a.split(':')[n] +'.'):
... else ... if ... the key (attribute name) is 'class'
This is a bit confusing too, I'm taking the current key/value pair, say
border=1, and splitting it again on the
=.
So,
border is essentially
a.split(':')[0].split('=')[0] and
1 is
a.split(':')[0].split('=')[1].
Code:
(a.split(':')[n].split('=')[0]=='class')?
Set the className to the value
Code:
EL.className=a.split(':')[n].split('=')[1]:
... else ... if the key is not 'class', do a setAttribute(key,value), again splitting the current key/value pair at the
=
Code:
EL.setAttribute(a.split(':')[n].split('=')[0],a.split(':')[n].split('=')[1]);
end of the attribute for loop
Now, I'm going to do basically the same thing with the style sheets..
Code:
for(var n=0;n<z.split(':').length;n++) {
Stop the
for loop if the key/value pair is empty.
Code:
if (z.split(':')[n]=='') break;
If the key/value pair is empty ... then ...
Code:
(!z.split(':')[n].match(/=/))?
... then ... error out .. else ...
Code:
eO('Error in styles missing equal (=) sign in: '+ z.split(':')[n] +'.'):
... else ... the style name is in the left side of the equal sign, the first element.
if the value is ONLY digits .. then ..
Code:
EL.style[z.split(':')[n].split('=')[0]] = (z.split(':')[n].split('=')[1].match(/^\d*$/))?
.. then .. it is most likely a number of pixels .. else ..
Code:
z.split(':')[n].split('=')[1] +'px':
.. else .. just use the value, the second element.
Code:
z.split(':')[n].split('=')[1];
End the loop here
return the object
close the function
The error function, called many times, above.
Code:
function eO(message) { exit=1; (debug==1)?alert(message):null; }
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Object Builder of Doom
Linear Mode
