b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
106 lines
3.9 KiB
JavaScript
Executable file
106 lines
3.9 KiB
JavaScript
Executable file
'use strict';
|
|
/* global BrowserFrame */
|
|
/* exported EntrySheet */
|
|
|
|
/* Define a entry sheet.
|
|
* It creates a element provided by container, title, content.
|
|
*/
|
|
|
|
var EntrySheet = (function invocation() {
|
|
function EntrySheet() { // This constructor function is a local variable.
|
|
render.apply(this, arguments); // All arguments are values to render
|
|
}
|
|
|
|
EntrySheet.className = 'entrySheet';
|
|
|
|
EntrySheet.prototype.setTitle = function(title) {
|
|
this.titleElement.textContent = title;
|
|
};
|
|
|
|
EntrySheet.prototype.open = function() {
|
|
// Transtion won't happen if adding class directly
|
|
setTimeout(function() {
|
|
this.element.classList.add('active');
|
|
}.bind(this));
|
|
};
|
|
|
|
EntrySheet.prototype.close = function() {
|
|
this.element.addEventListener('transitionend', function onTransitionend() {
|
|
this.element.removeEventListener('transitionend', onTransitionend);
|
|
this.element.classList.remove('disappearing');
|
|
this.element.classList.remove('active');
|
|
|
|
// Here we remove entire element once the close button is pressed.
|
|
this.container.removeChild(this.element);
|
|
}.bind(this));
|
|
this.element.classList.add('disappearing');
|
|
};
|
|
|
|
// These are helper functions and variables used by the methods above
|
|
// They're not part of the public API of the module, but they're hidden
|
|
// within this function scope so we don't have to define them as a
|
|
// property of Browser or prefix them with underscores.
|
|
// Now define instance methods on Set.prototype.
|
|
function view() {
|
|
return `<div class="${EntrySheet.className}">
|
|
<section role="region" class="skin-organic header">
|
|
<gaia-header action="close">
|
|
<h1 class="title">
|
|
<bdi class="${EntrySheet.className}-title"></bdi>
|
|
</h1>
|
|
</gaia-header>
|
|
<div class="throbber"></div>
|
|
</section>
|
|
<div class="content">
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function render(container, title, content) {
|
|
/* jshint validthis: true */
|
|
this.container = container;
|
|
this.title = title;
|
|
this.container.insertAdjacentHTML('beforeend', view.apply(this));
|
|
this.header =
|
|
this.container.querySelector('.' + EntrySheet.className + ' gaia-header');
|
|
this.titleElement =
|
|
this.container.querySelector('.' + EntrySheet.className + '-title');
|
|
this.throbberElement =
|
|
this.container.querySelector('.' + EntrySheet.className + ' .throbber');
|
|
this.content =
|
|
this.container.querySelector('.' + EntrySheet.className + ' .content');
|
|
this.element = this.container.querySelector('.' + EntrySheet.className);
|
|
this.element.dataset.zIndexLevel = 'dialog-overlay';
|
|
|
|
var self = this;
|
|
// XXX: We may make entry sheet to generate browser frame by itself,
|
|
// hence we don't need to check the type here.
|
|
if (typeof(BrowserFrame) != 'undefined' &&
|
|
content instanceof BrowserFrame) {
|
|
content.element.addEventListener('mozbrowserloadstart',
|
|
function onLoadStart() {
|
|
self.throbberElement.dataset.loading = true;
|
|
});
|
|
content.element.addEventListener('mozbrowserloadend',
|
|
function onLoadEnd() {
|
|
delete self.throbberElement.dataset.loading;
|
|
});
|
|
this.content.appendChild(content.element);
|
|
} else if (content && content.nodeType == 1) {
|
|
// In case the content isn't a browserElement object but a DOM element.
|
|
this.content.appendChild(content);
|
|
}
|
|
|
|
this.setTitle(this.title);
|
|
this.header.addEventListener('action', function() {
|
|
self.close();
|
|
});
|
|
}
|
|
|
|
// The public API for this module is the EntrySheet() constructor function.
|
|
// We need to export that function from this private namespace so that
|
|
// it can be used on the outside. In this case, we export the constructor
|
|
// by returning it. It becomes the value of the assignment expression
|
|
// on the first line above.
|
|
return EntrySheet;
|
|
}()); // Invoke the function immediately after defining it.
|