Merge pull request #39 from yapplabs/feature/body-element

Update ember-cli, tether, and ember versions, and introduce bodyElementId option
yapplabs · Jan 1, 2017 · c77f0ec · c77f0ec
2 parents 3d233da + 5eba097
commit c77f0ec
Show file tree

Hide file tree

Showing 32 changed files with 336 additions and 354 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -13,22 +13,8 @@ insert_final_newline = true
 indent_style = space
 indent_size = 2
 
-[*.js]
-indent_style = space
-indent_size = 2
-
 [*.hbs]
 insert_final_newline = false
-indent_style = space
-indent_size = 2
-
-[*.css]
-indent_style = space
-indent_size = 2
-
-[*.html]
-indent_style = space
-indent_size = 2
 
 [*.{diff,md}]
 trim_trailing_whitespace = false
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module'
+  },
+  extends: 'eslint:recommended',
+  env: {
+    'browser': true
+  },
+  globals: {
+    'Tether': false
+  },
+  rules: {
+  }
+};
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
 /dist
@@ -13,5 +13,5 @@
 /connect.lock
 /coverage/*
 /libpeerconnection.log
-npm-debug.log
+npm-debug.log*
 testem.log
diff --git a/.jshintrc b/.jshintrc
diff --git a/.npmignore b/.npmignore
@@ -1,14 +1,16 @@
-bower_components/
-tests/
-tmp/
-dist/
-
+/bower_components
+/config/ember-try.js
+/dist
+/tests
+/tmp
+**/.gitkeep
 .bowerrc
 .editorconfig
 .ember-cli
+.gitignore
+.jshintrc
+.watchmanconfig
 .travis.yml
-.npmignore
-**/.gitkeep
 bower.json
-Brocfile.js
-testem.json
+ember-cli-build.js
+testem.js
diff --git a/.travis.yml b/.travis.yml
@@ -1,21 +1,19 @@
 ---
 language: node_js
 node_js:
-  - "0.12"
+  - "4"
 
 sudo: false
 
 cache:
   directories:
-    - node_modules
+    - $HOME/.npm
+    - $HOME/.cache # includes bowers cache
 
 env:
-  - EMBER_TRY_SCENARIO=default
-  - EMBER_TRY_SCENARIO=1.10.1
-  - EMBER_TRY_SCENARIO=1.11.3
-  - EMBER_TRY_SCENARIO=1.12.1
-  - EMBER_TRY_SCENARIO=1.13.10
-  - EMBER_TRY_SCENARIO=2.0.2
+  # we recommend testing LTS's and latest stable release (bonus points to beta/canary)
+  - EMBER_TRY_SCENARIO=ember-lts-2.4
+  - EMBER_TRY_SCENARIO=ember-lts-2.8
   - EMBER_TRY_SCENARIO=ember-release
   - EMBER_TRY_SCENARIO=ember-beta
   - EMBER_TRY_SCENARIO=ember-canary
@@ -26,14 +24,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
diff --git a/.watchmanconfig b/.watchmanconfig
@@ -1,3 +1,3 @@
 {
-  "ignore_dirs": ["tmp"]
+  "ignore_dirs": ["tmp", "dist"]
 }
diff --git a/Brocfile.js b/Brocfile.js
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015
+Copyright (c) 2016
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 This ember-cli addon provides a component that allows for 'tethering' a block to a target somewhere else on the page. The target may be an element, an element selector, or an Ember view. Importantly, the component retains typical context for Ember action handling and data binding.
 
