Notifications

The viewer.notify(opts) function shows a notification dizmo along the right edge starting from the top and automatically choosing a free slot to position the next notification dizmo.

The opts parameter contains the options the dizmo will be instantiated with; all but title are optional:

title: a required string for first line of the notification; HTML markup is allowed. Maximum length is 21 characters.
button_1: a string denoting the name of the right hand side upper button; if not set then not corresponding button is shown.
button_2: a string denoting the name of the right hand side lower button; if not set then not corresponding button is shown.
callback: a function to be invoked with a message string as a parameter indicating either click, timeout, ignore or one of the button names (in lower cases), or button-1 and button-2; the second parameter is a custom defined data object; further, the this scope of the function is the notification invoking the callback.
color: a string hex code to color the frame of the notification.
closable: a boolean flag to enable auto-close when the upper button is clicked; default is undefined. If set and the button_1 is not set, then the latter is set to Close.
data: an object with custom data, which is provided as an argument with the callback.
icon: a string URL or relative path to an icon; by default the image at assets/Icon.svg of the notifying dizmo is chosen.
notification_id: a string identifying an existing notification dizmo to refresh. This identifier can be accessed inside the callback as this.identifier.
opacity: a number between 0.0 and 1.0 to set the opacity.
sub_title: a string denoting the second line of the notification; HTML markup is allowed. Maximum length is 32 characters.
text: a string denoting the third line of the notification; HTML markup is allowed. Maximum length is 32 characters.
timeout: a number in milli-seconds to auto-close the notification dizmo; if it is set to null then the timeout is disabled.
path: a string denoting an internal path to be used to communicate between the notifying and notification dizmos: the default is notification.
important: a boolean causing the notification dizmo to be displayed with a red background color.

Simple example

    viewer.notify({title:"Good morning!"});

Full example

    viewer.notify({
        button_1: 'Close',
        button_2: 'Reply',
        title: 'My Contact',
        sub_title: 'RE: Last Email',
        text: 'Oh, this is brilliant&mdash;how soon can we get this working?',
        color: '#afafaf', 
        opacity: 0.8,
        data: {"foo":"bar"},

        callback: function (message,data) {

            switch (message) {
                case 'click':
                    console.debug('from', this.identifier, '=>', 'click', "data =>", data);
                    break;
                case 'timeout':
                    console.debug('from', this.identifier, '=>', 'timeout', "data =>", data);
                    break;
                case 'reply':
                    console.debug('from', this.identifier, '=>', 'reply', "data =>", data);
                    break;
                case 'close':
                    console.debug('from', this.identifier, '=>', 'close', "data =>", data);
                    this.publicStorage.setProperty('close', true);
                    break;
                default:
                    console.debug('from', this.identifier, '=>', message, "data =>", data);
            }
        },

        timeout: 5000
    });

Custom image

By default, Icon.svg in the assets folder of the notifying dizmo is used as the image for the notification. If you want to use your own, copy it into the assets folder of your dizmo, and then add the icon option:

    viewer.notify({title:"Threshold reached","icon":"assets/warning-triangle.svg"});