vegui. std.js

function vui_module_add( type, module, filename )

Makes a vegUI module accessable by the manager.  When developing addons for vegUI make sure you initialize your module using this function instead of adding it’s type directly to the VEGUIOBJ array.

If there are colliding types an error message will be displayed and the script is halted

Added in

2.0.6

Parameters

Returns

Example

vui_module_add(VUI_NODE, VegUINode, 'vegui.std.js');

var browser_str = navigator.userAgent.toLowerCase( ); function iesucks(Node)

Internet explorer 6 leaks memory in closures, in order to fix that iesucks is called when the page is unloaded if the browser is ie6

Parameters

function Clone( Obj )

Creates a new instance of a javascript object

Parameters

Example

In this example newObj will be an exact clone of Obj

var newObj = new Clone(Obj);

function merge( srcObj, trgObj )

Attempt to append the properties of trgObj to srcObj

Parameters

Example

Any non-existing properties of Obj2 will be copied to Obj1, existing properties will be overwritten

merge(Obj1, Obj2);

function cloneArray( Arr )

clones an array

Parameters

Returns

Example

newArr will be an exact copy of oldArr

var newArrr = cloneArray(oldArr);

function has_parent( Node, Parent )

checks if Node is the child of Parent somewhere up the parent chain

Parameters

Returns

Example

var node1 = document.createElement('div');
var node2 = document.createElement('div');
var node3 = document.createElement('div');
node1.appendChild(node2);
node2.appendChild(node3);

// as node1 is the parent node of node 2, this will return true
return has_parent(node2, node1);

// returns true as well, since node1 is the parent of node2 which
// is the parent of node3
return has_parent(node3, node1);

function get_mouse( e )

get mouse pointer location, sets mouseX and mouseY

Parameters

Example

node.onmousemove = function(e) {
  get_mouse((e ? e : event));
  alert(mouseX+','+mouseY);
}

function htmlnode( nodeName, parentNode )

Wrapper for document.createElement with the option to append the created node to another html node right away

Paramters

Returns

function imgnode( src, w, h, parentNode )

Wrapper for document.createElement to create an image node with the option to define proportions and image source right away

Parameters

Returns

function txtnode( txt )

Wrapper for document.createTextNode

Parameters

Returns

function vui_rand( min, max )

generate a random number

Parameters

Returns

Example

// n may be any number between 1 and 30
var n = vui_rand(1,30);

function VegUIMouseState( eventType, Parent )

Parameters

function VegUINode( refName, Parent, Manager )

Parameters

this.abs_middle = function( stopAt )

Parameters

Returns

See also

abs_x, abs_y, x, y

this.abs_x = function( stopAt )

Parameters

Returns

See also

abs_y, abs_middle, x, y

this.abs_y = function( stopAt )

Returns

See also

abs_x, abs_middle, x, y

this.add_child = function( name, type, nodeName, pos )

Creates a VegUI element as a child of this element.  Childs can be accessed over the Child or C property of this element by their unique child name

Parameters

Returns

See also

add_skin, add_child_o

Example

var c = myNode.add_child('mychild', VUI_NODE, 'div', 'absolute');

this.add_child_o = function( name, Obj )

Adds an existing VegUI Element to this element as a child

Parameters

See also

add_child, add_skin

Example

var node1 = Manager.get_new(VUI_NODE);
var node2 = Manager.get_new(VUI_NODE);
node2.add_child_o(node1);

this.add_skin = function( n, w, h, x, y, c, rm, bm, rm_nr, bm_nr, nN, i )

Wrapper function to add a new vegui element to this element as a child with the ability to set the most common template properties

Parameters

Returns

See also

add_child, add_child_o

this.align_childs = function( Child )

(Re)Aligns all child elements of this element to their margins

Parameters

See also

set_marg

this.attach = this.attach_node = function( Element, offsetX, offsetY, direction, z )

Attaches another VegUI element to this node.  When an element is attached it will stick to this node and move with it whenever it is moved

Alias

<attach>

Parameters

See also

detach_node

Example

// yourNode will be attached to myNode at a 5 pixel offset in each
// direction. Submitting the direction as VUI_BACK causes
// yourNode to stay under myNode on the z-level

