Revision 2

Author: pzuraq

addon/components/liquid-tether.js

@@ -1,14 +1,11 @@
 import Ember from 'ember';
 import LiquidWormhole from 'liquid-wormhole/components/liquid-wormhole';
-import layout from '../templates/components/liquid-tether';
 
-const { computed, get, observer, run } = Ember;
+const { computed, get, run } = Ember;
 
 const { camelize } = Ember.String;
 
 export default LiquidWormhole.extend({
-  layout,
-
   classPrefix: 'liquid-tether',
   target: null,
   attachment: null,
@@ -26,6 +23,10 @@ export default LiquidWormhole.extend({
   },
 
   willAppendNodes(bodyElement) {
+    if (this._tether) {
+      this.removeTether();
+    }
+
     this.addTether(bodyElement);
   },
 
@@ -75,23 +76,6 @@ export default LiquidWormhole.extend({
     }
   },
 
-  tetherDidChange: observer(
-    'class-prefix',
-    'target',
-    'attachment',
-    'targetAttachment',
-    'offset',
-    'targetOffset',
-    'targetModifier',
-    'constraints',
-    'optimizations',
-    'to',
-    function() {
-      this.removeTether(this._tether);
-      this.addTether();
-    }
-  ),
-
   _tetherTarget: computed('target', function() {
     let target = get(this, 'target');
     if (target && target.element) {

addon/index.js

@@ -1,18 +1,14 @@
 import Constraint from 'liquid-fire/constraint';
 
 export function target(name) {
-  return new Constraint('parentElementClass', (className) => {
-    if (className.match('-liquid-target')) {
-      const targetName = className.replace('-liquid-target', '');
-      return targetName.match(name);
-    }
-  });
+  return new Constraint('parentElementClass', `${name}`);
 }
 
+
 export function onOpenTether() {
-  return new Constraint('newValue', ({ emptyTarget }) => !emptyTarget);
+  return new Constraint('newValue', (value) => value !== null);
 }
 
 export function onCloseTether() {
-  return new Constraint('newValue', ({ emptyTarget }) => emptyTarget);
+  return new Constraint('newValue', (value) => value === null);
 }

addon/styles/addon.css

@@ -1,6 +1,6 @@
 {
   "name": "liquid-tether",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "Modals made easy",
   "directories": {
     "doc": "doc",
@@ -34,15 +34,13 @@
     "ember-cli-test-loader": "^1.1.0",
     "ember-cli-uglify": "^1.2.0",
     "ember-cli-markdown-compiler": "pzuraq/ember-cli-markdown-compiler#example-site-fixes",
-    "ember-code-snippet": "1.1.3",
     "liquid-fire": "0.26.1",
     "ui-tabs": "firefly-ui/ui-tabs",
     "phantomjs": "^2.0.0",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",
     "ember-resolver": "^2.0.3",
-    "ember-try": "^0.1.2",
     "loader.js": "^4.0.1"
   },
   "keywords": [
@@ -51,7 +49,7 @@
   "dependencies": {
     "broccoli-funnel": "^0.2.8",
     "broccoli-merge-trees": "^0.2.3",
-    "liquid-wormhole": "pzuraq/liquid-wormhole#v2.0.0-beta.1",
+    "liquid-wormhole": "v2.0.0-beta.2",
     "tether": "pzuraq/tether#adds-option-to-specify-body-element",
     "ember-cli-htmlbars": "^1.0.3",
     "ember-cli-babel": "^5.1.6"

addon/templates/components/liquid-tether.hbs

@@ -1,4 +1,4 @@
-/* global ranTetherTransition, ranOverlayTransition, noTransitionsYet */
+/* global ranWormholeTransition, noTransitionsYet */
 import moduleForAcceptance from '../helpers/module-for-acceptance';
 import { injectTransitionSpies } from '../helpers/integration';
 
@@ -13,82 +13,66 @@ moduleForAcceptance('Acceptance | Demos', {
   }
 });
 
-test('target container exists and is empty on load', function() {
-  visit('/examples');
-
-  andThen(() => {
-    noTransitionsYet();
-    equal(find('.liquid-target-container').length, 1, 'it exists');
-    equal(find('.liquid-target-container > .liquid-target').length, 0, 'it\'s empty');
-  });
-});
-
 test('target container is cleaned when empty', function() {
-  visit('/examples');
+  visit('/docs');
   click('#hello-world-button');
   click('#hello-world-button');
 
   andThen(() => {
-    equal(find('.liquid-target-container > .liquid-target').length, 0, 'it\'s empty');
+    equal(find('.default-liquid-destination .liquid-destination-stack').length, 0, 'it\'s empty');
   });
 });
 
 test('basic liquid-tether works correctly', function() {
-  visit('/examples');
+  visit('/docs');
   noTransitionsYet();
 
   click('#hello-world-button');
   andThen(() => {
-    equal(find('.liquid-target-container .liquid-tether').length, 1, 'it exists');
-    ranTetherTransition('fade-left');
+    equal(find('.default-liquid-destination .liquid-wormhole-element').length, 1, 'it exists');
+    ranWormholeTransition('fade-down');
   });
 });
 
-test('tethers can determine context', function() {
-  visit('/examples');
+test('tethers can determine context with stacks', function() {
+  visit('/docs/stacks');
 
   click('#animation-with-context-button');
-  andThen(() => ranTetherTransition('fade'));
-  andThen(() => ranOverlayTransition('fade'));
+  andThen(() => ranWormholeTransition('fade'));
 
   click('button:contains(Next)');
-  andThen(() => ranTetherTransition('to-left'));
+  andThen(() => ranWormholeTransition('to-left'));
 
   click('button:contains(Back)');
-  andThen(() => ranTetherTransition('to-right'));
+  andThen(() => ranWormholeTransition('to-right'));
 
   click('button:contains(Cancel)');
-  andThen(() => ranTetherTransition('fade'));
-  andThen(() => ranOverlayTransition('fade'));
+  andThen(() => ranWormholeTransition('fade'));
 });
 
-test('routed tethers can determine context', function() {
-  visit('/examples/step-one');
-  andThen(() => ranTetherTransition('fade'));
-  andThen(() => ranOverlayTransition('fade'));
+test('routed tethers can determine context with stacks', function() {
+  visit('/docs/routed-tethers/step-one');
+  andThen(() => ranWormholeTransition('fade'));
 
-  visit('/examples/step-two');
-  andThen(() => ranTetherTransition('to-left'));
+  visit('/docs/routed-tethers/step-two');
+  andThen(() => ranWormholeTransition('to-left'));
 
-  visit('/examples/step-one');
-  andThen(() => ranTetherTransition('to-right'));
+  visit('/docs/routed-tethers/step-one');
+  andThen(() => ranWormholeTransition('to-right'));
 
-  visit('/examples');
-  andThen(() => ranTetherTransition('fade'));
-  andThen(() => ranOverlayTransition('fade'));
+  visit('/docs');
+  andThen(() => ranWormholeTransition('fade'));
 });
 
 test('clickable overlay responds and has correct class', function() {
-  visit('/examples');
+  visit('/docs/stacks');
 
   click('#animation-with-context-button');
-  andThen(() => ranTetherTransition('fade'));
-  andThen(() => ranOverlayTransition('fade'));
+  andThen(() => ranWormholeTransition('fade'));
   andThen(() => {
-    equal(find('.liquid-tether-overlay.clickable').length, 1, 'clickable overlay exists');
+    equal(find('.modal-backdrop').length, 1, 'overlay exists');
   });
 
-  click('.liquid-tether-overlay.clickable');
-  andThen(() => ranTetherTransition('fade'));
-  andThen(() => ranOverlayTransition('fade'));
+  click('.modal-backdrop');
+  andThen(() => ranWormholeTransition('fade'));
 });