refactor gh-fullscreen-modal component to use liquid-wormhole directly (#281)

no issue

- remove `liquid-tether` dependency
- add `liquid-wormhole` dependency (previously a dependency of liquid-tether)
- refactor `gh-fullscreen-modal` to simplify and use `liquid-wormhole` directly instead of `liquid-tether` as we don't need the positioning ability that `liquid-tether` provides
- fixes broken View/Component tree in Ember Inspector 🎉

app/components/gh-fullscreen-modal.js

@@ -4,42 +4,34 @@ import {A as emberA} from 'ember-array/utils';
 import {isBlank} from 'ember-utils';
 import on from 'ember-evented/on';
 import run from 'ember-runloop';
-
-import LiquidTether from 'liquid-tether/components/liquid-tether';
 import {invokeAction} from 'ember-invoke-action';
+import computed from 'ember-computed';
+import Component from 'ember-component';
 
-const {Promise} = RSVP;
+const FullScreenModalComponent = Component.extend({
 
-const FullScreenModalComponent = LiquidTether.extend({
-    to: 'fullscreen-modal',
-    target: 'document.body',
-    targetModifier: 'visible',
-    targetAttachment: 'top center',
-    attachment: 'top center',
-    tetherClass: 'fullscreen-modal',
-    overlayClass: 'fullscreen-modal-background',
-    modalPath: 'unknown',
+    model: null,
+    modifier: null,
 
     dropdown: injectService(),
 
-    init() {
-        this._super(...arguments);
-        this.modalPath = `modals/${this.get('modal')}`;
-    },
+    modalPath: computed('modal', function () {
+        return `modals/${this.get('modal') || 'unknown'}`;
+    }),
 
-    setTetherClass: on('init', function () {
-        let tetherClass = this.get('tetherClass');
+    modalClasses: computed('modifiers', function () {
+        let modalClass = 'fullscreen-modal';
         let modifiers = (this.get('modifier') || '').split(' ');
-        let tetherClasses = emberA([tetherClass]);
+        let modalClasses = emberA([modalClass]);
 
         modifiers.forEach((modifier) => {
             if (!isBlank(modifier)) {
-                let className = `${tetherClass}-${modifier}`;
-                tetherClasses.push(className);
+                let className = `${modalClass}-${modifier}`;
+                modalClasses.push(className);
             }
         });
 
-        this.set('tetherClass', tetherClasses.join(' '));
+        return modalClasses.join(' ');
     }),
 
     closeDropdowns: on('didInsertElement', function () {
@@ -56,9 +48,7 @@ const FullScreenModalComponent = LiquidTether.extend({
                 return invokeAction(this, 'close');
             }
 
-            return new Promise((resolve) => {
-                resolve();
-            });
+            return RSVP.resolve();
         },
 
         confirm() {
@@ -66,9 +56,7 @@ const FullScreenModalComponent = LiquidTether.extend({
                 return invokeAction(this, 'confirm');
             }
 
-            return new Promise((resolve) => {
-                resolve();
-            });
+            return RSVP.resolve();
         },
 
         clickOverlay() {

app/styles/components/modals.css

@@ -5,8 +5,16 @@
 /* Fullscreen Modal
 /* ---------------------------------------------------------- */
 
-.fullscreen-modal-liquid-target {
-    overflow-y: auto;
+/* explicit modal container so that background and content can be animated individually */
+.fullscreen-modal-container {
+    visibility: hidden;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    overflow: auto;
     height: 100vh;
 }
 
@@ -16,15 +24,18 @@
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 0;
+    z-index: 50;
+    height: 100vh;
     background: rgba(0, 0, 0, 0.6);
 }
 
 .fullscreen-modal {
-    padding-top: 30px;
-    padding-bottom: 30px;
+    position: relative;
+    z-index: 100;
+    margin: auto;
+    margin-top: 30px;
+    margin-bottom: 30px;
     max-width: 550px;
-    width: 100%;
     pointer-events: auto;
 }
 
@@ -48,12 +59,12 @@
 }
 
 .fullscreen-modal-action {
-    padding: 60px 0 30px;
+    margin: 60px auto 30px;
 }
 
 @media (max-width: 900px) {
     .fullscreen-modal-action {
-        padding: 30px 0;
+        margin: 30px auto;
     }
 }
 

app/templates/components/gh-fullscreen-modal.hbs

@@ -1,11 +1,13 @@
-<div class="liquid-tether-overlay {{overlayClass}} {{if on-overlay-click 'clickable'}}" {{action 'clickOverlay'}}></div>
-<div class="liquid-tether {{tetherClass}}">
-    {{#if hasBlock}}
-      {{yield}}
-    {{else}}
-      {{component modalPath
-                  model=model
-                  confirm=(action 'confirm')
-                  closeModal=(action 'close')}}
-    {{/if}}
-</div>
+{{#liquid-wormhole class="fullscreen-modal-container"}}
+    <div class="fullscreen-modal-background" {{action "clickOverlay"}}></div>
+    <div class={{modalClasses}}>
+        {{#if hasBlock}}
+          {{yield}}
+        {{else}}
+          {{component modalPath
+                      model=model
+                      confirm=(action 'confirm')
+                      closeModal=(action 'close')}}
+        {{/if}}
+    </div>
+{{/liquid-wormhole}}

app/transitions.js

@@ -1,12 +1,14 @@
-import { target } from 'liquid-tether';
-
 export default function () {
     this.transition(
-        target('fullscreen-modal'),
-        this.toValue(({isVisible}) => isVisible),
-        // this.use('tether', [modal options], [background options])
-        this.use('tether', ['fade', {duration: 150}], ['fade', {duration: 150}]),
-        this.reverse('tether', ['fade', {duration: 80}], ['fade', {duration: 150}])
+        this.hasClass('fullscreen-modal-container'),
+        this.toValue(true),
+        this.use('fade', {duration: 150}),
+        this.reverse('explode', {
+            pick: '.fullscreen-modal',
+            use: ['fade', {duration: 80}]
+        }, {
+            use: ['fade', {duration: 150}]
+        })
     );
 
     this.transition(

package.json

@@ -85,7 +85,7 @@
     "grunt-shell": "1.3.1",
     "jquery-deparam": "0.5.2",
     "liquid-fire": "0.26.1",
-    "liquid-tether": "1.1.1",
+    "liquid-wormhole": "2.0.0-beta.2",
     "loader.js": "4.0.11",
     "lodash": "4.16.4",
     "matchdep": "1.0.1",