Index | OAT homepage | OpenLink Software

# OATDOCloader

- OATDOCloader
- _ _ loader.js
- _ _ _ _ Functions
- _ _ _ _ _ _ $(element)
- _ _ _ _ _ _ $$(className, element)
- _ _ _ _ _ _ $v(element)
- _ _ _ _ _ _ OAT.Dom.create(tagName, [styleObj], [className])
- _ _ _ _ _ _ OAT.Dom.createNS(namespace, tagName)
- _ _ _ _ _ _ OAT.Dom.text(text)
- _ _ _ _ _ _ OAT.Dom.button(label)
- _ _ _ _ _ _ OAT.Dom.radio(name)
- _ _ _ _ _ _ OAT.Dom.image(src, srcBlank, width, height)
- _ _ _ _ _ _ OAT.Dom.option(name, value, [parent])
- _ _ _ _ _ _ OAT.Dom.append([parent1, child1, child2, ...], [parent2, child1, ...],...)
- _ _ _ _ _ _ OAT.Dom.hide(element)
- _ _ _ _ _ _ OAT.Dom.show(element)
- _ _ _ _ _ _ OAT.Dom.clear(element)
- _ _ _ _ _ _ OAT.Dom.unlink(element)
- _ _ _ _ _ _ OAT.Dom.center(element, x, y, [reference])
- _ _ _ _ _ _ OAT.Dom.isChild(child, parent)
- _ _ _ _ _ _ OAT.Dom.isClass(element, className)
- _ _ _ _ _ _ OAT.Dom.addClass(element, className)
- _ _ _ _ _ _ OAT.Dom.removeClass(element, className)
- _ _ _ _ _ _ OAT.Dom.getViewport()
- _ _ _ _ _ _ OAT.Dom.getScroll()
- _ _ _ _ _ _ OAT.Dom.position(element)
- _ _ _ _ _ _ OAT.Dom.getLT(element)
- _ _ _ _ _ _ OAT.Dom.getWH(element)
- _ _ _ _ _ _ OAT.Dom.moveBy(element, dx, dy)
- _ _ _ _ _ _ OAT.Dom.resizeBy(element, dx, dy)
- _ _ _ _ _ _ OAT.Dom.removeSelection()
- _ _ _ _ _ _ OAT.Dom.uriParams()
- _ _ _ _ _ _ OAT.Dom.changeHref(element, newHref)
- _ _ _ _ _ _ OAT.Dom.toSafeXML(string)
- _ _ _ _ _ _ OAT.Dom.toSafeXML(string)
- _ _ _ _ _ _ OAT.Event.attach(element, event, callback)
- _ _ _ _ _ _ OAT.Event.detach(element, event, callback)
- _ _ _ _ _ _ OAT.Event.source(event)
- _ _ _ _ _ _ OAT.Event.cancel(event)
- _ _ _ _ _ _ OAT.Event.position(event)
- _ _ _ _ _ _ OAT.Event.prevent(event)
- _ _ _ _ _ _ OAT.Style.include(filename,force)
- _ _ _ _ _ _ OAT.Style.get(element, property)
- _ _ _ _ _ _ OAT.Style.apply(element, styleObj)
- _ _ _ _ _ _ OAT.Style.opacity(element, opacity)
- _ _ _ _ _ _ OAT.Style.background(element, url)
- _ _ _ _ Preferences
- _ _ _ _ _ _ OAT.Preferences.showAjax
- _ _ _ _ _ _ OAT.Preferences.useCursors
- _ _ _ _ _ _ OAT.Preferences.windowTypeOverride
- _ _ _ _ _ _ OAT.Preferences.xsltPath
- _ _ _ _ _ _ OAT.Preferences.imagePath
- _ _ _ _ _ _ OAT.Preferences.stylePath
- _ _ _ _ _ _ OAT.Preferences.httpError
- _ _ _ _ Properties
- _ _ _ _ _ _ OAT.Browser.isIE
- _ _ _ _ _ _ OAT.Browser.isIE6
- _ _ _ _ _ _ OAT.Browser.isIE7
- _ _ _ _ _ _ OAT.Browser.isGecko
- _ _ _ _ _ _ OAT.Browser.isOpera
- _ _ _ _ _ _ OAT.Browser.isWebKit
- _ _ _ _ _ _ OAT.Browser.isKonqueror
- _ _ _ _ _ _ OAT.Browser.isKHTML
- _ _ _ _ _ _ OAT.Browser.isMac
- _ _ _ _ _ _ OAT.Browser.isLinux
- _ _ _ _ _ _ OAT.Browser.isWindows

## loader.js

This is the basic library. Can be considered a toolkit on its own, as it provides many useful functions and shortcuts.

### Functions

#### $(element)

