alert-js

alert-js

A small js library for alerts

####View a demo here

Alert-js is an easy way to integrate userfriendly, smoothly animated, in material design held alerts. Use them to display important information that needs to be seen NOW and let the user take actions. The action buttons have ripple effects, which are also styleable. You can show alerts with one function call and detect the clicked action just as easily. Users can also dismiss an alert by pressing esc and click the right-most action with enter. If you try to show an alert while one is already open, it gets stored in a queue and shown after the current one gets closed.

Setup

With npm:

1. At the root of your index, type npm install ripple-js into the command line.
2. Add the tag <script src="node_modules/alert-js/alert.min.js"></script> to your index file. If you want to show alerts on finished load, also add the script tag <script src="node_modules/ripple-js/ripple.min.js"></script> BEFORE!

Properties

• accentColor string
  Sets the color of the action buttons and also the ripple effect for all future alerts

  °Corresponds to the css color and ripple-color property. Click here for more information
  °Example: alert.accentColor = "green";
  °Default value: "orange"

• rippleOpacity Float
  Change the opacity of the ripple for all future alerts

  °Corresponds to the ripple-opacity property. Click here for more information
  °Example: alert.rippleOpacity = 0.3;
  °Default value: 0.6

• ripplePressExpandTime Float
  Change how long the ripple takes to fully expand while it is being pressed for all future alerts

  °Corresponds to the ripple-press-expand-time property. Click here for more information
  °Example: alert.ripplePressExpandTime = 3.3;
  °Default value: 1.5

• rippleReleaseExpandTime Float
  Set in which time the ripple completes the ripple when the user lets go of it for all future alerts

  °Corresponds to the ripple-release-expand-time property. Click here for more information
  °Example: alert.rippleReleaseExpandTime = 0.5;
  °Default value: 0.3

• rippleLeaveCollapseTime Float
  Change how long the ripple takes to cancel

  °Corresponds to the ripple-leave-collapse-time property. Click here for more information
  °Example: alert.rippleLeaveCollapseTime = 0.1;
  °Default value: 0.4

• open Boolean read-only
  True, when an alert is open and false otherwise

  °Example: var isAlertOpen = alert.open;

###Methods

• show()
  Call this function to display an alert. If an alert is already open, it gets stored in the queue

  °Parameters:
    text: String
      The text the alert should display. You can use html elements and style attributes just like in the document.
    actions: Array of Strings optional
      For every entry a corresponding button will be displayed in the alert. If ommited or empty, only an "OK" button will be displayed
    options: Object optional
      If you don't want to apply the global options to this alert, you can change the settings for only this alert with all properties (except open) described here. Possible example: {accentColor: "blue", rippleOpacity: 0.7}
    mode String optional
      Change how the queue should behave with one of the three following options:
         "replace" This clears the queue, closes the old alert and instantly shows the new one
         "next-in-queue" Instead of putting the alert at the end of the queue, this places the alert as the next one in the waiting queue
         "next" Use this to show the new alert instantly instead of the current one, but preserve the queue
  °Return value:
    The function returns a Promise, which resolves to the action the user clicked. See the examples for working code
  °Examples:
     -alert.show("Hello world"); The most simple form of an alert.
    -alert.show("We couldn't find your position for one of the following reasons:<ul><li>Your device doesn't support gps</li><li>You didn't grant us access to your position</li><li>The device can't find it's position</li></ul>"); You can use html tags just as you would expect.
    -alert.show("Do you want to switch to our mobile website?", ["No", "Yes"]); While you should build responsive websites, this approach is also possible.
    -alert.show("If you prefer green more...", [], {accentColor: "green"}); How to change the settings for only this alert. Note how actions is empty, so only "OK" will be displayed.
    -alert.show("This information is so important that it needs to be displayed instantly, instead of all other alerts!", [], {}, "replace"); This will clear the queue and display the alert instantly.
    -alert.show("Dou you want to delete this photo? There is no going back!", ["Cancel", "OK"]).then(function(action) { if(action == "OK") { //delete the photo }}); Detect what action the user clicks with this pattern.

• hide()
  Use this to hide the alert without that the user needs to take an action.

  °Example: alert.hide();

• clearQueue()
  This does what it sound like, it clears the queue of waiting alerts.

  °Example: alert.clearQueue();

Tips & Notes

• If you wan to hide the current alert and also the one in the queue, call alert.clearQueue(); before calling alert.hide();.
• This library uses my other library, ripple-js, which you can find here.
• If you use ripple-js otherwhere in your project or want to show alerts on page load, import ripple-js before importing alert-js. If those uses don't fit your use case, you don't need to import ripple-js, as it will be imported automatically.
• If you don't want to have a ripple effect, set rippleOpacity to 0.