124 lines
2.9 KiB
JavaScript
124 lines
2.9 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.snackbar = $element[0].firstChild;
|
|
this.$snackbar = angular.element(this.snackbar);
|
|
}
|
|
|
|
/**
|
|
* It creates a new snackbar notification
|
|
* @param {Object} data Snackbar data
|
|
* @return {Object} Created snackbar shape
|
|
*/
|
|
createShape(data) {
|
|
let shape = document.createElement('div');
|
|
shape.className = 'shape';
|
|
|
|
let button = document.createElement('button');
|
|
|
|
let buttonText = data.actionText || this.$translate.instant('Hide');
|
|
buttonText = document.createTextNode(buttonText);
|
|
button.appendChild(buttonText);
|
|
|
|
button.addEventListener('click', () => {
|
|
this.onButtonClick(shape);
|
|
});
|
|
|
|
shape.appendChild(button);
|
|
|
|
let shapeText = document.createElement('div');
|
|
shapeText.setAttribute('class', 'text');
|
|
shape.appendChild(shapeText);
|
|
|
|
let text = document.createTextNode(data.message);
|
|
shapeText.appendChild(text);
|
|
|
|
if (data.shapeType)
|
|
shape.classList.add(data.shapeType);
|
|
|
|
let parent = this.snackbar.querySelectorAll('.shape')[0];
|
|
|
|
if (parent) {
|
|
this.snackbar.insertBefore(shape, parent);
|
|
} else {
|
|
this.snackbar.appendChild(shape);
|
|
}
|
|
|
|
return shape;
|
|
}
|
|
|
|
/**
|
|
* Shows a notification.
|
|
*
|
|
* @param {Object} data The message data
|
|
*/
|
|
show(data) {
|
|
this.actionHandler = data.actionHandler;
|
|
|
|
let shape = this.createShape(data);
|
|
|
|
setTimeout(() =>
|
|
this.hide(shape), data.timeout || 3000);
|
|
|
|
setTimeout(() =>
|
|
shape.classList.add('shown'), 30);
|
|
}
|
|
|
|
/**
|
|
* Shows an error.
|
|
*
|
|
* @param {Object} data The message data
|
|
*/
|
|
showError(data) {
|
|
data.shapeType = 'error';
|
|
|
|
this.show(data);
|
|
}
|
|
|
|
/**
|
|
* Shows a success.
|
|
*
|
|
* @param {Object} data The message data
|
|
*/
|
|
showSuccess(data) {
|
|
data.shapeType = 'success';
|
|
|
|
this.show(data);
|
|
}
|
|
|
|
/**
|
|
* Hides the snackbar.
|
|
* @param {Object} shape Snackbar element
|
|
*/
|
|
hide(shape) {
|
|
setTimeout(() => shape.classList.remove('shown'), 30);
|
|
setTimeout(() => shape.remove(), 250);
|
|
}
|
|
|
|
onSnackbarClick(event) {
|
|
this.event = event;
|
|
}
|
|
|
|
onButtonClick(shape) {
|
|
if (this.actionHandler) {
|
|
this.actionHandler();
|
|
} else {
|
|
this.hide(shape);
|
|
}
|
|
}
|
|
}
|
|
Controller.$inject = ['$element', '$translate'];
|
|
|
|
ngModule.component('vnSnackbar', {
|
|
template: require('./snackbar.html'),
|
|
controller: Controller
|
|
});
|