Javascript

itemBox consists of three classes:

itemBox: One object of this class is associated with each itemBox on your web-page
itemHolder: There is only object of this class. The object holds a list of itemBox-objects and give you access to the boxes and some functionality. itemHolder manage setting up the itemboxes, dragging and save/restore
popManager: There is only object of this class. The object manage itemBoxes when used as popups

itemHolder

The itemHolder holds a list of all itemBoxes: boxes. You can access this list as itemHolder.boxes,
var theBox=itemHolder.boxes[ix];

API

initElements(): Run once, when the page has loaded. Identifies all itemBoxes and set up the structure, with wrapper, header and content. It also makes a list of objects of type itemBox for each box.
removeAndRebuild(boxId): Remove a box from the list, resets the actual element and reruns initElements().
getBoxById(boxId): Returns a boxItem object that represents the box with the parameter, or null
getBoxByElement(elt): Returns a boxItem object that represents the parameter, or null. The parameter is assumed to be the wrapper-element
getBoxIxById(boxId): Returns a boxItems position in boxes, or -1 if not found
getPosition(elt): Returns the position of any element. Returns an object:{left:leftvalue,top:topvalue}. the values are pixelvalues (without "px")
setPosition(elt,L,T): Sets the left and top style-values of any element. L and T are pixelvalues (without "px") Has no effect if the element is not positioned as absolute or fixed

itemBox

You can allways get access to an itemBox object by asking the itemHolder:

var myBox=itemHolder.getBoxById("myBoxId");

Or if you are working with the wrapper element:

var wrapper=document.getElementById(myBoxId+"wrapper");
var myBox=itemHolder.getBoxByElement(wrapper);

Once you have access to the itemBox associated with your web element you have access to the following functions:

getId(): Returns the id of the box. The same id as you have given it
getIndex(): Returns the index of this box in the list of boxes hold by the itemHolder
getTitle(): Return the title of the box as text
setTitle(t): Sets the title to text parameter t
getKill(t): Returns true if you have spesified kill in the itembox's classlist.
hasHeader(): Returns false if you have spesified no-header in the itembox's classlist.
getContentHTML(): Return the content of the content element as text. This is a straight wrapping if the innerHTML-functionality
setContentHTML(t): Changes the content to t.
getContentElement(): Returns the content element, not a clone
setContentElement(elt): Sets the content element to a clone of parameter elt
getWrapperElement(): Retuns a reference to the wrapper
getCurrentPos(): Returns the left and top values for the wrapper, as an object: {left:lvalue,top:tvalue}. Value is pixels, but no 'px'-suffix
setCurrentPos(left,top): Changes the left and top in wrappers style-attribute. Parameters are pixels, but without 'px'-suffix. Removes bottom and right
getZIndex(): return the z-index of the box
setZIndex(): Sets the z-index of the box. Probably you will usually prefer moveToFront, see below
showBox(): Calling this will show the box
hideBox(): Calling this will hide the box completely
showContent(): Show the content-element
hideContent(): Hide the content-element
showHeader(): Show the header-element if you have not specified no-header in the itemBox classlist.
hideHeader(): Hide the header-element
showToggler(): Show the toggler-element
hideToggler(): Hide the toggler-element
toggleOn(): Set the toggler-element to status on
toggleOff(): Set the toggler-element to status off
turnOffDrag(): Disable dragging
turnOnDrag(): Enable dragging
setDragByContent(t): Remove header and make content draggable. The parameter is interpreted as a commaseparated list of nodenames (element.nodeName) that should not initiate a drag. If not set, "button" is assumed as default since pressing a button should trigger an other action than drag.
moveToFront(): Move this box to front. This is automatically done by when dragging. But you can at any time force any box to be on top
onStartDrag(): This function is called whenever you start dragging a box.
onEndDrag(): This function is called whenever you stop dragging a box.
hasMoved(): This function is called whenever you stop dragging a box, before onEndDrag()
onShowContent(): This function is called whenever the box toggles to show its content.
onHideContent(): This function is called whenever the box toggles to hide its content.
onSave(): This function is called when the page closes. You can use it to store content in localStorage, see example below. If you want to use localStorage to store the boxes position and state, you only have to specifiy rememeber in the itemBox classlist.

popManager

The popManager-object holds functionality to open and close boxes that are defined as popup items

API

setDelay(t): Sets the delay in milliseconds from the cursor enters an element until popManager shows the linked popup box.

Sample code

Changing the content on toggle on

// content is changed when we expand the box
function changeContent(id){
  var theBox=itemHolder.getBoxById(id);		
  theBox.onShowContent=function (){
    theBox.setContentHTML("Expanded at :"+new Date().getTime());
  }		
}
// content is changed when we collapse the box
function changeContent(id){
  var theBox=itemHolder.getBoxById(id);		
  theBox.onHideContent=function (){
    theBox.setContentHTML("This is never visible if you also use the function above");
  }		
}

Moving a box

// setting left and top to absolute values
function moveBox(id,L,T){
  var theBox=itemHolder.getBoxById(id);
  theBox.moveToFront();                   
  theBox.setCurrentPos(L,T);              
}
 
// changing left and top 
function offsetBox(id,dL,dT){
	var theBox=itemHolder.getBoxById(id);
	theBox.moveToFront();
	var p=theBox.getCurrentPos();	
	theBox.setCurrentPos(p.left+dL,p.top+dT);		
}

Save a box's content

// called after all boxes have been established
// ie. after: itemHolder.initElements();
function rememberBoxContent(boxid){
  var box=itemHolder.getBoxById(boxid);		
	
  var saveMyStuff=function(){
    var S=this.getContentHTML();
    var key=boxid+"inner";
    obj={data:S};
    var jsString=JSON.stringify(obj);
    localStorage.setItem(key,jsString);
  }
  box.onSave=saveMyStuff.bind(box);
  var key=boxid+"inner";
  var S=localStorage.getItem(key);
  var obj=JSON.parse(S);
  if(obj)
    box.setContentHTML(obj.data);
}

Javascript

itemHolder

API

itemBox

Getters and setters

show/hide

Immediate actions

Event respons

popManager

API

Sample code