99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
import ngModule from '../../module';
|
|
import Component from '../../lib/component';
|
|
import './style.scss';
|
|
|
|
/**
|
|
* A simple component to show non-obstructive notifications to the user.
|
|
*/
|
|
export default class Controller extends Component {
|
|
constructor($element, $translate) {
|
|
super($element);
|
|
this.$translate = $translate;
|
|
this.shown = false;
|
|
this.snackbar = $element[0].firstChild;
|
|
this.$snackbar = angular.element(this.snackbar);
|
|
this.button = $element[0].querySelector('button');
|
|
this.textNode = this.snackbar.querySelector('.text');
|
|
}
|
|
/**
|
|
* Shows a notification.
|
|
*
|
|
* @param {Object} data The message data
|
|
*/
|
|
show(data) {
|
|
this.clearTimeouts();
|
|
this.shown = true;
|
|
this.textNode.textContent = data.message;
|
|
this.actionHandler = data.actionHandler;
|
|
|
|
this.button.textContent =
|
|
data.actionText || this.$translate.instant('Hide');
|
|
|
|
this.documentClickHandler = e => this.onDocumentClick(e);
|
|
document.addEventListener('click', this.documentClickHandler);
|
|
this.timeoutId = setTimeout(() => this.hide(),
|
|
data.timeout || 6000);
|
|
|
|
this.transitionTimeout =
|
|
setTimeout(() => this.$snackbar.addClass('shown'), 30);
|
|
}
|
|
/**
|
|
* Shows an error.
|
|
*
|
|
* @param {Object} data The message data
|
|
*/
|
|
showError(data) {
|
|
this.$snackbar.addClass('error');
|
|
this.show(data);
|
|
}
|
|
/**
|
|
* Hides the snackbar.
|
|
*/
|
|
hide() {
|
|
if (!this.shown) return;
|
|
clearTimeout(this.timeoutId);
|
|
document.removeEventListener('click', this.documentClickHandler);
|
|
this.shown = false;
|
|
this.hideTimeout = setTimeout(() => this.onTransitionEnd(), 250);
|
|
|
|
this.transitionTimeout =
|
|
setTimeout(() => this.$snackbar.removeClass('shown'), 30);
|
|
}
|
|
onTransitionEnd() {
|
|
this.$snackbar.removeClass('error');
|
|
this.textNode.textContent = '';
|
|
this.button.textContent = '';
|
|
this.actionHandler = null;
|
|
}
|
|
onDocumentClick(event) {
|
|
if (event === this.event) return;
|
|
this.hide();
|
|
}
|
|
onSnackbarClick(event) {
|
|
this.event = event;
|
|
}
|
|
onButtonClick() {
|
|
if (this.actionHandler)
|
|
this.actionHandler();
|
|
else
|
|
this.hide();
|
|
}
|
|
clearTimeouts() {
|
|
clearTimeout(this.timeoutId);
|
|
clearTimeout(this.hideTimeout);
|
|
clearTimeout(this.transitionTimeout);
|
|
this.timeoutId = null;
|
|
this.hideTimeout = null;
|
|
this.transitionTimeout = null;
|
|
}
|
|
$onDestroy() {
|
|
this.clearTimeouts();
|
|
}
|
|
}
|
|
Controller.$inject = ['$element', '$translate'];
|
|
|
|
ngModule.component('vnSnackbar', {
|
|
template: require('./snackbar.html'),
|
|
controller: Controller
|
|
});
|