myNode.attach(yourNode, 5, 5, VUI_BACK, 2);

this.build = this.build_node = function( toNode, takeNode )

build a HTML node from the template properties of this element.  Once the node is built it will be controlled by this element

Alias

build()

Parameters

Returns

this.call_ondock = function()

This function triggers the ondock event on this element and all its child elements recursivly

this.check_focus = function( focusType )

See if this element or any of its child elements has focus.

Parameters

Returns

See also

set_focus_node, lose_focus_node

this.clear = function( replacement )

Removes all child HTML nodes from the HTML node that is controlled by this element

Parameters

See also

kill

Example

// all child elements will be removed from myNode
myNode.clear();

// all child elements will be removed from myNode
// and a new div node will be appended
myNode.clear(htmlnode('div'));

this.clone_event = function( Template )

Clones a vegUI event

Paramters

Returns

this.clone = this.clone_node = function( Template )

Clones the children and properties of a template element to this element

Template elements are vegUI elements that have not been built.

Alias

clone()

Parameters

Returns

Example

// yourNode will take over the template settings from myNode.
// This will only work as long as myNode is still in template
// mode and has not been built yet

yourNode.clone(myNode);

this.clone_children = function( type, T, rec )

clone multiple children that are of the same type from the same template

Parameters

this.control = function( Node )

Takes control over an existing HTML node

Parameters

Returns

Example

// myNode will take control over an existing html element

myNode.control(document.getElementById('some_element'));
myNode.move(50,50);

this.detach_node = this.detach = function( Element )

Detaches an attached element that was attached to this element via attach_node.

Alias

detach()

Parameters

See also

attach_node

Example

myNode.attach(yourNode);
myNode.detach(yourNode);

this.disable = this.disable_node = function( b )

Toggles the VUI_DISABLED flag on this element

Alias

disable()

Parameters

this.dock = function( toNode, insertBefore )

Appends the HTML node controlled by this element to another HTMLnode

Parameters

See also

undock

Example

myNode.dock(document.body);

this.event_add = function( eventName, func, funcId )

Adds a function to be executed to a vegui element event

Parameters

See also

event_execute

Example

myNode.event_add('onresize', function() { alert('test'); });

this.event_execute = function( eventName, args )

Fires a vegUI event

Parameters

See also

event_execute

this.event_listener_set = function( eventName, func, n )

Add function to event listener of the node controlled by this element

Parameters

this.find_common_parent = function( Obj )

Find the first common vegui Parent that this element and Obj share

Parameters

Returns

See also

is_parent

Example

var node1 = existingNode.add_child('node1', VUI_NODE);
var node2 = existingNode.add_child('node2', VUI_NODE);
var node3 = node2.add_child('node3', VUI_NODE);

// would return a reference to existingNode
return node3.find_common_parent(node1);

this.height = function()

Returns

See also

width, x, y, x2, y2

this.hevent = this.hevent_node = function( eventType, mEvent )

private function

This function gets called whenever a mouse or keyboard event is handled by this element.It executes all the functions stored in the VegUIMouseState State property of this element for the event in question and sets the event specific properties.

Alias

hevent()

Parameters

Returns

See also

tgl_event

this.hide = function( b )

toggles this element to be invisible or visible

Parameters

See also

is_hidden

Example

myNode.hide(1); // node is hidden
myNode.hide(0); // node is visible again

this.is_hidden = function()

Checks if the HTML node controlled by this element is hidden or visible

Returns

See also

hide

Example

myNode.hide(1);
return myNode.is_hidden(); // returns true

this.is_parent = function( Obj )

Check if a vegui element is the parent element of this element somewhere down the parent chain

Parameters

Returns

See also

find_common_parent

Example

myNode = pNode.add_child('myNode', VUI_NODE);
return myNode.is_parent(pNode); // returns true

this.kill = function( removeSelf, keepBase )

Removes the HTMLnode controlled by this element and/or destroys the element it self.  The onkill event is called by this function

Parameters

See also

clear

Example

myNode.kill(); // only the html node is removed from the document
myNode.kill(1); // html node is removed from the document and element is destroyed
myNode.kill(1,1); // only the vegui element is destroyed

