banananetwork
/
roundcubemail-swipe
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

basic pointer event support in Edge

Browse Source
dev_contacts
PhilW 7 years ago
parent 77a88d218b
commit c7872e75d1
6 changed files with 63 additions and 24 deletions
Show Stats Download Patch File Download Diff File

1
CHANGELOG
Unescape Escape View File

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

7
README.md
Unescape Escape View File

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

6
skins/elastic/menu.html
Unescape Escape View File

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

3
skins/elastic/swipe.less
Unescape Escape View File

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

2
skins/elastic/swipe.min.css vendored
Unescape Escape View File

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

68
swipe.js
Unescape Escape View File

@ -21,11 +21,10 @@ rcube_webmail.prototype.swipe_position_target = function(obj, pos, vertical) {
if (pos)
translate = (vertical ? 'translatey' : 'translatex') + '('+ pos +'px)';
$(obj).css({
'-webkit-transform': translate,
'-ms-transform': translate,
'transform': translate
});
if (bw.edge) // Edge does not support transform on <tr>s
$(obj).children('td').css('transform', translate);
else
$(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) {
touchstart.x = e.originalEvent.targetTouches[0].pageX;
touchstart.y = e.originalEvent.targetTouches[0].pageY;
.on(touchevents.startevent, function(e) {
if (!rcmail.env.swipe_active) {
touchstart.x = touchevents.pos(e, true);
touchstart.y = touchevents.pos(e, false);
touchstart.id = touchevents.id(e);
}
})
.on('touchmove', function(e) {
// make sure no other swipes are active
if (rcmail.env.swipe_active && rcmail.env.swipe_active != opts.axis)
.on(touchevents.moveevent, function(e) {
// make sure no other swipes are active and no other pointers
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 changeY = e.originalEvent.targetTouches[0].pageY - touchstart.y;
var changeX = touchevents.pos(e, true) - touchstart.x;
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) {
if (rcmail.env.swipe_active && rcmail.env.swipe_active == opts.axis && opts.target_obj.hasClass('swipe-active')) {
.on(touchevents.endevent, function(e) {
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 {

Write Preview
Loading…
Cancel
Save