Global

BootpopupElement

Description:

• Configuration object for a single element in a Bootpopup form/layout.

  “Special element properties” are parsed by Bootpopup to create DOM, apply Bootstrap classes, add labels/groups, input-group addons, validation feedback, etc.

Source:

• bootpopup.js, line 10

Properties:

Type:

• Object

BootpopupOptions

Description:

• Bootpopup creation options.

Source:

• bootpopup.js, line 58

Properties:

Type:

• Object

fetchOptions

Description:

• Global object to customize fetch

Source:

• fetch.js, line 10

Example

make POST default method

fetchOptions.method = "POST"
await fetch("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 94

Parameters:

Returns:

bootpopup() → {Bootpopup}

Description:

• Create an instance of Bootpoup class and show it

Source:

• bootpopup.js, line 370

Parameters:

Returns:

     bootpopup({
       ...
       buttons: ["cancel", "Order"],
       Order: (data) => {
           ...
       }
     }

bootpopup({
  buttons:["ok","cancel"],
  text_ok: "Submit",
})

{ p: {class: "bold", text: "Insert data:"}}

<p class="bold">Insert data:</p>

{ input: {type: "text", label: "Title", name: "title", placeholder: "Description" }}

<div class="form-group mb-3">
  <label for="title" class="col-form-label col-sm-4">Title</label>
  <div class="col-sm-10">
    <input label="Title" name="title" id="title" placeholder="Description" class="form-control" type="text">
  </div>
</div>

{ text: {label: "Title", name: "title", placeholder: "Description" }}

 - an object where the key is used as value by the input and the value is the text displayed
 - a list of objects with { label:, value:, name: } properties

{ select: { label: "Select", name: "select", options: { a:"A", b:"B", c:"C" }}}
{ radios: { label: "Radios", name: "radios", options: { a:"A", b:"B", c:"C" }}}
{ checkboxes: { label: "Checkboxes", options: [ { name: "c1", label: "A" }, { name: "c2", label: "C", value: 2 } ]}}

{ button: {name: "button", value: "Open image", class: "btn btn-info", click: (event) => {
    console.log(event);
    bootpopup.alert("Hi there");
}}}

'<p class="lead">Popup dialog boxes for Bootstrap.</p>'

bootpopup.alert("Hi there");

bootpopup.confirm("Do you confirm this message?", (yes) => {
  alert(yes);
});

bootpopup.prompt("Name", (value) => {
  alert(value);
});

bootpopup({
   title: "Add image",
    content: [
        '<p class="lead">Add an image</p>',
        { p: {text: "Insert image info here:"}},
        { input: {type: "text", label: "Title", name: "title", placeholder: "Description for image"}},
        { input: {type: "text", label: "Link", name: "link", placeholder: "Hyperlink for image"}}],
    buttons: ["ok", "cancel"],
    cancel: () => { alert("Cancel") },
    ok: (data, list) => { console.log(data, list) },
    complete: () => { alert("complete") },
});

### Validation:

```javascript
var popup = bootpopup({
  title: "Add details",
  alert: 1,
  content: [
      { text: { label: "Name", name: "title", placeholder: "your name"}},
      { number: { label: "Age", name: "age", placeholder: "your age"}}],
  buttons: ["ok", "cancel"],
  text_ok: "Verify",
  ok: (data) => {
      if (!data.name) return popup.showAlert("name is required")
  },
});

call(obj, methodopt)

Description:

• Call a function safely with context and arguments:

Source:

• app.js, line 217

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 232

Parameters:

Returns:

(async) 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 101

Parameters:

Example

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

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

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

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 95

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 34

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 101

Parameters:

Returns:

isElement(element) → {HTMLElement|undefined}

Description:

• Returns the element itself if it is a HTMLElement

Source:

• app.js, line 137

Parameters:

Returns:

isFlag(list, item) → {boolean}

Source:

• lib.js, line 13

Parameters:

Returns:

isFunction(callback) → {function|undefined}

Description:

• Returns the callback is it is a function

Source:

• app.js, line 123

Parameters:

Returns:

isNumber(num) → {number|undefined}

Description:

• Returns the num itself if it is a number

Source:

• app.js, line 108

Parameters:

Returns:

isObject(obj) → {object|undefined}

Description:

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

Source:

• app.js, line 130

Parameters:

Returns:

isString(str) → {string}

Description:

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

Source:

• app.js, line 115

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 373

Parameters:

log()

Description:

• Alias to console.log

Source:

• app.js, line 87

noop()

Description:

• Empty function

Source:

• app.js, line 76

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 123

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 464

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:

(async) sendFile(url, options, callbackopt)

Description:

• Send file(s) and forms, a wrapper around fetch

Source:

• lib.js, line 403

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 73

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 282

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 144

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 136

Parameters:

Returns:

toDuration(mtime, ageopt) → {string}

Description:

• Return duration in human format, mtime is msecs

Source:

• lib.js, line 161

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:

• app.js, line 171

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 231

Parameters:

toSize(size, decimalsopt)

Description:

• Return size human readable format

Source:

• lib.js, line 208

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 221

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 82

Parameters: