patternfly-sass 3.13.0 → 3.14.0

data/assets/javascripts/patternfly.dataTables.pfSelect.min.js

@@ -0,0 +1 @@
+!function(factory){"use strict";"function"==typeof define&&define.amd?define(["jquery","datatables.net"],function($){return factory($,window,document)}):"object"==typeof exports?module.exports=function(root,$){return root||(root=window),$&&$.fn.dataTable||($=require("datatables.net")(root,$).$),factory($,root,root.document)}:factory(jQuery,window,document)}(function($,window,document,undefined){"use strict";function selectAllRows(dt,select){var ctx=dt.settings()[0],filteredRows=dt.rows({page:"current",search:"applied"});if("single"===dt.select.style())throw new Error("Cannot select all rows with selection style 'single'");select?filteredRows.select():filteredRows.deselect(),$(ctx._pfSelect.selector,dt.table().container()).prop("checked",select),syncSelectAllCheckbox(dt)}function syncSelectAllCheckbox(dt){var ctx=dt.settings()[0],filteredRows=dt.rows({page:"current",search:"applied"}).flatten().length,selectedFilteredRows=dt.rows({page:"current",search:"applied",selected:!0}).flatten().length,selectAll=$(ctx._pfSelect.selectAllSelector,dt.table().container())[0];selectAll&&(selectAll.checked=filteredRows===selectedFilteredRows),updateSelectedRowsText(dt)}function syncSelectCheckboxes(dt){var ctx=dt.settings()[0];$(ctx._pfSelect.selector,dt.table().container()).prop("checked",!1),dt.rows({page:"current",search:"applied",selected:!0}).every(function(index){$(ctx._pfSelect.selector,dt.table().row(index).node()).prop("checked",!0)}),syncSelectAllCheckbox(dt)}function updateSelectedRowsText(dt){var ctx=dt.settings()[0],selectedRows=dt.rows({selected:!0}).flatten().length,totalRows=dt.rows().flatten().length;ctx._pfSelect.results!==undefined&&0!==ctx._pfSelect.results.length&&$(ctx._pfSelect.results).html("<strong>"+selectedRows+"</strong> of <strong>"+totalRows+"</strong> selected")}var DataTable=$.fn.dataTable,RESULTS_SELECTOR=".table-view-pf-select-results",SELECT_ALL_SELECTOR='th:first-child input[type="checkbox"]',SELECT_SELECTOR='td:first-child input[type="checkbox"]';return DataTable.pfSelect={},DataTable.pfSelect.init=function(dt){var ctx=dt.settings()[0],opts=ctx.oInit.pfConfig?ctx.oInit.pfConfig:{},select=ctx.oInit.select?ctx.oInit.select:{},style=dt.select.style();ctx._pfSelect={},ctx._pfSelect.selectAllSelector=opts.selectAllSelector!==undefined?opts.selectAllSelector:SELECT_ALL_SELECTOR,ctx._pfSelect.selector=select.selector!==undefined?select.selector:SELECT_SELECTOR,ctx._pfSelect.results=$(RESULTS_SELECTOR,opts.toolbarSelector),"api"===style?($(dt.table().container()).on("click",ctx._pfSelect.selectAllSelector,function(evt){evt.preventDefault()}),$(dt.table().container()).on("click",ctx._pfSelect.selector,function(evt){evt.preventDefault()}),dt.table().on("select.dt",function(){syncSelectCheckboxes(dt)})):($(dt.table().container()).on("click",ctx._pfSelect.selectAllSelector,function(evt){selectAllRows(dt,evt.target.checked)}),$(dt.table().container()).on("click",ctx._pfSelect.selector,function(evt){"multi"!==style||"multi+shift"!==style?syncSelectCheckboxes(dt):syncSelectAllCheckbox(dt)})),dt.table().on("draw.dt",function(){syncSelectCheckboxes(dt)}),updateSelectedRowsText(dt)},DataTable.Api.register("pfSelect.selectAllRows()",function(select){return this.iterator("table",function(ctx){selectAllRows(new DataTable.Api(ctx),select)})}),$(document).on("preInit.dt.dtSelect",function(e,ctx){"dt"===e.namespace&&DataTable.pfSelect.init(new DataTable.Api(ctx))}),DataTable.pfSelect});

data/assets/javascripts/patternfly.js

