From 3c46a09353e8e8e2867437fff5fdf2d3243ca2b0 Mon Sep 17 00:00:00 2001 From: Christopher Garrett Date: Wed, 31 Aug 2016 17:46:04 -0700 Subject: [PATCH 1/2] Initial cut --- addon/components/liquid-tether.js | 67 +++--- addon/styles/addon.css | 151 ++++++++++++- addon/templates/components/liquid-tether.hbs | 7 +- app/transitions/tether.js | 20 +- package.json | 6 +- tests/acceptance/demo-test.js | 15 +- tests/acceptance/scenarios-test.js | 15 +- tests/dummy/app/styles/_flyouts.scss | 17 +- tests/dummy/app/styles/_modals.scss | 1 + tests/dummy/app/styles/_tabs.scss | 2 +- tests/dummy/app/styles/app.scss | 2 +- tests/dummy/app/templates/examples.hbs | 200 +++++++++--------- .../dummy/app/templates/examples/step-one.hbs | 7 +- .../dummy/app/templates/examples/step-two.hbs | 7 +- tests/dummy/app/templates/index.hbs | 12 +- tests/dummy/app/transitions.js | 56 +++-- tests/helpers/app-lifecycle.js | 25 --- 17 files changed, 359 insertions(+), 251 deletions(-) delete mode 100644 tests/helpers/app-lifecycle.js diff --git a/addon/components/liquid-tether.js b/addon/components/liquid-tether.js index 73e1042..26ed3cf 100644 --- a/addon/components/liquid-tether.js +++ b/addon/components/liquid-tether.js @@ -9,8 +9,6 @@ const { camelize } = Ember.String; export default LiquidWormhole.extend({ layout: layout, - to: 'liquid-tether', - classPrefix: 'liquid-tether', target: null, attachment: null, @@ -21,14 +19,24 @@ export default LiquidWormhole.extend({ constraints: null, optimizations: null, + _containerClass: 'liquid-tether-container', + didInsertElement() { - this._tetherElement = this.$('.liquid-tether')[0]; + this._tetherElement = this.element.firstChild; this._super.apply(this, arguments); }, + willAppendNodes(bodyElement) { + this.addTether(bodyElement); + }, + didAppendNodes() { - this.addTether(); + this._tether.position(); + }, + + willRemoveNodes() { + this._tether.position(); }, willDestroyElement() { @@ -39,10 +47,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 +87,7 @@ export default LiquidWormhole.extend({ 'targetModifier', 'constraints', 'optimizations', - 'liquidTarget', + 'to', function() { this.removeTether(this._tether); this.addTether(); @@ -78,29 +104,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')) { diff --git a/addon/styles/addon.css b/addon/styles/addon.css index a4050a0..2e8f3b7 100644 --- a/addon/styles/addon.css +++ b/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; } diff --git a/addon/templates/components/liquid-tether.hbs b/addon/templates/components/liquid-tether.hbs index 0f4a273..2ceb1ec 100644 --- a/addon/templates/components/liquid-tether.hbs +++ b/addon/templates/components/liquid-tether.hbs @@ -1,4 +1,5 @@ -
-
- {{yield}} +
+
+ {{yield}} +
diff --git a/app/transitions/tether.js b/app/transitions/tether.js index 99dec6a..29b14cc 100644 --- a/app/transitions/tether.js +++ b/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] + }]); } diff --git a/package.json b/package.json index 3017187..06e6955 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "ember-cli-sri": "^2.1.0", "ember-cli-uglify": "^1.2.0", "ember-code-snippet": "1.1.3", - "liquid-fire": "0.22.1", + "liquid-fire": "0.24.1", "ui-tabs": "firefly-ui/ui-tabs", "phantomjs": "^2.0.0", "ember-data": "^2.4.0", @@ -51,8 +51,8 @@ "dependencies": { "broccoli-funnel": "^0.2.8", "broccoli-merge-trees": "^0.2.3", - "liquid-wormhole": "^1.0.0", - "tether": "pzuraq/tether#move-root-disable-1.3.1", + "liquid-wormhole": "pzuraq/liquid-wormhole#v2.0.0-beta.1", + "tether": "pzuraq/tether#adds-option-to-specify-body-element", "ember-cli-htmlbars": "^1.0.1", "ember-cli-babel": "^5.1.5" }, diff --git a/tests/acceptance/demo-test.js b/tests/acceptance/demo-test.js index f916e3c..a28ec49 100644 --- a/tests/acceptance/demo-test.js +++ b/tests/acceptance/demo-test.js @@ -1,22 +1,15 @@ /* global ranTetherTransition, ranOverlayTransition, noTransitionsYet */ -import { startApp, destroyApp } from '../helpers/app-lifecycle'; +import moduleForAcceptance from '../helpers/module-for-acceptance'; import { injectTransitionSpies } from '../helpers/integration'; -let app; - -module('Acceptance: Demos', { - setup: function() { - app = startApp(); +moduleForAcceptance('Acceptance | Demos', { + beforeEach() { // Conceptually, integration tests shouldn't be digging around in // the container. But animations are slippery, and it's easier to // just spy on them to make sure they're being run than to try to // observe their behavior more directly. - injectTransitionSpies(app); - }, - - teardown: function() { - destroyApp(app); + injectTransitionSpies(this.application); } }); diff --git a/tests/acceptance/scenarios-test.js b/tests/acceptance/scenarios-test.js index 0ce055d..63b2859 100644 --- a/tests/acceptance/scenarios-test.js +++ b/tests/acceptance/scenarios-test.js @@ -1,22 +1,15 @@ /* global ranTetherTransition */ -import { startApp, destroyApp } from '../helpers/app-lifecycle'; +import moduleForAcceptance from '../helpers/module-for-acceptance'; import { injectTransitionSpies } from '../helpers/integration'; -let app; - -module('Acceptance: Scenarios', { - setup: function() { - app = startApp(); +moduleForAcceptance('Acceptance | Scenarios', { + beforeEach() { // Conceptually, integration tests shouldn't be digging around in // the container. But animations are slippery, and it's easier to // just spy on them to make sure they're being run than to try to // observe their behavior more directly. - injectTransitionSpies(app); - }, - - teardown: function() { - destroyApp(app); + injectTransitionSpies(this.application); } }); diff --git a/tests/dummy/app/styles/_flyouts.scss b/tests/dummy/app/styles/_flyouts.scss index bf91fa9..f46d912 100644 --- a/tests/dummy/app/styles/_flyouts.scss +++ b/tests/dummy/app/styles/_flyouts.scss @@ -3,8 +3,8 @@ position: fixed; top: 0; bottom: 0; - right: 0; - padding: 20px 24px 20px; + right: -50px; + padding: 20px 74px 20px 24px; transform: translateX(0); -ms-transform: translateX(0); @@ -16,3 +16,16 @@ border-left: 2px solid $modal-content-border-color; @include box-shadow(0px 2px rgba(0,0,0,0.15)); } + +.notification { + width: 500px; + position: fixed; + top: 10px; + right: 10px; + + z-index: $zindex-modal; + + background-color: $modal-content-bg; + border-left: 2px solid $modal-content-border-color; + @include box-shadow(0px 2px rgba(0,0,0,0.15)); +} diff --git a/tests/dummy/app/styles/_modals.scss b/tests/dummy/app/styles/_modals.scss index f40bdd7..0f35b9a 100644 --- a/tests/dummy/app/styles/_modals.scss +++ b/tests/dummy/app/styles/_modals.scss @@ -32,6 +32,7 @@ $zindex-modal: 1050; // Container that the modal scrolls within .modal { display: block; + position: static; margin: 0; z-index: $zindex-modal-background; } diff --git a/tests/dummy/app/styles/_tabs.scss b/tests/dummy/app/styles/_tabs.scss index 7baa3ad..f5d86a6 100644 --- a/tests/dummy/app/styles/_tabs.scss +++ b/tests/dummy/app/styles/_tabs.scss @@ -216,7 +216,7 @@ $nav-list-gap: 13px; padding: 20px 20px 5px; position: relative; z-index: 1; - max-height: 700px; + height: 700px; overflow: scroll; > div { diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index a16ddb1..bab0e7a 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -39,7 +39,7 @@ body { .fixed-to-bottom { position: fixed; bottom: 0; - padding: 20px 24px 20px 0; + padding: 20px 74px 20px 0; } .red-box, .blue-box, .green-box { diff --git a/tests/dummy/app/templates/examples.hbs b/tests/dummy/app/templates/examples.hbs index f6c5afe..1c3894c 100644 --- a/tests/dummy/app/templates/examples.hbs +++ b/tests/dummy/app/templates/examples.hbs @@ -18,11 +18,11 @@ {{#if showHello}} {{#liquid-tether - to="hello-world" target="#hello-world-button" attachment="middle left" targetAttachment="middle right" - class="container123" + + class="hello-world" tetherClass="tether123" overlayClass="overlay123" }} @@ -68,86 +68,89 @@
{{#if showFirstModalDialog}} + {{liquid-wormhole stack="modal-backdrop" class="modal-backdrop"}} + {{#liquid-tether - to="modal-dialog" + stack="my-modal" index=1 + target="document.body" targetModifier="visible" attachment="middle center" - tetherClass="modal-dialog" - overlayClass="modal-backdrop" - on-overlay-click="closeModalDialog"}} -
-
-

Modal Header

-
-
-

Here's a modal!

-
+ class="modal-content"}} +
+

Modal Header

+
-
- - -
+
+

Here's a modal!

+
+ +
+ +
{{/liquid-tether}} {{/if}} {{#if showSecondModalDialog}} + {{liquid-wormhole stack="modal-backdrop" class="modal-backdrop"}} + {{#liquid-tether - to="modal-dialog" + stack="my-modal" index=2 + target="document.body" targetModifier="visible" attachment="middle center" - tetherClass="modal-dialog" - overlayClass="modal-backdrop"}} -
-
-

Another Modal

-
-
-

- This modal came in from the right instead of fading. The next modal - will also slide in from the right, while the previous modal will slide - in from the left, maintaing spacial context. -

-
+ class="modal-content" + }} +
+

Another Modal

+
-
- - -
+
+

+ This modal came in from the right instead of fading. The next modal + will also slide in from the right, while the previous modal will slide + in from the left, maintaing spacial context. +

+
+ +
+ +
{{/liquid-tether}} {{/if}} {{#if showThirdModalDialog}} + {{liquid-wormhole stack="modal-backdrop" class="modal-backdrop"}} + {{#liquid-tether - to="modal-dialog" + stack="my-modal" index=3 + target="document.body" targetModifier="visible" attachment="middle center" - tetherClass="modal-dialog" - overlayClass="modal-backdrop"}} -
-
-

Another Modal

-
-
-

- This is the last modal! It'll fade out when you finish the dialog. -

-
+ class="modal-content"}} +
+

Another Modal

+
-
- - -
+
+

+ This is the last modal! It'll fade out when you finish the dialog. +

+
+ +
+ +
{{/liquid-tether}} {{/if}} @@ -203,91 +206,90 @@
{{#if showFirstFlytoDialog}} + {{liquid-wormhole class="modal-backdrop"}} + {{#liquid-tether - to="flyto-dialog" + stack="flyto" index=1 + target="document.body" targetModifier="visible" attachment="top left" targetAttachment="top left" offset="-20px -20px" - tetherClass="modal-dialog" - overlayClass="modal-backdrop"}} -
-
-

Modal Header

-
-
-

Here's a modal!

-
+ class="modal-content"}} +
+

Modal Header

+
-
- - -
+
+

Here's a modal!

+
+ +
+ +
{{/liquid-tether}} {{/if}} {{#if showSecondFlytoDialog}} {{#liquid-tether - to="flyto-dialog" + stack="flyto" index=2 + target="document.body" targetModifier="visible" attachment="top right" targetAttachment="top right" offset="-20px 40px" - tetherClass="modal-dialog" - overlayClass="modal-backdrop"}} -
-
-

Another Modal

-
-
-

- This modal came in from the right instead of fading. The next modal - will also slide in from the right, while the previous modal will slide - in from the left, maintaing spacial context. -

-
+ class="modal-content"}} +
+

Another Modal

+
-
- - -
+
+

+ This modal came in from the right instead of fading. The next modal + will also slide in from the right, while the previous modal will slide + in from the left, maintaing spacial context. +

+
+ +
+ +
{{/liquid-tether}} {{/if}} {{#if showThirdFlytoDialog}} {{#liquid-tether - to="flyto-dialog" + stack="flyto" index=3 + target="document.body" targetModifier="visible" attachment="bottom center" targetAttachment="bottom center" offset="20px 0" - tetherClass="modal-dialog" - overlayClass="modal-backdrop"}} -
-
-

Another Modal

-
-
-

- This is the last modal! It'll fade out when you finish the dialog. -

-
+ class="modal-content"}} +
+

Another Modal

+
-
- - -
+
+

+ This is the last modal! It'll fade out when you finish the dialog. +

+
+ +
+ +
{{/liquid-tether}} {{/if}} diff --git a/tests/dummy/app/templates/examples/step-one.hbs b/tests/dummy/app/templates/examples/step-one.hbs index a77fa5a..7a16713 100644 --- a/tests/dummy/app/templates/examples/step-one.hbs +++ b/tests/dummy/app/templates/examples/step-one.hbs @@ -1,11 +1,12 @@ {{#liquid-tether - to="modal-dialog" + stack="modal" index=1 + target="document.body" targetModifier="visible" attachment="middle center" - tetherClass="modal-dialog" - overlayClass="modal-backdrop"}} + + class="modal-dialog"}}

Modal Header

diff --git a/tests/dummy/app/templates/examples/step-two.hbs b/tests/dummy/app/templates/examples/step-two.hbs index 9e32301..180551e 100644 --- a/tests/dummy/app/templates/examples/step-two.hbs +++ b/tests/dummy/app/templates/examples/step-two.hbs @@ -1,11 +1,12 @@ {{#liquid-tether - to="modal-dialog" + stack="modal" index=2 + target="document.body" targetModifier="visible" attachment="middle center" - tetherClass="modal-dialog" - overlayClass="modal-backdrop"}} + + class="modal-dialog"}}

Modal Header

diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs index e620fe3..7eec503 100644 --- a/tests/dummy/app/templates/index.hbs +++ b/tests/dummy/app/templates/index.hbs @@ -17,11 +17,9 @@ {{#if showHello}} {{#liquid-tether - to="hello-world" target="#hello-world-button" attachment="middle left" - targetAttachment="middle right" - class="container123" + class="hello-world" tetherClass="tether123" overlayClass="overlay123" }} @@ -41,11 +39,3 @@ quickly and easily animated with the full flexibility of Liquid Fire transitions.

- -

- Credits to @ef4, - @chrislopresto, - @lukemelia, and - @zackbloom for their help in making - this library possible! -

diff --git a/tests/dummy/app/transitions.js b/tests/dummy/app/transitions.js index f41a94b..c632450 100644 --- a/tests/dummy/app/transitions.js +++ b/tests/dummy/app/transitions.js @@ -1,73 +1,71 @@ import { target, onOpenTether } from 'liquid-tether'; -const options = { - duration: 1500, - easing: 'easeInOutQuint' -}; +const options = { duration: 500, easing: [200, 22] }; export default function() { this.transition( - target('hello-world'), - this.use('tether', ['fade-left', { duration: 400, easing: [600, 22] }]) + this.hasClass('hello-world'), + onOpenTether(), + this.use('tether', 'fade-left', { duration: 400, easing: [600, 22] }) ); /* Modal Examples */ this.transition( - target('modal-dialog'), - this.toValue(({ index: newIndex }, { index: oldIndex }) => newIndex > oldIndex), - this.use('tether', ['to-left', options]), - this.reverse('tether', ['to-right', options]) + this.hasClass('modal-content'), + this.toValue(({ index }) => !index), + this.use('fade') ); this.transition( - target('modal-dialog'), - this.toValue(({ index }) => index === 1), - this.use('tether', 'fade', 'fade') + this.hasClass('modal-content'), + this.toValue(({ index: newIndex }, { index: oldIndex }) => newIndex > oldIndex), + this.use('to-left', options), + this.reverse('to-right', options) ); this.transition( - target('modal-dialog'), - this.toValue(({ index }) => !index), - this.use('tether', 'fade', 'fade') + this.hasClass('modal-content'), + this.toValue(({ index }) => index === 1), + this.use('fade') ); /* Flyto Example */ this.transition( - target('flyto-dialog'), + this.hasClass('flyto'), this.toValue(({ index }) => !index), - this.use('tether', ['to-left', options], 'fade') + this.use('to-left', options) ); this.transition( - target('flyto-dialog'), + this.hasClass('flyto'), this.toValue(({ index: newIndex }, { index: oldIndex }) => newIndex > oldIndex), - this.use('tether', ['fly-to', options]), - this.reverse('tether', ['fly-to', options]) + this.use('tether', 'fly-to', options), + this.reverse('tether', 'fly-to', options) ); this.transition( - target('flyto-dialog'), + this.hasClass('flyto'), this.toValue(({ index }) => index === 1), - this.use('tether', ['to-right', options], 'fade') + this.use('to-right', options) ); /* Flyout Example */ this.transition( - target('flyout'), + this.hasClass('flyout'), onOpenTether(), this.use('explode', { pick: '.flyout', - use: ['to-left', options] + use: ['to-left', { duration: 400, easing: [200, 22] }] }, { pick: '.modal-backdrop', use: 'fade' }), this.reverse('explode', { pick: '.flyout', - use: ['to-right', options] + use: ['to-right', { duration: 400, easing: [200, 22] }] }, { pick: '.modal-backdrop', use: 'fade' @@ -77,17 +75,17 @@ export default function() { /* Scenarios */ this.transition( - target('component-in-tether'), + this.hasClass('component-in-tether'), this.use('tether', ['fade', options]) ); this.transition( - target(/multiple-[1,3]/), + this.hasClass(/multiple-[1,3]/), this.use('tether', ['fade', options]) ); this.transition( - target(/multiple-2/), + this.hasClass(/multiple-2/), this.use('tether', ['to-up', options]) ); } diff --git a/tests/helpers/app-lifecycle.js b/tests/helpers/app-lifecycle.js deleted file mode 100644 index 8e51eb7..0000000 --- a/tests/helpers/app-lifecycle.js +++ /dev/null @@ -1,25 +0,0 @@ -import Ember from 'ember'; -import Application from '../../app'; -import config from '../../config/environment'; - -export default startApp; - -export function startApp(attrs) { - var application; - - var attributes = Ember.merge({}, config.APP); - attributes = Ember.merge(attributes, attrs); // use defaults, but you can override; - - Ember.run(function() { - application = Application.create(attributes); - application.setupForTesting(); - application.injectTestHelpers(); - }); - - return application; -} - -export function destroyApp(app) { - Ember.run(app, 'destroy'); - Ember.$('.liquid-target-container').remove(); -} From d54ee3c51a92f5dd5255a2d0c712478804cfc2b9 Mon Sep 17 00:00:00 2001 From: Christopher Garrett Date: Mon, 19 Sep 2016 21:31:50 -0700 Subject: [PATCH 2/2] Final cut at beta 1 --- .jshintrc | 2 +- .travis.yml | 17 +- addon/components/liquid-tether.js | 8 +- addon/templates/components/liquid-tether.hbs | 2 +- bower.json | 6 +- config/ember-try.js | 2 +- package.json | 32 +- tests/.jshintrc | 2 +- tests/dummy/app/controllers/application.js | 3 - tests/dummy/app/controllers/basics.js | 41 -- .../multiple-targets-same-animation.js | 13 - tests/dummy/app/index.html | 9 +- .../application/template.hbs} | 0 .../basics.hbs => pods/basics/template.hbs} | 0 .../pods/components/example-pane/component.js | 31 -- .../pods/components/example-pane/template.hbs | 34 -- .../app/pods/components/main-nav/template.hbs | 60 ++- .../pods/components/scroll-spier/component.js | 26 -- .../components/svg-icon/github/component.js | 5 - .../components/svg-icon/github/template.hbs | 3 - .../svg-icon/hamburger/component.js | 5 - .../svg-icon/hamburger/template.hbs | 5 - .../examples/controller.js} | 30 +- .../routed-tethers/step-one/template.hbs} | 0 .../routed-tethers/step-two/template.hbs} | 0 .../examples/routed-tethers/template.md} | 0 .../examples/stacks/template.md} | 0 tests/dummy/app/pods/examples/template.md | 364 +++++++++++++++++ .../index.js => pods/index/controller.js} | 0 tests/dummy/app/pods/index/template.md | 40 ++ .../component-in-tether/controller.js} | 0 .../component-in-tether/template.hbs} | 2 +- .../scenarios/multiple-tethers/template.hbs | 7 + .../nested-tethers.hbs/controller.js} | 0 .../scenarios/nested-tethers.hbs/template.hbs | 40 ++ .../scenarios/template.hbs} | 0 tests/dummy/app/router.js | 3 +- tests/dummy/app/routes/basics.js | 10 - tests/dummy/app/routes/examples.js | 10 - tests/dummy/app/styles/_bootstrap.scss | 2 +- tests/dummy/app/styles/_navigation.scss | 80 ++-- tests/dummy/app/styles/app.scss | 12 +- tests/dummy/app/templates/.gitkeep | 0 tests/dummy/app/templates/examples.hbs | 371 ------------------ tests/dummy/app/templates/index.hbs | 41 -- .../multiple-targets-same-animation.hbs | 19 - .../templates/scenarios/multiple-tethers.hbs | 7 - .../templates/scenarios/nested-tethers.hbs | 26 -- tests/dummy/app/transitions.js | 23 +- tests/dummy/config/environment.js | 7 +- tests/helpers/module-for-acceptance.js | 12 +- tests/index.html | 16 +- 52 files changed, 591 insertions(+), 837 deletions(-) delete mode 100644 tests/dummy/app/controllers/application.js delete mode 100644 tests/dummy/app/controllers/basics.js delete mode 100644 tests/dummy/app/controllers/scenarios/multiple-targets-same-animation.js rename tests/dummy/app/{templates/application.hbs => pods/application/template.hbs} (100%) rename tests/dummy/app/{templates/basics.hbs => pods/basics/template.hbs} (100%) delete mode 100644 tests/dummy/app/pods/components/example-pane/component.js delete mode 100644 tests/dummy/app/pods/components/example-pane/template.hbs delete mode 100644 tests/dummy/app/pods/components/scroll-spier/component.js delete mode 100644 tests/dummy/app/pods/components/svg-icon/github/component.js delete mode 100644 tests/dummy/app/pods/components/svg-icon/github/template.hbs delete mode 100644 tests/dummy/app/pods/components/svg-icon/hamburger/component.js delete mode 100644 tests/dummy/app/pods/components/svg-icon/hamburger/template.hbs rename tests/dummy/app/{controllers/examples.js => pods/examples/controller.js} (73%) rename tests/dummy/app/{templates/examples/step-one.hbs => pods/examples/routed-tethers/step-one/template.hbs} (100%) rename tests/dummy/app/{templates/examples/step-two.hbs => pods/examples/routed-tethers/step-two/template.hbs} (100%) rename tests/dummy/app/{routes/.gitkeep => pods/examples/routed-tethers/template.md} (100%) rename tests/dummy/app/{transitions/pop-right.js => pods/examples/stacks/template.md} (100%) create mode 100644 tests/dummy/app/pods/examples/template.md rename tests/dummy/app/{controllers/index.js => pods/index/controller.js} (100%) create mode 100644 tests/dummy/app/pods/index/template.md rename tests/dummy/app/{controllers/scenarios/component-in-tether.js => pods/scenarios/component-in-tether/controller.js} (100%) rename tests/dummy/app/{templates/scenarios/component-in-tether.hbs => pods/scenarios/component-in-tether/template.hbs} (62%) create mode 100644 tests/dummy/app/pods/scenarios/multiple-tethers/template.hbs rename tests/dummy/app/{controllers/scenarios/nested-tethers.js => pods/scenarios/nested-tethers.hbs/controller.js} (100%) create mode 100644 tests/dummy/app/pods/scenarios/nested-tethers.hbs/template.hbs rename tests/dummy/app/{templates/scenarios.hbs => pods/scenarios/template.hbs} (100%) delete mode 100644 tests/dummy/app/routes/basics.js delete mode 100644 tests/dummy/app/routes/examples.js create mode 100644 tests/dummy/app/templates/.gitkeep delete mode 100644 tests/dummy/app/templates/examples.hbs delete mode 100644 tests/dummy/app/templates/index.hbs delete mode 100644 tests/dummy/app/templates/scenarios/multiple-targets-same-animation.hbs delete mode 100644 tests/dummy/app/templates/scenarios/multiple-tethers.hbs delete mode 100644 tests/dummy/app/templates/scenarios/nested-tethers.hbs diff --git a/.jshintrc b/.jshintrc index 75c4c2a..cf896f3 100644 --- a/.jshintrc +++ b/.jshintrc @@ -28,6 +28,6 @@ "strict": false, "white": false, "eqnull": true, - "esnext": true, + "esversion": 6, "unused": true } diff --git a/.travis.yml b/.travis.yml index caf4b7c..794f9c6 100644 --- a/.travis.yml +++ b/.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 diff --git a/addon/components/liquid-tether.js b/addon/components/liquid-tether.js index 26ed3cf..2267502 100644 --- a/addon/components/liquid-tether.js +++ b/addon/components/liquid-tether.js @@ -7,7 +7,7 @@ const { computed, get, observer, run } = Ember; const { camelize } = Ember.String; export default LiquidWormhole.extend({ - layout: layout, + layout, classPrefix: 'liquid-tether', target: null, @@ -19,12 +19,10 @@ export default LiquidWormhole.extend({ constraints: null, optimizations: null, - _containerClass: 'liquid-tether-container', - didInsertElement() { - this._tetherElement = this.element.firstChild; - this._super.apply(this, arguments); + + this._tetherElement = this.get('nodes')[0]; }, willAppendNodes(bodyElement) { diff --git a/addon/templates/components/liquid-tether.hbs b/addon/templates/components/liquid-tether.hbs index 2ceb1ec..69517aa 100644 --- a/addon/templates/components/liquid-tether.hbs +++ b/addon/templates/components/liquid-tether.hbs @@ -1,5 +1,5 @@
-
+
{{yield}}
diff --git a/bower.json b/bower.json index 413d0db..06719d9 100644 --- a/bower.json +++ b/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" } } diff --git a/config/ember-try.js b/config/ember-try.js index 7ded6fc..014f603 100644 --- a/config/ember-try.js +++ b/config/ember-try.js @@ -8,7 +8,7 @@ module.exports = { } }, { - name: 'ember-1-13', + name: 'ember-1.13', bower: { dependencies: { 'ember': '~1.13.0' diff --git a/package.json b/package.json index 06e6955..43ca2e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "liquid-tether", - "version": "1.1.1", + "version": "2.0.0-beta.1", "description": "Modals made easy", "directories": { "doc": "doc", @@ -18,32 +18,32 @@ "author": "Christopher Garrett ", "license": "MIT", "devDependencies": { - "ember-cli-content-security-policy": "0.4.0", "ember-cli-github-pages": "0.0.6", - "broccoli-asset-rev": "^2.2.0", - "ember-ajax": "0.7.1", - "ember-cli": "2.4.2", + "broccoli-asset-rev": "^2.4.2", + "ember-ajax": "2.0.1", + "ember-cli": "2.8.0", "ember-cli-app-version": "^1.0.0", "ember-cli-dependency-checker": "^1.2.0", "ember-cli-htmlbars-inline-precompile": "^0.3.1", - "ember-cli-inject-live-reload": "^1.3.1", + "ember-cli-inject-live-reload": "^1.4.0", + "ember-cli-jshint": "^1.0.0", "ember-cli-sass": "^4.1.0", - "ember-cli-qunit": "^1.2.1", - "ember-cli-release": "0.2.8", + "ember-cli-qunit": "^2.1.0", + "ember-cli-release": "^0.2.9", "ember-cli-sri": "^2.1.0", + "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.24.1", + "liquid-fire": "0.26.1", "ui-tabs": "firefly-ui/ui-tabs", "phantomjs": "^2.0.0", - "ember-data": "^2.4.0", "ember-disable-prototype-extensions": "^1.1.0", - "ember-disable-proxy-controllers": "^1.0.1", - "ember-export-application-global": "^1.0.4", - "ember-load-initializers": "^0.5.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.0" + "loader.js": "^4.0.1" }, "keywords": [ "ember-addon" @@ -53,8 +53,8 @@ "broccoli-merge-trees": "^0.2.3", "liquid-wormhole": "pzuraq/liquid-wormhole#v2.0.0-beta.1", "tether": "pzuraq/tether#adds-option-to-specify-body-element", - "ember-cli-htmlbars": "^1.0.1", - "ember-cli-babel": "^5.1.5" + "ember-cli-htmlbars": "^1.0.3", + "ember-cli-babel": "^5.1.6" }, "ember-addon": { "configPath": "tests/dummy/config", diff --git a/tests/.jshintrc b/tests/.jshintrc index 12458b2..1a4b78d 100644 --- a/tests/.jshintrc +++ b/tests/.jshintrc @@ -51,6 +51,6 @@ "strict": false, "white": false, "eqnull": true, - "esnext": true, + "esversion": 6, "unused": true } diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js deleted file mode 100644 index 38e5364..0000000 --- a/tests/dummy/app/controllers/application.js +++ /dev/null @@ -1,3 +0,0 @@ -import Ember from 'ember'; - -export default Ember.Controller.extend(); diff --git a/tests/dummy/app/controllers/basics.js b/tests/dummy/app/controllers/basics.js deleted file mode 100644 index 8ea3606..0000000 --- a/tests/dummy/app/controllers/basics.js +++ /dev/null @@ -1,41 +0,0 @@ -import Ember from 'ember'; - -const { observer } = Ember; - -export default Ember.Controller.extend({ - queryParams: ['a'], - a: null, - - passedAnchors: Ember.A(), - - // This is terrible. TODO Think of something better. - anchorParamDidChange: observer('a', function() { - const id = this.get('a'); - - if (id && id !== this.get('passedAnchors.lastObject')) { - this.set('locked', true); - Ember.run.next(() => { - Ember.$('body').scrollTop(Ember.$(`#${id}`).offset().top - 15); - this.set('locked', false); - }); - } - }), - - updateAnchor() { - if (!this.get('locked')) { - this.set('a', this.get('passedAnchors.lastObject') || null); - } - }, - - actions: { - addPassedAnchor(anchor) { - this.get('passedAnchors').pushObject(anchor); - Ember.run.scheduleOnce('afterRender', this, 'updateAnchor'); - }, - - removePassedAnchor(anchor) { - this.get('passedAnchors').removeObject(anchor); - Ember.run.scheduleOnce('afterRender', this, 'updateAnchor'); - } - } -}); diff --git a/tests/dummy/app/controllers/scenarios/multiple-targets-same-animation.js b/tests/dummy/app/controllers/scenarios/multiple-targets-same-animation.js deleted file mode 100644 index 4c9d484..0000000 --- a/tests/dummy/app/controllers/scenarios/multiple-targets-same-animation.js +++ /dev/null @@ -1,13 +0,0 @@ -import Ember from 'ember'; - -export default Ember.Controller.extend({ - actions: { - showSecondTether() { - this.toggleProperty('secondTether'); - }, - - showThirdTether() { - this.toggleProperty('thirdTether'); - } - } -}); diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html index d67a887..b0ee0d0 100644 --- a/tests/dummy/app/index.html +++ b/tests/dummy/app/index.html @@ -9,16 +9,17 @@ {{content-for "head"}} - - + + + {{content-for "head-footer"}} {{content-for "body"}} - - + + {{content-for "body-footer"}} diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/pods/application/template.hbs similarity index 100% rename from tests/dummy/app/templates/application.hbs rename to tests/dummy/app/pods/application/template.hbs diff --git a/tests/dummy/app/templates/basics.hbs b/tests/dummy/app/pods/basics/template.hbs similarity index 100% rename from tests/dummy/app/templates/basics.hbs rename to tests/dummy/app/pods/basics/template.hbs diff --git a/tests/dummy/app/pods/components/example-pane/component.js b/tests/dummy/app/pods/components/example-pane/component.js deleted file mode 100644 index 82f638d..0000000 --- a/tests/dummy/app/pods/components/example-pane/component.js +++ /dev/null @@ -1,31 +0,0 @@ -import Ember from 'ember'; - -const { on, run } = Ember; - -export default Ember.Component.extend({ - setupTabs: on('didInsertElement', function() { - run.schedule('afterRender', () => { - const $template = this.$('.template')[0]; - const $js = this.$('.js')[0]; - const $styles = this.$('.styles')[0]; - const $transitions = this.$('.transitions')[0]; - const $current = $template || $js || $styles || $transitions; - - - this.set('$template', $template); - this.set('$styles', $styles); - this.set('$js', $js); - this.set('$transitions', $transitions); - - this.set('currentTab', $current); - - this.$($current).show(); - }); - }), - - actions: { - changeTab($tab) { - this.set('currentTab', $tab); - } - } -}); diff --git a/tests/dummy/app/pods/components/example-pane/template.hbs b/tests/dummy/app/pods/components/example-pane/template.hbs deleted file mode 100644 index 9c9f44b..0000000 --- a/tests/dummy/app/pods/components/example-pane/template.hbs +++ /dev/null @@ -1,34 +0,0 @@ -
    - {{#if $template}} - {{#ui-tab tagName="li" target=$template currentTab=currentTab on-click="changeTab"}} - - Template - - {{/ui-tab}} - {{/if}} - {{#if $js}} - {{#ui-tab tagName="li" target=$js currentTab=currentTab on-click="changeTab"}} - - JS - - {{/ui-tab}} - {{/if}} - {{#if $styles}} - {{#ui-tab tagName="li" target=$styles currentTab=currentTab on-click="changeTab"}} - - Styles - - {{/ui-tab}} - {{/if}} - {{#if $transitions}} - {{#ui-tab tagName="li" target=$transitions currentTab=currentTab on-click="changeTab"}} - - Transitions - - {{/ui-tab}} - {{/if}} -
- -
- {{yield}} -
diff --git a/tests/dummy/app/pods/components/main-nav/template.hbs b/tests/dummy/app/pods/components/main-nav/template.hbs index 3a4eeda..9e8a406 100644 --- a/tests/dummy/app/pods/components/main-nav/template.hbs +++ b/tests/dummy/app/pods/components/main-nav/template.hbs @@ -1,33 +1,29 @@ -
-
-

- Liquid Tether -

-
- {{svg-icon.hamburger}} -
+
-
- {{link-to 'Introduction' 'index' class="nav-item"}} - - {{link-to 'The Basics' 'basics' class="nav-item"}} - - - {{link-to 'Examples' 'examples' class="nav-item"}} - - - GitHub {{svg-icon.github}} - -
+
+
    + {{#link-to 'index' class="nav-item" tagName="li"}} + Introduction + {{/link-to}} + {{#link-to 'basics' class="nav-item" tagName="li"}} + The Basics + {{/link-to}} +
  • + {{link-to 'Examples' 'examples' class="nav-item"}} +
    • +
+ +
+ diff --git a/tests/dummy/app/pods/components/scroll-spier/component.js b/tests/dummy/app/pods/components/scroll-spier/component.js deleted file mode 100644 index 3ace189..0000000 --- a/tests/dummy/app/pods/components/scroll-spier/component.js +++ /dev/null @@ -1,26 +0,0 @@ -import Ember from 'ember'; - -export default Ember.Component.extend({ - tagName: 'h2', - - didInsertElement() { - Ember.$(document).scroll(() => { - const scrollSpierOffset = this.$().offset().top; - const scrollTop = Ember.$('body').scrollTop(); - - if ((scrollTop + 20 > scrollSpierOffset || (window.innerHeight + window.scrollY) >= document.body.offsetHeight - 20)) { - if (!this.get('passed')) { - this.set('passed', true); - this.sendAction('on-pass', this.id); - } - } else if (scrollTop + 20 <= scrollSpierOffset && this.get('passed')) { - this.set('passed', false); - this.sendAction('on-unpass', this.id); - } - }); - }, - - willDestroyElement() { - Ember.$(document).off('scroll'); - } -}); diff --git a/tests/dummy/app/pods/components/svg-icon/github/component.js b/tests/dummy/app/pods/components/svg-icon/github/component.js deleted file mode 100644 index ba4eb74..0000000 --- a/tests/dummy/app/pods/components/svg-icon/github/component.js +++ /dev/null @@ -1,5 +0,0 @@ -import Ember from 'ember'; - -export default Ember.Component.extend({ - tagName: '' -}); diff --git a/tests/dummy/app/pods/components/svg-icon/github/template.hbs b/tests/dummy/app/pods/components/svg-icon/github/template.hbs deleted file mode 100644 index 98d6c67..0000000 --- a/tests/dummy/app/pods/components/svg-icon/github/template.hbs +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/tests/dummy/app/pods/components/svg-icon/hamburger/component.js b/tests/dummy/app/pods/components/svg-icon/hamburger/component.js deleted file mode 100644 index ba4eb74..0000000 --- a/tests/dummy/app/pods/components/svg-icon/hamburger/component.js +++ /dev/null @@ -1,5 +0,0 @@ -import Ember from 'ember'; - -export default Ember.Component.extend({ - tagName: '' -}); diff --git a/tests/dummy/app/pods/components/svg-icon/hamburger/template.hbs b/tests/dummy/app/pods/components/svg-icon/hamburger/template.hbs deleted file mode 100644 index bc38acc..0000000 --- a/tests/dummy/app/pods/components/svg-icon/hamburger/template.hbs +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/tests/dummy/app/controllers/examples.js b/tests/dummy/app/pods/examples/controller.js similarity index 73% rename from tests/dummy/app/controllers/examples.js rename to tests/dummy/app/pods/examples/controller.js index cf194bc..8b4e514 100644 --- a/tests/dummy/app/controllers/examples.js +++ b/tests/dummy/app/pods/examples/controller.js @@ -1,31 +1,13 @@ import Ember from 'ember'; -const { computed, observer } = Ember; +const { computed } = Ember; export default Ember.Controller.extend({ - queryParams: ['a'], - a: null, - - passedAnchors: Ember.A(), - - // Still terrible. TODO: Think of something better. - anchorParamDidChange: observer('a', function() { - const id = this.get('a'); - - if (id && id !== this.get('passedAnchors.lastObject')) { - this.set('locked', true); - Ember.run.next(() => { - Ember.$('body').scrollTop(Ember.$(`#${id}`).offset().top - 15); - this.set('locked', false); - }); - } - }), - - updateAnchor() { - if (!this.get('locked')) { - this.set('a', this.get('passedAnchors.lastObject') || null); - } - }, + exampleConstraints: [{ + to: 'scrollParent', + attachment: 'together', + pin: true + }], showFirstModalDialog: computed.equal('currentModalDialogStep', 1), showSecondModalDialog: computed.equal('currentModalDialogStep', 2), diff --git a/tests/dummy/app/templates/examples/step-one.hbs b/tests/dummy/app/pods/examples/routed-tethers/step-one/template.hbs similarity index 100% rename from tests/dummy/app/templates/examples/step-one.hbs rename to tests/dummy/app/pods/examples/routed-tethers/step-one/template.hbs diff --git a/tests/dummy/app/templates/examples/step-two.hbs b/tests/dummy/app/pods/examples/routed-tethers/step-two/template.hbs similarity index 100% rename from tests/dummy/app/templates/examples/step-two.hbs rename to tests/dummy/app/pods/examples/routed-tethers/step-two/template.hbs diff --git a/tests/dummy/app/routes/.gitkeep b/tests/dummy/app/pods/examples/routed-tethers/template.md similarity index 100% rename from tests/dummy/app/routes/.gitkeep rename to tests/dummy/app/pods/examples/routed-tethers/template.md diff --git a/tests/dummy/app/transitions/pop-right.js b/tests/dummy/app/pods/examples/stacks/template.md similarity index 100% rename from tests/dummy/app/transitions/pop-right.js rename to tests/dummy/app/pods/examples/stacks/template.md diff --git a/tests/dummy/app/pods/examples/template.md b/tests/dummy/app/pods/examples/template.md new file mode 100644 index 0000000..fda4386 --- /dev/null +++ b/tests/dummy/app/pods/examples/template.md @@ -0,0 +1,364 @@ +# Examples + +## Hello World + +Below is the basic Hello World example seen on the front page. The template +code is embedded directly in the context of this page, hidden by an +if statement. Toggling that if inserts the element +into the DOM, which triggers the animation. + +
+ + + {{#if showHello}} + {{#liquid-tether + target="#hello-world-button" + attachment="middle left" + targetAttachment="middle right" + + class="hello-world" + }} +
+
+
+ Hello! +
+
+ {{/liquid-tether}} + {{/if}} +
+ +``` +{{#liquid-tether + target="#hello-world-button" + attachment="middle left" + + class="hello-world" +}} +
+
+
+ Hello! +
+
+{{/liquid-tether}} +``` + +``` +this.transition( + this.hasClass('hello-world'), + this.use('tether', 'fade-left', { duration: 400, easing: [600, 22] }) +); +``` + +## Test + +
+
+ {{#liquid-tether + target="#something" + attachment="middle center" + constraints=exampleConstraints + class="blue-box" + }} + Testing123 + {{/liquid-tether}} +
+
+ +## Animation With Context + +This example shows different animations based on context. It uses the index +constraint shorthands to differentiate between transitioning to the first +modal, in between modals, and from the last modal. This way we can animate +without losing spacial context from the perspective of the user (e.g. if a +modal moves out toward the left side using to-left, the in +reverse the modal with move in from the left side using to-right) + +
+ + + {{#if showFirstModalDialog}} + {{liquid-wormhole stack="modal-backdrop" class="modal-backdrop"}} + {{#liquid-tether + stack="modal" + id="my-modal" + index=1 + target="document.body" + targetModifier="visible" + attachment="middle center" + class="modal-content" + }} +
+

Modal Header

+
+
+ Here's a modal! +
+
+ + +
+ {{/liquid-tether}} + {{/if}} + + {{#if showSecondModalDialog}} + {{liquid-wormhole stack="modal-backdrop" class="modal-backdrop"}} + {{#liquid-tether + stack="modal" + id="my-modal" + index=2 + target="document.body" + targetModifier="visible" + attachment="middle center" + class="modal-content" + }} +
+

Another Modal

+
+
+ This modal came in from the right instead of fading. The next modal + will also slide in from the right, while the previous modal will slide + in from the left, maintaing spacial context. +
+
+ + +
+ {{/liquid-tether}} + {{/if}} + + {{#if showThirdModalDialog}} + {{liquid-wormhole stack="modal-backdrop" class="modal-backdrop"}} + {{#liquid-tether + stack="modal" + id="my-modal" + index=3 + target="document.body" + targetModifier="visible" + attachment="middle center" + class="modal-content" + }} +
+

Another Modal

+
+
+ This is the last modal! It'll fade out when you finish the dialog. +
+
+ + +
+ {{/liquid-tether}} + {{/if}} +
+ + + + +## Moving Modals + +All of the standard Liquid Fire animations work with Liquid Tether out of the +box, meaning the `fly-to` animation can be used to animate tethers +around the page! + + + + diff --git a/tests/dummy/app/controllers/index.js b/tests/dummy/app/pods/index/controller.js similarity index 100% rename from tests/dummy/app/controllers/index.js rename to tests/dummy/app/pods/index/controller.js diff --git a/tests/dummy/app/pods/index/template.md b/tests/dummy/app/pods/index/template.md new file mode 100644 index 0000000..e60a323 --- /dev/null +++ b/tests/dummy/app/pods/index/template.md @@ -0,0 +1,40 @@ +# Modals made easy + + ``` + + + {{#if showHello}} + {{#liquid-tether + target="#hello-world-button" + attachment="middle left" + class="hello-world" + }} + ... + {{/liquid-tether}} + {{/if}} + ``` + +
+
+ + + {{#if showHello}} + {{#liquid-tether + target="#hello-world-button" + attachment="middle left" + class="hello-world" + }} +
+
+
+ Hello! +
+
+ {{/liquid-tether}} + {{/if}} +
+
diff --git a/tests/dummy/app/controllers/scenarios/component-in-tether.js b/tests/dummy/app/pods/scenarios/component-in-tether/controller.js similarity index 100% rename from tests/dummy/app/controllers/scenarios/component-in-tether.js rename to tests/dummy/app/pods/scenarios/component-in-tether/controller.js diff --git a/tests/dummy/app/templates/scenarios/component-in-tether.hbs b/tests/dummy/app/pods/scenarios/component-in-tether/template.hbs similarity index 62% rename from tests/dummy/app/templates/scenarios/component-in-tether.hbs rename to tests/dummy/app/pods/scenarios/component-in-tether/template.hbs index 7951791..e811313 100644 --- a/tests/dummy/app/templates/scenarios/component-in-tether.hbs +++ b/tests/dummy/app/pods/scenarios/component-in-tether/template.hbs @@ -1,7 +1,7 @@ {{#unless hideModal}} - {{#liquid-tether to="component-in-tether" target="document.body" attachment="middle center"}} + {{#liquid-tether target="document.body" attachment="middle center" class="component-in-tether"}} {{#test-component}} testing {{/test-component}} diff --git a/tests/dummy/app/pods/scenarios/multiple-tethers/template.hbs b/tests/dummy/app/pods/scenarios/multiple-tethers/template.hbs new file mode 100644 index 0000000..a6f25fc --- /dev/null +++ b/tests/dummy/app/pods/scenarios/multiple-tethers/template.hbs @@ -0,0 +1,7 @@ +{{#liquid-tether target="document.body" attachment="middle center" class="multiple"}} + 123 +{{/liquid-tether}} + +{{#liquid-tether target="document.body" attachment="middle center" class="multiple"}} + 456 +{{/liquid-tether}} diff --git a/tests/dummy/app/controllers/scenarios/nested-tethers.js b/tests/dummy/app/pods/scenarios/nested-tethers.hbs/controller.js similarity index 100% rename from tests/dummy/app/controllers/scenarios/nested-tethers.js rename to tests/dummy/app/pods/scenarios/nested-tethers.hbs/controller.js diff --git a/tests/dummy/app/pods/scenarios/nested-tethers.hbs/template.hbs b/tests/dummy/app/pods/scenarios/nested-tethers.hbs/template.hbs new file mode 100644 index 0000000..63fe928 --- /dev/null +++ b/tests/dummy/app/pods/scenarios/nested-tethers.hbs/template.hbs @@ -0,0 +1,40 @@ +
+ Target +
+ +{{#liquid-tether + target=".green-box" + attachment="top left" + targetAttachment="bottom left" + class="red-box" +}} + Outer Tether + + {{#liquid-tether + target=".red-box" + attachment="top left" + class="blue-box" + }} + Middle Tether + + + + {{#if showingInner}} + {{#liquid-tether + target=".blue-box" + attachment="top left" + class="orange-box" + }} + Inner Tether + {{/liquid-tether}} + {{/if}} + {{/liquid-tether}} +{{/liquid-tether}} + + diff --git a/tests/dummy/app/templates/scenarios.hbs b/tests/dummy/app/pods/scenarios/template.hbs similarity index 100% rename from tests/dummy/app/templates/scenarios.hbs rename to tests/dummy/app/pods/scenarios/template.hbs diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 477f0ef..4080c49 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -2,7 +2,8 @@ import Ember from 'ember'; import config from './config/environment'; const Router = Ember.Router.extend({ - location: config.locationType + location: config.locationType, + rootURL: config.rootURL }); Router.map(function() { diff --git a/tests/dummy/app/routes/basics.js b/tests/dummy/app/routes/basics.js deleted file mode 100644 index abae34f..0000000 --- a/tests/dummy/app/routes/basics.js +++ /dev/null @@ -1,10 +0,0 @@ -import Ember from 'ember'; - -export default Ember.Route.extend({ - resetController(controller, isExiting) { - if (isExiting) { - // isExiting would be false if only the route's model was changing - controller.set('a', null); - } - } -}); diff --git a/tests/dummy/app/routes/examples.js b/tests/dummy/app/routes/examples.js deleted file mode 100644 index abae34f..0000000 --- a/tests/dummy/app/routes/examples.js +++ /dev/null @@ -1,10 +0,0 @@ -import Ember from 'ember'; - -export default Ember.Route.extend({ - resetController(controller, isExiting) { - if (isExiting) { - // isExiting would be false if only the route's model was changing - controller.set('a', null); - } - } -}); diff --git a/tests/dummy/app/styles/_bootstrap.scss b/tests/dummy/app/styles/_bootstrap.scss index 37ae377..f8ced14 100644 --- a/tests/dummy/app/styles/_bootstrap.scss +++ b/tests/dummy/app/styles/_bootstrap.scss @@ -12,7 +12,7 @@ @return fade-out($color, 1 - ($percent / 100%)); } -$brand-secondary: #d35400; +// $brand-secondary: #d35400; // Flat UI Variables @import "flat-ui/variables"; diff --git a/tests/dummy/app/styles/_navigation.scss b/tests/dummy/app/styles/_navigation.scss index 0843973..84602ab 100644 --- a/tests/dummy/app/styles/_navigation.scss +++ b/tests/dummy/app/styles/_navigation.scss @@ -1,75 +1,43 @@ -.nav-container { - padding: 14px 15px; - - .nav-button.active { - opacity: .4; +.navbar { + .navbar-brand { + font-weight: 400; } -} -.main-nav { - background-color: $midnight-blue; - position: fixed; - left: 0; - right: 0; - z-index: 3; - - @media screen and (max-width: 768px) { - border-bottom: solid 2px shade($midnight-blue, 10%); - } + .nav-item { + font-weight: 400; - @media screen and (min-width: 768px) { - top: 0; - right: auto; - bottom: 0; - width: 250px; - border-right: solid 10px tint($midnight-blue, 10%); + &:first-child > a, &:last-child > a { + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } } - h1 { - font-size: 24px; - color: $clouds; - font-weight: 100; + .navbar-nav.navbar-left:first-child { margin: 0; } - .nav-menu { - @media screen and (max-width: 768px) { + .navbar-toggle.fa { + + @media (min-width: 768px) { display: none; } - &.nav-open { - display: block; + &::before { + font-family: FontAwesome; } } - .nav-item { - padding: 10px 15px; - - color: $clouds; - display: block; - font-weight: 100; - - &:hover, &.active { - background-color: tint($midnight-blue, 5%); - } - - &.sub-nav-item { - font-size: 0.8em; - padding-left: 40px; - } + .fa.fa-github { + font-size: 2em; + margin: -0.5em 0; + vertical-align: sub; } - .nav-svg { - svg { - fill: white; - height: 32px; - width: 32px; - vertical-align: sub; - margin-left: 10px; - } - - &:hover svg { - fill: darken(white, 10%); + .navbar-break { + @media (max-width: 767px) { + border-top: solid 2px #2f4154; } } } diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index bab0e7a..835367e 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -18,7 +18,7 @@ body { padding: 80px 20px 100px; @media screen and (min-width: 768px) { - padding: 0 20px 100px 270px; + padding: 0 20px 100px; } } @@ -42,7 +42,7 @@ body { padding: 20px 74px 20px 0; } -.red-box, .blue-box, .green-box { +.red-box, .blue-box, .green-box, .yellow-box, .orange-box { padding: 20px; color: white; } @@ -58,3 +58,11 @@ body { .green-box { background-color: green; } + +.orange-box { + background-color: orange; +} + +.yellow-box { + background-color: yellow; +} diff --git a/tests/dummy/app/templates/.gitkeep b/tests/dummy/app/templates/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tests/dummy/app/templates/examples.hbs b/tests/dummy/app/templates/examples.hbs deleted file mode 100644 index 1c3894c..0000000 --- a/tests/dummy/app/templates/examples.hbs +++ /dev/null @@ -1,371 +0,0 @@ -

Examples

- -{{#scroll-spier id="hello-world" on-pass="addPassedAnchor" on-unpass="removePassedAnchor"}} - Hello World -{{/scroll-spier}} - -

- Below is the basic Hello World example seen on the front page. The template - code is embedded directly in the context of this page, hidden by an - if statement. Toggling that if inserts the element - into the DOM, which triggers the animation. -

- -
- - - {{#if showHello}} - {{#liquid-tether - target="#hello-world-button" - attachment="middle left" - targetAttachment="middle right" - - class="hello-world" - tetherClass="tether123" - overlayClass="overlay123" - }} -
-
-
- Hello! -
-
- {{/liquid-tether}} - {{/if}} -
- -{{#example-pane}} -
- {{code-snippet name="hello-world.hbs"}} -
-
- {{code-snippet name="hello-world.js"}} -
-
- {{code-snippet name="hello-world-transitions.js"}} -
-{{/example-pane}} - -{{#scroll-spier id="animation-with-context" on-pass="addPassedAnchor" on-unpass="removePassedAnchor"}} - Animation With Context -{{/scroll-spier}} - -

- This example shows different animations based on context. It uses the index - constraint shorthands to differentiate between transitioning to the first - modal, in between modals, and from the last modal. This way we can animate - without losing spacial context from the perspective of the user (e.g. if a - modal moves out toward the left side using to-left, the in - reverse the modal with move in from the left side using to-right) -

- -
- -
- -{{#if showFirstModalDialog}} - {{liquid-wormhole stack="modal-backdrop" class="modal-backdrop"}} - - {{#liquid-tether - stack="my-modal" - index=1 - - target="document.body" - targetModifier="visible" - attachment="middle center" - - class="modal-content"}} -
-

Modal Header

-
- -
-

Here's a modal!

-
- -
- - -
- {{/liquid-tether}} -{{/if}} - -{{#if showSecondModalDialog}} - {{liquid-wormhole stack="modal-backdrop" class="modal-backdrop"}} - - {{#liquid-tether - stack="my-modal" - index=2 - - target="document.body" - targetModifier="visible" - attachment="middle center" - - class="modal-content" - }} -
-

Another Modal

-
- -
-

- This modal came in from the right instead of fading. The next modal - will also slide in from the right, while the previous modal will slide - in from the left, maintaing spacial context. -

-
- -
- - -
- {{/liquid-tether}} -{{/if}} - -{{#if showThirdModalDialog}} - {{liquid-wormhole stack="modal-backdrop" class="modal-backdrop"}} - - {{#liquid-tether - stack="my-modal" - index=3 - - target="document.body" - targetModifier="visible" - attachment="middle center" - - class="modal-content"}} -
-

Another Modal

-
- -
-

- This is the last modal! It'll fade out when you finish the dialog. -

-
- -
- - -
- {{/liquid-tether}} -{{/if}} - -{{#example-pane}} -
- {{code-snippet name="animation-with-context.hbs"}} -
-
- {{code-snippet name="animation-with-context.js"}} -
-
- {{code-snippet name="animation-with-context-transitions.js"}} -
-{{/example-pane}} - -{{#scroll-spier id="routed-tethers" on-pass="addPassedAnchor" on-unpass="removePassedAnchor"}} - Routed Tethers -{{/scroll-spier}} - -

- Oftentimes modals should appear in the context of a route. If that's the case - in your application, it's as simple as creating a route and template with just - a liquid-tether. -

- -
- {{#link-to "examples.step-one" class="btn btn-primary btn-embossed"}} - Open Routed Modal - {{/link-to}} -
- -{{outlet}} - -{{#example-pane}} -
- {{code-snippet name="routed-modal.hbs"}} -
-{{/example-pane}} - -{{#scroll-spier id="moving-modals" on-pass="addPassedAnchor" on-unpass="removePassedAnchor"}} - Moving Modals -{{/scroll-spier}} - -

- All of the standard Liquid Fire animations work with Liquid Tether out of the - box, meaning the fly-to animation can be used to animate tethers - around the page! -

- -
- -
- -{{#if showFirstFlytoDialog}} - {{liquid-wormhole class="modal-backdrop"}} - - {{#liquid-tether - stack="flyto" - index=1 - - target="document.body" - targetModifier="visible" - attachment="top left" - targetAttachment="top left" - offset="-20px -20px" - - class="modal-content"}} -
-

Modal Header

-
- -
-

Here's a modal!

-
- -
- - -
- {{/liquid-tether}} -{{/if}} - -{{#if showSecondFlytoDialog}} - {{#liquid-tether - stack="flyto" - index=2 - - target="document.body" - targetModifier="visible" - attachment="top right" - targetAttachment="top right" - offset="-20px 40px" - - class="modal-content"}} -
-

Another Modal

-
- -
-

- This modal came in from the right instead of fading. The next modal - will also slide in from the right, while the previous modal will slide - in from the left, maintaing spacial context. -

-
- -
- - -
- {{/liquid-tether}} -{{/if}} - -{{#if showThirdFlytoDialog}} - {{#liquid-tether - stack="flyto" - index=3 - - target="document.body" - targetModifier="visible" - attachment="bottom center" - targetAttachment="bottom center" - offset="20px 0" - - class="modal-content"}} -
-

Another Modal

-
- -
-

- This is the last modal! It'll fade out when you finish the dialog. -

-
- -
- - -
- {{/liquid-tether}} -{{/if}} - -{{#example-pane}} -
- {{code-snippet name="flyto-dialog.hbs"}} -
-
- {{code-snippet name="flyto-dialog.js"}} -
-
- {{code-snippet name="flyto-dialog-transitions.js"}} -
-{{/example-pane}} - -{{#scroll-spier id="liquid-wormhole" on-pass="addPassedAnchor" on-unpass="removePassedAnchor"}} - Liquid Wormhole -{{/scroll-spier}} - -

- There are times when you may want to warp an element up to the body, but - without the positioning power of Tether (for instance if you simply want to - position the element using position: fixed;). In those cases, you - can use the \{{liquid-wormhole}} helper. -

- -

- Liquid Wormhole works just like Liquid Tether, but without a default - overlay/tether element. To animate the elements warped by a liquid wormhole, - use the explode animation helper. -

- -

- Liquid Wormhole is a dependency of Liquid Tether. You can include it directly - if you do not need the positioning provided by Tether.js. See the - addon's repository for - more details. -

- -
- -
- -{{#if showFlyout}} - {{#liquid-wormhole to="flyout" index=1}} -
-
-

Hey there!

-

This is a flyout!

- -

- It's been given a fixed position relative to the window, without any of - the conceptual overhead that comes with tethering. -

- -
- This div is easily fixed to the bottom of the screen, no need to worry about - the target container messing with your positioning! - - -
-
- {{/liquid-wormhole}} -{{/if}} - -{{#example-pane}} -
- {{code-snippet name="liquid-wormhole.hbs"}} -
-
- {{code-snippet name="liquid-wormhole.js"}} -
-
- {{code-snippet name="liquid-wormhole-transitions.js"}} -
-{{/example-pane}} diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs deleted file mode 100644 index 7eec503..0000000 --- a/tests/dummy/app/templates/index.hbs +++ /dev/null @@ -1,41 +0,0 @@ -

Introducing Liquid Tether

- -

Modals made easy

- -

- Liquid Tether combines the ideas behind - Ember Tether with - the power of Liquid Fire to - provide an accessible, easy-to-use toolkit for both positioning & animating UI - elements. -

- -
- - - {{#if showHello}} - {{#liquid-tether - target="#hello-world-button" - attachment="middle left" - class="hello-world" - tetherClass="tether123" - overlayClass="overlay123" - }} -
-
-
- Hello! -
-
- {{/liquid-tether}} - {{/if}} -
- -

- Modals, popovers, dropdowns, tooltips! Any element that needs to be absolutely - positioned with respect to some other element (or the window itself) can be - quickly and easily animated with the full flexibility of Liquid Fire - transitions. -

diff --git a/tests/dummy/app/templates/scenarios/multiple-targets-same-animation.hbs b/tests/dummy/app/templates/scenarios/multiple-targets-same-animation.hbs deleted file mode 100644 index 4129ec3..0000000 --- a/tests/dummy/app/templates/scenarios/multiple-targets-same-animation.hbs +++ /dev/null @@ -1,19 +0,0 @@ -{{#liquid-tether to="multiple-1" target="document.body" attachment="middle center"}} - 123 -{{/liquid-tether}} - - - -{{#if secondTether}} - {{#liquid-tether to="multiple-2" target="document.body" attachment="middle center"}} - 456 - {{/liquid-tether}} -{{/if}} - - - -{{#if secondTether}} - {{#liquid-tether to="multiple-3" target="document.body" attachment="middle center"}} - 456 - {{/liquid-tether}} -{{/if}} diff --git a/tests/dummy/app/templates/scenarios/multiple-tethers.hbs b/tests/dummy/app/templates/scenarios/multiple-tethers.hbs deleted file mode 100644 index 8c6e74e..0000000 --- a/tests/dummy/app/templates/scenarios/multiple-tethers.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{#liquid-tether to="multiple" target="document.body" attachment="middle center"}} - 123 -{{/liquid-tether}} - -{{#liquid-tether to="multiple" target="document.body" attachment="middle center"}} - 456 -{{/liquid-tether}} diff --git a/tests/dummy/app/templates/scenarios/nested-tethers.hbs b/tests/dummy/app/templates/scenarios/nested-tethers.hbs deleted file mode 100644 index 77a7656..0000000 --- a/tests/dummy/app/templates/scenarios/nested-tethers.hbs +++ /dev/null @@ -1,26 +0,0 @@ -
- Target -
- -{{#liquid-tether - to="outer-tether" - target=".green-box" - attachment="top left" - targetAttachment="bottom left"}} -
- Outer Tether - - - - {{#if showingInner}} - {{#liquid-tether - to="inner-tether" - target=".red-box" - attachment="top left"}} -
- Inner Tether -
- {{/liquid-tether}} - {{/if}} -
-{{/liquid-tether}} diff --git a/tests/dummy/app/transitions.js b/tests/dummy/app/transitions.js index c632450..8ba9d76 100644 --- a/tests/dummy/app/transitions.js +++ b/tests/dummy/app/transitions.js @@ -1,34 +1,28 @@ -import { target, onOpenTether } from 'liquid-tether'; +import { onOpenTether } from 'liquid-tether'; const options = { duration: 500, easing: [200, 22] }; export default function() { this.transition( this.hasClass('hello-world'), - onOpenTether(), - this.use('tether', 'fade-left', { duration: 400, easing: [600, 22] }) + this.use('fade-left', { duration: 400, easing: [600, 22] }) ); /* Modal Examples */ this.transition( - this.hasClass('modal-content'), - this.toValue(({ index }) => !index), + this.matchSelector('#my-modal'), + this.toValue((toValue, fromValue) => toValue === null || fromValue === null), this.use('fade') ); this.transition( - this.hasClass('modal-content'), - this.toValue(({ index: newIndex }, { index: oldIndex }) => newIndex > oldIndex), + this.matchSelector('#my-modal'), + this.toValue((toValue, fromValue) => toValue && fromValue && toValue.index > fromValue.index), this.use('to-left', options), this.reverse('to-right', options) ); - this.transition( - this.hasClass('modal-content'), - this.toValue(({ index }) => index === 1), - this.use('fade') - ); /* Flyto Example */ @@ -88,4 +82,9 @@ export default function() { this.hasClass(/multiple-2/), this.use('tether', ['to-up', options]) ); + + this.transition( + this.hasClass('orange-box'), + this.use('to-left', { duration: 400, easing: [200, 16] }) + ); } diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js index 4552840..9c5b500 100644 --- a/tests/dummy/config/environment.js +++ b/tests/dummy/config/environment.js @@ -17,10 +17,10 @@ module.exports = function(environment) { contentSecurityPolicy: { 'default-src': "'none'", 'script-src': "'self'", - 'font-src': "'self'", + 'font-src': "'self' https://maxcdn.bootstrapcdn.com", 'connect-src': "'self'", 'img-src': "'self'", - 'style-src': "'self' 'unsafe-inline'", + 'style-src': "'self' 'unsafe-inline' https://maxcdn.bootstrapcdn.com", 'media-src': "'self'" }, @@ -40,7 +40,6 @@ module.exports = function(environment) { if (environment === 'test') { // Testem prefers this... - ENV.baseURL = '/'; ENV.locationType = 'none'; // keep test console output quieter @@ -51,7 +50,7 @@ module.exports = function(environment) { } if (environment === 'production') { - ENV.baseURL = '/liquid-tether' + ENV.rootURL = '/liquid-tether' } return ENV; diff --git a/tests/helpers/module-for-acceptance.js b/tests/helpers/module-for-acceptance.js index 8c8b74e..76996fd 100644 --- a/tests/helpers/module-for-acceptance.js +++ b/tests/helpers/module-for-acceptance.js @@ -1,23 +1,23 @@ import { module } from 'qunit'; +import Ember from 'ember'; import startApp from '../helpers/start-app'; import destroyApp from '../helpers/destroy-app'; +const { RSVP: { Promise } } = Ember; + export default function(name, options = {}) { module(name, { beforeEach() { this.application = startApp(); if (options.beforeEach) { - options.beforeEach.apply(this, arguments); + return options.beforeEach.apply(this, arguments); } }, afterEach() { - if (options.afterEach) { - options.afterEach.apply(this, arguments); - } - - destroyApp(this.application); + let afterEach = options.afterEach && options.afterEach.apply(this, arguments); + return Promise.resolve(afterEach).then(() => destroyApp(this.application)); } }); } diff --git a/tests/index.html b/tests/index.html index 64eabb4..4cc6add 100644 --- a/tests/index.html +++ b/tests/index.html @@ -10,9 +10,9 @@ {{content-for "head"}} {{content-for "test-head"}} - - - + + +