From e19459185a55c237c361a9d4704005dc5351d94f Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Wed, 29 Jan 2020 17:19:12 +0100 Subject: [PATCH] DEV: new widget hooks mousemove/mouseup/mousedown/doubleclick (#8807) --- .../discourse/widgets/hooks.js.es6 | 26 +++++++++++++++++++ .../discourse/widgets/widget.js.es6 | 21 ++++++++++++++- 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/discourse/widgets/hooks.js.es6 b/app/assets/javascripts/discourse/widgets/hooks.js.es6 index 979c45a82d7..0d1dcd4b9f2 100644 --- a/app/assets/javascripts/discourse/widgets/hooks.js.es6 +++ b/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; }; diff --git a/app/assets/javascripts/discourse/widgets/widget.js.es6 b/app/assets/javascripts/discourse/widgets/widget.js.es6 index 10f7ef50c21..dd30201007c 100644 --- a/app/assets/javascripts/discourse/widgets/widget.js.es6 +++ b/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;