Utils

Timer

The Timer class provides a means of registering time. You can create multiple timers to register multiple times.

Usage

<button onclick="timer.start()">Start</button>
<button onclick="timer.stop()">Stop</button>
<button onclick="timer.reset()">Reset</button>
<button onclick="console.log(timer.elapsed)">Display</button>

<script type="module">
    import { Timer } from './build/index.esm.js';
    window.timer = new Timer();
</script>

EventQueue

EventQueue provides a convenient means of synchronization of events from multiple sources.

It encapsulates asynchronous event publish/subscribe machinery which extracts events from the queue and dispatches them to registerd listeners by calling the callback method with the event data to be dispatched as argument.

Usage

<script type="module">
    import { EventQueue } from './build/index.esm.js';
    window.eventQueue = EventQueue; // make available outside of this module

    EventQueue.on('name', data => ... );
</script>

<button onclick="eventQueue.dispatch('name', 'data')"></button>

Filter

Filter provides a convenient means for filtering and sorting DOM elements.

contents

• Usage
• Arguments
• Methods

Usage

<div id="container">
    <div id="1" class="filterable blue" price=7>Blue 7</div>
    <div id="2" class="filterable green" price=5>Green 5</div>
    <div id="3" class="filterable yellow" price=6>Yellow 6</div>
</div>
<ion-label>Blue</ion-label>
<ion-checkbox onclick="this.checked ? filter.remove(this.value, 'color') : filter.add(this.value, {group: 'color' })" slot="end" value=".blue">
</ion-checkbox>
<skim-slider min=5 max=7></skim-slider>

<script type="module">
    import { Filter } from './build/index.esm.js';
    window.filter = new Filter(document.querySelectorAll('.filterable'));

    document.querySelector('skim-slider').addEventListener('update', ({ detail }) => {
        const [min, max] = detail;
        filter.add('[price]', { // query selector to filter on
            group: 'price', // optional, group for mutual exclusivity
            filter: filterable => { // optional, filtering logic
                const price = +filterable.getAttribute('price');
                return price >= +min && price <= +max
            }
        });
    });
</script>

Filter can also be used for sorting. The sorting method needs to return the following.

Value	Description
-1	Less then
0	Equal to
1	Greater then

<ion-button onclick="filter.sort(sortByPrice)">Sort</ion-button>

<script>
    function sortByPrice({dataset: {price: a}}, {dataset: {price: b}}) {
        return +a > +b ? 1 : +a < +b ? -1 : 0;
    }
</script>

Arguments

Argument	Description	Type
filterables	The elements to apply filtering on	NodeListOf

Methods

add(selector: string, options: { group: string, filter: Function}) => void

Returns

Type: void

remove(selector: string, group?: string) => void

Returns

Type: void

clear() => void

Returns

Type: void

currencyFormatter

The currency formatter provides a means of formatting currency values in a uniform way by preloading the returned formatting function.

Usage

<script type="module">
 import { currencyFormatter } from "/build/index.esm.js";
   
 const formatCurrencyIndian = currencyFormatter('id-ID', 'IDR', { maximumFractionDigits: 0 });
 formatCurrencyIndian(200000);   // returns: Rp 200.000
 </script>

Arguments

Argument	Description	Type	Default
locale	The language and region	string	nl-NL
currency	The currency to be used	string	EUR
options	minimumIntegerDigits, minimumFractionDigits or maximumFractionDigits	object

---

Built with StencilJS