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

data/dist/js/patternfly.dataTables.pfSelect.js

@@ -0,0 +1,281 @@
+/**
+ * @summary     pfSelect for DataTables
+ * @description A collection of API methods providing individual row selection and select all functionality in
+ * DataTables using traditional HTML checkboxes. This ensures DataTables meets the Patternfly design pattern while
+ * maintaining accessibility.
+ *
+ * The following selection styles are supported for user interaction with DataTables:
+ *
+ * api - Selection can only be performed via the API
+ * multi - Multiple items can be selected
+ * multi+shift - a hybrid between the os style and multi
+ * os - Operating system style selection with complex behaviors such as ctrl/cmd, shift and an unmodified click
+ * single - Only a single item can be selected
+ *
+ * For details see: https://datatables.net/reference/option/select.style
+ *
+ * Note that when a selection is made, the selection results text is also updated in the toolbar. The toolbar layouts is
+ * expected to contain the classes as shown in the example below. Selection checkboxes are also expected to be located
+ * in the first column.
+ *
+ * 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">
+ *     ...
+ *     <div class="row toolbar-pf-results">
+ *       <div class="col-sm-9">
+ *         ...
+ *       </div>
+ *       <div class="col-sm-3 table-view-pf-select-results">
+ *         <strong>0</strong> of <strong>0</strong> selected
+ *       </div>
+ *     </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>
+ * ...
+ * <script>
+ * // NOTE: Some properties may be omitted for clarity
+ * $(document).ready(function() {
+ *   var dt = $("#table1").DataTable({
+ *     columns: [
+ *       { data: null,
+ *         className: "table-view-pf-select",
+ *         render: function (data, type, full, meta) {
+ *           return '<input type="checkbox" name="select">';
+ *         },
+ *         sortable: false
+ *       },
+ *       { data: "engine" },
+ *       { data: "browser" }
+ *     ],
+ *     data: [
+ *       { engine: "Gecko", browser: "Firefox" }
+ *       { engine: "Trident", browser: "Mozilla" }
+ *     ],
+ *     dom: "t",
+ *     order: [[ 1, "asc" ]],
+ *     pfConfig: {
+ *       ...
+ *       toolbarSelector: "#toolbar1",
+ *       selectAllSelector: 'th:first-child input[type="checkbox"]'
+ *     }
+ *     select: {
+ *       selector: 'td:first-child input[type="checkbox"]',
+ *       style: "multi"
+ *     }
+ *   });
+ *   dt.table().pfSelect.selectAllRows(true); // Optional API to select all rows
+ * });
+ * </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 RESULTS_SELECTOR = ".table-view-pf-select-results"; // Toolbar selection results
+  var SELECT_ALL_SELECTOR = 'th:first-child input[type="checkbox"]'; // Default checkbox for selecting all rows
+  var SELECT_SELECTOR = 'td:first-child input[type="checkbox"]'; // Default checkboxes for row selection
+
+  DataTable.pfSelect = {};
+
+  /**
+   * Initialize
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @private
+   */
+  DataTable.pfSelect.init = function (dt) {
+    var ctx = dt.settings()[0];
+    var opts = (ctx.oInit.pfConfig) ? ctx.oInit.pfConfig : {};
+    var select = (ctx.oInit.select) ? ctx.oInit.select : {};
+    var style = dt.select.style();
+
+    ctx._pfSelect = {};
+    ctx._pfSelect.selectAllSelector = (opts.selectAllSelector !== undefined)
+      ? opts.selectAllSelector : SELECT_ALL_SELECTOR; // Select all checkbox
+    ctx._pfSelect.selector = (select.selector !== undefined)
+      ? select.selector : SELECT_SELECTOR; // Select checkbox
+    ctx._pfSelect.results = $(RESULTS_SELECTOR, opts.toolbarSelector); // Toolbar selection results
+
+    if (style === "api") {
+      // Select all checkbox
+      $(dt.table().container()).on("click", ctx._pfSelect.selectAllSelector, function (evt) {
+        evt.preventDefault();
+      });
+
+      // Select checkboxes
+      $(dt.table().container()).on("click", ctx._pfSelect.selector, function (evt) {
+        evt.preventDefault();
+      });
+
+      dt.table().on("select.dt", function () {
+        syncSelectCheckboxes(dt);
+      });
+    } else {
+      // Select all checkbox
+      $(dt.table().container()).on("click", ctx._pfSelect.selectAllSelector, function (evt) {
+        selectAllRows(dt, evt.target.checked);
+      });
+
+      // Select checkboxes
+      $(dt.table().container()).on("click", ctx._pfSelect.selector, function (evt) {
+        if (style !== "multi" || style !== "multi+shift") {
+          syncSelectCheckboxes(dt); // No need to sync checkbox selections when "multi" is used
+        } else {
+          syncSelectAllCheckbox(dt); // Still need to sync select all checkbox
+        }
+      });
+    }
+
+    // Sync checkbox selections when paging and filtering is applied
+    dt.table().on("draw.dt", function () {
+      syncSelectCheckboxes(dt);
+    });
+
+    // Initialize selected rows text
+    updateSelectedRowsText(dt);
+  };
+
+  // Local functions
+
+  /**
+   * Select all rows on current page
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @param {boolean} select True to select all rows on current page, defaults to false
+   * @private
+   */
+  function selectAllRows (dt, select) {
+    var ctx = dt.settings()[0];
+
+    // Retrieve all rows taking into account currently applied filter
+    var filteredRows = dt.rows({"page": "current", "search": "applied"});
+
+    // Check if style is single
+    if (dt.select.style() === "single") {
+      throw new Error("Cannot select all rows with selection style 'single'");
+    }
+
+    // Select rows
+    if (select) {
+      filteredRows.select();
+    } else {
+      filteredRows.deselect();
+    }
+    $(ctx._pfSelect.selector, dt.table().container()).prop("checked", select); // De/select checkboxes in view
+    syncSelectAllCheckbox(dt);
+  }
+
+  /**
+   * Sync select all checkbox with row selections on current page
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @private
+   */
+  function syncSelectAllCheckbox (dt) {
+    var ctx = dt.settings()[0];
+
+    // Retrieve all rows taking into account currently applied filter
+    var filteredRows = dt.rows({"page": "current", "search": "applied"}).flatten().length;
+    var selectedFilteredRows = dt.rows({"page": "current", "search": "applied", "selected": true}).flatten().length;
+
+    // De/select the select all checkbox
+    var selectAll = $(ctx._pfSelect.selectAllSelector, dt.table().container())[0];
+    if (selectAll) {
+      selectAll.checked = (filteredRows !== 0 && filteredRows === selectedFilteredRows);
+    }
+    updateSelectedRowsText(dt);
+  }
+
+  /**
+   * Sync select checkboxes with row selections on current page
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @private
+   */
+  function syncSelectCheckboxes (dt) {
+    var ctx = dt.settings()[0];
+
+    $(ctx._pfSelect.selector, dt.table().container()).prop("checked", false); // Deselect all checkboxes
+    dt.rows({"page": "current", "search": "applied", "selected": true}).every(function (index) {
+      $(ctx._pfSelect.selector, dt.table().row(index).node()).prop("checked", true); // Select checkbox for selected row
+    });
+    syncSelectAllCheckbox(dt);
+  }
+
+  /**
+   * Update selection results text
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @private
+   */
+  function updateSelectedRowsText (dt) {
+    var ctx = dt.settings()[0];
+    var selectedRows = dt.rows({"selected": true}).flatten().length;
+    var totalRows = dt.rows().flatten().length;
+    if (ctx._pfSelect.results !== undefined && ctx._pfSelect.results.length !== 0) {
+      $(ctx._pfSelect.results).html("<strong>" + selectedRows + "</strong> of <strong>" +
+        totalRows + "</strong> selected");
+    }
+  }
+
+  // DataTables API
+
+  /**
+   * Select all rows on current page
+   *
+   * Example: dt.table().pfSelect.selectAllRows(true);
+   *
+   * @param {boolean} select True to select all rows on current page, defaults to false
+   */
+  DataTable.Api.register("pfSelect.selectAllRows()", function (select) {
+    return this.iterator("table", function (ctx) {
+      selectAllRows(new DataTable.Api(ctx), select);
+    });
+  });
+
+  // DataTables creation
+  $(document).on("preInit.dt.dtSelect", function (e, ctx) {
+    if (e.namespace !== "dt") {
+      return;
+    }
+    DataTable.pfSelect.init(new DataTable.Api(ctx));
+  });
+  return DataTable.pfSelect;
+}));

data/dist/js/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=0!==filteredRows&&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;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:'th:first-child input[type="checkbox"]',ctx._pfSelect.selector=select.selector!==undefined?select.selector:'td:first-child input[type="checkbox"]',ctx._pfSelect.results=$(".table-view-pf-select-results",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});