yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor and closing by pressing Escape now works

Browse Source
This commit is contained in:
Jesper Møller Jensen
2022-08-02 14:46:46 +02:00
parent 2f5c93e182
commit acd90e49ca
3 changed files with 12 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts
View File

@@ -44,8 +44,8 @@ class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement)
private _open() {
const modalHandler = this._modalService?.openSidebar('umb-modal-content-picker');
modalHandler?.onClose().then((result) => {
console.log('result', result);
modalHandler?.onClose.then(() => {
console.log('Closed the modal for:', this);
});
}

13
src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts
View File

@@ -5,10 +5,6 @@ export class UmbModalService {
private _modals: BehaviorSubject<Array<UmbModalHandler>> = new BehaviorSubject(<Array<UmbModalHandler>>[]);
public readonly modals: Observable<Array<UmbModalHandler>> = this._modals.asObservable();
// public createModal(modalHandler: UmbModalHandler): void {
// this._modals.next([...this._modals.getValue(), modalHandler]);
// }
public openSidebar(elementName: string): UmbModalHandler {
return this._open(elementName, 'uui-modal-sidebar');
}
@@ -19,17 +15,12 @@ export class UmbModalService {
private _open(elementName: string, modalElementName: string): UmbModalHandler {
const modalHandler = new UmbModalHandler(elementName, modalElementName);
modalHandler.onClose().then(() => this._close(modalHandler));
modalHandler.onClose.then(() => this._close(modalHandler));
this._modals.next([...this._modals.getValue(), modalHandler]);
return modalHandler;
}
private _close(modalHandler: UmbModalHandler) {
console.log('close', modalHandler);
//TODO clicking escape doesn't trigger the cleanup
modalHandler.modal.close();
modalHandler.modal.addEventListener('close-end', () =>
this._modals.next(this._modals.getValue().filter((modal) => modal.key !== modalHandler.key))
);
this._modals.next(this._modals.getValue().filter((modal) => modal.key !== modalHandler.key));
}
}

13
src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts
View File

@@ -11,24 +11,27 @@ export default class UmbModalHandler {
this.key = Date.now().toString(); //TODO better key
this._elementName = elementName;
this._createLayoutElement(modalElementName);
this._closePromise = new Promise((res) => {
this._closeResolver = res;
this._closePromise = new Promise((resolve) => {
this._closeResolver = resolve;
});
}
private _createLayoutElement(modalElementName: string) {
this.modal = document.createElement(modalElementName);
this.modal.addEventListener('close-end', () => {
this._closeResolver();
});
this.modal.size = 'small'; //TODO make meta object for settings
this.element = document.createElement(this._elementName);
this.modal.appendChild(this.element);
this.element.modalHandler = this;
}
public close(...args: any) {
this._closeResolver(...args);
public close() {
this.modal.close();
}
public onClose(): Promise<any> {
public get onClose(): Promise<any> {
return this._closePromise;
}
}