Merge pull request #62 from pzuraq/v2.0.0-beta.1

V2.0.0 beta.1

.jshintrc

@@ -28,6 +28,6 @@
   "strict": false,
   "white": false,
   "eqnull": true,
-  "esnext": true,
+  "esversion": 6,
   "unused": true
 }

.travis.yml

@@ -1,7 +1,7 @@
 ---
 language: node_js
 node_js:
-  - "0.12"
+  - "4"
 
 sudo: false
 
@@ -11,7 +11,7 @@ cache:
 
 env:
   - EMBER_TRY_SCENARIO=default
-  - EMBER_TRY_SCENARIO=ember-1-13
+  - EMBER_TRY_SCENARIO=ember-1.13
   - EMBER_TRY_SCENARIO=ember-release
   - EMBER_TRY_SCENARIO=ember-beta
   - EMBER_TRY_SCENARIO=ember-canary
@@ -22,14 +22,17 @@ matrix:
     - env: EMBER_TRY_SCENARIO=ember-canary
 
 before_install:
-  - export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH
-  - "npm config set spin false"
-  - "npm install -g npm@^2"
+  - npm config set spin false
+  - npm install -g bower
+  - bower --version
+  - npm install phantomjs-prebuilt
+  - node_modules/phantomjs-prebuilt/bin/phantomjs --version
 
 install:
-  - npm install -g bower
   - npm install
   - bower install
 
 script:
-  - ember try $EMBER_TRY_SCENARIO test
+  # Usually, it's ok to finish the test scenario without reverting
+  #  to the addon's original dependency state, skipping "cleanup".
+  - ember try:one $EMBER_TRY_SCENARIO test --skip-cleanup

addon/components/liquid-tether.js

