- Get label "for" attribute working when target is a WebComponent

- Remove requirement that tooltip target be jQuery, get tooltips working on WebComponents
This commit is contained in:
nathan 2021-07-23 10:18:45 -06:00
parent 5fee9fcafe
commit 30d835fa39
4 changed files with 41 additions and 10 deletions

View File

@ -12,7 +12,7 @@
et2_core_common;
*/
import {egw} from "../jsapi/egw_global";
import {egw, IegwAppLocal} from "../jsapi/egw_global";
import {et2_checkType, et2_no_init, et2_validateAttrib} from "./et2_core_common";
import {et2_IDOMNode, et2_IInput, et2_IInputNode, et2_implements_registry} from "./et2_core_interfaces";
import {LitElement} from "../../../node_modules/lit-element/lit-element.js";
@ -277,6 +277,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) => {
* Tooltip which is shown for this element on hover
*/
statustext: {type: String},
label: {type: String},
onclick: {
type: Function,
@ -300,6 +301,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) => {
// Provide *default* property values in constructor
this.label = "";
this.statustext = "";
}
connectedCallback()
@ -307,8 +309,17 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) => {
super.connectedCallback();
this.set_label(this.label);
if(this.statustext)
{
this.egw().tooltipBind(this,this.statustext);
}
}
disconnectedCallback()
{
this.egw().tooltipUnbind(this);
}
/**
* NOT the setter, since we cannot add to the DOM before connectedCallback()
@ -408,7 +419,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) => {
return this._parent;
}
return parentNode;
return <HTMLElement> parentNode;
}
getDOMNode(): HTMLElement {
return this;
@ -537,6 +548,27 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) => {
{
return false;
}
egw() : IegwAppLocal
{
if (this.getParent() != null && !(this.getParent() instanceof HTMLElement))
{
return (<et2_widget> this.getParent()).egw();
}
// Get the window this object belongs to
var wnd = null;
// @ts-ignore Technically this doesn't have implements(), but it's mixed in
if (this.implements(et2_IDOMNode)) {
var node = (<et2_IDOMNode><unknown>this).getDOMNode();
if (node && node.ownerDocument) {
wnd = node.ownerDocument.parentNode || node.ownerDocument.defaultView;
}
}
// If we're the root object, return the phpgwapi API instance
return egw('phpgwapi', wnd);
}
};
function applyMixins(derivedCtor: any, baseCtors: any[]) {

View File

@ -410,8 +410,6 @@ export const Et2InputWidget = <T extends Constructor>(superClass: T) => {
constructor() {
super();
// Add statustext hover
}
set_value(new_value)

View File

@ -20,7 +20,7 @@ import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
import {et2_baseWidget} from './et2_core_baseWidget'
import {et2_inputWidget} from "./et2_core_inputWidget";
import {expose} from "./expose";
import {et2_IDetachedDOM, et2_IExposable} from "./et2_core_interfaces";
import {et2_IDetachedDOM, et2_IExposable, et2_IInputNode} from "./et2_core_interfaces";
import {egw} from "../jsapi/egw_global";
/**
@ -168,10 +168,10 @@ export class et2_description extends expose(class et2_description extends et2_ba
(for_widget = this.getRoot().getWidgetById(this.options.for))
) && for_widget && for_widget.id)
{
if(for_widget.dom_id)
if(for_widget.dom_id || for_widget.getDOMNode().id)
{
for_id = for_widget.dom_id;
if(for_widget.instanceOf(et2_inputWidget) && for_widget.getInputNode() && for_widget.dom_id !== for_widget.getInputNode().id)
for_id = for_widget.dom_id || for_widget.getDOMNode().id;
if(for_widget.instanceOf(et2_IInputNode) && for_widget.getInputNode() && for_id !== for_widget.getInputNode().id)
{
for_id = for_widget.getInputNode().id;
}

View File

@ -161,11 +161,11 @@ egw.extend('tooltip', egw.MODULE_WND_LOCAL, function(_app, _wnd)
* It is important to remove all tooltips from all elements which are
* no longer needed, in order to prevent memory leaks.
*
* @param _elem is the element to which the tooltip should get bound. It
* has to be a jQuery node.
* @param _elem is the element to which the tooltip should get bound.
* @param _html is the html code which should be shown as tooltip.
*/
tooltipBind: function(_elem, _html, _isHtml) {
_elem = jQuery(_elem);
if (_html != '')
{
_elem.bind('mouseenter.tooltip', function(e) {
@ -222,6 +222,7 @@ egw.extend('tooltip', egw.MODULE_WND_LOCAL, function(_app, _wnd)
* removed. _elem has to be a jQuery node.
*/
tooltipUnbind: function(_elem) {
_elem = jQuery(_elem);
if (current_elem == _elem)
{
hide();