extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-28 02:43:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2SelectThumbnail: Get working with new Et2Select tagTemplate

Browse Source
This commit is contained in:
nathan 2023-12-06 10:33:14 -07:00 committed by hadi
parent c934014ba0
commit 137599f124
1 changed files with 20 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
api/js/etemplate/Et2Select/Select/Et2SelectThumbnail.ts
View File

@ -8,8 +8,9 @@
*/ */
import {Et2Select} from "../Et2Select"; import {Et2Select} from "../Et2Select";
import {css} from "lit"; import {css, html, TemplateResult} from "lit";
import {SelectOption} from "../FindSelectOptions"; import {SelectOption} from "../FindSelectOptions";
import {SlOption} from "@shoelace-style/shoelace";
export class Et2SelectThumbnail extends Et2Select export class Et2SelectThumbnail extends Et2Select
{ {
@ -64,6 +65,7 @@ export class Et2SelectThumbnail extends Et2Select
}); });
this.requestUpdate('select_options'); this.requestUpdate('select_options');
} }
this.requestUpdate();
// Make sure not to double-add // Make sure not to double-add
if(this.multiple && this.value.indexOf(text) == -1) if(this.multiple && this.value.indexOf(text) == -1)
@ -76,18 +78,6 @@ export class Et2SelectThumbnail extends Et2Select
return; return;
} }
// Once added to options, add to value / tags
this.updateComplete.then(() =>
{
this.menuItems.forEach(o =>
{
if(o.value == text)
{
o.dispatchEvent(new Event("click"));
}
});
this.syncItemsFromValue();
});
return true; return true;
} }
@ -97,25 +87,28 @@ export class Et2SelectThumbnail extends Et2Select
} }
/** /**
* Customise how tags are rendered. This overrides what SlSelect * Custom tag
* does in syncItemsFromValue().
* This is a copy+paste from SlSelect.syncItemsFromValue().
* *
* @param item * Override this to customise display when multiple=true.
* There is no restriction on the tag used, unlike _optionTemplate()
*
* @param {Et2Option} option
* @param {number} index
* @returns {TemplateResult}
* @protected * @protected
*/ */
protected _createTagNode(item) protected _tagTemplate(option : SlOption, index : number) : TemplateResult
{ {
let tag = super._createTagNode(item);
// Different image - slot in just an image so we can have complete control over styling // Different image - slot in just an image so we can have complete control over styling
tag.querySelector("[slot=prefix]")?.remove(); return html`
let img = document.createElement("img"); <et2-thumbnail-tag>
img.slot = "prefix"; <img
img.src = item.value; part="image"
tag.append(img); slot="prefix"
src="${option.value}"
return tag; />
</et2-thumbnail-tag>
`;
} }
} }