@@ -1,601 +1,197 @@
-// Util: PatternFly Sidebar
-// Set height of sidebar-pf to height of document minus height of navbar-pf if not mobile
-(function ($) {
+(function (window) {
   'use strict';
-  $.fn.sidebar = function () {
-    var documentHeight = 0,
-      navbarpfHeight = 0,
-      colHeight = 0;
 
-    if ($('.navbar-pf .navbar-toggle').is(':hidden')) {
-      documentHeight = $(document).height();
-      navbarpfHeight = $('.navbar-pf').outerHeight();
-      colHeight = documentHeight - navbarpfHeight;
-    }
-    $('.sidebar-pf').parent('.row').children('[class*="col-"]').css({"min-height" : colHeight});
+  var patternfly = {
+    version: "3.13.0"
   };
 
-  $(document).ready(function () {
-    // Call sidebar() on ready if .sidebar-pf exists and .datatable does not exist
-    if ($('.sidebar-pf').length > 0 && $('.datatable').length === 0) {
-      $.fn.sidebar();
-    }
-  });
-
-  $(window).resize(function () {
-    // Call sidebar() on resize if .sidebar-pf exists
-    if ($('.sidebar-pf').length > 0) {
-      $.fn.sidebar();
-    }
-  });
-}(jQuery));
-
-// Util: PatternFly Popovers
-// Add data-close="true" to insert close X icon
-(function ($) {
-  'use strict';
-
-  $.fn.popovers = function () {
-    // Initialize
-    this.popover();
-
-    // Add close icons
-    this.filter('[data-close=true]').each(function (index, element) {
-      var $this = $(element),
-        title = $this.attr('data-original-title') + '<button type="button" class="close" aria-hidden="true"><span class="pficon pficon-close"></span></button>';
-
-      $this.attr('data-original-title', title);
-    });
-
-    // Bind Close Icon to Toggle Display
-    this.on('click', function (e) {
-      var $this = $(this),
-        $title = $this.next('.popover').find('.popover-title');
-
-      // Only if data-close is true add class "x" to title for right padding
-      $title.find('.close').parent('.popover-title').addClass('closable');
-
-      // Bind x icon to close popover
-      $title.find('.close').on('click', function () {
-        $this.popover('hide');
-      });
-
-      // Prevent href="#" page scroll to top
-      e.preventDefault();
-    });
+  // Util: PatternFly Palette colors
+  patternfly.pfPaletteColors = {
+    black:         '#030303',
+    black100:      '#fafafa',
+    black200:      '#ededed',
+    black300:      '#d1d1d1',
+    black400:      '#bbbbbb',
+    black500:      '#8b8d8f',
+    black600:      '#72767b',
+    black700:      '#4d5258',
+    black800:      '#393f44',
+    black900:      '#292e34',
+    blue:          '#0088ce',
+    blue100:       '#bee1f4',
+    blue200:       '#7dc3e8',
+    blue300:       '#39a5dc',
+    blue400:       '#0088ce',
+    blue500:       '#00659c',
+    blue600:       '#004368',
+    blue700:       '#002235',
+    gold:          '#f0ab00',
+    gold100:       '#fbeabc',
+    gold200:       '#f9d67a',
+    gold300:       '#f5c12e',
+    gold400:       '#f0ab00',
+    gold500:       '#b58100',
+    gold600:       '#795600',
+    gold700:       '#3d2c00',
+    orange:        '#ec7a08',
+    orange100:     '#fbdebf',
+    orange200:     '#f7bd7f',
+    orange300:     '#f39d3c',
+    orange400:     '#ec7a08',
+    orange500:     '#b35c00',
+    orange600:     '#773d00',
+    orange700:     '#3b1f00',
+    lightBlue:     '#00b9e4',
+    lightBlue100:  '#beedf9',
+    lightBlue200:  '#7cdbf3',
+    lightBlue300:  '#35caed',
+    lightBlue400:  '#00b9e4',
+    lightBlue500:  '#008bad',
+    lightBlue600:  '#005c73',
+    lightBlue700:  '#002d39',
+    green:         '#3f9c35',
+    green100:      '#cfe7cd',
+    green200:      '#9ecf99',
+    green300:      '#6ec664',
+    green400:      '#3f9c35',
+    green500:      '#2d7623',
+    green600:      '#1e4f18',
+    green700:      '#0f280d',
+    lightGreen:    '#92d400',
+    lightGreen100: '#e4f5bc',
+    lightGreen200: '#c8eb79',
+    lightGreen300: '#ace12e',
+    lightGreen400: '#92d400',
+    lightGreen500: '#6ca100',
+    lightGreen600: '#486b00',
+    lightGreen700: '#253600',
+    cyan:          '#007a87',
+    cyan100:       '#bedee1',
+    cyan200:       '#7dbdc3',
+    cyan300:       '#3a9ca6',
+    cyan400:       '#007a87',
+    cyan500:       '#005c66',
+    cyan600:       '#003d44',
+    cyan700:       '#001f22',
+    purple:        '#703fec',
+    purple100:     '#c7bfff',
+    purple200:     '#a18fff',
+    purple300:     '#8461f7',
+    purple400:     '#703fec',
+    purple500:     '#582fc0',
+    purple600:     '#40199a',
+    purple700:     '#1f0066',
+    red:           '#cc0000',
+    red100:        '#cc0000',
+    red200:        '#a30000',
+    red300:        '#8b0000',
+    red400:        '#470000',
+    red500:        '#2c0000'
+  };
 
-    return this;
+  // Util: PatternFly C3 Chart Defaults
+  patternfly.pfSetDonutChartTitle = function (selector, primary, secondary) {
+    var donutChartRightTitle = window.d3.select(selector).select('text.c3-chart-arcs-title');
+    donutChartRightTitle.text("");
+    donutChartRightTitle.insert('tspan').text(primary).classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+    donutChartRightTitle.insert('tspan').text(secondary).classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
   };
-}(jQuery));
 
+  patternfly.pfDonutTooltipContents = function (d, defaultTitleFormat, defaultValueFormat, color) {
+    return '<table class="c3-tooltip">' +
+      '  <tr>' +
+      '    <td><span style="background-color:' + color(d[0].id) + '"></span>' + '<strong>' + d[0].value + '</strong> ' + d[0].name + '</td>' +
+      '    <td>' + (Math.round(d[0].ratio * 1000) / 10) + '%</td>' +
+      '  </tr>' +
+      '</table>';
+  };
 
-// Util: DataTables Settings
-(function ($) {
-  'use strict';
-  if ($.fn.dataTableExt) {
-    /* Set the defaults for DataTables initialisation */
-    $.extend(true, $.fn.dataTable.defaults, {
-      "bDestroy": true,
-      "bAutoWidth": false,
-      "iDisplayLength": 20,
-      "sDom":
-        "<'dataTables_header' f i r >" +
-        "<'table-responsive'  t >" +
-        "<'dataTables_footer' p >",
-      "oLanguage": {
-        "sInfo": "Showing <b>_START_</b> to <b>_END_</b> of <b>_TOTAL_</b> Items",
-        "sInfoFiltered" : "(of <b>_MAX_</b>)",
-        "sInfoEmpty" : "Showing <b>0</b> Results",
-        "sZeroRecords":
-          "<p>Suggestions</p>" +
-          "<ul>" +
-            "<li>Check the javascript regular expression syntax of the search term.</li>" +
-            "<li>Check that the correct menu option is chosen (token ID vs. user ID).</li>" +
-            "<li>Use wildcards (* to match 0 or more characters, + to match 1 or more characters, ? to match 0 or 1 character).</li>" +
-            "<li>Clear the search field, then click Search to return to the 20 most recent records.</li>" +
-          "</ul>",
-        "sSearch": ""
-      },
-      "sPaginationType": "bootstrap_input",
-      "oSearch": {
-        "sSearch": "",
-        "bRegex": true,
-        "bSmart": false
-      }
-    });
+  patternfly.pfGetUtilizationDonutTooltipContentsFn = function (units) {
+    return function (d) {
+      return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
+        (Math.round(d[0].ratio * 1000) / 10) + '%' + ' ' + units + ' ' + d[0].name +
+        '</span>';
+    };
+  };
 
-    /* Default class modification */
-    $.extend($.fn.dataTableExt.oStdClasses, {
-      "sWrapper": "dataTables_wrapper"
-    });
+  patternfly.pfGetBarChartTooltipContentsFn = function (categories) {
+    return function (d) {
+      var name = categories ? categories[d[0].index] : d[0].index;
+      return '<table class="c3-tooltip">' +
+        '  <tr>' +
+        '    <td><strong>' + name + ':</td>' +
+        '    <td>' + d[0].value + '</td>' +
+        '  </tr>' +
+        '</table>';
+    };
+  };
 
-    /* API method to get paging information */
-    $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
-      return {
-        "iStart":         oSettings._iDisplayStart,
-        "iEnd":           oSettings.fnDisplayEnd(),
-        "iLength":        oSettings._iDisplayLength,
-        "iTotal":         oSettings.fnRecordsTotal(),
-        "iFilteredTotal": oSettings.fnRecordsDisplay(),
-        "iPage":          oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
-        "iTotalPages":    oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
-      };
+  patternfly.pfSingleLineChartTooltipContentsFn = function (categories) {
+    return function (d) {
+      var name = categories ? categories[d[0].index] : d[0].index;
+      return '<table class="c3-tooltip">' +
+        '  <tr>' +
+        '    <td><strong>' + name + ':</td>' +
+        '    <td>' + d[0].value + '</td>' +
+        '  </tr>' +
+        '</table>';
     };
+  };
 
-    /* Combination of Bootstrap + Input Text style pagination control */
-    $.extend($.fn.dataTableExt.oPagination, {
-      "bootstrap_input": {
-        "fnInit": function (oSettings, nPaging, fnDraw) {
-          var fnClickHandler = function (e) {
-              e.preventDefault();
-              if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
-                fnDraw(oSettings);
-              }
-            },
-            els,
-            nInput;
+  patternfly.pfPieTooltipContents = function (d, defaultTitleFormat, defaultValueFormat, color) {
+    return patternfly.pfDonutTooltipContents(d, defaultTitleFormat, defaultValueFormat, color);
+  };
 
-          $(nPaging).append(
-            '<ul class="pagination">' +
-              '  <li class="first disabled"><span class="i fa fa-angle-double-left"></span></li>' +
-              '  <li class="prev disabled"><span class="i fa fa-angle-left"></span></li>' +
-              '</ul>' +
-              '<div class="pagination-input">' +
-              '  <input type="text" class="paginate_input">' +
-              '  <span class="paginate_of">of <b>3</b></span>' +
-              '</div>' +
-              '<ul class="pagination">' +
-              '  <li class="next disabled"><span class="i fa fa-angle-right"></span></li>' +
-              '  <li class="last disabled"><span class="i fa fa-angle-double-right"></span></li>' +
-              '</ul>'
-          );
-
-          els = $('li', nPaging);
-          $(els[0]).bind('click.DT', { action: "first" }, fnClickHandler);
-          $(els[1]).bind('click.DT', { action: "previous" }, fnClickHandler);
-          $(els[2]).bind('click.DT', { action: "next" }, fnClickHandler);
-          $(els[3]).bind('click.DT', { action: "last" }, fnClickHandler);
-
-          nInput = $('input', nPaging);
-          $(nInput).keyup(function (e) {
-            var iNewStart;
-            if (e.which === 38 || e.which === 39) {
-              this.value += 1;
-            } else if ((e.which === 37 || e.which === 40) && this.value > 1) {
-              this.value -= 1;
-            }
-
-            if (this.value === "" || !this.value.match(/[0-9]/)) {
-              /* Nothing entered or non-numeric character */
-              return;
-            }
-
-            iNewStart = oSettings._iDisplayLength * (this.value - 1);
-            if (iNewStart >= oSettings.fnRecordsDisplay()) {
-              /* Display overrun */
-              oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay() - 1) /
-                oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;
-              fnDraw(oSettings);
-              return;
-            }
-
-            oSettings._iDisplayStart = iNewStart;
-            fnDraw(oSettings);
-          });
-        },
-
-        "fnUpdate": function (oSettings, fnDraw) {
-          var oPaging = oSettings.oInstance.fnPagingInfo(),
-            an = oSettings.aanFeatures.p,
-            ien = an.length,
-            iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength),
-            iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1,
-            i;
-
-          for (i = 0; i < ien; i += 1) {
-            $('.paginate_input', an[i]).val(iCurrentPage)
-              .siblings('.paginate_of').find('b').html(iPages);
-
-            // Add / remove disabled classes from the static elements
-            if (oPaging.iPage === 0) {
-              $('li.first', an[i]).addClass('disabled');
-              $('li.prev', an[i]).addClass('disabled');
-            } else {
-              $('li.first', an[i]).removeClass('disabled');
-              $('li.prev', an[i]).removeClass('disabled');
-            }
-
-            if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
-              $('li.next', an[i]).addClass('disabled');
-              $('li.last', an[i]).addClass('disabled');
-            } else {
-              $('li.next', an[i]).removeClass('disabled');
-              $('li.last', an[i]).removeClass('disabled');
-            }
+  patternfly.c3ChartDefaults = function () {
+    var
+      getDefaultColors = function () {
+        return {
+          pattern: [
+            patternfly.pfPaletteColors.blue,
+            patternfly.pfPaletteColors.blue300,
+            patternfly.pfPaletteColors.green,
+            patternfly.pfPaletteColors.orange,
+            patternfly.pfPaletteColors.red
+          ]
+        };
+      },
+      getDefaultBarGrid = function () {
+        return {
+          y: {
+            show: true
           }
-        }
-      }
-    });
-  }
-}(jQuery));
-
-// Util: definition of breakpoint sizes for tablet and desktop modes
-(function ($) {
-  'use strict';
-  $.pfBreakpoints = {
-    'tablet': 768,
-    'desktop': 1200
-  };
-}(jQuery));
-
-// Util: PatternFly Collapsible Left Hand Navigation
-// Must have navbar-toggle in navbar-pf-alt for expand/collapse
-(function ($) {
-
-  'use strict';
-
-  $.fn.navigation = function () {
-
-    var navElement = $('.layout-pf-alt-fixed .nav-pf-vertical-alt'),
-      bodyContentElement = $('.container-pf-alt-nav-pf-vertical-alt'),
-      toggleNavBarButton = $('.navbar-toggle'),
-      explicitCollapse = false,
-      checkNavState = function () {
-        var width = $(window).width();
-
-        //Always remove the hidden & peek class
-        navElement.removeClass('hidden show-mobile-nav collapsed');
-
-        //Set the body class back to the default
-        bodyContentElement.removeClass('collapsed-nav hidden-nav');
-
-        // Check to see if the nav needs to collapse
-        if (width < $.pfBreakpoints.desktop || explicitCollapse) {
-          navElement.addClass('collapsed');
-          bodyContentElement.addClass('collapsed-nav');
-        }
-
-        // Check to see if we need to move down to the mobile state
-        if (width < $.pfBreakpoints.tablet) {
-          //Set the nav to being hidden
-          navElement.addClass('hidden');
-
-          //Make sure this is expanded
-          navElement.removeClass('collapsed');
-
-          //Set the body class to the correct state
-          bodyContentElement.removeClass('collapsed-nav');
-          bodyContentElement.addClass('hidden-nav');
-        }
+        };
       },
-      collapseMenu = function () {
-        //Make sure this is expanded
-        navElement.addClass('collapsed');
-        //Set the body class to the correct state
-        bodyContentElement.addClass('collapsed-nav');
-
-        explicitCollapse = true;
+      getDefaultBarTooltip = function (categories) {
+        return {
+          contents: patternfly.pfGetBarChartTooltipContentsFn(categories)
+        };
       },
-      enableTransitions = function () {
-        // enable transitions only when toggleNavBarButton is clicked or window is resized
-        $('html').addClass('transitions');
+      getDefaultBarLegend = function () {
+        return {
+          show: false
+        };
       },
-      expandMenu = function () {
-        //Make sure this is expanded
-        navElement.removeClass('collapsed');
-        //Set the body class to the correct state
-        bodyContentElement.removeClass('collapsed-nav');
-
-        explicitCollapse = false;
+      getDefaultBarConfig = function (categories) {
+        return {
+          color: this.getDefaultColors(),
+          grid: this.getDefaultBarGrid(),
+          tooltip: this.getDefaultBarTooltip(categories),
+          legend: this.getDefaultBarLegend()
+        };
       },
-      bindMenuBehavior = function () {
-        toggleNavBarButton.on('click', function (e) {
-          var inMobileState = bodyContentElement.hasClass('hidden-nav');
-          enableTransitions();
-
-          if (inMobileState && navElement.hasClass('show-mobile-nav')) {
-            //In mobile state just need to hide the nav
-            navElement.removeClass('show-mobile-nav');
-          } else if (inMobileState) {
-            navElement.addClass('show-mobile-nav');
-          } else if (navElement.hasClass('collapsed')) {
-            expandMenu();
-          } else {
-            collapseMenu();
+      getDefaultGroupedBarGrid = function () {
+        return {
+          y: {
+            show: true
           }
-        });
+        };
       },
-      setTooltips = function () {
-        $('.nav-pf-vertical-alt [data-toggle="tooltip"]').tooltip({'container': 'body', 'delay': { 'show': '500', 'hide': '200' }});
-
-        $(".nav-pf-vertical-alt").on("show.bs.tooltip", function (e) {
-          return $(this).hasClass("collapsed");
-        });
-
-      },
-      init = function () {
-        //Set correct state on load
-        checkNavState();
-
-        // Bind Top level hamburger menu with menu behavior;
-        bindMenuBehavior();
-
-        //Set tooltips
-        setTooltips();
-      };
-
-    //Listen for the window resize event and collapse/hide as needed
-    $(window).on('resize', function () {
-      checkNavState();
-      enableTransitions();
-    });
-
-    init();
-
-  };
-
-  $(document).ready(function () {
-    if ($('.nav-pf-vertical-alt').length > 0) {
-      $.fn.navigation();
-    }
-  });
-
-}(jQuery));
-
-// Count and Display Remaining Characters
-(function ($) {
-
-  'use strict';
-
-  $.fn.countRemainingChars = function (options) {
-
-    var settings = $.extend({
-        // These are the defaults.
-        charsMaxLimit: 100,
-        charsWarnRemaining: 5,
-        blockInputAtMaxLimit: false
-      }, options),
-      $taFld = this,
-      $countFld = $('#'  + settings.countFld).text(settings.charsMaxLimit),
-      charsRemainingFn = function (charsLength) {
-        var charsRemaining = settings.charsMaxLimit - charsLength;
-        $countFld.text(charsRemaining);
-        $countFld.toggleClass('chars-warn-remaining-pf', charsRemaining <= settings.charsWarnRemaining);
-        if (charsRemaining < 0) {
-          $taFld.trigger("overCharsMaxLimitEvent", $taFld.attr('id'));
-        } else {
-          $taFld.trigger("underCharsMaxLimitEvent", $taFld.attr('id'));
-        }
-      };
-
-    this.on('paste', function (event) {
-      setTimeout(function () {
-        var charsLength = $taFld.val().length, maxTxt;
-
-        if (settings.blockInputAtMaxLimit && charsLength > settings.charsMaxLimit) {
-          maxTxt = $taFld.val();
-          maxTxt = maxTxt.substring(0, settings.charsMaxLimit);
-          $taFld.val(maxTxt);
-          charsLength = $taFld.val().length;
-        }
-
-        charsRemainingFn(charsLength);
-      }, 100);
-    });
-
-    this.keyup(function (event) {
-      charsRemainingFn($taFld.val().length);
-    });
-
-    this.keydown(function (event) {
-      var charsLength = $taFld.val().length;
-
-      if (settings.blockInputAtMaxLimit && charsLength >= settings.charsMaxLimit) {
-        // Except backspace
-        if (event.keyCode !== 8) {
-          event.preventDefault();
-        }
-      }
-    });
-
-    return this;
-  };
-}(jQuery));
-
-// Util: PatternFly Palette colors
-(function ($) {
-  'use strict';
-
-  $.pfPaletteColors = {
-    black:         '#030303',
-    black100:      '#fafafa',
-    black200:      '#ededed',
-    black300:      '#d1d1d1',
-    black400:      '#bbbbbb',
-    black500:      '#8b8d8f',
-    black600:      '#72767b',
-    black700:      '#4d5258',
-    black800:      '#393f44',
-    black900:      '#292e34',
-    blue:          '#0088ce',
-    blue100:       '#bee1f4',
-    blue200:       '#7dc3e8',
-    blue300:       '#39a5dc',
-    blue400:       '#0088ce',
-    blue500:       '#00659c',
-    blue600:       '#004368',
-    blue700:       '#002235',
-    gold:          '#f0ab00',
-    gold100:       '#fbeabc',
-    gold200:       '#f9d67a',
-    gold300:       '#f5c12e',
-    gold400:       '#f0ab00',
-    gold500:       '#b58100',
-    gold600:       '#795600',
-    gold700:       '#3d2c00',
-    orange:        '#ec7a08',
-    orange100:     '#fbdebf',
-    orange200:     '#f7bd7f',
-    orange300:     '#f39d3c',
-    orange400:     '#ec7a08',
-    orange500:     '#b35c00',
-    orange600:     '#773d00',
-    orange700:     '#3b1f00',
-    lightBlue:     '#00b9e4',
-    lightBlue100:  '#beedf9',
-    lightBlue200:  '#7cdbf3',
-    lightBlue300:  '#35caed',
-    lightBlue400:  '#00b9e4',
-    lightBlue500:  '#008bad',
-    lightBlue600:  '#005c73',
-    lightBlue700:  '#002d39',
-    green:         '#3f9c35',
-    green100:      '#cfe7cd',
-    green200:      '#9ecf99',
-    green300:      '#6ec664',
-    green400:      '#3f9c35',
-    green500:      '#2d7623',
-    green600:      '#1e4f18',
-    green700:      '#0f280d',
-    lightGreen:    '#92d400',
-    lightGreen100: '#e4f5bc',
-    lightGreen200: '#c8eb79',
-    lightGreen300: '#ace12e',
-    lightGreen400: '#92d400',
-    lightGreen500: '#6ca100',
-    lightGreen600: '#486b00',
-    lightGreen700: '#253600',
-    cyan:          '#007a87',
-    cyan100:       '#bedee1',
-    cyan200:       '#7dbdc3',
-    cyan300:       '#3a9ca6',
-    cyan400:       '#007a87',
-    cyan500:       '#005c66',
-    cyan600:       '#003d44',
-    cyan700:       '#001f22',
-    purple:        '#703fec',
-    purple100:     '#c7bfff',
-    purple200:     '#a18fff',
-    purple300:     '#8461f7',
-    purple400:     '#703fec',
-    purple500:     '#582fc0',
-    purple600:     '#40199a',
-    purple700:     '#1f0066',
-    red:           '#cc0000',
-    red100:        '#cc0000',
-    red200:        '#a30000',
-    red300:        '#8b0000',
-    red400:        '#470000',
-    red500:        '#2c0000'
-  };
-}(jQuery));
-
-// Util: PatternFly C3 Chart Defaults
-(function ($) {
-  'use strict';
-
-  $.fn.pfSetDonutChartTitle = function (selector, primary, secondary) {
-    var donutChartRightTitle = window.d3.select(selector).select('text.c3-chart-arcs-title');
-    donutChartRightTitle.text("");
-    donutChartRightTitle.insert('tspan').text(primary).classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
-    donutChartRightTitle.insert('tspan').text(secondary).classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
-  };
-
-  $.fn.pfDonutTooltipContents = function (d, defaultTitleFormat, defaultValueFormat, color) {
-    return '<table class="c3-tooltip">' +
-      '  <tr>' +
-      '    <td><span style="background-color:' + color(d[0].id) + '"></span>' + '<strong>' + d[0].value + '</strong> ' + d[0].name + '</td>' +
-      '    <td>' + (Math.round(d[0].ratio * 1000) / 10) + '%</td>' +
-      '  </tr>' +
-      '</table>';
-  };
-
-  $.fn.pfGetUtilizationDonutTooltipContentsFn = function (units) {
-    return function (d) {
-      return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
-        (Math.round(d[0].ratio * 1000) / 10) + '%' + ' ' + units + ' ' + d[0].name +
-        '</span>';
-    };
-  };
-
-  $.fn.pfGetBarChartTooltipContentsFn = function (categories) {
-    return function (d) {
-      var name = categories ? categories[d[0].index] : d[0].index;
-      return '<table class="c3-tooltip">' +
-        '  <tr>' +
-        '    <td><strong>' + name + ':</td>' +
-        '    <td>' + d[0].value + '</td>' +
-        '  </tr>' +
-        '</table>';
-    };
-  };
-
-  $.fn.pfSingleLineChartTooltipContentsFn = function (categories) {
-    return function (d) {
-      var name = categories ? categories[d[0].index] : d[0].index;
-      return '<table class="c3-tooltip">' +
-        '  <tr>' +
-        '    <td><strong>' + name + ':</td>' +
-        '    <td>' + d[0].value + '</td>' +
-        '  </tr>' +
-        '</table>';
-    };
-  };
-
-  $.fn.pfPieTooltipContents = function (d, defaultTitleFormat, defaultValueFormat, color) {
-    return $().pfDonutTooltipContents(d, defaultTitleFormat, defaultValueFormat, color);
-  };
-
-  $.fn.c3ChartDefaults = function () {
-    var
-      getDefaultColors = function () {
-        return {
-          pattern: [
-            $.pfPaletteColors.blue,
-            $.pfPaletteColors.blue300,
-            $.pfPaletteColors.green,
-            $.pfPaletteColors.orange,
-            $.pfPaletteColors.red
-          ]
-        };
-      },
-      getDefaultBarGrid = function () {
-        return {
-          y: {
-            show: true
-          }
-        };
-      },
-      getDefaultBarTooltip = function (categories) {
-        return {
-          contents: $().pfGetBarChartTooltipContentsFn(categories)
-        };
-      },
-      getDefaultBarLegend = function () {
-        return {
-          show: false
-        };
-      },
-      getDefaultBarConfig = function (categories) {
-        return {
-          color: this.getDefaultColors(),
-          grid: this.getDefaultBarGrid(),
-          tooltip: this.getDefaultBarTooltip(categories),
-          legend: this.getDefaultBarLegend()
-        };
-      },
-      getDefaultGroupedBarGrid = function () {
-        return {
-          y: {
-            show: true
-          }
-        };
-      },
-      getDefaultGroupedBarLegend = function () {
-        return {
-          show: true,
-          position: 'bottom'
-        };
+      getDefaultGroupedBarLegend = function () {
+        return {
+          show: true,
+          position: 'bottom'
+        };
       },
       getDefaultGroupedBarConfig = function () {
         return {
@@ -622,8 +218,8 @@
       getDefaultDonutColors = function () {
         return {
           pattern: [
-            $.pfPaletteColors.blue,
-            $.pfPaletteColors.black300
+            patternfly.pfPaletteColors.blue,
+            patternfly.pfPaletteColors.black300
           ]
         };
       },
@@ -663,8 +259,8 @@
       getDefaultPieColors = function () {
         return {
           pattern: [
-            $.pfPaletteColors.blue,
-            $.pfPaletteColors.black300
+            patternfly.pfPaletteColors.blue,
+            patternfly.pfPaletteColors.black300
           ]
         };
       },
@@ -812,85 +408,529 @@
       getDefaultAreaGrid = function () {
         return getDefaultLineGrid();
       },
-      getDefaultAreaLegend = function () {
-        return getDefaultLineLegend();
+      getDefaultAreaLegend = function () {
+        return getDefaultLineLegend();
+      },
+      getDefaultAreaPoint = function () {
+        return getDefaultLinePoint();
+      },
+      getDefaultAreaConfig = function () {
+        return {
+          axis: getDefaultAreaAxis(),
+          grid: getDefaultAreaGrid(),
+          color: getDefaultColors(),
+          legend: getDefaultAreaLegend(),
+          point: getDefaultAreaPoint()
+        };
+      },
+      getDefaultSingleAreaTooltip = function () {
+        return {
+          contents: $().pfGetBarChartTooltipContentsFn()
+        };
+      },
+      getDefaultSingleAreaLegend = function () {
+        return getDefaultSingleLineLegend();
+      },
+      getDefaultSingleAreaConfig = function () {
+        return {
+          axis: getDefaultAreaAxis(),
+          grid: getDefaultAreaGrid(),
+          color: getDefaultColors(),
+          legend: getDefaultSingleAreaLegend(),
+          point: getDefaultAreaPoint(),
+          tooltip: getDefaultSingleAreaTooltip()
+        };
+      };
+    return {
+      getDefaultColors: getDefaultColors,
+      getDefaultBarGrid: getDefaultBarGrid,
+      getDefaultBarTooltip: getDefaultBarTooltip,
+      getDefaultBarLegend: getDefaultBarLegend,
+      getDefaultBarConfig: getDefaultBarConfig,
+      getDefaultGroupedBarGrid: getDefaultGroupedBarGrid,
+      getDefaultGroupedBarLegend: getDefaultGroupedBarLegend,
+      getDefaultGroupedBarConfig: getDefaultGroupedBarConfig,
+      getDefaultDonut: getDefaultDonut,
+      getDefaultDonutSize: getDefaultDonutSize,
+      getDefaultDonutColors: getDefaultDonutColors,
+      getDefaultDonutTooltip: getDefaultDonutTooltip,
+      getDefaultDonutLegend: getDefaultDonutLegend,
+      getDefaultDonutConfig: getDefaultDonutConfig,
+      getDefaultPie: getDefaultPie,
+      getDefaultPieSize: getDefaultPieSize,
+      getDefaultPieColors: getDefaultPieColors,
+      getDefaultPieTooltip: getDefaultPieTooltip,
+      getDefaultPieLegend: getDefaultPieLegend,
+      getDefaultPieConfig: getDefaultPieConfig,
+      getDefaultSparklineArea: getDefaultSparklineArea,
+      getDefaultSparklineSize: getDefaultSparklineSize,
+      getDefaultSparklineAxis: getDefaultSparklineAxis,
+      getDefaultSparklineLegend: getDefaultSparklineLegend,
+      getDefaultSparklinePoint: getDefaultSparklinePoint,
+      getDefaultSparklineTooltip: getDefaultSparklineTooltip,
+      getDefaultSparklineConfig: getDefaultSparklineConfig,
+      getDefaultLineAxis: getDefaultLineAxis,
+      getDefaultLineGrid: getDefaultLineGrid,
+      getDefaultLineLegend: getDefaultLineLegend,
+      getDefaultLinePoint: getDefaultLinePoint,
+      getDefaultLineConfig: getDefaultLineConfig,
+      getDefaultSingleLineTooltip: getDefaultSingleLineTooltip,
+      getDefaultSingleLineConfig: getDefaultSingleLineConfig,
+      getDefaultAreaAxis: getDefaultAreaAxis,
+      getDefaultAreaGrid: getDefaultAreaGrid,
+      getDefaultAreaLegend: getDefaultAreaLegend,
+      getDefaultAreaPoint: getDefaultAreaPoint,
+      getDefaultAreaConfig: getDefaultAreaConfig,
+      getDefaultSingleAreaTooltip: getDefaultSingleAreaTooltip,
+      getDefaultSingleAreaConfig: getDefaultSingleAreaConfig
+    };
+  };
+
+  // definition of breakpoint sizes for tablet and desktop modes
+  patternfly.pfBreakpoints = {
+    'tablet': 768,
+    'desktop': 1200
+  };
+
+  if (typeof define === 'function' && define.amd) {
+    define("patternfly", function () {
+      return patternfly;
+    });
+  } else if ('undefined' !== typeof exports && 'undefined' !== typeof module) {
+    module.exports = patternfly;
+  } else {
+    window.patternfly = patternfly;
+  }
+
+})(window);
+
+
+// Util: PatternFly Sidebar
+// Set height of sidebar-pf to height of document minus height of navbar-pf if not mobile
+(function ($) {
+  'use strict';
+  $.fn.sidebar = function () {
+    var documentHeight = 0,
+      navbarpfHeight = 0,
+      colHeight = 0;
+
+    if ($('.navbar-pf .navbar-toggle').is(':hidden')) {
+      documentHeight = $(document).height();
+      navbarpfHeight = $('.navbar-pf').outerHeight();
+      colHeight = documentHeight - navbarpfHeight;
+    }
+    $('.sidebar-pf').parent('.row').children('[class*="col-"]').css({"min-height" : colHeight});
+  };
+
+  $(document).ready(function () {
+    // Call sidebar() on ready if .sidebar-pf exists and .datatable does not exist
+    if ($('.sidebar-pf').length > 0 && $('.datatable').length === 0) {
+      $.fn.sidebar();
+    }
+  });
+
+  $(window).resize(function () {
+    // Call sidebar() on resize if .sidebar-pf exists
+    if ($('.sidebar-pf').length > 0) {
+      $.fn.sidebar();
+    }
+  });
+}(jQuery));
+
+// Util: PatternFly Popovers
+// Add data-close="true" to insert close X icon
+(function ($) {
+  'use strict';
+
+  $.fn.popovers = function () {
+    // Initialize
+    this.popover();
+
+    // Add close icons
+    this.filter('[data-close=true]').each(function (index, element) {
+      var $this = $(element),
+        title = $this.attr('data-original-title') + '<button type="button" class="close" aria-hidden="true"><span class="pficon pficon-close"></span></button>';
+
+      $this.attr('data-original-title', title);
+    });
+
+    // Bind Close Icon to Toggle Display
+    this.on('click', function (e) {
+      var $this = $(this),
+        $title = $this.next('.popover').find('.popover-title');
+
+      // Only if data-close is true add class "x" to title for right padding
+      $title.find('.close').parent('.popover-title').addClass('closable');
+
+      // Bind x icon to close popover
+      $title.find('.close').on('click', function () {
+        $this.popover('hide');
+      });
+
+      // Prevent href="#" page scroll to top
+      e.preventDefault();
+    });
+
+    return this;
+  };
+}(jQuery));
+
+
+// Util: DataTables Settings
+(function ($) {
+  'use strict';
+  if ($.fn.dataTableExt) {
+    /* Set the defaults for DataTables initialisation */
+    $.extend(true, $.fn.dataTable.defaults, {
+      "bDestroy": true,
+      "bAutoWidth": false,
+      "iDisplayLength": 20,
+      "sDom":
+        "<'dataTables_header' f i r >" +
+        "<'table-responsive'  t >" +
+        "<'dataTables_footer' p >",
+      "oLanguage": {
+        "sInfo": "Showing <b>_START_</b> to <b>_END_</b> of <b>_TOTAL_</b> Items",
+        "sInfoFiltered" : "(of <b>_MAX_</b>)",
+        "sInfoEmpty" : "Showing <b>0</b> Results",
+        "sZeroRecords":
+          "<p>Suggestions</p>" +
+          "<ul>" +
+            "<li>Check the javascript regular expression syntax of the search term.</li>" +
+            "<li>Check that the correct menu option is chosen (token ID vs. user ID).</li>" +
+            "<li>Use wildcards (* to match 0 or more characters, + to match 1 or more characters, ? to match 0 or 1 character).</li>" +
+            "<li>Clear the search field, then click Search to return to the 20 most recent records.</li>" +
+          "</ul>",
+        "sSearch": ""
+      },
+      "sPaginationType": "bootstrap_input",
+      "oSearch": {
+        "sSearch": "",
+        "bRegex": true,
+        "bSmart": false
+      }
+    });
+
+    /* Default class modification */
+    $.extend($.fn.dataTableExt.oStdClasses, {
+      "sWrapper": "dataTables_wrapper"
+    });
+
+    /* API method to get paging information */
+    $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
+      return {
+        "iStart":         oSettings._iDisplayStart,
+        "iEnd":           oSettings.fnDisplayEnd(),
+        "iLength":        oSettings._iDisplayLength,
+        "iTotal":         oSettings.fnRecordsTotal(),
+        "iFilteredTotal": oSettings.fnRecordsDisplay(),
+        "iPage":          oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
+        "iTotalPages":    oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
+      };
+    };
+
+    /* Combination of Bootstrap + Input Text style pagination control */
+    $.extend($.fn.dataTableExt.oPagination, {
+      "bootstrap_input": {
+        "fnInit": function (oSettings, nPaging, fnDraw) {
+          var fnClickHandler = function (e) {
+              e.preventDefault();
+              if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
+                fnDraw(oSettings);
+              }
+            },
+            els,
+            nInput;
+
+          $(nPaging).append(
+            '<ul class="pagination">' +
+              '  <li class="first disabled"><span class="i fa fa-angle-double-left"></span></li>' +
+              '  <li class="prev disabled"><span class="i fa fa-angle-left"></span></li>' +
+              '</ul>' +
+              '<div class="pagination-input">' +
+              '  <input type="text" class="paginate_input">' +
+              '  <span class="paginate_of">of <b>3</b></span>' +
+              '</div>' +
+              '<ul class="pagination">' +
+              '  <li class="next disabled"><span class="i fa fa-angle-right"></span></li>' +
+              '  <li class="last disabled"><span class="i fa fa-angle-double-right"></span></li>' +
+              '</ul>'
+          );
+
+          els = $('li', nPaging);
+          $(els[0]).bind('click.DT', { action: "first" }, fnClickHandler);
+          $(els[1]).bind('click.DT', { action: "previous" }, fnClickHandler);
+          $(els[2]).bind('click.DT', { action: "next" }, fnClickHandler);
+          $(els[3]).bind('click.DT', { action: "last" }, fnClickHandler);
+
+          nInput = $('input', nPaging);
+          $(nInput).keyup(function (e) {
+            var iNewStart;
+            if (e.which === 38 || e.which === 39) {
+              this.value += 1;
+            } else if ((e.which === 37 || e.which === 40) && this.value > 1) {
+              this.value -= 1;
+            }
+
+            if (this.value === "" || !this.value.match(/[0-9]/)) {
+              /* Nothing entered or non-numeric character */
+              return;
+            }
+
+            iNewStart = oSettings._iDisplayLength * (this.value - 1);
+            if (iNewStart >= oSettings.fnRecordsDisplay()) {
+              /* Display overrun */
+              oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay() - 1) /
+                oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;
+              fnDraw(oSettings);
+              return;
+            }
+
+            oSettings._iDisplayStart = iNewStart;
+            fnDraw(oSettings);
+          });
+        },
+
+        "fnUpdate": function (oSettings, fnDraw) {
+          var oPaging = oSettings.oInstance.fnPagingInfo(),
+            an = oSettings.aanFeatures.p,
+            ien = an.length,
+            iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength),
+            iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1,
+            i;
+
+          for (i = 0; i < ien; i += 1) {
+            $('.paginate_input', an[i]).val(iCurrentPage)
+              .siblings('.paginate_of').find('b').html(iPages);
+
+            // Add / remove disabled classes from the static elements
+            if (oPaging.iPage === 0) {
+              $('li.first', an[i]).addClass('disabled');
+              $('li.prev', an[i]).addClass('disabled');
+            } else {
+              $('li.first', an[i]).removeClass('disabled');
+              $('li.prev', an[i]).removeClass('disabled');
+            }
+
+            if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
+              $('li.next', an[i]).addClass('disabled');
+              $('li.last', an[i]).addClass('disabled');
+            } else {
+              $('li.next', an[i]).removeClass('disabled');
+              $('li.last', an[i]).removeClass('disabled');
+            }
+          }
+        }
+      }
+    });
+  }
+}(jQuery));
+
+// Util: definition of breakpoint sizes for tablet and desktop modes
+(function ($) {
+  'use strict';
+  if (patternfly !== undefined) {
+    $.pfBreakpoints = patternfly.pfBreakpoints;
+  }
+}(jQuery));
+
+// Util: PatternFly Collapsible Left Hand Navigation
+// Must have navbar-toggle in navbar-pf-alt for expand/collapse
+(function ($) {
+
+  'use strict';
+
+  $.fn.navigation = function () {
+
+    var navElement = $('.layout-pf-alt-fixed .nav-pf-vertical-alt'),
+      bodyContentElement = $('.container-pf-alt-nav-pf-vertical-alt'),
+      toggleNavBarButton = $('.navbar-toggle'),
+      explicitCollapse = false,
+      checkNavState = function () {
+        var width = $(window).width();
+
+        //Always remove the hidden & peek class
+        navElement.removeClass('hidden show-mobile-nav collapsed');
+
+        //Set the body class back to the default
+        bodyContentElement.removeClass('collapsed-nav hidden-nav');
+
+        // Check to see if the nav needs to collapse
+        if (width < $.pfBreakpoints.desktop || explicitCollapse) {
+          navElement.addClass('collapsed');
+          bodyContentElement.addClass('collapsed-nav');
+        }
+
+        // Check to see if we need to move down to the mobile state
+        if (width < $.pfBreakpoints.tablet) {
+          //Set the nav to being hidden
+          navElement.addClass('hidden');
+
+          //Make sure this is expanded
+          navElement.removeClass('collapsed');
+
+          //Set the body class to the correct state
+          bodyContentElement.removeClass('collapsed-nav');
+          bodyContentElement.addClass('hidden-nav');
+        }
+      },
+      collapseMenu = function () {
+        //Make sure this is expanded
+        navElement.addClass('collapsed');
+        //Set the body class to the correct state
+        bodyContentElement.addClass('collapsed-nav');
+
+        explicitCollapse = true;
       },
-      getDefaultAreaPoint = function () {
-        return getDefaultLinePoint();
+      enableTransitions = function () {
+        // enable transitions only when toggleNavBarButton is clicked or window is resized
+        $('html').addClass('transitions');
       },
-      getDefaultAreaConfig = function () {
-        return {
-          axis: getDefaultAreaAxis(),
-          grid: getDefaultAreaGrid(),
-          color: getDefaultColors(),
-          legend: getDefaultAreaLegend(),
-          point: getDefaultAreaPoint()
-        };
+      expandMenu = function () {
+        //Make sure this is expanded
+        navElement.removeClass('collapsed');
+        //Set the body class to the correct state
+        bodyContentElement.removeClass('collapsed-nav');
+
+        explicitCollapse = false;
       },
-      getDefaultSingleAreaTooltip = function () {
-        return {
-          contents: $().pfGetBarChartTooltipContentsFn()
-        };
+      bindMenuBehavior = function () {
+        toggleNavBarButton.on('click', function (e) {
+          var inMobileState = bodyContentElement.hasClass('hidden-nav');
+          enableTransitions();
+
+          if (inMobileState && navElement.hasClass('show-mobile-nav')) {
+            //In mobile state just need to hide the nav
+            navElement.removeClass('show-mobile-nav');
+          } else if (inMobileState) {
+            navElement.addClass('show-mobile-nav');
+          } else if (navElement.hasClass('collapsed')) {
+            expandMenu();
+          } else {
+            collapseMenu();
+          }
+        });
       },
-      getDefaultSingleAreaLegend = function () {
-        return getDefaultSingleLineLegend();
+      setTooltips = function () {
+        $('.nav-pf-vertical-alt [data-toggle="tooltip"]').tooltip({'container': 'body', 'delay': { 'show': '500', 'hide': '200' }});
+
+        $(".nav-pf-vertical-alt").on("show.bs.tooltip", function (e) {
+          return $(this).hasClass("collapsed");
+        });
+
       },
-      getDefaultSingleAreaConfig = function () {
-        return {
-          axis: getDefaultAreaAxis(),
-          grid: getDefaultAreaGrid(),
-          color: getDefaultColors(),
-          legend: getDefaultSingleAreaLegend(),
-          point: getDefaultAreaPoint(),
-          tooltip: getDefaultSingleAreaTooltip()
-        };
+      init = function () {
+        //Set correct state on load
+        checkNavState();
+
+        // Bind Top level hamburger menu with menu behavior;
+        bindMenuBehavior();
+
+        //Set tooltips
+        setTooltips();
       };
-    return {
-      getDefaultColors: getDefaultColors,
-      getDefaultBarGrid: getDefaultBarGrid,
-      getDefaultBarTooltip: getDefaultBarTooltip,
-      getDefaultBarLegend: getDefaultBarLegend,
-      getDefaultBarConfig: getDefaultBarConfig,
-      getDefaultGroupedBarGrid: getDefaultGroupedBarGrid,
-      getDefaultGroupedBarLegend: getDefaultGroupedBarLegend,
-      getDefaultGroupedBarConfig: getDefaultGroupedBarConfig,
-      getDefaultDonut: getDefaultDonut,
-      getDefaultDonutSize: getDefaultDonutSize,
-      getDefaultDonutColors: getDefaultDonutColors,
-      getDefaultDonutTooltip: getDefaultDonutTooltip,
-      getDefaultDonutLegend: getDefaultDonutLegend,
-      getDefaultDonutConfig: getDefaultDonutConfig,
-      getDefaultPie: getDefaultPie,
-      getDefaultPieSize: getDefaultPieSize,
-      getDefaultPieColors: getDefaultPieColors,
-      getDefaultPieTooltip: getDefaultPieTooltip,
-      getDefaultPieLegend: getDefaultPieLegend,
-      getDefaultPieConfig: getDefaultPieConfig,
-      getDefaultSparklineArea: getDefaultSparklineArea,
-      getDefaultSparklineSize: getDefaultSparklineSize,
-      getDefaultSparklineAxis: getDefaultSparklineAxis,
-      getDefaultSparklineLegend: getDefaultSparklineLegend,
-      getDefaultSparklinePoint: getDefaultSparklinePoint,
-      getDefaultSparklineTooltip: getDefaultSparklineTooltip,
-      getDefaultSparklineConfig: getDefaultSparklineConfig,
-      getDefaultLineAxis: getDefaultLineAxis,
-      getDefaultLineGrid: getDefaultLineGrid,
-      getDefaultLineLegend: getDefaultLineLegend,
-      getDefaultLinePoint: getDefaultLinePoint,
-      getDefaultLineConfig: getDefaultLineConfig,
-      getDefaultSingleLineTooltip: getDefaultSingleLineTooltip,
-      getDefaultSingleLineConfig: getDefaultSingleLineConfig,
-      getDefaultAreaAxis: getDefaultAreaAxis,
-      getDefaultAreaGrid: getDefaultAreaGrid,
-      getDefaultAreaLegend: getDefaultAreaLegend,
-      getDefaultAreaPoint: getDefaultAreaPoint,
-      getDefaultAreaConfig: getDefaultAreaConfig,
-      getDefaultSingleAreaTooltip: getDefaultSingleAreaTooltip,
-      getDefaultSingleAreaConfig: getDefaultSingleAreaConfig
-    };
+
+    //Listen for the window resize event and collapse/hide as needed
+    $(window).on('resize', function () {
+      checkNavState();
+      enableTransitions();
+    });
+
+    init();
+
+  };
+
+  $(document).ready(function () {
+    if ($('.nav-pf-vertical-alt').length > 0) {
+      $.fn.navigation();
+    }
+  });
+
+}(jQuery));
+
+// Count and Display Remaining Characters
+(function ($) {
+
+  'use strict';
+
+  $.fn.countRemainingChars = function (options) {
+
+    var settings = $.extend({
+        // These are the defaults.
+        charsMaxLimit: 100,
+        charsWarnRemaining: 5,
+        blockInputAtMaxLimit: false
+      }, options),
+      $taFld = this,
+      $countFld = $('#'  + settings.countFld).text(settings.charsMaxLimit),
+      charsRemainingFn = function (charsLength) {
+        var charsRemaining = settings.charsMaxLimit - charsLength;
+        $countFld.text(charsRemaining);
+        $countFld.toggleClass('chars-warn-remaining-pf', charsRemaining <= settings.charsWarnRemaining);
+        if (charsRemaining < 0) {
+          $taFld.trigger("overCharsMaxLimitEvent", $taFld.attr('id'));
+        } else {
+          $taFld.trigger("underCharsMaxLimitEvent", $taFld.attr('id'));
+        }
+      };
+
+    this.on('paste', function (event) {
+      setTimeout(function () {
+        var charsLength = $taFld.val().length, maxTxt;
+
+        if (settings.blockInputAtMaxLimit && charsLength > settings.charsMaxLimit) {
+          maxTxt = $taFld.val();
+          maxTxt = maxTxt.substring(0, settings.charsMaxLimit);
+          $taFld.val(maxTxt);
+          charsLength = $taFld.val().length;
+        }
+
+        charsRemainingFn(charsLength);
+      }, 100);
+    });
+
+    this.keyup(function (event) {
+      charsRemainingFn($taFld.val().length);
+    });
+
+    this.keydown(function (event) {
+      var charsLength = $taFld.val().length;
+
+      if (settings.blockInputAtMaxLimit && charsLength >= settings.charsMaxLimit) {
+        // Except backspace
+        if (event.keyCode !== 8) {
+          event.preventDefault();
+        }
+      }
+    });
+
+    return this;
   };
 }(jQuery));
 
+// Util: PatternFly Palette colors
+(function ($) {
+  'use strict';
+
+  if (patternfly !== undefined) {
+    $.pfPaletteColors = patternfly.pfPaletteColors;
+  }
+}(jQuery));
+
+// Util: PatternFly C3 Chart Defaults
+(function ($) {
+  'use strict';
+  if (patternfly !== undefined) {
+    $.fn.pfSetDonutChartTitle = patternfly.pfSetDonutChartTitle;
+    $.fn.pfDonutTooltipContents = patternfly.pfDonutTooltipContents;
+    $.fn.pfGetUtilizationDonutTooltipContentsFn = patternfly.pfGetUtilizationDonutTooltipContentsFn;
+    $.fn.pfGetBarChartTooltipContentsFn = patternfly.pfGetBarChartTooltipContentsFn;
+    $.fn.pfSingleLineChartTooltipContentsFn = patternfly.pfSingleLineChartTooltipContentsFn;
+    $.fn.pfPieTooltipContents = patternfly.pfPieTooltipContents;
+    $.fn.c3ChartDefaults = patternfly.c3ChartDefaults;
+  }
+}(jQuery));
+
 // Util: PatternFly Collapse with fixed heights
 // Update the max-height of collapse elements based on the parent container's height.
 (function ($) {