merged docs repo into main repo
This commit is contained in:
Jaime Pillora
@@ -0,0 +1,86 @@
|
||||
//- ====================================
|
||||
//- API
|
||||
//- ====================================
|
||||
.sixteen.columns
|
||||
h3 API
|
||||
|
||||
.entry
|
||||
h5
|
||||
code.black $.notify(
|
||||
code string|object
|
||||
code.black , [
|
||||
code options
|
||||
code.black ])
|
||||
p.indent1
|
||||
code string|object
|
||||
| - global notification data
|
||||
br
|
||||
code options
|
||||
| - an options object or class name string
|
||||
|
||||
.entry
|
||||
h5
|
||||
code.black $.notify(
|
||||
code element
|
||||
code.black ,
|
||||
code string|object
|
||||
code.black , [
|
||||
code options
|
||||
code.black ])
|
||||
p.indent1
|
||||
code element
|
||||
| - a jquery element
|
||||
br
|
||||
code string|object
|
||||
| - element notification data
|
||||
br
|
||||
code options
|
||||
| - an options object or class name string
|
||||
|
||||
.entry
|
||||
h5
|
||||
code.black $(
|
||||
code selector
|
||||
code.black ).notify(
|
||||
code string|object
|
||||
code.black , [
|
||||
code options
|
||||
code.black ])
|
||||
p.indent1
|
||||
code selector
|
||||
| - jquery selector
|
||||
br
|
||||
code string|object
|
||||
| - element notification data
|
||||
br
|
||||
code options
|
||||
| - an options object or class name string
|
||||
|
||||
|
||||
.entry
|
||||
h5
|
||||
code.black $.notify.addStyle(
|
||||
code styleName
|
||||
code.black ,
|
||||
code styleDefinition
|
||||
code.black )
|
||||
p.indent1
|
||||
code styleName
|
||||
| - string (the
|
||||
b style
|
||||
| option references this name)
|
||||
br
|
||||
|
|
||||
code styleDefinition
|
||||
| - style definition object (see
|
||||
b Styling
|
||||
| below)
|
||||
|
||||
.entry
|
||||
h5
|
||||
code.black $.notify.defaults(
|
||||
code options
|
||||
code.black )
|
||||
p.indent1
|
||||
code options
|
||||
| - an options object (updates the defaults listed below)
|
||||
@@ -0,0 +1,39 @@
|
||||
//- ====================================
|
||||
//- CONTRIBUTING
|
||||
//- ====================================
|
||||
.sixteen.columns
|
||||
h3 Contributing More Styles
|
||||
|
||||
p
|
||||
| Contributing more styles is easy!
|
||||
ol
|
||||
li.
|
||||
Click <a href="https://github.com/jpillora/notifyjs/new/master/src/styles" target="_blank">this</a> link
|
||||
li Sign into GitHub (if you're not already)
|
||||
li Click 'Fork'
|
||||
li Enter your new style
|
||||
li Click 'Commit New File'
|
||||
li Click 'Send Pull Request'!
|
||||
|
||||
p
|
||||
| To get people started with some styles ideas, checkout this
|
||||
a(href="http://mac.appstorm.net/roundups/utilities-roundups/36-sweet-growl-styles-to-keep-your-notifications-snappy/", target="_blank") post on various Growl styles
|
||||
| .
|
||||
|
||||
p.italic
|
||||
| Note: If you wish to contribute to the library by fixing bugs or adding features,
|
||||
| see the
|
||||
b src
|
||||
| folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript.
|
||||
| I'm using
|
||||
a(href="https://gruntjs.com", target="_blank") Grunt
|
||||
| to compile, minify and concat the builds, you can do so with:
|
||||
ol
|
||||
li
|
||||
| Fork
|
||||
a(href="https://github.com/jpillora/notifyjs") https://github.com/jpillora/notifyjs
|
||||
li: code cd notifyjs
|
||||
li: code npm install -g grunt-cli
|
||||
li: code npm install
|
||||
li: code grunt
|
||||
li Pull-request !
|
||||
@@ -0,0 +1,67 @@
|
||||
//- ====================================
|
||||
//- DOWNLOAD
|
||||
//- ====================================
|
||||
.eight.columns
|
||||
h3 Download
|
||||
|
||||
p
|
||||
| Download pre-packaged with the bootstrap notification style:
|
||||
br
|
||||
a(href="dist/notify-combined.min.js", data-download, data-name="notify.min")
|
||||
button Download notify.min.js
|
||||
|
||||
a(href="dist/notify-combined.js", data-download, data-name="notify")
|
||||
button Download notify.js
|
||||
|
||||
p
|
||||
| Or, create a custom build with a different style
|
||||
br
|
||||
button(disabled="disabled").build-tool-loading
|
||||
| Loading...
|
||||
button.build-tool-toggle
|
||||
| Build a custom notify.js
|
||||
|
||||
.sixteen.columns.build-tool(ng-app,ng-controller="BuildController")
|
||||
|
||||
p.center
|
||||
| Notify.js Core
|
||||
button.active(disabled="disabled") Include
|
||||
|
||||
hr
|
||||
|
||||
p
|
||||
span.bold Styles
|
||||
br
|
||||
|
||||
.build-tool-style(ng-repeat="style in styles")
|
||||
|
||||
div
|
||||
textarea.code(ng-model="style.code")
|
||||
|
||||
div.right
|
||||
button(ng-click="active(style,'active')", ng-class="style.active && 'active'") Include
|
||||
button(ng-click="useDefault(style)", ng-class="settings.default == style && 'active'") Default
|
||||
button.test(ng-click="test($event,style,false)") Test Element
|
||||
button.test(ng-click="test($event,style,true)") Test Global
|
||||
button(ng-click="delete($index)") Delete
|
||||
|
||||
.build-tool-controls.center
|
||||
|
||||
button(ng-click="addStyle()") Add Style
|
||||
select(ng-options="p.name for p in premadeStyles", ng-model="premadeStyle")
|
||||
button(ng-click="loadStyle()") Load Style
|
||||
span.italic Contribute more styles !
|
||||
|
||||
hr
|
||||
|
||||
p.center
|
||||
| Minify
|
||||
button(ng-click="active(settings,'minify')", ng-class="settings.minify && 'active'") Minify this build
|
||||
|
||||
hr
|
||||
|
||||
p.center
|
||||
button(ng-click="build()", ng-bind="building && 'Building...' || 'Download this build'")
|
||||
span.italic.indent2
|
||||
| Made with
|
||||
a(href="https://github.com/jpillora/compilejs",target="_blank") Compile.js
|
||||
@@ -0,0 +1,31 @@
|
||||
//- ====================================
|
||||
//- USAGE
|
||||
//- ====================================
|
||||
.sixteen.columns
|
||||
h4 Notification Styles
|
||||
|
||||
p.
|
||||
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:
|
||||
|
||||
div
|
||||
span Success
|
||||
pre.prettyprint.runnable.indent1
|
||||
| $.notify("Access granted", "success");
|
||||
span Info
|
||||
pre.prettyprint.runnable.indent1
|
||||
| $.notify("Do not press this button", "info");
|
||||
span Warning
|
||||
pre.prettyprint.runnable.indent1
|
||||
| $.notify("Warning: Self-destruct in 3.. 2..", "warn");
|
||||
span Error
|
||||
pre.prettyprint.runnable.indent1
|
||||
| $.notify("BOOM!", "error");
|
||||
|
||||
p.italic(style="margin-top:10px")
|
||||
| Note: This page has set the default class to
|
||||
code "success"
|
||||
| with
|
||||
code $.notify.defaults({ className: "success" });
|
||||
| .
|
||||
@@ -0,0 +1,42 @@
|
||||
//- ====================================
|
||||
//- OPTIONS
|
||||
//- ====================================
|
||||
.sixteen.columns
|
||||
h3 Options
|
||||
|
||||
p
|
||||
| The options object listed above are in the form below.
|
||||
| This object below is the actual used to check option
|
||||
| validity and set defaults.
|
||||
|
||||
pre.prettyprint.
|
||||
{
|
||||
// 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
|
||||
}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
|
||||
//- ====================================
|
||||
//- POSITIONING
|
||||
//- ====================================
|
||||
.sixteen.columns(id="position")
|
||||
h3 Positioning
|
||||
|
||||
p
|
||||
| Element notifications and Global notifications can
|
||||
| be vertically repositioned to:
|
||||
code "top"
|
||||
| ,
|
||||
code "middle"
|
||||
| or
|
||||
code "bottom"
|
||||
| and horozontally repositioned to:
|
||||
code "left"
|
||||
| ,
|
||||
code "center"
|
||||
| or
|
||||
code "right"
|
||||
| .
|
||||
|
||||
p: pre.prettyprint.runnable
|
||||
| $(".pos-demo").notify(
|
||||
| "I'm left of the box",
|
||||
| { position:"left" }
|
||||
| );
|
||||
|
||||
p.center
|
||||
| We can position the notification around this
|
||||
span.box.pos-demo box
|
||||
|
||||
p(style='padding-top: 30px') Use this positioning tool to see all possible position combinations
|
||||
|
||||
div(style="padding: 30px;")
|
||||
label.inline(for="pos-elem") Element
|
||||
input(type="radio", id="pos-elem", value="elem", name="pos-type", checked="checked")
|
||||
label.inline(for="pos-glob") Global
|
||||
input(type="radio", id="pos-glob", value="glob", name="pos-type")
|
||||
|
||||
div(style="margin-left: 60px")
|
||||
input.pos-chooser(data-thickness=".3",
|
||||
data-width='100',
|
||||
data-height='100',
|
||||
data-max="12",
|
||||
data-cursor="true",
|
||||
data-fgColor='#080',
|
||||
data-displayInput="false",
|
||||
data-angleOffset='-15',
|
||||
data-linecap='round')
|
||||
p.center
|
||||
span An awesome cool
|
||||
span.box.pos-chooser-demo larrrggggeeee box
|
||||
|
||||
@@ -0,0 +1,255 @@
|
||||
//- ====================================
|
||||
//- STYLING
|
||||
//- ====================================
|
||||
.sixteen.columns
|
||||
|
||||
.section
|
||||
|
||||
h3 Custom Styling Guide
|
||||
|
||||
p
|
||||
| You can add your own styles to Notify.js with the
|
||||
code $.notify.addStyle
|
||||
| method. See
|
||||
a(data-highlight) API
|
||||
| .
|
||||
|
||||
p Style definition objects are in the form:
|
||||
|
||||
pre.prettyprint.
|
||||
{
|
||||
//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: ""
|
||||
}
|
||||
|
||||
p
|
||||
h5.inline html
|
||||
| - If you only have HTML element that you need to modify per
|
||||
| notification then you should give this element an attribute of
|
||||
code data-notify-text
|
||||
| or
|
||||
code data-notify-html
|
||||
| . Use
|
||||
code data-notify-html
|
||||
| if you wish to display arbitrary HTML inside the notification,
|
||||
| otherwise, use
|
||||
code data-notify-text
|
||||
| as it is more secure.
|
||||
br
|
||||
| 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
|
||||
b as well as a value
|
||||
| . For an example of this see the Advanced Example below.
|
||||
|
||||
p
|
||||
h5.inline classes
|
||||
| - This object will be used to construct css. It must be in the form described above and there is an example below.
|
||||
p
|
||||
h5.inline css
|
||||
| - This string is simply raw css. Use this property if you want to keep your style definition inside
|
||||
| your js files.
|
||||
|
||||
|
||||
.section
|
||||
h4 Class naming convention
|
||||
p.
|
||||
When each notification is constructed, it's container
|
||||
(outer most element defined in your style html) will automatically
|
||||
apply the class:
|
||||
p
|
||||
code notifyjs-<style name>-base
|
||||
p
|
||||
| When you use the class name option (
|
||||
code className
|
||||
| ) the class:
|
||||
p
|
||||
code notifyjs-<style name>-<class name>
|
||||
p.
|
||||
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.
|
||||
|
||||
.section
|
||||
|
||||
h4 Simple Example
|
||||
|
||||
p If you were to define the style:
|
||||
pre.prettyprint.auto-run.happyblue-example.
|
||||
$.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"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
p
|
||||
| Upon running this code, the
|
||||
code classes
|
||||
| object in this example will be converted the following css:
|
||||
pre.prettyprint.lang-css.
|
||||
.notifyjs-happyblue-base {
|
||||
white-space: nowrap;
|
||||
background-color: lightblue;
|
||||
padding: 5px;
|
||||
}
|
||||
.notifyjs-happyblue-superblue {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
p:i You can confirm this now by inspecting the DOM (look for the tagged style element in the head)
|
||||
|
||||
p You can now use your new style with:
|
||||
pre.prettyprint.runnable.
|
||||
$.notify('hello !!', {
|
||||
style: 'happyblue'
|
||||
});
|
||||
|
||||
p
|
||||
| and you can use the
|
||||
code superblue
|
||||
| class with:
|
||||
pre.prettyprint.runnable.
|
||||
$.notify('HELLO !!!!', {
|
||||
style: 'happyblue',
|
||||
className: 'superblue'
|
||||
});
|
||||
|
||||
.section
|
||||
|
||||
h4 Advanced Example
|
||||
|
||||
p Say you wanted to use buttons in your notifications then you could do something like:
|
||||
|
||||
pre.prettyprint.auto-run.button-js-example.
|
||||
//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');
|
||||
});
|
||||
|
||||
p
|
||||
| Notice there is no
|
||||
code classes
|
||||
| property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead:
|
||||
p.italic
|
||||
| Note: you could also convert this CSS code to a JavaScript string and use it with the
|
||||
code css
|
||||
| property. It's not very readable though it's better for distribution.
|
||||
|
||||
pre.prettyprint.auto-add.foo-css-example.lang-css.
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
p You can now use this style with:
|
||||
|
||||
pre.prettyprint.runnable.
|
||||
$.notify({
|
||||
title: 'Would you like some Foo ?',
|
||||
button: 'Confirm'
|
||||
}, {
|
||||
style: 'foo',
|
||||
autoHide: false,
|
||||
clickToHide: false
|
||||
});
|
||||
|
||||
.section
|
||||
|
||||
h4 Extra Example
|
||||
|
||||
p.
|
||||
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 <code>data-notify-html</code> attribute):
|
||||
|
||||
pre.prettyprint.runnable.
|
||||
|
||||
var h5 = $("<h5/>").append("You MUST have some Foo !")
|
||||
|
||||
$.notify({
|
||||
title: h5,
|
||||
button: 'YES !'
|
||||
}, {
|
||||
style: 'foo',
|
||||
autoHide: false,
|
||||
clickToHide: false
|
||||
});
|
||||
|
||||
.section
|
||||
|
||||
h4 Style List
|
||||
|
||||
p
|
||||
ul.square
|
||||
li: a(href="https://github.com/jpillora/notifyjs/tree/master/dist/styles/bootstrap", target="_blank") bootstrap
|
||||
ul.square
|
||||
li: a(href="https://github.com/jpillora/notifyjs/tree/master/dist/styles/metro", target="_blank") metro
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
//- ====================================
|
||||
//- SUMMARY
|
||||
//- ====================================
|
||||
.eight.columns.summary
|
||||
h3 Summary
|
||||
p
|
||||
| Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.
|
||||
| The javascript code snippets in this documentation with the
|
||||
code green
|
||||
| edge are runnable by clicking them.
|
||||
|
||||
p: pre.prettyprint.runnable
|
||||
| $.notify("Hello World");
|
||||
|
||||
img.demo-mouse(src='docs/img/pointer.png')
|
||||
@@ -0,0 +1,31 @@
|
||||
|
||||
//- ====================================
|
||||
//- USAGE
|
||||
//- ====================================
|
||||
.sixteen.columns
|
||||
h3 Basic Usage
|
||||
|
||||
.eight.columns
|
||||
h4 Element Notifications
|
||||
|
||||
p You can place notifications on any element:
|
||||
|
||||
p: pre.prettyprint.runnable
|
||||
| $(".elem-demo").notify("Hello Box");
|
||||
|
||||
p.center
|
||||
| Like this
|
||||
span.box.elem-demo box
|
||||
|
||||
.eight.columns
|
||||
h4 Global Notifications
|
||||
|
||||
p
|
||||
| If you don't specify an element, notification
|
||||
| will appear in the top left (unless you specify a
|
||||
| different position - See
|
||||
a(data-highlight) Positioning
|
||||
| )
|
||||
|
||||
p: pre.prettyprint.runnable
|
||||
| $.notify("I'm over here !");
|
||||
Reference in New Issue
Block a user