Skip to content

Commit

Permalink
Merge pull request #18 from invertase/development
Browse files Browse the repository at this point in the history 
Angular Toasty 1.0.0
  • Loading branch information
@Ehesp
Ehesp committed Aug 4, 2015
2 parents 776b087 + 7a32061 commit 46a9dd3
Show file tree
Hide file tree
Showing 33 changed files with 2,305 additions and 696 deletions.
7 changes: 3 additions & 4 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
node_modules
components
bower_components

# IntelliJ
.idea/
*.iml
*.iml
*.log
.DS_Store
28 changes: 28 additions & 0 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
Contributing
=================

We welcome any features/ideas you might have to make angular-toasty even more awesome. If you have an idea you'd like to see implemented, but are unable to assist us by coding this yourself, feel free to make an issue at https://github.com/invertase/angular-toasty/issues!

If you'd like to help code an features/idea yourself, please follow:

#### Requirements

You must have [Node JS](https://nodejs.org/) installed, along with [NPM](https://www.npmjs.com/).
Once these are installed, install the following global NPM modules:

```
sudo npm install -g bower gulp
```

#### Pull-Requests

To create a pull request, please [fork](https://help.github.com/articles/fork-a-repo/) the **development branch** repo! Once done, create a [new branch](https://github.com/Kunena/Kunena-Forum/wiki/Create-a-new-branch-with-git-and-manage-branches). If possible, call the branch name something related to your pull request.

To ensure your feature is visible to the public, we ask you include it in the functionality of our examples.

#### Developing

When making changes, please ensure these are all done within the `src` directory. To build changes, simply run `gulp`.
Once you're happy, run the `gulp --production` command to build your files into the `dist` directory.

Please ensure your feature has an example, which can be added into the `example` directory.
2 changes: 1 addition & 1 deletion LICENSE
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2013 Salakar
Copyright (c) 2015 Invertase

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
Expand Down
272 changes: 156 additions & 116 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,171 @@
Angular Toasty
=================
[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/Salakar/angular-toasty?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
**Angular Toasty** is a simple standalone AngularJS module with extensive features that provides growl-style alerts and messages for your app.

**Angular Toasty** is a angularjs module that provides growl-style alerts and messages for your angular app with extensive features.
#### Demo

Latest release requires AngularJS v1.2.20 or higher and angular-animate for the CSS3 transformations.
[Check it out!](http://invertase.github.io/angular-toasty/example/)

Demo: http://salakar.github.io/angular-toasty/toasty-sample/

This module is based on **AngularJS-Toaster** by Jirikavi.
#### Current Features
* 3 Themes (Default, Material Design & Bootstrap 3)
* Global/Individual timeouts
* Shaking Toasts
* Toaster sound
* onAdd, onRemove & onClick event handlers
* Event broadcasting
* Positioning
* HTML allowed

#### Installation
###### Install from Bower:

```HTML
bower install angular-toasty
```
###### Add dependancies to HTML (AngularJS required)

#### Current Version 0.1.8
![alt tag](http://i.imgur.com/p12dgjE.png)
```HTML
<link href="./bower_components/angular-toasty/css/angular-toasty.min.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="./bower_components/angular-toasty/js/angular-toasty.min.js"></script>
```

###### Add the toasty module to your Angular app:

#### Current Features
* onClick, onAdd, onRemove event handlers.
* show / hide close button. (showClose)
* enable / disable click to close. (clickToClose)
* success, wait, info, warning & error toast types.
* adjust timeouts.
* toast sounds (optional toggle)
* toast position. (bottom-right as default)
* toast add to top/bottom of current toasts.

#### Planned Features
* Toast shaking via css.
* Toast sizes.

I've yet to do the documentation, so please see sample app for several usage examples.

#### Example controller using Toasty:
JS:
```javascript
angular.module('main', ['ngAnimate', 'toasty'])
.controller('myController', function($scope, toasty, $timeout, $window) {

$scope.pop = function() {
toasty.pop.success({
title: "Success!",
msg: 'Click to change me.',
timeout: 0,
showClose: false,
myData: 'Testing 1 2 3', // Strings, integers, objects etc.
onClick: function(toasty) {
toasty.title = 'Well done!';
toasty.msg = 'Closing in 5 seconds.';
toasty.timeout = 5000;
//console.log(toasty.myData);
//toasty.remove();
//toasty.removeAll();
},
onAdd: function(toasty) {
console.log(toasty.id + ' has been added!');
},
onRemove: function(toasty) {
console.log(toasty.id + ' has been removed!');
}
});

toasty.pop.warning({
title: 'Warning!',
msg: 'Click to close me.',
showClose: false,
clickToClose: true,
timeout: 0,
});

toasty.pop.wait({
title: 'Please Wait',
msg: 'I\'ll change after 5 seconds.',
timeout: 0,
clickToClose: false,
showClose: false,
onAdd: function(toasty) {

var doSuccess = function() {
toasty.title = 'Success';
toasty.msg = 'Loading finished!';
toasty.setType('success');
toasty.showClose = true;
}

$timeout(doSuccess, 5000);
},
});

toasty.pop.error({
title: 'Error!',
msg: 'Click the remove icon to get rid of me.',
timeout: 0,
showClose: true,
clickToClose: false,
});

toasty.pop.info({
title: 'Info',
msg: 'I\'ll just stay here forever.',
timeout: 0,
showClose: false,
clickToClose: false,
});

};

// Remove all toasties
$scope.clear = function() {
toasty.clear()
};

});
angular.module('app', ['angular-toasty']);
```
HTML:

###### Add the toasty directive:

```HTML
<div ng-controller="myController">
<div>
<button class="btn btn-primary" style="margin: 150px 0 0 150px;" ng-click="pop()">Show toasts</button>
<br />
<button class="btn btn-danger" style="margin: 10px 0 0 150px;" ng-click="clear()">Clear toasts</button>
</div>
</div>

<!-- Toasty controller, add this to your index page / default template -->
<div ng-controller="toasty-controller">
<toasty-container toasty-defaults='{"timeout": 3000, "close-button":true}'></toasty-container>
</div>
<toasty></toasty>
</body>
</html>
```

###### Inject and use the toasty service in your controllers:

```javascript
angular.module('app').controller('UserCtrl', ['$scope', 'toasty', function($scope, toasty) {
$scope.addUser = function(user) {
// ...
// Add user
// ...
toasty.success({
title: 'User added!',
msg: user.firstName + ' has been added!'
});
}]);
```
> Each toast must have at least a title or message.
#### Configuration
The default toasty config:
```
* limit: 5, // {int} Maximum number of toasties to show at once
showClose: true, // {bool} Whether to show the 'X' icon to close the toasty
clickToClose: false, // {bool} Whether clicking the toasty closes it
* position: 'bottom-right', // {string:bottom-right,bottom-left,top-right,top-left} The window position where the toast pops up
timeout: 5000, // {int} How long (in miliseconds) the toasty shows before it's removed. Set to false to disable.
sound: true, // {bool} Whether to play a sound when a toast is added
html: false, // {bool} Whether HTML is allowed in toasts
shake: false, // {bool} Whether to shake the toasts
theme: 'default' // {string} What theme to use; default, material or bootstrap
```
> Config items marked with * cannot be overridden at an individual level
##### Global Overrides
To globally override the above config, simply inject the toastyProvider into your app at config:
```javascript
angular.module('app').config(['toastyConfigProvider', function(toastyConfigProvider) {
toastyConfigProvider.setConfig({
sound: false,
shake: true
});
}]);
```
> You can also get the global config at any time by calling `toasty.getGlobalConfig()`!
##### Individual Overrides
To override the global config for individual toasts, simply pass them into the creation object:
```javascript
toasty({
title: 'Ping!',
msg: '<a href="http://google.com">Take me to Google!</a>',
showClose: false,
clickToClose: true,
timeout: 10000,
sound: false,
html: true,
shake: true,
theme: 'bootstrap'
});
```
#### Features
##### Clearing/Removing
You can easily clear/remove a toast from the view by calling the `clear` method. To remove all at once, just call the method with no ID.
```
toasty.clear(); // Clear all
toasty.clear(id); // Remove a single toast by it's ID
```
##### Toast Types
There's multiple types of toast to use:
```javascript
toasty(); // Default
toasty.info();
toasty.success();
toasty.wait();
toasty.error();
toasty.warning();
```
##### Event Handlers & Broadcasting
You can easily hook into individual toast item events by calling a functions:
```javascript
toasty({
title: 'New Toast!',
onAdd: function() {
console.log('Toasty ' + this.id + ' has been added!', this);
},
onRemove: function() {
console.log('Toasty ' + this.id + ' has been removed!', this);
},
onClick: function() {
console.log('Toasty ' + this.id + ' has been clicked!', this);
}
});
```
Toasty also broadcasts on events which can be hooked into:
```javascript
// When a new toast is added
$rootScope.$on('toasty-added', function(event, toast) { console.log(toast) });
// When a toast is clicked
$rootScope.$on('toasty-clicked', function(event, toast) { console.log(toast) });
// When a toast is cleared/removed
$rootScope.$on('toasty-cleared', function(event, toast) { console.log(toast) });
```
#### Contributing
Please see the [contributing guidelines](https://github.com/invertase/angular-toasty/blob/master/CONTRIBUTING.md).
27 changes: 18 additions & 9 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,26 @@
{
"name": "angular-toasty",
"version": "0.1.8",
"description": "A slick, simple, standalone AngularJS module with extensive features that provides growl-style alerts and messages for your app.",
"version": "1.0.0",
"main": [
"js/ng-toasty.js",
"css/ng-toasty.css"
"dist/angular-toasty.js",
"dist/angular-toasty.css"
],
"ignore": [
"**/.*",
"node_modules",
"components"
"node_modules",
"bower_components",
"example",
".gitignore",
"**/*.log",
".DS_Store"
],
"dependencies": {
"angular": "~1.2.20",
"angular-animate": "~1.2.20"
}
"angular": "~1.4.3"
},
"homepage": "https://github.com/invertase/angular-toasty",
"repository": {
"type": "git",
"url": "git://github.com/invertase/angular-toasty.git"
},
"license": "MIT"
}
Loading

0 comments on commit 46a9dd3

Please # to comment.