Useful Titanium+Alloy widget to handle notifications messages when app is in foreground.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 2 commits behind caffeinalab:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
controllers
styles
views
LICENSE
README.md
widget.json

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.