Global

fetchOptions

Description:

• Global object to customize fetch and afetch

Source:

• fetch.js, line 10

Example

make POST default method

fetchOptions.method = "POST"
await afetch("url.com")

$(selector, docopt) → {null|HTMLElement}

Description:

• An alias to document.querySelector, doc can be an Element, empty or non-string selectors will return null

Source:

• dom.js, line 25

Parameters:

Returns:

Example

var el = app.$("#div")

$all(selector, docopt) → {null|Array.<HTMLElement>}

Description:

• An alias for document.querySelectorAll

Source:

• dom.js, line 38

Parameters:

Returns:

Example

Array.from(app.$all("input")).find((el) => !(el.readOnly || el.disabled || el.type == "hidden"));

$append(element, template, setupopt)

Description:

• Append nodes from the template to the given element, call optional setup callback for each node.

Source:

• dom.js, line 186

Parameters:

Example

app.$append(document, "<div>...</div>")

$attr(element, attr, valueopt) → {undefined|any}

Description:

• Return or set attribute by name from the given element.

Source:

• dom.js, line 90

Parameters:

Returns:

$data(element, levelopt) → {Proxy|undefined}

Description:

• Return component data instance for the given element or the main component if omitted. This is for debugging purposes or cases when calling some known method is required.

Source:

• render.js, line 51

Parameters:

Returns:

$elem(name, optionsopt)

Description:

• Create a DOM element with attributes, -name means style.name, .name means a property name, all other are attributes, functions are event listeners

Source:

• dom.js, line 131

Parameters:

Examples

$elem("div", "id", "123", "-display", "none", "._x-prop", "value", "click", () => {})

Similar to above but all properties and attributes are taken from an object, in this form options can be passed, at the moment only options for addEventListener are supported.

$elem("div", { id: "123", "-display": "none", "._x-prop": "value", click: () => {} }, { signal })

$empty(element, cleanupopt) → {HTMLElement}

Description:

• Remove all nodes from the given element, call the cleanup callback for each node if given

Source:

• dom.js, line 105

Parameters:

Returns:

$event(element, name, detailopt)

Description:

• Send a CustomEvent using DispatchEvent to the given element, true is set to composed, cancelable and bubbles properties.

Source:

• dom.js, line 49

Parameters:

$off(element, event, callback)

Description:

• An alias for element.removeEventListener

Source:

• dom.js, line 75

Parameters:

$on(element, event, callback)

Description:

• An alias for element.addEventListener

Source:

• dom.js, line 63

Parameters:

Example

app.$on(window, "popstate", () => { ... })

$param(name, dfltopt) → {string}

Description:

• Returns a query parameter value from the current document location

Source:

• dom.js, line 10

Parameters:

Returns:

$parse(html, formatopt)

Description:

• A shortcut to DOMParser, default is to return the .body.

Source:

• dom.js, line 172

Parameters:

Example

document.append(...$parse("<div>...</div>"), 'list'))

$ready(callback)

Description:

• Run callback once the document is loaded and ready, it uses setTimeout to schedule callbacks

Source:

• dom.js, line 222

Parameters:

Example

app.$ready(() => {

})

__(…args) → {string}

Description:

• Empty locale translator

Source:

• app.js, line 93

Parameters:

Returns:

(async) afetch(url, optionsopt)

Description:

• Promisified fetch which returns a Promise, all exceptions are passed to the reject handler, no need to use try..catch Return everything in an object { ok, status, err, data, info }.

Source:

• fetch.js, line 149

Parameters:

Example

const { err, data } = await afetch("https://localhost:8000")

const { ok, err, status, data } = await afetch("https://localhost:8000")
if (!ok) console.log(status, err);

call(obj, methodopt)

Description:

• Call a function safely with context and arguments:

Source:

• app.js, line 159

Parameters:

Example

app.call(func,..)
app.call(obj, func, ...)
app.call(obj, method, ...)

emit(event, …args)

Description:

• Send an event to all listeners at once, one by one.

  If the event ends with :* it means notify all listeners that match the beginning of the given pattern, for example:

Source:

• events.js, line 82

Parameters:

Example

notify topic:event1, topic:event2, ...

app.emit("topic:*",....)

escape(str) → {string}

Description:

• Convert common special symbols into xml entities

Source:

• app.js, line 174

Parameters:

Returns:

fetch(url, optionsopt, callbackopt)

Description:

• Fetch remote content, wrapper around Fetch API

  NOTE: Saves X-CSRF-Token header and sends it back with subsequent requests

Source:

• fetch.js, line 96

Parameters:

Example

fetch("http://api.host.com/user/123", (err, data, info) => {
   if (info.status == 200) console.log(data, info);
});

forEach(list, iterator, callback, direct)

Description:

• Apply an iterator function to each item in an array in parallel. Execute a callback when all items have been completed or immediately if there is an error provided.

Source:

• lib.js, line 94

Parameters:

Example

