fix: simulate contextmenu on mobile device

This commit is contained in:
DanyLE 2024-01-08 17:13:21 +01:00 committed by Dany LE
parent 6ac2429dba
commit 5605d6c35a
6 changed files with 50 additions and 11 deletions

2
d.ts/antos.d.ts vendored
View File

@ -4164,7 +4164,6 @@ declare namespace OS {
* @type {TagEventCallback<ListItemEventData>}
* @memberof ListViewItemTag
*/
private _onctxmenu;
/**
* Click event callback placeholder
*
@ -4223,7 +4222,6 @@ declare namespace OS {
*
* @memberof ListViewItemTag
*/
set onctxmenu(v: TagEventCallback<ListViewItemTag>);
/**
* Set the item click event handle
*

View File

@ -245,11 +245,11 @@ jQuery.event.special.dbltap = {
var handleObj = event.handleObj,
targetData = jQuery.data(event.target),
now = new Date().getTime(),
delta = targetData.lastTouch ? now - targetData.lastTouch : 0,
delta = targetData.lastTouchEnd ? now - targetData.lastTouchEnd : 0,
delay = delay == null ? 300 : delay;
if (delta < delay && delta > 30) {
targetData.lastTouch = null;
targetData.lastTouchEnd = null;
event.type = handleObj.origType;
['clientX', 'clientY', 'pageX', 'pageY'].forEach(function (property) {
event[property] = event.originalEvent.changedTouches[0][property];
@ -258,11 +258,46 @@ jQuery.event.special.dbltap = {
// let jQuery handle the triggering of "dbltap" event handlers
handleObj.handler.apply(this, arguments);
} else {
targetData.lastTouch = now;
targetData.lastTouchEnd = now;
}
}
};
/**
* JQuery event-extensions to support long touch event on
* mobile device
*/
jQuery.event.special.longtouch = {
bindType: 'touchstart',
//delegateType: 'touchstart',
handle: function (evt: any) {
let targetData = jQuery.data(evt.target);
let handleObj = evt.handleObj;
targetData.lastTouchStart = new Date().getTime();
$(evt.target).on("touchend", (event) => {
let now = new Date().getTime();
let end_targetData = jQuery.data(event.target);
let delta = end_targetData.lastTouchStart ? now - end_targetData.lastTouchStart : 0;
$(event.target).off("touchend");
const offset_top = Math.abs(event.originalEvent.changedTouches[0].clientY - evt.originalEvent.changedTouches[0].clientY);
const offset_left = Math.abs(event.originalEvent.changedTouches[0].clientX - evt.originalEvent.changedTouches[0].clientX);
console.log(offset_left, offset_top);
if(delta > 1000 && offset_top < 10 && offset_left < 10)
{
['clientX', 'clientY', 'pageX', 'pageY'].forEach(function (property) {
evt[property] = event.originalEvent.changedTouches[0][property];
})
event.preventDefault();
evt.type = handleObj.origType;
handleObj.handler.apply(this, arguments);
}
});
}
};
/**
* This namespace is the main entry point of AntOS
* API

View File

@ -1099,7 +1099,7 @@ namespace OS {
const ctxmenu = $("#contextmenu")[0];
ctxmenu.uify(undefined);
$("#wrapper").on("contextmenu", (e) => bindContextMenu(e));
$("#wrapper").on(OS.mobile?"longtouch":"contextmenu", (e) => bindContextMenu(e as JQuery.MouseEventBase));
// tooltip
$(document).on("mouseover", function (e) {
const el: any = $(e.target).closest("[tooltip]");

View File

@ -42,7 +42,7 @@ namespace OS {
* @type {TagEventCallback<ListItemEventData>}
* @memberof ListViewItemTag
*/
private _onctxmenu: TagEventCallback<ListItemEventData>;
//private _onctxmenu: TagEventCallback<ListItemEventData>;
/**
* Click event callback placeholder
@ -77,7 +77,7 @@ namespace OS {
*/
constructor() {
super();
this._onselect = this._onctxmenu = this._onclick = this._ondbclick = this._onclose = (
this._onselect /*= this._onctxmenu*/ = this._onclick = this._ondbclick = this._onclose = (
e
) => {};
}
@ -134,9 +134,11 @@ namespace OS {
*
* @memberof ListViewItemTag
*/
/*
set onctxmenu(v: TagEventCallback<ListViewItemTag>) {
this._onctxmenu = v;
}
*/
/**
* Set the item click event handle
@ -173,10 +175,11 @@ namespace OS {
*/
protected mount(): void {
$(this).addClass("afx-list-item");
$(this.refs.item).on("contextmenu", (e) => {
/*
$(this.refs.item).on(OS.mobile?"longtouch":"contextmenu", (e) => {
this._onctxmenu({ id: this.aid, data: this });
});
*/
$(this.refs.item).on("click",(e) => {
this._onclick({ id: this.aid, data: this, originalEvent: e });
//e.stopPropagation();
@ -960,9 +963,10 @@ namespace OS {
el[0].uify(this.observable);
const element = el[0] as ListViewItemTag;
$(element).attr("list-id",this.aid);
/*
element.onctxmenu = (e) => {
return this.iclick(e, true);
};
};*/
element.onitemdbclick = (e) => {
this.idbclick(e);
this.iclick(e, false);

View File

@ -2,6 +2,7 @@ afx-apps-dock{
display: flex;
flex-direction: row;
overflow: hidden;
-webkit-user-select:none;
}
afx-apps-dock afx-button button{
width: 40px;

View File

@ -49,6 +49,7 @@ body
margin: 0;
right: 0;
user-select:none;
-webkit-user-select:none;
cursor: default;
padding:0px;
overflow: hidden;