diff --git a/app/assets/javascripts/discourse/app/widgets/hooks.js b/app/assets/javascripts/discourse/app/widgets/hooks.js index 0d1dcd4b9f2..aba09bb2365 100644 --- a/app/assets/javascripts/discourse/app/widgets/hooks.js +++ b/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); diff --git a/app/assets/javascripts/discourse/app/widgets/widget.js b/app/assets/javascripts/discourse/app/widgets/widget.js index 362428bf05a..99220973c8e 100644 --- a/app/assets/javascripts/discourse/app/widgets/widget.js +++ b/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;