basic pointer event support in Edge

CHANGELOG

@@ -1,6 +1,7 @@
 Roundcube Webmail Swipe
 =======================
 
+ * Initial support for pointer events
  * Add hooks for other plugins to interact with
  * Respect dont_override config
  * Respect disabled_actions config

README.md

@@ -1,7 +1,7 @@
 Roundcube Webmail Swipe
 =======================
 This plugin adds left/right/down swipe actions to entries in the the message
-list on touch devices (tables/phones) with browsers that support touch events.
+list on touch devices (tables/phones).
 
 ATTENTION
 ---------
@@ -21,6 +21,11 @@ as a linked part of the plugin and therefore skins DO NOT fall under the
 provisions of the GPL license. See the README file located in the core skins
 folder for details on the skin license.
 
+Known issues
+------------
+* Only horizontal actions work with pointer events (eg. Edge)
+* No support in IE
+
 Install
 -------
 * Place this plugin folder into plugins directory of Roundcube

skins/elastic/menu.html

@@ -2,7 +2,7 @@
     <fieldset class="swipe">
         <legend><roundcube:label name="swipe.swipeactions" /></legend>
         <roundcube:if condition="!in_array('swipe_actions.messagelist.left', (array)config:dont_override)" />
-        <div class="form-group row">
+        <div class="form-group row swipeoptions-left">
             <label for="swipeoptions-left" class="col-form-label col-sm-4"><roundcube:label name="swipe.swipeleft" /></label>
             <div class="col-sm-8">
 		        <roundcube:object name="swipeoptionslist" fieldname="swipe_left" id="swipeoptions-left" class="form-control" axis="horizontal" />
@@ -10,7 +10,7 @@
         </div>
         <roundcube:endif />
         <roundcube:if condition="!in_array('swipe_actions.messagelist.right', (array)config:dont_override)" />
-        <div class="form-group row">
+        <div class="form-group row swipeoptions-right">
             <label for="swipeoptions-right" class="col-form-label col-sm-4"><roundcube:label name="swipe.swiperight" /></label>
             <div class="col-sm-8">
                 <roundcube:object name="swipeoptionslist" fieldname="swipe_right" id="swipeoptions-right" class="form-control" axis="horizontal" />
@@ -18,7 +18,7 @@
         </div>
         <roundcube:endif />
         <roundcube:if condition="!in_array('swipe_actions.messagelist.down', (array)config:dont_override)" />
-        <div class="form-group row">
+        <div class="form-group row swipeoptions-down">
             <label for="swipeoptions-down" class="col-form-label col-sm-4"><roundcube:label name="swipe.swipedown" /></label>
             <div class="col-sm-8">
                 <roundcube:object name="swipeoptionslist" fieldname="swipe_down" id="swipeoptions-down" class="form-control" axis="vertical" />

skins/elastic/swipe.less

@@ -128,7 +128,8 @@
   }
 }
 
