DEV: adds mouse{Over,Out} and touch{Start,End} to widgets (#10003)

app/assets/javascripts/discourse/app/widgets/hooks.js

@@ -13,6 +13,10 @@ const CHANGE_ATTRIBUTE_NAME = "_discourse_change_widget";
 const MOUSE_DOWN_ATTRIBUTE_NAME = "_discourse_mouse_down_widget";
 const MOUSE_UP_ATTRIBUTE_NAME = "_discourse_mouse_up_widget";
 const MOUSE_MOVE_ATTRIBUTE_NAME = "_discourse_mouse_move_widget";
+const MOUSE_OVER_ATTRIBUTE_NAME = "_discourse_mouse_over_widget";
+const MOUSE_OUT_ATTRIBUTE_NAME = "_discourse_mouse_out_widget";
+const TOUCH_START_ATTRIBUTE_NAME = "_discourse_touch_start_widget";
+const TOUCH_END_ATTRIBUTE_NAME = "_discourse_touch_end_widget";
 
 function buildHook(attributeName, setAttr) {
   return class {
@@ -54,6 +58,10 @@ export const WidgetChangeHook = buildHook(CHANGE_ATTRIBUTE_NAME);
 export const WidgetMouseUpHook = buildHook(MOUSE_UP_ATTRIBUTE_NAME);
 export const WidgetMouseDownHook = buildHook(MOUSE_DOWN_ATTRIBUTE_NAME);
 export const WidgetMouseMoveHook = buildHook(MOUSE_MOVE_ATTRIBUTE_NAME);
+export const WidgetMouseOverHook = buildHook(MOUSE_OVER_ATTRIBUTE_NAME);
+export const WidgetMouseOutHook = buildHook(MOUSE_OUT_ATTRIBUTE_NAME);
+export const WidgetTouchStartHook = buildHook(TOUCH_START_ATTRIBUTE_NAME);
+export const WidgetTouchEndHook = buildHook(TOUCH_END_ATTRIBUTE_NAME);
 
 function nodeCallback(node, attrName, cb, options = { rerender: true }) {
   const { rerender } = options;
@@ -112,6 +120,18 @@ WidgetClickHook.setupDocumentCallback = function() {
     }
   };
 
+  $(document).on("mouseover.discourse-widget", e => {
+    nodeCallback(e.target, MOUSE_OVER_ATTRIBUTE_NAME, w => w.mouseOver(e), {
+      rerender: false
+    });
+  });
+
+  $(document).on("mouseout.discourse-widget", e => {
+    nodeCallback(e.target, MOUSE_OUT_ATTRIBUTE_NAME, w => w.mouseOut(e), {
+      rerender: false
+    });
+  });
+
   document.addEventListener("touchmove", onDrag, {
     passive: false,
     capture: true
@@ -202,6 +222,18 @@ WidgetClickHook.setupDocumentCallback = function() {
     });
   });
 
+  $(document).on("touchstart.discourse-widget", e => {
+    nodeCallback(e.target, TOUCH_START_ATTRIBUTE_NAME, w => w.touchStart(e), {
+      rerender: false
+    });
+  });
+
+  $(document).on("touchend.discourse-widget", e => {
+    nodeCallback(e.target, TOUCH_END_ATTRIBUTE_NAME, w => w.touchEnd(e), {
+      rerender: false
+    });
+  });
+
   $(document).on("mousedown.discourse-widget", e => {
     nodeCallback(e.target, MOUSE_DOWN_ATTRIBUTE_NAME, w => {
       w.mouseDown(e);

app/assets/javascripts/discourse/app/widgets/widget.js

@@ -11,7 +11,11 @@ import {
   WidgetChangeHook,
   WidgetMouseUpHook,
   WidgetMouseDownHook,
-  WidgetMouseMoveHook
+  WidgetMouseMoveHook,
+  WidgetMouseOverHook,
+  WidgetMouseOutHook,
+  WidgetTouchStartHook,
+  WidgetTouchEndHook
 } from "discourse/widgets/hooks";
 import { h } from "virtual-dom";
 import DecoratorHelper from "discourse/widgets/decorator-helper";
@@ -410,6 +414,22 @@ export default class Widget {
       properties["widget-mouse-move"] = new WidgetMouseMoveHook(this);
     }
 
+    if (this.mouseOver) {
+      properties["widget-mouse-over"] = new WidgetMouseOverHook(this);
+    }
+
+    if (this.mouseOut) {
+      properties["widget-mouse-out"] = new WidgetMouseOutHook(this);
+    }
+
+    if (this.touchStart) {
+      properties["widget-touch-start"] = new WidgetTouchStartHook(this);
+    }
+
+    if (this.touchEnd) {
+      properties["widget-touch-end"] = new WidgetTouchEndHook(this);
+    }
+
     const attributes = properties["attributes"] || {};
     properties.attributes = attributes;