added modal options

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

@@ -43,14 +43,22 @@ class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement)
 	}
 
 	private _open() {
-		const modalHandler = this._modalService?.openSidebar('umb-modal-content-picker');
+		const modalHandler = this._modalService?.openSidebar('umb-modal-content-picker', { size: 'small' });
 		modalHandler?.onClose.then(() => {
 			console.log('Closed the modal for:', this);
 		});
 	}
 
+	private _tempOpenDialog() {
+		//TODO: remove this
+		this._modalService?.openDialog('umb-modal-content-picker');
+	}
+
 	render() {
-		return html` <uui-button look="primary" @click=${this._open} label="open">Open</uui-button> `;
+		return html`
+			<uui-button look="primary" @click=${this._open} label="open">Open sidebar</uui-button>
+			<uui-button look="primary" @click=${this._tempOpenDialog} label="open">Open dialog</uui-button>
+		`;
 	}
 }
 

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

@@ -5,16 +5,16 @@ export class UmbModalService {
 	private _modals: BehaviorSubject<Array<UmbModalHandler>> = new BehaviorSubject(<Array<UmbModalHandler>>[]);
 	public readonly modals: Observable<Array<UmbModalHandler>> = this._modals.asObservable();
 
-	public openSidebar(elementName: string): UmbModalHandler {
-		return this._open(elementName, 'uui-modal-sidebar');
+	public openSidebar(elementName: string, modalOptions?: any): UmbModalHandler {
+		return this._open(elementName, 'uui-modal-sidebar', modalOptions);
 	}
 
-	public openDialog(elementName: string): UmbModalHandler {
-		return this._open(elementName, 'uui-modal-dialog');
+	public openDialog(elementName: string, modalOptions?: any): UmbModalHandler {
+		return this._open(elementName, 'uui-modal-dialog', modalOptions);
 	}
 
-	private _open(elementName: string, modalElementName: string): UmbModalHandler {
-		const modalHandler = new UmbModalHandler(elementName, modalElementName);
+	private _open(elementName: string, modalElementName: string, modalOptions?: any): UmbModalHandler {
+		const modalHandler = new UmbModalHandler(elementName, modalElementName, modalOptions);
 		modalHandler.onClose.then(() => this._close(modalHandler));
 		this._modals.next([...this._modals.getValue(), modalHandler]);
 		return modalHandler;

src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts

@@ -1,5 +1,7 @@
+import { html, render } from 'lit';
+
+//TODO consider splitting this into two separate handlers
 export default class UmbModalHandler {
-	private _elementName;
 	private _closeResolver: any;
 	private _closePromise: any;
 
@@ -7,22 +9,28 @@ export default class UmbModalHandler {
 	public key: string;
 	public modal: any;
 
-	constructor(elementName: string, modalElementName: string) {
+	constructor(elementName: string, modalElementName: string, modalOptions?: any) {
 		this.key = Date.now().toString(); //TODO better key
-		this._elementName = elementName;
-		this._createLayoutElement(modalElementName);
+		this._createLayoutElement(elementName, modalElementName, modalOptions);
 		this._closePromise = new Promise((resolve) => {
 			this._closeResolver = resolve;
 		});
 	}
 
-	private _createLayoutElement(modalElementName: string) {
+	private _createLayoutElement(elementName: string, modalElementName: string, modalOptions?: any) {
 		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);
+
+		if (modalOptions) {
+			// Apply modal options as attributes on the modal
+			Object.keys(modalOptions).forEach((option) => {
+				this.modal.setAttribute(option, modalOptions[option]);
+			});
+		}
+
+		this.element = document.createElement(elementName);
 		this.modal.appendChild(this.element);
 		this.element.modalHandler = this;
 	}