Ghost/core/client/app/components/gh-fullscreen-modal.js
2016-01-19 07:03:27 -06:00

83 lines
1.9 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.attrs.close) {
return this.attrs.close();
}
return new Promise((resolve) => {
resolve();
});
},
confirm() {
if (this.attrs.confirm) {
return this.attrs.confirm();
}
return new Promise((resolve) => {
resolve();
});
},
clickOverlay() {
this.send('close');
}
}
});
FullScreenModalComponent.reopenClass({
positionalParams: ['modal']
});
export default FullScreenModalComponent;