Proxy-Js-UI

WebComponents based on proxy-js.

Table of Contents

• select-sheet
  • Constructor
  • Events
  • Example
  • Sample Image
• progress-bar
  • Example
  • Methods
  • Sample Image
• safe-background
  • Example
  • Methods
• toast-notification
  • Example
  • Methods

select-sheet

WebComponent displaying a set of options to select from.

Constructor

new SelectSheet({  
    title: 'Title'        //the title        - displayed in the sheets header
    items: [],            //array of objects - the items to provide selection from
                          //                 - the 'text' property will be displayed as the items representation
    cancel: 'CANCEL'      //                 - cancel button label
});

Events

//close - custom event
e.detail = 
{
    action: ''    // - close action 
                  // - 'select'  - closed by item selection
                  // - 'cancel'  - closed by cancel click
                  // - 'unfocus' - closed by loosing focus
    item: {}      // - selected item
}

Example

//usage example
import { SelectSheet } from '/lib/proxy-js-ui/select-sheet.js';

$shell.menu = {};
$shell.menu.sheet = async function (title, items) {
    const $bg = createSafeBg();     //HTML Element covering all site, providing safe background
    document.body.appendChild($bg);
    $bg.focus();
    
    const promise = new Promise((resolve, reject) => {
        const selectSheet = new SelectSheet({ title: title, cancel: 'CANCEL', items: items })

        $p.event.one(selectSheet, 'close', e => {
            if (document.body.querySelector('.busy-bg')) {
                $bg.parentElement.removeChild($bg);
            }

            resolve(e.detail);
        });

        $bg.appendChild(selectSheet);
    });

    return promise;
};

//----------------------------------------------------------------------------------------
//show sheet
$shell.menu.sheet('Sort By...', 
[   //selectable items
    { text: 'File Name - Ascending', sort: 'name', direction: 'asc' }, ..., ..., ...
])
.then(select => { 
    console.log(select);
    
    if (select.action != 'select') { //close action
        return;
    }

    //do something with -> select.item
});

Sample Image

progress-bar

Webcomponent displaying a progress bar, including title and current percentage.

Example

<progress-bar style="width: 450px; height: 14px;"/>

Methods

Method	Description
.setPercent(percent)	Sets the progress bar to fill percent width of the total length
.setProgress(current, max)	Calculates the percentage value of current from max and sets the progress bar to fill the corresponding width
.setTitle(title)	Sets title into the progress bar label

Sample Image

safe-background

Creates an (optionally blurred) background covering the entire site.

Example

<safe-background blur="true" z-Index="9999" />

Methods

Method	Description
getSafeElement()	Gets the element of the safe background, to add further elements to
.appendSheet(...sheets)	Include (registered) stylesheets with the component, e.g. to be used by elements appended to the safe element

toast-notification

Creates a notification on the bottom of the application, which is removed after a certain duration.

Example

$shell.toast = {};
$shell.toast.show = function (text, duration) {
    var $toast = document.createElement('toast-notification');
    document.body.appendChild($toast);
    $toast.show(text, duration);
};

Methods

Method	Description
show(text, duration)	Sets the notifications text displaying it for duration and handles removing it
remove()	Immediately removes the toast-notification without waiting the timeout

Sample Image