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

fix touch event support

Browse Source
release-0.1
PhilW 6 years ago
parent 04f8ba9b30
commit b7e0161771
3 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File

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

@ -43,6 +43,7 @@
color: lighten(@color-black, 70%); color: lighten(@color-black, 70%);
top: 2em; top: 2em;
height: 1.5em; height: 1.5em;
z-index: 1000;
&.swipe_active, &.swipe_active,
&.swipe_mark { &.swipe_mark {

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

@ -1 +1 @@
#swipe-action{position:absolute;display:flex;align-items:center;border-collapse:collapse}#swipe-action.horizontal{background-color:#f1f3f4;color:#8b9fa7}#swipe-action.horizontal.swipe_active,#swipe-action.horizontal.swipe_mark{background-color:rgba(55,190,255,0.15);color:#37beff}#swipe-action.horizontal.swipe_danger{background-color:rgba(255,85,82,0.15);color:#ff5552}#swipe-action.horizontal.swipe_move{background-color:rgba(255,255,102,0.25);color:#ffd452}#swipe-action.horizontal.swipe_success,#swipe-action.horizontal.swipe_compose{background-color:rgba(65,184,73,0.15);color:#41b849}#swipe-action.vertical{background-color:transparent;color:#c5cfd3;top:2em;height:1.5em}#swipe-action.vertical.swipe_active,#swipe-action.vertical.swipe_mark{color:#37beff}#swipe-action.vertical.swipe_move{color:#ffd452}#swipe-action.vertical.swipe_danger{color:#ff5552}#swipe-action.vertical.swipe_success,#swipe-action.vertical.swipe_compose{color:#41b849}#swipe-action>.swipe-container{margin:0;padding:0;list-style-type:none}#swipe-action>.swipe-container .swipe-action{font-size:1.2em;opacity:1}#swipe-action>.swipe-container .swipe-action::before{margin:0 .25em 0 .5em;font-size:inherit}#swipe-action>.swipe-container.left{position:absolute;right:0}#swipe-action>.swipe-container.left .swipe-action::before{float:right;margin:0 .5em 0 .25em}#swipe-action>.swipe-container.down{margin:0 auto;background-color:#fff;border-radius:50%;box-shadow:0 0 10px #d4dbde}#swipe-action>.swipe-container.down .swipe-action::before{float:none;padding:0;margin:.4em;line-height:1;font-size:1.2em;width:auto;height:auto}#swipe-action>.swipe-container.down .swipe-action>.swipe-label{display:none}.swipe-active:not(#swipe-action),.swipe-active>td{background-color:#fff}.toolbar a.button.swipe{display:none}html.layout-small.touch:not(.ie) .toolbar a.button.swipe,html.layout-phone.touch:not(.ie) .toolbar a.button.swipe{display:inline-block}html.layout-small.touch:not(.ie) .toolbar a.button.swipe:before,html.layout-phone.touch:not(.ie) .toolbar a.button.swipe:before{content:"\f25a"}html.edge #swipeoptionsmenu>.swipeoptions-down{display:none} #swipe-action{position:absolute;display:flex;align-items:center;border-collapse:collapse}#swipe-action.horizontal{background-color:#f1f3f4;color:#8b9fa7}#swipe-action.horizontal.swipe_active,#swipe-action.horizontal.swipe_mark{background-color:rgba(55,190,255,0.15);color:#37beff}#swipe-action.horizontal.swipe_danger{background-color:rgba(255,85,82,0.15);color:#ff5552}#swipe-action.horizontal.swipe_move{background-color:rgba(255,255,102,0.25);color:#ffd452}#swipe-action.horizontal.swipe_success,#swipe-action.horizontal.swipe_compose{background-color:rgba(65,184,73,0.15);color:#41b849}#swipe-action.vertical{background-color:transparent;color:#c5cfd3;top:2em;height:1.5em;z-index:1000}#swipe-action.vertical.swipe_active,#swipe-action.vertical.swipe_mark{color:#37beff}#swipe-action.vertical.swipe_move{color:#ffd452}#swipe-action.vertical.swipe_danger{color:#ff5552}#swipe-action.vertical.swipe_success,#swipe-action.vertical.swipe_compose{color:#41b849}#swipe-action>.swipe-container{margin:0;padding:0;list-style-type:none}#swipe-action>.swipe-container .swipe-action{font-size:1.2em;opacity:1}#swipe-action>.swipe-container .swipe-action::before{margin:0 .25em 0 .5em;font-size:inherit}#swipe-action>.swipe-container.left{position:absolute;right:0}#swipe-action>.swipe-container.left .swipe-action::before{float:right;margin:0 .5em 0 .25em}#swipe-action>.swipe-container.down{margin:0 auto;background-color:#fff;border-radius:50%;box-shadow:0 0 10px #d4dbde}#swipe-action>.swipe-container.down .swipe-action::before{float:none;padding:0;margin:.4em;line-height:1;font-size:1.2em;width:auto;height:auto}#swipe-action>.swipe-container.down .swipe-action>.swipe-label{display:none}.swipe-active:not(#swipe-action),.swipe-active>td{background-color:#fff}.toolbar a.button.swipe{display:none}html.layout-small.touch:not(.ie) .toolbar a.button.swipe,html.layout-phone.touch:not(.ie) .toolbar a.button.swipe{display:inline-block}html.layout-small.touch:not(.ie) .toolbar a.button.swipe:before,html.layout-phone.touch:not(.ie) .toolbar a.button.swipe:before{content:"\f25a"}html.edge #swipeoptionsmenu>.swipeoptions-down{display:none}

28
swipe.js
Unescape Escape View File

@ -174,6 +174,7 @@ rcube_webmail.prototype.swipe = {
'moveevent': 'pointermove', 'moveevent': 'pointermove',
'endevent': 'pointerup', 'endevent': 'pointerup',
'cancelevent': 'pointercancel', 'cancelevent': 'pointercancel',
'minmove': 5,
'id': function(e) { return e.pointerId; }, 'id': function(e) { return e.pointerId; },
'type': function(e) { return e.pointerType; }, 'type': function(e) { return e.pointerType; },
'pos': function(e, x) { return e.originalEvent[ x ? 'pageX' : 'pageY']; }, 'pos': function(e, x) { return e.originalEvent[ x ? 'pageX' : 'pageY']; },
@ -187,6 +188,7 @@ rcube_webmail.prototype.swipe = {
$('#swipe-action').removeClass().hide(); $('#swipe-action').removeClass().hide();
$('.swipe-container').attr('class', rcmail.env.swipe_container_class); $('.swipe-container').attr('class', rcmail.env.swipe_container_class);
$('.swipe-action').attr('class', rcmail.env.swipe_button_class); $('.swipe-action').attr('class', rcmail.env.swipe_button_class);
rcmail.swipe.parent.css('touch-action', 'pan-y');
if (opts.parent_obj) if (opts.parent_obj)
opts.parent_obj.off(swipeevents.moveevent, rcube_event.cancel); opts.parent_obj.off(swipeevents.moveevent, rcube_event.cancel);
@ -200,6 +202,7 @@ rcube_webmail.prototype.swipe = {
swipeevents.moveevent = 'touchmove'; swipeevents.moveevent = 'touchmove';
swipeevents.endevent = 'touchend'; swipeevents.endevent = 'touchend';
swipeevents.cancelevent = 'touchcancel'; swipeevents.cancelevent = 'touchcancel';
swipeevents.minmove = 15;
swipeevents.id = function(e) { return e.changedTouches.length == 1 ? e.changedTouches[0].identifier : -1; }; swipeevents.id = function(e) { return e.changedTouches.length == 1 ? e.changedTouches[0].identifier : -1; };
swipeevents.type = function(e) { return 'touch'; }; swipeevents.type = function(e) { return 'touch'; };
swipeevents.pos = function(e, x) { return e.originalEvent.targetTouches[0][ x ? 'pageX' : 'pageY']; }; swipeevents.pos = function(e, x) { return e.originalEvent.targetTouches[0][ x ? 'pageX' : 'pageY']; };
@ -231,7 +234,7 @@ rcube_webmail.prototype.swipe = {
changeX = opts.horizontal ? (changeX < 0 ? Math.max(opts.horizontal.maxmove * -1, changeX) : Math.min(opts.horizontal.maxmove, changeX)) : 0; changeX = opts.horizontal ? (changeX < 0 ? Math.max(opts.horizontal.maxmove * -1, changeX) : Math.min(opts.horizontal.maxmove, changeX)) : 0;
// use Math.abs() to ensure value is always a positive number // use Math.abs() to ensure value is always a positive number
var min_move = 5; // the minimum amount of pointer movement required to trigger the swipe var min_move = swipeevents.minmove; // the minimum amount of pointer movement required to trigger the swipe
var temp_axis; var temp_axis;
if (opts.vertical && (Math.abs(changeY) > min_move || opts.vertical.target_obj.hasClass('swipe-active'))) { if (opts.vertical && (Math.abs(changeY) > min_move || opts.vertical.target_obj.hasClass('swipe-active'))) {
temp_axis = 'vertical'; temp_axis = 'vertical';
@ -249,7 +252,7 @@ rcube_webmail.prototype.swipe = {
// do not interfere with normal list scrolling // do not interfere with normal list scrolling
if (temp_axis == 'vertical' && rcmail.swipe.parent.scrollTop() != 0) { if (temp_axis == 'vertical' && rcmail.swipe.parent.scrollTop() != 0) {
if (bw.pointer && swipedata.scrollable) if (swipedata.scrollable)
rcmail.swipe.parent.css('touch-action', 'pan-y'); rcmail.swipe.parent.css('touch-action', 'pan-y');
if (swipedata.axis) if (swipedata.axis)
@ -406,15 +409,16 @@ $(document).ready(function() {
// prevent accidental list scroll when swipe active // prevent accidental list scroll when swipe active
rcmail.swipe.parent.on('scroll', function() { rcmail.swipe.parent.on('scroll', function() {
if (!bw.pointer) { if ($(this).scrollTop() == 0) {
if (rcmail.swipe.active) if (!bw.pointer) {
return false; rcmail.swipe.parent.css('touch-action', 'pan-y');
} }
else if ($(this).scrollTop() == 0) { else {
// allow vertical pointer events to fire (if one is configured) // allow vertical pointer events to fire (if one is configured)
var action = rcmail.swipe.select_action('down'); var action = rcmail.swipe.select_action('down');
// Edge does not support pan-down, only pan-y // Edge does not support pan-down, only pan-y
rcmail.swipe.parent.css('touch-action', action.callback && ! bw.edge ? 'pan-down' : 'pan-y'); rcmail.swipe.parent.css('touch-action', action.callback && !bw.edge && !bw.moz ? 'pan-down' : 'pan-y');
}
} }
}).trigger('scroll'); }).trigger('scroll');
@ -446,7 +450,7 @@ $(document).ready(function() {
'transition': 'translatex', 'transition': 'translatex',
'action_sytle': function(o) { 'action_sytle': function(o) {
return { return {
'top': o.position().top, 'top': o.position().top + (bw.mz ? rcmail.swipe.parent.scrollTop() : 0),
'left': o.position().left, 'left': o.position().left,
'width': o.width() + 'px', 'width': o.width() + 'px',
'height': (o.height() - 2) + 'px' // subtract the border 'height': (o.height() - 2) + 'px' // subtract the border

Write Preview
Loading…
Cancel
Save