Skip to content

Instantly share code, notes, and snippets.

@andrewk

andrewk/removable.js Secret

Last active Aug 29, 2015
Embed
What would you like to do?
Removable Component
/**
* A UI element that is removed from the DOM upon bubbling of an
* event occuring inside its node
*
* original use case:
* - Remove a list item when a "Delete" form inside it is submitted
* - Broadcast that the number of list items has been modified by -1
*/
define(function(require) {
'use strict';
var defineComponent = require('flight/lib/component');
function Removable() {
this.defaultAttrs({
'removeOn': 'uiDeleteItem',
'broadcastEvents': [
{'event': 'uiRemoved', 'data': {}}
],
});
this.after('initialize', function() {
this.on(this.attr.removeOn, this.remove.bind(this));
});
this.remove = function(event) {
var self = this;
this.attr.broadcastEvents.forEach(function(eventObj) {
self.trigger(eventObj.event, eventObj.data);
});
// Animate row removal, remove DOM node, teardown component
$.when(this.$node
.animate({'opacity': 0}, 'fast')
.slideUp('fast')
).done(function() {
self.$node.remove();
});
};
}
return defineComponent(Removable);
});
describeComponent('component_ui/removable', function () {
beforeEach(function () {
setupComponent(
'<div>The Universe <a href="">Destroy</a></div>',
{'broadcastEvents' : [ { 'event': 'uiRemoved', 'data': { 'foo' : 'bar' }}]}
);
});
describe('Removable', function() {
it('broadcasts correct event and data when removeOn event is triggered', function() {
var spy = spyOnEvent(document, 'uiRemoved');
this.component.$node.trigger(this.component.attr.removeOn);
expect(spy.mostRecentCall.data).toEqual({'foo':'bar'});
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.