vegui. std.js

Summary
holds pointers to all VegUIElement Constructor functions by their type
vegUI element type for VegUINode
vegUI element type for VegUIManager
Mouse and keyboard eventtypes that help you identify what event you’re dealing with
Url needed for xmlhttprequest to work, can leave blank if working on a local server
Bitmask flags that can be set on the flags property of each VegUIElement individually
Resizes body to manager canvas size, this is to fix text selection and onmouseout in internet explorer
Maximum element index possible, 90000 by default, increase if you need to spawn more than 90000 elements at the same time
Current vegUI version
holds browser name in its name property
Makes a vegUI module accessable by the manager.
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
Creates a new instance of a javascript object
Attempt to append the properties of trgObj to srcObj
clones an array
checks if Node is the child of Parent somewhere up the parent chain
get mouse pointer location, sets mouseX and mouseY
Wrapper for document.createElement with the option to append the created node to another html node right away
Wrapper for document.createElement to create an image node with the option to define proportions and image source right away
Wrapper for document.createTextNode
generate a random number
Handles a certain keyboard or mouse event type that gets triggered by the VegUIElement the VegUIMouseState belongs to
(VegUIElement) VegUI element that owns this mouse state
(int) holds the type of mouse or keyboard event this state handles
(Array) properties that will be copied over to the element that owns this mouse state if the event that is handled by this mouse state is triggered
The most basic VegUI Element.
These properties are only set after certain mouse or keyboard events have been handled by this element
Template properties are properties that will get turned into real properties when the node is built.
Creates a VegUI element as a child of this element.
Adds an existing VegUI Element to this element as a child
Wrapper function to add a new vegui element to this element as a child with the ability to set the most common template properties
(Re)Aligns all child elements of this element to their margins
Attaches another VegUI element to this node.
build a HTML node from the template properties of this element.
This function triggers the ondock event on this element and all its child elements recursivly
See if this element or any of its child elements has focus.
Removes all child HTML nodes from the HTML node that is controlled by this element
Clones a vegUI event
Clones the children and properties of a template element to this element
clone multiple children that are of the same type from the same template
Takes control over an existing HTML node
Detaches an attached element that was attached to this element via attach_node.
Toggles the VUI_DISABLED flag on this element
Appends the HTML node controlled by this element to another HTMLnode
Adds a function to be executed to a vegui element event
Fires a vegUI event
Add function to event listener of the node controlled by this element
Find the first common vegui Parent that this element and Obj share
private function
toggles this element to be invisible or visible
Checks if the HTML node controlled by this element is hidden or visible
Check if a vegui element is the parent element of this element somewhere down the parent chain
Removes the HTMLnode controlled by this element and/or destroys the element it self.
Takes focus away from this element, the first parent that can have focus set on it will gain passive focus.
moves the HTML node controlled by this element to new coordinates
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
Checks if this element overlaps with another element.
resizes the HTML node controlled by this element
Gives focus to the element.
sets the height of the HTML node controlled by this element
Template Function
Template Function
sets the CSS position of the HTML node controlled by this element
Set the CSS transparency of the HTML node that is controlled by this element.
sets the width of the HTML node controlled by this element
repositions the HTML node controlled by this element on the x axis
repositions the HTML node controlled by this element on the y axis
Sticks the element to another element at a certain offset
private function
Removes the HTML node controlled by this element from its current parentNode.
Spawns and keeps track of all vegUI elements
extends vegUINode
Constructor
Attempts the prevention of the default browser action for a certain keyboard key code
builds a VegUIElement.
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
builds the manager
clone multiple elements of the same template
evals some javascript code
Wrapper functions to create a new vegui element and clone it
private function
Creates a new VegUIElement
Includes javascript code from a file and executes is
initializes common VegUIBridge object that can be accessed by all spawned VegUIElements by accessing it over their Manager property
initializes common VegUIFXManager object that can be accessed by all spawned VegUIElements by accessing it over their Manager attribute
Check if a keycode has been blocked with <block_key>
Template function
Removes a keycode block set by <block_key> method
Bounding box for elements, limits where an element can be moved to.
Constructor
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
sets the bounding box up
Validates the position of the element that the bounding box belongs to
Allows to have a function with dynamic content
Constructor
Adds a function to the stack
Executes all the functions in the stack
Free a unique function id effectivly removing the function linked to it from the stack