This function is very popular and appears in almost every JavaScript framework available. Its purpose is to provide a shortcut for longer `document.getElementById()` functions. Basic usage is:

    var object = $("some_id");
    alert(object.tagName);

In this example, we assume that there is a HTML node with id " `some_id` ". The `$()` function converts a string to the object. Note that it is perfectly correct to pass an object reference to `$()` function, although not very useful.

Due to the presence of this function in toolkit, every other function that accepts a node reference as an argument can also accept its id.

#### $$(className, element)

This function returns a list of HTML nodes below `element` (document when not specified), belonging to a specified `className` . NOTE! Prior to OAT version 2.8, this function was identical to `$v()` . Please update your code to reflect this change and use `$v()` where appropriate.

#### $v(element)

This function is a shortcut for `$().value` . You should use it when getting a value of any form `element` .

#### OAT.Dom.create(tagName, [styleObj], [className])

Used for dynamic creation of HTML nodes. Three parameters are accepted; the first one is mandatory. Example:

     var myDiv = OAT.Dom.create("div"); var myStyledDiv = OAT.Dom.create("div", {color : "#f00", fontWeight : "bold"}, "myDiv_class");

The second (optional) argument `styleObj` is an object comprised of CSS properties. For a full list of valid properties, see Mozilla documentation and MSDN. CSS properties are not the same for all browsers, so specifying a floating element looks like:

    var element = OAT.Dom.create("div", {cssFloat:"left", styleFloat:"left"});

The first declaration is for Gecko; the latter is for MSIE.

#### OAT.Dom.createNS(namespace, tagName)

Used for dynamic creation of HTML nodes in particular `namespace` . See also `OAT.Dom.create()` , above.

#### OAT.Dom.text(text)

Creates and returns DOM text node with value of argument `text` .

#### OAT.Dom.button(label)

Creates and returns DOM button with specified `label` .

#### OAT.Dom.radio(name)

Creates and returns DOM radio input with specified `name` .

#### OAT.Dom.image(src, srcBlank, width, height)

Creates and returns DOM image node. `src` is image's URL; when PNG is used, specify `srcBlank` (url of transparent image) for Internet Explorer's workaround.

#### OAT.Dom.option(name, value, [parent])

Creates and returns DOM

node with name of `name` and value of `value` . If `parent` is specified, this function also appends newly created node to that parent. Example:

    var s = OAT.Dom.create("select"); OAT.Dom.option("apples",1,s); OAT.Dom.option("bananas",2,s); OAT.Dom.option("cherries",3,s);

#### OAT.Dom.append([parent1, child1, child2, ...], [parent2, child1, ...],...)

Links any number of DOM nodes. Takes variable amount of arguments, each argument must be an array. For each argument:

- First value is taken as parent node
- All other values are appended to parent (in order in which they appear)

#### OAT.Dom.hide(element)

Hides specified `element` by setting its `style.visibility` property.

#### OAT.Dom.show(element)

Unhides previously hidden `element` by setting its `style.visibility` to default value.

#### OAT.Dom.clear(element)

This function clears all child nodes from an `element` . May be called with either object reference or id-string as an argument. So, for instance --

    OAT.Dom.clear("my_select_element");

