Nonstop Progressive Marxism

    simple-notifications-solution

    1.2.2 • Public • Published

    Travis (.org) Codecov Github file size

    Simple Notifications Solution

    A simple solution for notifications.

    It provides a simple notifications system with two kinds of possible behavior.

    Some notifications should close themselves without any action from the user.

    Some require clicking on the close button.

    All closed notifications should be removed from the DOM. The notifications may be on the page when it loads or may be added at any other moment.

    It does not use any JavaScript library. The demo uses BULMA css framework.

    Demo

    You can find the demo here.

    How?

    The script uses the animationstart listener for the dynamically added notifications.

    Installation

    The dist folder contains the ready for production minified files: Notifications.js and Notifications.css

    <head>
      ...
      <link rel="stylesheet" href="dist/Notifications.css">
      <style>
        /* override styles here */
      </style> 
    </head>
    <body>
      <p class="notification" data-close="self">Self-closing notification</p>
      <p class="notification">
        This one needs user's action.
        <button class="delete" type="button">Close</button>
      </p>
      <!-- Bottom of body -->
      <script src="dist/Notifications.js"></script> 
      <script>
        var notifications = new Notifications(".notification");
        notifications.init();
      </script> 
    </body>

    You can also use the cdn solution

    <head>
      ...
      <link rel="stylesheet" href="https://unpkg.com/simple-notifications-solution/dist/Notifications.css">
      <style>
        /* override styles here */
      </style> 
    </head>
    <body>
      <p class="notification" data-close="self">Self-closing notification</p>
      <p class="notification">
        This one needs user's action.
        <button class="delete" type="button">Close</button>
      </p>
      <!-- Bottom of body -->
      <script src="https://unpkg.com/simple-notifications-solution/dist/Notifications.js"></script> 
      <script>
        var notifications = new Notifications(".notification");
        notifications.init();
      </script> 
    </body>

    npm:

    npm install simple-notifications-solution

    Usage:

    The recommended markups for a notification are like that:

    <!-- self closing notification -->
    <p class="notification" data-close="self">Self-closing notification</p>
    <!-- or -->
    <div class="notification" data-close="self">Self-closing notification</div>
    <!-- notification with close button -->
    <p class="notification">
      This one needs user's action.
      <button class="delete" type="button" >Close</button>
    </p>
    <!-- or -->
    <div class="notification">
      This one needs user's action.
      <button class="delete"  type="button" aria-label="Close">Close</button>
    </div>

    You have to use the notification class since it's used in the .css file. You need to add the data-close="self" attribute to your notification if you want it to close automatically.

    To activate the notifications add the following:

    var notifications = new Notifications();
    notifications.init();

    You can check it on Codepen here.

    Customization

    You can initiate Notifications with some options, the available options are:

    {
      // the animation-name for the 'in' animation - you will need to modify the .notification in your css accordingly
      animationInName: 'slidein',
      // the animation-name for the self-closing notifications - you will have to add the @keyframes declaration in your css
      animationOutSelf: 'slideout 1s',
      // the animation-name for animation used to remove the notification on click - you will have to add the @keyframes declaration in your css
      animationOutClose: 'fadeout 1s',
      // the selector for the closing element
      closeButtonSelector: '.delete',
      // whether you can also close the self-closing notification by clicking on it
      closeSelfOnClick: true,
      // the vertical distance from the top of the viewport
      startTopPosition: 8,
      // the vertical gap between the notifications as they appear on the screen
      gap: 8,
      // the waiting time before removing a notification, i - is the number of notifications before the current one
      delayFunction: (i) => 3 + 2*i,
      // the transition used when a notification moves up
      topTransition: 'top .75s ease-in-out'
    }

    Example:

    <style>
    @keyframes scaleup {
      0% {
        transform: scale(1)
      }
      100% {
        transform: scale(3);
        opacity: 0
      }
    }
     
    @keyframes scaledown {
      0% {
        transform: scale(1)
      }
      100% {
        transform: scale(0);
        opacity: 0
      }
    }
    </style> 
    <script>
    var options = {
      animationOutSelf: 'scaleup 1s',
      animationOutClose: 'scaledown 0.5s',
      delayFunction: function(i){return i+1}
    }
    var notifications = new Notifications(".notification", options);
    notifications.init();
    </script> 
     

    A Codepen demo is available here.

    <style>
    .notification {
      animation-name: fadein;
      animation-duration: 1s;
    }
     
    @keyframes fadein {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    </style> 
    <script>
    var notifications = new Notifications(".notification", {animationInName: "fadein"});
    notifications.init();
    </script> 

    A Codepen demo is available here.

    Install

    npm i simple-notifications-solution

    DownloadsWeekly Downloads

    469

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    26.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • pehaa