diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index c627313..0000000 --- a/docs/index.html +++ /dev/null @@ -1,469 +0,0 @@ - - - - - Notify.js - - - - - - - Fork me on GitHub -
-
-

Notify.js

-
-
- - -
-
-
-

Summary

-

- Notify.js is a jQuery plugin to provide simple yet fully customisable notifications. - The javascript code snippets in this documentation with the green edge are runnable by clicking them. -

-

- 

$.notify("Hello World");
-

-
-
-

Download

-

Download pre-packaged with the Bootstrap notification style:
- -

-

Or, create a custom build with your own style
- - -

-
-
-

Notify.js Core - -

-
-

Styles
-

-
- -
-
- - - - -
-
-
- - - Contribute more styles ! -
-

-
-

Minify - -

-
-

- Made with Compile.js -

-
-
-

Basic Usage

-
-
-

Element Notifications

-

You can place notifications on any element:

-

- 

$(".elem-demo").notify("Hello Box");
-

-

Like this box

-
-
-

Global Notifications

-

- - If you don't specify an element, notification - will appear in the top left (unless you specify a - different position - See Positioning) -

-

- 

$.notify("I'm over here !");
-

-
-
-

Notification Styles

-

- Each style may define a set of classes to use to substyle the notification. - The pre-packaged version includes a bootstrap notification style (see more below in Styling). - These classes include: - -

-
Success - 
$.notify("Access granted", "success");
Info - 
$.notify("Do not press this button", "info");
Warning - 
$.notify("Warning: Self-destruct in 3.. 2..", "warn");
Error - 
$.notify("BOOM!", "error");
-
-

Note: This page has set the default class to"success" with$.notify.defaults({ className: "success" });.

-
-
-

Positioning

-

- Element notifications and Global notifications can - be vertically repositioned to: "top", "middle" or "bottom" and horozontally repositioned to: "left", "center" or "right" . -

-

- 

$(".pos-demo").notify(
-  "I'm left of the box", 
-  { position:"left" }
-);
-

-

We can position the notification around this box

-

Use this positioning tool to see all possible position combinations

-
- - - - -
-
- -
-

An awesome cool larrrggggeeee box

-
-
-

API

-
-
$.notify( string|object, [ options ])
-

string|object - global notification data
options - an options object or class name string

-
-
-
$.notify( element, string|object, [ options ])
-

element - a jquery element
string|object - element notification data
options - an options object or class name string

-
-
-
$( selector ).notify( string|object, [ options ])
-

selector - jquery selector
string|object - element notification data
options - an options object or class name string

-
-
-
$.notify.addStyle( styleName, styleDefinition )
-

styleName - string (the style option references this name)
styleDefinition - style definition object (see Styling below)

-
-
-
$.notify.defaults( options )
-

options - an options object (updates the defaults listed below)

-
-
-
-

Options

-

- - The options object listed above are in the form below. - This object below is the actual used to check option - validity and set defaults. -

- 
{
-  // whether to hide the notification on click
-  clickToHide: true,
-  // whether to auto-hide the notification
-  autoHide: true,
-  // if autoHide, hide after milliseconds
-  autoHideDelay: 5000,
-  // show the arrow pointing at the element
-  arrowShow: true,
-  // arrow size in pixels
-  arrowSize: 5,
-  // default positions
-  elementPosition: 'bottom left',
-  globalPosition: 'top right',
-  // default style
-  style: 'bootstrap',
-  // default class (string or [string])
-  className: 'error',
-  // show animation
-  showAnimation: 'slideDown',
-  // show animation duration
-  showDuration: 400,
-  // hide animation
-  hideAnimation: 'slideUp',
-  // hide animation duration
-  hideDuration: 200,
-  // padding between element and notification
-  gap: 2
-}
-
-
-
-
-

Custom Styling Guide

-

You can add your own styles to Notify.js with the$.notify.addStyle method. See API.

-

Style definition objects are in the form:

- 
{
-  //required html representing each notification 
-  html: "",
-  //optional object to be converted to css
-  classes: {
-    <className>: {
-      <propertyName>: <value> 
-    },
-    <className>: {
-      ...
-    },
-    ...
-  },
-  //optional css to be inserted onto the page
-  css: ""
-}
-
-

-

html
- If you only have HTML element that you need to modify per - notification then you should give this element an attribute of data-notify-text or data-notify-html. Use data-notify-html if you wish to display arbitrary HTML inside the notification, - otherwise, use data-notify-text as it is more secure.
Otherwise, if you wish to modify multiple HTML elements per - notification then you'll need to give each element one of the two - attributes above as well as a value. For an example of this see the Advanced Example below. -

-

-

classes
- This object will be used to construct css. It must be in the form described above and there is an example below. -

-

-

css
- This string is simply raw css. Use this property if you want to keep your style definition inside - your js files. -

-
-
-

Class naming convention

-

- When each notification is constructed, it's container - (outer most element defined in your style html) will automatically - apply the class: -

-

notifyjs-<style name>-base

-

- - When you use the class name option (className) the class: -

-

notifyjs-<style name>-<class name>

-

- will be applied. So if you define your styles in an external CSS file or in the style's css - property, you must define your CSS rules using this naming convention. - -

-
-
-

Simple Example

-

If you were to define the style:

- 
$.notify.addStyle('happyblue', {
-  html: "<div>☺<span data-notify-text/>☺</div>",
-  classes: {
-    base: {
-      "white-space": "nowrap",
-      "background-color": "lightblue",
-      "padding": "5px"
-    },
-    superblue: {
-      "color": "white",
-      "background-color": "blue"
-    }
-  }
-});
-
-

Upon running this code, the classes object in this example will be converted the following css:

- 
.notifyjs-happyblue-base {
-  white-space: nowrap;
-  background-color: lightblue;
-  padding: 5px;
-}
-.notifyjs-happyblue-superblue {
-  color: white;
-  background-color: blue;
-}
- You can confirm this now by inspecting the DOM (look for the tagged style element in the head) -

You can now use your new style with:

- 
$.notify('hello !!', {
-  style: 'happyblue'
-});
-
-

- - and you can use the superblue class with: -

- 
$.notify('HELLO !!!!', {
-  style: 'happyblue',
-  className: 'superblue'
-});
-
-
-
-

Advanced Example

-

Say you wanted to use buttons in your notifications then you could do something like:

- 
//add a new style 'foo'
-$.notify.addStyle('foo', {
-  html: 
-    "<div>" +
-      "<div class='clearfix'>" +
-        "<div class='title' data-notify-html='title'/>" +
-        "<div class='buttons'>" +
-          "<button class='no'>Cancel</button>" +
-          "<button class='yes' data-notify-text='button'></button>" +
-        "</div>" +
-      "</div>" +
-    "</div>"
-});
-
-//listen for click events from this style
-$(document).on('click', '.notifyjs-foo-base .no', function() {
-  //programmatically trigger propogating hide event
-  $(this).trigger('notify-hide');
-});
-$(document).on('click', '.notifyjs-foo-base .yes', function() {
-  //show button text
-  alert($(this).text() + " clicked!");
-  //hide notification
-  $(this).trigger('notify-hide');
-});
-
-

- - Notice there is no classes property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead: -

-

Note: you could also convert this CSS code to a JavaScript string and use it with the css property. It's not very readable though it's better for distribution.

- 
.notifyjs-foo-base {
-  opacity: 0.85;
-  width: 200px;
-  background: #F5F5F5;
-  padding: 5px;
-  border-radius: 10px;
-}
-
-.notifyjs-foo-base .title {
-  width: 100px;
-  float: left;
-  margin: 10px 0 0 10px;
-  text-align: right;
-}
-
-.notifyjs-foo-base .buttons {
-  width: 70px;
-  float: right;
-  font-size: 9px;
-  padding: 5px;
-  margin: 2px;
-}
-
-.notifyjs-foo-base button {
-  font-size: 9px;
-  padding: 5px;
-  margin: 2px;
-  width: 60px;
-}
-
-

You can now use this style with:

- 
$.notify({
-  title: 'Would you like some Foo ?',
-  button: 'Confirm'
-}, { 
-  style: 'foo',
-  autoHide: false,
-  clickToHide: false
-});
-
-
-
-

Extra Example

-

- If using the above methods still don't provide you - with what you need then you can, pass jQuery objects - straight into the notification (provided that the - element has the data-notify-html attribute): - -

- 
var h5 = $("<h5/>").append("You MUST have some Foo !")
-
-$.notify({
-  title: h5,
-  button: 'YES !'
-}, { 
-  style: 'foo',
-  autoHide: false,
-  clickToHide: false
-});
-
-
-
-

Style List

-

Currently there is only one style available -

-

-
-
-
-

Contributing More Styles

-

- - Contributing more styles is easy! -

    -
  1. Click this link
    2. -
  2. Sign into GitHub (if you're not already)
    3. -
  3. Click 'Fork'
    4. -
  4. Enter your new style
    5. -
  5. Click 'Commit New File'
    6. -
  6. Click 'Send Pull Request'!
    7. -
-

-

To get people started with some styles ideas, checkout this post on various Growl styles.

-

- Note: If you wish to contribute to the library by fixing bugs or adding features, - see the src folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript. - I'm using Grunt to compile, minify and concat the builds, you can do so with: -

    -
  1. Fork https://github.com/jpillora/notifyjs
    2. -
  2. cd notifyjs
    3. -
  3. npm install -g grunt-cli
    4. -
  4. npm install
    5. -
  5. grunt
    6. -
  6. Pull-request !
    7. -
-

-
-
- - - - - - - - - - \ No newline at end of file diff --git a/docs/js/app.js b/docs/js/app.js index fda1ff8..27e576f 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -969,7 +969,7 @@ PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\ $(".prettyprint.auto-run").each(runSnippet); $(".prettyprint.auto-add").each(addCSS); $.notify.addStyle('gswg', { - html: "
\n
\n
\n
\n
Read my book:
\n
Getting Started with Grunt: The JavaScript Task Runner
\n
Get the first chapter for free!
\n
\n \n \n \n \n
\n
\n
\n
" + html: "
\n
\n
\n
\n
Checkout
\n
Getting Started with Grunt: The JavaScript Task Runner
\n
Get the first chapter for free!
\n
\n \n \n \n \n
\n
\n
\n
" }); $(document).on('click', '.notifyjs-gswg-base button', function() { return $(this).trigger('notify-hide'); @@ -978,7 +978,7 @@ PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\ return $.notify("http://gswg.io", { position: 'b r', style: 'gswg', - autoHide: false, + autoHideDelay: 10 * 1000, clickToHide: false }); }, 15 * 1000); diff --git a/docs/src/scripts/code-runner.coffee b/docs/src/scripts/code-runner.coffee index f568906..eecee42 100644 --- a/docs/src/scripts/code-runner.coffee +++ b/docs/src/scripts/code-runner.coffee @@ -42,7 +42,7 @@ App.codeRunner = ->
-
Read my book:
+
Checkout
Getting Started with Grunt: The JavaScript Task Runner
Get the first chapter for free!
@@ -60,9 +60,5 @@ App.codeRunner = -> $(this).trigger('notify-hide') setTimeout -> - $.notify("http://gswg.io", {position:'b r', style: 'gswg', autoHide: false, clickToHide: false}) + $.notify("http://gswg.io", {position:'b r', style: 'gswg', autoHideDelay: 10*1000, clickToHide: false}) , 15*1000 - - - - diff --git a/docs/src/views/index.jade b/docs/src/views/index.jade index d0f5d26..01d6e76 100644 --- a/docs/src/views/index.jade +++ b/docs/src/views/index.jade @@ -16,7 +16,7 @@ html(lang='en') body - a(href="https://github.com/jpillora/notifyjs") + a(href="https://github.com/notifyjs/notifyjs") img(style="position: absolute; top: 0; right: 0; border: 0;", src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png", alt="Fork me on GitHub") @@ -28,10 +28,8 @@ html(lang='en') h1.title Notify.js .eight.columns.right - span: iframe(src="http://ghbtns.com/github-btn.html?user=jpillora&type=follow", - allowtransparency="true",frameborder="0",scrolling="0",width="130",height="20") - span: iframe(src="http://ghbtns.com/github-btn.html?user=jpillora&repo=notifyjs&type=watch&count=true", - allowtransparency="true",frameborder="0",scrolling="0",width="80",height="20") + span: iframe(src="http://ghbtns.com/github-btn.html?user=notifyjs&repo=notifyjs&type=watch&count=true", + allowtransparency="true",frameborder="0",scrolling="0",width="120",height="20") span a.twitter-share-button(href='https://twitter.com/share', data-url='http://notifyjs.com', data-text='Notify.js - A simple, versatile notification library', data-hashtags='notifyjs') Tweet script. @@ -56,8 +54,8 @@ html(lang='en') script(src="docs/js/app.js") //- build tool scripts - script(defered, src="#{false ? '../' : 'http://jpillora.com/'}compilejs/dist/compile.js") - script(defered, src="#{false ? '../' : 'http://jpillora.com/'}compilejs/dist/tasks/compile.uglify.js") + script(defered, src="http://jpillora.com/compilejs/dist/compile.js") + script(defered, src="http://jpillora.com/compilejs/dist/tasks/compile.uglify.js") script(defered, src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js") script. @@ -79,5 +77,3 @@ html(lang='en') })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-38709761-6', 'notifyjs.com'); ga('send', 'pageview'); - - diff --git a/docs/src/views/sections/contributing.jade b/docs/src/views/sections/contributing.jade index 8d5c486..d461b9d 100644 --- a/docs/src/views/sections/contributing.jade +++ b/docs/src/views/sections/contributing.jade @@ -8,7 +8,7 @@ | Contributing more styles is easy! ol li. - Click this link + Click this link li Sign into GitHub (if you're not already) li Click 'Fork' li Enter your new style @@ -31,7 +31,7 @@ ol li | Fork - a(href="https://github.com/jpillora/notifyjs") https://github.com/jpillora/notifyjs + a(href="https://github.com/notifyjs/notifyjs") https://github.com/notifyjs/notifyjs li: code cd notifyjs li: code npm install -g grunt-cli li: code npm install diff --git a/docs/src/views/sections/styling.jade b/docs/src/views/sections/styling.jade index 8633047..0ef2412 100644 --- a/docs/src/views/sections/styling.jade +++ b/docs/src/views/sections/styling.jade @@ -249,7 +249,7 @@ p ul.square - li: a(href="https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/bootstrap", target="_blank") bootstrap + li: a(href="https://github.com/notifyjs/notifyjs/tree/gh-pages/dist/styles/bootstrap", target="_blank") bootstrap ul.square - li: a(href="https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/metro", target="_blank") metro + li: a(href="https://github.com/notifyjs/notifyjs/tree/gh-pages/dist/styles/metro", target="_blank") metro diff --git a/index.html b/index.html index 82d335f..3312069 100644 --- a/index.html +++ b/index.html @@ -13,16 +13,15 @@ --> - Fork me on GitHub + Fork me on GitHub

Notify.js

- - +
@@ -394,10 +393,10 @@ $.notify({

Style List

@@ -406,7 +405,7 @@ $.notify({

Contributing More Styles

Contributing more styles is easy!

    -
  1. Click this link
    2. +
  2. Click this link
  3. Sign into GitHub (if you're not already)
  4. Click 'Fork'
  5. Enter your new style
    6. @@ -420,7 +419,7 @@ $.notify({ see the src folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript. I'm using Grunt to compile, minify and concat the builds, you can do so with:
      -
    1. Fork https://github.com/jpillora/notifyjs
      2. +
    2. Fork https://github.com/notifyjs/notifyjs
    3. cd notifyjs
    4. npm install -g grunt-cli
    5. npm install
      6. @@ -430,10 +429,32 @@ $.notify({

- + - + + + + - + \ No newline at end of file diff --git a/package.json b/package.json index 3aa46f3..784eb82 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "title": "Notify.js", - "name": "notify", - "version": "0.3.3", - "author": { - "name": "Jaime Pillora" - }, + "title": "Notify.js", + "name": "notify", + "version": "0.3.3", + "author": { + "name": "Jaime Pillora" + }, "contributors": [ { "name": "Evan Carroll" @@ -12,7 +12,7 @@ , "email": "me@evancarroll.com" } ], - "homepage": "http://notifyjs.com/", - "license": "MIT", + "homepage": "http://notifyjs.com/", + "license": "MIT", "main": "dist/notify.js" }