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 {isBlank} from 'ember-utils';
|
||||||
import on from 'ember-evented/on';
|
import on from 'ember-evented/on';
|
||||||
import run from 'ember-runloop';
|
import run from 'ember-runloop';
|
||||||
|
|
||||||
import LiquidTether from 'liquid-tether/components/liquid-tether';
|
|
||||||
import {invokeAction} from 'ember-invoke-action';
|
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({
|
model: null,
|
||||||
to: 'fullscreen-modal',
|
modifier: null,
|
||||||
target: 'document.body',
|
|
||||||
targetModifier: 'visible',
|
|
||||||
targetAttachment: 'top center',
|
|
||||||
attachment: 'top center',
|
|
||||||
tetherClass: 'fullscreen-modal',
|
|
||||||
overlayClass: 'fullscreen-modal-background',
|
|
||||||
modalPath: 'unknown',
|
|
||||||
|
|
||||||
dropdown: injectService(),
|
dropdown: injectService(),
|
||||||
|
|
||||||
init() {
|
modalPath: computed('modal', function () {
|
||||||
this._super(...arguments);
|
return `modals/${this.get('modal') || 'unknown'}`;
|
||||||
this.modalPath = `modals/${this.get('modal')}`;
|
}),
|
||||||
},
|
|
||||||
|
|
||||||
setTetherClass: on('init', function () {
|
modalClasses: computed('modifiers', function () {
|
||||||
let tetherClass = this.get('tetherClass');
|
let modalClass = 'fullscreen-modal';
|
||||||
let modifiers = (this.get('modifier') || '').split(' ');
|
let modifiers = (this.get('modifier') || '').split(' ');
|
||||||
let tetherClasses = emberA([tetherClass]);
|
let modalClasses = emberA([modalClass]);
|
||||||
|
|
||||||
modifiers.forEach((modifier) => {
|
modifiers.forEach((modifier) => {
|
||||||
if (!isBlank(modifier)) {
|
if (!isBlank(modifier)) {
|
||||||
let className = `${tetherClass}-${modifier}`;
|
let className = `${modalClass}-${modifier}`;
|
||||||
tetherClasses.push(className);
|
modalClasses.push(className);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.set('tetherClass', tetherClasses.join(' '));
|
return modalClasses.join(' ');
|
||||||
}),
|
}),
|
||||||
|
|
||||||
closeDropdowns: on('didInsertElement', function () {
|
closeDropdowns: on('didInsertElement', function () {
|
||||||
|
@ -56,9 +48,7 @@ const FullScreenModalComponent = LiquidTether.extend({
|
||||||
return invokeAction(this, 'close');
|
return invokeAction(this, 'close');
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
return RSVP.resolve();
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
confirm() {
|
confirm() {
|
||||||
|
@ -66,9 +56,7 @@ const FullScreenModalComponent = LiquidTether.extend({
|
||||||
return invokeAction(this, 'confirm');
|
return invokeAction(this, 'confirm');
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
return RSVP.resolve();
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
clickOverlay() {
|
clickOverlay() {
|
||||||
|
|
|
@ -5,8 +5,16 @@
|
||||||
/* Fullscreen Modal
|
/* Fullscreen Modal
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
.fullscreen-modal-liquid-target {
|
/* explicit modal container so that background and content can be animated individually */
|
||||||
overflow-y: auto;
|
.fullscreen-modal-container {
|
||||||
|
visibility: hidden;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10000;
|
||||||
|
overflow: auto;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,15 +24,18 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 0;
|
z-index: 50;
|
||||||
|
height: 100vh;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen-modal {
|
.fullscreen-modal {
|
||||||
padding-top: 30px;
|
position: relative;
|
||||||
padding-bottom: 30px;
|
z-index: 100;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
max-width: 550px;
|
max-width: 550px;
|
||||||
width: 100%;
|
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -48,12 +59,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen-modal-action {
|
.fullscreen-modal-action {
|
||||||
padding: 60px 0 30px;
|
margin: 60px auto 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.fullscreen-modal-action {
|
.fullscreen-modal-action {
|
||||||
padding: 30px 0;
|
margin: 30px auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,13 @@
|
||||||
<div class="liquid-tether-overlay {{overlayClass}} {{if on-overlay-click 'clickable'}}" {{action 'clickOverlay'}}></div>
|
{{#liquid-wormhole class="fullscreen-modal-container"}}
|
||||||
<div class="liquid-tether {{tetherClass}}">
|
<div class="fullscreen-modal-background" {{action "clickOverlay"}}></div>
|
||||||
{{#if hasBlock}}
|
<div class={{modalClasses}}>
|
||||||
{{yield}}
|
{{#if hasBlock}}
|
||||||
{{else}}
|
{{yield}}
|
||||||
{{component modalPath
|
{{else}}
|
||||||
model=model
|
{{component modalPath
|
||||||
confirm=(action 'confirm')
|
model=model
|
||||||
closeModal=(action 'close')}}
|
confirm=(action 'confirm')
|
||||||
{{/if}}
|
closeModal=(action 'close')}}
|
||||||
</div>
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
{{/liquid-wormhole}}
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
import { target } from 'liquid-tether';
|
|
||||||
|
|
||||||
export default function () {
|
export default function () {
|
||||||
this.transition(
|
this.transition(
|
||||||
target('fullscreen-modal'),
|
this.hasClass('fullscreen-modal-container'),
|
||||||
this.toValue(({isVisible}) => isVisible),
|
this.toValue(true),
|
||||||
// this.use('tether', [modal options], [background options])
|
this.use('fade', {duration: 150}),
|
||||||
this.use('tether', ['fade', {duration: 150}], ['fade', {duration: 150}]),
|
this.reverse('explode', {
|
||||||
this.reverse('tether', ['fade', {duration: 80}], ['fade', {duration: 150}])
|
pick: '.fullscreen-modal',
|
||||||
|
use: ['fade', {duration: 80}]
|
||||||
|
}, {
|
||||||
|
use: ['fade', {duration: 150}]
|
||||||
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
this.transition(
|
this.transition(
|
||||||
|
|
|
@ -85,7 +85,7 @@
|
||||||
"grunt-shell": "1.3.1",
|
"grunt-shell": "1.3.1",
|
||||||
"jquery-deparam": "0.5.2",
|
"jquery-deparam": "0.5.2",
|
||||||
"liquid-fire": "0.26.1",
|
"liquid-fire": "0.26.1",
|
||||||
"liquid-tether": "1.1.1",
|
"liquid-wormhole": "2.0.0-beta.2",
|
||||||
"loader.js": "4.0.11",
|
"loader.js": "4.0.11",
|
||||||
"lodash": "4.16.4",
|
"lodash": "4.16.4",
|
||||||
"matchdep": "1.0.1",
|
"matchdep": "1.0.1",
|
||||||
|
|
Loading…
Reference in New Issue