forEach([ 1, 2, 3 ], function (i, next) {
  console.log(i);
  next();
}, (err) => {
  console.log('done');
});

forEachSeries(list, iterator, callbackopt, directopt)

Description:

• Apply an iterator function to each item in an array serially. Execute a callback when all items have been completed or immediately if there is is an error provided.

Source:

• lib.js, line 33

Parameters:

Example

forEachSeries([ 1, 2, 3 ], function (i, next, data) {
   console.log(i, data);
   next(null, data);
}, (err, data) => {
   console.log('done', data);
});

hideAlert(container, optionsopt)

Description:

• Hide active Bootstrap alert

Source:

• bootstrap.js, line 61

Parameters:

hideToast()

Description:

• Hide active toasts inside first .toast-container

Source:

• bootstrap.js, line 135

isArray(val) → {any|Array.<any>}

Description:

• Returns the array if the value is non empty array or dflt value if given or undefined

Source:

• app.js, line 100

Parameters:

Returns:

isElement(element) → {HTMLElement|undefined}

Description:

• Returns the element itself if it is a HTMLElement

Source:

• app.js, line 136

Parameters:

Returns:

isFlag(list, item) → {boolean}

Source:

• lib.js, line 12

Parameters:

Returns:

isFunction(callback) → {function|undefined}

Description:

• Returns the callback is it is a function

Source:

• app.js, line 122

Parameters:

Returns:

isNumber(num) → {number|undefined}

Description:

• Returns the num itself if it is a number

Source:

• app.js, line 107

Parameters:

Returns:

isObject(obj) → {object|undefined}

Description:

• Returns the obj itself if it is a not null object

Source:

• app.js, line 129

Parameters:

Returns:

isString(str) → {string}

Description:

• Returns the str itself if it is not empty or ""

Source:

• app.js, line 114

Parameters:

Returns:

loadResources(urls, optionsopt)

Description:

• Inject CSS/Script resources into the current page, all urls are loaded at the same time by default.

Source:

• lib.js, line 426

Parameters:

log()

Description:

• Alias to console.log

Source:

• app.js, line 86

noop()

Description:

• Empty function

Source:

• app.js, line 75

off(event|namespace, callbackopt)

Description:

• Remove all event listeners for the event name and exact callback or namespace

Source:

• events.js, line 59

Parameters:

Example

app.on("component:*", (ev) => { ... }, "myapp")
...
app.off("myapp")

on(event, callback, namespaceopt)

Description:

• Listen on event, the callback is called synchronously, optional namespace allows deleting callbacks later easier by not providing exact function by just namespace.

Source:

• events.js, line 12

Parameters:

once(event, callback, namespaceopt)

Description:

• Listen on event, the callback is called only once

Source:

• events.js, line 25

Parameters:

only(event, callback, namespaceopt)

Description:

• Remove all current listeners for the given event, if a callback is given make it the only listener.

Source:

• events.js, line 41

Parameters:

parallel(tasks, callbackopt, directopt)

Description:

• Execute a list of functions in parallel and execute a callback upon completion or occurance of an error. Each function will be passed a callback to signal completion. The callback accepts an error for the first argument. The iterator and callback will be called via setImmediate function to allow the main loop to process I/O unless the direct argument is true

Source:

• lib.js, line 122

Parameters:

parsePath(path) → {Object}

Description:

• Parses component path and returns an object with at least { name, params } ready for rendering. External urls are ignored.

  Passing an object will retun a shallow copy of it with name and params properties possibly set if not provided.

  The path can be:

  • component name
  • relative path: name/param1/param2/param3/....
  • absolute path: /app/name/param1/param2/...
  • URL: https://host/app/name/param1/...

  All parts from the path and query parameters will be placed in the params object.

  The .html extention will be stripped to support extrernal loading but other exts will be kept as is.

Source:

• router.js, line 25

Parameters:

Returns:

register(name, options, render, cleanup, data)

Description:

• Register a render plugin, at least 2 functions must be defined in the options object:

Source:

• render.js, line 26

Parameters:

render(options, dfltopt) → {object|undefined}

Description:

• Show a component, options can be a string to be parsed by parsePath or an object with { name, params } properties. if no params.$target provided a component will be shown inside the main element defined by $target.

  It returns the resolved component as described in resolve method after rendering or nothing if nothing was shown.

  When showing main app the current component is asked to be deleted first by sending an event prepare:delete, a component that is not ready to be deleted yet must set the property event.stop in the event handler onPrepareDelete(event) in order to prevent rendering new component.

  To explicitly disable history pass options.$nohistory or params.$nohistory otherwise main components are saved automatically by sending the path:save event.

  A component can globally disable history by creating a static property $nohistory in the class definition.

  To disable history all together set app.$nohistory = true.

Source:

• render.js, line 137

Parameters:

Returns:

resolve(path, dfltopt) → {object}

Description:

