API Documentation

Table of Contents

• String

  • xmlEncode()
  • xmlDecode()

• DOM

  • is()
  • isView()
  • contains()
  • select()
  • add()
  • move()
  • replace()
  • remove()

• Cascading Stylesheet

  • addClass()
  • removeClass()
  • computedStyle()
  • stylize()
  • stylify()

• Color

  • parseColor()
  • parseColorType()
  • formatColor()

• Events

  • on()
  • un()
  • purge()
  • dispatch()
  • destructor()

• Dimension and Positioning

  • offset()
  • size()
  • box()
  • scroll()
  • screen()

• Node Selection

  • highlight()
  • unhighlightable()
  • clearHighlight()

• Animation

  • transition()
  • animateStyle()

String

xmlEncode(subject)

• Encode HTML special characters in String subject into HTML entity returning an HTML safe String for HTMLElement.innerHTML operations.

Parameter

Returns

xmlDecode(subject)

• Decodes HTML entities in String subject into HTML special characters returning the original/raw String value of subject.

Parameter

Returns

DOM

is(node[, nodeType[,...]])

• Checks if node is a DOM Node filtered by any given nodeType parameters.
• If nodeType is omitted, it will match any DOM Node.

Parameter

Returns

isView(defaultView)

• Checks if defaultView is an instance of window or defaultView.

Parameter

Returns

contains(ancestor, descendant)

• Checks if ancestor node has descendant node in any depth.

Parameter

Returns

select(dom, selector)

• Selects nodes within dom parameter filtered by CSS selector query.
• This throws error if querySelectorAll() is not supported.

Parameter

Returns

add(element, config[, before])

• Adds child Node config (or create if it’s an element configuration Object) to element Node.
• This will insert the config element before before Node if before is a valid childnode of element.

Parameter

Returns

move(nodes, element)

• Relocate nodes as child of element.

Parameter

Returns

replace(node, config[, destroy])

• Replaces node with config Node
• If config is an Object, new Node will be created based on config Object.

Parameter

Returns

remove(node[, destroy])

• Removes node from its parent Node.
• Optionally disable node destruction when destroy is false or if node is not an element Node.

Parameter

Returns

Cascading Stylesheet

addClass(element, classNames)

• Adds classNames (or Array of classNames) into element.
• classNames (or Array of classNames) will not be added if it exist already in “class” attribute of element.

Parameter

Returns

removeClass(element, classNames)

• Removes classNames (or Array of classNames) attached to element.
• classNames (or Array of classNames) will not be removed if it doesn’t exist in “class” attribute of element.

Parameter

Returns

computedStyle(element, ruleNames)

• Extracts CSS computed styles of element listed in ruleNames.
• If ruleNames is not an Array, it is expected that ruleNames parameter is spread across the function arguments.

Parameter

Returns

stylize(element, rules[, value])

• Applies CSS rules Object to element style attribute.
• If rules is String then element style is set individually using value parameter.
• If value or property value of rules is null or undefined, then CSS rule(s) will be removed from element style attribute.

Parameter

Returns

stylify(element)

• Extracts CSS rules in element style attribute.

Parameter

Returns

Color

parseColor(subject)

