#8129 - move delayed popup show/hide to library

surveyjs · May 23, 2024 · 0d8bfef · 0d8bfef
1 parent 7a8b280
commit 0d8bfef
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 10 deletions.
diff --git a/src/actions/action.ts b/src/actions/action.ts
@@ -351,6 +351,53 @@ export abstract class BaseAction extends Base implements IAction {
       this.popupModel.hide();
     }
   }
+
+  @property({ defaultValue: false }) isPressed: boolean;
+  @property({ defaultValue: false }) isHovered: boolean;
+
+  public get classNames(): string {
+    return new CssClassBuilder()
+      .append("svc-toolbox__tool")
+      .append(this.css)
+      .append("svc-toolbox__tool--hovered", this.isHovered)
+      .append("svc-toolbox__tool--pressed", this.isPressed)
+      .toString();
+  }
+
+  private showPopupTimeout: NodeJS.Timeout;
+  private hidePopupTimeout: NodeJS.Timeout;
+  private clearPopupTimeouts() {
+    if (this.showPopupTimeout) clearTimeout(this.showPopupTimeout);
+    if (this.hidePopupTimeout) clearTimeout(this.hidePopupTimeout);
+  }
+  public showPopupDelayed(delay: number) {
+
+    this.clearPopupTimeouts();
+    this.showPopupTimeout = setTimeout(() => {
+      this.clearPopupTimeouts();
+
+      this.showPopup();
+
+    }, delay);
+  }
+
+  public hidePopupDelayed(delay: number) {
+    if (this.popupModel?.isVisible) {
+
+      this.clearPopupTimeouts();
+      this.hidePopupTimeout = setTimeout(() => {
+        this.clearPopupTimeouts();
+
+        this.hidePopup();
+        this.isHovered = false;
+
+      }, delay);
+    } else {
+      this.clearPopupTimeouts();
+      this.isHovered = false;
+    }
+  }
+
   protected abstract getEnabled(): boolean;
   protected abstract setEnabled(val: boolean): void;
   protected abstract getVisible(): boolean;

diff --git a/src/actions/container.ts b/src/actions/container.ts
@@ -147,6 +147,25 @@ export class ActionContainer<T extends BaseAction = Action> extends Base impleme
       this.sortItems();
     }
   }
+  @property({ defaultValue: 300 }) subItemsShowDelay: number;
+  @property({ defaultValue: 300 }) subItemsHideDelay: number;
+  protected popupAfterShowCallback(itemValue: T): void {
+
+  }
+
+  public mouseOverHandler(itemValue: T): void {
+    itemValue.isHovered = true;
+    this.actions.forEach(action => {
+      if (action === itemValue && !!itemValue.popupModel) {
+        itemValue.showPopupDelayed(this.subItemsShowDelay);
+        this.popupAfterShowCallback(itemValue);
+
+      } else if (!!action.popupModel && action.popupModel.isVisible) {
+        action.hidePopupDelayed(this.subItemsHideDelay);
+      }
+    });
+  }
+
   public initResponsivityManager(container: HTMLDivElement, delayedUpdateFunction?: (callback: () => void) => void): void {
     return;
   }

diff --git a/src/list.ts b/src/list.ts
@@ -190,19 +190,16 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
     }
   };
 
-  public onItemHover = (itemValue: T): void => {
-    this.actions.forEach(action => {
-      if (action === itemValue && !!itemValue.popupModel) {
-        itemValue.showPopup();
-        this.addScrollEventListener(() => {
-          itemValue.hidePopup();
-        });
-      } else if (!!action.popupModel && action.popupModel.isVisible) {
-        action.hidePopup();
-      }
+  protected popupAfterShowCallback(itemValue: T) {
+    this.addScrollEventListener(() => {
+      itemValue.hidePopup();
     });
   }
 
+  public onItemHover = (itemValue: T): void => {
+    this.mouseOverHandler(itemValue);
+  }
+
   public isItemDisabled: (itemValue: T) => boolean = (itemValue: T) => {
     return itemValue.enabled !== undefined && !itemValue.enabled;
   };