mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-23 15:18:58 +01:00
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 ***/
|
/*** Style type attributes ***/
|
||||||
|
/**
|
||||||
|
* Disable any translations for the widget
|
||||||
|
*/
|
||||||
|
no_lang: {
|
||||||
|
type: Boolean,
|
||||||
|
reflect: false
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Used by Et2Box to determine alignment.
|
* Used by Et2Box to determine alignment.
|
||||||
* Allowed values are left, right
|
* Allowed values are left, right
|
||||||
@ -1172,7 +1180,7 @@ function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Set as attribute or property, as appropriate
|
// 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)
|
// Set as attribute (reflected in DOM)
|
||||||
widget.setAttribute(attribute, attrValue);
|
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 {egwIsMobile} from "../egw_action/egw_action_common.js";
|
||||||
import './Et2Box/Et2Box';
|
import './Et2Box/Et2Box';
|
||||||
import './Et2Button/Et2Button';
|
import './Et2Button/Et2Button';
|
||||||
|
import './Et2Date/Et2Date';
|
||||||
|
import './Et2Date/Et2DateReadonly'
|
||||||
import './Et2Date/Et2DateTime';
|
import './Et2Date/Et2DateTime';
|
||||||
import './Et2Date/Et2DateTimeReadonly';
|
import './Et2Date/Et2DateTimeReadonly';
|
||||||
|
import './Et2Description/Et2Description';
|
||||||
import './Et2Textarea/Et2Textarea';
|
import './Et2Textarea/Et2Textarea';
|
||||||
import './Et2Textbox/Et2Textbox';
|
import './Et2Textbox/Et2Textbox';
|
||||||
import './Et2Colorpicker/Et2Colorpicker';
|
import './Et2Colorpicker/Et2Colorpicker';
|
||||||
|
Loading…
Reference in New Issue
Block a user