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 🎉
This commit is contained in:
parent
1f36c94109
commit
7e4d385de8
|
@ -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() {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<div class="liquid-tether-overlay {{overlayClass}} {{if on-overlay-click 'clickable'}}" {{action 'clickOverlay'}}></div>
|
||||
<div class="liquid-tether {{tetherClass}}">
|
||||
{{#liquid-wormhole class="fullscreen-modal-container"}}
|
||||
<div class="fullscreen-modal-background" {{action "clickOverlay"}}></div>
|
||||
<div class={{modalClasses}}>
|
||||
{{#if hasBlock}}
|
||||
{{yield}}
|
||||
{{else}}
|
||||
|
@ -9,3 +10,4 @@
|
|||
closeModal=(action 'close')}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/liquid-wormhole}}
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue