2022-04-08 21:03:20 +02:00
|
|
|
/**
|
|
|
|
* EGroupware eTemplate2 - Image widget
|
|
|
|
*
|
|
|
|
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
|
|
|
* @package etemplate
|
|
|
|
* @subpackage api
|
|
|
|
* @link https://www.egroupware.org
|
|
|
|
* @author Nathan Gray
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
2022-04-13 18:37:55 +02:00
|
|
|
import {css, html, LitElement, SlotMixin} from "@lion/core";
|
2022-04-08 21:03:20 +02:00
|
|
|
import {Et2Widget} from "../Et2Widget/Et2Widget";
|
|
|
|
import {et2_IDetachedDOM} from "../et2_core_interfaces";
|
|
|
|
|
2022-04-13 18:37:55 +02:00
|
|
|
export class Et2Image extends Et2Widget(SlotMixin(LitElement)) implements et2_IDetachedDOM
|
2022-04-08 21:03:20 +02:00
|
|
|
{
|
|
|
|
static get styles()
|
|
|
|
{
|
|
|
|
return [
|
|
|
|
...super.styles,
|
|
|
|
css`
|
|
|
|
:host {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
2022-04-13 18:37:55 +02:00
|
|
|
::slotted(img) {
|
|
|
|
max-height: 100%;
|
|
|
|
max-width: 100%;
|
2022-04-08 21:03:20 +02:00
|
|
|
}
|
|
|
|
`,
|
|
|
|
];
|
|
|
|
}
|
|
|
|
|
|
|
|
static get properties()
|
|
|
|
{
|
|
|
|
return {
|
2022-04-11 21:38:24 +02:00
|
|
|
...super.properties,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The label of the image
|
|
|
|
* Actually not used as label, but we put it as title
|
|
|
|
* Added here as there's no Lion parent
|
|
|
|
*/
|
|
|
|
label: {
|
2022-04-13 16:34:24 +02:00
|
|
|
type: String
|
2022-04-11 21:38:24 +02:00
|
|
|
},
|
2022-04-08 21:03:20 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Image
|
|
|
|
* Displayed image
|
|
|
|
*/
|
|
|
|
src: {type: String},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Default image
|
|
|
|
* Image to use if src is not found
|
|
|
|
*/
|
|
|
|
default_src: {type: String},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Link Target
|
|
|
|
* Link URL, empty if you don't wan't to display a link.
|
|
|
|
*/
|
|
|
|
href: {type: String},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Link target
|
|
|
|
* Link target descriptor
|
|
|
|
*/
|
|
|
|
extra_link_target: {type: String},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Popup
|
|
|
|
* widthxheight, if popup should be used, eg. 640x480
|
|
|
|
*/
|
|
|
|
extra_link_popup: {type: String},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Expose view
|
|
|
|
* Clicking on an image with href value would popup an expose view, and will show image referenced by href.
|
|
|
|
*/
|
|
|
|
expose_view: {type: Boolean},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-13 18:37:55 +02:00
|
|
|
get slots()
|
|
|
|
{
|
|
|
|
return {
|
|
|
|
'': () =>
|
|
|
|
{
|
|
|
|
return this._imageTemplate();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-08 21:03:20 +02:00
|
|
|
constructor()
|
|
|
|
{
|
|
|
|
super();
|
|
|
|
this.src = "";
|
2022-04-11 21:38:24 +02:00
|
|
|
this.default_src = "";
|
2022-04-08 21:03:20 +02:00
|
|
|
this.href = "";
|
2022-04-11 21:38:24 +02:00
|
|
|
this.label = "";
|
2022-04-08 21:03:20 +02:00
|
|
|
this.extra_link_target = "_self";
|
|
|
|
this.extra_link_popup = "";
|
|
|
|
this.expose_view = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
connectedCallback()
|
|
|
|
{
|
|
|
|
super.connectedCallback();
|
|
|
|
this._handleClick = this._handleClick.bind(this);
|
|
|
|
}
|
|
|
|
|
2022-04-14 16:50:34 +02:00
|
|
|
_imageTemplate()
|
2022-04-08 21:03:20 +02:00
|
|
|
{
|
2022-04-12 18:00:43 +02:00
|
|
|
let src = this.parse_href(this.src) || this.parse_href(this.default_src);
|
|
|
|
if(!src)
|
|
|
|
{
|
|
|
|
// Hide if no valid image
|
|
|
|
return '';
|
|
|
|
}
|
2022-04-08 21:03:20 +02:00
|
|
|
return html`
|
|
|
|
<img ${this.id ? html`id="${this.id}"` : ''}
|
2022-04-12 18:00:43 +02:00
|
|
|
src="${src}"
|
2022-04-08 21:03:20 +02:00
|
|
|
alt="${this.label}"
|
|
|
|
title="${this.statustext || this.label}"
|
|
|
|
>`;
|
|
|
|
}
|
|
|
|
|
2022-04-13 18:37:55 +02:00
|
|
|
render()
|
|
|
|
{
|
|
|
|
return html`
|
|
|
|
<slot></slot>`;
|
|
|
|
}
|
|
|
|
|
2022-04-08 21:03:20 +02:00
|
|
|
|
2022-04-11 21:38:24 +02:00
|
|
|
protected parse_href(img_href : string) : string
|
|
|
|
{
|
2022-04-08 21:03:20 +02:00
|
|
|
// allow url's too
|
2022-04-11 21:38:24 +02:00
|
|
|
if(img_href[0] == '/' || img_href.substr(0, 4) == 'http' || img_href.substr(0, 5) == 'data:')
|
2022-04-08 21:03:20 +02:00
|
|
|
{
|
2022-04-11 21:38:24 +02:00
|
|
|
return img_href;
|
2022-04-08 21:03:20 +02:00
|
|
|
}
|
2022-04-11 21:38:24 +02:00
|
|
|
let src = this.egw()?.image(img_href);
|
2022-04-08 21:03:20 +02:00
|
|
|
if(src)
|
|
|
|
{
|
2022-04-11 21:38:24 +02:00
|
|
|
return src;
|
2022-04-08 21:03:20 +02:00
|
|
|
}
|
2022-04-11 21:38:24 +02:00
|
|
|
return "";
|
2022-04-08 22:03:29 +02:00
|
|
|
}
|
|
|
|
|
2022-04-08 21:03:20 +02:00
|
|
|
_handleClick(_ev : MouseEvent) : boolean
|
|
|
|
{
|
|
|
|
if(this.href)
|
|
|
|
{
|
|
|
|
this.egw().open_link(this.href, this.extra_link_target, this.extra_link_popup);
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
return super._handleClick(_ev);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-13 18:37:55 +02:00
|
|
|
get _img()
|
|
|
|
{
|
|
|
|
return this.__getDirectSlotChild('img');
|
|
|
|
}
|
|
|
|
|
2022-04-08 21:03:20 +02:00
|
|
|
/**
|
|
|
|
* Handle changes that have to happen based on changes to properties
|
|
|
|
*
|
|
|
|
*/
|
2022-04-13 16:34:24 +02:00
|
|
|
updated(changedProperties)
|
2022-04-08 21:03:20 +02:00
|
|
|
{
|
2022-04-13 16:34:24 +02:00
|
|
|
super.updated(changedProperties);
|
2022-04-08 21:03:20 +02:00
|
|
|
|
2022-04-13 16:34:24 +02:00
|
|
|
// if there's an href or onclick, make it look clickable
|
|
|
|
if(changedProperties.has("href") || changedProperties.has("onclick"))
|
2022-04-08 21:03:20 +02:00
|
|
|
{
|
2022-04-13 16:34:24 +02:00
|
|
|
this.classList.toggle("et2_clickable", this.href || this.onclick)
|
2022-04-08 21:03:20 +02:00
|
|
|
}
|
2022-04-13 18:37:55 +02:00
|
|
|
for(const changedPropertiesKey in changedProperties)
|
|
|
|
{
|
|
|
|
if(Et2Image.getPropertyOptions()[changedPropertiesKey])
|
|
|
|
{
|
|
|
|
this._img[changedPropertiesKey] = this[changedPropertiesKey];
|
|
|
|
}
|
|
|
|
}
|
2022-04-08 21:03:20 +02:00
|
|
|
}
|
|
|
|
|
2022-04-11 23:03:24 +02:00
|
|
|
transformAttributes(_attrs : any)
|
|
|
|
{
|
|
|
|
super.transformAttributes(_attrs);
|
|
|
|
|
|
|
|
// Expand src with additional stuff. Copy & paste from legacy.
|
|
|
|
if(typeof _attrs["src"] != "undefined")
|
|
|
|
{
|
|
|
|
let manager = this.getArrayMgr("content");
|
|
|
|
if(manager && _attrs["src"])
|
|
|
|
{
|
|
|
|
let src = manager.getEntry(_attrs["src"], false, true);
|
|
|
|
if(typeof src != "undefined" && src !== null)
|
|
|
|
{
|
|
|
|
if(typeof src == "object")
|
|
|
|
{
|
|
|
|
src = egw().link('/index.php', src);
|
|
|
|
}
|
|
|
|
this.src = src;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-08 21:03:20 +02:00
|
|
|
/**
|
|
|
|
* Code for implementing et2_IDetachedDOM
|
|
|
|
*
|
|
|
|
* Individual widgets are detected and handled by the grid, but the interface is needed for this to happen
|
|
|
|
*
|
|
|
|
* @param {array} _attrs array to add further attributes to
|
|
|
|
*/
|
|
|
|
getDetachedAttributes(_attrs)
|
|
|
|
{
|
2022-04-11 21:38:24 +02:00
|
|
|
_attrs.push("src", "label", "href");
|
2022-04-08 21:03:20 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
getDetachedNodes()
|
|
|
|
{
|
2022-04-11 21:38:24 +02:00
|
|
|
return [<HTMLElement><unknown>this];
|
2022-04-08 21:03:20 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
setDetachedAttributes(_nodes, _values)
|
|
|
|
{
|
2022-04-11 21:38:24 +02:00
|
|
|
// Do nothing, setting attribute / property just sets it
|
2022-04-08 21:03:20 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
customElements.define("et2-image", Et2Image as any, {extends: 'img'});
|