presentation-core

Augmented.js Presentation Dom Module

API

Table of Contents

• $
  • Examples
• Dom
  • getViewportHeight
  • getViewportWidth
  • setValue
    • Parameters
  • getValue
    • Parameters
  • selector
    • Parameters
  • selectors
    • Parameters
  • query
    • Parameters
  • hide
    • Parameters
  • show
    • Parameters
  • setClass
    • Parameters
  • addClass
    • Parameters
  • removeClass
    • Parameters
  • replaceClass
    • Parameters
  • containsClass
    • Parameters
  • toggleClass
    • Parameters
  • empty
    • Parameters
  • injectTemplate
    • Parameters
• stringToHTML
  • Parameters
• getAttributes
  • Parameters
• createDOMMap
  • Parameters
• addAttributes
  • Parameters
• diffAtts
  • Parameters
• makeElem
  • Parameters
• diff
  • Parameters

$

Augmented jQuery-like selectors usinge native selectors</br/> Will return a nodelist for all selections unless only one is found.

Examples

$("#myElement");
$("section#main header");
  - or start from Element:
$("header", mainSectionEl);

Dom

DOM related functions

getViewportHeight

Gets the height of the browser viewport

Returns number The height of the viewport

getViewportWidth

Gets the width of the browser viewport

Returns number The width of the viewport

setValue

Sets the value of an element Will detect the correct method to do so by element type

Parameters

• el (string | Node) el Element or string of element selector
• value string Value to set (or HTML)
• onlyText boolean Value will set as text only

getValue

Gets the value of an element Will detect the correct method to do so by element type

Parameters

• el (string | Node) el Element or string of element selector

Returns string Returns the value of the element (or HTML)

selector

Selector function Supports full query selection

Parameters

• query string Element or string of element selector

Returns Node Returns the element (or first of type)

selectors

Selectors function Supports full query selection

Parameters

• query string Element or string of element selector

Returns NodeList Returns all the nodes selected

query

Query function Supports full query selection but acts like jQuery

Parameters

• query string Element or string of element selector
• el (string | Node) el Element to start from (optional)

Returns (NodeList | Node) Returns all the nodes selected

hide

Hides an element

Parameters

• el (string | Node) el Element or string of element selector

show

Shows an element

Parameters

• el (string | Node) el Element or string of element selector
• display string Value to set for "display" property (optional)

setClass

Sets the class attribute (completely)

Parameters

• el (string | Node) el Element or string of element selector
• cls string the class value

addClass

Adds a class attribute

Parameters

• el (string | Node) el Element or string of element selector
• cls string the class value

removeClass

Remove a class attribute

Parameters

• el (string | Node) el Element or string of element selector
• cls string the class value

replaceClass

Replace a class attribute with a new one

Parameters

• el (string | Node) el Element or string of element selector
• oldCls string the old class value
• newCls string the new class value

containsClass

Returns true if it contains the class

Parameters

• el (string | Node) Element or string of element selector
• cls string the class value

Returns boolean Returns true is contains class

toggleClass

Toggle class on element

Parameters

• el (string | Node) Element or string of element selector
• cls string the class

empty

Empty a element container

Parameters

• el (string | Node) Element or string of element selector

injectTemplate

injectTemplate method - Injects a template element at a mount point

Parameters

• template string The template selector
• mount Node The mount point as Document.Element or String

stringToHTML

Convert a template string into HTML DOM nodes

Parameters

• str String The template string

Returns Node The template HTML

getAttributes

Create an array of the attributes on an element

Parameters

• attributes NamedNodeMap The attributes on an element

Returns Array The attributes on an element as an array of key/value pairs

createDOMMap

Create a DOM Tree Map for an element

Parameters

• element Node The element to map
• isSVG Boolean If true, node is within an SVG

Returns Array A DOM tree map

addAttributes

Add attributes to an element

Parameters

• elem Node The element
• atts Array The attributes to add

diffAtts

Diff the attributes on an existing element versus the template

Parameters

• template Object The new template
• existing Object The existing DOM node

makeElem

Make an HTML element

Parameters

• elem Object The element details

Returns Node The HTML element

diff

Diff the existing DOM node versus the template

Parameters

• templateMap Array A DOM tree map of the template content
• domMap Array A DOM tree map of the existing DOM node
• elem Node The element to render content into