-- removes all options from existing `<select>` element with id " my `select_element".`

#### OAT.Dom.unlink(element)

Unlinks `element` from DOM tree. Notice that the element is not destroyed as long as it can be referenced

#### OAT.Dom.center(element, x, y, [reference])

Centers `element` relative to its parent node. If `reference` is specified, this node is used instead of parent node. `x` and `y` are bools, specifying whether horizontal and/or vertical centering should be done.

#### OAT.Dom.isChild(child, parent)

Tests whether a `child` is a subnode of node `parent` . The depth is not important here.

#### OAT.Dom.isClass(element, className)

HTML elements may be of multiple classes, this function returns true when at least one of `element` 's classes is `className` . Example:

    var div = OAT.Dom.create("div"); div.className = "big red fox"; alert( OAT.Dom.isClass(div,"fox"); ); // true

#### OAT.Dom.addClass(element, className)

Adds class `className` to `element` .

#### OAT.Dom.removeClass(element, className)

Removes class `className` from `element` .

#### OAT.Dom.getViewport()

Returns size (2-item array) of current viewport.

#### OAT.Dom.getScroll()

Returns amount of scroll (2-item array) of current viewport.

#### OAT.Dom.position(element)

Returns x and y coordinates of `element` 's top left corner, relative to page's top left corner. Coordinates are returned in an array of two elements. To count this value, the whole tree of `offsetParents` must be climbed up, so it is not wise to call this function too often. Example:

    var coords = OAT.Dom.position(div);
    alert("x: " + coords[0]+", y:" + coords[1]);

#### OAT.Dom.getLT(element)

Returns x and y coordinates of `element` 's top left corner, relative to its `offsetParent` , in form of array with two elements.

#### OAT.Dom.getWH(element)

Returns width and height of `element` (in pixels), in form of array with two elements.

#### OAT.Dom.moveBy(element, dx, dy)

Moves `element` by `dx` pixels horizontally and `dy` pixels vertically.

#### OAT.Dom.resizeBy(element, dx, dy)

Resizes `element` by `dx` pixels horizontally and `dy` pixels vertically.

#### OAT.Dom.removeSelection()

Unselects everything selected.

#### OAT.Dom.uriParams()

Returns an object of current URI parameters. So, for `/?a=b&c[]=d&c[]=e` , this returns:

    {
            a:"b",
            c:["d","e"]
    }

#### OAT.Dom.changeHref(element, newHref)

Changes the href attribute of the given `element` .

#### OAT.Dom.toSafeXML(string)

Convert HTML special chars in the given `string` into entities.

#### OAT.Dom.toSafeXML(string)

Decrypt entities in the given `string` .

#### OAT.Event.attach(element, event, callback)

Attaches function specified with `callback` to `event` detected on `element` . The event is specified without the "on" prefix. Function reference callback will be called with one argument, the event object reference. Example:

    OAT.Event.attach("myDiv", "click", function() { alert("!"); });

#### OAT.Event.detach(element, event, callback)

Removes attached `callback` from `element` fired with `event` . Note that only non-anonymous functions can be detached.

#### OAT.Event.source(event)

Converts `event` to reference to element which fired it. This can be useful when multiple elements fire the same callback and one needs to know which element fired it. Example:

    var callback = function(event) {
            var id = OAT.Event.source(event).id;
            alert("Event fired by " + id);
    }
    var div = OAT.Dom.create("div");
    div.id = "myDiv";
    OAT.Dom.attach(div, "click", callback);

#### OAT.Event.cancel(event)

Cancels bubbling of `event` .

#### OAT.Event.position(event)

Returns coordinates of `event` , relative to top left corner of page.

#### OAT.Event.prevent(event)

Prevents default action if `event` (form submit, context menu, image-to-new-tab drag, ...).

#### OAT.Style.include(filename,force)

Include CSS stylesheet `filename` into the page. (See `OAT.Preferences.stylePath` property.) Stylesheet will be reincluded if `force` option is passed.

#### OAT.Style.get(element, property)

Returns a style `property` of `element` . This is different from accessing the `element.style.property` value, as this function returns the computed style (i.e., set by stylesheets, etc.) instead of a dynamically created one. Example:

    var family = OAT.Style.get("elementId", "fontFamily");
    alert(family); // returns actual font-family for this element, wherever it is set

#### OAT.Style.apply(element, styleObj)

Applies `styleObj` to `element` . `styleObj` follows the same conventions defined in `OAT.Dom.create()` .

#### OAT.Style.opacity(element, opacity)

Sets `element` 's opacity to `opacity` . Acceptable range: 0 (transparent) - 1 (opaque).

#### OAT.Style.background(element, url)

Sets `element` 's background image to the one specified by `url` .

### Preferences

#### OAT.Preferences.showAjax

Show Ajax window even if not explicitly requested by application.

#### OAT.Preferences.useCursors

Use scrollable cursors.

#### OAT.Preferences.windowTypeOverride

Do not guess window type.

#### OAT.Preferences.xsltPath

Path to the XSLT stylesheets.

#### OAT.Preferences.imagePath

Path to the images.

#### OAT.Preferences.stylePath

Path to the CSS stylesheets.

#### OAT.Preferences.httpError

Show HTTP errors.

### Properties

#### OAT.Browser.isIE

Returns true if used browser is Internet Explorer.

#### OAT.Browser.isIE6

Returns true if used browser is Internet Explorer 6.

#### OAT.Browser.isIE7

Returns true if used browser is Internet Explorer 7.

#### OAT.Browser.isGecko

Returns true if used browser is Gecko-based (Firefox, Mozilla).

#### OAT.Browser.isOpera

Returns true if used browser is Opera.

#### OAT.Browser.isWebKit

Returns true if used browser is Apple WebKit .

#### OAT.Browser.isKonqueror

Returns true if used browser is KDE Konqueror.

#### OAT.Browser.isKHTML

Returns true if used browser is KHTML-based (practically, this means Konqueror or Safari) .

#### OAT.Browser.isMac

Returns true if used operating system is Mac OS.

#### OAT.Browser.isLinux

Returns true if used operating system is Linux.

#### OAT.Browser.isWindows

Returns true if used operating system is Windows.

Copyright (C) 2005-2008 OpenLink Software