this.lose_focus = this.lose_focus_node = function( bail )

Takes focus away from this element, the first parent that can have focus set on it will gain passive focus.

Alias

lose_focus()

Paramters

See also

set_focus_node, check_focus

this.move = function( x, y )

moves the HTML node controlled by this element to new coordinates

Parameters

See also

set_x, set_y

Example

myNode.move(5, 15);

called when the element is moved via the set_x, set_y or move methods

called when the element is resized via the set_width, set_height or resize methods

triggered by dock method

varies from element to element

triggered by kill method

triggered when element gains focus

triggered when element loses focus

triggered after element was built

triggered by hide method

this.overlaps = function( Node, yDiffS, yDiffT )

Checks if this element overlaps with another element.  Overlapping meaning they collide somewhere and one is covered by the other.

Be aware that this function only checks coordinates, it does not matter if the two nodes arent children of the same parent node, if their coordinates and proportions collide - even in theory - the function will return the overlapping percentage.

Parameters

Returns

this.resize = function( w, h, noAlign )

resizes the HTML node controlled by this element

Parameters

See also

set_width, set_height

this.set_focus = this.set_focus_node = function( focusType )

Gives focus to the element.  When an element has focus the manager that spawned that element knows where to direct certain keyboard and mouse events to

Alias

set_focus()

Parameters

int focusType = Focus types

Returns

See also

lose_focus_node, check_focus

this.set_height = function( n, noAlign )

sets the height of the HTML node controlled by this element

Parameters

See also

set_width, resize

this.set_marg = function( rmarg, bmarg, rmarg_nr, bmarg_nr )

Template Function

Sets the margins of this element in relation to the proportions of it’s parent element

Parameters

Code Example

This would resize this element whenever the proportions of it’s parents change to leave a space of 5 pixels between the element’s right and bottom border and the parent’s right and bottom border

myNode.set_marg(5,5);

See also

<set>, set_node, align_childs

this.set = this.set_node = function( nodeType, w, h, x, y, pos, z )

Template Function

Sets the most common template properties for this element.  Properties will only be (re)set if valid values are submitted.  So if you do wish to ommit certain properties submit them as null

Alias

set()

Parameters

See also

set_marg

Example

myNode.set('div', 50, 50, 5, 5, 'absolute', 15);
Manager.build_element(myNode);

this.set_pos = function( pos, n )

sets the CSS position of the HTML node controlled by this element

Parameters

Example

myNode.set_pos('absolute', 15);

this.set_transparency = function( n, noIe )

Set the CSS transparency of the HTML node that is controlled by this element.

Parameters

Example

myNode.set_transparency(50); // 50% transparent

this.set_width = function( n, noAlign )

sets the width of the HTML node controlled by this element

Parameters

See also

set_height, resize

this.set_x = function( n )

repositions the HTML node controlled by this element on the x axis

Parameters

See also

set_y, move

this.set_y = function( n )

repositions the HTML node controlled by this element on the y axis

Parameters

See also

set_x, move

this.stick = function( toElement, offsetX, offsetY, direction, offsetZ )

Sticks the element to another element at a certain offset

Parameters

this.tgl_event = function( b, eventType, nodeProp, ret )

private function

Toggles event handling for a certain mouse or keyboard event on or off.  This function is called automatically by the <build> method if the flags property of this element has event handling enabled for a certain keyboard or mouse event

Parameters

See also

hevent_node

this.undock = function()

Removes the HTML node controlled by this element from its current parentNode.

Returns

See also

dock

Example

myNode.dock(document.body);
myNode.undock();

this.width = function()

Returns

See also

height, x, y, x2, y2

this.x = function()

Returns

See Also

y, x2, y2, abs_x, abs_y

this.x2 = function()

Returns

See also

y2, x, y, abs_x, abs_y

this.y = function()

Returns

See also

x, x2, y2, abs_x, <abs y>

this.y2 = function()

Returns

See also

x2, x, y, abs_x, abs_y

function VegUIManager( refName )

Constructor

Parameters

Attempts the prevention of the default browser action for a certain keyboard key code

Paramters

See also

unblock_key

Example

// user should not be able to scroll the browser window using
// the arrow keys anylonger

