Add some more properties for description

activate_links
extra_link_target
extra_link_popup
href
This commit is contained in:
nathan 2021-12-20 15:15:32 -07:00
parent e1ab343a5d
commit 7fcf6f1423
3 changed files with 84 additions and 12 deletions

View File

@ -24,6 +24,11 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
css` css`
:host { :host {
white-space: pre-wrap; white-space: pre-wrap;
}
:host a {
cursor: pointer;
color: #26537c;
text-decoration: none;
}` }`
]; ];
} }
@ -32,10 +37,50 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
{ {
return { return {
...super.properties, ...super.properties,
/**
* Scan the value, and if there are any links (URL, mailto:) then wrap them in a clickable
* <a/> tag
*/
activate_links: {
type: Boolean,
reflect: true
},
/**
* Extra link target
* Goes with href. If provided, that's the target for opening the link.
*/
extra_link_target: {
type: String
},
/**
* widthxheight, if popup should be used, eg. 640x480
*/
extra_link_popup: {
type: String
},
/**
* Link URL
* If provided, will be clickable and open this URL
*/
href: {
type: String
},
value: String, value: String,
} }
} }
constructor()
{
super();
// Initialize properties
this.activate_links = false;
this.extra_link_popup = "";
this.extra_link_target = "_browser";
this.href = "";
this.value = "";
}
set_value(value) set_value(value)
{ {
this.value = value; this.value = value;
@ -72,33 +117,55 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
render() render()
{ {
let render = null;
// Add hover action button (Edit) // Add hover action button (Edit)
if(this.hover_action) if(this.hover_action)
{ {
// TODO // TODO
} }
if(this.extra_link_popup || this.mime)
{
// TODO
}
// If there's a link, wrap that // If there's a link, wrap that
if(this.href && this._value) if(this.href && this._value)
{ {
return this.wrapLink(this.href, this._value); render = this.wrapLink(this.href, this._value);
} }
// If we want to activate links inside, do that // If we want to activate links inside, do that
else if(this.activateLinks && this._value) else if(this.activate_links && this._value)
{ {
return this.getActivatedValue(this._value, this.href ? this.extra_link_target : '_blank'); render = this.getActivatedValue(this._value, this.href ? this.extra_link_target : '_blank');
} }
// Just do the value // Just do the value
else else
{ {
return html`${this._value}`; render = html`${this._value}`;
} }
return html`${render}`;
}
async firstUpdated()
{
this.removeEventListener('click.extra_link');
if(this.extra_link_popup || this.mime)
{
// Add click listener
this.addEventListener('click.extra_link', this._handleClick.bind(this));
}
}
_handleClick(_ev : MouseEvent) : boolean
{
if(this.expose_view && typeof this.mime != 'undefined' && this.mime.match(this.mime_regexp, 'ig'))
{
this._init_blueimp_gallery(_ev, this.href);
}
else
{
egw(window).open_link(this.mime_data || this.href, this.extra_link_target, this.extra_link_popup, null, null, this.mime);
}
_ev.preventDefault();
return false;
} }
protected wrapLink(href, value) protected wrapLink(href, value)
@ -123,7 +190,7 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
getDetachedAttributes(attrs) getDetachedAttributes(attrs)
{ {
attrs.push("id", "value", "class"); attrs.push("id", "value", "class", "href");
} }
getDetachedNodes() : HTMLElement[] getDetachedNodes() : HTMLElement[]

View File

@ -1144,7 +1144,7 @@ function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
} }
const property = widget_class.getPropertyOptions(attribute); const property = widget_class.getPropertyOptions(attribute);
switch(property.type) switch(typeof property === "object" ? property.type : property)
{ {
case Boolean: case Boolean:
// If the attribute is marked as boolean, parse the // If the attribute is marked as boolean, parse the

View File

@ -178,10 +178,15 @@ export class et2_nextmatch_rowProvider
data[set.attribute] = mgrs["content"].expandName(set.expression); data[set.attribute] = mgrs["content"].expandName(set.expression);
} }
// WebComponent IS the node, and we've already cloned it // WebComponent IS the node, and we've already cloned it
// N.B. it's missing its unreflected (internal) properties
if(typeof window.customElements.get(widget.localName) != "undefined") if(typeof window.customElements.get(widget.localName) != "undefined")
{ {
// Use the clone, not the original // Use the clone, not the original
widget = entry.nodeFuncs[0](row) let c = widget.clone();
let partial = entry.nodeFuncs[0](row);
partial.parentNode.insertBefore(c, partial);
partial.parentNode.removeChild(partial);
widget = c;
} }
else else
{ {