Changes for page Apps

Last modified by hbpadmin on 2023/02/21 17:00
From version 2.1
edited by superadmin
on 2021/03/02 16:49
Change comment: Install extension [eu.hbp.wiki:xwiki-awm-collabs/0.24.7]
To version 3.1
edited by hbpadmin
on 2023/02/21 17:00
Change comment: Install extension [eu.hbp.wiki:xwiki-awm-collabs/0.52.0]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.superadmin
1 +XWiki.hbpadmin
Content
... ... @@ -27,8 +27,7 @@
27 27  {{/velocity}}
28 28  {{velocity}}
29 29  {{html clean="false"}}
30 - ## we need to import the javascript like taht so we have the `module` type
31 - <script type="module" src="$services.webjars.url('eu.hbp.wiki:xwiki-webapp-collaboratory', 'collab.esm.js')"></script>
30 + <script src="$services.webjars.url('eu.hbp.wiki:xwiki-webapp-collaboratory', 'clb-modal.js')"></script>
32 32   <div class="row external-apps-header">
33 33   <div class="col-md-8">
34 34   <h1>Community Apps</h1>
XWiki.XWikiRights[0]
Groups
... ... @@ -1,1 +1,1 @@
1 -XWiki.XWikiAdminGroup
1 +XWiki.XWikiAdminGroup,
XWiki.JavaScriptExtension[0]
Caching policy
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,97 @@
1 +customElements.define('clb-modal', class extends HTMLElement {
2 + constructor() {
3 + super();
4 + this.closeAction = () => {};
5 + }
6 + get template() {
7 + const template = document.createElement('template');
8 + template.innerHTML = `
9 + <style>
10 + ${this.styles}
11 + </style>
12 + ${this.html}
13 + `;
14 + return template;
15 + }
16 + $(selector) {
17 + return this.shadowRoot.querySelector(selector);
18 + }
19 + $$(selector) {
20 + return this.shadowRoot.querySelectorAll(selector);
21 + }
22 + get styles() {
23 + return `
24 + :host .content-wrapper {
25 + position: fixed;
26 + top: 5vh;
27 + left: 5vw;
28 + z-index: 10;
29 + background: var(--color-white);
30 + height: 90vh;
31 + width: 90vw;
32 + overflow-x: hidden;
33 + border-radius: var(--border-radius-default);
34 + opacity: 1;
35 + }
36 +
37 + :host header {
38 + margin: 1rem 2rem;
39 + }
40 + :host [slot="h1"] {
41 + font-weight: 600;
42 + font-size: 1.8rem;
43 + margin-top: 0;
44 + text-transform: capitalize;
45 + }
46 + :host [slot="h2"] {
47 + font-weight: normal;
48 + color: var(--color-gray-500) !important;
49 + text-transform: capitalize;
50 + }
51 + :host .overlay {
52 + width: 100vw;
53 + height: 100vh;
54 + position: fixed;
55 + top: 0;
56 + left: 0;
57 + background: var(--color-support-dark);
58 + opacity: .2;
59 + z-index: 1;
60 + }
61 + :host #close {
62 + float: right;
63 + margin: 2rem 2rem 0 0;
64 + color: var(--color-gray-500);
65 + cursor: pointer;
66 +
67 + }
68 + :host #close:hover {
69 + color: var(--color-gray-700);
70 + }
71 + `;
72 + }
73 + get html() {
74 + return `
75 + <div class="content-wrapper">
76 + <div id="close">✕</div>
77 + <header>
78 + <slot name="h2"></slot>
79 + <slot name="h1"></slot>
80 + </header>
81 + <slot name="content"></slot>
82 + </div>
83 + <div class="overlay"></div>
84 + `;
85 + }
86 + connectedCallback() {
87 + this.attachShadow({ mode: 'open'});
88 + this.shadowRoot.appendChild(this.template.content.cloneNode(true));
89 + this.shadowRoot.host.classList.add('clb-modal');
90 + this.$('#close').addEventListener('click', this.closeAction);
91 + this.$('.overlay').addEventListener('click', this.closeAction);
92 + }
93 + disconnectedCallback() {
94 + this.$('#close').removeEventListener('click', this.closeAction);
95 + this.$('.overlay').removeEventListener('click', this.closeAction);
96 + }
97 +});
Name
... ... @@ -1,0 +1,1 @@
1 +eu.hbp.collaboratory.clbmodal