-.swipe-active {
+.swipe-active,
+.swipe-active > td {
   background-color:@color-layout-list-background;
 }
 

skins/elastic/swipe.min.css

@@ -1 +1 @@
-#swipe-action{position:absolute;background-color:#f1f3f4;color:#161b1d;display:flex;align-items:center;border-collapse:collapse}#swipe-action.checkmail,#swipe-action.select,#swipe-action.deselect{background-color:#8b9fa7;color:#fff}#swipe-action.delete{background-color:#ff5552;color:#fff}#swipe-action.flagged,#swipe-action.unflagged,#swipe-action.read,#swipe-action.unread{background-color:#37beff;color:#fff}#swipe-action.forward,#swipe-action.reply,#swipe-action.replyall{background-color:#41b849;color:#fff}#swipe-action.move,#swipe-action.archive{background-color:#ffd452;color:#fff}#swipe-action>div.left{position:absolute;right:.5em}#swipe-action>div.down{margin:0 auto}#swipe-action>div.down>span::before{width:auto;float:none;margin:0;margin-bottom:.2em;padding:0}#swipe-action>div>span{line-height:100%;font-size:1.2em}#swipe-action>div>span::before{font-size:1.25em;display:block;float:left;margin:0 .25rem 0 0;width:1.18em;height:1em;font-family:'Icons';font-style:normal;font-weight:900;text-decoration:inherit;text-align:center;speak:none;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:0 1.25em 0 .5em}#swipe-action>div>span.checkmail::before{content:"\f021"}#swipe-action>div>span.delete::before{content:"\f2ed"}#swipe-action>div>span.flagged::before{content:"\f024"}#swipe-action>div>span.forward::before{content:"\f064"}#swipe-action>div>span.unflagged::before{content:"\f024";font-weight:400}#swipe-action>div>span.move::before{content:"\f0b2"}#swipe-action>div>span.read::before{content:"\f005";font-weight:400}#swipe-action>div>span.unread::before{content:"\f005"}#swipe-action>div>span.reply::before{content:"\f3e5"}#swipe-action>div>span.replyall::before{content:"\f122"}#swipe-action>div>span.select::before{content:"\f14a";font-weight:400}#swipe-action>div>span.deselect::before{content:"\f0c8";font-weight:400}#swipe-action>div>span.archive::before{content:"\f187"}.swipe-active{background-color:#fff}#messagelist.swipe-active{height:100%}.swipe-noscroll{overflow:hidden !important}
+#swipe-action{position:absolute;background-color:#f1f3f4;color:#161b1d;display:flex;align-items:center;border-collapse:collapse}#swipe-action.checkmail,#swipe-action.select,#swipe-action.deselect{background-color:#8b9fa7;color:#fff}#swipe-action.delete{background-color:#ff5552;color:#fff}#swipe-action.flagged,#swipe-action.unflagged,#swipe-action.read,#swipe-action.unread{background-color:#37beff;color:#fff}#swipe-action.forward,#swipe-action.reply,#swipe-action.replyall{background-color:#41b849;color:#fff}#swipe-action.move,#swipe-action.archive{background-color:#ffd452;color:#fff}#swipe-action>div.left{position:absolute;right:.5em}#swipe-action>div.down{margin:0 auto}#swipe-action>div.down>span::before{width:auto;float:none;margin:0;margin-bottom:.2em;padding:0}#swipe-action>div>span{line-height:100%;font-size:1.2em}#swipe-action>div>span::before{font-size:1.25em;display:block;float:left;margin:0 .25rem 0 0;width:1.18em;height:1em;font-family:'Icons';font-style:normal;font-weight:900;text-decoration:inherit;text-align:center;speak:none;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:0 1.25em 0 .5em}#swipe-action>div>span.checkmail::before{content:"\f021"}#swipe-action>div>span.delete::before{content:"\f2ed"}#swipe-action>div>span.flagged::before{content:"\f024"}#swipe-action>div>span.forward::before{content:"\f064"}#swipe-action>div>span.unflagged::before{content:"\f024";font-weight:400}#swipe-action>div>span.move::before{content:"\f0b2"}#swipe-action>div>span.read::before{content:"\f005";font-weight:400}#swipe-action>div>span.unread::before{content:"\f005"}#swipe-action>div>span.reply::before{content:"\f3e5"}#swipe-action>div>span.replyall::before{content:"\f122"}#swipe-action>div>span.select::before{content:"\f14a";font-weight:400}#swipe-action>div>span.deselect::before{content:"\f0c8";font-weight:400}#swipe-action>div>span.archive::before{content:"\f187"}.swipe-active,.swipe-active>td{background-color:#fff}#messagelist.swipe-active{height:100%}.swipe-noscroll{overflow:hidden !important}

swipe.js

@@ -21,11 +21,10 @@ rcube_webmail.prototype.swipe_position_target = function(obj, pos, vertical) {
     if (pos)
         translate = (vertical ? 'translatey' : 'translatex') + '('+ pos +'px)';
 
-    $(obj).css({
+    if (bw.edge) // Edge does not support transform on <tr>s
-        '-webkit-transform': translate,
+        $(obj).children('td').css('transform', translate);
-        '-ms-transform': translate,
+    else
-        'transform': translate
+        $(obj).css('transform', translate);
-    });
 };
 
 rcube_webmail.prototype.swipe_list_selection = function(uid, show, prev_sel) {
@@ -206,21 +205,48 @@ rcube_webmail.prototype.swipe_select_action = function(direction, obj) {
 };
 
 rcube_webmail.prototype.swipe_event = function(opts) {
+    var touchevents = {
+        'startevent': 'touchstart',
+        'moveevent': 'touchmove',
+        'endevent': 'touchend',
+        'id': function(e) { return 1; },
+        'pos': function(e, x) { return e.originalEvent.targetTouches[0][ x ? 'pageX' : 'pageY']; }
+    };
     var touchstart = {};
 
+    // use pointer events if the browser supports them but not touch (eg Edge)
+    if (bw.pointer && !bw.touch) {
+        // TODO find a way to allow vertical actions but also scrolling of message list in Edge
+        opts.source_obj.css('touch-action', 'pan-y');
+        if (opts.axis == 'vertical')
+            return;
+
+        touchevents = {
+            'startevent': 'pointerdown',
+            'moveevent': 'pointermove',
+            'endevent': 'pointerup',
+            'id': function(e) { return e.pointerId; },
+            'pos': function(e, x) { return e.originalEvent[ x ? 'pageX' : 'pageY']; }
+        };
+    }
+
     // swipe down on message list container
     opts.source_obj
-        .on('touchstart', function(e) {
+        .on(touchevents.startevent, function(e) {
-            touchstart.x = e.originalEvent.targetTouches[0].pageX;
+            if (!rcmail.env.swipe_active) {
-            touchstart.y = e.originalEvent.targetTouches[0].pageY;
+                touchstart.x = touchevents.pos(e, true);
+                touchstart.y = touchevents.pos(e, false);
+                touchstart.id = touchevents.id(e);
+            }
         })
-        .on('touchmove', function(e) {
+        .on(touchevents.moveevent, function(e) {
-            // make sure no other swipes are active
+            // make sure no other swipes are active and no other pointers
-            if (rcmail.env.swipe_active && rcmail.env.swipe_active != opts.axis)
+            if ((rcmail.env.swipe_active && rcmail.env.swipe_active != opts.axis) ||
+                touchstart.id != touchevents.id(e))
                 return;
 
-            var changeX = e.originalEvent.targetTouches[0].pageX - touchstart.x;
+            var changeX = touchevents.pos(e, true) - touchstart.x;
-            var changeY = e.originalEvent.targetTouches[0].pageY - touchstart.y;
+            var changeY = touchevents.pos(e, false) - touchstart.y;
 
             // stop the message row from sliding off the screen completely
             if (opts.axis == 'vertical') {
@@ -280,11 +306,11 @@ rcube_webmail.prototype.swipe_event = function(opts) {
                 rcmail.swipe_position_target(opts.target_obj, opts.axis == 'vertical' ? changeY : changeX, opts.axis == 'vertical');
 
                 if (opts.parent_obj)
-                    opts.parent_obj.on('touchmove', rcube_event.cancel);
+                    opts.parent_obj.on(touchevents.moveevent, rcube_event.cancel);
             }
         })
-        .on('touchend', function(e) {
+        .on(touchevents.endevent, function(e) {
-            if (rcmail.env.swipe_active && rcmail.env.swipe_active == opts.axis && opts.target_obj.hasClass('swipe-active')) {
+            if (touchstart.id == touchevents.id(e) && rcmail.env.swipe_active && rcmail.env.swipe_active == opts.axis && opts.target_obj.hasClass('swipe-active')) {
                 rcmail.swipe_position_target(opts.target_obj, 0, opts.axis == 'vertical');
 
                 var callback = null;
@@ -297,13 +323,13 @@ rcube_webmail.prototype.swipe_event = function(opts) {
                 rcmail.env.swipe_active = null;
 
                 if (opts.parent_obj)
-                    opts.parent_obj.off('touchmove', rcube_event.cancel);
+                    opts.parent_obj.off(touchevents.moveevent, rcube_event.cancel);
             }
         });
 }
 
 $(document).ready(function() {
-    if (window.rcmail && bw.touch && !((bw.ie || bw.edge) && bw.pointer)) {
+    if (window.rcmail && ((bw.touch && !bw.ie) || bw.pointer)) {
         rcmail.addEventListener('init', function() {
             var messagelist_container = $(rcmail.gui_objects.messagelist).parent();
             if (rcmail.message_list.draggable || !messagelist_container[0].addEventListener)
@@ -374,6 +400,12 @@ $(document).ready(function() {
                     $.each(['left', 'right', 'down'], function() {
                         $('select[name="swipe_' + this + '"]:visible').val(rcmail.env.swipe_actions[this]);
                     });
+
+                    if (bw.pointer && !bw.touch) {
+                        // TODO find a way to allow vertical actions but also scrolling of message list in Edge
+                        $('div.swipeoptions-down').hide();
+                    }
+
                     $('fieldset.swipe').show();
                 }
                 else {