Skip to content
Snippets Groups Projects
Unverified Commit e3594e1d authored by Bekerle, Patrizio's avatar Bekerle, Patrizio :fire:
Browse files

Allow globally overriding slots in the light dom of components and use it to...

Allow globally overriding slots in the light dom of components and use it to override the auth-info slot in the Nextcloud file picker
parent 85da741d
Branches
No related tags found
No related merge requests found
Pipeline #47495 passed
import {AdapterLitElement} from "./src/adapter-lit-element"; import {AdapterLitElement} from "./src/adapter-lit-element";
export default class DBPLitElement extends AdapterLitElement { export default class DBPLitElement extends AdapterLitElement {
_(selector) { constructor() {
return this.shadowRoot === null ? this.querySelector(selector) : this.shadowRoot.querySelector(selector); super();
this.htmlOverrides = '';
}
/**
* See: https://lit-element.polymer-project.org/guide/properties#initialize
*/
static get properties() {
return {
...super.properties,
htmlOverrides: { type: String, attribute: 'html-overrides' },
};
} }
connectedCallback() { connectedCallback() {
this.updateComplete.then(() => { this.updateComplete.then(() => {
// transform all named template slots in the light DOM to named div slots // transform all global override templates or named template slots in the light DOM to named div slots
this.transformTemplateSlots(); this.transformSlots();
}); });
super.connectedCallback(); super.connectedCallback();
} }
_(selector) {
return this.shadowRoot === null ? this.querySelector(selector) : this.shadowRoot.querySelector(selector);
}
getTagName() {
const tagName = this.dataset ? (this.dataset.tagName || '') : '';
return tagName !== '' ? tagName : this.tagName.toLowerCase();
}
/** /**
* Transforms all named template slots in the light DOM to named div slots * Transforms all global override templates or named template slots in the light DOM to named div slots
*/ */
transformTemplateSlots() { transformSlots() {
// query all named slots of the component // query all named slots of the component
const slots = this.shadowRoot.querySelectorAll("slot[name]"); const slots = this.shadowRoot.querySelectorAll("slot[name]");
// if there are no slots we can exit
if (slots.length === 0) {
return;
}
slots.forEach((slot) => { slots.forEach((slot) => {
const name = slot.name; const slotName = slot.name;
// search if there is a template with the name of the slot in the light DOM of the component // search if there is a template with the name of the slot in the light DOM of the component
const templateElem = this.querySelector("template[slot=" + name + "]"); const templateElem = this.querySelector("template[slot=" + slotName + "]");
if (!templateElem) { if (!templateElem) {
return; return;
...@@ -32,14 +60,51 @@ export default class DBPLitElement extends AdapterLitElement { ...@@ -32,14 +60,51 @@ export default class DBPLitElement extends AdapterLitElement {
// create a slot div container to put in the cloned template content // create a slot div container to put in the cloned template content
const divElem = document.createElement('div'); const divElem = document.createElement('div');
divElem.slot = name; divElem.slot = slotName;
divElem.appendChild(templateElem.content.cloneNode(true)); divElem.appendChild(templateElem.content.cloneNode(true));
// remove the old template with slot attribute // remove the old template
templateElem.remove(); templateElem.remove();
// put the slot div container with the cloned template in the light DOM // put the slot div container with the cloned template in the light DOM
this.appendChild(divElem); this.appendChild(divElem);
}); });
// check if we have an "html-override" attribute set so we need to check for the global override template
if (this.htmlOverrides !== '') {
const globalOverrideTemplateElem = document.querySelector('template#' + this.htmlOverrides);
if (globalOverrideTemplateElem) {
// we need to clone the element so we can access the content
const overrideTemplateElemClone = globalOverrideTemplateElem.content.cloneNode(true);
const tagName = this.getTagName();
// then we will look if there is an override for the current tag
const templateOverrideElem = overrideTemplateElemClone.querySelector('template#' + tagName);
if (templateOverrideElem) {
// if there is an override we again need to clone that template so we can access the content
const templateOverrideElemClone = templateOverrideElem.content.cloneNode(true);
// now we need to look for slots in the override
slots.forEach((slot) => {
const slotName = slot.name;
// if a slot is found we need to remove the current slot in the light DOM
// so we are not showing the old and new content at the same time
if (templateOverrideElemClone.querySelector('[slot="' + slotName + '"]')) {
const currentSlotElement = this.querySelector('[slot="' + slotName + '"]');
if (currentSlotElement) {
currentSlotElement.remove();
}
}
});
// append the cloned template to the light DOM
this.appendChild(templateOverrideElemClone);
}
}
}
} }
} }
...@@ -1508,7 +1508,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1508,7 +1508,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
</div> </div>
<div class="block text-center m-inherit ${classMap({hidden: this.isPickerActive})}"> <div class="block text-center m-inherit ${classMap({hidden: this.isPickerActive})}">
<p class="m-inherit"><br> <p class="m-inherit"><br>
${i18n.t('nextcloud-file-picker.auth-info')}<br>${this.authInfo} ${i18n.t('nextcloud-file-picker.auth-info')}
<slot name="auth-info"><br />${this.authInfo}</slot>
</p> </p>
</div> </div>
</div> </div>
......
...@@ -268,6 +268,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) { ...@@ -268,6 +268,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
select-button-text="${i18n.t('file-sink.select-directory')}" select-button-text="${i18n.t('file-sink.select-directory')}"
?disabled="${this.disabled}" ?disabled="${this.disabled}"
lang="${this.lang}" lang="${this.lang}"
subscribe="html-overrides"
auth-url="${this.nextcloudAuthUrl}" auth-url="${this.nextcloudAuthUrl}"
web-dav-url="${this.nextcloudWebDavUrl}" web-dav-url="${this.nextcloudWebDavUrl}"
nextcloud-name="${this.nextcloudName}" nextcloud-name="${this.nextcloudName}"
......
...@@ -464,6 +464,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -464,6 +464,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
class="${classMap({hidden: this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}" class="${classMap({hidden: this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}"
?disabled="${this.disabled}" ?disabled="${this.disabled}"
lang="${this.lang}" lang="${this.lang}"
subscribe="html-overrides"
auth-url="${this.nextcloudAuthUrl}" auth-url="${this.nextcloudAuthUrl}"
web-dav-url="${this.nextcloudWebDavUrl}" web-dav-url="${this.nextcloudWebDavUrl}"
nextcloud-name="${this.nextcloudName}" nextcloud-name="${this.nextcloudName}"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment