mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
Add snackbar js to gulp sources. Update script with comments for closure compiler.
This commit is contained in:
parent
54d325e371
commit
574d2b8aae
@ -75,6 +75,7 @@ var SOURCES = [
|
||||
'src/progress/progress.js',
|
||||
'src/radio/radio.js',
|
||||
'src/slider/slider.js',
|
||||
'src/snackbar/snackbar.js',
|
||||
'src/spinner/spinner.js',
|
||||
'src/switch/switch.js',
|
||||
'src/tabs/tabs.js',
|
||||
|
@ -16,32 +16,53 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Class constructor for Snackbar MDL component.
|
||||
* Implements MDL component design pattern defined at:
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
*
|
||||
* @constructor
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
var MaterialSnackbar = function MaterialSnackbar(element) {
|
||||
this.element_ = element;
|
||||
this.active = false;
|
||||
this.init();
|
||||
};
|
||||
window.MaterialSnackbar = MaterialSnackbar;
|
||||
window['MaterialSnackbar'] = MaterialSnackbar;
|
||||
|
||||
/**
|
||||
* Store strings for class names defined by this component that are used in
|
||||
* JavaScript. This allows us to simply change it in one place should we
|
||||
* decide to modify at a later date.
|
||||
*
|
||||
* @enum {string}
|
||||
* @private
|
||||
*/
|
||||
MaterialSnackbar.prototype.cssClasses_ = {
|
||||
snackbar: 'mdl-snackbar',
|
||||
message: 'mdl-snackbar__text',
|
||||
action: 'mdl-snackbar__action',
|
||||
activeSnackbar: 'is-active'
|
||||
SNACKBAR: 'mdl-snackbar',
|
||||
MESSAGE: 'mdl-snackbar__text',
|
||||
ACTION: 'mdl-snackbar__action',
|
||||
ACTIVE: 'is-active'
|
||||
};
|
||||
|
||||
/**
|
||||
* Create the internal snackbar markup.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialSnackbar.prototype.createSnackbar_ = function() {
|
||||
this.snackbarElement_ = document.createElement('div');
|
||||
this.textElement_ = document.createElement('div');
|
||||
this.snackbarElement_.classList.add(this.cssClasses_.snackbar);
|
||||
this.textElement_.classList.add(this.cssClasses_.message);
|
||||
this.snackbarElement_.classList.add(this.cssClasses_.SNACKBAR);
|
||||
this.textElement_.classList.add(this.cssClasses_.MESSAGE);
|
||||
this.snackbarElement_.appendChild(this.textElement_);
|
||||
this.snackbarElement_.setAttribute('aria-hidden', true);
|
||||
|
||||
if (this.actionHandler_) {
|
||||
this.actionElement_ = document.createElement('button');
|
||||
this.actionElement_.type = 'button';
|
||||
this.actionElement_.classList.add(this.cssClasses_.action);
|
||||
this.actionElement_.classList.add(this.cssClasses_.ACTION);
|
||||
this.actionElement_.textContent = this.actionText_;
|
||||
this.snackbarElement_.appendChild(this.actionElement_);
|
||||
this.actionElement_.addEventListener('click', this.actionHandler_);
|
||||
@ -49,12 +70,17 @@
|
||||
|
||||
this.element_.appendChild(this.snackbarElement_);
|
||||
this.textElement_.textContent = this.message_;
|
||||
this.snackbarElement_.classList.add(this.cssClasses_.activeSnackbar);
|
||||
this.snackbarElement_.classList.add(this.cssClasses_.ACTIVE);
|
||||
this.snackbarElement_.setAttribute('aria-hidden', false);
|
||||
setTimeout(this.cleanup_.bind(this), this.timeout_);
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove the internal snackbar markup.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialSnackbar.prototype.removeSnackbar_ = function() {
|
||||
if (this.actionElement_ && this.actionElement_.parentNode) {
|
||||
this.actionElement_.parentNode.removeChild(this.actionElement_);
|
||||
@ -63,45 +89,63 @@
|
||||
this.snackbarElement_.parentNode.removeChild(this.snackbarElement_);
|
||||
};
|
||||
|
||||
/**
|
||||
* Create the internal snackbar markup.
|
||||
*
|
||||
* @param {Object} data The data for the notification.
|
||||
* @public
|
||||
*/
|
||||
MaterialSnackbar.prototype.showSnackbar = function(data) {
|
||||
if (data === undefined) {
|
||||
throw new Error(
|
||||
'Please provide a data object with at least a message to display.');
|
||||
}
|
||||
if (data.message === undefined) {
|
||||
if (data['message'] === undefined) {
|
||||
throw new Error('Please provide a message to be displayed.');
|
||||
}
|
||||
if (data.actionHandler && !data.actionText) {
|
||||
if (data['actionHandler'] && !data['actionText']) {
|
||||
throw new Error('Please provide action text with the handler.');
|
||||
}
|
||||
if (this.active) {
|
||||
this.queuedNotifications_.push(data);
|
||||
} else {
|
||||
this.active = true;
|
||||
this.message_ = data.message;
|
||||
if (data.timeout) {
|
||||
this.timeout_ = data.timeout;
|
||||
this.message_ = data['message'];
|
||||
if (data['timeout']) {
|
||||
this.timeout_ = data['timeout'];
|
||||
} else {
|
||||
this.timeout_ = 8000;
|
||||
}
|
||||
if (data.actionHandler) {
|
||||
this.actionHandler_ = data.actionHandler;
|
||||
if (data['actionHandler']) {
|
||||
this.actionHandler_ = data['actionHandler'];
|
||||
}
|
||||
if (data.actionText) {
|
||||
this.actionText_ = data.actionText;
|
||||
if (data['actionText']) {
|
||||
this.actionText_ = data['actionText'];
|
||||
}
|
||||
this.createSnackbar_();
|
||||
}
|
||||
};
|
||||
MaterialSnackbar.prototype['showSnackbar'] = MaterialSnackbar.prototype.showSnackbar;
|
||||
|
||||
/**
|
||||
* Check if the queue has items within it.
|
||||
* If it does, display the next entry.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialSnackbar.prototype.checkQueue_ = function() {
|
||||
if (this.queuedNotifications_.length > 0) {
|
||||
this.showSnackbar(this.queuedNotifications_.shift());
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Cleanup the snackbar event listeners and accessiblity attributes.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialSnackbar.prototype.cleanup_ = function() {
|
||||
this.snackbarElement_.classList.remove(this.cssClasses_.activeSnackbar);
|
||||
this.snackbarElement_.classList.remove(this.cssClasses_.ACTIVE);
|
||||
this.snackbarElement_.setAttribute('aria-hidden', true);
|
||||
if (this.actionElement_) {
|
||||
this.actionElement_.removeEventListener('click', this.actionHandler_);
|
||||
@ -112,17 +156,30 @@
|
||||
this.checkQueue_();
|
||||
};
|
||||
|
||||
/**
|
||||
* Clean properties to avoid one entry affecting another.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialSnackbar.prototype.setDefaults_ = function() {
|
||||
this.actionHandler_ = undefined;
|
||||
this.message_ = undefined;
|
||||
this.actionText_ = undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize the object.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialSnackbar.prototype.init = function() {
|
||||
this.setDefaults_();
|
||||
this.queuedNotifications_ = [];
|
||||
};
|
||||
MaterialSnackbar.prototype['init'] = MaterialSnackbar.prototype.init;
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
constructor: MaterialSnackbar,
|
||||
classAsString: 'MaterialSnackbar',
|
||||
|
Loading…
Reference in New Issue
Block a user