b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
66 lines
2.7 KiB
JavaScript
Executable file
66 lines
2.7 KiB
JavaScript
Executable file
'use strict';
|
|
define(function(require) {
|
|
var Emitter = require('evt').Emitter;
|
|
|
|
/**
|
|
* Returns an array of objects that can be fed to the 'element' module to
|
|
* create a prototype for a custom element. It takes an optional
|
|
* `templateMixins` object that is the first object to be mixed in by the
|
|
* "mixins insted of prototypes" construction that 'element' favors. This
|
|
* templateMixins should come first, as it sets up the inner DOM structure
|
|
* for an instance of the element, and needs to have been inserted before the
|
|
* other mixins in this base are applied. The templateMixins are normally
|
|
* passed to this function via a `require('template!...')` dependency. The
|
|
* 'template' loader plugin knows how to set up an object for use in this type
|
|
* of 'element' target. See the README.md in this file's directory for more
|
|
* information on the custom element approach.
|
|
* @param {Object|Array} [templateMixins] Handles the templating duties
|
|
* for the inner HTML structure of the element.
|
|
* @returns {Array} Array of objects for use in a mixin construction.
|
|
*/
|
|
return function base(templateMixins) {
|
|
// Set up the base mixin
|
|
return [
|
|
// Mix in the template first, so that its createdCallback is
|
|
// called before the other createdCallbacks, so that the
|
|
// template is there for things like l10n mixing and node
|
|
// binding inside the template.
|
|
templateMixins ? templateMixins : {},
|
|
|
|
// Wire up support for auto-node binding
|
|
require('./mixins/data-prop'),
|
|
require('./mixins/data-event'),
|
|
|
|
// Every custom element is an evt Emitter!
|
|
Emitter.prototype,
|
|
|
|
{
|
|
createdCallback: function() {
|
|
// Mark the email custom elements that are generated in this fashion
|
|
// with a specific class. This allows much more efficient query
|
|
// selector calls to grab them all vs using something like '*' and
|
|
// then filtering out the custom elements based on nodeName.
|
|
this.classList.add('email-ce');
|
|
|
|
Emitter.call(this);
|
|
},
|
|
|
|
/**
|
|
* Shortcut for triggering a DOM custom event with a detail object. Use
|
|
* this instead of evt when dealing with a custom element that wants to
|
|
* communicate with ancestor elements about an event (so therefore could
|
|
* bubble) that was based on a plain DOM event that happened inside the
|
|
* custom element.
|
|
*
|
|
* @param {String} eventName The event name
|
|
* @param {Object} detail The state info passed in event.detail
|
|
*/
|
|
emitDomEvent: function(eventName, detail) {
|
|
this.dispatchEvent(new CustomEvent(eventName, {
|
|
detail: detail
|
|
}));
|
|
}
|
|
}
|
|
];
|
|
};
|
|
});
|