Et2SelectThumbnail

This commit is contained in:
nathan 2022-06-17 13:07:33 -06:00
parent cfce00f7ea
commit f13bf7b154
5 changed files with 177 additions and 4 deletions

View File

@ -0,0 +1,122 @@
/**
* EGroupware eTemplate2 - Image selection WebComponent
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package api
* @link https://www.egroupware.org
* @author Nathan Gray
*/
import {Et2Select} from "./Et2Select";
import {css} from "@lion/core";
import {SelectOption} from "./FindSelectOptions";
export class Et2SelectThumbnail extends Et2Select
{
static get styles()
{
return [
...super.styles,
css`
/* Hide selected options from the dropdown */
::slotted([checked])
{
display: none;
}
/* Hide dropdown icon */
::part(icon), .select__icon {
display: none;
}
`
];
}
constructor(...args : any[])
{
super(...args);
this.search = false;
this.allowFreeEntries = true;
this.editModeEnabled = true;
this.multiple = true;
this.pill = false;
}
/**
* Create an entry that is not in the options and add it to the value
* Overridden here to set the icon as the text, since this is a thumbnail
*
* @param {string} text Used as both value and label
*/
public createFreeEntry(text : string) : boolean
{
if(!this.validateFreeEntry(text))
{
return false;
}
// Make sure not to double-add
if(!this.select_options.find(o => o.value == text))
{
this.select_options.push(<SelectOption>{
value: text,
label: "",
icon: text
});
this.requestUpdate('select_options');
}
// Make sure not to double-add
if(this.multiple && this.value.indexOf(text) == -1)
{
this.value.push(text);
}
else if(!this.multiple)
{
this.value = text;
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;
}
get tagTag() : string
{
return "et2-thumbnail-tag";
}
/**
* Customise how tags are rendered. This overrides what SlSelect
* does in syncItemsFromValue().
* This is a copy+paste from SlSelect.syncItemsFromValue().
*
* @param item
* @protected
*/
protected _createTagNode(item)
{
let tag = super._createTagNode(item);
// Different image - slot in just an image so we can have complete control over styling
tag.querySelector("[slot=prefix]")?.remove();
let img = document.createElement("img");
img.slot = "prefix";
img.src = item.value;
tag.append(img);
return tag;
}
}
customElements.define("et2-select-thumbnail", Et2SelectThumbnail);

View File

@ -261,7 +261,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
this.classList.toggle("search", this.searchEnabled); this.classList.toggle("search", this.searchEnabled);
// Missing any of the required attributes? Don't change anything. // Missing any of the required attributes? Don't change anything.
if(!this.searchEnabled) if(!this.searchEnabled && !this.editModeEnabled)
{ {
return; return;
} }
@ -797,7 +797,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
*/ */
public startEdit(tag : Et2Tag) public startEdit(tag : Et2Tag)
{ {
const tag_value = tag.textContent.trim(); const tag_value = tag.value;
// hide the menu // hide the menu
//this.dropdown.hide() //this.dropdown.hide()

View File

@ -0,0 +1,48 @@
/**
* EGroupware eTemplate2 - Thumbnail Tag WebComponent
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package api
* @link https://www.egroupware.org
* @author Nathan Gray
*/
import {css} from "@lion/core";
import shoelace from "../../Styles/shoelace";
import {Et2Tag} from "./Et2Tag";
/**
* Used in a Et2ThumbnailSelect with multiple=true
*
* It's just easier to deal with the styling here due to scoping
*/
export class Et2ThumbnailTag extends Et2Tag
{
static get styles()
{
return [
super.styles,
shoelace, css`
.tag {
--icon-width: 100%;
max-width: 15em;
height: unset;
}
::slotted(img) {
width: 100%;
height: 50px;
}
`];
}
constructor(...args : [])
{
super(...args);
this.pill = false
}
}
customElements.define("et2-thumbnail-tag", Et2ThumbnailTag);

View File

@ -53,8 +53,10 @@ import './Et2Select/Et2Select';
import './Et2Select/Et2SelectAccount'; import './Et2Select/Et2SelectAccount';
import './Et2Select/Et2SelectEmail'; import './Et2Select/Et2SelectEmail';
import './Et2Select/Et2SelectReadonly'; import './Et2Select/Et2SelectReadonly';
import './Et2Select/Et2SelectThumbnail'
import './Et2Select/Tag/Et2Tag'; import './Et2Select/Tag/Et2Tag';
import './Et2Select/Tag/Et2CategoryTag' import './Et2Select/Tag/Et2CategoryTag';
import './Et2Select/Tag/Et2ThumbnailTag';
import './Et2Textarea/Et2Textarea'; import './Et2Textarea/Et2Textarea';
import './Et2Textbox/Et2Textbox'; import './Et2Textbox/Et2Textbox';
import './Et2Textbox/Et2TextboxReadonly'; import './Et2Textbox/Et2TextboxReadonly';

View File

@ -209,4 +209,5 @@ class Taglist extends Etemplate\Widget
} }
} }
Etemplate\Widget::registerWidget(__NAMESPACE__ . '\\Taglist', array('taglist', 'et2-select-email')); Etemplate\Widget::registerWidget(__NAMESPACE__ . '\\Taglist', array(
'taglist', 'et2-select-email', 'et2-select-thumbnail'));