b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
122 lines
3.3 KiB
JavaScript
Executable file
122 lines
3.3 KiB
JavaScript
Executable file
/**
|
|
* BaseModalDialog creates a dialog and handles esc key to close it. It also
|
|
* includes open/close animation.
|
|
* The template is shown below:
|
|
* <smart-dialog class="modal-dialog">
|
|
* <div class="outer-container">
|
|
* <div class="container"></div>
|
|
* </div>
|
|
* </smart-dialog>
|
|
*/
|
|
|
|
(function(exports) {
|
|
'use strict';
|
|
|
|
function BaseModalDialog(container) {
|
|
// Determine whether this dialog is opened or not
|
|
this.isOpened = false;
|
|
|
|
// smart-dialog helps us to handle ESC key to close the dialog.
|
|
this.element = document.createElement('smart-dialog');
|
|
this.element.classList.add('modal-dialog');
|
|
this.element.setAttribute('role', 'dialog');
|
|
// make dialog focusable in order to catch focus from mouse click or touch
|
|
// event.
|
|
this.element.setAttribute('tabIndex', '-1');
|
|
|
|
// in order to make vertical align, we need additional container
|
|
this.outerContainer = document.createElement('div');
|
|
this.outerContainer.classList.add('outer-container');
|
|
|
|
this.innerContainer = document.createElement('div');
|
|
this.innerContainer.classList.add('container');
|
|
|
|
this.outerContainer.appendChild(this.innerContainer);
|
|
this.element.appendChild(this.outerContainer);
|
|
|
|
this.container = container || document.body;
|
|
this.container.appendChild(this.element);
|
|
|
|
this._init();
|
|
}
|
|
|
|
var proto = Object.create(SmartDialog.prototype);
|
|
|
|
proto._render = function() {
|
|
// implement rendering here.
|
|
};
|
|
|
|
proto._init = function(container, options) {
|
|
// Put your custom init code here.
|
|
};
|
|
|
|
proto._setL10n = function(element, l10n) {
|
|
if ((typeof l10n) === 'string') {
|
|
element.setAttribute('data-l10n-id', l10n);
|
|
} else if (navigator.mozL10n) {
|
|
navigator.mozL10n.setAttributes(element, l10n.id, l10n.args);
|
|
}
|
|
};
|
|
|
|
proto._open = function(options) {
|
|
// If you want to override this, please call this at function at the end of
|
|
// yours.
|
|
|
|
// onCancel is triggered when ESC key is pressed.
|
|
this.onCancel = options.onCancel || function() {};
|
|
|
|
this.element.classList.add('visible');
|
|
this.element.open();
|
|
this.element.focus();
|
|
};
|
|
|
|
proto.open = function(options) {
|
|
if (this.isOpened) {
|
|
return;
|
|
}
|
|
this.isOpened = true;
|
|
// We should wait two frames for reflow.
|
|
window.requestAnimationFrame(function() {
|
|
window.requestAnimationFrame(this._open.bind(this, options));
|
|
}.bind(this));
|
|
};
|
|
|
|
proto.close = function() {
|
|
this.element.close();
|
|
this.element.focus();
|
|
};
|
|
|
|
proto.remove = function() {
|
|
this.container.removeChild(this.element);
|
|
};
|
|
|
|
proto._focusContent = function() {};
|
|
|
|
proto._blurContent = function() {};
|
|
|
|
proto.focus = function() {
|
|
if (this.element.classList.contains('opening') ||
|
|
this.element.classList.contains('closing')) {
|
|
this.element.focus();
|
|
} else {
|
|
this._focusContent();
|
|
}
|
|
};
|
|
|
|
proto.blur = function() {
|
|
this._blurContent();
|
|
};
|
|
|
|
proto.fireEvent = function smd_fireEvent(event, detail) {
|
|
var evtObject = new CustomEvent(event, {
|
|
bubbles: true,
|
|
detail: detail || this
|
|
});
|
|
this.container.dispatchEvent(evtObject);
|
|
};
|
|
|
|
|
|
BaseModalDialog.prototype = proto;
|
|
exports.BaseModalDialog = BaseModalDialog;
|
|
|
|
})(window);
|