See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.
A member of the Bluemix Design System's team will be in touch within 48 hours.
Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.
We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:
#bluemix-componentscomponents
Overflow menu is used when additional options are available to the user and there is a space constraint.
<div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'>
<svg class='bx--overflow-menu__icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use>
</svg>
<ul class='bx--overflow-menu__options'>
<li><button type='button' class='bx--overflow-menu__btn'>Stop app</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart app</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Rename app</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Edit routes and access</button></li>
<hr/>
<li><button type='button' class='bx--overflow-menu__btn--delete'>Delete app</button></li>
</ul>
</div>
import mixin from '../misc/mixin';
import createComponent from '../mixins/create-component';
import initComponent from '../mixins/init-component-by-search';
import eventedState from '../mixins/evented-state';
import '../polyfills/array-from';
import '../polyfills/element-matches';
import '../polyfills/object-assign';
import toggleClass from '../polyfills/toggle-class';
import on from '../misc/on';
class OverflowMenu extends mixin(createComponent, initComponent, eventedState) {
constructor(element, options) {
super(element, options);
this.optionMenu = this.element.querySelector(this.options.selectorOptionMenu);
/**
* The handle to release click event listener on document object.
* @member {Handle}
*/
this.hDocumentClick = on(this.element.ownerDocument, 'click', (event) => { this.handleDocumentClick(event); });
/**
* The handle to release keypress event listener on document object.
* @member {Handle}
*/
this.hDocumentKeyPress = on(this.element.ownerDocument, 'keypress', (event) => { this.handleKeyPress(event); });
}
/**
* @param {string} state The new state.
* @returns {boolean} `true` of the current state is different from the given new state.
*/
shouldStateBeChanged(state) {
return state !== (this.element.classList.contains('bx--overflow-menu--open') ? 'shown' : 'hidden');
}
/**
* Changes the shown/hidden state.
* @private
* @param {string} state The new state.
* @param {Object} detail The detail of the event trigging this action.
* @param {Function} callback Callback called when change in state completes.
*/
_changeState(state, detail, callback) {
toggleClass(this.optionMenu, 'bx--overflow-menu--open', state === 'shown');
toggleClass(this.element, 'bx--overflow-menu--open', state === 'shown');
callback();
}
handleDocumentClick(event) {
const isOfSelf = this.element.contains(event.target);
const shouldBeOpen = isOfSelf && !this.element.classList.contains('bx--overflow-menu--open');
const state = shouldBeOpen ? 'shown' : 'hidden';
if (isOfSelf && this.element.tagName === 'A') {
event.preventDefault();
}
this.changeState(state, {
element: this.element,
optionMenu: this.optionMenu,
evt: event,
});
}
handleKeyPress(event) {
const key = event.key || event.which;
if (key === 'Enter' || key === 13) {
const isOfSelf = this.element.contains(event.target);
const shouldBeOpen = isOfSelf && !this.element.classList.contains('bx--overflow-menu--open');
const state = shouldBeOpen ? 'shown' : 'hidden';
if (isOfSelf && this.element.tagName === 'A') {
event.preventDefault();
}
this.changeState(state, {
element: this.element,
optionMenu: this.optionMenu,
evt: event,
});
}
}
release() {
if (this.hDocumentClick) {
this.hDocumentClick = this.hDocumentClick.release();
}
if (this.hDocumentKeyPress) {
this.hDocumentKeyPress = this.hDocumentKeyPress.release();
}
super.release();
}
static components = new WeakMap();
static options = {
selectorInit: '[data-overflow-menu]',
selectorOptionMenu: '.bx--overflow-menu__options',
eventBeforeShown: 'overflow-menu-beingshown',
eventAfterShown: 'overflow-menu-shown',
eventBeforeHidden: 'overflow-menu-beinghidden',
eventAfterHidden: 'overflow-menu-hidden',
};
}
export default OverflowMenu;