Skip to content

'modal' component working like 'popup' component #1258

@jml-french

Description

@jml-french

modal.handlebars:

<div class="modal{{~#if class}} {{class}}{{/if~}}"{{~#if id}} id="{{id}}"{{/if~}} tabindex="-1" aria-hidden="false" aria-labelledby="{{title}}">
	<div role="document" class="modal-dialog{{~#if small}} modal-sm{{/if~}}{{~#if large}} modal-lg{{/if~}}{{~#if scrollable}} modal-dialog-scrollable{{/if~}}">
		<div class="modal-content">
			<div class="modal-header{{~#if color}} bg-{{color}}{{/if~}}">
				<h5 class="modal-title">{{title}}</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{default close "close"}}"></button>
			</div>
			<div class="modal-{{~#if close}}body{{~else~}}footer{{/if~}}{{~#if color}} bg-{{color}}{{/if~}}">
				<div class="card bg-transparent border-0"{{~#if (and embed (ne embed_mode "iframe"))}} data-pre-init="card" data-embed="{{embed}}"{{/if~}}>
					<div class="card-body p-0">
						<div class="card-content remove-bottom-margin"></div>
						{{~#if embed ~}}
							{{~#if (eq embed_mode "iframe")}}
								<iframe src="{{embed}}" width="100%"
										{{~#if height}} height="{{height}}"{{/if~}}
										{{~#if allow}} allow="{{allow}}"{{/if~}}
										{{~#if sandbox}} sandbox="{{sandbox}}"{{/if~}}
										{{~#if style}} style="{{style}}"{{/if~}}
								>
								</iframe>
							{{~else~}}
								<div class="d-flex justify-content-center h-100 align-items-center card-loading-placeholder">
									<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
										<span class="visually-hidden">Loading...</span>
									</div>
								</div>
							{{~/if~}}
						{{~/if~}}
						{{~#each_row~}}
							<p>
								{{~#if contents_md~}}
									{{{markdown contents_md}}}
								{{else}}
									{{~contents~}}
								{{~/if~}}
							</p>
						{{~/each_row~}}
					</div>
				</div>
			</div>
			{{#if close}}
			<div class="modal-footer{{~#if color}} bg-{{color}}{{/if~}}">
				<button type="button" class="btn me-primary" data-bs-dismiss="modal">{{close}}</button>
			</div>
			{{/if}}
		</div>
	</div>
</div>
{{#if id}}{{#if visible}}
<script type="text/javascript" nonce="{{@csp_nonce}}">
	window.location.href = "#{{id}}";
</script>
{{/if}}{{/if}}

Bring:

  • color management ('color' parameter)
  • visibility management by default ('visible' parameter)

Usage example:

SET popup_title = (SELECT title FROM popup WHERE ((username = $creator) AND ($popup IS NOT NULL)));
SET popup_color = (SELECT color FROM popup WHERE ((username = $creator) AND ($popup IS NOT NULL)));
SET popup_contents = (SELECT description FROM popup WHERE ((username = $creator) AND ($popup IS NOT NULL)));

SELECT 'modal' AS component,
	'popup' AS id,
	$popup_title AS title,
	$popup_color AS color,
	TRUE AS small,
	TRUE AS visible
	WHERE ($popup_title IS NOT NULL);

SELECT $popup_contents AS contents_md
	WHERE ($popup_contents IS NOT NULL);

Potential problem:
Cause js, not compliant with default CSP. Is it possible to enhance this ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions