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
Oliver Günther
6 years ago
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