forked from extern/egroupware
WIP on Et2Description. Shows improvement in nm render speed.
This commit is contained in:
parent
4e597b5672
commit
e1ab343a5d
66
api/js/etemplate/ActivateLinksDirective.ts
Normal file
66
api/js/etemplate/ActivateLinksDirective.ts
Normal file
@ -0,0 +1,66 @@
|
||||
import {Directive, directive, html, repeat} from "@lion/core";
|
||||
import {et2_activateLinks} from "./et2_core_common";
|
||||
|
||||
/**
|
||||
* Activates links in text
|
||||
*
|
||||
* @example
|
||||
* this.value = "This text has links to https://www.egroupware.org";
|
||||
* ...
|
||||
* render()
|
||||
* {
|
||||
* return html`activateLinks(this.value)`;
|
||||
* }
|
||||
* renders as:
|
||||
* <a href="https://www.egroupware.org" target="_blank">egroupware.org</a>
|
||||
*/
|
||||
class ActivateLinksDirective extends Directive
|
||||
{
|
||||
render(text_with_urls, _target)
|
||||
{
|
||||
let list = et2_activateLinks(text_with_urls);
|
||||
|
||||
return html`${repeat(list, (item, index) =>
|
||||
{
|
||||
// No urls in this section
|
||||
if(typeof item == "string" || typeof item == "number")
|
||||
{
|
||||
// Just text. Easy (framework handles \n)
|
||||
return item;
|
||||
}
|
||||
// Url found, deal with it
|
||||
else if(item && item.text)
|
||||
{
|
||||
if(!item.href)
|
||||
{
|
||||
console.warn("et2_activateLinks gave bad data", item, _target);
|
||||
item.href = "";
|
||||
}
|
||||
let click = null;
|
||||
let target = null;
|
||||
|
||||
// open mailto links depending on preferences in mail app
|
||||
if(item.href.substr(0, 7) == "mailto:" &&
|
||||
egw.user('apps').mail &&
|
||||
egw.preference('force_mailto', 'addressbook') != '1')
|
||||
{
|
||||
click = function(event)
|
||||
{
|
||||
egw.open_link(this);
|
||||
return false;
|
||||
}.bind(item.href);
|
||||
item.href = "#";
|
||||
}
|
||||
|
||||
if(typeof _target != "undefined" && _target && _target != "_self" && item.href.substr(0, 7) != "mailto:")
|
||||
{
|
||||
target = _target;
|
||||
}
|
||||
return html`<a href="${item.href}" @click=${click} target="${target}">${item.text}</a>`;
|
||||
}
|
||||
})}`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export const activateLinks = directive(ActivateLinksDirective);
|
151
api/js/etemplate/Et2Description/Et2Description.ts
Normal file
151
api/js/etemplate/Et2Description/Et2Description.ts
Normal file
@ -0,0 +1,151 @@
|
||||
/**
|
||||
* EGroupware eTemplate2 - Description 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 {Et2Widget} from "../Et2Widget/Et2Widget";
|
||||
import {html, css, LitElement} from "@lion/core";
|
||||
import {et2_IDetachedDOM} from "../et2_core_interfaces";
|
||||
import {activateLinks} from "../ActivateLinksDirective";
|
||||
|
||||
export class Et2Description extends Et2Widget(LitElement) implements et2_IDetachedDOM
|
||||
{
|
||||
|
||||
protected _value : string = "";
|
||||
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
:host {
|
||||
white-space: pre-wrap;
|
||||
}`
|
||||
];
|
||||
}
|
||||
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
...super.properties,
|
||||
value: String,
|
||||
}
|
||||
}
|
||||
|
||||
set_value(value)
|
||||
{
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
get value()
|
||||
{
|
||||
return this._value;
|
||||
}
|
||||
|
||||
set value(_value : string)
|
||||
{
|
||||
let oldValue = this.value;
|
||||
|
||||
if(!_value)
|
||||
{
|
||||
_value = "";
|
||||
}
|
||||
|
||||
// Do we do this here, or in transformAttributes()?
|
||||
if(!this.no_lang)
|
||||
{
|
||||
_value = this.egw().lang(_value);
|
||||
}
|
||||
|
||||
if(_value && (_value + "").indexOf('%s') != -1)
|
||||
{
|
||||
_value = _value.replace(/%s/g, _value);
|
||||
}
|
||||
|
||||
this._value = _value;
|
||||
this.requestUpdate('value', oldValue);
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
|
||||
// Add hover action button (Edit)
|
||||
if(this.hover_action)
|
||||
{
|
||||
// TODO
|
||||
}
|
||||
if(this.extra_link_popup || this.mime)
|
||||
{
|
||||
// TODO
|
||||
}
|
||||
|
||||
|
||||
// If there's a link, wrap that
|
||||
if(this.href && this._value)
|
||||
{
|
||||
return this.wrapLink(this.href, this._value);
|
||||
}
|
||||
// If we want to activate links inside, do that
|
||||
else if(this.activateLinks && this._value)
|
||||
{
|
||||
return this.getActivatedValue(this._value, this.href ? this.extra_link_target : '_blank');
|
||||
}
|
||||
// Just do the value
|
||||
else
|
||||
{
|
||||
return html`${this._value}`;
|
||||
}
|
||||
}
|
||||
|
||||
protected wrapLink(href, value)
|
||||
{
|
||||
if(href.indexOf('/') == -1 && href.split('.').length >= 3 &&
|
||||
!(href.indexOf('mailto:') != -1 || href.indexOf('://') != -1 || href.indexOf('javascript:') != -1)
|
||||
)
|
||||
{
|
||||
href = "/index.php?menuaction=" + href;
|
||||
}
|
||||
if(href.charAt(0) == '/') // link relative to eGW
|
||||
{
|
||||
href = egw.link(href);
|
||||
}
|
||||
return html`<a href="${href}" target="${this.target ?? "_blank"}">${value}</a>`;
|
||||
}
|
||||
|
||||
protected getActivatedValue(value, target)
|
||||
{
|
||||
return html`${activateLinks(value, target)}`;
|
||||
}
|
||||
|
||||
getDetachedAttributes(attrs)
|
||||
{
|
||||
attrs.push("id", "value", "class");
|
||||
}
|
||||
|
||||
getDetachedNodes() : HTMLElement[]
|
||||
{
|
||||
return [<HTMLElement><unknown>this];
|
||||
}
|
||||
|
||||
setDetachedAttributes(_nodes : HTMLElement[], _values : object, _data? : any) : void
|
||||
{
|
||||
// Do nothing, since we can't actually stop being a DOM node...
|
||||
}
|
||||
|
||||
loadFromXML()
|
||||
{
|
||||
// nope
|
||||
}
|
||||
|
||||
loadingFinished()
|
||||
{
|
||||
// already done, I'm a wc with no children
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
|
||||
customElements.define("et2-description", Et2Description);
|
@ -143,6 +143,14 @@ const Et2WidgetMixin = (superClass) =>
|
||||
},
|
||||
|
||||
/*** Style type attributes ***/
|
||||
/**
|
||||
* Disable any translations for the widget
|
||||
*/
|
||||
no_lang: {
|
||||
type: Boolean,
|
||||
reflect: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Used by Et2Box to determine alignment.
|
||||
* Allowed values are left, right
|
||||
@ -1172,7 +1180,7 @@ function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
|
||||
}
|
||||
|
||||
// Set as attribute or property, as appropriate
|
||||
if(widget.getAttributeNames().indexOf(attribute) >= 0)
|
||||
if(widget.getAttributeNames().indexOf(attribute) >= 0 || property.reflect)
|
||||
{
|
||||
// Set as attribute (reflected in DOM)
|
||||
widget.setAttribute(attribute, attrValue);
|
||||
@ -1196,3 +1204,4 @@ function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -25,8 +25,11 @@ import '../jsapi/egw_json.js';
|
||||
import {egwIsMobile} from "../egw_action/egw_action_common.js";
|
||||
import './Et2Box/Et2Box';
|
||||
import './Et2Button/Et2Button';
|
||||
import './Et2Date/Et2Date';
|
||||
import './Et2Date/Et2DateReadonly'
|
||||
import './Et2Date/Et2DateTime';
|
||||
import './Et2Date/Et2DateTimeReadonly';
|
||||
import './Et2Description/Et2Description';
|
||||
import './Et2Textarea/Et2Textarea';
|
||||
import './Et2Textbox/Et2Textbox';
|
||||
import './Et2Colorpicker/Et2Colorpicker';
|
||||
|
Loading…
Reference in New Issue
Block a user