Manager.block_key([37,38,39,40]);

this.build_element = function( VegUIObj, toNode )

builds a VegUIElement.  This is the function that should be used to build vegui elements, instead of calling the element’s build method whenever possible

Parameters

Returns

See also

build_elements, VegUINode::build_node

Example

myNode = Manager.get_new(VUI_NODE);
myNode.set('div',50,50);
myNode.T.Css.backgroundColor = 'black';
Manager.build_element(myNode);

this.build_elements = function()

builds multiple vegUI elements, if the last argument submitted to the function is a HTML node then the element’s will be built as children of that node

Added in

2.0.6

Parameters

See also

build_element

Example

// myNode, myNode2 and myNode3 will be built from their template
// properties and then be appended to document.body

Manager.build_elements(myNode, myNode2, myNode3, document.body);

this.build = this.build_manager = function( toNode, takeBody )

builds the manager

Alias

build()

Parameters

Returns

See also

VegUINode::build_node

this.clone_elements = function( T )

clone multiple elements of the same template

Parameters

Example

//myNode and myNode2 will be cloned from myTemplate
Manager.clone_elemebnts(myTemplate, myNode, myNode2);

this.evalme = function( code )

evals some javascript code

Parameters

this.get_clone = function( Template, Parent )

Wrapper functions to create a new vegui element and clone it

Parameters

Returns

See also

get_new

Example

myNode = Manager.get_new(VUI_NODE);
myNode2 = Manager.get_clone(myNode);

this.get_free_idx = function()

private function

Returns a free element index, which is a ranom unused number between 0 and ELEMENT_MAX_INDEX

Returns

this.get_new = function( type, Parent, Template )

Creates a new VegUIElement

Parameters

Note

This is the function that should be used to create new vegui elements that are not the children of other vegui elements.

Returns

See also

get_clone

Example

myNode = Manager.get_new(VUI_Node);

this.include = function( path, ondone, async )

Includes javascript code from a file and executes is

Requires

Parameters

Example

Manager.init_bridge(); // only needs to be called once, not everytime
Manager.include('helloworld.js');

this.init_bridge = function()

initializes common VegUIBridge object that can be accessed by all spawned VegUIElements by accessing it over their Manager property

Requires

vegui.bridge.class.js

myNode.Manager.Bridge.dostuff()

Returns

See also

init_fx

Example

Manager.init_bridge();
Manager.Bridge.send('somefile.txt', '', 'GET');

this.init_fx = function( interval )

initializes common VegUIFXManager object that can be accessed by all spawned VegUIElements by accessing it over their Manager attribute

Requires

vegui.fx.class.js

myNode.Manager.FX.dostuff()

Parameters

Returns

See also

init_bridge

this.key_is_blocked = function( keyCode )

Check if a keycode has been blocked with <block_key>

Parameters

Returns

See also

<block_key>, unblock_key

Example

Manager.block_key([38]);
return Manager.key_is_blocked(38); // true

this.set = this.set_manager = function( w, h, x, y )

Template function

sets the most common template properties for the element

Alias

set()

Parameters

See also

VegUINode::set_node

this.unblock_key = function( keyCode )

Removes a keycode block set by <block_key> method

Parameters

See also

<block_key>

Example

Manager.unblock_key([37,38,39,40]);

function VegUIBBox( VegUIElement )

Constructor

Parameters

this.correct = function()

checks if the element is within the boundin box’s border, if not the element will be moved to be within the bounding box’s border

this.set = function( x, y, w, h, b, c )

sets the bounding box up

Parameters

this.validate = function( x, y )

Validates the position of the element that the bounding box belongs to

Parameters

Returns

function VegUIDynFunc( returnVal )

Constructor

Parameters

this.add = function( fn, id )

Adds a function to the stack

Parameters

Code example

myDynFunc.add(function() { alert('hi'); }, 'hi');

See also

free

this.execute = function( argArr )

Executes all the functions in the stack

Parameters

Code example

myDynFunc.add( function(argArr) { alert(argArr[0]); } );
myDynFunc.execute(['hello world']);

Returns

this.free = function( id )

Free a unique function id effectivly removing the function linked to it from the stack

Parameters

See also

add