smf-dialog v1.0.1

 ____                       _    __                      _       
/ ___| _ __ ___   __ _ _ __| |_ / _| __ _  ___ ___      (_) ___  
\___ \| '_ ` _ \ / _` | '__| __| |_ / _` |/ __/ _ \     | |/ _ \ 
 ___) | | | | | | (_| | |  | |_|  _| (_| | (_|  __/  _  | | (_) |
|____/|_| |_| |_|\__,_|_|   \__|_|  \__,_|\___\___| (_) |_|\___/ 
-----------------------------------------------------------------

Dialog

This library is a Smartface library. It is intended to display an dialog alike container that blocks interaction except it self.

Install

npm i smf-dialog

Smartface

If you are within a Smartface workspace first switch to scripts folder. Here is a script that does it all:

(cd ~/workspace/scripts && npm i smf-dialog)

Usage

This library provides a Dialog constructor and a static wait dialog.

• Dialog class/constructor can be used to create new Dialog's.
• Dialog.showWait & Dialog.removeWait is used to display/hide wait dialog

It is both possible to use require or include or load functions to run this library.

Examples

In every example below it is assumed to this library has been running using following code:

var Dialog = require("smf-dialog");

Wait dialog

//start network activity
Dialog.showWait();

//when activity completes
Dialog.removeWait();

Dialog basics

var d = new Dialog();

var lbl = new SMF.UI.Label();
d.overlay.add(lbl);


//to show the dialog:
d.show();


//to hide the dialog:
d.hide();


//it is possible to show it on another page:
d.show(Pages.page2);
Pages.page2.show();
//it cannot be shown on two pages. Showing it on another page, removes it from the earlier page:
Pages.back();
d.show();
Pages.page2.show();

Dialog background

When dialog is created the background of it can be customized by the following ways:

var d = new Dialog({ //passes the defaults for background rectangle constructor
    background: {
        alpha: 0.2,
        width: "70%",
        height: "40%",
        left: "15%",
        top: "30%"
    }
});

d.background //gives you to access to the rectangle object

Dialog overlay container

All child objects of the dialog should be added to overlay container of the dialog. By default it has size defaults as:

• top: "15%"
• left: "30%"
• height: "70%"
• width: "40%"

var d = new Dialog({ //passes the defaults for overlay container constructor
    overlay: { //makes the whole overlay as fullscreen
        width: "100%",
        height: "100%",
        left: 0
        top: 0,
        onShow: function(e) {
            //add your onShow logic for the dialog
        }
    }
});

d.overlay //gives you to access to the overlay container object