Skip to content

Instantly share code, notes, and snippets.

@mdehoog

mdehoog/application.controller.js

Last active October 31, 2016 13:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mdehoog/1c59a1dcdb18eec69a8e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mdehoog/1c59a1dcdb18eec69a8e to your computer and use it in GitHub Desktop.
Download ZIP
ember-wormhole component action not bubbled
Raw
application.controller.js
import Ember from 'ember';
export default Ember.Controller.extend({
});
Raw
ember-wormhole.component.js
import Ember from 'ember';
var computed = Ember.computed;
var observer = Ember.observer;
var run = Ember.run;
export default Ember.Component.extend({
to: computed.alias('destinationElementId'),
destinationElementId: null,
destinationElement: computed('destinationElementId', 'renderInPlace', function() {
return this.get('renderInPlace') ? this.element : document.getElementById(this.get('destinationElementId'));
}),
renderInPlace: false,
didInsertElement: function() {
this._super(...arguments);
this._firstNode = this.element.firstChild;
this._lastNode = this.element.lastChild;
this.appendToDestination();
},
willDestroyElement: function() {
this._super(...arguments);
var firstNode = this._firstNode;
var lastNode = this._lastNode;
run.schedule('render', () => {
this.removeRange(firstNode, lastNode);
});
},
destinationDidChange: observer('destinationElement', function() {
var destinationElement = this.get('destinationElement');
if (destinationElement !== this._firstNode.parentNode) {
run.schedule('render', this, 'appendToDestination');
}
}),
appendToDestination: function() {
var destinationElement = this.get('destinationElement');
var currentActiveElement = document.activeElement;
if (!destinationElement) {
var destinationElementId = this.get('destinationElementId');
if (destinationElementId) {
throw new Error(`ember-wormhole failed to render into '#${this.get('destinationElementId')}' because the element is not in the DOM`);
}
throw new Error('ember-wormhole failed to render content because the destinationElementId was set to an undefined or falsy value.');
}
this.appendRange(destinationElement, this._firstNode, this._lastNode);
if (document.activeElement !== currentActiveElement) {
currentActiveElement.focus();
}
},
appendRange: function(destinationElement, firstNode, lastNode) {
while(firstNode) {
destinationElement.insertBefore(firstNode, null);
firstNode = firstNode !== lastNode ? lastNode.parentNode.firstChild : null;
}
},
removeRange: function(firstNode, lastNode) {
var node = lastNode;
do {
var next = node.previousSibling;
if (node.parentNode) {
node.parentNode.removeChild(node);
if (node === firstNode) {
break;
}
}
node = next;
} while (node);
}
});
Raw
my-button.component.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
action: function() {
this.sendAction();
}
}
});
Raw
my-button.template.hbs
<button {{action 'action'}}>
{{yield}}
</button>
Raw
my-component.component.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
openWormhole: function() {
this.set('isWormholeOpen', true);
},
closeWormhole: function() {
this.set('isWormholeOpen', false);
}
}
});
Raw
my-component.template.hbs
<button {{action 'openWormhole'}}>
Open Wormhole
</button>
<br/><br/>
{{#if isWormholeOpen}}
{{#ember-wormhole renderInPlace=true}}
Wormhole content<br/>
<button {{action 'closeWormhole'}}>
Close Wormhole button (works)
</button><br/>
{{#my-button action='closeWormhole'}}
Close Wormhole component (broken)
{{/my-button}}
{{/ember-wormhole}}
{{/if}}
Raw
twiddle.json
{
"version": "0.4.10",
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js",
"ember": "http://builds.emberjs.com/canary/ember.debug.js",
"ember-template-compiler": "http://builds.emberjs.com/canary/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment