keycloak-theme/common/resources/node_modules/patternfly/dist/js/patternfly.dataTables.pfEmpty.js

/**
 * @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;
}));