https://gotothepig.com/_content/BlazorComponentHeap.Core/js/bch-event-handlers.js

1//Preload the image
2var drgimg = document.createElement("img");
3drgimg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
4
5if (!Event.prototype.hasOwnProperty('path')) {
6    Object.defineProperty(Event.prototype, 'path', {
7        get() { return this.composedPath(); }
8    });
9}
10
11if (!Event.prototype.hasOwnProperty('path')) {
12    Object.defineProperty(Event.prototype, 'path', {
13        get() { return this.composedPath(); }
14    });
15}
16
17// for Safari and Firefox
18if (!("path" in MouseEvent.prototype)) {
19    Object.defineProperty(MouseEvent.prototype, "path", {
20        get: function () {
21
22            var path = [];
23            var currentElem = this.target;
24            while (currentElem) {
25                path.push(currentElem);
26                currentElem = currentElem.parentElement;
27            }
28            if (path.indexOf(window) === -1 && path.indexOf(document) === -1)
29                path.push(document);
30            if (path.indexOf(window) === -1)
31                path.push(window);
32            return path;
33        }
34    });
35}
36
37function getPathCoordinates(event) {
38    const pageX = event.pageX | 0;
39    const pageY = event.pageY | 0;
40
41    const pathCoordinates = event.composedPath().map(element => {
42        if (element.getBoundingClientRect) {
43            const viewportOffset = element.getBoundingClientRect();
44
45            return {
46                x: pageX - viewportOffset.left,
47                y: pageY - viewportOffset.top,
48                clientWidth: element.clientWidth,
49                clientHeight: element.clientHeight,
50                scrollTop: element.scrollTop,
51                classList: element.classList.value,
52                id: element.id
53            };
54        }
55    }).filter(x => x);
56
57    return pathCoordinates;
58}
59
60function getPathCoordinatesByPos(x, y) {
61    let element = document.elementFromPoint(x, y);
62    const path = [];
63
64    while (element && element !== document.body) {
65        path.push(element);
66        element = element.parentElement;
67    }
68
69    const pathCoordinates = getPathCoordinates({
70        pageX: x,
71        pageY: y,
72        path: path
73    });
74
75    return pathCoordinates;
76}
77
78const bchGhostElement = document.createElement('div');
79bchGhostElement.style.opacity = 0;
80var bchGhostElementAppended = false;
81
82Blazor.registerCustomEventType('extscroll', {
83    browserEventName: 'scroll',
84    createEventArgs: event => {
85
86        return {
87            clientHeight: event.target.clientHeight,
88            scrollHeight: event.target.scrollHeight,
89            scrollTop: event.target.scrollTop,
90            clientWidth: event.target.clientWidth
91        };
92    }
93});
94
95Blazor.registerCustomEventType('extdragstart', {
96    browserEventName: 'dragstart',
97    createEventArgs: event => {
98
99        event.dataTransfer.effectAllowed = "copyMove";
100
101        if (!bchGhostElementAppended) {
102            document.body.appendChild(bchGhostElement);
103            bchGhostElementAppended = true;
104        }
105
106        var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
107
108        if (!isSafari) {
109            event.dataTransfer.setDragImage(bchGhostElement, 0, 0);
110        } else {
111            event.dataTransfer.setDragImage(drgimg, 0, 0);
112        }
113
114        setTimeout(function () {
115            event.target.setAttribute('dragging', '');
116        }, 0);
117
118        const pathCoordinates = getPathCoordinates(event);
119
120        return {
121            offsetX: event.offsetX,
122            offsetY: event.offsetY,
123            pageX: event.pageX,
124            pageY: event.pageY,
125            screenX: event.screenX,
126            screenY: event.screenY,
127
128            pathCoordinates: pathCoordinates
129        };
130    }
131});
132
133Blazor.registerCustomEventType('extdragend', {
134    browserEventName: 'dragend',
135    createEventArgs: event => {
136        event.target.removeAttribute('dragging');
137        return event;
138    }
139});
140
141Blazor.registerCustomEventType('extmousewheel', {
142    browserEventName: 'mousewheel',
143    createEventArgs: event => {
144
145        // event.preventDefault();
146        // event.stopPropagation();
147        // event.returnValue = false;

148
149        const x = event.clientX - event.target.offsetLeft;
150        const y = event.clientY - event.target.offsetTop;
151        const pathCoordinates = getPathCoordinates(event);
152
153        return {
154            x: x,
155            y: y,
156            deltaX: event.deltaX,
157            deltaY: event.deltaY,
158            pathCoordinates: pathCoordinates
159        };
160    }
161});
162
163// Blazor.registerCustomEventType('mouseleave', {
164//     browserEventName: 'mouseleave',
165//     createEventArgs: event => {
166//
167//         const pathCoordinates = getPathCoordinates(event);
168//
169//         return {
170//             offsetX: event.offsetX,
171//             offsetY: event.offsetY,
172//             pageX: event.pageX,
173//             pageY: event.pageY,
174//             screenX: event.screenX,
175//             screenY: event.screenY,
176//
177//             pathCoordinates: pathCoordinates
178//         };
179//     }
180// });
181
182Blazor.registerCustomEventType('extmousedown', {
183    browserEventName: 'mousedown',
184    createEventArgs: event => {
185
186        const x = event.clientX - event.target.offsetLeft;
187        const y = event.clientY - event.target.offsetTop;
188        const pathCoordinates = getPathCoordinates(event);
189
190        return {
191            x: x,
192            y: y,
193            deltaX: event.deltaX,
194            deltaY: event.deltaY,
195            pageX: event.pageX,
196            pageY: event.pageY,
197            clientWidth: event.target.clientWidth,
198            clientHeight: event.target.clientHeight,
199            pathCoordinates: pathCoordinates
200        };
201    }
202});
203
204Blazor.registerCustomEventType('exttouchstart', {
205    browserEventName: 'touchstart',
206    createEventArgs: event => {
207
208        const touches = Object.entries(event.touches).map((value, key) => {
209            const touch = value[1];
210
211            return {
212                x: touch.clientX - event.target.offsetLeft,
213                y: touch.clientY - event.target.offsetTop,
214                clientWidth: event.target.clientWidth,
215                clientHeight: event.target.clientHeight,
216                clientX: touch.clientX,
217                clientY: touch.clientY,
218                pageX: touch.pageX,
219                pageY: touch.pageY
220            }
221        });
222
223        let element = document.elementFromPoint(touches[0].pageX, touches[0].pageY);
224        const path = [];
225
226        while (element && element !== document.body) {
227            path.push(element);
228            element = element.parentElement;
229        }
230
231        const pathCoordinates = getPathCoordinates({
232            pageX: touches[0].pageX,
233            pageY: touches[0].pageY,
234            path: path
235        });
236
237        return {
238            touches: touches,
239            pathCoordinates: pathCoordinates
240        };
241    }
242});