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

View File

@ -245,11 +245,11 @@ jQuery.event.special.dbltap = {
var handleObj = event.handleObj, var handleObj = event.handleObj,
targetData = jQuery.data(event.target), targetData = jQuery.data(event.target),
now = new Date().getTime(), now = new Date().getTime(),
delta = targetData.lastTouch ? now - targetData.lastTouch : 0, delta = targetData.lastTouchEnd ? now - targetData.lastTouchEnd : 0,
delay = delay == null ? 300 : delay; delay = delay == null ? 300 : delay;
if (delta < delay && delta > 30) { if (delta < delay && delta > 30) {
targetData.lastTouch = null; targetData.lastTouchEnd = null;
event.type = handleObj.origType; event.type = handleObj.origType;
['clientX', 'clientY', 'pageX', 'pageY'].forEach(function (property) { ['clientX', 'clientY', 'pageX', 'pageY'].forEach(function (property) {
event[property] = event.originalEvent.changedTouches[0][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 // let jQuery handle the triggering of "dbltap" event handlers
handleObj.handler.apply(this, arguments); handleObj.handler.apply(this, arguments);
} else { } 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 * This namespace is the main entry point of AntOS
* API * API

View File

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

View File

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

View File

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

View File

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