• Returns an object with template and component properties.

  Calls parsePath first to resolve component name and params.

  Passing an object with 'template' set will reuse it, for case when template is already resolved.

  The template property is set as:

  • try app.templates[.name]
  • try an element with ID name and use innerHTML
  • if not found and dflt is given try the same with it
  • if template texts starts with # it means it is a reference to another element's innerHTML, otemplate is set with the original template before replacing the template property
  • if template text starts with $ it means it is a reference to another template in app.templates, otemplate is set with the original template before replacing the template property

  The component property is set as:

  • try app.components[.name]
  • try app.components[dflt]
  • if resolved to a function return
  • if resolved to a string it refers to another component, try app.templates[component], ocomponent is set with the original component string before replacing the component property

  if the component property is empty then this component is HTML template.

Source:

• render.js, line 89

Parameters:

Returns:

restorePath(path)

Description:

• Show a component by path, it is called on path:restore event by default from start and is used to show first component on initial page load. If the path is not recognized or no component is found then the default index component is shown.

Source:

• router.js, line 96

Parameters:

sanitizer(html, list) → {Array.<Node>|string}

Description:

• HTML sanitizer, based on Bootstrap internal sanitizer

Source:

• lib.js, line 516

Parameters:

Returns:

savePath(options)

Description:

• Saves the given component in the history as ** /name/param1/param2/param3/.. **

  It is called on every component:create event for main components as a microtask, meaning immediate callbacks have a chance to modify the behaviour.

Source:

• router.js, line 74

Parameters:

sendFile(url, options, callbackopt)

Description:

• Send file(s) and forms

Source:

• lib.js, line 455

Parameters:

series(tasks, callbackopt, directopt)

Description:

• Execute a list of functions serially and execute a callback upon completion or occurance of an error. Each function will be passed a callback to signal completion. The callback accepts either an error for the first argument in which case the flow will be aborted and the final callback will be called immediately or some optional data to be passed to thr next iterator function as a second argument.

  The iterator and callback will be called via setImmediate function to allow the main loop to process I/O unless the direct argument is true

Source:

• lib.js, line 72

Parameters:

Example

series([
   function(next) {
       next(null, "data");
   },
   function(next, data) {
      setTimeout(function () { next(null, data); }, 100);
   },
], (err, data) => {
   console.log(err, data);
});

showAlert(containeropt, type, text, optionsopt)

Description:

• Show Bootstrap alert

Source:

• bootstrap.js, line 22

Parameters:

showToast(containeropt, type, text, optionsopt)

Source:

• bootstrap.js, line 75

Parameters:

split(str, sepopt, optionsopt) → {Array.<string>}

Description:

• Split string into array, ignore empty items by default

Source:

• lib.js, line 335

Parameters:

Returns:

start()

Description:

• Setup default handlers:

  • on path:restore event call restorePath to render a component from the history
  • on path:save call savePath to save the current component in the history
  • on page ready call restorePath to render the initial page

  If not called then no browser history will not be handled, up to the app to do it some other way.. One good reason is to create your own handlers to build different path and then save/restore.

Source:

• router.js, line 111

stylePlugin(callback)

Description:

• Add a callback to process classes for new components, all registered callbacks will be called on component:create event with top HTMLElement as parameter. This is for UI frameworks intergation to apply logic to added elements

Source:

• render.js, line 189

Parameters:

Example

app.stylePlugin((el) => {
    app.$all(".carousel", element).forEach(el => (bootstrap.Carousel.getOrCreateInstance(el)));
})

toCamel(str) → {string}

Description:

• Convert a string into camelized format

Source:

• app.js, line 143

Parameters:

Returns:

toDate(val, dfltopt, invalidopt) → {Date}

Description:

• Return Date object for given text or numeric date representation, for invalid date returns 1969 unless invalid parameter is given, in this case invalid date returned as null. If dflt is NaN, null or 0 returns null as well.

Source:

• lib.js, line 135

Parameters:

Returns:

toDuration(mtime, ageopt) → {string}

Description:

• Return duration in human format, mtime is msecs

Source:

• lib.js, line 160

Parameters:

Returns:

toNumber(val, optionsopt) → {number}

Description:

• Safe convertion to a number, no expections, uses 0 instead of NaN, handle booleans, if float specified, returns as float.

Source:

• lib.js, line 251

Parameters:

Returns:

Example

toNumber("123")
123
toNumber("1.23", { float: 1, dflt: 0, min: 0, max: 2 })
1.23

toPrice(num, optionsopt)

Description:

• Return a test representation of a number according to the money formatting rules,

Source:

• lib.js, line 284

Parameters:

toSize(size, decimalsopt)

Description:

• Return size human readable format

Source:

• lib.js, line 207

Parameters:

toTitle(name, minlenopt) → {string}

Description:

• Convert text into capitalized words, if it is less or equal than minlen leave it as is

Source:

• lib.js, line 220

Parameters:

Returns:

trace(…args)

Description:

• if app.debug is set then it will log arguments in the console otherwise it is no-op

Source:

• app.js, line 81

Parameters: