Socket
Socket
Sign inDemoInstall

notie

Package Overview
Dependencies
0
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    notie

notie - a clean and simple notification, input, and selection suite for javascript, with no dependencies


Version published
Maintainers
1
Install size
1.26 MB
Created

Readme

Source

notie

js-standard-style Join the chat at https://gitter.im/jaredreich/notie

notie is a clean and simple notification, input, and selection suite for javascript, with no dependencies. demo: https://jaredreich.com/projects/notie

With notie you can:
  • Alert users
  • Confirm user choices
  • Allow users to input information
  • Allow users to select choices
  • Allow users to select dates

Alt text

Features

  • Pure JavaScript, no dependencies
  • Easily customizable
  • Change colors to match your style/brand
  • Modify styling with the sass file (notie.scss)
  • Font size auto-adjusts based on screen size

Browser Support

  • IE 10+
  • Chrome 11+
  • Firefox 4+
  • Safari 5.1+
  • Opera 11.5+

Installation

HTML:

<head>
  ...
  <link rel="stylesheet" type="text/css" href="/path/to/notie.css">
</head>
<body>
  ...
  <!-- Bottom of body -->
  <script src="/path/to/notie.js"></script>
</body>

npm:

npm install notie

Bower:

bower install notie

Usage

notie.alert(alertType(Number|String), message(String), timeInSeconds);

notie.confirm(title(String), yesText(String), noText(String), yesCallback(Function), noCallbackOptional(Function));

notie.input(options(JSON), title(String), submitText(String), cancelText(String), submitCallback(Function), cancelCallbackOptional(Function));

notie.select(title(String), choices(Array of Objects) /*, callback1(Function), callback2(Function), ... */);

notie.date({
  initial: Date,
  yesCallback: Function,
  noCallback: Function
})

For example:

notie.alert(1, 'Success!'); // Never hides unless clicked, or escape or enter is pressed
notie.alert('success', 'Success!', 3);
notie.alert(2, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2); // Hides after 2 seconds
notie.alert('warning', 'Watch it...', 4);
notie.alert(3, 'Error.', 2.5);
notie.alert('error', 'Oops!', 1.5);
notie.alert(4, 'Information.', 3);
notie.alert('info', 'FYI, blah blah blah.', 4);


notie.confirm('Are you sure you want to do that?', 'Yes', 'Cancel', function() {
  notie.alert(1, 'Good choice!', 2);
});
notie.confirm('Are you sure?', 'Yes', 'Cancel', function() {
  notie.confirm('Are you <b>really</b> sure?', 'Yes', 'Cancel', function() {
    notie.confirm('Are you <b>really</b> <i>really</i> sure?', 'Yes', 'Cancel', function() {
      notie.alert(1, 'Okay, jeez...', 2);
    });
  });
});

notie.input({
  type: 'email'
  placeholder: 'name@example.com',
  prefilledValue: 'jane@doe.com'
}, 'Please enter your email address:', 'Submit', 'Cancel', 'email', 'name@example.com', function(valueEntered) {
  notie.alert(1, 'You entered: ' + valueEntered, 2);
});
notie.input({
  type: 'password',
  placeholder: 'Enter your password'
}, 'Please enter your password:', 'Submit', 'Cancel', function(valueEntered) {
  notie.alert(1, 'You entered: ' + valueEntered, 2);
}, function(valueEntered) {
  notie.alert(3, 'You cancelled with this value: ' + valueEntered, 2);
});

notie.select('Demo item #1, owner is Jane Smith',
[
  { title: 'Share' },
  { title: 'Open', color: '#57BF57' },
  { title: 'Edit', type: 2 },
  { title: 'Delete', type: 3 }
],
function() {
  notie.alert(1, 'Share item!', 3);
}, function() {
  notie.alert(1, 'Open item!', 3);
}, function() {
  notie.alert(2, 'Edit item!', 3);
}, function() {
  notie.alert(3, 'Delete item!', 3);
});

notie.date({
  initial: new Date(2015, 8, 27),
  yesCallback: function (date) {
    notie.alert(1, 'You selected: ' + date.toISOString(), 5)
  },
  noCallback: function (date) {
    notie.alert(3, 'You cancelled: ' + date.toISOString(), 5)
  }
})

Options

notie.setOptions({
  colorSuccess: '#57BF57',
  colorWarning: '#D6A14D',
  colorError: '#E1715B',
  colorInfo: '#4D82D6',
  colorNeutral: '#A0A0A0',
  colorText: '#FFFFFF',
  dateMonths: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'], // For other languages
  animationDelay: 300, // Be sure to also change "transition: all 0.3s ease" variable in .scss file
  backgroundClickDismiss: true
});

Other Methods

notie.alertHide(optionalCallback) // programmatically hide notie.alert with an optional callback function
notie.isShowing() // true if any element of notie is showing, false otherwise

License

MIT

Keywords

FAQs

Last updated on 19 Jul 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc