Global

Members

(constant) dom

An object that provides helper functions that generate [HTMLElements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement), usually for populating Component.dom.
Source:
Examples
dom.li()
// returns an `li` HTMLElement: `<li></li>`

dom.div()
// returns a 'div' HTMLElement: '<div></div>'

dom.span(lt('Some text'))
// `<span>Some text</span>`

Text and dictionary parameters do handy things

dom.a(lt('Click me'), { href: '/some-url/' })
// `<a href="/some-url/">Click me</a>`

Any parameter can be a string, a dictionary, or another element

dom.button(
	{ type: 'button', class: 'my-button' },
	dom.img({ src: 'image.jpg' }),
	lt('Click me')
)
// `<button type="button" class="my-button"><img src="image.jpg" />Click me</button>`

dom.ul(
	dom.li(lt('First item')),
	dom.li(lt('Second item'), { class: 'selected-item' }) // Attribute dicts can be in any parameter
)
// <ul>
// <li>First Item</li>
// <li class: "selected-item">Second item</li>
// </ul>

Populate a Component's UI

class MyComponent extends Component {
	constructor(dataObject, options) {
		super(dataObject, options)
		this.dom.appendChild(dom.h1(lt('This is a heading')))
	}
}

(constant) throttledConsoleLog

A handy utility function for throttling console logging to once per second
Source:

Methods

ld(date, longopt, optionsopt) → {string}

A shorthand function for getting a localized date
Parameters:
Name Type Attributes Default Description
date Date
long boolean <optional>
 true
options options <optional>
 null
Source:
Returns:
a localized string representing the date
Type
string

ldo(date, optionsopt) → {string}

A shorthand function for getting a localized date or time string using your own options
Parameters:
Name Type Attributes Default Description
date Date
options options <optional>
 null
Source:
See:
Returns:
a localized string representing the date
Type
string

ldt(date, longopt, optionsopt) → {string}

A shorthand function for getting a localized date and time
Parameters:
Name Type Attributes Default Description
date Date
long boolean <optional>
 true
options options <optional>
 null
Source:
Returns:
a localized string representing the date and time
Type
string

lt(key, defaultValueopt) → {string}

A shorthand function for getting a translation
Parameters:
Name Type Attributes Default Description
key string the source phrase, like 'Hello!'
defaultValue string <optional>
 null the value to return if there is no translation
Source:
Returns:
a translation, like '¡Hola!'
Type
string

throttle(func, wait, leadingopt, trailingopt) → {function}

`throttle` will rate limit a function call. This code is cribbed from https://github.com/jashkenas/underscore
Parameters:
Name Type Attributes Default Description
func function
wait int the minimum number of milliseconds between calls.
leading boolean <optional>
 true if true, the first call to the throttled function is immediately called.
trailing boolean <optional>
 true if true, once the wait time has passed the function is called.
Source:
Returns:
- the throttled function
Type
function
Example

Throttling rendering info

var count = 0 // This will be incremented in every animation frame
// We want to call this in every animation frame but only run it once a second (1000 ms)
const throttledDebug = throttle(() => { 
	console.log('Render count', count)
}, 1000)
// This is the function that is called in every animation frame
function render() {
	count += 1
	throttledDebug() // Called every frame but run only once a second
	window.requestAnimationFrame(render)
}
window.requestAnimationFrame(render)