tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-31 01:35:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Visual Console Refactor: added link management to the client items

Browse Source 
Former-commit-id: 4773fe8cbd5a7b434738648e7a8eef4fb012d38c
This commit is contained in:
Alejandro Gallardo Escobar 2019-04-09 16:07:40 +02:00
parent ed0857efad
commit bcab7fb46a
2 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
visual_console_client/playground/index.html
View File

@ -68,6 +68,7 @@
isOnTop: false, isOnTop: false,
parentId: 10, parentId: 10,
aclGroupId: null, aclGroupId: null,
link: "https://google.es",
// Position props. // Position props.
x: 300, x: 300,
y: 50, y: 50,

31
visual_console_client/src/Item.ts
View File

@ -40,6 +40,7 @@ export interface ItemProps extends Position, Size {
label: string | null; label: string | null;
labelPosition: "up" | "right" | "down" | "left"; labelPosition: "up" | "right" | "down" | "left";
isLinkEnabled: boolean; isLinkEnabled: boolean;
link: string | null;
isOnTop: boolean; isOnTop: boolean;
parentId: number | null; parentId: number | null;
aclGroupId: number | null; aclGroupId: number | null;
@ -98,6 +99,7 @@ export function itemBasePropsDecoder(data: UnknownObject): ItemProps | never {
label: notEmptyStringOr(data.label, null), label: notEmptyStringOr(data.label, null),
labelPosition: parseLabelPosition(data.labelPosition), labelPosition: parseLabelPosition(data.labelPosition),
isLinkEnabled: parseBoolean(data.isLinkEnabled), isLinkEnabled: parseBoolean(data.isLinkEnabled),
link: notEmptyStringOr(data.link, null),
isOnTop: parseBoolean(data.isOnTop), isOnTop: parseBoolean(data.isOnTop),
parentId: parseIntOr(data.parentId, null), parentId: parseIntOr(data.parentId, null),
aclGroupId: parseIntOr(data.aclGroupId, null), aclGroupId: parseIntOr(data.aclGroupId, null),
@ -113,7 +115,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
// Properties of the item. // Properties of the item.
private itemProps: Props; private itemProps: Props;
// Reference to the DOM element which will contain the item. // Reference to the DOM element which will contain the item.
public readonly elementRef: HTMLElement; public elementRef: HTMLElement;
private readonly labelElementRef: HTMLElement; private readonly labelElementRef: HTMLElement;
// Reference to the DOM element which will contain the view of the item which extends this class. // Reference to the DOM element which will contain the view of the item which extends this class.
protected readonly childElementRef: HTMLElement; protected readonly childElementRef: HTMLElement;
@ -165,7 +167,16 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
* @return Item box. * @return Item box.
*/ */
private createContainerDomElement(): HTMLElement { private createContainerDomElement(): HTMLElement {
const box: HTMLDivElement = document.createElement("div"); let box;
if (this.props.isLinkEnabled) {
box = document.createElement("a");
box as HTMLAnchorElement;
if (this.props.link) box.href = this.props.link;
} else {
box = document.createElement("div");
box as HTMLDivElement;
}
box.className = "visual-console-item"; box.className = "visual-console-item";
box.style.zIndex = this.props.isOnTop ? "2" : "1"; box.style.zIndex = this.props.isOnTop ? "2" : "1";
box.style.left = `${this.props.x}px`; box.style.left = `${this.props.x}px`;
@ -250,6 +261,22 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
if (!prevProps || prevProps.label !== this.props.label) { if (!prevProps || prevProps.label !== this.props.label) {
this.labelElementRef.innerHTML = this.createLabelDomElement().innerHTML; this.labelElementRef.innerHTML = this.createLabelDomElement().innerHTML;
} }
// Change link.
if (
prevProps &&
(prevProps.isLinkEnabled !== this.props.isLinkEnabled ||
(this.props.isLinkEnabled && prevProps.link !== this.props.link))
) {
const container = this.createContainerDomElement();
container.innerHTML = this.elementRef.innerHTML;
if (this.elementRef.parentNode !== null) {
this.elementRef.parentNode.replaceChild(container, this.elementRef);
}
// Changed the reference to the main element. It's ugly, but needed.
this.elementRef = container;
}
// Change label position. // Change label position.
if (!prevProps || prevProps.labelPosition !== this.props.labelPosition) { if (!prevProps || prevProps.labelPosition !== this.props.labelPosition) {
this.changeLabelPosition(this.props.labelPosition); this.changeLabelPosition(this.props.labelPosition);