MMT - Notifications widget

index.html

<button type="button" class="button-default show-notifications active js-show-notifications">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="32" viewBox="0 0 30 32">
    <defs>
      <g id="icon-bell">
	      <path class="path1" d="M15.143 30.286q0-0.286-0.286-0.286-1.054 0-1.813-0.759t-0.759-1.813q0-0.286-0.286-0.286t-0.286 0.286q0 1.304 0.92 2.223t2.223 0.92q0.286 0 0.286-0.286zM3.268 25.143h23.179q-2.929-3.232-4.402-7.348t-1.473-8.652q0-4.571-5.714-4.571t-5.714 4.571q0 4.536-1.473 8.652t-4.402 7.348zM29.714 25.143q0 0.929-0.679 1.607t-1.607 0.679h-8q0 1.893-1.339 3.232t-3.232 1.339-3.232-1.339-1.339-3.232h-8q-0.929 0-1.607-0.679t-0.679-1.607q3.393-2.875 5.125-7.098t1.732-8.902q0-2.946 1.714-4.679t4.714-2.089q-0.143-0.321-0.143-0.661 0-0.714 0.5-1.214t1.214-0.5 1.214 0.5 0.5 1.214q0 0.339-0.143 0.661 3 0.357 4.714 2.089t1.714 4.679q0 4.679 1.732 8.902t5.125 7.098z" />
      </g>
    </defs>
    <g fill="#000000">
	    <use xlink:href="#icon-bell" transform="translate(0 0)"></use>
    </g>
  </svg>
  <div class="notifications-count js-count"></div>
</button>

mmt-notifications-widget.markdown

MMT - Notifications widget

A simple notifications widget. Items' date are auto-generated every time. There are built-in calculations for missed events and today's events. There is also a dismiss functionality.

Next step: snooze feature.

A Pen by gan on CodePen.

License.

script.js

$(function () {
  var today = new Date();
  var items = generateItems(today);
  refreshNotifications(items, today);
});

function refreshNotifications(items, today) {
  items = items || [];
  today = today || newDate();
  
  var cssTransitionEnd = getTransitionEnd();
  var container = $('body');
  
  items.forEach(function(item) {
    item.isExpired = item.date < today;
    
    item.isToday = (item.date.getFullYear() === today.getFullYear()) &&
      (item.date.getMonth() === today.getMonth()) &&
      (item.date.getDate() === today.getDate());    
    
    item.formattedDate = function() {
      if (this.isToday) {
        return timeToString(this.date);
      } else {
        return this.date.getFullYear() + '-' +
          strpad(this.date.getMonth() + 1) + '-' +
          strpad(this.date.getDate());
      }
    };
  });
  
  items.sort(function(a, b) {
    if (a.isExpired === b.isExpired) {
      return a.date - b.date;
    } else {
      return (b.isExpired ? 0 : 1) - (a.isExpired ? 0 : 1);
    }
  });
    
  var template = 
      '<div class="notifications js-notifications">' +
        '<h3>Notifications</h3>' +
        '<ul class="notifications-list">' +
          '<li class="item no-data">You don\'t have notifications</li>' +
          '{{#items}}' +
            '<li class="item js-item {{#isExpired}}expired{{/isExpired}}" data-id="{{id}}">' +
              '<div class="details">' +
                '<span class="title">{{title}}</span>' +
                '<span class="date">{{formattedDate}}</span>' +
              '</div>' +
              '<button type="button" class="button-default button-dismiss js-dismiss">×</button>' +
            '</li>' +
          '{{/items}}' +
        '</ul>' +
        '<a href="#" class="show-all">Show all notifications</a>' +
      '</div>';
  
  container
    .append(Mustache.render(template, { items: items }))
    .find('.js-count').attr('data-count', items.length).html(items.length).end()
    .on('click', '.js-show-notifications', function(event) {
      $(event.currentTarget).closest('.js-show-notifications').toggleClass('active').blur();
      return true;
    })
    .on('click', '.js-dismiss', function(event) {
      var item = $(event.currentTarget).parents('.js-item');
      
      var removeItem = function() {
        item[0].removeEventListener(cssTransitionEnd, removeItem, false);
        item.remove();
        
        /* update notifications' counter */
        var countElement = container.find('.js-count');
        var prevCount = +countElement.attr('data-count');
        var newCount = prevCount - 1;
        countElement
          .attr('data-count', newCount)
          .html(newCount);
        
        if(newCount === 0) {
          countElement.remove();
          container.find('.js-notifications').addClass('empty');
        }
      };
      
      item[0].addEventListener(cssTransitionEnd, removeItem, false);
      item.addClass('dismissed');
      return true;
    });
}

function generateItems(today) {
  today = today || newDate();
  return [
    { id: 1, title: 'Meeting with Ben\'s agent.', date: randomDate() },
    { id: 2, title: 'Papers review with Tonny.', date: randomDate(addMinutes(today, -60), addMinutes(today, 60)) },
    { id: 3, title: 'Annual party at Eric\'s house.', date: randomDate() },
    { id: 4, title: 'Last day to pay off auto credit.', date: randomDate() },
    { id: 5, title: 'Call and schedule another meeting with Amanda.', date: randomDate(addMinutes(today, -360), addMinutes(today, 360)) },
    { id: 6, title: 'Don\'t forget to send in financial reports.', date: randomDate() }
  ];
}

function randomDate(start, end) {
  start = start || (new Date(2014, 0, 1));
  end = end || (new Date(2015, 0, 1));
  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}

function addMinutes(date, minutes) {
  return new Date(date.getTime() + minutes * 60000);
}

function timeToString(date) {
  if (date) {
    var hh = date.getHours();
    var mm = date.getMinutes();
    var ap = hh >= 12 ? 'PM' : 'AM';

    hh = (hh >= 12) ? (hh - 12) : hh;
    hh = (hh === 0) ? 12 : hh;

    return (hh < 10 ? '0' : '') + hh.toString() + ':' +
      (mm < 10 ? '0' : '') + mm.toString() + ' ' + ap;
  }
  return null;
}

function strpad(num) {
  if (parseInt(num) < 10) {
    return '0' + parseInt(num);
  } else {
    return parseInt(num);
  }
}