+ember-tether is currently tested in Ember 2.4 and higher. For support for earlier versions of Ember, use ember-tether 1.3.1.
+
 ## Live Demo
 
 View a live demo here: [http://yapplabs.github.io/ember-tether/](http://yapplabs.github.io/ember-tether/)
@@ -18,8 +20,6 @@ Given the following DOM:
 
 ```html
 <body class="ember-application">
-  <!-- Target must be in the same element as your ember app -->
-  <!-- otherwise events/bindings on the tethered content will not work -->
   <div id="a-nice-person">
     Nice person
   </div>
@@ -66,31 +66,19 @@ and remove it when the route is exited.
 
 ## Acceptance Testing
 
-Hubspot Tether works by appending tethered elements to the `<body>` tag. Unfortunately, this moves your
-content outside of the Ember application `rootElement` during acceptance testing. This breaks event
-dispatch and action handling, including traditional Ember test helpers like `click`.
-
-In order to [short-circuit Hubspot's positioning behavior](https://github.com/HubSpot/tether/pull/98/), we must use static positioning on the
-`#ember-testing-container` div as follows:
-
-##### tests/index.html
-```html
-<style>
-  #ember-testing-container {
-    /* Set position static to short-circuit Hubspot Tether's positioning */
-    /* https://github.com/HubSpot/tether/pull/98/ */
-    position: static !important;
-  }
-</style>
-```
+Hubspot Tether works by appending tethered elements to the `<body>` tag. Unfortunately, this moves your content outside of the Ember application `rootElement` during acceptance testing. This breaks event dispatch and action handling, including traditional Ember test helpers like `click`.
 
-## Using ember-tether in Your Own Addon
+As of version 1.4.0, we can configure a different element to be used instead of body. This can be useful for Ember tests.
 
-ember-tether depends on [Hubspot Tether](http://github.hubspot.com/tether/), which is imported as a globals-style JS dependency. When using ember-tether directly in an Ember app, everything will work out of the box with no configuration necessary.
+```js
+// config/environment.js
 
-However, addons nested in other addons do not have access to `app.import` in their included hook and are therefore unable to import their own dependencies. This is not a problem unique to ember-tether.
+ENV['ember-tether'] = {
+  bodyElementId: 'ember-testing'
+};
+```
 
-The solution to this is to declare ember-tether as a `peerDependency` to ensure that it gets installed alongside your addon as a dependency of the root application. You'll likely also want it as a `devDependency` so that it's available during development and testing.
+It is also possible to pass a `bodyElement` to a particular ember-tether component declaration.
 
 ## Development Setup
 
@@ -102,9 +90,13 @@ The solution to this is to declare ember-tether as a `peerDependency` to ensure
 
 ### Running Tests
 
-* `ember try:testall`
 * `ember test`
-* `ember test --server`
+* `ember test --serve`
+
+This addon uses ember-try to test against multiple versions of Ember:
+
+* `ember try:each`
+* `ember try:one ember-release --- ember test --serve`
 
 ### Running the dummy app
 

diff --git a/addon/components/ember-tether.js b/addon/components/ember-tether.js
@@ -1,8 +1,8 @@
 import Ember from 'ember';
 
-const { observer, get, run, computed } = Ember;
+const { observer, get, getOwner, run, computed, isNone, Component } = Ember;
 
-export default Ember.Component.extend({
+export default Component.extend({
   classNames: ['ember-tether'],
   classPrefix: 'ember-tether',
   target: null,
@@ -13,15 +13,23 @@ export default Ember.Component.extend({
   targetModifier: null,
   constraints: null,
   optimizations: null,
-
+  emberTetherConfig: computed(function() {
+    return getOwner(this).resolveRegistration('config:environment')['ember-tether'];
+  }),
+  bodyElement: computed(function() {
+    let config = get(this, 'emberTetherConfig');
+    if (config && config.bodyElementId) {
+      return document.getElementById(config.bodyElementId);
+    }
+  }),
   didInsertElement() {
     this._super(...arguments);
     this.addTether();
   },
 
   willDestroyElement() {
     this._super(...arguments);
-    const { _tether, element } = this;
+    let { _tether, element } = this;
     run.schedule('render', () => {
       this.removeElement(element);
       this.removeTether(_tether);
@@ -93,10 +101,11 @@ export default Ember.Component.extend({
       'targetOffset',
       'targetModifier',
       'constraints',
-      'optimizations'
+      'optimizations',
+      'bodyElement'
     ].forEach((k) => {
-      const v = get(this, k);
-      if (!Ember.isNone(v)) {
+      let v = get(this, k);
+      if (!isNone(v)) {
         options[k] = v;
       }
     });

diff --git a/bower.json b/bower.json
@@ -1,16 +1,7 @@
 {
   "name": "ember-tether",
   "dependencies": {
-    "bind-polyfill": "~1.0.0",
-    "ember": "1.13.2",
-    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
-    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
-    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
-    "ember-qunit": "0.3.3",
-    "ember-qunit-notifications": "0.0.7",
-    "ember-resolver": "~0.1.15",
-    "jquery": "1.11.1",
-    "loader.js": "ember-cli/loader.js#3.2.0",
-    "qunit": "~1.17.1"
+    "ember": "~2.10.0",
+    "ember-cli-shims": "0.1.3"
   }
 }