Constants

VEGUIOBJ

holds pointers to all VegUIElement Constructor functions by their type

VUI_NODE

vegUI element type for VegUINode

VUI_MANAGER

vegUI element type for VegUIManager

Mouse and keyboard event types

Mouse and keyboard eventtypes that help you identify what event you’re dealing with

VUI_MOUSE_DOWNmouse button clicked on the vegUI element
VUI_MOUSE_UPmouse button released on the vegUI element
VUI_MOUSE_OVERmouse button entered the vegUI element
VUI_MOUSE_OUTmouse button leaves the vegUI element
VUI_MOUSE_MOVEmouse moved within the borders of vegUI element
VUI_MOUSE_WHEELmouse wheel used
VUI_KEY_DOWNkeyboard key pressed
VUI_KEY_UPkeyboard key released
VUI_FORM_BLURonblur event in form elements
VUI_FORM_FOCUSonfocus event in form elements
VUI_MOUSE_DBL_LICKdbclick event

VUI_URL

Url needed for xmlhttprequest to work, can leave blank if working on a local server

Generic directions

VUI_UPup
VUI_DOWNdown
VUI_LEFTleft
VUI_RIGHTright
VUI_BACKback
VUI_FRONTfront

Flags, Common

Bitmask flags that can be set on the flags property of each VegUIElement individually

VUI_HMOUSE_UPenable event handling for VUI_MOUSE_UP
VUI_HMOUSE_DOWNenable event handling for VUI_MOUSE_DOWN
VUI_HMOUSE_OVERenable event handling for VUI_MOUSE_OVER
VUI_HMOUSE_OUTenable event handling for VUI_MOUSE_OUT
VUI_HMOUSE_MOVEenable event handling for VUI_MOUSE_MOVE
VUI_HMOUSE_WHEELenable event handling for VUI_MOUSE_WHEEL
VUI_HMOUSE_DBL_CLICKenable envent handling for VUI_MOUSE_DBL_CLICK
VUI_HKEY_DOWNenable event handling for VUI_KEY_DOWN
VUI_HKEY_UPenable event handling for VUI_KE_UP
VUI_TEMPLATEflag VegUIElement as template prohibting it from being built
VUI_DISABLEDflag VegUIElement as being disabled, prohibiting any event handling

ADJUST_BODY_SIZE

Resizes body to manager canvas size, this is to fix text selection and onmouseout in internet explorer

ELEMENT_MAX_INDEX

Maximum element index possible, 90000 by default, increase if you need to spawn more than 90000 elements at the same time

Focus types

VUI_FOCUS_PASSIVEpassive focus
VUI_FOCUS_ACTIVEactive focus

VUI_VERSION

Current vegUI version

Mouse coordinates

mouseXabsolute x coordinate of the mouse pointer
mouseYabsolute y coordinate of the mouse pointer

VUI_BROWSER_INFO

holds browser name in its name property

Functions

vui_module_add

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

int typeunique type id of the module
func moduleconstructor function of the module
string filenamefilename that the function was called in

Returns

booltrue on success
boolfalse on error

Example

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

iesucks

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

NodeHTML Node that needs to have events reset recursivly

Clone

function Clone(Obj)

Creates a new instance of a javascript object

Parameters

Object Objobject to be cloned

Example

In this example newObj will be an exact clone of Obj

var newObj = new Clone(Obj);

merge

function merge(srcObj,
trgObj)

Attempt to append the properties of trgObj to srcObj

Parameters

Object trgObjJavascript Object
Object srcObjJavascript Object

Example

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

merge(Obj1, Obj2);

cloneArray

function cloneArray(Arr)

clones an array

Parameters

Array ArrArray to be cloned

Returns

ArrayNew instance of Arr

Example

newArr will be an exact copy of oldArr

var newArrr = cloneArray(oldArr);

has_parent

function has_parent(Node,
Parent)

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

Parameters

HTMLNode NodeHTML Node
HTMLNode ParentHTML Node

Returns

booltrue if Parent is the parent node of Node directly or indirectly
boolfalse if Parent is not the parent node of Node directly or indirectly

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);

get_mouse

function get_mouse(e)

get mouse pointer location, sets mouseX and mouseY

Parameters

Event ejavascript event

Example

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

htmlnode

function htmlnode(nodeName,
parentNode)

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

Paramters

