This is the utility part of the PAX library, it has handy methods to do various tasks
Mikkel Bergmann, http://www.pointful.com
| pax.util | This is the utility part of the PAX library, it has handy methods to do various tasks |
| Properties | |
| pax. | Global Gnerated element unique id |
| Functions | |
| pax. | Private method, detects browser string, you should detect browser capability instead, handy in some instances. |
| pax. | Returns a new object with the attribues of the given object, optionally removing duplicates |
| pax. | Returns an object with the attribues of both obj1 and obj2. |
| pax. | Returns the type of object that matches the element passed in. |
| pax. | Returns a string representation of the object passed in. |
| pax. | Returns a pretty printed string representation of the object passed in. |
| pax. | Returns the key, if it finds a key from a dict or array |
| pax. | Returns the value, if it finds a value in an object or dictionary |
| pax. | Returns the index, if it finds a value in an array |
| pax. | Returns the target of an event |
| pax. | Locates position and dimensions of an object |
| pax. | Sets position and dimensions of an object |
| pax. | Returns a dictionary with width, height of the window. |
| pax. | Return all elements by a given tag name and class name. |
| pax. | Adds a class name to an element |
| pax. | Checks for a class name in an element |
| pax. | Removes a class name from an element |
| pax. | Removes one class name, and adds another, to an element |
| pax. | Returns a given property from an element. |
pax.util.getAgent = function()
Private method, detects browser string, you should detect browser capability instead, handy in some instances. This is run on startup by default
none
<div>Is IE: [:= pax.isIe :]</div> <div>Is Safari: [:= pax.isSafari :]</div> <div>Is Gecko: [:= pax.isGecko :]</div>
Will show the detected status of each browser type, we don’t call the detection method, as it is automatically run when this library is loaded.
This is automatically run when this library is loaded.
pax.util.copyObj = function( obj, allowDupes )
Returns a new object with the attribues of the given object, optionally removing duplicates
| obj | The object to copy |
| allowDupes | Optionally remove duplicate items |
<div id='pax.util.copyObj.example1'></div>
[:.
var basket1 = [ 'apple', 'banana', 'pear' ];
var basket2 = pax.util.copyObj( basket1 );
basket2[basket2.length] = 'lime';
$('pax.util.copyObj.example1').innerHTML = 'basket1: ' + pax.util.toString( basket1 ) + '<hr>basket2: ' + pax.util.toString( basket2 );
:]This will copy basket1 into basket2, and then add a lime to basket2
<div id='pax.util.copyObj.example2'></div>
[:.
var basket1 = [ 'apple', 'banana', 'pear', { chocolate: 'dark Belgian', strawberries: 'Queensland' } ];
var basket2 = pax.util.copyObj( basket1 );
var wineCooler = { ice: 'cold', bottles: ['Yalumba chardonnay', 'Penfolds five'], corkscrew: { automatic: 'powercorker2000', manual: 'waiters friend' } };
basket2[basket2.length] = wineCooler;
$('pax.util.copyObj.example2').innerHTML = 'basket1: ' + pax.util.toString( basket1 ) + '<hr>basket2: ' + pax.util.toString( basket2 );
:]This will copy basket1 into basket2, and then add a complex wineCooler object to basket2
<div id='pax.util.copyObj.example3'></div>
[:.
var basket1 = [ 'apple', 'banana', 'pear', { chocolate: 'dark Belgian', strawberries: 'Queensland' } ];
var basket2 = pax.util.copyObj( basket1 );
var wineCooler = { basketOne: basket1, ice: 'cold', bottles: ['Yalumba chardonnay', 'Penfolds five'], corkscrew: { automatic: 'powercorker2000', manual: 'waiters friend' } };
basket2[basket2.length] = wineCooler;
$('pax.util.copyObj.example3').innerHTML = 'basket1: ' + pax.util.toString( basket1 ) + '<hr>basket2: ' + pax.util.toString( basket2 );
:]This will copy basket1 into basket2, and then add a complex wineCooler object to basket2, which already contains basket1, thus creating a circular reference
Returns an object with the attribues of both obj1 and obj2. Assumes return object type is to be the same as obj1
| obj1 | The first object to join |
| obj2 | The second object to join |
<div id='pax.util.joinObj.example1'></div>
[:.
var basket1 = [ 'apple', 'banana', 'pear' ];
var basket2 = [ 'orange', 'lemon', 'lime' ];
var fruitBasket = pax.util.joinObj( basket1, basket2 );
$('pax.util.joinObj.example1').innerHTML = pax.util.toString( fruitBasket );
:]This will assign [ ‘apple’, ‘banana’, ‘pear’, ‘orange’, ‘lemon’, ‘lime’ ] to fruitBasket;
TODO: This example crashes in IE
<div id='pax.util.joinObj.example2'></div>
[:.
var checkBoxMap = {
'pax.cache.template.js': [ 'pax.js', 'pax.cache.js', 'pax.template.js' ],
'pax.template.js': [ 'pax.js', 'pax.cache.js', 'pax.cache.template.js', 'pax.template.modifier.js' ],
'pax.template.modifier.js': [ 'pax.template.js' ],
'pax.widget.js': [ 'pax.js' ],
'pax.validate.js': [ 'pax.js', 'pax.util.js' ],
'pax.fx.js': [ 'pax.js', 'pax.util.js' ]
};
for( var c in checkBoxMap ) {
var newDeps = [];
for( var dep in checkBoxMap[c] ) {
if( pax.util.hasKey( checkBoxMap[c][dep], checkBoxMap ) ) {
newDeps = pax.util.joinObj( checkBoxMap[c], checkBoxMap[checkBoxMap[c][dep]], false );
} else {
newDeps[newDeps.length] = checkBoxMap[c][dep];
}
}
if( newDeps != [] )checkBoxMap[c] = newDeps;
}
$('pax.util.joinObj.example2').innerHTML = pax.util.toString( checkBoxMap ).split(',').join(',<b'+'r>');
:]
pax.util.getType = function( obj )
Returns the type of object that matches the element passed in.
| obj | the object to inspect. |
| ’element’ | if obj is a DOM element node |
| ’textnode’ | if obj is a DOM text node |
| ’whitespace’ | if obj is a DOM whitespace node |
| ’array’ | if obj is an array |
| ’object’ | if obj is an object |
| ’string’ | if obj is a string |
| ’number’ | if obj is a number |
| ’boolean’ | if obj is a boolean |
| ’function’ | if obj is a function |
| false | (boolean) if the object is not defined or none of the above. |
<div id='pax.util.getType.example1'></div>
[:.
var o = $('pax.util.getType.example1');
o.innerHTML += "DOM element node: " + pax.util.getType( $('pax.util.getType.example1') ) + '<'+'br>';
o.innerHTML += "Array: " + pax.util.getType( [] ) + '<'+'br>';
o.innerHTML += "Object: " + pax.util.getType( {} ) + '<'+'br>';
o.innerHTML += "String: " + pax.util.getType( '' ) + '<'+'br>';
o.innerHTML += "Number: " + pax.util.getType( 1 ) + '<'+'br>';
o.innerHTML += "Boolean: " + pax.util.getType( true ) + '<'+'br>';
o.innerHTML += "Function: " + pax.util.getType( function(){} ) + '<'+'br>';
o.innerHTML += "Not defined(false): " + pax.util.getType( ) + '<'+'br>';
:]
'textnode' - if obj is a DOM text node
'whitespace' - if obj is a DOM whitespace nodeThis will Show the different type strings that getType can return.
pax.util.toString = function( obj, prev )
Returns a string representation of the object passed in.
Do NOT pass in objects that are self referencing
| obj | the object to inspect. |
<div id="pax.util.toString.example1"></div>
[:.
var config = {
url: '/pax/myEditController.php',
offset: 4,
columns: [
'notes',
{
offset: 3,
foo: function( text ) { alert( text ) }
}
],
test: function(a,b){return a > b;}
};
config.self = config;
config.columns[1]['me'] = config;
$( 'pax.util.toString.example1' ).innerHTML = pax.util.toString( config );
:]This will show an example with two circular references.
<div id="pax.util.toString.example2"></div>
[:.
$( 'pax.util.toString.example2' ).innerHTML = pax.util.toString( pax.util.toString );
:]This will show the pax.util.toString function ;o)
Note that this was inspired by mootools
pax.util.pprint = function( obj, prev, indent )
Returns a pretty printed string representation of the object passed in.
Do NOT pass in objects that are self referencing
| obj | the object to inspect. |
<div id="pax.util.pprint.example1"></div>
[:.
var config = {
url: '/pax/myEditController.php',
offset: 4,
columns: [
'notes',
{
offset: 3,
foo: function( text ) { alert( text ) }
}
],
test: function(a,b){return a > b;}
};
config.self = config;
config.columns[1]['me'] = config;
$( 'pax.util.pprint.example1' ).innerHTML = '<pre>' + pax.util.pprint( config ) + '</pre>';
:]This will show an example with two circular references.
<div id="pax.util.pprint.example2"></div>
[:.
$( 'pax.util.pprint.example2' ).innerHTML = '<pre>' + pax.util.pprint( pax.util.pprint ) + '</pre>';
:]This will show the pax.util.pprint function ;o)
TODO: This is very similar to the toString function, except for the indent; we should combine these...
pax.util.hasKey = function( key, obj )
Returns the key, if it finds a key from a dict or array
| key | The key to look for |
| obj | The dictionary or array to look in |
<div id="pax.util.hasKey.example1"></div>
[:.
var fruitBasket = { orange: 3, lemon: 2, lime: 0 };
$('pax.util.hasKey.example1').innerHTML = "Is there a key of 'line' in the fruit basket?: " + pax.util.hasKey( 'lime', fruitBasket );
:]This will show true
<div id="pax.util.hasKey.example2"></div>
[:.
var fruitBasket = { orange: 3, lemon: 2, lime: 0 };
$('pax.util.hasKey.example2').innerHTML = "Is there a 'kiwi' in the fruit basket?: " + pax.util.hasKey( 'kiwi', fruitBasket );
:]This will show false
pax.util.hasValue = function( value, dict )
Returns the value, if it finds a value in an object or dictionary
| key | The key to look for |
| dict | The object or dictionary to look in |
<div id="pax.util.hasValue.example1"></div>
[:.
var fruitBasket = { orange: 3, lemon: 2, lime: 0 };
$('pax.util.hasValue.example1').innerHTML = "Does the fruit basket have a value of 2?: " + pax.util.hasValue( 2, fruitBasket );
:]This will show true
<div id="pax.util.hasValue.example2"></div>
[:.
var fruitBasket = { orange: 3, lemon: 2, lime: 0 };
$('pax.util.hasValue.example2').innerHTML = "Does the fruit basket have a value of 7?: " + pax.util.hasValue( 7, fruitBasket );
:]This will show false
pax.util.arrayHasValue = function( value, arr )
Returns the index, if it finds a value in an array
| key | The key to look for |
| arr | The array to look in |
<div id="pax.util.arrayHasValue.example1"></div>
[:.
var fruitBasket = [ 'orange', 'lemon', 'lime' ];
$('pax.util.arrayHasValue.example1').innerHTML = "Is there a 'lemon' in the fruit basket?: " + pax.util.arrayHasValue( 'lemon', fruitBasket );
:]This will show true
<div id="pax.util.arrayHasValue.example2"></div>
[:.
var fruitBasket = [ 'orange', 'lemon', 'lime' ];
$('pax.util.arrayHasValue.example2').innerHTML = "Is there a 'passionfruit' in the fruit basket?: " + pax.util.arrayHasValue( 'passionfruit', fruitBasket );
:]This will show false
pax.util.getPosition = function( element, excludeParent )
Locates position and dimensions of an object
| element | The DOM element to find the position / dimensions of |
| excludeParent | Don’t take the parent offset into account, to be used if adding an element absolutely positioned inside the same parent element |
A dictionary with x, y, width, height of element. Does not work for the window.
Excluding parent node offsets (as we're positioning a box inside the same parent) - red box should appear at SW corner
<div id="pax.util.getPosition.example1.divA" style="border: solid 1px #c0c0c0; position: absolute; top: 50px; left: 40px;">Pos - </div>
<div id="pax.util.getPosition.example1.divB" style='background:red;position:absolute;width:10px; height:10px;'></div>
[:.
var myDiv = $('pax.util.getPosition.example1.divA');
var pos = pax.util.getPosition( myDiv, false );
myDiv.innerHTML += 'x: ' + pos.x + ' y: ' + pos.y + ' width: ' + pos.width + ' height: ' + pos.height;
var pos = pax.util.getPosition( myDiv, false );
var myArrow = $('pax.util.getPosition.example1.divB');
pax.util.setPosition( myArrow, { x: pos.x + pos.width, y: pos.y + pos.height } );
:]pos will be an object that contains {x: int, y: int, width: int, height: int}
Including parent nodes (notice the large y value)
<div style="border: solid 1px #c0c0c0" id="pax.util.getPosition.example2">Pos - </div>
[:.
var myDiv = $('pax.util.getPosition.example2');
var pos = pax.util.getPosition( myDiv );
myDiv.innerHTML += 'x: ' + pos.x + ' y: ' + pos.y + ' width: ' + pos.width + ' height: ' + pos.height;
:]pos will be an object that contains {x: int, y: int, width: int, height: int}
<span style="border: solid 1px #c0c0c0" id="pax.util.getPosition.example3">Pos - </span>
[:.
var mySpan = $('pax.util.getPosition.example3');
var pos = pax.util.getPosition( mySpan );
mySpan.innerHTML += 'x: ' + pos.x + ' y: ' + pos.y + ' width: ' + pos.width + ' height: ' + pos.height;
:]pos will be an object that contains {x: int, y: int, width: int, height: int}
<span style="border: solid 1px #c0c0c0; position: absolute; top: 50px; left: 40px;" id="pax.util.getPosition.example4">Pos - </span>
[:.
var mySpan = $('pax.util.getPosition.example4');
var pos = pax.util.getPosition( mySpan );
mySpan.innerHTML += 'x: ' + pos.x + ' y: ' + pos.y + ' width: ' + pos.width + ' height: ' + pos.height;
:]pos will be an object that contains {x: int, y: int, width: int, height: int}
<span style="border: solid 1px #c0c0c0; position: absolute; top: 50px; left: 40px;" id="pax.util.getPosition.example5">Pos - </span>
[:.
var newSpan = document.createElement( 'SPAN' );
newSpan.innerHTML = 'Span';
newSpan.id = 'pax.util.getPosition.example5.span';
newSpan.style.position = 'absolute';
newSpan.style.left = '100px';
newSpan.style.top = '200px';
document.body.appendChild( newSpan );
var mySpan = $('pax.util.getPosition.example5');
var myNewSpan = $('pax.util.getPosition.example5.span');
var pos = pax.util.getPosition( myNewSpan );
mySpan.innerHTML += 'x: ' + pos.x + ' y: ' + pos.y + ' width: ' + pos.width + ' height: ' + pos.height;
document.body.removeChild( newSpan );
:]pos will be an object that contains {x: int, y: int, width: int, height: int}, of the dynamically created newSpan element
pax.util.setPosition = function( element, pos )
Sets position and dimensions of an object
| element | The DOM element to set the position / dimensions of |
| pos | Object as returned from pax.util.getPosition |
<div id='pax.util.getPosition.example1.divA' style="border: solid 1px #c0c0c0; background: blue; position: absolute; top: 80px; left: 40px;">Click me to cover me with the red div!</div>
<div id='pax.util.getPosition.example1.divB' style='background:red;position:absolute; left: 10px; top: 40px;'>I'm the red div!</div>
[:.
pax.event.bind( $('pax.util.getPosition.example1.divA'), 'click', function() {
var pos = pax.util.getPosition( $('pax.util.getPosition.example1.divA'), false );
pax.util.setPosition( $('pax.util.getPosition.example1.divB'), pos );
} );
:]
pax.util.getWindowDimensions = function( tWindow )
Returns a dictionary with width, height of the window.
none
A dictionary with width, height of the window.
<div id="pax.util.getWindowDimensions.example1"></div>
[:.
var myDiv = $('pax.util.getWindowDimensions.example1');
var winSize = pax.util.getWindowDimensions();
myDiv.innerHTML += 'width: ' + winSize.width + ' height: ' + winSize.height + ' scrollLeft: ' + winSize.scrollLeft + ' scrollTop: ' + winSize.scrollTop;
:]winSize will be an object that contains { width: int, height: int, scrollLeft: int, scrollTop: int };
pax.util.getElementsByClassName = function( element, elementType, className )
Return all elements by a given tag name and class name.
| element | The DOM element to search |
| elementType | Type of element to look for, you can use “*” to return all element types |
| className | The class name of the elements to return |
An array with the required DOM elements
<div id='pax.getElementsByClassName.example1'></div>
[:.
var myElement = pax.util.getElementsByClassName( document, 'div', 'CFunction' );
$('pax.getElementsByClassName.example1').innerHTML = 'There are ' + myElement.length + ' divs with CFunction as class name.';
:]myElement will now be an array with all div elements with a class name of ‘CFunction’ from the document
pax.util.addClassName = function( element, className )
Adds a class name to an element
| element | The DOM element to add a class name to |
| className | The class name you want to add |
<div id="pax.util.addClassName.example1"></div>
[:.
var newSpan = document.createElement( 'SPAN' );
newSpan.innerHTML = 'Span';
newSpan.id = 'pax.util.addClassName.example1.span';
newSpan.style.position = 'absolute';
newSpan.style.left = '100px';
newSpan.style.top = '200px';
document.body.appendChild( newSpan );
var myNewSpan = $('pax.util.addClassName.example1.span');
pax.util.addClassName( myNewSpan, 'classOne' );
pax.util.addClassName( myNewSpan, 'classTwo' );
$('pax.util.addClassName.example1').innerHTML += 'Class names: [' + myNewSpan.className + ']';
document.body.removeChild( newSpan );
:]This will add the class names ‘classOne’ and ‘classTwo’ to the newSpan element
pax.util.hasClassName = function( element, className )
Checks for a class name in an element
| element | The DOM element to check |
| className | The class name you want to check for |
<div id="pax.util.hasClassName.example1" class="classOne classTwo classThree"></div>
[:.
$('pax.util.hasClassName.example1').innerHTML = 'hasClassName (classOne): [' + pax.util.hasClassName( $('pax.util.hasClassName.example1'), 'classOne' ) + ']';
$('pax.util.hasClassName.example1').innerHTML += ' hasClassName (classFour): [' + pax.util.hasClassName( $('pax.util.hasClassName.example1'), 'classFour' ) + ']';
:]This will add the class name ‘classOne’ to the newSpan element, then remove it.
pax.util.removeClassName = function( element, className )
Removes a class name from an element
| element | The DOM element to remove a class name from |
| className | The class name you want to remove |
<div id="pax.util.removeClassName.example1"></div>
[:.
var newSpan = document.createElement( 'SPAN' );
newSpan.innerHTML = 'Span';
newSpan.id = 'pax.util.removeClassName.example1.span';
newSpan.style.position = 'absolute';
newSpan.style.left = '100px';
newSpan.style.top = '200px';
document.body.appendChild( newSpan );
var myNewSpan = $('pax.util.removeClassName.example1.span');
pax.util.addClassName( myNewSpan, 'classOne' );
$('pax.util.removeClassName.example1').innerHTML += 'Before removeClassName: [' + myNewSpan.className + '], ';
pax.util.removeClassName( myNewSpan, 'classOne' );
$('pax.util.removeClassName.example1').innerHTML += 'After removeClassName: [' + myNewSpan.className + ']';
document.body.removeChild( newSpan );
:]This will add the class name ‘classOne’ to the newSpan element, then remove it.
pax.util.swapClassName = function( element, className1, className2 )
Removes one class name, and adds another, to an element
| element | The DOM element to swap a class names on |
| className1 | The class name you want to remove, this can be a list of class names |
| className2 | The class name you want to add, this can be a list of class names |
<div id="pax.util.swapClassName.example1"></div>
[:.
var myDiv = $('pax.util.swapClassName.example1');
pax.util.addClassName( myDiv, 'classOne' );
myDiv.innerHTML += 'Before swapClassName: [' + myDiv.className + '], ';
pax.util.swapClassName( myDiv, 'classOne', 'classTwo' );
myDiv.innerHTML += 'After swapClassName: [' + myDiv.className + ']';
:]This will add the class name ‘classOne’ to the newSpan element, then swap it with ‘classTwo’.
<div id="pax.util.swapClassName.example2"></div>
[:.
var myDiv = $('pax.util.swapClassName.example2');
pax.util.addClassName( myDiv, 'classOne' );
pax.util.addClassName( myDiv, 'classTwo' );
myDiv.innerHTML += 'Before swapClassName: [' + myDiv.className + '], ';
pax.util.swapClassName( myDiv, ['classOne', 'classTwo'], ['classThree', 'classFour'] );
myDiv.innerHTML += 'After swapClassName: [' + myDiv.className + ']';
:]This will add the class names ‘classOne’ and ‘classTwo’ to the element, then swap it with ‘classThree’ and ‘classFour’.
pax.util.getStyle = function( element, property )
Returns a given property from an element. A property is computed if it is not explicitly set, and may differ from browser to browser.
WIP: Make this more consistent for every browser.
| element | The DOM element to get the style from |
| property | The style property you want to get |
<div id="pax.util.getStyle.example1"></div>
[:.
var fontSize = pax.util.getStyle( $('pax.util.getStyle.example1'), 'font-size' );
$('pax.util.getStyle.example1').innerHTML += 'Font size: ' + fontSize;
var myColour = pax.util.getStyle( $('pax.util.getStyle.example1'), 'color' );
$('pax.util.getStyle.example1').innerHTML += ' Colour: ' + myColour;
:]This will display the font size, and color CSS properties of the given element
Private method, detects browser string, you should detect browser capability instead, handy in some instances.
pax.util.getAgent = function()
Returns a new object with the attribues of the given object, optionally removing duplicates
pax.util.copyObj = function( obj, allowDupes )
Returns the type of object that matches the element passed in.
pax.util.getType = function( obj )
Returns a string representation of the object passed in.
pax.util.toString = function( obj, prev )
Returns a pretty printed string representation of the object passed in.
pax.util.pprint = function( obj, prev, indent )
Returns the key, if it finds a key from a dict or array
pax.util.hasKey = function( key, obj )
Returns the value, if it finds a value in an object or dictionary
pax.util.hasValue = function( value, dict )
Returns the index, if it finds a value in an array
pax.util.arrayHasValue = function( value, arr )
Returns the target of an event
pax.util.getTarget = function( e )
Locates position and dimensions of an object
pax.util.getPosition = function( element, excludeParent )
Sets position and dimensions of an object
pax.util.setPosition = function( element, pos )
Returns a dictionary with width, height of the window.
pax.util.getWindowDimensions = function( tWindow )
Return all elements by a given tag name and class name.
pax.util.getElementsByClassName = function( element, elementType, className )
Adds a class name to an element
pax.util.addClassName = function( element, className )
Checks for a class name in an element
pax.util.hasClassName = function( element, className )
Removes a class name from an element
pax.util.removeClassName = function( element, className )
Removes one class name, and adds another, to an element
pax.util.swapClassName = function( element, className1, className2 )
Returns a given property from an element.
pax.util.getStyle = function( element, property )