DEV: new widget hooks mousemove/mouseup/mousedown/doubleclick (#8807)

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

@@ -1,6 +1,7 @@
 /*eslint no-loop-func:0*/
 
 const CLICK_ATTRIBUTE_NAME = "_discourse_click_widget";
+const DOUBLE_CLICK_ATTRIBUTE_NAME = "_discourse_double_click_widget";
 const CLICK_OUTSIDE_ATTRIBUTE_NAME = "_discourse_click_outside_widget";
 const MOUSE_DOWN_OUTSIDE_ATTRIBUTE_NAME =
   "_discourse_mouse_down_outside_widget";
@@ -9,6 +10,9 @@ const KEY_DOWN_ATTRIBUTE_NAME = "_discourse_key_down_widget";
 const DRAG_ATTRIBUTE_NAME = "_discourse_drag_widget";
 const INPUT_ATTRIBUTE_NAME = "_discourse_input_widget";
 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";
 
 function buildHook(attributeName, setAttr) {
   return class {
@@ -33,6 +37,7 @@ function buildHook(attributeName, setAttr) {
 }
 
 export const WidgetClickHook = buildHook(CLICK_ATTRIBUTE_NAME);
+export const WidgetDoubleClickHook = buildHook(DOUBLE_CLICK_ATTRIBUTE_NAME);
 export const WidgetClickOutsideHook = buildHook(
   CLICK_OUTSIDE_ATTRIBUTE_NAME,
   "data-click-outside"
@@ -46,6 +51,9 @@ export const WidgetKeyDownHook = buildHook(KEY_DOWN_ATTRIBUTE_NAME);
 export const WidgetDragHook = buildHook(DRAG_ATTRIBUTE_NAME);
 export const WidgetInputHook = buildHook(INPUT_ATTRIBUTE_NAME);
 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);
 
 function nodeCallback(node, attrName, cb, options = { rerender: true }) {
   const { rerender } = options;
@@ -136,6 +144,10 @@ WidgetClickHook.setupDocumentCallback = function() {
     }
   );
 
+  $(document).on("dblclick.discourse-widget", e => {
+    nodeCallback(e.target, DOUBLE_CLICK_ATTRIBUTE_NAME, w => w.doubleClick(e));
+  });
+
   $(document).on("click.discourse-widget", e => {
     nodeCallback(e.target, CLICK_ATTRIBUTE_NAME, w => w.click(e));
 
@@ -190,5 +202,19 @@ WidgetClickHook.setupDocumentCallback = function() {
     });
   });
 
+  $(document).on("mousedown.discourse-widget", e => {
+    nodeCallback(e.target, MOUSE_DOWN_ATTRIBUTE_NAME, w => {
+      w.mouseDown(e);
+    });
+  });
+
+  $(document).on("mouseup.discourse-widget", e => {
+    nodeCallback(e.target, MOUSE_UP_ATTRIBUTE_NAME, w => w.mouseUp(e));
+  });
+
+  $(document).on("mousemove.discourse-widget", e => {
+    nodeCallback(e.target, MOUSE_MOVE_ATTRIBUTE_NAME, w => w.mouseMove(e));
+  });
+
   _watchingDocument = true;
 };

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

@@ -1,12 +1,16 @@
 import {
   WidgetClickHook,
+  WidgetDoubleClickHook,
   WidgetClickOutsideHook,
   WidgetKeyUpHook,
   WidgetKeyDownHook,
   WidgetMouseDownOutsideHook,
   WidgetDragHook,
   WidgetInputHook,
-  WidgetChangeHook
+  WidgetChangeHook,
+  WidgetMouseUpHook,
+  WidgetMouseDownHook,
+  WidgetMouseMoveHook
 } from "discourse/widgets/hooks";
 import { h } from "virtual-dom";
 import DecoratorHelper from "discourse/widgets/decorator-helper";
@@ -371,6 +375,9 @@ export default class Widget {
     if (this.click) {
       properties["widget-click"] = new WidgetClickHook(this);
     }
+    if (this.doubleClick) {
+      properties["widget-double-click"] = new WidgetDoubleClickHook(this);
+    }
 
     if (this.mouseDownOutside) {
       properties["widget-mouse-down-outside"] = new WidgetMouseDownOutsideHook(
@@ -390,6 +397,18 @@ export default class Widget {
       properties["widget-change"] = new WidgetChangeHook(this);
     }
 
+    if (this.mouseDown) {
+      properties["widget-mouse-down"] = new WidgetMouseDownHook(this);
+    }
+
+    if (this.mouseUp) {
+      properties["widget-mouse-up"] = new WidgetMouseUpHook(this);
+    }
+
+    if (this.mouseMove) {
+      properties["widget-mouse-move"] = new WidgetMouseMoveHook(this);
+    }
+
     const attributes = properties["attributes"] || {};
     properties.attributes = attributes;