string nodeNamehtml name of the node (ie.  ‘div’)
<HTMLNode parentNode>created html node will be appended to this node

Returns

HTMLNodeCreated node

imgnode

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

string srcpath of the image
int wwidth of the image (pixels)
int hheight of the image (pixels)
<HTMLNode parentNode>created image node will be appened to this node

Returns

HTMLNodeCreated node

txtnode

function txtnode(txt)

Wrapper for document.createTextNode

Parameters

string txttext string to be created

Returns

DOMNodeCreated text node

vui_rand

function vui_rand(min,
max)

generate a random number

Parameters

int minminimum number
int maxmaximum number

Returns

intthe generated number (int)

Example

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

VegUIMouseState

Handles a certain keyboard or mouse event type that gets triggered by the VegUIElement the VegUIMouseState belongs to

Summary
(VegUIElement) VegUI element that owns this mouse state
(int) holds the type of mouse or keyboard event this state handles
(Array) properties that will be copied over to the element that owns this mouse state if the event that is handled by this mouse state is triggered

Functions

VegUIMouseState

function VegUIMouseState(eventType,
Parent)

Parameters

int eventTypeevent type to handle, Mouse and keyboard event types
VegUIElement ParentVegUIElement this object belongs to

Properties

Parent

(VegUIElement) VegUI element that owns this mouse state

type

(int) holds the type of mouse or keyboard event this state handles

Scripts

Properties

(Array) properties that will be copied over to the element that owns this mouse state if the event that is handled by this mouse state is triggered

VegUINode

The most basic VegUI Element.  The VegUINode is the base element for every other vegUI element.

Summary
These properties are only set after certain mouse or keyboard events have been handled by this element
Template properties are properties that will get turned into real properties when the node is built.
Creates a VegUI element as a child of this element.
Adds an existing VegUI Element to this element as a child
Wrapper function to add a new vegui element to this element as a child with the ability to set the most common template properties
(Re)Aligns all child elements of this element to their margins
Attaches another VegUI element to this node.
build a HTML node from the template properties of this element.
This function triggers the ondock event on this element and all its child elements recursivly
See if this element or any of its child elements has focus.
Removes all child HTML nodes from the HTML node that is controlled by this element
Clones a vegUI event
Clones the children and properties of a template element to this element
clone multiple children that are of the same type from the same template
Takes control over an existing HTML node
Detaches an attached element that was attached to this element via attach_node.
Toggles the VUI_DISABLED flag on this element
Appends the HTML node controlled by this element to another HTMLnode
Adds a function to be executed to a vegui element event
Fires a vegUI event
Add function to event listener of the node controlled by this element
Find the first common vegui Parent that this element and Obj share
private function
toggles this element to be invisible or visible
Checks if the HTML node controlled by this element is hidden or visible
Check if a vegui element is the parent element of this element somewhere down the parent chain
Removes the HTMLnode controlled by this element and/or destroys the element it self.
Takes focus away from this element, the first parent that can have focus set on it will gain passive focus.
moves the HTML node controlled by this element to new coordinates
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
Checks if this element overlaps with another element.
resizes the HTML node controlled by this element
Gives focus to the element.
sets the height of the HTML node controlled by this element
Template Function
Template Function
sets the CSS position of the HTML node controlled by this element
Set the CSS transparency of the HTML node that is controlled by this element.
sets the width of the HTML node controlled by this element
repositions the HTML node controlled by this element on the x axis
repositions the HTML node controlled by this element on the y axis
Sticks the element to another element at a certain offset
private function
Removes the HTML node controlled by this element from its current parentNode.

Properties

Object Properties

refNamestring, name of the object
ParentVegUIElement, Parent element of this element
ManagerVegUIElement, Manager element that spawned this element
typeint, element type VUI_NODE
CAlias for Childs
ChildsObject, Holds all child elements of this type by their element index
TAlias for Template
TemplateObject, Holds template properties
BaseHTMLNode, Holds the HTML node that is controlled by the element
CssDOMNode, Holds the style property of the HTML node that is controlled by this element
hasFocusint, Holds the focus type of the node
flagsint, Bitmask
BBoxVegUIBBox, Holds the Bounding Box object of this element
transparencyint, Holds the transparency value of this element (0-100)
StatesArray, Holds mouse/keyboard event states, one state for each event type
nodeIdstring, Holds the id of the HTML node that is controlled
noAutoShowbool, prevents the element from being flagged visible recursivly
childNamestring, child name of the node
lockFocusbool, if true focus can never be taken away from this node
Attachedobject, object holding vegui elements that were attached to this element via attach_node

