carbon-components
Version:
The Carbon Design System is IBM’s open-source design system for products and experiences.
152 lines (137 loc) • 5.17 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2018
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import settings from '../../globals/js/settings';
import mixin from '../../globals/js/misc/mixin';
import createComponent from '../../globals/js/mixins/create-component';
import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
import handles from '../../globals/js/mixins/handles';
import eventMatches from '../../globals/js/misc/event-matches';
import on from '../../globals/js/misc/on';
const toArray = (arrayLike) => Array.prototype.slice.call(arrayLike);
class Toolbar extends mixin(createComponent, initComponentBySearch, handles) {
/**
* Toolbar.
* @extends CreateComponent
* @extends InitComponentBySearch
* @extends Handles
* @param {HTMLElement} element The element working as an toolbar.
*/
constructor(element, options) {
super(element, options);
if (!this.element.dataset.tableTarget) {
console.warn('There is no table bound to this toolbar!'); // eslint-disable-line no-console
} else {
const boundTable = this.element.ownerDocument.querySelector(
this.element.dataset.tableTarget
);
const rowHeightBtns = this.element.querySelector(
this.options.selectorRowHeight
);
if (rowHeightBtns) {
this.manage(
on(rowHeightBtns, 'click', (event) => {
this._handleRowHeightChange(event, boundTable);
})
);
// toArray(this.element.querySelectorAll(this.options.selectorRowHeight)).forEach((item) => {
// item.addEventListener('click', (event) => { this._handleRowHeightChange(event, boundTable); });
// });
}
}
this.manage(
on(this.element.ownerDocument, 'keydown', (evt) => {
this._handleKeyDown(evt);
})
);
this.manage(
on(this.element.ownerDocument, 'click', (evt) => {
this._handleDocumentClick(evt);
})
);
}
/**
* Handles toggling of active state of the toolbar search input
* @param {Event} event The event triggering this method.
*/
_handleDocumentClick(event) {
const searchInput = eventMatches(event, this.options.selectorSearch);
const isOfSelfSearchInput =
searchInput && this.element.contains(searchInput);
if (isOfSelfSearchInput) {
const shouldBeOpen =
isOfSelfSearchInput &&
!this.element.classList.contains(this.options.classSearchActive);
searchInput.classList.toggle(
this.options.classSearchActive,
shouldBeOpen
);
if (shouldBeOpen) {
searchInput.querySelector('input').focus();
}
}
const targetComponentElement = eventMatches(
event,
this.options.selectorInit
);
toArray(
this.element.ownerDocument.querySelectorAll(this.options.selectorSearch)
).forEach((item) => {
if (!targetComponentElement || !targetComponentElement.contains(item)) {
item.classList.remove(this.options.classSearchActive);
}
});
}
/**
* Handles toggling of active state of the toolbar search input via the keyboard
* @param {Event} event The event triggering this method.
*/
_handleKeyDown(event) {
const searchInput = eventMatches(event, this.options.selectorSearch);
if (searchInput && event.which === 27) {
searchInput.classList.remove(this.options.classSearchActive);
}
}
/**
* Handles toggling of the row height of the associated table
* @param {Event} event The event triggering this method.
* @param {HTMLElement} boundTable The table associated with the toolbar.
*/
_handleRowHeightChange(event, boundTable) {
const { value } = event.currentTarget.querySelector('input:checked');
if (value === 'tall') {
boundTable.classList.add(this.options.classTallRows);
} else {
boundTable.classList.remove(this.options.classTallRows);
}
}
/**
* The map associating DOM element and Toolbar UI instance.
* @type {WeakMap}
*/
static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
/**
* The component options.
* If `options` is specified in the constructor,
* properties in this object are overridden for the instance being created.
* @property {string} selectorInit The CSS selector to find toolbar instances.
* @property {string} selectorSearch The CSS selector to find search inputs in a toolbar.
* @property {string} selectorRowHeight The CSS selector to find the row height inputs in a toolbar.
* @property {string} classTallRows The CSS class for making table rows into tall rows.
* @property {string} classSearchActive The CSS class the active state of the search input.
*/
static get options() {
const { prefix } = settings;
return {
selectorInit: '[data-toolbar]',
selectorSearch: '[data-toolbar-search]',
selectorRowHeight: '[data-row-height]',
classTallRows: `${prefix}--responsive-table--tall`,
classSearchActive: `${prefix}--toolbar-search--active`,
};
}
}
export default Toolbar;