Merge pull request #14 from pzuraq/v2.0.0-beta.2

Revision 2

addon/components/liquid-append.js

@@ -1,22 +1,27 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  willInsertElement() {
-    const wormhole = this.get('wormhole');
+  didUpdateAttrs() {
+    if (this.get('replaceNodes')) {
+      const nodes = this.get('nodes');
 
-    if (wormhole && wormhole.willAppendNodes) {
-      wormhole.willAppendNodes(this.element);
+      this.$().children().remove();
+      this.$().append(nodes);
     }
   },
 
   didInsertElement() {
-    const wormhole = this.get('wormhole');
-    const nodes = this.get('wormhole.nodes');
+    const notify = this.get('notify');
+    const nodes = this.get('nodes');
+
+    if (notify && notify.willAppendNodes) {
+      notify.willAppendNodes(this.element);
+    }
 
     this.$().append(nodes);
 
-    if (wormhole && wormhole.didAppendNodes) {
-      wormhole.didAppendNodes(this.element);
+    if (notify && notify.didAppendNodes) {
+      notify.didAppendNodes(this.element);
     }
   }
 });

addon/components/liquid-target.js → addon/components/liquid-destination.js

@@ -1,21 +1,24 @@
 import Ember from 'ember';
 import HashMap from 'perf-primitives/hash-map';
-import layout from '../templates/components/liquid-target';
+import layout from '../templates/components/liquid-destination';
 
-const { inject, A } = Ember;
+const { inject, computed, A } = Ember;
+const { gt } = computed;
 const { service } = inject;
 
 export default Ember.Component.extend({
   layout,
-  classNames: ['liquid-target'],
-  classNameBindings: ['contextClass'],
+  classNames: ['liquid-destination'],
+  classNameBindings: ['hasWormholes'],
 
   name: 'default',
-  liquidTargetService: service('liquidTarget'),
+  liquidWormholeService: service('liquidWormhole'),
   matchContext: {
     helperName: 'liquid-wormhole'
   },
 
+  hasWormholes: gt('stacks.length', 0),
+
   init() {
     this._super(...arguments);
 
@@ -26,7 +29,7 @@ export default Ember.Component.extend({
 
     const name = this.get('name');
 
-    this.get('liquidTargetService').registerTarget(name, this);
+    this.get('liquidWormholeService').registerDestination(name, this);
   },
 
   appendWormhole(wormhole) {
@@ -52,16 +55,29 @@ export default Ember.Component.extend({
   removeWormhole(wormhole) {
     const stackName = wormhole.get('stack');
     const stack = this.stackMap.get(stackName);
+    const item = stack.find(item => item && item.wormhole === wormhole);
+
+    const newNodes = item.get('nodes').clone();
+    item.set('nodes', newNodes);
+    item.set('_replaceNodes', true);
 
-    Ember.run.next(() => stack.removeObject(wormhole));
+    Ember.run.next(() => stack.removeObject(item));
   },
 
   flushWormholeQueue() {
     this.wormholeQueue.forEach((wormhole) => {
       const stackName = wormhole.get('stack');
       const stack = this.stackMap.get(stackName) || this.createStack(wormhole);
 
-      stack.pushObject(wormhole);
+      const nodes = wormhole.get('nodes');
+      const value = wormhole.get('value');
+
+      const item = Ember.Object.create({ nodes, wormhole, value });
+
+      // Reset visibility in case we made them visible, see below
+      nodes.css({ visibility: 'hidden' });
+
+      stack.pushObject(item);
     });
 
     this.wormholeQueue.clear();
@@ -89,7 +105,10 @@ export default Ember.Component.extend({
     },
 
     afterTransition([{ value, view }]) {
-      view.element.style.transform = "";
+      // If wormholes were made w/o animations, they need to be made visible manually.
+      this.$(view.element).find('.liquid-wormhole-element').css({ visibility: 'visible' });
+
+      // Clean empty stacks
       if (value === null) {
         const stacks = this.get('stacks');
         const stackName = view.get('parentView.stackName');

addon/components/liquid-wormhole.js

@@ -9,36 +9,48 @@ const { reads } = computed;
 export default Ember.Component.extend({
   layout,
 
-  liquidTarget: reads('to'),
-  liquidTargetService: service('liquid-target'),
+  to: reads('destination'),
+  liquidWormholeService: service('liquid-wormhole'),
 
   stack: computed(() => generateGuid()),
 
+  // Truthy value by default
+  value: true,
+
   init() {
     const wormholeClass = this.get('class');
-    const wormholeId = this.get('id');
+    const wormholeId = this.get('stack') || this.get('id');
 
     this.set('wormholeClass', wormholeClass);
     this.set('wormholeId', wormholeId);
 
+    if (Ember.typeOf(this.get('send')) !== 'function') {
+      this.set('hasSend', true);
+    }
+
+    this._super(...arguments);
+  },
+
+  didUpdateAttrs() {
     this._super(...arguments);
+    this.get('liquidWormholeService').removeWormhole(this, this.get('to'));
+    this.get('liquidWormholeService').appendWormhole(this, this.get('to'));
   },
 
-  willInsertElement() {
+  didInsertElement() {
     const nodes = this.$().children();
-    this.set('nodes', nodes.clone());
-    nodes.remove();
+    this.set('nodes', nodes);
 
     this.element.className = 'liquid-wormhole-container';
     this.element.id = '';
 
-    this.get('liquidTargetService').appendWormhole(this, this.get('liquidTarget'));
+    this.get('liquidWormholeService').appendWormhole(this, this.get('to'));
 
     this._super.apply(this, arguments);
   },
 
   willDestroyElement() {
-    this.get('liquidTargetService').removeWormhole(this, this.get('liquidTarget'));
+    this.get('liquidWormholeService').removeWormhole(this, this.get('to'));
 
     this._super.apply(this, arguments);
   }

addon/services/liquid-wormhole.js

@@ -0,0 +1,73 @@
+import Ember from 'ember';
+import HashMap from 'perf-primitives/hash-map';
+import getOwnerPolyfill from 'ember-getowner-polyfill';
+
+const { getOwner } = Ember;
+
+export default Ember.Service.extend({
+  init() {
+    this._super(...arguments);
+
+    this.destination = new HashMap();
+  },
+
+  appendWormhole(wormhole, destinationName = 'default') {
+    let destination = this.destination.get(destinationName);
+
+    if (destination === undefined) {
+      if (destinationName === 'default') {
+        destination = this.addDefaultDestination();
+      } else {
+        throw new Error('Liquid Wormhole destination does not exist');
+      }
+    }
+
+    destination.appendWormhole(wormhole);
+  },
+
+  removeWormhole(wormhole, destinationName = 'default') {
+    const destination = this.destination.get(destinationName);
+
+    if (destination === undefined) {
+      throw new Error('Liquid Wormhole destination does not exist');
+    }
+
+    destination.removeWormhole(wormhole);
+  },
+
+  registerDestination(destinationName, destination) {
+    if (this.destination.get(destinationName)) {
+      throw new Error(`Liquid Wormhole destination '${destinationName}' already created`);
+    }
+    this.destination.set(destinationName, destination);
+  },
+
+  willDestroy() {
+    this.removeDefaultDestination();
+  },
+
+  addDefaultDestination() {
+    const instance = getOwner ? getOwner(this) : getOwnerPolyfill(this);
+    const destination = instance.lookup('component:liquid-destination');
+    destination.set('classNames', ['liquid-destination', 'default-liquid-destination']);
+
+    if (instance.rootElement) {
+      destination.appendTo(instance.rootElement);
+    } else if (Ember.$('.ember-application').length > 0) {
+      destination.appendTo(Ember.$('.ember-application')[0]);
+    } else {
+      destination.appendTo(document);      
+    }
+
+    this.defaultDestination = destination;
+
+    return destination;
+  },
+
+  removeDefaultDestination() {
+    if (this.defaultDestination) {
+      this.defaultDestination.destroy();
+    }
+  }
+
+});

addon/styles/addon.css

@@ -1,18 +1,30 @@
-.default-liquid-target {
+.default-liquid-destination {
   position: absolute;
   top: 0;
   z-index: 9999;
 }
 
-.default-liquid-target .liquid-target-stack {
-  width: 100vw;
+.default-liquid-destination .liquid-destination-stack {
   position: absolute;
 }
 
-.default-liquid-target .liquid-child {
+.default-liquid-destination .liquid-child {
+  position: absolute;
+  top: 0;
+  left: 0;
+
   overflow: visible;
-  width: 100vw;
+  visibility: hidden;
+}
+
+.default-liquid-destination .liquid-child > div {
   position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100vw;
+  height: 100vh;
+  visibility: hidden;
 }
 
 .liquid-wormhole-container {

addon/templates/components/liquid-target.hbs → addon/templates/components/liquid-destination.hbs

@@ -1,5 +1,5 @@
 {{#each stacks as |stack|}}
-  <div id={{stack.name}} class="liquid-target-stack">
+  <div class="liquid-destination-stack">
     {{#liquid-versions
       value=stack.lastObject
       notify=this
@@ -8,8 +8,13 @@
       matchContext=matchContext
       stackName=stack.name
 
-      as |wormhole|}}
-      {{liquid-append wormhole=wormhole}}
+      as |item|}}
+      {{liquid-append
+        nodes=item.nodes
+        replaceNodes=item._replaceNodes
+        notify=item.wormhole
+        click=item.wormhole.click
+      }}
     {{/liquid-versions}}
   </div>
 {{/each}}

addon/templates/components/liquid-wormhole.hbs

@@ -1,3 +1,13 @@
-<div id={{wormholeId}} class="{{wormholeClass}} liquid-wormhole-element">
-  {{yield}}
-</div>
+{{#if hasSend}}
+  {{#if hasBlock}}
+    {{#component send id=wormholeId class=(concat wormholeClass " liquid-wormhole-element")}}
+      {{yield}}
+    {{/component}}
+  {{else}}
+    {{component send id=wormholeId class=(concat wormholeClass " liquid-wormhole-element")}}
+  {{/if}}
+{{else}}
+  <div id={{wormholeId}} class="{{wormholeClass}} liquid-wormhole-element">
+    {{yield}}
+  </div>
+{{/if}}

app/components/liquid-destination.js

@@ -0,0 +1 @@
+export { default } from 'liquid-wormhole/components/liquid-destination';