Useful Titanium+Alloy widget to handle notifications messages when app is in foreground.
JavaScript
Latest commit fe76c4f Nov 23, 2016 @kopiro kopiro committed on GitHub Merge pull request #24 from HazemKhaled/patch-1
New version

README.md

Ti.Notifications

Gitter

com.caffeinalab.titanium.notifications

Alloy Titanium widget to display an in-app notification.

The widget is a tiny view that comes from the top with a simple animation.

image

Cross Platform?

On iOS7+, the animation is managed by Ti.UI.iOS.Animator physics engine (Tweetbot style).

Installation

Via Gittio

gittio install com.caffeinalab.titanium.notifications

Via Github

Download the latest release and add in your config.json, under dependencies:

"dependencies": {
    "com.caffeinalab.titanium.notifications": "*"
}

Require

var Notifier = Alloy.createWidget('com.caffeinalab.titanium.notifications', /* options */);

The Options

{

    message: 'Notification Test', // the message to display.

    duration: 2000, // time after go away. Valid for iOS7+ and Android
    icon: '/appicon.png', // icon to display on the left

    style: 'info', // 'info', 'success', 'error', 'warn',  notification background blue, green, red or amber.

    elasticity: 0.5, // iOS7+ only
    pushForce: 30, // iOS7+ only
    usePhysicsEngine: true, // disable if you don't want on iOS7+

    animationDuration: 200, // animation sliding duration

}

Usage

// Show the widget setting the title
Notifier.show('Hello, world!');

// Show the widget, and override defaults
Notifier.show({
    message: 'Notification Test',
    icon: '/appicon.png',
    pushForce: 10,
    style: 'info', // sets the message background to blue (50% opacity)
    duration: 2500,
    onClick: function(){ alert("OH, you clicked me!\nDo you think I'm weird?"); }
});

// Update the notification text. Useful for loading %
Notifier.setMessage('I updated the notifcation message!');

// Update the notification style. Useful for error and success messages
Notifier.setStyle('error');

// Update the icon to a new one
Notifier.setIcon('/newicon.png');

// Hide
Notifier.hide();

Loading Notification Example (With styling)

var Notifier = Alloy.createWidget('com.caffeinalab.titanium.notifications', { duration: null });
Notifier.show('Loading');

// 50MB test file from thinkbroadband to simulate a slow load.
var url = "http://ipv4.download.thinkbroadband.com:8080/50MB.zip";
var client = Ti.Network.createHTTPClient({
    // function called when the response data is available
    onload : function(e) {
        Notifier.setStyle('success');
        Notifier.setMessage('Successful Download!');
        setTimeout(Notifier.hide, 3000);
        },
        // function called at regular intervals as the request data is being received.
        ondatastream : function(e) {
            Notifier.setMessage('Loading ' + Math.round(e.progress.toFixed(2)*100) + '%');
        },
        // function called when an error occurs, including a timeout
        onerror : function(e) {
            Ti.API.debug(e.error);
            Notifier.setStyle('error');
            Notifier.setMessage('Error, Please try again.');
            setTimeout(Notifier.hide, 3000);
        },
        timeout: 5000
});
client.open("GET", url);
client.send();

Fully stylable via TSS

Override this options in your app.tss.

".caffeinaToastView":{
    "top": 0,
    "backgroundColor": "#A000",
    "height": 65,
    "touchEnabled": false
},
".caffeinaToastIcon":{
    "left": 8,
    "height": 42
},
".caffeinaToastLabel":{
    "touchEnabled": false,
    "left": 60,
    "right": 10,
    "height": 60,
    "color": "#fff",
    "textAlign": "left",
    "font": {
        "fontSize": 14
    }
}

Work with Android or iOS modal Windows

On Android is not possible to make it work with Windows.

On iOS, with modal Windows, in not possible to open a non-modal window in front of another modal window.

So, to make it work with theese two cases, use the view property on open:

Notifier.show({
    view: /* Your Window/View */
});

Contributing

How to get involved:

  1. Star the project!
  2. Answer questions that come through GitHub issues
  3. Report a bug that you find

Pull requests are highly appreciated.

Solve a problem. Features are great, but even better is cleaning-up and fixing issues in the code that you discover.

Copyright and license

Copyright 2015 Caffeina srl under the MIT license.