fix: simulate contextmenu on mobile device

d.ts/antos.d.ts

@@ -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
                  *

src/core/core.ts

@@ -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

src/core/gui.ts

@@ -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]");

src/core/tags/ListViewTag.ts

@@ -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);

src/themes/system/afx-dock.css

@@ -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;

src/themes/system/antos.css

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