This allows us to use a single service implementation to augment multiple modal-wrappers instead of bootstrapping the legacy frontend there on every page load.pull/6380/head
parent
0ebf2ef731
commit
946758bb35
@ -1,110 +0,0 @@ |
|||||||
// -- copyright
|
|
||||||
// OpenProject is a project management system.
|
|
||||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
|
||||||
//
|
|
||||||
// This program is free software; you can redistribute it and/or
|
|
||||||
// modify it under the terms of the GNU General Public License version 3.
|
|
||||||
//
|
|
||||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
|
||||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
|
||||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
|
||||||
//
|
|
||||||
// This program is free software; you can redistribute it and/or
|
|
||||||
// modify it under the terms of the GNU General Public License
|
|
||||||
// as published by the Free Software Foundation; either version 2
|
|
||||||
// of the License, or (at your option) any later version.
|
|
||||||
//
|
|
||||||
// This program is distributed in the hope that it will be useful,
|
|
||||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
// GNU General Public License for more details.
|
|
||||||
//
|
|
||||||
// You should have received a copy of the GNU General Public License
|
|
||||||
// along with this program; if not, write to the Free Software
|
|
||||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
|
||||||
//
|
|
||||||
// See doc/COPYRIGHT.rdoc for more details.
|
|
||||||
// ++
|
|
||||||
|
|
||||||
import {openprojectLegacyModule} from "../../../openproject-legacy-app"; |
|
||||||
|
|
||||||
export class ModalWrapperController { |
|
||||||
public activationLinkId:string; |
|
||||||
public iframeSelector = '.iframe-target-wrapper'; |
|
||||||
|
|
||||||
private modalBody:string; |
|
||||||
public modalClassName = 'ngdialog-theme-openproject'; |
|
||||||
|
|
||||||
protected opModalService:any; |
|
||||||
protected dynamicContentModal:any; |
|
||||||
|
|
||||||
constructor(protected $element:ng.IAugmentedJQuery, |
|
||||||
protected $attrs:ng.IAttributes) { |
|
||||||
|
|
||||||
window.OpenProject.pluginContext.valuesPromise().then((context) => { |
|
||||||
this.opModalService = context.services.opModalService; |
|
||||||
this.dynamicContentModal = context.classes.modals.dynamicContent; |
|
||||||
|
|
||||||
// Find activation link
|
|
||||||
var activationLink = $element.find('.modal-wrapper--activation-link'); |
|
||||||
if (this.activationLinkId) { |
|
||||||
activationLink = jQuery(this.activationLinkId); |
|
||||||
} |
|
||||||
|
|
||||||
// Set modal class name
|
|
||||||
if ($attrs['modalClassName']) { |
|
||||||
this.modalClassName = $attrs['modalClassName']; |
|
||||||
} |
|
||||||
|
|
||||||
// Set template from wrapped element
|
|
||||||
const wrappedElement = $element.find('.modal-wrapper--content'); |
|
||||||
this.modalBody = wrappedElement.html(); |
|
||||||
|
|
||||||
if ($attrs['iframeUrl']) { |
|
||||||
this.appendIframe($attrs['iframeUrl']); |
|
||||||
} |
|
||||||
|
|
||||||
if (!!$attrs['initialize']) { |
|
||||||
this.initialize(); |
|
||||||
} |
|
||||||
else { |
|
||||||
activationLink.click(() => this.initialize()); |
|
||||||
} |
|
||||||
|
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
public initialize() { |
|
||||||
let modal = this.opModalService.show(this.dynamicContentModal, { modalBody: this.modalBody, modalClassName: this.modalClassName }); |
|
||||||
modal.openingEvent.subscribe((modal:any) => { |
|
||||||
//HACK: need to trigger an angular digest in order to have the
|
|
||||||
//modal template be evaluated. Without it, the onInit will not be run.
|
|
||||||
jQuery('.op-modal--modal-container').click(); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
private appendIframe(url:string) { |
|
||||||
let subdom = angular.element(this.modalBody); |
|
||||||
let iframe = angular.element('<iframe frameborder="0" height="400" allowfullscreen>></iframe>'); |
|
||||||
iframe.attr('src', url); |
|
||||||
|
|
||||||
subdom.find(this.iframeSelector).append(iframe); |
|
||||||
|
|
||||||
this.modalBody = subdom.html(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function modalWrapper():any { |
|
||||||
return { |
|
||||||
restrict: 'E', |
|
||||||
scope: { |
|
||||||
modalParams: '=', |
|
||||||
activationLinkId: '=?' |
|
||||||
}, |
|
||||||
controller: ModalWrapperController, |
|
||||||
controllerAs: '$ctrl', |
|
||||||
bindToController: true, |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
openprojectLegacyModule.directive('modalWrapper', modalWrapper); |
|
@ -0,0 +1,104 @@ |
|||||||
|
// -- copyright
|
||||||
|
// OpenProject is a project management system.
|
||||||
|
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||||
|
//
|
||||||
|
// This program is free software; you can redistribute it and/or
|
||||||
|
// modify it under the terms of the GNU General Public License version 3.
|
||||||
|
//
|
||||||
|
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||||
|
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||||
|
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||||
|
//
|
||||||
|
// This program is free software; you can redistribute it and/or
|
||||||
|
// modify it under the terms of the GNU General Public License
|
||||||
|
// as published by the Free Software Foundation; either version 2
|
||||||
|
// of the License, or (at your option) any later version.
|
||||||
|
//
|
||||||
|
// This program is distributed in the hope that it will be useful,
|
||||||
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
// GNU General Public License for more details.
|
||||||
|
//
|
||||||
|
// You should have received a copy of the GNU General Public License
|
||||||
|
// along with this program; if not, write to the Free Software
|
||||||
|
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||||
|
//
|
||||||
|
// See doc/COPYRIGHT.rdoc for more details.
|
||||||
|
// ++
|
||||||
|
|
||||||
|
|
||||||
|
import {Inject, Injectable} from "@angular/core"; |
||||||
|
import {DOCUMENT} from "@angular/common"; |
||||||
|
import {DynamicContentModal} from "core-components/modals/modal-wrapper/dynamic-content.modal"; |
||||||
|
import {OpModalService} from "core-components/op-modals/op-modal.service"; |
||||||
|
|
||||||
|
const iframeSelector = '.iframe-target-wrapper'; |
||||||
|
|
||||||
|
@Injectable() |
||||||
|
export class ModalWrapperAugmentService { |
||||||
|
|
||||||
|
constructor(@Inject(DOCUMENT) protected documentElement:Document, |
||||||
|
protected opModalService:OpModalService) { |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Create initial listeners for Rails-rendered modals |
||||||
|
*/ |
||||||
|
public setupListener() { |
||||||
|
const matches = this.documentElement.querySelectorAll('section[data-augmented-model-wrapper]'); |
||||||
|
for (let i = 0; i < matches.length; ++i) { |
||||||
|
this.wrapElement(jQuery(matches[i])); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Wrap a section[data-augmented-modal-wrapper] element |
||||||
|
*/ |
||||||
|
public wrapElement(element:JQuery) { |
||||||
|
// Find activation link
|
||||||
|
const activationLink = element.find('.modal-wrapper--activation-link'); |
||||||
|
const initializeNow = element.data('modalInitializeNow'); |
||||||
|
|
||||||
|
if (initializeNow) { |
||||||
|
this.show(element); |
||||||
|
} else { |
||||||
|
activationLink.click((evt:JQueryEventObject) => { |
||||||
|
this.show(element); |
||||||
|
evt.preventDefault(); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private show(element:JQuery) { |
||||||
|
// Set modal class name
|
||||||
|
const modalClassName = element.data('modalClassName'); |
||||||
|
// Append CSP-whitelisted IFrame for onboarding
|
||||||
|
const iframeUrl = element.data('modalIframeUrl'); |
||||||
|
|
||||||
|
// Set template from wrapped element
|
||||||
|
const wrappedElement = element.find('.modal-wrapper--content'); |
||||||
|
let modalBody = wrappedElement.html(); |
||||||
|
|
||||||
|
if (iframeUrl) { |
||||||
|
modalBody = this.appendIframe(modalBody, iframeUrl); |
||||||
|
} |
||||||
|
|
||||||
|
this.opModalService.show( |
||||||
|
DynamicContentModal, |
||||||
|
{ |
||||||
|
modalBody: modalBody, |
||||||
|
modalClassName: modalClassName |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
private appendIframe(body:string, url:string) { |
||||||
|
let subdom = jQuery(body); |
||||||
|
let iframe = jQuery('<iframe frameborder="0" height="400" allowfullscreen>></iframe>'); |
||||||
|
iframe.attr('src', url); |
||||||
|
|
||||||
|
subdom.find(iframeSelector).append(iframe); |
||||||
|
|
||||||
|
return subdom.html(); |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue