Version 0.1.0 refactor

Author: pzuraq

.travis.yml

@@ -18,6 +18,7 @@ env:
 matrix:
   fast_finish: true
   allow_failures:
+    - env: EMBER_TRY_SCENARIO=ember-beta
     - env: EMBER_TRY_SCENARIO=ember-canary
 
 before_install:

README.md

@@ -1,25 +1,32 @@
-# Liquid-wormhole
+# Liquid Tether
 
-This README outlines the details of collaborating on this Ember addon.
+Liquid Tether combines the ideas behind
+[Ember Tether](https://github.com/yapplabs/ember-tether.git) with the power of
+[Liquid Fire](http://ef4.github.io/liquid-fire/) to provide an accessible,
+easy-to-use toolkit for both positioning & animating UI elements.
 
-## Installation
+Interactive documentation can be found
+[here](http://pzuraq.github.io/liquid-tether/).
 
-* `git clone` this repository
-* `npm install`
-* `bower install`
+## Ember Compatibility
 
-## Running
+Liquid Tether has only been tested on Ember 1.13. Testing for newer versions of
+Ember is on the roadmap. Older versions are not currently on the roadmap.
 
-* `ember server`
-* Visit your app at http://localhost:4200.
+## Installation
 
-## Running Tests
+```
+ember install liquid-tether
+```
 
-* `ember test`
-* `ember test --server`
+## Contributing
 
-## Building
+Fork the repository, make your changes on a branch, and submit a pull request.
 
-* `ember build`
+## Acknowledgments
 
-For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
+Credits to [@ef4](https://github.com/ef4),
+[@chrislopresto](https://github.com/chrislopresto),
+[@lukemelia](https://github.com/lukemelia), and
+[@zackbloom](https://github.com/zackbloom) for their help in making
+this library possible!

addon/.gitkeep

@@ -5,5 +5,9 @@ export default Ember.Component.extend({
     const nodes = this.get('nodes');
 
     this.$().append(nodes);
+  },
+
+  didAnimateTransition() {
+    this.sendAction('did-animate-transition');
   }
 });

addon/components/liquid-append.js

@@ -2,12 +2,17 @@ import Ember from 'ember';
 import layout from '../templates/components/liquid-target-container';
 
 const { inject } = Ember;
-
 const { service } = inject;
 
 export default Ember.Component.extend({
   layout: layout,
   classNames: ['liquid-target-container'],
 
-  liquidTargetService: service('liquid-target')
+  liquidTargetService: service('liquid-target'),
+
+  actions: {
+    removeTarget(target) {
+      this.get('liquidTargetService').removeTarget(target);
+    }
+  }
 });

addon/components/liquid-target-container.js

@@ -2,34 +2,27 @@ import Ember from 'ember';
 import layout from '../templates/components/liquid-target';
 
 const { computed, inject } = Ember;
-
 const { service } = inject;
 
 export default Ember.Component.extend({
   layout: layout,
   classNames: ['liquid-target'],
 
-  liquidTargetService: service('liquid-target'),
+  liquidTargetService: service('liquidTarget'),
 
-  init() {
-    const name = this.get('name');
+  currentItem: computed('items.lastObject', function() {
+    return this.get('items.lastObject') || {};
+  }),
 
-    if (!this.get(`liquidTargetService.targets.${name}`)) {
-      this.set(`liquidTargetService.targets.${name}`, Ember.A());
+  cleanup() {
+    if (this.get('items.length') === 0) {
+      this.sendAction('on-cleanup', this.get('target'));
     }
-
-    this._super(...arguments);
   },
 
-  nodes: computed('liquidTargetService', 'name', function() {
-    const name = this.get('name');
-    return this.get(`liquidTargetService.targets.${name}`);
-  }),
-
-  currentNodes: computed('nodes.lastObject', function() {
-    const index = this.get('nodes.length');
-    const { nodes } = index ? this.get('nodes.lastObject') : { null };
-
-    return { nodes, index };
-  })
+  actions: {
+    didAnimateTransition() {
+      this.cleanup();
+    }
+  }
 });

addon/components/liquid-target.js

@@ -11,13 +11,13 @@ export default LiquidWormhole.extend({
 
   to: 'liquid-tether',
 
-  'class-prefix': 'liquid-tether',
+  classPrefix: 'liquid-tether',
   target: null,
   attachment: null,
-  'target-attachment': null,
+  targetAttachment: null,
   offset: null,
-  'target-offset': null,
-  'target-modifier': null,
+  targetOffset: null,
+  targetModifier: null,
   constraints: null,
   optimizations: null,
 
@@ -27,6 +27,12 @@ export default LiquidWormhole.extend({
     this._super();
 
     this.addTether();
+
+    run.schedule('render', () => {
+      if (this._tether) {
+        this._tether.position();        
+      }
+    });
   },
 
   willDestroyElement() {
@@ -42,13 +48,13 @@ export default LiquidWormhole.extend({
     'class-prefix',
     'target',
     'attachment',
-    'target-attachment',
+    'targetAttachment',
     'offset',
-    'target-offset',
-    'target-modifier',
+    'targetOffset',
+    'targetModifier',
     'constraints',
     'optimizations',
-    'liquidTargetName',
+    'liquidTarget',
     function() {
       this.removeTether(this._tether);
       this.addTether();
@@ -81,13 +87,14 @@ export default LiquidWormhole.extend({
     let options = {
       element: this._tetherElement,
       target: get(this, '_tetherTarget'),
+      moveRoot: false
     };
-    [ 'class-prefix',
+    [ 'classPrefix',
       'attachment',
-      'target-attachment',
+      'targetAttachment',
       'offset',
-      'target-offset',
-      'target-modifier',
+      'targetOffset',
+      'targetModifier',
       'constraints',
       'optimizations'
     ].forEach((k) => {

addon/components/liquid-tether.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 
-const { computed, inject, observer, generateGuid } = Ember;
+const { computed, inject, observer, on } = Ember;
 
 const { service } = inject;
 const { alias } = computed;
@@ -15,28 +15,18 @@ export default Ember.Component.extend({
     return this.$().children();
   }),
 
-  didInsertElement() {
-    this.appendNodes();
-  },
-
-  willDestroyElement() {
-    this.removeNodes();
-  },
-
   liquidTargetDidChange: observer('liquidTarget', function() {
-    this.removeNodes();
-    this.appendNodes();
+    this.removeFromTarget();
+    this.appendToTarget();
   }),
 
-  appendNodes() {
-    const nodes = this.get('nodes');
-
+  appendToTarget: on('didInsertElement', function() {
     this._target = this.get('liquidTarget');
 
-    this.get('liquidTargetService').appendRange(this, this._target, nodes);
-  },
+    this.get('liquidTargetService').appendItem(this._target, this);
+  }),
 
-  removeNodes() {
-    this.get('liquidTargetService').removeRange(this, this._target);
-  }
+  removeFromTarget: on('willDestroyElement', function() {
+    this.get('liquidTargetService').removeItem(this._target, this);
+  })
 });

addon/components/liquid-wormhole.js

@@ -0,0 +1,5 @@
+import Constraint from 'liquid-fire/constraint';
+
+export function target(name) {
+  return new Constraint('parentElementClass', `${name}-liquid-target`);
+}