• Creates Number presentation of String color subject formatted in hex (#fff or #fffff), rgb(255,255,255), rgba(255,255,255,1), hsl(359,100%,100%), or hsla(359,100%,100%,1).
• The extracted Number presentation is useful for transitioning colors in combination with formatColor(colorValue:Number, type:String).

Parameter

Returns

parseColorType(subject)

• Extracts String subject color format information.
• Array Color information contains the following items:

[type:String, isHexFormat:Boolean, items:String|Array]

Examples:

[‘hex’, true, ‘ff00aa’]

[‘rgba’, false, [‘255’, ‘120’, ‘100’, ‘0.5’]]

Parameter

Returns

formatColor(colorValue[, type])

• Generates a formatted color string from the given Number colorValue and String type color format.

Parameter

Returns

Events

on(observable, type, handler[, context])

• Listens to dispatched event type ocurring in observable and runs handler callback on each event dispatch.

• handler is called with the following arguments:

  • event:Event - DOM Event Object.

Parameter

Returns

un(observable, type, handler[, context])

• Removes event listener in observable that matches event type, and handler (including context if provided).

Parameter

Returns

purge([observable, [type, [handler[, context]]]])

• Removes all listeners that matches the parameters: observable, type, handler, and context.
• When all parameters are omitted, all event listeners registered are removed.

Example

• purge(window, "load"); remove all “load” event listeners of window
• purge(window); remove all event listeners of window
• purge(document.body, "mousemove", callback); remove all “mousemove” event listeners of document.body having callback event handler.
• purge() remove all event listeners. This is called automatically before webpage unloads.

Parameter

Returns

dispatch(observable, type, properties)

• Dispatches custom DOM Event type to observable.

  Note:

  • IE 8 and below uses “propertychange” event type to dispatch event if properties.bubbles = false. And, “beforeupdate” event type if bubbles = true.
  • w3c standard browsers including IE9 supporting w3c Event throws errors to readonly Event object property after assigning properties to it.

Parameter

Returns

destructor(handler)

• Registers destructor event handler where all registered handlers will run when Window Object has unloaded or webpage has navigated out (also when browser is closed).

• handler doesn’t have arguments when called.

Parameter

Returns

Dimension and Positioning

offset(element[, x, y])

• Setter: when x and y parameter is provided.

  It positions the element node to x and y offset relative to document page.

  Warning!

  Setter is not supported if element is Window or Document Node.

• Getter: when x and y parameter is omitted.

  It returns Array containing x and y offset of element relative to document page.

  When element provided is Window or Document Node, returned offset Array will contain scroll offset of the viewport.

• x,y and offset Array are always in pixel px units.

Parameter

Returns

Note:

Setting element offset doesn’t work on position: static styled elements.

size(element[, width, height])

• Setter: when width and height parameter is provided.

  It resizes the element node using width and height parameter.

  Warning!

  Setter is not supported if element is Window or Document Node.

• Getter: when width and height parameter is omitted.

  It returns Array containing width and height size of element.

  When element provided is Window or Document Node, returned size Array will contain size of the document.

• width,height and size Array are always in pixel px units.

Parameter

Returns

box(element[, x, y, width, height])

• Setter: when x, y, width and height parameter is provided.

  It positions and resizes the element node using x, y, width, and height parameter.

  Warning!

  Setter is not supported if element is Window or Document Node.

• Getter: when x, y, width and height parameter is omitted.

  It returns Array containing x, y, right, bottom, width and height box of element.

  When element provided is Window or Document Node, returned box Array will contain scroll offset of the viewport and size of the document.

• x, y, width,height and box Array are always in pixel px units.

Parameter

Returns

scroll(dom[, x, y])

• Setter: when x, and y parameter is provided.

  It scrolls the dom node using x, and y scroll offset parameter.

• Getter: when x, and y parameter is omitted.

  It returns Array containing x, y scroll offsets of dom.

  When dom provided is Window or Document Node, returned scroll Array will contain scroll offset of the viewport.

• x, y and scroll offset Array are always in pixel px units.

Parameter

Returns

screen(dom)

• It returns Array containing x, y scroll offsets and width and height of the dom viewport.

• x, y, width, height and viewport box Array are always in pixel px units.

Parameter

Returns

Node Selection

highlight(from, to)

• Highlights or selects from to to Element Nodes

Parameter

Returns

unhighlightable(element[, disableSelect])

• Disables highlighting of element or enables highlighting if disableSelect is set to false.

Parameter

Returns

clearHighlight([documentNode])

• Clears all highlighted Element nodes in documentNode.

Parameter

Returns

Animation

transition(callback, from, to[, type[, duration]])

• Traverse transitions overtime within duration seconds of from and to Object’s Number properties and execute callback function on each transition.

• callback function is called with the following arguments:
  • result:Object - an object containing transition results of current animation frame.
  • current:Number - current animation frame.
  • total:Number - total animation frame.
• Available easing types based from http://gizma.com/easing:
  1. linear - simple linear tweening - no easing, no acceleration
  2. easeIn or easeInQuad - quadratic easing in - accelerating from zero velocity
  3. easeOut or easeOutQuad - quadratic easing out - decelerating to zero velocity
  4. easeInOut or easeInOutQuad - quadratic easing in/out - acceleration until halfway, then deceleration
  5. easeInCubic - cubic easing in - accelerating from zero velocity
  6. easeOutCubic - cubic easing out - decelerating to zero velocity
  7. easeInOutCubic - cubic easing in/out - acceleration until halfway, then deceleration
  8. easeInQuart - quartic easing in - accelerating from zero velocity
  9. easeOutQuart - quartic easing out - decelerating to zero velocity
  10. easeInOutQuart - quartic easing in/out - acceleration until halfway, then deceleration
  11. easeInQuint - quintic easing in - accelerating from zero velocity
  12. easeOutQuint - quintic easing out - decelerating to zero velocity
  13. easeInOutQuint - quintic easing in/out - acceleration until halfway, then deceleration
  14. easeInSine - sinusoidal easing in - accelerating from zero velocity
  15. easeOutSine - sinusoidal easing out - decelerating to zero velocity
  16. easeInOutSine - sinusoidal easing in/out - accelerating until halfway, then decelerating
  17. easeInExpo - exponential easing in - accelerating from zero velocity
  18. easeOutExpo - exponential easing out - decelerating to zero velocity
  19. easeInOutExpo - exponential easing in/out - accelerating until halfway, then decelerating
  20. easeInCirc - circular easing in - accelerating from zero velocity
  21. easeOutCirc - circular easing out - decelerating to zero velocity
  22. easeInOutCirc - circular easing in/out - acceleration until halfway, then deceleration

  Parameter

  Name	Type	Description
  callback	Function	Callback function to run on each transition from from Object to to Object.
  from	Object	Starting values to animate. (non-Number properties will not be included in the result arguments of callback)
  to	Object	Ending values of the animation. (non-Number properties will not be included in the result arguments of callback)
  [type]	String	(optional) The easing type to use in the animation. (default value is "linear")
  [duration]	Number	(optional) The duration of the animation in seconds. (default value is 1)

  Returns

  Value	Type	Description
  Function(stop animation)	Function	Run this function to stop the running animation.

animateStyle(element, styles[, type])

• Animates element Node’s current style attribute filtered by property names of styles Object.

• Possible CSS rules in element that can be animated:

  • position: left, bottom, top, and right
  • size: width and height (includes border-width, and other CSS rules ending with -width)
  • color (includes background-color, and other CSS rules ending with -color)
  • opacity

Parameter

Returns