static: rewrite modal to use shadowroot and import css
This commit is contained in:
Jens Langhammer
parent
a2c7921c1f
commit
59e7d9b81e
|
|
@ -56,8 +56,18 @@
|
|||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:application-update' pk=application.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
|
||||
<a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:application-delete' pk=application.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
|
||||
<pb-modal-button href="{% url 'passbook_admin:application-update' pk=application.pk %}?back={{ request.get_full_path }}">
|
||||
<button slot="trigger" class="pf-c-button pf-m-secondary">
|
||||
{% trans 'Edit' %}
|
||||
</button>
|
||||
<div slot="modal"></div>
|
||||
</pb-modal-button>
|
||||
<pb-modal-button href="{% url 'passbook_admin:application-delete' pk=application.pk %}?back={{ request.get_full_path }}">
|
||||
<button slot="trigger" class="pf-c-button pf-m-danger">
|
||||
{% trans 'Delete' %}
|
||||
</button>
|
||||
<div slot="modal"></div>
|
||||
</pb-modal-button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -30,26 +30,20 @@
|
|||
<div class="pf-l-stack__item">
|
||||
<div class="pf-c-card">
|
||||
<div class="pf-c-card__body">
|
||||
<form action="" method="post" class="pf-c-form pf-m-horizontal" enctype="multipart/form-data">
|
||||
<form id="main-form" action="" method="post" class="pf-c-form pf-m-horizontal" enctype="multipart/form-data">
|
||||
{% include 'partials/form_horizontal.html' with form=form %}
|
||||
{% block beneath_form %}
|
||||
{% endblock %}
|
||||
<div class="pf-c-form__group pf-m-action">
|
||||
<div class="pf-c-form__group-control">
|
||||
<div class="pf-c-form__horizontal-group">
|
||||
<div class="pf-c-form__actions">
|
||||
<input class="pf-c-button pf-m-primary" type="submit" value="{% block action %}{% endblock %}" />
|
||||
<a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<input class="pf-c-button pf-m-primary" type="submit" form="main-form" value="{% block action %}{% endblock %}" />
|
||||
<a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a>
|
||||
</footer>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
|
|
|
|||
|
|
@ -432,8 +432,7 @@
|
|||
"picomatch": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
|
||||
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
|
||||
},
|
||||
"randombytes": {
|
||||
"version": "2.1.0",
|
||||
|
|
@ -480,6 +479,30 @@
|
|||
"rollup-pluginutils": "^2.8.1"
|
||||
}
|
||||
},
|
||||
"rollup-plugin-cssimport": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-cssimport/-/rollup-plugin-cssimport-1.0.2.tgz",
|
||||
"integrity": "sha512-HT24rkJN1jUOiVzyAxYkTkh1g+dIMMVTC9qP7KeZolGQh8BDA0nnsbeND9LjNNOmjcZMIlLIqyrtDRjkVeHHFA==",
|
||||
"requires": {
|
||||
"@rollup/pluginutils": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",
|
||||
"integrity": "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==",
|
||||
"requires": {
|
||||
"estree-walker": "^2.0.1",
|
||||
"picomatch": "^2.2.2"
|
||||
}
|
||||
},
|
||||
"estree-walker": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz",
|
||||
"integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"rollup-plugin-minify-html-literals": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-minify-html-literals/-/rollup-plugin-minify-html-literals-1.2.5.tgz",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"lit-element": "^2.4.0",
|
||||
"lit-html": "^1.3.0",
|
||||
"rollup": "^2.33.2",
|
||||
"rollup-plugin-cssimport": "^1.0.2",
|
||||
"tslib": "^2.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import minifyHTML from 'rollup-plugin-minify-html-literals';
|
|||
import { terser } from 'rollup-plugin-terser';
|
||||
import sourcemaps from 'rollup-plugin-sourcemaps';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import cssimport from "rollup-plugin-cssimport";
|
||||
|
||||
export default [{
|
||||
input: './src/main.ts',
|
||||
|
|
@ -15,6 +16,7 @@ export default [{
|
|||
}
|
||||
],
|
||||
plugins: [
|
||||
cssimport(),
|
||||
typescript(),
|
||||
resolve({browser: true}),
|
||||
commonjs(),
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
import { customElement, html, LitElement, property } from "lit-element";
|
||||
import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
// @ts-ignore
|
||||
import ModalBoxStyle from "@patternfly/patternfly/components/ModalBox/modal-box.css";
|
||||
// @ts-ignore
|
||||
import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
|
||||
// @ts-ignore
|
||||
import BackdropStyle from "@patternfly/patternfly/components/Backdrop/backdrop.css";
|
||||
|
||||
const PRIMARY_CLASS = "pf-m-primary";
|
||||
const SUCCESS_CLASS = "pf-m-success";
|
||||
|
|
@ -11,48 +17,65 @@ export class ModalButton extends LitElement {
|
|||
@property()
|
||||
href: string = "";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.addEventListener('click', e => this.callAction(e));
|
||||
@property()
|
||||
open: boolean = false;
|
||||
|
||||
static get styles() {
|
||||
return [ModalBoxStyle, BullseyeStyle, BackdropStyle]
|
||||
}
|
||||
|
||||
getModal() {
|
||||
onClick(e: MouseEvent) {
|
||||
const request = new Request(
|
||||
this.href,
|
||||
);
|
||||
fetch(request, {
|
||||
mode: 'same-origin',
|
||||
}).then(r => r.text()).then((t) => {
|
||||
this.querySelector("[slot=modal]")!.innerHTML = t;
|
||||
// Ensure links close the modal
|
||||
this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach(a => {
|
||||
// Make click on a close the modal
|
||||
a.addEventListener("click", e => {
|
||||
this.open = false;
|
||||
});
|
||||
});
|
||||
// Ensure input type submit submits the form without reloading the page
|
||||
this.querySelectorAll<HTMLInputElement>("[slot=modal] input[type=submit]").forEach(i => {
|
||||
i.form?.addEventListener("submit", e => {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
i.addEventListener("click", e => {
|
||||
console.log("on submit");
|
||||
e.preventDefault();
|
||||
i.form?.submit();
|
||||
this.open = false;
|
||||
});
|
||||
});
|
||||
this.open = true;
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
}
|
||||
|
||||
renderModal() {
|
||||
return html`<div class="pf-c-backdrop">
|
||||
<div class="pf-l-bullseye">
|
||||
<div class="pf-c-modal-box pf-m-md" role="dialog" aria-modal="true" aria-labelledby="modal-md-title" aria-describedby="modal-md-description">
|
||||
<button class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<header class="pf-c-modal-box__header">
|
||||
<h1 class="pf-c-modal-box__title" id="modal-md-title">This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
|
||||
</header>
|
||||
<div class="pf-c-modal-box__body">
|
||||
<p id="modal-md-description">The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-c-modal-box__body"</p>
|
||||
<p>Form here</p>
|
||||
</div>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<button class="pf-c-button pf-m-primary" type="button">Save</button>
|
||||
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
||||
</footer>
|
||||
<button class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
<slot name="modal">
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
callAction(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
const request = new Request(
|
||||
this.href,
|
||||
);
|
||||
fetch(request, {
|
||||
method: "POST",
|
||||
mode: 'same-origin',
|
||||
}).then(r => {
|
||||
// this.
|
||||
}).catch(() => {
|
||||
// this.setDone(ERROR_CLASS);
|
||||
});
|
||||
render() {
|
||||
return html`
|
||||
<slot name="trigger" @click=${(e: any) => this.onClick(e)}></slot>
|
||||
${this.open ? this.renderModal() : ""}`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue