from gitlab
This commit is contained in:
Jörg Henke
253
common/resources/node_modules/patternfly/dist/js/patternfly.dataTables.pfEmpty.js
generated
vendored
Normal file
253
common/resources/node_modules/patternfly/dist/js/patternfly.dataTables.pfEmpty.js
generated
vendored
Normal file
@ -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;
|
||||
}));
|
||||
Reference in New Issue
Block a user