Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

I think this will be v2

  • Loading branch information...
commit a34932a6cbc0727096cd9aacc6cb5e1e565c8823 1 parent 989b24c
Nedim Arabacı authored
Showing with 2,076 additions and 464 deletions.
  1. +2 −0  .gitignore
  2. +14 −8 README.markdown
  3. +91 −0 demo/allLayouts.html
  4. +86 −0 demo/allTypes.html
  5. +103 −0 demo/api.html
  6. +0 −31 demo/btnStylesViewer.html
  7. +0 −24 demo/btnStylesViewer.js
  8. +0 −30 demo/consumeAlert.html
  9. +0 −32 demo/consumeAlert.js
  10. +78 −0 demo/consumingAlert.html
  11. +90 −0 demo/customContainer.html
  12. +45 −6 demo/index.html
  13. +0 −30 demo/stylesViewer.html
  14. +0 −38 demo/stylesViewer.js
  15. +104 −0 demo/usingWithButtons.html
  16. +98 −0 demo/usingWithButtons2.html
  17. +87 −0 demo/usingWithModal.html
  18. +110 −0 demo/usingWithOldOptions.html
  19. +0 −265 js/jquery.noty.js
  20. +481 −0 js/noty/jquery.noty.js
  21. +34 −0 js/noty/layouts/bottom.js
  22. +41 −0 js/noty/layouts/bottomCenter.js
  23. +43 −0 js/noty/layouts/bottomLeft.js
  24. +43 −0 js/noty/layouts/bottomRight.js
  25. +56 −0 js/noty/layouts/center.js
  26. +61 −0 js/noty/layouts/centerLeft.js
  27. +61 −0 js/noty/layouts/centerRight.js
  28. +31 −0 js/noty/layouts/inline.js
  29. +34 −0 js/noty/layouts/top.js
  30. +41 −0 js/noty/layouts/topCenter.js
  31. +43 −0 js/noty/layouts/topLeft.js
  32. +43 −0 js/noty/layouts/topRight.js
  33. 0  js/{ → noty}/promise.js
  34. +156 −0 js/noty/themes/default.js
