caffeinalab / ti.notifications

Useful Titanium+Alloy widget to handle notifications messages when app is in foreground.

Ti.Notifications

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.

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.

ti.notifications's Issues

Change position of notifications

support to show notifications at the bottom of window
thanks you :)

Adding Close Event.

What do you think about adding the close callback to be called when notification is completely closed?
Thank you.

On Android Working as a toast only !

HI,

Hope you are doing great!!

I have tried this widget and found on android its not working as expected. Its working as a toast only.

Please provide me the steps to make it work for android. Any help will be appreciated.

Regards,

If I call the widget inside a commonjs without view how can I change the backgroundColor?

Like.

lib/functions.js

var Notifier = Alloy.createWidget('com.caffeinalab.titanium.notifications');

Notifier.show();

Click events on modal windows don't work?

Hi.
Firstly... great widget!

Having an issue with the click events on modal windows.

alloy.js

Alloy.Globals.notify = Alloy.createWidget('com.caffeinalab.titanium.notifications');

payment.js

Alloy.Globals.notify.show({
     message: 'Sending Payment',
     pushForce: 20,
     duration: 60000,
     click: function(){ alert("OH, you clicked me!\nDo you think I'm weird?"); },
     view: $.payment
});
setTimeout(function(){
     Alloy.Globals.notify.hide();
}, 5000);

When i click on the notification it just closes.
I don't get the alert as expected.

Can we have example for Ti Classic

This is not an issue. This is request.

Please provide Ti Classic example.

Hide

I'm missing an Notifier.hide function :)

Support for x86_64

SORRY MY MISTAKE

iOS9 reference to app icon broken

iOS9 no longer allows you to reference "appicon.png". I tried editing the reference in .xml file but nothing I do seems to work.

Style rules not being overwritten

I can't seem to overwrite the styles on a modal window.

app.tss

".caffeinaToastView":{
    top: 0,
    backgroundColor: '#50e97c00',
    height: 75,
    touchEnabled: false,
    layout: 'composite'
},
".caffeinaToastIcon":{
    left: 8,
    height: 42,
    borderRadius: 10
},
".caffeinaToastLabel":{
    touchEnabled: false,
    height: 60,
    color: '#fff',
    textAlign: 'center',
    font: {
        fontSize: 22
    }
}

mywin.js

var notify = Alloy.createWidget('com.caffeinalab.titanium.notifications');
setTimeout(function(){
    notify.show({
        icon: '',
        message: 'Sending Payment',
        pushForce: 20,
        duration: 60000,
        click: function(){ alert("OH, you clicked me!\nDo you think I'm weird?"); },
        view: $.payment
    });
    setTimeout(function(){
        notify.hide();
    }, 5000);
}, 1000);

Notification is still the default color and my color changes in app.tss haven't taken effect.

Which license is this?

README.md says MIT but LICENSE file includes Apache 2.0

Example like CWStatusBarNotification

I like this one, let's add missing featuers:
https://github.com/cezarywojcik/CWStatusBarNotification

• Status bar or NavigarionBar style notifications
• Default color is app Tint color for iOS and Theme Primary color, can be set globally or from class
• From and to transitions

Show over modal window?

Theres probably a good explanation - but is it not possible to use this when calling it from a modal window?

Doing this: Alloy.createController('myController').getView().open({modal: true});

The notification is shown behind the modal window.

Notifier.show looses focus on Textfield in window

I wonder if that has been experienced by other developers, but imagine a window with text fields.
When a user has focus on a textfield, on return, a Notifier is shown, after the animation finishes, the keyboard looses focus on the textfield.

Multiple push notifications

I want to use this as part of push notifications, if the push notifications are stacked, the banner only shows the last push notification one. How can I use the module to handle this better?