b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
126 lines
3.7 KiB
JavaScript
Executable file
126 lines
3.7 KiB
JavaScript
Executable file
'use strict';
|
|
/* global focusManager */
|
|
|
|
(function(exports) {
|
|
|
|
/**
|
|
* SystemBanner displays a type of notification to the user in certain cases.
|
|
* It is a type of temporary notification that does not live in the
|
|
* notifications tray. Examples of the SystemBanner implementation include
|
|
* application installation, crash reporter, and low storage notices.
|
|
* @class SystemBanner
|
|
*/
|
|
function SystemBanner() {}
|
|
|
|
SystemBanner.prototype = {
|
|
|
|
/**
|
|
* A reference to the SystemBanner element
|
|
* @memberof SystemBanner.prototype
|
|
* @type {Element}
|
|
*/
|
|
_banner: null,
|
|
|
|
/**
|
|
* Set when the clicked callback called. Bypasses dismiss.
|
|
* @memberof SystemBanner.prototype
|
|
* @type {Boolean}
|
|
*/
|
|
_clicked: false,
|
|
|
|
/**
|
|
* Callback when the user clicks on the system banner button.
|
|
* @memberof SystemBanner.prototype
|
|
* @type {Function}
|
|
*/
|
|
_clickCallback: null,
|
|
|
|
/**
|
|
* Generates and returns the banner if it does not exist
|
|
* @memberof SystemBanner.prototype
|
|
* @type {Function}
|
|
*/
|
|
get banner() {
|
|
if (!this._banner) {
|
|
this._banner = document.createElement('section');
|
|
this._banner.className = 'banner generic-dialog';
|
|
this._banner.setAttribute('role', 'dialog');
|
|
this._banner.dataset.zIndexLevel = 'system-notification-banner';
|
|
this._banner.dataset.button = 'false';
|
|
this._banner.innerHTML = '<div><p></p><button></button></div>';
|
|
document.getElementById('screen').appendChild(this._banner);
|
|
}
|
|
|
|
return this._banner;
|
|
},
|
|
|
|
/**
|
|
* Shows a banner with a given message.
|
|
* Optionally shows a button with a given label/callback/dismiss.
|
|
* 'dismiss' is called when the banner is dismissed and button
|
|
* has not been clicked. It is optional.
|
|
* @memberof SystemBanner.prototype
|
|
* @param {String} message The message to display
|
|
* @param {Object} buttonParams { label: ..., callback: ..., dismiss: ... }
|
|
*/
|
|
show: function(message, buttonParams) {
|
|
var banner = this.banner;
|
|
navigator.mozL10n.setAttributes(
|
|
banner.firstElementChild.firstElementChild,
|
|
message.id,
|
|
message.args
|
|
);
|
|
var button = banner.querySelector('button');
|
|
|
|
if (buttonParams) {
|
|
focusManager.addUI(this);
|
|
banner.dataset.button = true;
|
|
button.setAttribute('data-l10n-id', buttonParams.labelL10nId);
|
|
this._clickCallback = function() {
|
|
this._clicked = true;
|
|
buttonParams.callback();
|
|
}.bind(this);
|
|
button.addEventListener('click', this._clickCallback);
|
|
}
|
|
|
|
banner.addEventListener('animationend', function animationend() {
|
|
banner.removeEventListener('animationend', animationend);
|
|
banner.classList.remove('visible');
|
|
|
|
if (buttonParams) {
|
|
focusManager.removeUI(this);
|
|
if (buttonParams.dismiss && !this._clicked) {
|
|
buttonParams.dismiss();
|
|
}
|
|
banner.dataset.button = false;
|
|
button.removeEventListener('click', this._clickCallback);
|
|
button.classList.remove('visible');
|
|
this.banner.parentNode.removeChild(this.banner);
|
|
}
|
|
focusManager.focus();
|
|
}.bind(this));
|
|
focusManager.focus();
|
|
banner.classList.add('visible');
|
|
},
|
|
|
|
isFocusable: function() {
|
|
return this._banner && this._banner.classList.contains('visible');
|
|
},
|
|
|
|
getElement: function() {
|
|
if (this.isFocusable()) {
|
|
return this._banner;
|
|
}
|
|
},
|
|
|
|
focus: function() {
|
|
if (this.isFocusable()) {
|
|
document.activeElement.blur();
|
|
this._banner.querySelector('button').focus();
|
|
}
|
|
}
|
|
};
|
|
|
|
exports.SystemBanner = SystemBanner;
|
|
|
|
}(window));
|