2  .gitignore
View
@@ -1 +1,3 @@
child/
+
+.DS_Store
22 README.markdown
View
@@ -1,16 +1,22 @@
-noty - jQuery Notification Plugin
-================================
+# noty - A jQuery Notification Plugin
-Documentation and examples are here [http://needim.github.com/noty/](http://needim.github.com/noty/).
+![noty v2](http://ned.im/noty-v2.png "noty v2")
-noty is a jQuery plugin that makes it easy to create **alert**, **success**, **error**, **information** and **confirmation** messages as an alternative the standard alert dialog. Each notification is added to a queue.
+***
-The notifications can be positioned at the **top**, **topCenter** (like GMail), **bottom**, **centre**, **top left**, **top right**, **bottom left** or **top right**.
+## Hi
-There are lots of other options in the API to customise the **text**, **animation**, **speed**, **buttons** and **much more**.
+**noty** is a jQuery plugin that makes it easy to create **alert** - **success** - **error** - **warning** - **information** - b messages as an alternative the standard alert dialog. Each notification is added to a **queue**. (**Optional**)
+
+The notifications can be positioned at the;
+**top** - **topLeft** - **topCenter** - **topRight** - **center** - **centerLeft** - **centerRight** - **bottom** - **bottomLeft** - **bottomCenter** - **bottomRight**
+
+There are lots of other options in the API to customise the text, animation, speed, buttons and much more.
It also has various callbacks for the buttons, opening closing the notifications and queue control.
-**new:** Theme support (**default**, **mitgux**, **twitter bootstrap**)
+***
+
+### Documentation
-More information is here [http://needim.github.com/noty/](http://needim.github.com/noty/).
+Documentation and examples are here: <http://needim.github.com/noty>
91 demo/allLayouts.html
View
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta charset="utf-8">
+ <title>Notification Layouts</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="demonstration of some noty capabilities">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+ <style type="text/css">
+
+ html {
+ height: 100%;
+ width: 100%;
+ }
+ body {
+ font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
+ }
+
+ </style>
+
+ <link rel="stylesheet" type="text/css" href="buttons.css"/>
+
+</head>
+<body>
+
+ <div class="container">
+
+ <div id="customContainer"></div>
+
+ </div>
+
+ <script src="jquery-1.7.2.min.js"></script>
+
+ <!-- noty -->
+ <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
+
+ <!-- layouts -->
+ <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
+
+ <!-- themes -->
+ <script type="text/javascript" src="../js/noty/themes/default.js"></script>
+
+ <script type="text/javascript">
+
+ function generate(layout) {
+ var n = noty({
+ text: layout,
+ type: 'alert',
+ dismissQueue: true,
+ layout: layout,
+ theme: 'default'
+ });
+ console.log('html: '+n.options.id);
+ }
+
+ function generateAll() {
+ generate('top');
+ generate('topCenter');
+ generate('topLeft');
+ generate('topRight');
+ generate('center');
+ generate('centerLeft');
+ generate('centerRight');
+ generate('bottom');
+ generate('bottomCenter');
+ generate('bottomLeft');
+ generate('bottomRight');
+ }
+
+ $(document).ready(function() {
+
+ generateAll();
+
+ });
+
+ </script>
+</body>
+</html>
86 demo/allTypes.html
View
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta charset="utf-8">
+ <title>Notification Types</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="demonstration of some noty capabilities">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+ <style type="text/css">
+
+ html {
+ height: 100%;
+ width: 100%;
+ }
+ body {
+ font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
+ }
+
+ </style>
+
+ <link rel="stylesheet" type="text/css" href="buttons.css"/>
+
+</head>
+<body>
+
+ <div class="container">
+
+ <div id="customContainer"></div>
+
+ </div>
+
+ <script src="jquery-1.7.2.min.js"></script>
+
+ <!-- noty -->
+ <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
+
+ <!-- layouts -->
+ <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
+
+ <!-- themes -->
+ <script type="text/javascript" src="../js/noty/themes/default.js"></script>
+
+ <script type="text/javascript">
+
+ function generate(type) {
+ var n = noty({
+ text: type,
+ type: type,
+ dismissQueue: true,
+ layout: 'topCenter',
+ theme: 'default'
+ });
+ console.log('html: '+n.options.id);
+ }
+
+ function generateAll() {
+ generate('alert');
+ generate('information');
+ generate('error');
+ generate('warning');
+ generate('notification');
+ generate('success');
+ }
+
+ $(document).ready(function() {
+
+ generateAll();
+
+ });
+
+ </script>
+</body>
+</html>
103 demo/api.html
View
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta charset="utf-8">
+ <title>API</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="demonstration of some noty capabilities">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+ <style type="text/css">
+
+ html {
+ height: 100%;
+ width: 100%;
+ }
+ body {
+ font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
+ }
+
+ </style>
+
+ <link rel="stylesheet" type="text/css" href="buttons.css"/>
+
+</head>
+<body>
+
+ <div class="container">
+
+ <div id="customContainer"></div>
+
+ </div>
+
+ <script src="jquery-1.7.2.min.js"></script>
+
+ <!-- noty -->
+ <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
+
+ <!-- layouts -->
+ <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
+
+ <!-- themes -->
+ <script type="text/javascript" src="../js/noty/themes/default.js"></script>
+
+ <script type="text/javascript">
+
+ function generate(type) {
+ var n = noty({
+ text: type,
+ type: type,
+ dismissQueue: false,
+ layout: 'topCenter',
+ theme: 'default'
+ });
+ console.log(type + ' - ' + n.options.id);
+ return n;
+ }
+
+ $(document).ready(function() {
+
+ var alert = generate('alert');
+ var information = generate('information');
+ var error = generate('error');
+ var warning = generate('warning');
+ var notification = generate('notification');
+ var success = generate('success');
+
+ setTimeout(function() {
+ $.noty.setText(alert.options.id, 'I\'m closing now!'); // same as alert.setText('Text Override')
+ }, 1000);
+
+ setTimeout(function() {
+ $.noty.close(alert.options.id);
+ }, 3000);
+
+ setTimeout(function() {
+ $.noty.setType(information.options.id, 'warning'); // same as information.setType('warning')
+ }, 5000);
+
+ setTimeout(function() {
+ $.noty.setText(information.options.id, 'I\'m closing too. Goodbye!'); // same as information.setType('warning')
+ }, 7000);
+
+ setTimeout(function() {
+ $.noty.closeAll();
+ }, 10000);
+
+ });
+
+ </script>
+</body>
+</html>
31 demo/btnStylesViewer.html
View
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
- <title>Noty demo</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="demonstration of some noty capabilities">
- <meta name="author" content="Loïc Knuchel - @loicknuchel">
-
- <link rel="stylesheet" type="text/css" href="../css/jquery.noty.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_default.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_twitter.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_mitgux.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_facebook.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_growl.css"/>
- <link rel="stylesheet" type="text/css" href="buttons.css"/>
-</head>
-<body>
- <div class="container">
-
- </div>
-
-
- <script src="jquery-1.7.2.min.js"></script>
- <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script>window.jQuery || document.write('<script src="jquery-1.7.2.min.js"><\/script>')</script>-->
- <script type="text/javascript" src="../js/jquery.noty.js"></script>
- <script type="text/javascript" src="btnStylesViewer.js"></script>
-</body>
-</html>
24 demo/btnStylesViewer.js
View
@@ -1,24 +0,0 @@
-$(document).ready(function(){
- notyAlertWithButtons('topLeft', 'noty_theme_default');
- notyAlertWithButtons('topLeft', 'noty_theme_twitter');
- notyAlertWithButtons('topRight', 'noty_theme_mitgux');
- notyAlertWithButtons('bottomLeft', 'noty_theme_facebook');
- notyAlertWithButtons('bottomRight', 'noty_theme_growl');
-});
-
-function notyAlertWithButtons(layout, theme){
- noty({layout : layout, theme : theme, type : 'notification', text: 'alert with buttons',
- buttons: [
- {type: 'btn btn-primary', text: 'Ok', click: function($noty) {
- $noty.close();
- noty({force: true, layout : layout, theme : theme, text: 'You clicked "Ok" button', type: 'success'});
- }
- },
- {type: 'btn btn-danger', text: 'Cancel', click: function($noty) {
- $noty.close();
- noty({force: true, layout : layout, theme : theme, text: 'You clicked "Cancel" button', type: 'error'});
- }
- }
- ], closable: false, timeout: false
- });
-}
30 demo/consumeAlert.html
View
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
- <title>Noty demo</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="demonstration of some noty capabilities">
- <meta name="author" content="Loïc Knuchel - @loicknuchel">
-
- <link rel="stylesheet" type="text/css" href="../css/jquery.noty.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_default.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_twitter.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_mitgux.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_facebook.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_growl.css"/>
-</head>
-<body>
- <div class="container">
-
- </div>
-
-
- <script src="jquery-1.7.2.min.js"></script>
- <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script>window.jQuery || document.write('<script src="jquery-1.7.2.min.js"><\/script>')</script>-->
- <script type="text/javascript" src="../js/jquery.noty.js"></script>
- <script type="text/javascript" src="consumeAlert.js"></script>
-</body>
-</html>
32 demo/consumeAlert.js
View
@@ -1,32 +0,0 @@
-$(document).ready(function(){
- /*var alertOld = window.alert;
- var wait = false;
-
- window.alert = function(text){
- noty({layout : 'topRight', theme : 'noty_theme_default', type : 'success', text: text, timeout : 1000,
- onShow :function(){
- console.log(new Date().getTime()+" : start show alert");
- },onShown :function(){
- console.log(new Date().getTime()+" : end show alert");
- },onClose :function(){
- console.log(new Date().getTime()+" : start hide alert");
- },onClosed :function(){
- console.log(new Date().getTime()+" : end hide alert");
- }
- });
- };
-
- console.log("before call");
- alert("bonjour");
- console.log("after call");*/
-
-
- alert("bonjour 1");
- $.noty.consumeAlert({layout : 'topRight', type : 'success'});
- alert("bonjour 2");
- $.noty.consumeAlert({layout : 'top', type : 'alert'});
- alert("bonjour 3");
- $.noty.stopConsumeAlert();
- alert("bonjour 4");
-
-});
78 demo/consumingAlert.html
View
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta charset="utf-8">
+ <title>Notification Types</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="demonstration of some noty capabilities">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+ <style type="text/css">
+
+ html {
+ height: 100%;
+ width: 100%;
+ }
+ body {
+ font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
+ }
+
+ </style>
+
+ <link rel="stylesheet" type="text/css" href="buttons.css"/>
+
+</head>
+<body>
+
+ <div class="container">
+
+ <div id="customContainer"></div>
+
+ </div>
+
+ <script src="jquery-1.7.2.min.js"></script>
+
+ <!-- noty -->
+ <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
+
+ <!-- layouts -->
+ <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
+
+ <!-- themes -->
+ <script type="text/javascript" src="../js/noty/themes/default.js"></script>
+
+ <script type="text/javascript">
+
+ $(document).ready(function() {
+
+ alert("This is a basic window alert");
+
+ $.noty.consumeAlert({layout: 'topRight', type: 'success', dismissQueue: true});
+
+ alert("This is the same but noty consumed with options");
+
+ $.noty.consumeAlert({layout: 'topCenter', type: 'alert', dismissQueue: true});
+
+ alert("Consumed again but different options");
+
+ $.noty.stopConsumeAlert();
+
+ alert("This is just alert without consume");
+
+ });
+
+ </script>
+</body>
+</html>
90 demo/customContainer.html
View
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta charset="utf-8">
+ <title>Notification Types</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="demonstration of some noty capabilities">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+ <style type="text/css">
+
+ html {
+ height: 100%;
+ width: 100%;
+ }
+ body {
+ font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
+ }
+
+ </style>
+
+ <link rel="stylesheet" type="text/css" href="buttons.css"/>
+
+</head>
+<body>
+
+ <div class="container">
+
+ <div id="customContainer" style="width: 400px; margin-left: 125px; margin-top: 100px; border: 1px solid #ccc; padding: 10px">
+ <p><strong>Hi!</strong> I'm a custom container</p>
+ </div>
+
+ </div>
+
+ <script src="jquery-1.7.2.min.js"></script>
+
+ <!-- noty -->
+ <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
+
+ <!-- layouts -->
+ <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
+
+ <!-- themes -->
+ <script type="text/javascript" src="../js/noty/themes/default.js"></script>
+
+ <script type="text/javascript">
+
+ function generate(type) {
+
+ var n = $('div#customContainer').noty({
+ text: type,
+ type: type,
+ dismissQueue: true,
+ layout: 'topCenter',
+ theme: 'default'
+ });
+
+ // console.log('html: '+n.options.id);
+ }
+
+ function generateAll() {
+ generate('alert');
+ generate('information');
+ generate('error');
+ generate('warning');
+ generate('notification');
+ generate('success');
+ }
+
+ $(document).ready(function() {
+
+ generateAll();
+
+ });
+
+ </script>
+</body>
+</html>
51 demo/index.html
View
@@ -1,23 +1,62 @@
<!DOCTYPE html>
-<html lang="fr">
+<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
- <title>Noty demo</title>
+ <title>Demonstration of noty</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="demonstration of some noty capabilities">
- <meta name="author" content="Loïc Knuchel - @loicknuchel">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+ <style type="text/css">
+
+ html {
+ height: 100%;
+ width: 100%;
+ }
+ body {
+ font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
+ }
+
+ a {
+ color: #444;
+ line-height: 30px;
+ text-decoration: none;
+ background: #f1f1f1;
+ padding: 2px 8px;
+ }
+
+ </style>
+
</head>
<body>
<div class="container">
<div>
- <a href="stylesViewer.html">See noty styles</a>
+ <a href="allLayouts.html">See All Layouts</a>
</div>
<div>
- <a href="btnStylesViewer.html">See noty btn styles</a>
+ <a href="allTypes.html">See All Types</a>
</div>
<div>
- <a href="consumeAlert.html">Noty consume alert()</a>
+ <a href="usingWithButtons.html">Using with Buttons</a>
+ </div>
+ <div>
+ <a href="usingWithButtons2.html">Using with Buttons 2</a>
+ </div>
+ <div>
+ <a href="usingWithModal.html">Using with Modal</a>
+ </div>
+ <div>
+ <a href="usingWithOldOptions.html">Using with Old Options</a>
+ </div>
+ <div>
+ <a href="customContainer.html">Using with Custom Container</a>
+ </div>
+ <div>
+ <a href="consumingAlert.html">Consuming Alert</a>
+ </div>
+ <div>
+ <a href="api.html">Using API</a>
</div>
</div>
</body>
30 demo/stylesViewer.html
View
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
- <title>Noty demo</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="demonstration of some noty capabilities">
- <meta name="author" content="Loïc Knuchel - @loicknuchel">
-
- <link rel="stylesheet" type="text/css" href="../css/jquery.noty.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_default.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_twitter.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_mitgux.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_facebook.css"/>
- <link rel="stylesheet" type="text/css" href="../css/noty_theme_growl.css"/>
-</head>
-<body>
- <div class="container">
-
- </div>
-
-
- <script src="jquery-1.7.2.min.js"></script>
- <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script>window.jQuery || document.write('<script src="jquery-1.7.2.min.js"><\/script>')</script>-->
- <script type="text/javascript" src="../js/jquery.noty.js"></script>
- <script type="text/javascript" src="stylesViewer.js"></script>
-</body>
-</html>
38 demo/stylesViewer.js
View
@@ -1,38 +0,0 @@
-$(document).ready(function(){
- //alert('toto');
- /**/noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'notification', text: 'notification with default theme', timeout : false });
- noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'warning', text: 'warning with default theme', timeout : false });
- noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'alert', text: 'alert with default theme', timeout : false });
- noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'information', text: 'information with default theme', timeout : false });
- noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'success', text: 'success with default theme', timeout : false });
- noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'error', text: 'error with default theme', timeout : false });
-
- noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'notification', text: 'notification with twitter theme', timeout : false });
- noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'warning', text: 'warning with twitter theme', timeout : false });
- noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'alert', text: 'alert with twitter theme', timeout : false });
- noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'information', text: 'information with twitter theme', timeout : false });
- noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'success', text: 'success with twitter theme', timeout : false });
- noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'error', text: 'error with twitter theme', timeout : false });
-
- noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'notification', text: 'notification with mitgux theme', timeout : false });
- noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'warning', text: 'warning with mitgux theme', timeout : false });
- noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'alert', text: 'alert with mitgux theme', timeout : false });
- noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'information', text: 'information with mitgux theme', timeout : false });
- noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'success', text: 'success with mitgux theme', timeout : false });
- noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'error', text: 'error with mitgux theme', timeout : false });
-
- noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'notification', text: 'notification with facebook theme', timeout : false });
- noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'warning', text: 'warning with facebook theme', timeout : false });
- noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'alert', text: 'alert with facebook theme', timeout : false });
- noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'information', text: 'information with facebook theme', timeout : false });
- noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'success', text: 'success with facebook theme', timeout : false });
- noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'error', text: 'error with facebook theme', timeout : false });
-
- var content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.';
- var title = '<div class="header">This is a sticky notice!</div>';
- var icon = '<div class="icon"><img src="http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg"></div>';
-
- noty({layout : 'bottomRight', theme : 'noty_theme_growl', type : 'error', text: content, closeButton : true, timeout : false });
- noty({layout : 'bottomRight', theme : 'noty_theme_growl', type : 'error', text: title+content, timeout : false });
- noty({layout : 'bottomRight', theme : 'noty_theme_growl', type : 'error', text: icon+'<div style="margin-left: 58px;">'+title+content+'</div>', timeout : false });
-});
104 demo/usingWithButtons.html
View
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta charset="utf-8">
+ <title>Using with Buttons</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="demonstration of some noty capabilities">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+ <style type="text/css">
+
+ html {
+ height: 100%;
+ width: 100%;
+ }
+ body {
+ font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
+ }
+
+ </style>
+
+ <link rel="stylesheet" type="text/css" href="buttons.css"/>
+
+</head>
+<body>
+
+ <div class="container">
+
+ <div id="customContainer"></div>
+
+ </div>
+
+ <script src="jquery-1.7.2.min.js"></script>
+
+ <!-- noty -->
+ <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
+
+ <!-- layouts -->
+ <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
+
+ <!-- themes -->
+ <script type="text/javascript" src="../js/noty/themes/default.js"></script>
+
+ <script type="text/javascript">
+
+ function generate(layout) {
+ var n = noty({
+ text: 'Do you want to continue?',
+ type: 'alert',
+ dismissQueue: true,
+ layout: layout,
+ theme: 'default',
+ buttons: [
+ {addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {
+ $noty.close();
+ noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Ok" button', type: 'success'});
+ }
+ },
+ {addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) {
+ $noty.close();
+ noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Cancel" button', type: 'error'});
+ }
+ }
+ ]
+ });
+ console.log('html: '+n.options.id);
+ }
+
+ function generateAll() {
+ generate('top');
+ generate('topCenter');
+ generate('topLeft');
+ generate('topRight');
+ generate('center');
+ generate('centerLeft');
+ generate('centerRight');
+ generate('bottom');
+ generate('bottomCenter');
+ generate('bottomLeft');
+ generate('bottomRight');
+
+ }
+
+ $(document).ready(function() {
+
+ generateAll();
+
+ });
+
+ </script>
+</body>
+</html>
98 demo/usingWithButtons2.html
View
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta charset="utf-8">
+ <title>Notification Types</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="demonstration of some noty capabilities">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+ <style type="text/css">
+
+ html {
+ height: 100%;
+ width: 100%;
+ }
+ body {
+ font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
+ }
+
+ </style>
+
+ <link rel="stylesheet" type="text/css" href="buttons.css"/>
+
+</head>
+<body>
+
+ <div class="container">
+
+ <div id="customContainer"></div>
+
+ </div>
+
+ <script src="jquery-1.7.2.min.js"></script>
+
+ <!-- noty -->
+ <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
+
+ <!-- layouts -->
+ <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
+
+ <!-- themes -->
+ <script type="text/javascript" src="../js/noty/themes/default.js"></script>
+
+ <script type="text/javascript">
+
+ function generate(type, layout) {
+ var n = noty({
+ text: type,
+ type: type,
+ dismissQueue: true,
+ layout: layout,
+ theme: 'default',
+ buttons: [
+ {addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {
+ $noty.close();
+ noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Ok" button', type: 'success'});
+ }
+ },
+ {addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) {
+ $noty.close();
+ noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Cancel" button', type: 'error'});
+ }
+ }
+ ]
+ });
+ console.log('html: '+n.options.id);
+ }
+
+ function generateAll() {
+ generate('alert', 'topCenter');
+ generate('information', 'topLeft');
+ generate('error', 'topRight');
+ generate('warning', 'center');
+ generate('notification', 'centerRight');
+ generate('success', 'centerLeft');
+ }
+
+ $(document).ready(function() {
+
+ generateAll();
+
+ });
+
+ </script>
+</body>
+</html>
87 demo/usingWithModal.html
View
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta charset="utf-8">
+ <title>Notification Types</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="demonstration of some noty capabilities">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+ <style type="text/css">
+
+ html {
+ height: 100%;
+ width: 100%;
+ }
+ body {
+ font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
+ }
+
+ </style>
+
+ <link rel="stylesheet" type="text/css" href="buttons.css"/>
+
+</head>
+<body>
+
+ <div class="container">
+
+ <div id="customContainer"></div>
+
+ </div>
+
+ <script src="jquery-1.7.2.min.js"></script>
+
+ <!-- noty -->
+ <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
+
+ <!-- layouts -->
+ <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
+
+ <!-- themes -->
+ <script type="text/javascript" src="../js/noty/themes/default.js"></script>
+
+ <script type="text/javascript">
+
+ function generate(type) {
+ var n = noty({
+ text: type,
+ type: type,
+ dismissQueue: true,
+ modal: true,
+ layout: 'topCenter',
+ theme: 'default'
+ });
+ console.log('html: '+n.options.id);
+ }
+
+ function generateAll() {
+ generate('alert');
+ generate('information');
+ generate('error');
+ generate('warning');
+ generate('notification');
+ generate('success');
+ }
+
+ $(document).ready(function() {
+
+ generateAll();
+
+ });
+
+ </script>
+</body>
+</html>
110 demo/usingWithOldOptions.html
View
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta charset="utf-8">
+ <title>Using noty v2 with Old Options</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="demonstration of some noty capabilities">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+ <style type="text/css">
+
+ html {
+ height: 100%;
+ width: 100%;
+ }
+ body {
+ font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
+ }
+
+ </style>
+
+ <link rel="stylesheet" type="text/css" href="buttons.css"/>
+
+</head>
+<body>
+
+ <div class="container">
+
+ <div id="customContainer"></div>
+
+ </div>
+
+ <script src="jquery-1.7.2.min.js"></script>
+
+ <!-- noty -->
+ <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
+
+ <!-- layouts -->
+ <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
+ <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
+
+ <!-- themes -->
+ <script type="text/javascript" src="../js/noty/themes/default.js"></script>
+
+ <script type="text/javascript">
+
+ $(document).ready(function() {
+
+ $.noty.returns = 'id'; // BC for old api
+
+ var n = noty({
+ layout: 'topLeft',
+ theme: 'noty_theme_default',
+ animateOpen: {height: 'toggle'},
+ animateClose: {height: 'toggle'},
+ easing: 'swing',
+ text: 'Test with old options',
+ type: 'alert',
+ speed: 500,
+ timeout: 5000,
+ closeButton: false,
+ closeOnSelfClick: true,
+ closeOnSelfOver: false,
+ force: false,
+ onShow: false,
+ onShown: false,
+ onClose: false,
+ onClosed: false,
+ buttons: [
+ {type: 'btn btn-primary', text: 'Ok', click: function($noty) {
+
+ // this = button element
+ // $noty = $noty element
+
+ $noty.close();
+ noty({force: true, text: 'You clicked "Ok" button', type: 'success', layout: 'topLeft'});
+ }
+ },
+ {type: 'btn btn-danger', text: 'Cancel', click: function($noty) {
+ $noty.close();
+ noty({force: true, text: 'You clicked "Cancel" button', type: 'error', layout: 'topLeft'});
+ }
+ }
+ ],
+ modal: false,
+ template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
+ cssPrefix: 'noty_',
+ custom: {
+ container: null
+ }
+ });
+
+ console.log('html: '+n);
+
+ });
+
+ </script>
+</body>
+</html>
265 js/jquery.noty.js
View
@@ -1,265 +0,0 @@
-/**
-* noty - jQuery Notification Plugin v1.2.1
-* Contributors: https://github.com/needim/noty/graphs/contributors
-*
-* Examples and Documentation - http://needim.github.com/noty/
-*
-* Licensed under the MIT licenses:
-* http://www.opensource.org/licenses/mit-license.php
-*
-**/
-(function($) {
- $.noty = function(options, customContainer) {
-
- var base = {};
- var $noty = null;
- var isCustom = false;
-
- base.init = function(options) {
- base.options = $.extend({}, $.noty.defaultOptions, options);
- base.options.type = base.options.cssPrefix+base.options.type;
- base.options.id = base.options.type+'_'+new Date().getTime();
- base.options.layout = base.options.cssPrefix+'layout_'+base.options.layout;
-
- if (base.options.custom.container) customContainer = base.options.custom.container;
- isCustom = ($.type(customContainer) === 'object') ? true : false;
-
- return base.addQueue();
- };
-
- // Push notification to queue
- base.addQueue = function() {
- var isGrowl = ($.inArray(base.options.layout, $.noty.growls) == -1) ? false : true;
- if (!isGrowl) (base.options.force) ? $.noty.queue.unshift({options: base.options}) : $.noty.queue.push({options: base.options});
- return base.render(isGrowl);
- };
-
- // Render the noty
- base.render = function(isGrowl) {
-
- // Layout spesific container settings
- var container = (isCustom) ? customContainer.addClass(base.options.theme+' '+base.options.layout+' noty_custom_container') : $('body');
- if (isGrowl) {
- if ($('ul.noty_cont.' + base.options.layout).length == 0)
- container.prepend($('<ul/>').addClass('noty_cont ' + base.options.layout));
- container = $('ul.noty_cont.' + base.options.layout);
- } else {
- if ($.noty.available) {
- var fromQueue = $.noty.queue.shift(); // Get noty from queue
- if ($.type(fromQueue) === 'object') {
- $.noty.available = false;
- base.options = fromQueue.options;
- } else {
- $.noty.available = true; // Queue is over
- return base.options.id;
- }
- } else {
- return base.options.id;
- }
- }
- base.container = container;
-
- // Generating noty bar
- base.bar = $('<div class="noty_bar"/>').attr('id', base.options.id).addClass(base.options.theme+' '+base.options.layout+' '+base.options.type);
- $noty = base.bar;
- $noty.append(base.options.template).find('.noty_text').html(base.options.text);
- $noty.data('noty_options', base.options);
-
- // Close button display
- (base.options.closeButton) ? $noty.addClass('noty_closable').find('.noty_close').show() : $noty.find('.noty_close').remove();
-
- // Bind close event to button
- $noty.find('.noty_close').bind('click', function() { $noty.trigger('noty.close'); });
-
- // If we have a button we must disable closeOnSelfClick and closeOnSelfOver option
- if (base.options.buttons) base.options.closeOnSelfClick = base.options.closeOnSelfOver = false;
- // Close on self click
- if (base.options.closeOnSelfClick) $noty.bind('click', function() { $noty.trigger('noty.close'); }).css('cursor', 'pointer');
- // Close on self mouseover
- if (base.options.closeOnSelfOver) $noty.bind('mouseover', function() { $noty.trigger('noty.close'); }).css('cursor', 'pointer');
-
- // Set buttons if available
- if (base.options.buttons) {
- $buttons = $('<div/>').addClass('noty_buttons');
- $noty.find('.noty_message').append($buttons);
- $.each(base.options.buttons, function(i, button) {
- bclass = (button.type) ? button.type : 'gray';
- $button = $('<button/>').addClass(bclass).html(button.text).appendTo($noty.find('.noty_buttons'))
- .bind('click', function() {
- if ($.isFunction(button.click)) {
- button.click.call($button, $noty);
- }
- });
- });
- }
-
- return base.show(isGrowl);
- };
-
- base.show = function(isGrowl) {
-
- // is Modal?
- if (base.options.modal) $('<div/>').addClass('noty_modal').addClass(base.options.theme).prependTo($('body')).fadeIn('fast');
-
- $noty.close = function() { return this.trigger('noty.close'); };
-
- // Prepend noty to container
- (isGrowl) ? base.container.prepend($('<li/>').append($noty)) : base.container.prepend($noty);
-
- // topCenter and center specific options
- if (base.options.layout == 'noty_layout_topCenter' || base.options.layout == 'noty_layout_center') {
- $.noty.reCenter($noty);
- }
-
- $noty.bind('noty.setText', function(event, text) {
- $noty.find('.noty_text').html(text);
-
- if (base.options.layout == 'noty_layout_topCenter' || base.options.layout == 'noty_layout_center') {
- $.noty.reCenter($noty);
- }
- });
-
- $noty.bind('noty.setType', function(event, type) {
- $noty.removeClass($noty.data('noty_options').type);
-
- type = $noty.data('noty_options').cssPrefix+type;
-
- $noty.data('noty_options').type = type;
-
- $noty.addClass(type);
-
- if (base.options.layout == 'noty_layout_topCenter' || base.options.layout == 'noty_layout_center') {
- $.noty.reCenter($noty);
- }
- });
-
- $noty.bind('noty.getId', function(event) {
- return $noty.data('noty_options').id;
- });
-
- // Bind close event
- $noty.one('noty.close', function(event) {
- var options = $noty.data('noty_options');
- if(options.onClose){options.onClose();}
-
- // Modal Cleaning
- if (options.modal) $('.noty_modal').fadeOut('fast', function() { $(this).remove(); });
-
- $noty.clearQueue().stop().animate(
- $noty.data('noty_options').animateClose,
- $noty.data('noty_options').speed,
- $noty.data('noty_options').easing,
- $noty.data('noty_options').onClosed)
- .promise().done(function() {
-
- // Layout spesific cleaning
- if ($.inArray($noty.data('noty_options').layout, $.noty.growls) > -1) {
- $noty.parent().remove();
- } else {
- $noty.remove();
-
- // queue render
- $.noty.available = true;
- base.render(false);
- }
-
- });
- });
-
- // Start the show
- if(base.options.onShow){base.options.onShow();}
- $noty.animate(base.options.animateOpen, base.options.speed, base.options.easing, base.options.onShown);
-
- // If noty is have a timeout option
- if (base.options.timeout) $noty.delay(base.options.timeout).promise().done(function() { $noty.trigger('noty.close'); });
- return base.options.id;
- };
-
- // Run initializer
- return base.init(options);
- };
-
- // API
- $.noty.get = function(id) { return $('#'+id); };
- $.noty.close = function(id) {
- //remove from queue if not already visible
- for(var i=0;i<$.noty.queue.length;) {
- if($.noty.queue[i].options.id==id)
- $.noty.queue.splice(id,1);
- else
- i++;
- }
- //close if already visible
- $.noty.get(id).trigger('noty.close');
- };
- $.noty.setText = function(id, text) {
- $.noty.get(id).trigger('noty.setText', text);
- };
- $.noty.setType = function(id, type) {
- $.noty.get(id).trigger('noty.setType', type);
- };
- $.noty.closeAll = function() {
- $.noty.clearQueue();
- $('.noty_bar').trigger('noty.close');
- };
- $.noty.reCenter = function(noty) {
- noty.css({'left': ($(window).width() - noty.outerWidth()) / 2 + 'px'});
- };
- $.noty.clearQueue = function() {
- $.noty.queue = [];
- };
-
- var windowAlert = window.alert;
- $.noty.consumeAlert = function(options){
- window.alert = function(text){
- if(options){options.text = text;}
- else{options = {text:text};}
- $.noty(options);
- };
- }
- $.noty.stopConsumeAlert = function(){
- window.alert = windowAlert;
- }
-
- $.noty.queue = [];
- $.noty.growls = ['noty_layout_topLeft', 'noty_layout_topRight', 'noty_layout_bottomLeft', 'noty_layout_bottomRight'];
- $.noty.available = true;
- $.noty.defaultOptions = {
- layout: 'top',
- theme: 'noty_theme_default',
- animateOpen: {height: 'toggle'},
- animateClose: {height: 'toggle'},
- easing: 'swing',
- text: '',
- type: 'alert',
- speed: 500,
- timeout: 5000,
- closeButton: false,
- closeOnSelfClick: true,
- closeOnSelfOver: false,
- force: false,
- onShow: false,
- onShown: false,
- onClose: false,
- onClosed: false,
- buttons: false,
- modal: false,
- template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
- cssPrefix: 'noty_',
- custom: {
- container: null
- }
- };
-
- $.fn.noty = function(options) {
- return this.each(function() {
- (new $.noty(options, $(this)));
- });
- };
-
-})(jQuery);
-
-//Helper
-function noty(options) {
- return jQuery.noty(options); // returns an id
-}
481 js/noty/jquery.noty.js
View
@@ -0,0 +1,481 @@
+/**
+* noty - jQuery Notification Plugin v2.0.0
+* Contributors: https://github.com/needim/noty/graphs/contributors
+*
+* Examples and Documentation - http://needim.github.com/noty/
+*
+* Licensed under the MIT licenses:
+* http://www.opensource.org/licenses/mit-license.php
+*
+**/
+
+if (typeof Object.create !== 'function') {
+ Object.create = function (o) {
+ function F() {};
+ F.prototype = o;
+ return new F();
+ };
+};
+
+;(function($) {
+
+ var NotyObject = {
+
+ init: function(options) {
+
+ // Mix in the passed in options with the default options
+ this.options = $.extend({}, $.noty.defaults, options);
+
+ this.options.layout = (this.options.custom) ? $.noty.layouts['inline'] : $.noty.layouts[this.options.layout];
+ this.options.theme = $.noty.themes[this.options.theme];
+
+ delete options.layout, delete options.theme;
+
+ this.options = $.extend({}, this.options, this.options.layout.options);
+ this.options.id = 'noty_' + (new Date().getTime() * Math.floor(Math.random()* 1000000));
+
+ this.options = $.extend({}, this.options, options);
+
+ // Build the noty dom initial structure
+ this._build();
+
+ // return this so we can chain/use the bridge with less code.
+ return this;
+ }, // end init
+
+ _build: function() {
+
+ // Generating noty bar
+ var $bar = $('<div class="noty_bar"/>').attr('id', this.options.id);
+ $bar.append(this.options.template).find('.noty_text').html(this.options.text);
+
+ this.$bar = (this.options.layout.parent.object !== null) ? $(this.options.layout.parent.object).css(this.options.layout.parent.css).append($bar) : $bar;
+
+ // Set buttons if available
+ if (this.options.buttons) {
+
+ // If we have button disable closeWith & timeout options
+ this.options.closeWith = [], this.options.timeout = false;
+
+ var $buttons = $('<div/>').addClass('noty_buttons');
+
+ (this.options.layout.parent.object !== null) ? this.$bar.find('.noty_bar').append($buttons) : this.$bar.append($buttons);
+
+ var self = this;
+
+ $.each(this.options.buttons, function(i, button) {
+ var $button = $('<button/>').addClass((button.addClass) ? button.addClass : 'gray').html(button.text)
+ .appendTo(self.$bar.find('.noty_buttons'))
+ .bind('click', function(e) { if ($.isFunction(button.onClick)) { button.onClick.call($button, self); } });
+ });
+ }
+
+ // For easy access
+ this.$message = this.$bar.find('.noty_message');
+ this.$closeButton = this.$bar.find('.noty_close');
+ this.$buttons = this.$bar.find('.noty_buttons');
+
+ $.noty.store[this.options.id] = this; // store noty for api
+
+ }, // end _build
+
+ show: function() {
+
+ var self = this;
+
+ $(self.options.layout.container.selector).append(self.$bar);
+
+ self.options.theme.style.apply(self);
+
+ ($.type(self.options.layout.css) === 'function') ? this.options.layout.css.apply(self.$bar) : self.$bar.css(this.options.layout.css || {});
+
+ self.$bar.addClass(self.options.layout.addClass);
+
+ self.options.layout.container.style.apply($(self.options.layout.container.selector));
+
+ self.options.theme.callback.onShow.apply(this);
+
+ if ($.inArray('click', self.options.closeWith) > -1)
+ self.$bar.css('cursor', 'pointer').one('click', function() { self.close(); });
+
+ if ($.inArray('hover', self.options.closeWith) > -1)
+ self.$bar.one('mouseenter', function() { self.close(); });
+
+ if ($.inArray('button', self.options.closeWith) > -1)
+ self.$closeButton.one('click', function() { self.close(); });
+
+ if ($.inArray('button', self.options.closeWith) == -1)
+ self.$closeButton.remove();
+
+ if (self.options.callback.onShow)
+ self.options.callback.onShow.apply(self);
+
+ self.$bar.animate(
+ self.options.animation.open,
+ self.options.animation.speed,
+ self.options.animation.easing,
+ function() {
+ if (self.options.callback.afterShow) self.options.callback.afterShow.apply(self);
+ self.shown = true;
+ });
+
+ // If noty is have a timeout option
+ if (self.options.timeout)
+ self.$bar.delay(self.options.timeout).promise().done(function() { self.close(); });
+
+ return this;
+
+ }, // end show
+
+ close: function() {
+
+ if (this.closed) return;
+
+ var self = this;
+
+ if (!this.shown) { // If we are still waiting in the queue just delete from queue
+ $.each($.noty.queue, function(i, n) {
+ if (n.options.id == self.options.id) {
+ $.noty.queue.splice(i, 1);
+ }
+ });
+ return;
+ }
+
+ self.$bar.addClass('i-am-closing-now');
+
+ if (self.options.callback.onClose) { self.options.callback.onClose.apply(self); }
+
+ self.$bar.clearQueue().stop().animate(
+ self.options.animation.close,
+ self.options.animation.speed,
+ self.options.animation.easing,
+ function() { if (self.options.callback.afterClose) self.options.callback.afterClose.apply(self); })
+ .promise().done(function() {
+
+ // Modal Cleaning
+ if (self.options.modal) {
+ $.notyRenderer.setModalCount(-1);
+ if ($.notyRenderer.getModalCount() == 0) $('.noty_modal').fadeOut('fast', function() { $(this).remove(); });
+ }
+
+ // Layout Cleaning
+ $.notyRenderer.setLayoutCountFor(self, -1);
+ if ($.notyRenderer.getLayoutCountFor(self) == 0) $(self.options.layout.container.selector).remove();
+
+ self.$bar.remove();
+ self.$bar = null;
+ self.closed = true;
+
+ delete $.noty.store[self.options.id]; // deleting noty from store
+
+ self.options.theme.callback.onClose.apply(self);
+
+ if (!self.options.dismissQueue) {
+ // Queue render
+ $.noty.ontap = true;
+
+ $.notyRenderer.render();
+ }
+
+ });
+
+ }, // end close
+
+ setText: function(text) {
+ if (!this.closed) {
+ this.options.text = text;
+ this.$bar.find('.noty_text').html(text);
+ }
+ return this;
+ },
+
+ setType: function(type) {
+ if (!this.closed) {
+ this.options.type = type;
+ this.options.theme.style.apply(this);
+ this.options.theme.callback.onShow.apply(this);
+ }
+ return this;
+ },
+
+ closed: false,
+ shown: false
+
+ }; // end NotyObject
+
+ $.notyRenderer = {};
+
+ $.notyRenderer.init = function(options) {
+
+ // Renderer creates a new noty
+ var notification = Object.create(NotyObject).init(options);
+
+ (notification.options.force) ? $.noty.queue.unshift(notification) : $.noty.queue.push(notification);
+
+ $.notyRenderer.render();
+
+ return ($.noty.returns == 'object') ? notification : notification.options.id;
+ };
+
+ $.notyRenderer.render = function() {
+
+ var instance = $.noty.queue[0];
+
+ if ($.type(instance) === 'object') {
+ if (instance.options.dismissQueue) {
+ $.notyRenderer.show($.noty.queue.shift());
+ } else {
+ if ($.noty.ontap) {
+ $.notyRenderer.show($.noty.queue.shift());
+ $.noty.ontap = false;
+ }
+ }
+ } else {
+ $.noty.ontap = true; // Queue is over
+ }
+
+ };
+
+ $.notyRenderer.show = function(notification) {
+
+ if (notification.options.modal) {
+ $.notyRenderer.createModalFor(notification);
+ $.notyRenderer.setModalCount(+1);
+ }
+
+ // Where is the container?
+ if ($(notification.options.layout.container.selector).length == 0) {
+ if (notification.options.custom) {
+ notification.options.custom.append($(notification.options.layout.container.object).addClass('i-am-new'));
+ } else {
+ $('body').append($(notification.options.layout.container.object).addClass('i-am-new'));
+ }
+ } else {
+ $(notification.options.layout.container.selector).removeClass('i-am-new');
+ }
+
+ $.notyRenderer.setLayoutCountFor(notification, +1);
+
+ notification.show();
+ };
+
+ $.notyRenderer.createModalFor = function(notification) {
+ if ($('.noty_modal').length == 0)
+ $('<div/>').addClass('noty_modal').data('noty_modal_count', 0).css(notification.options.theme.modal.css).prependTo($('body')).fadeIn('fast');
+ };
+
+ $.notyRenderer.getLayoutCountFor = function(notification) {
+ return $(notification.options.layout.container.selector).data('noty_layout_count') || 0;
+ };
+
+ $.notyRenderer.setLayoutCountFor = function(notification, arg) {
+ return $(notification.options.layout.container.selector).data('noty_layout_count', $.notyRenderer.getLayoutCountFor(notification) + arg);
+ };
+
+ $.notyRenderer.getModalCount = function() {
+ return $('.noty_modal').data('noty_modal_count') || 0;
+ };
+
+ $.notyRenderer.setModalCount = function(arg) {
+ return $('.noty_modal').data('noty_modal_count', $.notyRenderer.getModalCount() + arg);
+ };
+
+ // This is for custom container
+ $.fn.noty = function(options) {
+ return this.each(function() {
+ options.custom = $(this);
+ return $.notyRenderer.init(options);
+ });
+ };
+
+ $.noty = {};
+ $.noty.queue = [];
+ $.noty.ontap = true;
+ $.noty.layouts = {};
+ $.noty.themes = {};
+ $.noty.returns = 'object';
+ $.noty.store = {};
+
+ $.noty.get = function(id) {
+ return $.noty.store.hasOwnProperty(id) ? $.noty.store[id] : false;
+ };
+
+ $.noty.close = function(id) {
+ return $.noty.get(id) ? $.noty.get(id).close() : false;
+ };
+
+ $.noty.setText = function(id, text) {
+ return $.noty.get(id) ? $.noty.get(id).setText(text) : false;
+ };
+
+ $.noty.setType = function(id, type) {
+ return $.noty.get(id) ? $.noty.get(id).setType(type) : false;
+ };
+
+ $.noty.clearQueue = function() {
+ $.noty.queue = [];
+ };
+
+ $.noty.closeAll = function() {
+ $.noty.clearQueue();
+ $.each($.noty.store, function(id, noty) {
+ noty.close();
+ });
+ };
+
+ var windowAlert = window.alert;
+
+ $.noty.consumeAlert = function(options) {
+ window.alert = function(text) {
+ if (options)
+ options.text = text;
+ else
+ options = {text:text};
+
+ $.notyRenderer.init(options);
+ };
+ };
+
+ $.noty.stopConsumeAlert = function(){
+ window.alert = windowAlert;
+ };
+
+ $.noty.defaults = {
+ layout: 'top',
+ theme: 'default',
+ type: 'alert',
+ text: '',
+ dismissQueue: true,
+ template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
+ animation: {
+ open: {height: 'toggle'},
+ close: {height: 'toggle'},
+ easing: 'swing',
+ speed: 500
+ },
+ timeout: false,
+ force: false,
+ modal: false,
+ closeWith: ['click'],
+ callback: {
+ onShow: function() {},
+ afterShow: function() {},
+ onClose: function() {},
+ afterClose: function() {}
+ },
+ buttons: false
+ };
+
+ $(window).resize(function() {
+ $.each($.noty.layouts, function(index, layout) {
+ layout.container.style.apply($(layout.container.selector));
+ });
+ });
+
+})(jQuery);
+
+// Helpers
+function noty(options) {
+
+ // This is for BC - Will be deleted on v2.2.0
+ var using_old = 0
+ , old_to_new = {
+ 'animateOpen': 'animation.open',
+ 'animateClose': 'animation.close',
+ 'easing': 'animation.easing',
+ 'speed': 'animation.speed',
+ 'onShow': 'callback.onShow',
+ 'onShown': 'callback.afterShow',
+ 'onClose': 'callback.onClose',
+ 'onClosed': 'callback.afterClose'
+ }
+
+ $.each(options, function(key, value) {
+ if (old_to_new[key]) {
+ using_old++;
+ var _new = old_to_new[key].split('.');
+
+ if (!options[_new[0]]) options[_new[0]] = {};
+
+ options[_new[0]][_new[1]] = (value) ? value : function() {};
+ delete options[key];
+ }
+ });
+
+ if (!options.closeWith) {
+ options.closeWith = [];
+ }
+
+ var closeBC = 0;
+ if (options.hasOwnProperty('closeButton')) {
+ closeBC++; using_old++;
+ if (options.closeButton) options.closeWith.push('button');
+ delete options.closeButton;
+ }
+
+ if (options.hasOwnProperty('closeOnSelfClick')) {
+ closeBC++; using_old++;
+ if (options.closeOnSelfClick) options.closeWith.push('click');
+ delete options.closeOnSelfClick;
+ }
+
+ if (options.hasOwnProperty('closeOnSelfOver')) {
+ closeBC++; using_old++;
+ if (options.closeOnSelfOver) options.closeWith.push('hover');
+ delete options.closeOnSelfOver;
+ }
+
+ if (closeBC == 0 && !options.closeWith) {
+ console.log('reset');
+ options.closeWith = $.noty.defaults.closeWith;
+ }
+
+ if (options.hasOwnProperty('custom')) {
+ using_old++;
+ if (options.custom.container != 'null') options.custom = options.custom.container;
+ }
+
+ if (options.hasOwnProperty('cssPrefix')) {
+ using_old++;
+ delete options.cssPrefix;
+ }
+
+ if (options.theme == 'noty_theme_default') {
+ using_old++;
+ options.theme = 'default';
+ }
+
+ if (!options.hasOwnProperty('dismissQueue')) {
+ if (options.layout == 'topLeft'
+ || options.layout == 'topRight'
+ || options.layout == 'bottomLeft'
+ || options.layout == 'bottomRight') {
+ options.dismissQueue = true;
+ } else {
+ options.dismissQueue = false;
+ }
+ }
+
+ if (options.buttons) {
+ $.each(options.buttons, function(i, button) {
+ if (button.click) {
+ using_old++;
+ button.onClick = button.click;
+ delete button.click;
+ }
+ if (button.type) {
+ using_old++;
+ button.addClass = button.type;
+ delete button.type;
+ }
+ });
+ }
+
+ if (using_old) console.warn('You are using noty v2 with v1.x.x options. @deprecated until v2.2.0 - Please update your options.');
+
+ // console.log(options);
+ // End of the BC
+
+ return jQuery.notyRenderer.init(options);
+}
34 js/noty/layouts/bottom.js
View
@@ -0,0 +1,34 @@
+;(function($) {
+
+ $.noty.layouts.bottom = {
+ name: 'bottom',
+ options: {},
+ container: {
+ object: '<ul id="noty_bottom_layout_container" />',
+ selector: 'ul#noty_bottom_layout_container',
+ style: function() {
+ $(this).css({
+ bottom: 0,
+ left: '5%',
+ position: 'fixed',
+ width: '90%',
+ height: 'auto',
+ margin: 0,
+ padding: 0,
+ listStyleType: 'none',
+ zIndex: 9999999
+ });
+ }
+ },
+ parent: {
+ object: '<li />',
+ selector: 'li',
+ css: {}
+ },
+ css: {
+ display: 'none'
+ },
+ addClass: ''
+ };
+
+})(jQuery);
41 js/noty/layouts/bottomCenter.js
View
@@ -0,0 +1,41 @@
+;(function($) {
+
+ $.noty.layouts.bottomCenter = {
+ name: 'bottomCenter',
+ options: { // overrides options
+
+ },
+ container: {
+ object: '<ul id="noty_bottomCenter_layout_container" />',
+ selector: 'ul#noty_bottomCenter_layout_container',
+ style: function() {
+ $(this).css({
+ bottom: 20,
+ left: 0,
+ position: 'fixed',
+ width: '310px',
+ height: 'auto',
+ margin: 0,
+ padding: 0,
+ listStyleType: 'none',
+ zIndex: 10000000
+ });
+
+ $(this).css({
+ left: ($(window).width() - $(this).outerWidth()) / 2 + 'px',
+ });
+ }
+ },
+ parent: {
+ object: '<li />',
+ selector: 'li',
+ css: {}
+ },
+ css: {
+ display: 'none',
+ width: '310px'
+ },
+ addClass: ''
+ };
+
+})(jQuery);
43 js/noty/layouts/bottomLeft.js
View
@@ -0,0 +1,43 @@
+;(function($) {
+
+ $.noty.layouts.bottomLeft = {
+ name: 'bottomLeft',
+ options: { // overrides options
+
+ },
+ container: {
+ object: '<ul id="noty_bottomLeft_layout_container" />',
+ selector: 'ul#noty_bottomLeft_layout_container',
+ style: function() {
+ $(this).css({
+ bottom: 20,
+ left: 20,
+ position: 'fixed',
+ width: '310px',
+ height: 'auto',
+ margin: 0,
+ padding: 0,
+ listStyleType: 'none',
+ zIndex: 10000000
+ });
+
+ if (window.innerWidth < 600) {
+ $(this).css({
+ left: 5
+ });
+ }
+ }
+ },
+ parent: {
+ object: '<li />',
+ selector: 'li',
+ css: {}
+ },
+ css: {
+ display: 'none',
+ width: '310px'
+ },
+ addClass: ''
+ };
+
+})(jQuery);
43 js/noty/layouts/bottomRight.js
View
@@ -0,0 +1,43 @@
+;(function($) {
+
+ $.noty.layouts.bottomRight = {
+ name: 'bottomRight',
+ options: { // overrides options
+
+ },
+ container: {
+ object: '<ul id="noty_bottomRight_layout_container" />',
+ selector: 'ul#noty_bottomRight_layout_container',
+ style: function() {
+ $(this).css({
+ bottom: 20,
+ right: 20,
+ position: 'fixed',
+ width: '310px',
+ height: 'auto',
+ margin: 0,
+ padding: 0,
+ listStyleType: 'none',
+ zIndex: 10000000
+ });
+
+ if (window.innerWidth < 600) {
+ $(this).css({
+ right: 5
+ });
+ }
+ }
+ },
+ parent: {
+ object: '<li />',
+ selector: 'li',
+ css: {}
+ },
+ css: {
+ display: 'none',
+ width: '310px'
+ },
+ addClass: ''
+ };
+
+})(jQuery);
56 js/noty/layouts/center.js
View
@@ -0,0 +1,56 @@
+;(function($) {
+
+ $.noty.layouts.center = {
+ name: 'center',
+ options: { // overrides options
+
+ },
+ container: {
+ object: '<ul id="noty_center_layout_container" />',
+ selector: 'ul#noty_center_layout_container',
+ style: function() {
+ $(this).css({
+ position: 'fixed',
+ width: '310px',
+ height: 'auto',
+ margin: 0,
+ padding: 0,
+ listStyleType: 'none',
+ zIndex: 10000000
+ });
+
+ // getting hidden height
+ var dupe = $(this).clone().css({visibility:"hidden", display:"block", position:"absolute", top: 0, left: 0}).attr('id', 'dupe');
+ $("body").append(dupe);
+ dupe.find('.i-am-closing-now').remove();
+ dupe.find('li').css('display', 'block');
+ var actual_height = dupe.height();
+ dupe.remove();
+
+ if ($(this).hasClass('i-am-new')) {
+ $(this).css({
+ left: ($(window).width() - $(this).outerWidth()) / 2 + 'px',
+ top: ($(window).height() - actual_height) / 2 + 'px'
+ });
+ } else {
+ $(this).animate({
+ left: ($(window).width() - $(this).outerWidth()) / 2 + 'px',
+ top: ($(window).height() - actual_height) / 2 + 'px'
+ }, 500);
+ }
+
+ }
+ },
+ parent: {
+ object: '<li />',
+ selector: 'li',
+ css: {}
+ },
+ css: {
+ display: 'none',
+ width: '310px'
+ },
+ addClass: ''
+ };
+
+})(jQuery);
61 js/noty/layouts/centerLeft.js
View
@@ -0,0 +1,61 @@
+;(function($) {
+
+ $.noty.layouts.centerLeft = {
+ name: 'centerLeft',
+ options: { // overrides options
+
+ },
+ container: {
+ object: '<ul id="noty_centerLeft_layout_container" />',
+ selector: 'ul#noty_centerLeft_layout_container',
+ style: function() {
+ $(this).css({
+ left: 20,
+ position: 'fixed',
+ width: '310px',
+ height: 'auto',
+ margin: 0,
+ padding: 0,
+ listStyleType: 'none',
+ zIndex: 10000000
+ });
+
+ // getting hidden height
+ var dupe = $(this).clone().css({visibility:"hidden", display:"block", position:"absolute", top: 0, left: 0}).attr('id', 'dupe');
+ $("body").append(dupe);
+ dupe.find('.i-am-closing-now').remove();
+ dupe.find('li').css('display', 'block');
+ var actual_height = dupe.height();
+ dupe.remove();
+
+ if ($(this).hasClass('i-am-new')) {
+ $(this).css({
+ top: ($(window).height() - actual_height) / 2 + 'px',
+ });
+ } else {
+ $(this).animate({
+ top: ($(window).height() - actual_height) / 2 + 'px'
+ }, 500);
+ }
+
+ if (window.innerWidth < 600) {
+ $(this).css({
+ left: 5
+ });
+ }
+
+ }
+ },
+ parent: {
+ object: '<li />',
+ selector: 'li',
+ css: {}
+ },
+ css: {
+ display: 'none',
+ width: '310px'
+ },
+ addClass: ''
+ };
+
+})(jQuery);
61 js/noty/layouts/centerRight.js
View
@@ -0,0 +1,61 @@
+;(function($) {
+
+ $.noty.layouts.centerRight = {
+ name: 'centerRight',
+ options: { // overrides options
+
+ },
+ container: {
+ object: '<ul id="noty_centerRight_layout_container" />',
+ selector: 'ul#noty_centerRight_layout_container',
+ style: function() {
+ $(this).css({
+ right: 20,
+ position: 'fixed',
+ width: '310px',
+ height: 'auto',
+ margin: 0,
+ padding: 0,
+ listStyleType: 'none',
+ zIndex: 10000000
+ });
+
+ // getting hidden height
+ var dupe = $(this).clone().css({visibility:"hidden", display:"block", position:"absolute", top: 0, left: 0}).attr('id', 'dupe');
+ $("body").append(dupe);
+ dupe.find('.i-am-closing-now').remove();
+ dupe.find('li').css('display', 'block');
+ var actual_height = dupe.height();
+ dupe.remove();
+
+ if ($(this).hasClass('i-am-new')) {
+ $(this).css({
+ top: ($(window).height() - actual_height) / 2 + 'px',
+ });
+ } else {
+ $(this).animate({
+ top: ($(window).height() - actual_height) / 2 + 'px'
+ }, 500);
+ }
+
+ if (window.