DEV: adds mouse{Over,Out} and touch{Start,End} to widgets (#10003)
This commit is contained in:
parent
415c1bb9e1
commit
23ed16339f
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in New Issue