Code Monkey home page Code Monkey logo

ti.notifications's Introduction

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

	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,
	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 icon to a new one
Notifier.setIcon('/newicon.png');

// Hide
Notifier.hide();

Loading Notification Example

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.setMessage('Success!');
         	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.setMessage('Error, Please try again.');
     	},
     	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 2014 Caffeina srl under the MIT license.

ti.notifications's People

Contributors

kopiro avatar adamkearsley avatar apzentral avatar gitter-badger avatar

Watchers

Vijay Vavdiya avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.