patternfly/tests/pages/_includes/widgets/notification-drawer.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

<div class="drawer-pf hide drawer-pf-notifications-non-clickable">
  <div class="drawer-pf-title">
    <a class="drawer-pf-toggle-expand"></a>
    <h3 class="text-center">Notifications Drawer</h3>
  </div>
  <div class="panel-group" id="notification-drawer-accordion">
    <div class="panel panel-default">
      <div class="panel-heading" data-component="collapse-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseOne">
            Notification Tab 1
          </a>
        </h4>
        <span class="panel-counter">5 New Events</span>
      </div>
      <div id="fixedCollapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          {% include widgets/notification-drawer-notifications.html id="1" %}
        </div>
        <div class="drawer-pf-action">
          <button class="btn btn-link btn-block">Mark All Read</button>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" data-component="collapse-heading">
        <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseTwo">
            Notification Tab 2
          </a>
        </h4>
        <span class="panel-counter">5 New Events</span>
      </div>
      <div id="fixedCollapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          {% include widgets/notification-drawer-notifications.html id="2" %}
          {% include widgets/notification-drawer-notifications.html id="3" %}
          {% include widgets/notification-drawer-notifications.html id="4" %}
          <div class="drawer-pf-loading text-center">
            <span class="spinner spinner-xs spinner-inline"></span> Loading More
          </div>
        </div>
        <div class="drawer-pf-action">
          <button class="btn btn-link btn-block">Mark All Read</button>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" data-component="collapse-heading">
        <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseThree">
            Notification Tab 3
          </a>
        </h4>
        <span class="panel-counter">5 New Events</span>
      </div>
      <div id="fixedCollapseThree" class="panel-collapse collapse">
        <div class="panel-body">
          {% include widgets/notification-drawer-notifications.html id="5" %}
          {% include widgets/notification-drawer-notifications.html id="6" %}
          {% include widgets/notification-drawer-notifications.html id="7" %}
        </div>
        <div class="drawer-pf-action">
          <button class="btn btn-link btn-block">Mark All Read</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    // Show/Hide Notifications Drawer
    $('.drawer-pf-trigger').click(function() {
      var $drawer = $('.drawer-pf');

      $(this).toggleClass('open');
      if ($drawer.hasClass('hide')) {
        $drawer.removeClass('hide');
        setTimeout(function () {
          if (window.dispatchEvent) {
            window.dispatchEvent(new Event('resize'));
          }
          // Special case for IE
          if ($(document).fireEvent) {
            $(document).fireEvent('onresize');
          }
        }, 100);
      } else {
        $drawer.addClass('hide');
      }
    });
    $('.drawer-pf-toggle-expand').click(function() {
      var $drawer = $('.drawer-pf');
      var $drawerNotifications = $drawer.find('.drawer-pf-notification');

      if ($drawer.hasClass('drawer-pf-expanded')) {
        $drawer.removeClass('drawer-pf-expanded');
        $drawerNotifications.removeClass('expanded-notification');
      } else {
        $drawer.addClass('drawer-pf-expanded');
        $drawerNotifications.addClass('expanded-notification');
      }
    });

    // Mark All Read
    $('.panel-collapse').each(function (index, panel) {
      var $panel = $(panel);
      $panel.on('click', '.drawer-pf-action .btn', function() {
        $panel.find('.unread').removeClass('unread');
        $(panel.parentElement).find('.panel-counter').text('0 New Events');
      });
    });

    $('#notification-drawer-accordion').initCollapseHeights('.panel-body');
  });
</script>