Switch dummy app/tests to use routes instead of query params

tests/acceptance/modal-dialog-test.js

@@ -14,7 +14,6 @@ module('Acceptance: Display Modal Dialogs', {
   async beforeEach() {
     application = startApp();
     await visit('/');
-    await click((findContains('button', 'Change to modal-dialog')));
   },
 
   afterEach() {

tests/acceptance/tether-dialog-test.js

@@ -12,7 +12,7 @@ const dialogCloseButton = [dialogSelector, 'button'].join(' ');
 module('Acceptance: Display Tether Dialogs', {
   async beforeEach() {
     application = startApp();
-    await visit('/');
+    await visit('/tether-dialog');
   },
 
   afterEach() {

tests/dummy/app/controllers/application.js → tests/dummy/app/controllers/index.js

@@ -2,8 +2,6 @@ import Ember from 'ember';
 const { get, set } = Ember;
 
 export default Ember.Controller.extend({
-  queryParams: ['activeComponent'],
-  activeComponent: 'tether-dialog',
   isShowingBasic: false,
   isShowingTranslucent: false,
   isShowingTranslucentWithCallback: false,

tests/dummy/app/controllers/tether-dialog.js

@@ -0,0 +1,130 @@
+import Ember from 'ember';
+const { get, set } = Ember;
+
+export default Ember.Controller.extend({
+  isShowingBasic: false,
+  isShowingTranslucent: false,
+  isShowingTranslucentWithCallback: false,
+  isShowingWithoutOverlay: false,
+  isShowingWithoutOverlayClickOutsideToClose: false,
+  isShowingWithoutOverlayClickOutsideToCloseAnotherOne: false,
+  isShowingCustomStyles: false,
+  isShowingTargetSelector: false,
+  isShowingTargetElement: false,
+  isShowingSubclassed: false,
+  isShowingInPlace: false,
+  isInPlace: true,
+  isShowingCenteredScrolling: false,
+  isShowingElementCenterModal: false,
+  exampleTargetAttachment: 'middle left',
+  exampleAttachment: 'middle right',
+  customContainerClassNames: 'custom-styles-modal-container',
+  nextAttachment(val) {
+    switch (val) {
+      case 'middle right':
+        return 'bottom center';
+      case 'bottom center':
+        return 'middle left';
+      case 'middle left':
+        return 'top center';
+      case 'top center':
+        return 'middle right';
+    }
+    return false;
+  },
+  actions: {
+    toggleActiveComponent() {
+      if (get(this, 'activeComponent') === 'modal-dialog') {
+        set(this, 'activeComponent', 'tether-dialog');
+      } else {
+        set(this, 'activeComponent', 'modal-dialog');
+      }
+    },
+    toggleBasic() {
+      this.toggleProperty('isShowingBasic');
+    },
+    toggleTranslucent() {
+      this.toggleProperty('isShowingTranslucent');
+    },
+    toggleTranslucentWithCallback() {
+      this.toggleProperty('isShowingTranslucentWithCallback');
+    },
+    toggleWithoutOverlay() {
+      this.toggleProperty('isShowingWithoutOverlay');
+    },
+    toggleWithoutOverlayClickOutsideToClose() {
+      this.toggleProperty('isShowingWithoutOverlayClickOutsideToClose');
+    },
+    toggleWithoutOverlayClickOutsideToCloseAnotherOne() {
+      this.toggleProperty('isShowingWithoutOverlayClickOutsideToCloseAnotherOne');
+    },
+    toggleCustomStyles() {
+      this.toggleProperty('isShowingCustomStyles');
+    },
+    toggleTargetSelector() {
+      if (this.get('isShowingTargetSelector')) {
+        let newTargetAttachment = this.nextAttachment(this.get('exampleTargetAttachment'));
+        let newAttachment = this.nextAttachment(this.get('exampleAttachment'));
+        this.set('exampleTargetAttachment', newTargetAttachment);
+        this.set('exampleAttachment', newAttachment);
+        if (newTargetAttachment !== 'middle left') {
+          return;
+        }
+      }
+      this.toggleProperty('isShowingTargetSelector');
+    },
+    toggleTargetElement() {
+      if (this.get('isShowingTargetElement')) {
+        let newTargetAttachment = this.nextAttachment(this.get('exampleTargetAttachment'));
+        let newAttachment = this.nextAttachment(this.get('exampleAttachment'));
+        this.set('exampleTargetAttachment', newTargetAttachment);
+        this.set('exampleAttachment', newAttachment);
+        if (newTargetAttachment !== 'middle left') {
+          return;
+        }
+      }
+      this.toggleProperty('isShowingTargetElement');
+    },
+    toggleSubclassed() {
+      this.toggleProperty('isShowingSubclassed');
+    },
+    toggleInPlace() {
+      this.toggleProperty('isShowingInPlace');
+    },
+    toggleIsInPlace() {
+      this.toggleProperty('isInPlace');
+    },
+    toggleCenteredScrolling() {
+      this.toggleProperty('isShowingCenteredScrolling');
+
+      if (this.get('isShowingCenteredScrolling')) {
+        Ember.$('#modal-overlays').addClass('active');
+        Ember.$('body').addClass('centered-modal-showing');
+      } else {
+        Ember.$('#modal-overlays').removeClass('active');
+        Ember.$('body').removeClass('centered-modal-showing');
+      }
+    },
+    toggleElementCenterModal() {
+      this.toggleProperty('isShowingElementCenterModal');
+      if (this.get('isShowingElementCenterModal')) {
+        this.set('targetAttachment', 'elementCenter');
+        this.set('exampleTargetAttachment', 'elementCenter');
+        this.set('exampleAttachment', 'elementCenter');
+      }
+    },
+    closeTargetSelector() {
+      this.set('isShowingTargetSelector', false);
+      this.set('exampleTargetAttachment', 'middle left');
+      this.set('exampleAttachment', 'middle right');
+    },
+    closeTargetElement() {
+      this.set('isShowingTargetElement', false);
+      this.set('exampleTargetAttachment', 'middle left');
+      this.set('exampleAttachment', 'middle right');
+    },
+    clickedTranslucentOverlay() {
+      window.onClickOverlayCallbackCalled = true;
+    }
+  }
+});

tests/dummy/app/router.js

@@ -7,6 +7,7 @@ const Router = Ember.Router.extend({
 });
 
 Router.map(function() {
+  this.route('tether-dialog'); //deprecated
 });
 
 export default Router;

tests/dummy/app/styles/app.scss

@@ -5,6 +5,29 @@
 body {
   font-family: sans-serif;
   font-size: 12px;
+  margin: 0;
+}
+.ApplicationRoute {
+  margin: 20px;
+  &-summary {
+    font-size: 1.1rem;
+    margin-bottom: 10px;
+  }
+  &-nav {
+    margin-bottom: 20px;
+    padding: 0;
+  }
+  &-nav > li {
+    display: inline-block;
+    &::after {
+      content: ' | ';
+    }
+    &:last-child {
+      &::after {
+        content: '';
+      }
+    }
+  }
 }
 
 .example {

tests/dummy/app/templates/application.hbs

@@ -1,21 +1,11 @@
-{{#if (eq activeComponent 'modal-dialog')}}
-  <h1 id="title">Modal Dialog</h1>
-  <p>
-    Ember Modal Dialog provides two different modal components. You are
-    currently looking at examples for {{activeComponent}}.
-
-    <button {{action 'toggleActiveComponent'}}>Change to tether-dialog</button>
-  </p>
-
-  {{partial 'modal-dialog'}}
-{{else}}
-  <h1 id="title">Tether Dialog</h1>
-  <p>
-    Ember Modal Dialog provides two different modal components. You are
-    currently looking at examples for {{activeComponent}}.
-
-    <button {{action 'toggleActiveComponent'}}>Change to modal-dialog</button>
+<div class="ApplicationRoute">
+  <p class="ApplicationRoute-summary">
+    Ember Modal Dialog provides two different modal components.
   </p>
+  <ul class="ApplicationRoute-nav">
+    <li>{{#link-to 'index'}}modal-dialog{{/link-to}}</li>
+    <li>{{#link-to 'tether-dialog'}}tether-dialog{{/link-to}}</li>
+  </ul>
 
-  {{partial 'tether-dialog'}}
-{{/if}}
+  {{outlet}}
+</div>

tests/dummy/app/templates/-modal-dialog.hbs → tests/dummy/app/templates/index.hbs

@@ -1,3 +1,13 @@
+<h1 id="title">Basic examples of the <code>modal-dialog</code> component</h1>
+<p>
+  This component uses <code>ember-wormhole</code> to relocate the dialog in the
+  DOM to better sit in a layer above the rest of your document.
+</p>
+<p>
+  It requires no additional dependencies because <code>ember-wormhole</code> is included with
+  this addon.
+</p>
+
 <div class='example' id='example-basic'>
 <h2>Basic</h2>
   <button {{action 'toggleBasic'}}>Do It</button>

tests/dummy/app/templates/-tether-dialog.hbs → tests/dummy/app/templates/tether-dialog.hbs

@@ -1,3 +1,12 @@
+<h1 id="title">Examples of the <code>tether-dialog</code> component</h1>
+<p>
+  This component uses <code>ember-tether</code> to be positioned relative
+  to the <code>target</code> element and sit in a layer above the rest of the
+  document. It requires that you install
+  <a href="https://github.com/yapplabs/ember-tether"><code>ember-tether</code></a>
+  into your app.
+</p>
+
 <div class='example' id='example-basic'>
 <h2>Basic</h2>
   <button {{action 'toggleBasic'}}>Do It</button>