Переглянути джерело

HUE-9182 [ui] Improve click handling for left assist context popover

Johan Ahlen 5 роки тому
батько
коміт
13032037fd

+ 6 - 5
desktop/core/src/desktop/js/ko/components/contextPopover/ko.contextPopover.js

@@ -35,8 +35,9 @@ import componentUtils from 'ko/components/componentUtils';
 import { GET_KNOWN_CONFIG_EVENT } from 'utils/hueConfig';
 
 export const CONTEXT_POPOVER_CLASS = 'hue-popover';
-export const HIDE_EVENT = 'context.popover.hide';
-export const SHOW_EVENT = 'context.popover.show';
+export const HIDE_CONTEXT_POPOVER_EVENT = 'context.popover.hide';
+export const CONTEXT_POPOVER_HIDDEN_EVENT = 'context.popover.hidden';
+export const SHOW_CONTEXT_POPOVER_EVENT = 'context.popover.show';
 export const NAME = 'context-popover';
 
 // prettier-ignore
@@ -566,7 +567,7 @@ const hidePopover = function() {
       ko.cleanNode($contextPopover[0]);
       $contextPopover.remove();
       $(document).off('click.context');
-      huePubSub.publish('context.popover.hidden');
+      huePubSub.publish(CONTEXT_POPOVER_HIDDEN_EVENT);
     }
   }
 };
@@ -867,9 +868,9 @@ componentUtils
       CONTEXT_POPOVER_TEMPLATE
   )
   .then(() => {
-    huePubSub.subscribe(HIDE_EVENT, hidePopover);
+    huePubSub.subscribe(HIDE_CONTEXT_POPOVER_EVENT, hidePopover);
 
-    huePubSub.subscribe(SHOW_EVENT, details => {
+    huePubSub.subscribe(SHOW_CONTEXT_POPOVER_EVENT, details => {
       hidePopover();
       const $contextPopover = $(
         '<div id="contextPopover" data-bind="component: { name: \'context-popover\', params: $data }" />'

+ 20 - 5
desktop/core/src/desktop/js/ko/components/contextPopover/ko.popoverOnHover.js

@@ -16,10 +16,10 @@
 
 import $ from 'jquery';
 import * as ko from 'knockout';
-import { CONTEXT_POPOVER_CLASS } from './ko.contextPopover';
+import { CONTEXT_POPOVER_CLASS, CONTEXT_POPOVER_HIDDEN_EVENT } from './ko.contextPopover';
 import huePubSub from 'utils/huePubSub';
 
-import { HIDE_EVENT } from './ko.contextPopover';
+import { HIDE_CONTEXT_POPOVER_EVENT } from './ko.contextPopover';
 
 const DEFAULT_DELAY = 700;
 
@@ -52,7 +52,7 @@ ko.bindingHandlers[NAME] = {
       hideTimeout = window.setTimeout(() => {
         visible = false;
         $(popoverSelector).off('.onHover');
-        huePubSub.publish(HIDE_EVENT);
+        huePubSub.publish(HIDE_CONTEXT_POPOVER_EVENT);
       }, options.delay);
     };
 
@@ -64,7 +64,7 @@ ko.bindingHandlers[NAME] = {
 
       showTimeout = window.setTimeout(() => {
         visible = true;
-        huePubSub.publish(HIDE_EVENT);
+        huePubSub.publish(HIDE_CONTEXT_POPOVER_EVENT);
         options.onHover.bind(bindingContext.$data)(
           bindingContext.$data,
           event,
@@ -73,6 +73,16 @@ ko.bindingHandlers[NAME] = {
       }, options.delay);
     };
 
+    $element.on('click.onHover', event => {
+      clearTimeouts();
+      visible = true;
+      options.onHover.bind(bindingContext.$data)(
+        bindingContext.$data,
+        event,
+        options.positionAdjustments
+      );
+    });
+
     $element.on('mouseenter.onHover', show);
 
     $element.on('mouseleave.onHover', () => {
@@ -90,12 +100,17 @@ ko.bindingHandlers[NAME] = {
       }
     });
 
+    const hiddenSub = huePubSub.subscribe(CONTEXT_POPOVER_HIDDEN_EVENT, () => {
+      visible = false;
+    });
+
     ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
       $element.off('.onHover');
       $(popoverSelector).off('.onHover');
       clearTimeouts();
+      hiddenSub.remove();
       if (visible) {
-        huePubSub.publish(HIDE_EVENT);
+        huePubSub.publish(HIDE_CONTEXT_POPOVER_EVENT);
       }
     });
   }

+ 7 - 2
desktop/core/src/desktop/js/ko/components/contextPopover/ko.popoverOnHover.test.js

@@ -20,7 +20,7 @@ import { koSetup } from 'jest/koTestUtils';
 
 import { NAME } from './ko.popoverOnHover';
 import huePubSub from 'utils/huePubSub';
-import { HIDE_EVENT } from './ko.contextPopover';
+import { HIDE_CONTEXT_POPOVER_EVENT } from './ko.contextPopover';
 
 describe('ko.popoverOnHover.js', () => {
   const setup = koSetup();
@@ -52,11 +52,16 @@ describe('ko.popoverOnHover.js', () => {
 
     // Mouse leaves
     let publishCalled = false;
-    huePubSub.subscribeOnce(HIDE_EVENT, () => {
+    huePubSub.subscribeOnce(HIDE_CONTEXT_POPOVER_EVENT, () => {
       publishCalled = true;
     });
     $(wrapper.firstChild).trigger('mouseleave');
     jest.runAllTimers();
     expect(publishCalled).toBeTruthy();
+
+    // Mouse clicks
+    callbackCalled = false;
+    $(wrapper.firstChild).trigger('click');
+    expect(callbackCalled).toBeTruthy();
   });
 });