-
-
Save andrewk/992abf729227609ba695 to your computer and use it in GitHub Desktop.
Removable Component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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