This repository has been archived on 2023-03-18. You can view files and clone it, but cannot push or open issues or pull requests.
osr-discourse-src/app/assets/javascripts/discourse/lib/show-modal.js.es6

76 lines
2.4 KiB
JavaScript

import { isAppleDevice } from 'discourse/lib/utilities';
export default function(name, opts) {
opts = opts || {};
const container = Discourse.__container__;
// iOS 11 -> 11.1 have broken INPUTs on position fixed
// if for any reason there is a body higher than 100% behind them.
// What happens is that when INPUTs gets focus they shift the body
// which ends up moving the cursor to an invisible spot
// this makes the login experience on iOS painful, user thinks it is broken.
//
// Also, very little value in showing main outlet and header on iOS
// anyway, so just hide it.
if (isAppleDevice()) {
let pos = $(window).scrollTop();
$(window)
.off('show.bs.modal.ios-hacks')
.on('show.bs.modal.ios-hacks', () => {
$('#main-outlet, header').hide();
});
$(window)
.off('hide.bs.modal.ios-hacks')
.on('hide.bs.modal.ios-hacks', () => {
$('#main-outlet, header').show();
$(window).scrollTop(pos);
$(window).off('hide.bs.modal.ios-hacks');
$(window).off('show.bs.modal.ios-hacks');
});
}
// We use the container here because modals are like singletons
// in Discourse. Only one can be shown with a particular state.
const route = container.lookup('route:application');
const modalController = route.controllerFor('modal');
modalController.set('modalClass', opts.modalClass);
const controllerName = opts.admin ? `modals/${name}` : name;
let controller = container.lookup('controller:' + controllerName);
const templateName = opts.templateName || Ember.String.dasherize(name);
const renderArgs = { into: 'modal', outlet: 'modalBody'};
if (controller) {
renderArgs.controller = controllerName;
} else {
// use a basic controller
renderArgs.controller = 'basic-modal-body';
controller = container.lookup(`controller:${renderArgs.controller}`);
}
if (opts.addModalBodyView) {
renderArgs.view = 'modal-body';
}
const modalName = `modal/${templateName}`;
const fullName = opts.admin ? `admin/templates/${modalName}` : modalName;
route.render(fullName, renderArgs);
if (opts.title) {
modalController.set('title', I18n.t(opts.title));
}
controller.set('modal', modalController);
const model = opts.model;
if (model) { controller.set('model', model); }
if (controller.onShow) { controller.onShow(); }
controller.set('flashMessage', null);
return controller;
};