Ghost/core/client/app/components/gh-fullscreen-modal.js
Kevin Ansfield eb1cf51bf6 Avoid use of this.attrs for closure actions
no issue
- `this.attrs` is a glimmer-component thing (which doesn't exist in Ghost yet), to avoid confusion we should avoid using it
- https://locks.svbtle.com/to-attrs-or-not-to-attrs
- https://github.com/cibernox/ember-power-select/issues/233#issuecomment-170352572
2016-04-09 10:46:19 +01:00

83 lines
2.0 KiB
JavaScript

import Ember from 'ember';
import LiquidTether from 'liquid-tether/components/liquid-tether';
const {
RSVP: {Promise},
inject: {service},
isBlank,
on,
run
} = Ember;
const emberA = Ember.A;
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',
dropdown: service(),
init() {
this._super(...arguments);
this.modalPath = `modals/${this.get('modal')}`;
},
setTetherClass: on('init', function () {
let tetherClass = this.get('tetherClass');
let modifiers = (this.get('modifier') || '').split(' ');
let tetherClasses = emberA([tetherClass]);
modifiers.forEach((modifier) => {
if (!isBlank(modifier)) {
let className = `${tetherClass}-${modifier}`;
tetherClasses.push(className);
}
});
this.set('tetherClass', tetherClasses.join(' '));
}),
closeDropdowns: on('didInsertElement', function () {
run.schedule('afterRender', this, function () {
this.get('dropdown').closeDropdowns();
});
}),
actions: {
close() {
if (this.get('close')) {
return this.get('close')();
}
return new Promise((resolve) => {
resolve();
});
},
confirm() {
if (this.get('confirm')) {
return this.get('confirm')();
}
return new Promise((resolve) => {
resolve();
});
},
clickOverlay() {
this.send('close');
}
}
});
FullScreenModalComponent.reopenClass({
positionalParams: ['modal']
});
export default FullScreenModalComponent;