diff --git a/visual_console/playground/index.html b/visual_console/playground/index.html index 443368cc15..e7067a0f4e 100644 --- a/visual_console/playground/index.html +++ b/visual_console/playground/index.html @@ -212,7 +212,7 @@ // Generic props. id: 9, type: 2, // Simple value = 2 - label: '

Simple Value: 10

', + label: '

Simple Value: (_VALUE_)

', isLinkEnabled: false, isOnTop: false, parentId: null, diff --git a/visual_console/src/Item.ts b/visual_console/src/Item.ts index 0b4de42c61..84fa84f7fb 100644 --- a/visual_console/src/Item.ts +++ b/visual_console/src/Item.ts @@ -132,8 +132,7 @@ abstract class VisualConsoleItem { * when hovered, etc. */ this.elementRef = this.createContainerDomElement(); - this.labelElementRef = document.createElement("div"); - this.labelElementRef.className = "visual-console-item-label"; + this.labelElementRef = this.createLabelDomElement(); /* * Get a HTMLElement which represents the custom view @@ -142,11 +141,6 @@ abstract class VisualConsoleItem { */ this.childElementRef = this.createDomElement(); - // Add the label if it exists. - if (this.props.label && this.props.label.length) { - this.labelElementRef.innerHTML = this.props.label; - } - // Insert the elements into the container. this.elementRef.append(this.childElementRef, this.labelElementRef); @@ -172,6 +166,21 @@ abstract class VisualConsoleItem { return box; } + /** + * To create a new label for the visual console item. + * @return Item label. + */ + protected createLabelDomElement(): HTMLElement { + const element = document.createElement("div"); + element.className = "visual-console-item-label"; + // Add the label if it exists. + if (this.props.label && this.props.label.length) { + element.innerHTML = this.props.label; + } + + return element; + } + /** * Public accessor of the `props` property. * @return Properties. @@ -230,8 +239,7 @@ abstract class VisualConsoleItem { } // Change label. if (!prevProps || prevProps.label !== this.props.label) { - this.labelElementRef.innerHTML = - this.props.label != null ? this.props.label : ""; + this.labelElementRef.innerHTML = this.createLabelDomElement().innerHTML; } // Change label position. if (!prevProps || prevProps.labelPosition !== this.props.labelPosition) { diff --git a/visual_console/src/items/Label.ts b/visual_console/src/items/Label.ts index afd207f9fd..f3d85e60f0 100644 --- a/visual_console/src/items/Label.ts +++ b/visual_console/src/items/Label.ts @@ -28,22 +28,20 @@ export default class Label extends Item { public createDomElement(): HTMLElement { const element = document.createElement("div"); element.className = "label"; - // Size to 0, as the item content is managed using the label. - element.style.width = "0"; - element.style.height = "0"; - // The content of this item is already shown into the label container. - // element.innerHTML = this.props.label || ""; + element.innerHTML = this.props.label || ""; return element; } /** - * @override Item.resize - * To resize the item. + * @override Item.createLabelDomElement + * Create a new label for the visual console item. + * @return Item label. */ - public resizeElement(): void { - // Size to 0, as the item content is managed using the label. - this.childElementRef.style.width = `0`; - this.childElementRef.style.height = `0`; + public createLabelDomElement(): HTMLElement { + const element = document.createElement("div"); + element.className = "visual-console-item-label"; + // Always return an empty label. + return element; } } diff --git a/visual_console/src/items/SimpleValue.ts b/visual_console/src/items/SimpleValue.ts index 69d4b0d8e1..0c37791642 100644 --- a/visual_console/src/items/SimpleValue.ts +++ b/visual_console/src/items/SimpleValue.ts @@ -97,23 +97,27 @@ export default class SimpleValue extends Item { img.src = this.props.value; element.append(img); } else { - // Size to 0, as the item content is managed using the label. - element.style.width = "0"; - element.style.height = "0"; - // The content of this item is already shown into the label container. - // element.innerHTML = this.props.label || ""; + // Add the value to the label and show it. + let text = this.props.value; + if (this.props.label) { + text = this.props.label.replace(/\(?_VALUE_\)?/i, text); + } + + element.innerHTML = text; } return element; } /** - * @override Item.resize - * To resize the item. + * @override Item.createLabelDomElement + * Create a new label for the visual console item. + * @return Item label. */ - public resizeElement(): void { - // Size to 0, as the item content is managed using the label. - this.childElementRef.style.width = `0`; - this.childElementRef.style.height = `0`; + public createLabelDomElement(): HTMLElement { + const element = document.createElement("div"); + element.className = "visual-console-item-label"; + // Always return an empty label. + return element; } }