patternfly-sass 0.0.0.pre.semantically.pre.released

data/dist/js/patternfly.dataTables.pfColVis.js

@@ -0,0 +1,151 @@
+/**
+ * @summary     pfColVis for DataTables
+ * @description An extension providing columns visibility control functionality for DataTables. This ensures
+ * DataTables meets the Patternfly design pattern with a toolbar.
+ *
+ * To enable a colvis, the user just need to specify a region for placing colvis menu. By default, the colvis
+ * menu includes the items derived from all columns of Datatables. And of course user can also limit the
+ * generation of the column's visibility checkbox through picking out column index.
+ *
+ * The toolbar is expected to contain the classes as shown in the example below.
+ *
+ * Example:
+ *
+ * <!-- NOTE: Some configuration may be omitted for clarity -->
+ * <div class="row toolbar-pf table-view-pf-toolbar" id="toolbar1">
+ *   <div class="col-sm-12">
+ *     <form class="toolbar-pf-actions">
+ *       <div class="form-group toolbar-pf-filter">
+ *       </div>
+ *       <div class="form-group toolbar-pf-sort">
+ *         <div class="dropdown btn-group">
+ *         </div>
+ *         <button class="btn btn-link" type="button">
+ *           <span class="fa fa-sort-alpha-asc"></span>
+ *         </button>
+ *         <div class="dropdown btn-group">
+ *          <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ *           <span class="fa fa-columns"></span>
+ *          </button>
+ *          <ul class="dropdown-menu table-view-pf-colvis-menu">
+ *            <li><input type="checkbox" value="1" checked><label>Rendering Engine</label></li>
+ *            <li><input type="checkbox" value="2" checked><label>Browser</label></li>
+ *            <li><input type="checkbox" value="3" checked><label>Platform(s)</label></li>
+ *            <li><input type="checkbox" value="4" checked><label>Engine Version</label></li>
+ *            <li><input type="checkbox" value="5" checked><label>CSS Grade</label></li>
+ *          </ul>
+ *         </div>
+ *       </div>
+ *       ...
+ *     </form>
+ *   </div>
+ * </div>
+ * <table class="table table-striped table-bordered table-hover" id="table1">
+ *   <thead>
+ *     <tr>
+ *       <th><input type="checkbox" name="selectAll"></th>
+ *       <th>Rendering Engine</th>
+ *       <th>Browser</th>
+ *     </tr>
+ *   </thead>
+ * </table>
+ * ...
+ * <script>
+ * // NOTE: Some properties may be omitted for clarity
+ * $(document).ready(function() {
+ *   var dt = $("#table1").DataTable({
+ *     columns: [
+ *       { data: null, ... },
+ *       { data: "engine" },
+ *       { data: "browser" }
+ *     ],
+ *     data: [
+ *       { engine: "Gecko", browser: "Firefox" }
+ *       { engine: "Trident", browser: "Mozilla" }
+ *     ],
+ *     dom: "t",
+ *     pfConfig: {
+ *       ...
+ *       colvisMenuSelector: '.table-view-pf-colvis-menu'
+ *     }
+ *   });
+ *
+ * });
+ * </script>
+ */
+(function (factory) {
+  "use strict";
+  if (typeof define === "function" && define.amd ) {
+    // AMD
+    define (["jquery", "datatables.net"], function ($) {
+      return factory ($, window, document);
+    });
+  } else if (typeof exports === "object") {
+    // CommonJS
+    module.exports = function (root, $) {
+      if (!root) {
+        root = window;
+      }
+      if (!$ || !$.fn.dataTable) {
+        $ = require("datatables.net")(root, $).$;
+      }
+      return factory($, root, root.document);
+    };
+  } else {
+    // Browser
+    factory(jQuery, window, document);
+  }
+}(function ($, window, document, undefined) {
+  "use strict";
+  var DataTable = $.fn.dataTable;
+
+  DataTable.pfColVis = {};
+
+  /**
+   * Initialize
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @private
+   */
+  DataTable.pfColVis.init = function (dt) {
+    var i;
+    var ctx = dt.settings()[0];
+    var opts = (ctx.oInit.pfConfig) ? ctx.oInit.pfConfig : {};
+
+    if (opts.colvisMenuSelector === undefined) {
+      return;
+    }
+
+    ctx._pfColVis = {};
+    ctx._pfColVis.colvisMenu = $(opts.colvisMenuSelector, opts.toolbarSelector);
+
+    // Attach event handler for checkbox of ColVis menu
+    ctx._pfColVis.colvisMenu.on('click', 'li', { 'dt': dt }, colvisMenuHandler);
+  };
+
+  // Local functions
+
+  /**
+   * Handle actions when ColVis menu items are toggled
+   *
+   * @param {object} jquery eventObject - click event of ColVis menu items
+   * @private
+   */
+  function colvisMenuHandler (event) {
+    var $check = $(this).children(':checkbox');
+    if (event.target.nodeName !== 'INPUT') {
+      event.stopPropagation();
+      $check.prop('checked', !$check.prop('checked'));
+    }
+    event.data.dt.column($check.val()).visible($check.prop('checked'));
+  }
+
+  // DataTables creation
+  $(document).on("init.dt", function (e, ctx, json) {
+    if (e.namespace !== "dt") {
+      return;
+    }
+    DataTable.pfColVis.init(new DataTable.Api(ctx));
+  });
+  return DataTable.pfColVis;
+}));

