rendered paste body// Simplified box model for easier layout
(function(){
var mod = gwk.newModuleClass('simpleBox');
mod.require('groundwork',0.01);
mod.version = 0.01;
mod.init = function(){
gwk.prefs.simpleBox = {};
gwk.prefs.simpleBox.targetDom = document.body;
gwk.prefs.simpleBox.units = 'em';
gwk.state.simpleBox = {};
gwk.state.simpleBox.allNodes = [];
var testDiv = document.createElement("DIV");
testDiv.id = 'gwk_simpleBox_oneEmTestDiv';
testDiv.style.position = 'absolute';
testDiv.style.left = '-1em';
testDiv.style.top = '-1em';
testDiv.style.width = '1em';
testDiv.style.height = '1em';
document.body.appendChild(testDiv);
var poller = function(){
gwk.prefs.simpleBox.oneem = testDiv.offsetWidth;
}
poller();
window.setInterval(poller,100);
return true;
};
mod.create = function(width,height,container,id){
this.creator = this.constructor.creator;
this.prefs = this.creator.prefs.simpleBox;
this.state = this.creator.state.simpleBox;
if(!id){
if(typeof(container)=='string'){
id = container;
} else {
id = 'unnamed' + this.state.allNodes.length;
}
};
if(!container || typeof(container)=='string'){
container = this.prefs.targetDom;
} else {
if(container.nodeType){
// Stuff to do if this is an HTML element (which it must be, if it isn't a simpleBox object) - nothing right now.
} else if(container.creator.modules) {
container = container.domObj;
};
};
height = height || 1;
width = width || 1;
var domObj = document.createElement('DIV');
var styleObj = domObj.style;
domObj.id = 'gwk_simpleBox_' + id;
this.state.allNodes.push(domObj);
domObj.className = 'simpleBox';
styleObj.width = width + 'em';
styleObj.height = height + 'em';
var hrzn = document.createElement('DIV');
hrzn.style.position = 'absolute';
hrzn.style.width = '100%'
hrzn.style.height = '1px';
hrzn.style.top = '50%';
hrzn.id = domObj.id + '_horizon';
container.appendChild(hrzn);
container.appendChild(domObj);
this.container = container;
this.horizon = hrzn;
this.domObj = domObj;
this.styleObj = styleObj;
};
mod.create.prototype.append = function(obj){
if(!obj){
log("simpleBox.append - no target object.",2);
return
};
if(obj.nodeType){
this.domObj.appendChild(obj);
} else if(obj.creator.modules) {
this.domObj.appendChild(obj.domObj);
if(obj.horizon){ // Ensure the centering accessory for each simpleBox is its sibling
this.domObj.appendChild(obj.horizon);
}
obj.container = this.domObj;
};
};
mod.create.prototype.setBackgroundColor = function(r,g,b){
if(!g){ // Assume it's a legal color string
this.styleObj.backgroundColor = r;
} else { // Assume it's an RGB triplet
this.styleObj.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
};
};
mod.create.prototype.setPos = function(top,left,units){
top = top || 0;
left = left || 0;
this.styleObj.top = this.getDim(top,units);
this.styleObj.left = this.getDim(left,units);
};
mod.create.prototype.setWidth = function(width,units){
if(!width){return false};
this.styleObj.width = this.getDim(width,units);
if(this.state.hjustify=='right'){
this.domObj.style.left = 'auto';
this.domObj.style.right=this.state.hjustifyOffset;
}
if(this.state.hcentered){
this.hcenter();
};
this.state.vwidth = false;
};
mod.create.prototype.setHeight = function(height,units){
if(!height){return false};
this.styleObj.height = this.getDim(height,units);
if(this.state.vjustify=='bottom'){
this.domObj.style.top = 'auto';
this.domObj.style.bottom=this.state.vjustifyOffset;
}
if(this.state.vcentered){
this.vcenter();
}
this.state.vheight = false;
};
mod.create.prototype.setDims = function(width,height,units){
this.setWidth(width,units);
this.setHeight(height,units);
};
mod.create.prototype.fillWidth = function(preGap, postGap, units){
this.unhcenter();
preGap = preGap || 0;
postGap = postGap || 0;
this.styleObj.width = 'auto';
this.styleObj.left = this.getDim(preGap,units);
this.styleObj.right = this.getDim(postGap,units);
this.state.hjustify = 'none';
this.state.vwidth = true;
};
mod.create.prototype.fillHeight = function(preGap, postGap, units){
this.unvcenter();
preGap = preGap || 0;
postGap = postGap || 0;
this.styleObj.height = 'auto';
this.styleObj.top = this.getDim(preGap,units);
this.styleObj.bottom = this.getDim(postGap,units);
this.state.vjustify = 'none';
this.state.vheight = true;
};
mod.create.prototype.justifyTop = function(offset,units){
this.state.vjustify = 'top';
offset = this.getDim(offset,units);
var topMove = parseInt(this.styleObj.top) - parseInt(offset);
this.unvcenter();
if(this.styleObj.height == 'auto'){
this.styleObj.bottom = (parseInt(this.styleObj.bottom) + topMove) + 'em';
};
this.styleObj.top = offset;
};
mod.create.prototype.justifyBottom = function(offset,units){
this.state.vjustify = 'bottom';
offset = this.getDim(offset,units);
var bottomMove = parseInt(this.styleObj.bottom) - parseInt(offset);
var oldTop = this.styleObj.top;
this.unvcenter();
if(this.styleObj.height == 'auto'){
this.styleObj.top = (parseInt(oldTop) + bottomMove) + 'em';
};
this.styleObj.bottom = offset;
};
mod.create.prototype.justifyLeft = function(offset,units){ // Working
this.state.hjustify = 'left';
if(this.state.hcentered){
this.unhcenter();
}
offset = this.getDim(offset,units);
if(this.styleObj.right != 'auto'){ // Variable-width item, so track the right edge back with it
var leftMove = parseInt(this.styleObj.left
) - parseInt(offset);
this.styleObj.right = (parseInt(this.styleObj.right) + leftMove) + 'em';
}
this.styleObj.left = offset;
};
mod.create.prototype.justifyRight = function(offset,units){
if(this.state.hcentered){
this.unhcenter();
}
units = units || this.prefs.units;
if(offset && units == 'px'){
offset = this.px2em(offset);
units = '';
} else {
offset = offset || 0;
};
if(this.styleObj.left != 'auto'){ // Variable-width item, so track the left edge back with it
var rightMove = parseInt(this.styleObj.right
) - parseInt(offset);
this.styleObj.left = (parseInt(this.styleObj.left) + rightMove) + 'em';
if(this.state.vwidth!=true){
this.styleObj.left = 'auto';
};
};
this.state.hjustifyOffset = offset + units;
this.styleObj.right = offset + units;
this.state.hjustify = 'right';
};
mod.create.prototype.vcenter = function(){
this.state.vcentered = true;
if(this.styleObj.height != 'auto'){
if(this.styleObj.height != this.px2em(this.domObj.offsetHeight)){
var topOffset = (parseInt(this.styleObj.height)/2) + 'em';
} else {
var topOffset = this.px2em(this.domObj.offsetHeight/2)
};
this.horizon.appendChild(this.domObj);
this.domObj.style.top = '-'+topOffset;
} else {
this.styleObj.top = this.styleObj.bottom = ((parseInt(this.styleObj.top) + parseInt(this.styleObj.bottom))/2) + 'em'; };
};
mod.create.prototype.unvcenter = function(){
this.state.vcentered = false;
this.container.appendChild(this.domObj);
this.domObj.style.top = '';
};
mod.create.prototype.hcenter = function(){
this.state.hcentered = true;
if(this.styleObj.width != 'auto'){ // Fixed-width item
if(this.styleObj.width != this.px2em(this.domObj.offsetWidth)){
var marginOffset = (parseInt(this.styleObj.width)/2) + 'em';
} else {
var marginOffset = this.px2em(this.domObj.offsetWidth/2);
};
this.styleObj.left = '50%';
this.styleObj.marginLeft = '-' + marginOffset;
} else { // Variable-width item
this.styleObj.left = this.styleObj.right = ((parseInt(this.styleObj.left) + parseInt(this.styleObj.right))/2) + 'em';
};
};
mod.create.prototype.unhcenter = function(){
this.state.hcentered = false
if(this.styleObj.marginLeft!='')
{
this.styleObj.left = '';
this.styleObj.marginLeft = '';
};
};
mod.create.prototype.px2em = function(px){
return ( px / this.prefs.oneem ) + 'em';
};
mod.create.prototype.getDim = function(dim,unit){
unit = unit || this.prefs.units;
if(dim && unit == 'px'){
var dim = this.px2em(dim);
unit = '';
} else {
dim = dim || '0';
}
return dim + unit;
};
})();