Event Specific Object Properties

These properties are only set after certain mouse or keyboard events have been handled by this element

mEventEvent, Holds the javascript event object for the last mouse or key event handled by this node
deltaint, Mousewheel delta, is set whenever the mousewheel event is handled by this element
aKeyint, character code of the last key down or key up event handled by this element
aKeyCharchar, character of the last key down or key up event handled by this element
toEHTMLNode, relatedTarget / toElement from the last mouse event handled by this element
keyShiftbool, if true then shift key was held down when the last keyboard event was handled by this element
keyAltbool, if true then the alt key was held down when the last keyboard event was handled by this element
keyCtrlbool, if true then the ctrl key was held down when the last keyboard event was handled by this element

Template Properties

Template properties are properties that will get turned into real properties when the node is built.  They are stored in the Template property of the element

T.nodeTypestring, node type of the htmli node to be built (ie ‘div’)
T.xint, node position on the x axis (pixels)
T.yint, node position on the y axis (pixels)
T.wint, node width (pixels)
T.hint, node height (pixels)
T.rmargint, right margin
T.bmargint, bottom margin
T.rmarg_nrint, right margin, no resize
T.bmarg_nrint, bottom margin, no resize
T.miconstring, mouse cursor to use when the mouse enters the element (CSS cursor attribute)
T.blockIETransparencybool, if true any transparency effects will be ignored if the browser is internet explorer
T.img_srcstring, will set the HTML node’s src attribute
T.CssObject, any properties in T.Css will be copied to the HTML node’s style property
T.innerHtmlstring, The HTML Node’s innerHTML attribute will be set to this, if set
T.typestring, The HTML Node’s type attribute will be set to this if set
T.classNamestring, The HTML node will be using this CSS class if set

Functions

VegUINode

function VegUINode(refName,
Parent,
Manager)

Parameters

string refNamename of the object
VegUIElement ParentParent element of this element
VegUIElement ManagerManager element that spawned this element

abs_middle

this.abs_middle = function(stopAt)

Parameters

<HTMLNode stopAt>if submitted, the absolute position will be returned relative to the submitted node

Returns

Arrayarray holding x and y coordinates of the abolute middle of the HTML node controlled by this element

See also

abs_x, abs_y, x, y

abs_x

this.abs_x = function(stopAt)

Parameters

<HTMLNode stopAt>if submitted, the absolute position will be returned relative to the submitted node

Returns

intthe absolute position of the HTML node controlled by this element on the x axis
nullif no HTML node is controlled by this element

See also

abs_y, abs_middle, x, y

abs_y

this.abs_y = function(stopAt)
<HTMLNode stopAt>if submitted, the absolute position will be returned relative to the submitted node

Returns

intthe absolute position of the HTML node controlled by this element on the y axis
nullif no HTML node is controlled by this element

See also

abs_x, abs_middle, x, y

add_child

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

string nameunique child name
int type<VegUI element types>
<string nodeName>if set the childs T.nodeType property will be set to this
<string pos>if set the childs T.pos property will be set to this (Css position value, ie ‘absolute’)

Returns

VegUIElementthe created element

See also

add_skin, add_child_o

Example

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

add_child_o

this.add_child_o = function(name,
Obj)

Adds an existing VegUI Element to this element as a child

Parameters

string nameunique child name
VegUIElement Objelement to add as a child

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);

add_skin

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

string nnode name (ie ‘div’)
int wwidth (pixels)
int hheight (pixels)
int xposition on x axis (pixels)
int yposition on y axis (pixels)
string classNamesets the T.className property (css class to use)
int rmright margin (pixels)
int bmbottom margin (pixels)
int rm_nrright margin no resize (pixels)
int bm_nrbottom margin no resize (pixels)
string nNnode name ie ‘div’
string iimage source (file path)

Returns

VegUIElementthe created element

See also

add_child, add_child_o

align_childs

this.align_childs = function(Child)

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

Parameters

VegUIElement <Child>if submitted only this child will be realigned

See also

set_marg

attach_node

this.attach = this.attach_node = function(Element,
offsetX,
offsetY,