@@ -7,9 +7,7 @@ const { computed, get, observer, run } = Ember;
 const { camelize } = Ember.String;
 
 export default LiquidWormhole.extend({
-  layout: layout,
-
-  to: 'liquid-tether',
+  layout,
 
   classPrefix: 'liquid-tether',
   target: null,
@@ -22,13 +20,21 @@ export default LiquidWormhole.extend({
   optimizations: null,
 
   didInsertElement() {
-    this._tetherElement = this.$('.liquid-tether')[0];
-
     this._super.apply(this, arguments);
+
+    this._tetherElement = this.get('nodes')[0];
+  },
+
+  willAppendNodes(bodyElement) {
+    this.addTether(bodyElement);
   },
 
   didAppendNodes() {
-    this.addTether();
+    this._tether.position();
+  },
+
+  willRemoveNodes() {
+    this._tether.position();
   },
 
   willDestroyElement() {
@@ -39,10 +45,28 @@ export default LiquidWormhole.extend({
     });
   },
 
-  addTether() {
-    if (get(this, '_tetherTarget')) {
-      this._tether = new Tether(this._tetherOptions());
-    }
+  addTether(bodyElement) {
+    const target = this.get('_tetherTarget');
+    const element = this._tetherElement;
+
+    const options = { element, target, bodyElement };
+
+    [ 'classPrefix',
+      'attachment',
+      'targetAttachment',
+      'offset',
+      'targetOffset',
+      'targetModifier',
+      'constraints',
+      'optimizations'
+    ].forEach((k) => {
+      const v = get(this, k);
+      if (!Ember.isNone(v)) {
+        options[camelize(k)] = v;
+      }
+    });
+
+    this._tether = new Tether(options);
   },
 
   removeTether() {
@@ -61,7 +85,7 @@ export default LiquidWormhole.extend({
     'targetModifier',
     'constraints',
     'optimizations',
-    'liquidTarget',
+    'to',
     function() {
       this.removeTether(this._tether);
       this.addTether();
@@ -78,29 +102,6 @@ export default LiquidWormhole.extend({
     return target;
   }),
 
-  _tetherOptions() {
-    let options = {
-      element: this._tetherElement,
-      target: get(this, '_tetherTarget'),
-      moveRoot: false
-    };
-    [ 'classPrefix',
-      'attachment',
-      'targetAttachment',
-      'offset',
-      'targetOffset',
-      'targetModifier',
-      'constraints',
-      'optimizations'
-    ].forEach((k) => {
-      const v = get(this, k);
-      if (!Ember.isNone(v)) {
-        options[camelize(k)] = v;
-      }
-    });
-    return options;
-  },
-
   actions: {
     clickOverlay() {
       if (this.get('on-overlay-click')) {

addon/styles/addon.css

@@ -1,3 +1,150 @@
-.liquid-tether-element {
-  position: absolute;
+.default-liquid-target .liquid-tether-container {
+  animation : none !important;
+  animation-delay : 0 !important;
+  animation-direction : normal !important;
+  animation-duration : 0 !important;
+  animation-fill-mode : none !important;
+  animation-iteration-count : 1 !important;
+  animation-name : none !important;
+  animation-play-state : running !important;
+  animation-timing-function : ease !important;
+  backface-visibility : visible !important;
+  background : 0 !important;
+  background-attachment : scroll !important;
+  background-clip : border-box !important;
+  background-color : transparent !important;
+  background-image : none !important;
+  background-origin : padding-box !important;
+  background-position : 0 0 !important;
+  background-position-x : 0 !important;
+  background-position-y : 0 !important;
+  background-repeat : repeat !important;
+  background-size : auto auto !important;
+  border : 0 !important;
+  border-style : none !important;
+  border-width : medium !important;
+  border-color : inherit !important;
+  border-bottom : 0 !important;
+  border-bottom-color : inherit !important;
+  border-bottom-left-radius : 0 !important;
+  border-bottom-right-radius : 0 !important;
+  border-bottom-style : none !important;
+  border-bottom-width : medium !important;
+  border-collapse : separate !important;
+  border-image : none !important;
+  border-left : 0 !important;
+  border-left-color : inherit !important;
+  border-left-style : none !important;
+  border-left-width : medium !important;
+  border-radius : 0 !important;
+  border-right : 0 !important;
+  border-right-color : inherit !important;
+  border-right-style : none !important;
+  border-right-width : medium !important;
+  border-spacing : 0 !important;
+  border-top : 0 !important;
+  border-top-color : inherit !important;
+  border-top-left-radius : 0 !important;
+  border-top-right-radius : 0 !important;
+  border-top-style : none !important;
+  border-top-width : medium !important;
+  bottom : auto !important;
+  box-shadow : none !important;
+  box-sizing : content-box !important;
+  caption-side : top !important;
+  clear : none !important;
+  clip : auto !important;
+  color : inherit !important;
+  columns : auto !important;
+  column-count : auto !important;
+  column-fill : balance !important;
+  column-gap : normal !important;
+  column-rule : medium none currentColor !important;
+  column-rule-color : currentColor !important;
+  column-rule-style : none !important;
+  column-rule-width : none !important;
+  column-span : 1 !important;
+  column-width : auto !important;
+  content : normal !important;
+  counter-increment : none !important;
+  counter-reset : none !important;
+  cursor : auto !important;
+  direction : ltr !important;
+  display : inline !important;
+  empty-cells : show !important;
+  float : none !important;
+  font : normal !important;
+  font-family : inherit !important;
+  font-size : medium !important;
+  font-style : normal !important;
+  font-variant : normal !important;
+  font-weight : normal !important;
+  height : auto !important;
+  hyphens : none !important;
+  left : auto !important;
+  letter-spacing : normal !important;
+  line-height : normal !important;
+  list-style : none !important;
+  list-style-image : none !important;
+  list-style-position : outside !important;
+  list-style-type : disc !important;
+  margin : 0 !important;
+  margin-bottom : 0 !important;
+  margin-left : 0 !important;
+  margin-right : 0 !important;
+  margin-top : 0 !important;
+  max-height : none !important;
+  max-width : none !important;
+  min-height : 0 !important;
+  min-width : 0 !important;
+  opacity : 1 !important;
+  orphans : 0 !important;
+  outline : 0 !important;
+  outline-color : invert !important;
+  outline-style : none !important;
+  outline-width : medium !important;
+  overflow : visible !important;
+  overflow-x : visible !important;
+  overflow-y : visible !important;
+  padding : 0 !important;
+  padding-bottom : 0 !important;
+  padding-left : 0 !important;
+  padding-right : 0 !important;
+  padding-top : 0 !important;
+  page-break-after : auto !important;
+  page-break-before : auto !important;
+  page-break-inside : auto !important;
+  perspective : none !important;
+  perspective-origin : 50% 50% !important;
+  position : static !important;
+  /* May need to alter quotes for different locales (e.g fr) */
+  quotes : '\201C' '\201D' '\2018' '\2019' !important;
+  right : auto !important;
+  tab-size : 8 !important;
+  table-layout : auto !important;
+  text-align : inherit !important;
+  text-align-last : auto !important;
+  text-decoration : none !important;
+  text-decoration-color : inherit !important;
+  text-decoration-line : none !important;
+  text-decoration-style : solid !important;
+  text-indent : 0 !important;
+  text-shadow : none !important;
+  text-transform : none !important;
+  top : auto !important;
+  transform : none !important;
+  transform-style : flat !important;
+  transition : none !important;
+  transition-delay : 0s !important;
+  transition-duration : 0s !important;
+  transition-property : none !important;
+  transition-timing-function : ease !important;
+  unicode-bidi : normal !important;
+  vertical-align : baseline !important;
+  visibility : visible !important;
+  white-space : normal !important;
+  widows : 0 !important;
+  width : auto !important;
+  word-spacing : normal !important;
+  z-index : auto !important;
 }

addon/templates/components/liquid-tether.hbs

@@ -1,4 +1,5 @@
-<div class="liquid-tether-overlay {{overlayClass}} {{if on-overlay-click 'clickable'}}" {{action 'clickOverlay'}}></div>
-<div class="liquid-tether {{tetherClass}}">
-  {{yield}}
+<div class="liquid-tether-element">
+  <div id={{wormholeId}} class="{{wormholeClass}} liquid-wormhole-element">
+    {{yield}}
+  </div>
 </div>

app/transitions/tether.js

@@ -1,18 +1,8 @@
 import explode from './explode';
 
-export default function tether(tetherUse, overlayUse) {
-  const transitions = [];
-  transitions.push({
-    pick: '.liquid-tether > :first-child',
-    use: tetherUse
-  });
-
-  if (overlayUse) {
-    transitions.unshift({
-      pick: '.liquid-tether-overlay',
-      use: overlayUse
-    });
-  }
-
-  return explode.apply(this, transitions);
+export default function tether(transition, options = {}) {
+  return explode.apply(this, [{
+    pick: '.liquid-tether-element > :first-child',
+    use: [transition, options]
+  }]);
 }

bower.json

@@ -3,9 +3,7 @@
   "dependencies": {
     "bootstrap-sass": "~3.3.5",
     "flat-ui-sass": "~2.1.3",
-    "ember": "~2.4.1",
-    "ember-cli-shims": "0.1.0",
-    "ember-cli-test-loader": "0.2.2",
-    "ember-qunit-notifications": "0.1.0"
+    "ember": "~2.8.0",
+    "ember-cli-shims": "0.1.1"
   }
 }

config/ember-try.js

@@ -8,7 +8,7 @@ module.exports = {
       }
     },
     {
-      name: 'ember-1-13',
+      name: 'ember-1.13',
       bower: {
         dependencies: {
           'ember': '~1.13.0'