Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance. Project price only 1 $
You can buy this project and download/modify it how often you want.
/**
* __PrimeFaces SelectCheckboxMenu Widget__
*
* SelectCheckboxMenu is a multi select component that displays options in an overlay.
*
* @typedef {"startsWith" | "contains" | "endsWith" | "custom"} PrimeFaces.widget.SelectCheckboxMenu.FilterMatchMode
* Available modes for filtering the options of a select list box. When `custom` is set, a `filterFunction` must be
* specified.
*
* @typedef PrimeFaces.widget.SelectCheckboxMenu.FilterFunction A function for filtering the options of a select list
* box.
* @param {string} PrimeFaces.widget.SelectCheckboxMenu.FilterFunction.itemLabel The label of the currently selected
* text.
* @param {string} PrimeFaces.widget.SelectCheckboxMenu.FilterFunction.filterValue The value to search for.
* @return {boolean} PrimeFaces.widget.SelectCheckboxMenu.FilterFunction `true` if the item label matches the filter
* value, or `false` otherwise.
*
* @typedef PrimeFaces.widget.SelectCheckboxMenu.OnChangeCallback Callback that is invoked when a checkbox option was
* checked or unchecked. See also {@link SelectCheckboxMenuCfg.onChange}.
* @this {PrimeFaces.widget.SelectCheckboxMenu} PrimeFaces.widget.SelectCheckboxMenu.OnChangeCallback
*
* @typedef PrimeFaces.widget.SelectCheckboxMenu.OnHideCallback Callback that is invoked when the overlay panel is
* brought up. See also {@link SelectCheckboxMenuCfg.onHide}.
* @this {PrimeFaces.widget.SelectCheckboxMenu} PrimeFaces.widget.SelectCheckboxMenu.OnHideCallback
*
* @typedef PrimeFaces.widget.SelectCheckboxMenu.OnShowCallback Callback that is invoked when the overlay panel is
* hidden. See also {@link SelectCheckboxMenuCfg.onShow}.
* @this {PrimeFaces.widget.SelectCheckboxMenu} PrimeFaces.widget.SelectCheckboxMenu.OnShowCallback
*
* @prop {JQuery} checkboxes The DOM element for the checkboxes that can be selected.
* @prop {JQuery} [closer] The DOM element for the button that closes the overlay panel with the select
* options (when the panel is shown).
* @prop {JQuery} defaultLabel The DOM element for the default label.
* @prop {boolean} disabled Whether this widget is currently disabled.
* @prop {JQuery} [filterInput] DOM element of the input element used for entering a filter text, if filtering is
* enabled.
* @prop {JQuery} [filterInputWrapper] DOM element of the wrapper that holds the input element used for entering a
* filter text, if filtering is enabled.
* @prop {JQuery} groupHeaders The DOM elements for the headers of each option group.
* @prop {PrimeFaces.widget.SelectCheckboxMenu.FilterFunction} filterMatcher The filter that was selected and is
* currently used.
* @prop {Record} filterMatchers
* Map between the available filter types and the filter implementation.
* @prop {JQuery} [header] DOM element of the header of the overlay panel with the available select items,
* when the overlay panel is shown.
* @prop {PrimeFaces.UnbindCallback} [hideOverlayHandler] Unbind callback for the hide overlay handler.
* @prop {JQuery} inputs The DOM elements for the hidden inputs for each checkbox option.
* @prop {boolean} isDynamicLoaded When loading the panel with the available options lazily: if they have been loaded
* already.
* @prop {JQuery} items The DOM elements for the the available checkbox options.
* @prop {JQuery} itemContainer The DOM element for the container with the available checkbox options.
* @prop {JQuery} itemContainerWrapper The DOM element for the wrapper with the container with the available checkbox
* options.
* @prop {JQuery} keyboardTarget The DOM element for the hidden input element that that can be selected via pressing
* tab.
* @prop {JQuery} label The DOM element for the label indicating the currently selected option.
* @prop {JQuery} labelContainer The DOM element for the container with the label indicating the currently selected
* option.
* @prop {string} labelId ID of the label element that indicates the currently selected option.
* @prop {JQuery} menuIcon The DOM element for the icon for bringing up the overlay panel.
* @prop {JQuery} multiItemContainer The DOM element for the container with the tags representing the selected options.
* @prop {JQuery} panel The DOM element for the overlay panel with the available checkbox options.
* @prop {JQuery} panelId ID of the DOM element for the overlay panel with the available checkbox options.
* @prop {PrimeFaces.UnbindCallback} [resizeHandler] Unbind callback for the resize handler.
* @prop {PrimeFaces.UnbindCallback} [scrollHandler] Unbind callback for the scroll handler.
* @prop {string} tabindex Tab index of this widget.
* @prop {JQuery} [toggler] The wrapping DOM element of the toggler for selecting or unselecting all options
* in the overlay panel with all selected items (when the overlay panel is shown).
* @prop {JQuery} [togglerBox] The DOM element with the toggler checkbox for selecting or unselecting all
* options in the overlay panel with all selected items (when the overlay panel is shown).
* @prop {PrimeFaces.CssTransitionHandler | null} [transition] Handler for CSS transitions used by this widget.
* @prop {JQuery} triggers The DOM elements for the buttons that can trigger (hide or show) the overlay panel with the
* available checkbox options.
* @prop {boolean} widthAligned Whether the width of the overlay panel was aligned already.
*
* @interface {PrimeFaces.widget.SelectCheckboxMenuCfg} cfg The configuration for the {@link SelectCheckboxMenu| SelectCheckboxMenu widget}.
* You can access this configuration via {@link PrimeFaces.widget.BaseWidget.cfg|BaseWidget.cfg}. Please note that this
* configuration is usually meant to be read-only and should not be modified.
* @extends {PrimeFaces.widget.BaseWidgetCfg} cfg
*
* @prop {string} cfg.appendTo The search expression for the element to which the overlay panel should be appended.
* @prop {boolean} cfg.caseSensitive Defines if filtering would be case sensitive.
* @prop {boolean} cfg.filterNormalize Defines if filtering would be done using normalized values.
* @prop {boolean} cfg.dynamic Defines if dynamic loading is enabled for the element's panel. If the value is `true`,
* the overlay is not rendered on page load to improve performance.
* @prop {string} cfg.emptyLabel Label to be shown in updateLabel mode when no item is selected. If not set the label is
* shown.
* @prop {boolean} cfg.filter `true` if the options can be filtered, or `false` otherwise.
* @prop {PrimeFaces.widget.SelectCheckboxMenu.FilterFunction} cfg.filterFunction A custom filter function that is used
* when `filterMatchMode` is set to `custom`.
* @prop {PrimeFaces.widget.SelectCheckboxMenu.FilterMatchMode} cfg.filterMatchMode Mode of the filter. When set to
* `custom`, a `filterFunction` must be specified.
* @prop {string} cfg.filterPlaceholder Placeholder text to show when filter input is empty.
* @prop {number} cfg.initialHeight Initial height of the item container.
* @prop {string} cfg.labelSeparator Separator for joining item labels if updateLabel is set to true. Default is `,`.
* @prop {boolean} cfg.multiple Whether to show selected items as multiple labels.
* @prop {PrimeFaces.widget.SelectCheckboxMenu.OnChangeCallback} cfg.onChange Callback that is invoked when a checkbox
* option was checked or unchecked.
* @prop {PrimeFaces.widget.SelectCheckboxMenu.OnHideCallback} cfg.onHide Callback that is invoked when the overlay
* panel is brought up.
* @prop {PrimeFaces.widget.SelectCheckboxMenu.OnShowCallback} cfg.onShow Callback that is invoked when the overlay
* panel is hidden.
* @prop {string} cfg.panelStyle Inline style of the overlay panel.
* @prop {string} cfg.panelStyleClass Style class of the overlay panel
* @prop {number} cfg.scrollHeight Maximum height of the overlay panel.
* @prop {number} cfg.initialHeight Initial height of the overlay panel in pixels.
* @prop {boolean} cfg.showHeader When enabled, the header of overlay panel is displayed.
* @prop {boolean} cfg.updateLabel When enabled, the selected items are displayed on the label.
* @prop {boolean} cfg.renderPanelContentOnClient Renders panel content on client.
*/
PrimeFaces.widget.SelectCheckboxMenu = PrimeFaces.widget.BaseWidget.extend({
/**
* @override
* @inheritdoc
* @param {PrimeFaces.PartialWidgetCfg} cfg
*/
init: function(cfg) {
this._super(cfg);
this.labelContainer = this.jq.find('.ui-selectcheckboxmenu-label-container');
this.label = this.jq.find('.ui-selectcheckboxmenu-label');
this.menuIcon = this.jq.children('.ui-selectcheckboxmenu-trigger');
this.triggers = this.jq;
this.disabled = this.jq.hasClass('ui-state-disabled');
//get the hidden checkboxes except that ones in overlay panel
this.inputs = this.jq.children('div.ui-helper-hidden:not(.ui-input-overlay)').children(':checkbox');
this.panelId = this.jqId + '_panel';
this.labelId = this.id + '_label';
this.panel = $(this.panelId);
this.widthAligned = false;
this.itemContainerWrapper = this.panel.children('.ui-selectcheckboxmenu-items-wrapper');
this.keyboardTarget = $(this.jqId + '_focus');
this.tabindex = this.keyboardTarget.attr('tabindex');
this.cfg.showHeader = (this.cfg.showHeader === undefined) ? true : this.cfg.showHeader;
this.cfg.dynamic = this.cfg.dynamic === true ? true : false;
this.isDynamicLoaded = false;
this.cfg.labelSeparator = (this.cfg.labelSeparator === undefined) ? ', ' : this.cfg.labelSeparator;
if (!this.disabled) {
if (!this.cfg.dynamic) {
this._renderPanel();
}
this.bindEvents();
this.bindKeyEvents();
if (!this.cfg.multiple) {
this.label.attr('id', this.labelId);
this.keyboardTarget.attr('aria-labelledby', this.labelId);
}
this.keyboardTarget.attr('aria-expanded', false);
this.jq.attr('aria-expanded', false);
}
this.renderLabel();
//pfs metadata
this.inputs.data(PrimeFaces.CLIENT_ID_DATA, this.id);
},
/**
* @override
* @inheritdoc
* @param {PrimeFaces.PartialWidgetCfg} cfg
*/
refresh: function(cfg) {
this._super(cfg);
},
/**
* Creates the overlay panel with the checkboxes for the selectable option, and also sets up the event listeners
* for the panel.
* @private
*/
_renderPanel: function() {
this.renderPanel();
if (this.tabindex) {
this.panel.find('a, input').attr('tabindex', this.tabindex);
}
this.checkboxes = this.itemContainer.find('.ui-chkbox-box:not(.ui-state-disabled)');
this.bindPanelContentEvents();
this.bindPanelKeyEvents();
this.isDynamicLoaded = true;
},
/**
* Creates the overlay panel with the checkboxes for the selectable option.
* @private
*/
renderPanel: function() {
var rawPanelId = this.id + '_panel';
//init panel content rendered by SelectCheckboxMenuRenderer
this.header = this.panel.children('.ui-selectcheckboxmenu-header');
this.toggler = this.header.children('.ui-chkbox');
this.togglerBox = this.toggler.children('.ui-chkbox-box');
this.filterInputWrapper = this.header.children('.ui-selectcheckboxmenu-filter-container');
this.filterInput = this.filterInputWrapper.children('.ui-inputtext');
this.closer = this.header.children('.ui-selectcheckboxmenu-close');
if (this.cfg.renderPanelContentOnClient && this.itemContainerWrapper.children().length === 0) {
this.renderItems();
}
else {
//init items rendered by SelectCheckboxMenuRenderer
this.itemContainer = this.itemContainerWrapper.children('.ui-selectcheckboxmenu-items');
this.items = this.itemContainer.find('.ui-selectcheckboxmenu-item');
this.groupHeaders = this.itemContainer.find('.ui-selectcheckboxmenu-item-group');
}
if (this.cfg.scrollHeight) {
this.itemContainerWrapper.css('max-height', this.cfg.scrollHeight);
}
else if (this.inputs.length > 10) {
this.itemContainerWrapper.css('max-height', '200px');
}
this.cfg.appendTo = PrimeFaces.utils.resolveAppendTo(this, this.jq, this.panel);
PrimeFaces.utils.registerDynamicOverlay(this, this.panel, rawPanelId);
this.transition = PrimeFaces.utils.registerCSSTransition(this.panel, 'ui-connected-overlay');
this.keyboardTarget.attr('aria-controls', rawPanelId);
},
/**
* Create the label to display values
* @private
*/
renderLabel: function() {
if (!this.cfg.updateLabel) {
this.registerTrigger();
return;
}
if (this.cfg.multiple) {
this.multiItemContainer = this.multiItemContainer || this.jq.children('.ui-selectcheckboxmenu-multiple-container');
var items = this.multiItemContainer.children();
if (!items.length) {
this.multiItemContainer.empty().append('