function getTransitionEnd() {
  var supportedStyles = window.document.createElement('fake').style;
  var properties = {
    'webkitTransition': { 'end': 'webkitTransitionEnd' },
    'oTransition': { 'end': 'oTransitionEnd' },
    'msTransition': { 'end': 'msTransitionEnd' },
    'transition': { 'end': 'transitionend' }
  };
  
  var match = null;
  Object.getOwnPropertyNames(properties).forEach(function(name) {
    if (!match && name in supportedStyles) {
      match = name;
      return;
    }
  });
  
  return (properties[match] || {}).end;
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>

style.less

@import url(http://fonts.googleapis.com/css?family=Lato:700);

*,
*:after,
*:before
{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body
{
  background: @colorWhite;
  color: @colorWhite;
  font-family: 'Lato';
  font-size: 14px;
  padding: 10px;
  position: relative;
}

.button-default 
{
  .transition(@transitionDefault color);
  background: transparent;
  border: none;
  cursor: pointer;
  margin: 0;
  outline: none;
  position: relative;
}

.show-notifications
{
  position: relative;
  
  &:hover,
  &:focus,
  &.active
  {
    #icon-bell
    {
      fill: @colorWetAsphalt;
    }
  }
  
  #icon-bell
  {
    fill: @colorAsbestos;
  }
  
  .notifications-count
  {
    .border-radius(50%);
    background: @colorPeterRiver;
    color: @colorWhite;
    font: normal .85em 'Lato';
    height: 16px;
    line-height: 1.75em;
    position: absolute;
    right: 2px;
    text-align: center;
    top: -2px;
    width: 16px;
  }
  
  &.active ~ .notifications
  {
    opacity: 1;
    top: 60px;
  }
}

.notifications
{
  .border-radius(@borderRadius);
  .transition(@transitionDefault opacity);
  background: #fff;
  border: 1px solid @colorSilver;
  left: 10px;
  opacity: 0;
  position: absolute;
  top: -999px;
  
  &:after
  {
    border: 10px solid transparent;
    border-bottom-color: @colorPeterRiver;
    content: '';
    display: block;
    height: 0;
    left: 10px;
    position: absolute;
    top: -20px;
    width: 0;
  }
  
  h3,
  .show-all
  {
    background: @colorPeterRiver;
    color: @colorWhite;
    margin: 0;
    padding: 10px;
    width: 350px;
  }
  
  h3
  {
    cursor: default;
    font-size: 1.05em;
    font-weight: normal;
  }
  
  .show-all
  {
    display: block;
    text-align: center;
    text-decoration: none;
    
    &:hover,
    &:focus
    {
      text-decoration: underline;
    }
  }
  
  .notifications-list
  {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    
    .item
    {
      .transition-transform(@transitionDefault);
      border-top: 1px solid @colorSilver;
      color: @colorAsbestos;
      cursor: default;
      display: block;
      padding: 10px;
      position: relative;
      white-space: nowrap;
      width: 350px;

      &:before,
      .details,
      .button-dismiss
      {
        display: inline-block;
        vertical-align: middle;
      }

      &:before
      {
        .border-radius(50%);
        background: @colorPeterRiver;
        content: '';
        height: 8px;
        width: 8px;
      }

      .details
      {
        margin-left: 10px;
        white-space: normal;
        width: 280px;

        .title,
        .date
        {
          display: block;
        }

        .date
        {
          color: @colorConcrete;
          font-size: .85em;
          margin-top: 3px;
        }
      }
      
      .button-dismiss
      {
        color: @colorSilver;
        font-size: 2.25em;
        
        &:hover,
        &:focus
        {
          color: @colorConcrete;
        }
      }
      
      &.no-data
      {
        display: none;
        text-align: center;
        
        &:before
        {
          display: none;
        }
      }

      &.expired
      {
        color: @colorSilver;

        &:before
        {
          background: @colorSilver;
        }

        .details
        {
          .date
          {
            color: @colorSilver;
          }
        }
      }
      
      &.dismissed
      {
        .transform(translateX(100%));
      }
    }
  }
  
  &.empty
  {
    .notifications-list
    {
      .no-data
      {
        display: block;
        padding: 10px;
      }
    }
  }
}

/* variables */
@colorClouds: #ecf0f1;
@colorSilver: #bdc3c7;
@colorWhite: #fefefe;
@colorPeterRiver: #222;
@colorConcrete: #95a5a6;
@colorAsbestos: #7f8c8d;
@colorWetAsphalt: #34495e;

@borderRadius: 3px;

@transitionDefault: 0.25s ease-out 0.10s;

/* mixins */
.background-clip(@value: border-box)
{
    -moz-background-clip: @value;
    -webkit-background-clip: @value;
    background-clip: @value;
}

.border-radius(@value: 3px)
{
    -moz-border-radius: @value;
    -webkit-border-radius: @value;
    border-radius: @value;
    .background-clip(padding-box);
}

.transform(@value)
{
  -webkit-transform: @value;
  -moz-transform: @value;
  -ms-transform: @value;
  -o-transform: @value;
  transform: @value;
}

.transition(@value: all 0.25s ease-out)
{
  -webkit-transition: @value;
  -moz-transition: @value;
  -o-transition: @value;
  transition: @value;
}

.transition-transform(@transition: 0.25s ease-out)
{
  -webkit-transition: -webkit-transform @transition;
  -moz-transition: -moz-transform @transition;
  -o-transition: -o-transform @transition;
  transition: transform @transition;
}