mirror of
https://github.com/lxsang/antos-frontend.git
synced 2024-11-08 05:58:22 +01:00
fix: simulate contextmenu on mobile device
This commit is contained in:
parent
6ac2429dba
commit
5605d6c35a
2
d.ts/antos.d.ts
vendored
2
d.ts/antos.d.ts
vendored
@ -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
|
||||
*
|
||||
|
@ -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
|
||||
|
@ -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]");
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -49,6 +49,7 @@ body
|
||||
margin: 0;
|
||||
right: 0;
|
||||
user-select:none;
|
||||
-webkit-user-select:none;
|
||||
cursor: default;
|
||||
padding:0px;
|
||||
overflow: hidden;
|
||||
|
Loading…
Reference in New Issue
Block a user