data/dist/js/patternfly.dataTables.pfEmpty.js

@@ -0,0 +1,253 @@
+/**
+ * @summary     pfEmpty for DataTables
+ * @description A collection of API methods providing functionality to hide and show elements when DataTables is empty.
+ * This ensures DataTables meets the Patternfly design pattern with a toolbar and empty state.
+ *
+ * When DataTable is redrawn and data length is zero, controls under the toolbar-pf-actions and toolbar-pf-results
+ * classes are disabled; including the filter drop down, filter input, action buttons, kebab, find, etc. (You may
+ * re-enable specific controls via the DataTables "draw.dt" event.) In addition, the DataTables empty table header and
+ * row are hidden while the empty state (i.e., blank slate) layout is shown.
+ *
+ * The toolbar and empty state layouts are expected to contain the classes as shown in the example below.
+ *
+ * Example:
+ *
+ * <!-- NOTE: Some configuration may be omitted for clarity -->
+ * <div class="row toolbar-pf table-view-pf-toolbar" id="toolbar1">
+ *   <div class="col-sm-12">
+ *     <form class="toolbar-pf-actions">
+ *       ...
+ *     </form>
+ *     <div class="row toolbar-pf-results">
+ *       ...
+ *     </div>
+ *   </div>
+ * </div>
+ * <table class="table table-striped table-bordered table-hover" id="table1">
+ *   <thead>
+ *     <tr>
+ *       <th><input type="checkbox" name="selectAll"></th>
+ *       <th>Rendering Engine</th>
+ *       <th>Browser</th>
+ *     </tr>
+ *   </thead>
+ * </table>
+ * <div class="blank-slate-pf table-view-pf-empty hidden" id="emptyState1">
+ *   <div class="blank-slate-pf-icon">
+ *     <span class="pficon pficon pficon-add-circle-o"></span>
+ *   </div>
+ *   <h1>Empty State Title</h1>
+ *   ...
+ * </div>
+ * <script>
+ * // NOTE: Some properties may be omitted for clarity
+ * $(document).ready(function() {
+ *   var dt = $("#table1").DataTable({
+ *     columns: [
+ *       { data: null, ... },
+ *       { data: "engine" },
+ *       { data: "browser" }
+ *     ],
+ *     data: null,
+ *     dom: "t",
+ *     pfConfig: {
+ *       emptyStateSelector: "#emptyState1",
+ *       ...
+ *       toolbarSelector: "#toolbar1"
+ *     }
+ *   });
+ *   dt.table().pfEmpty.updateState(); // Optional API to force update
+ * });
+ * </script>
+ *
+ * Note: This functionality requires the following Javascript library files to be loaded:
+ *
+ * https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js
+ */
+(function (factory) {
+  "use strict";
+  if (typeof define === "function" && define.amd ) {
+    // AMD
+    define (["jquery", "datatables.net"], function ($) {
+      return factory ($, window, document);
+    });
+  } else if (typeof exports === "object") {
+    // CommonJS
+    module.exports = function (root, $) {
+      if (!root) {
+        root = window;
+      }
+      if (!$ || !$.fn.dataTable) {
+        $ = require("datatables.net")(root, $).$;
+      }
+      return factory($, root, root.document);
+    };
+  } else {
+    // Browser
+    factory(jQuery, window, document);
+  }
+}(function ($, window, document, undefined) {
+  "use strict";
+  var DataTable = $.fn.dataTable;
+  var ACTIONS_SELECTOR = ".toolbar-pf-actions"; // Toolbar actions
+  var RESULTS_SELECTOR = ".toolbar-pf-results"; // Toolbar results row
+
+  DataTable.pfEmpty = {};
+
+  /**
+   * Initialize
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @private
+   */
+  DataTable.pfEmpty.init = function (dt) {
+    var ctx = dt.settings()[0];
+    var opts = (ctx.oInit.pfConfig) ? ctx.oInit.pfConfig : {};
+
+    ctx._pfEmpty = {};
+    ctx._pfEmpty.emptyState = $(opts.emptyStateSelector); // Empty state (Blank slate)
+    ctx._pfEmpty.isEmptyState = false; // Flag indicating DatTable entered an empty state
+    ctx._pfEmpty.pagination = $(opts.paginationSelector); // Pagination
+    ctx._pfEmpty.tbody = $("tbody", dt.table().container()); // Table body
+    ctx._pfEmpty.thead = $("thead", dt.table().container()); // Table head
+    ctx._pfEmpty.toolbarActions = $(ACTIONS_SELECTOR, opts.toolbarSelector); // Toolbar actions
+    ctx._pfEmpty.toolbarResults = $(RESULTS_SELECTOR, opts.toolbarSelector); // Toolbar results row
+
+    // Update table on DataTables draw event
+    dt.on("draw.dt", function () {
+      updateState(dt);
+    });
+
+    // Initialize
+    updateState(dt);
+  };
+
+  // Local functions
+
+  /**
+   * Disable and hide elements when DataTables has no data
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @private
+   */
+  function updateEmptyState (dt) {
+    var ctx = dt.settings()[0];
+
+    // Show blank slate
+    if (ctx._pfEmpty.emptyState !== undefined && ctx._pfEmpty.emptyState.length !== 0) {
+      ctx._pfEmpty.emptyState.removeClass("hidden");
+    }
+    // Hide zero records message
+    if (ctx._pfEmpty.tbody !== undefined && ctx._pfEmpty.tbody.length !== 0) {
+      ctx._pfEmpty.tbody.addClass("hidden");
+    }
+    // Hide column headers
+    if (ctx._pfEmpty.thead !== undefined && ctx._pfEmpty.thead.length !== 0) {
+      ctx._pfEmpty.thead.addClass("hidden");
+    }
+    // Disable all buttons
+    if (ctx._pfEmpty.toolbarActions !== undefined && ctx._pfEmpty.toolbarActions.length !== 0) {
+      $("button", ctx._pfEmpty.toolbarActions).prop("disabled", true);
+    }
+    // Disable all inputs
+    if (ctx._pfEmpty.toolbarActions !== undefined && ctx._pfEmpty.toolbarActions.length !== 0) {
+      $("input", ctx._pfEmpty.toolbarActions).prop("disabled", true);
+    }
+    // Hide results container
+    if (ctx._pfEmpty.toolbarResults !== undefined && ctx._pfEmpty.toolbarResults.length !== 0) {
+      ctx._pfEmpty.toolbarResults.children().addClass("hidden");
+    }
+    // Hide pagination
+    if (ctx._pfEmpty.pagination !== undefined && ctx._pfEmpty.pagination.length !== 0) {
+      ctx._pfEmpty.pagination.addClass("hidden");
+    }
+    // Enable on empty
+    if (ctx._pfEmpty.enableOnEmpty !== undefined) {
+      $(ctx._pfEmpty.enableOnEmpty).prop("disabled", false);
+    }
+    // Enable on empty
+    if (ctx._pfEmpty.enableOnEmpty !== undefined) {
+      $(ctx._pfEmpty.enableOnEmpty).prop("disabled", false);
+    }
+  }
+
+  /**
+   * Enable and show elements when DataTables has data
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @private
+   */
+  function updateNonEmptyState (dt) {
+    var ctx = dt.settings()[0];
+
+    // Hide blank slate
+    if (ctx._pfEmpty.emptyState !== undefined && ctx._pfEmpty.emptyState.length !== 0) {
+      ctx._pfEmpty.emptyState.addClass("hidden");
+    }
+    // Show table body
+    if (ctx._pfEmpty.tbody !== undefined && ctx._pfEmpty.tbody.length !== 0) {
+      ctx._pfEmpty.tbody.removeClass("hidden");
+    }
+    // Show column headers
+    if (ctx._pfEmpty.thead !== undefined && ctx._pfEmpty.thead.length !== 0) {
+      ctx._pfEmpty.thead.removeClass("hidden");
+    }
+    // Enable all buttons
+    if (ctx._pfEmpty.toolbarActions !== undefined && ctx._pfEmpty.toolbarActions.length !== 0) {
+      $("button", ctx._pfEmpty.toolbarActions).prop("disabled", false);
+    }
+    // Enable all inputs
+    if (ctx._pfEmpty.toolbarActions !== undefined && ctx._pfEmpty.toolbarActions.length !== 0) {
+      $("input", ctx._pfEmpty.toolbarActions).prop("disabled", false);
+    }
+    // Show results container
+    if (ctx._pfEmpty.toolbarResults !== undefined && ctx._pfEmpty.toolbarResults.length !== 0) {
+      ctx._pfEmpty.toolbarResults.children().removeClass("hidden");
+    }
+    // Show pagination
+    if (ctx._pfEmpty.pagination !== undefined && ctx._pfEmpty.pagination.length !== 0) {
+      ctx._pfEmpty.pagination.removeClass("hidden");
+    }
+  }
+
+  /**
+   * Update elements upon empty DataTable state
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @private
+   */
+  function updateState (dt) {
+    var ctx = dt.settings()[0];
+
+    // Don't enable or show elements unless DataTable was empty
+    if (dt.data().length === 0) {
+      ctx._pfEmpty.isEmptyState = true;
+      updateEmptyState(dt);
+    } else if (ctx._pfEmpty.isEmptyState === true) {
+      ctx._pfEmpty.isEmptyState = false;
+      updateNonEmptyState(dt);
+    }
+  }
+
+  // DataTables API
+
+  /**
+   * Update state upon empty or non-empty DataTable
+   *
+   * Example: dt.table().pfEmpty.updateState();
+   */
+  DataTable.Api.register("pfEmpty.updateState()", function () {
+    return this.iterator("table", function (ctx) {
+      updateState(new DataTable.Api(ctx));
+    });
+  });
+
+  // DataTables creation
+  $(document).on("init.dt", function (e, ctx, json) {
+    if (e.namespace !== "dt") {
+      return;
+    }
+    DataTable.pfEmpty.init(new DataTable.Api(ctx));
+  });
+  return DataTable.pfEmpty;
+}));

data/dist/js/patternfly.dataTables.pfEmpty.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 updateEmptyState(dt){var ctx=dt.settings()[0];ctx._pfEmpty.emptyState!==undefined&&0!==ctx._pfEmpty.emptyState.length&&ctx._pfEmpty.emptyState.removeClass("hidden"),ctx._pfEmpty.tbody!==undefined&&0!==ctx._pfEmpty.tbody.length&&ctx._pfEmpty.tbody.addClass("hidden"),ctx._pfEmpty.thead!==undefined&&0!==ctx._pfEmpty.thead.length&&ctx._pfEmpty.thead.addClass("hidden"),ctx._pfEmpty.toolbarActions!==undefined&&0!==ctx._pfEmpty.toolbarActions.length&&$("button",ctx._pfEmpty.toolbarActions).prop("disabled",!0),ctx._pfEmpty.toolbarActions!==undefined&&0!==ctx._pfEmpty.toolbarActions.length&&$("input",ctx._pfEmpty.toolbarActions).prop("disabled",!0),ctx._pfEmpty.toolbarResults!==undefined&&0!==ctx._pfEmpty.toolbarResults.length&&ctx._pfEmpty.toolbarResults.children().addClass("hidden"),ctx._pfEmpty.pagination!==undefined&&0!==ctx._pfEmpty.pagination.length&&ctx._pfEmpty.pagination.addClass("hidden"),ctx._pfEmpty.enableOnEmpty!==undefined&&$(ctx._pfEmpty.enableOnEmpty).prop("disabled",!1),ctx._pfEmpty.enableOnEmpty!==undefined&&$(ctx._pfEmpty.enableOnEmpty).prop("disabled",!1)}function updateNonEmptyState(dt){var ctx=dt.settings()[0];ctx._pfEmpty.emptyState!==undefined&&0!==ctx._pfEmpty.emptyState.length&&ctx._pfEmpty.emptyState.addClass("hidden"),ctx._pfEmpty.tbody!==undefined&&0!==ctx._pfEmpty.tbody.length&&ctx._pfEmpty.tbody.removeClass("hidden"),ctx._pfEmpty.thead!==undefined&&0!==ctx._pfEmpty.thead.length&&ctx._pfEmpty.thead.removeClass("hidden"),ctx._pfEmpty.toolbarActions!==undefined&&0!==ctx._pfEmpty.toolbarActions.length&&$("button",ctx._pfEmpty.toolbarActions).prop("disabled",!1),ctx._pfEmpty.toolbarActions!==undefined&&0!==ctx._pfEmpty.toolbarActions.length&&$("input",ctx._pfEmpty.toolbarActions).prop("disabled",!1),ctx._pfEmpty.toolbarResults!==undefined&&0!==ctx._pfEmpty.toolbarResults.length&&ctx._pfEmpty.toolbarResults.children().removeClass("hidden"),ctx._pfEmpty.pagination!==undefined&&0!==ctx._pfEmpty.pagination.length&&ctx._pfEmpty.pagination.removeClass("hidden")}function updateState(dt){var ctx=dt.settings()[0];0===dt.data().length?(ctx._pfEmpty.isEmptyState=!0,updateEmptyState(dt)):!0===ctx._pfEmpty.isEmptyState&&(ctx._pfEmpty.isEmptyState=!1,updateNonEmptyState(dt))}var DataTable=$.fn.dataTable;return DataTable.pfEmpty={},DataTable.pfEmpty.init=function(dt){var ctx=dt.settings()[0],opts=ctx.oInit.pfConfig?ctx.oInit.pfConfig:{};ctx._pfEmpty={},ctx._pfEmpty.emptyState=$(opts.emptyStateSelector),ctx._pfEmpty.isEmptyState=!1,ctx._pfEmpty.pagination=$(opts.paginationSelector),ctx._pfEmpty.tbody=$("tbody",dt.table().container()),ctx._pfEmpty.thead=$("thead",dt.table().container()),ctx._pfEmpty.toolbarActions=$(".toolbar-pf-actions",opts.toolbarSelector),ctx._pfEmpty.toolbarResults=$(".toolbar-pf-results",opts.toolbarSelector),dt.on("draw.dt",function(){updateState(dt)}),updateState(dt)},DataTable.Api.register("pfEmpty.updateState()",function(){return this.iterator("table",function(ctx){updateState(new DataTable.Api(ctx))})}),$(document).on("init.dt",function(e,ctx,json){"dt"===e.namespace&&DataTable.pfEmpty.init(new DataTable.Api(ctx))}),DataTable.pfEmpty});