Liquid Fire/Ember Wormhole integration
pzuraq opened this issue · 5 comments
Currently there is no way to smoothly integrate ember-tether with liquid-fire. One major issue is that there is no way to control the element that tether.js attaches tethered elements to, meaning they are always bumped directly up to the body. This is problematic both for centralizing animations and for testing usage of ember-tether (in tests, the element is bumped all the way up to the top body element outside of the domain of the test, so there is no way to find it inside the isolated test container).
This PR gives tether.js an option to prevent it from moving it the element at all. We can combine this feature with ember-wormhole to control the outlet that the tethered element is attached to, in a way that's similar to ember-modal-dialogue.
On the liquid-fire end we may need to create some kind of outlet that will animate newly attached elements. Still looking into this currently, but I have tested every other step and will submit a PR to ember-tether once tether is updated.
One question I have is regarding the current import of tether.js:
importBowerDependencies: function(app) {
app.import(app.bowerDirectory + '/tether/js/utils.js');
app.import(app.bowerDirectory + '/tether/js/tether.js');
app.import(app.bowerDirectory + '/tether/js/abutment.js');
app.import(app.bowerDirectory + '/tether/js/constraint.js');
}
The full tether.js lib is not being imported here, is there any reason why? This will be important for updating tether.
Nice work. This would help a lot with testing. Is the offset/bounds math and positioning logic in tether.js still playing nicely when the element is not moved to the body?
Regarding the current import of tether.js, tether.js changed its dist packaging with its 1.0 releases (ember-tether is pinned to ~0.7.2). Previously, plugins like abutment.js and constraint.js were packaged separately, so we took a conservative approach and imported only what we were exposing via ember-tether component properties. Going forward, the issue is moot and we'll want to just pull in the whole library.
@chrislopresto The positioning logic plays well if the ember-wormhole outlet is positioned near the body. Like ember-modal-dialog, the pattern I'm currently using is to add an element directly to the ember root element and put all of the tethers there. Since it's so high in the DOM tree, it plays nice.
If users decide to override this behavior, or if they are overriding the root element to place it somewhere else in the DOM, this may not work. I haven't tested it yet in those cases.
I'll include the whole lib then, just waiting on the tether team to pull!
Further conversation on how to resolve this inside of tether is continuing here shipshapecode/tether#96.
I'm going to close this issue because https://github.com/pzuraq/liquid-tether addon has a full implementation of the concepts discussed here.
I'm open to the idea of making ember-tether and ember-modal-dialog more animatable. @pzuraq or anyone else interested, feel free to reach out to discuss.
Sounds good ember-tether. liquid-tether adds another layer of overhead to get the animations working smoothly. I think ember-tether is perfect as-is for users who just need the abilities of Tether.js without anything extra, and liquid-tether fills in that extra use-case.