From 135b19939b9243f917e55f37e8ecd25bf93cd893 Mon Sep 17 00:00:00 2001 From: PhilW Date: Sat, 19 Jan 2019 09:42:21 +0000 Subject: [PATCH] some more code cleanup --- skins/elastic/swipe.less | 12 ++++---- skins/elastic/swipe.min.css | 2 +- swipe.js | 58 ++++++++++++++++++++----------------- 3 files changed, 38 insertions(+), 34 deletions(-) diff --git a/skins/elastic/swipe.less b/skins/elastic/swipe.less index bf4f31f..65c8bc4 100644 --- a/skins/elastic/swipe.less +++ b/skins/elastic/swipe.less @@ -90,8 +90,8 @@ color: #fff; } - > div { - > span { + > .swipe-container { + > .swipe-action { line-height: 100%; font-size: 1.2em; @@ -165,7 +165,7 @@ position: absolute; right: 0; - > span::before { + > .swipe-action::before { float: right; margin: 0 .5em 0 .25em; } @@ -177,7 +177,7 @@ border-radius: 50%; box-shadow: 0 0 10px lighten(@color-black, 75%); - > span { + > .swipe-action { &::before { float: none; padding: 0; @@ -185,7 +185,7 @@ line-height: 1em; } - > span { + > .swipe-label { display: none; } } @@ -193,7 +193,7 @@ } } -.swipe-active, +.swipe-active:not(#swipe-action), .swipe-active > td { background-color: @color-layout-list-background; } \ No newline at end of file diff --git a/skins/elastic/swipe.min.css b/skins/elastic/swipe.min.css index 7dadca7..b66e1ff 100644 --- a/skins/elastic/swipe.min.css +++ b/skins/elastic/swipe.min.css @@ -1 +1 @@ -#listoptions-menu{overflow-y:auto;margin:-0.5em -1em;padding:.75em 1.25em}#listoptions-menu::-webkit-scrollbar{-webkit-appearance:none}#listoptions-menu::-webkit-scrollbar:vertical{width:.6rem}#listoptions-menu::-webkit-scrollbar:horizontal{height:.6rem}#listoptions-menu::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.4);border-radius:.3rem;border:2px solid #fff}#listoptions-menu>fieldset.swipe-menu{display:none;margin-top:1.5rem}#swipe-action{position:absolute;display:flex;align-items:center;border-collapse:collapse}#swipe-action.horizontal{background-color:#f1f3f4;color:#161b1d}#swipe-action.vertical{background-color:transparent;color:#c5cfd3;top:2em;height:1.5em}#swipe-action.checkmail{color:#37beff}#swipe-action.select,#swipe-action.deselect{background-color:#8b9fa7;color:#fff}#swipe-action.delete,#swipe-action.junk{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,#swipe-action.notjunk{background-color:#41b849;color:#fff}#swipe-action.move,#swipe-action.archive{background-color:#ffd452;color:#fff}#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;margin:0 .25em 0 .5em}#swipe-action>div>span.archive::before{content:"\f187"}#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.unflagged::before{content:"\f024";font-weight:400}#swipe-action>div>span.forward::before{content:"\f064"}#swipe-action>div>span.junk::before{content:"\f7e4"}#swipe-action>div>span.notjunk::before{content:"\f01c"}#swipe-action>div>span.move::before{content:"\f0b2"}#swipe-action>div>span.read::before{content:"\f111";font-weight:400}#swipe-action>div>span.unread::before{content:"\f111"}#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.left{position:absolute;right:0}#swipe-action>div.left>span::before{float:right;margin:0 .5em 0 .25em}#swipe-action>div.down{margin:0 auto;background-color:#fff;border-radius:50%;box-shadow:0 0 10px #d4dbde}#swipe-action>div.down>span::before{float:none;padding:0;margin:10px;line-height:1em}#swipe-action>div.down>span>span{display:none}.swipe-active,.swipe-active>td{background-color:#fff} \ No newline at end of file +#listoptions-menu{overflow-y:auto;margin:-0.5em -1em;padding:.75em 1.25em}#listoptions-menu::-webkit-scrollbar{-webkit-appearance:none}#listoptions-menu::-webkit-scrollbar:vertical{width:.6rem}#listoptions-menu::-webkit-scrollbar:horizontal{height:.6rem}#listoptions-menu::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.4);border-radius:.3rem;border:2px solid #fff}#listoptions-menu>fieldset.swipe-menu{display:none;margin-top:1.5rem}#swipe-action{position:absolute;display:flex;align-items:center;border-collapse:collapse}#swipe-action.horizontal{background-color:#f1f3f4;color:#161b1d}#swipe-action.vertical{background-color:transparent;color:#c5cfd3;top:2em;height:1.5em}#swipe-action.checkmail{color:#37beff}#swipe-action.select,#swipe-action.deselect{background-color:#8b9fa7;color:#fff}#swipe-action.delete,#swipe-action.junk{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,#swipe-action.notjunk{background-color:#41b849;color:#fff}#swipe-action.move,#swipe-action.archive{background-color:#ffd452;color:#fff}#swipe-action>.swipe-container>.swipe-action{line-height:100%;font-size:1.2em}#swipe-action>.swipe-container>.swipe-action::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;margin:0 .25em 0 .5em}#swipe-action>.swipe-container>.swipe-action.archive::before{content:"\f187"}#swipe-action>.swipe-container>.swipe-action.checkmail::before{content:"\f021"}#swipe-action>.swipe-container>.swipe-action.delete::before{content:"\f2ed"}#swipe-action>.swipe-container>.swipe-action.flagged::before{content:"\f024"}#swipe-action>.swipe-container>.swipe-action.unflagged::before{content:"\f024";font-weight:400}#swipe-action>.swipe-container>.swipe-action.forward::before{content:"\f064"}#swipe-action>.swipe-container>.swipe-action.junk::before{content:"\f7e4"}#swipe-action>.swipe-container>.swipe-action.notjunk::before{content:"\f01c"}#swipe-action>.swipe-container>.swipe-action.move::before{content:"\f0b2"}#swipe-action>.swipe-container>.swipe-action.read::before{content:"\f111";font-weight:400}#swipe-action>.swipe-container>.swipe-action.unread::before{content:"\f111"}#swipe-action>.swipe-container>.swipe-action.reply::before{content:"\f3e5"}#swipe-action>.swipe-container>.swipe-action.replyall::before{content:"\f122"}#swipe-action>.swipe-container>.swipe-action.select::before{content:"\f14a";font-weight:400}#swipe-action>.swipe-container>.swipe-action.deselect::before{content:"\f0c8";font-weight:400}#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:10px;line-height:1em}#swipe-action>.swipe-container.down>.swipe-action>.swipe-label{display:none}.swipe-active:not(#swipe-action),.swipe-active>td{background-color:#fff} \ No newline at end of file diff --git a/swipe.js b/swipe.js index 2a0f483..2c94712 100644 --- a/swipe.js +++ b/swipe.js @@ -16,11 +16,18 @@ */ rcube_webmail.prototype.swipe = { - position_target: function(obj, pos, vertical, max_move) { + position_target: function(obj, pos, transition, max_move) { var translate = ''; - if (pos) - translate = (vertical ? 'scale(' + (pos > 0 ? pos : 0) / max_move + ')' : 'translatex(' + pos + 'px)'); + if (pos && transition) { + if (transition == 'scale') { + pos = pos > 0 ? pos : 0; + translate = 'scale(' + pos / max_move + ')'; + } + else { + translate = transition + '(' + pos + 'px)'; + } + } if (bw.edge && $(obj).is('tr')) { // Edge does not support transform on s $(obj).children('td').css('transform', translate); @@ -147,12 +154,7 @@ rcube_webmail.prototype.swipe = { ret = rcmail.triggerEvent('swipe-action', {'direction': direction, 'obj': obj}); if (ret !== undefined) { // abort if one of the handlers returned false - if (ret === false) { - return action; - } - else { - return ret; - } + return ret === false ? null : ret; } else if (action = actions[rcmail.env.swipe_actions[direction]]) { if (!action.callback && action.command) { @@ -173,12 +175,16 @@ rcube_webmail.prototype.swipe = { 'type': function(e) { return e.pointerType; }, 'pos': function(e, x) { return e.originalEvent[ x ? 'pageX' : 'pageY']; }, 'clearswipe': function(e) { - rcmail.swipe.position_target(opts[swipedata.axis].target_obj, 0, swipedata.axis == 'vertical'); - $('#swipe-action').removeClass().hide(); + rcmail.swipe.position_target(opts[swipedata.axis].target_obj, 0); opts[swipedata.axis].target_obj.removeClass('swipe-active'); swipedata = {}; rcmail.swipe.active = null; + // reset #swipe-action + $('#swipe-action').removeClass().hide(); + $('.swipe-container').attr('class', 'swipe-container'); + $('.swipe-action').attr('class', 'swipe-action'); + if (opts.parent_obj) opts.parent_obj.off(swipeevents.moveevent, rcube_event.cancel); } @@ -252,17 +258,10 @@ rcube_webmail.prototype.swipe = { var direction = (swipedata.axis == 'vertical' ? 'down' : (changeX < 0 ? 'left' : 'right')); var action = rcmail.swipe.select_action(direction, opts.source_obj); - $('#swipe-action') - .addClass(temp_axis) - .data('callback', action.callback) - .children('div') - .removeClass() - .addClass(direction) - .children('span') - .removeClass() - .addClass(action.class) - .children('span') - .text(rcmail.gettext(action.text)); + $('#swipe-action').attr('class', temp_axis).data('callback', action.callback); + $('.swipe-container').attr('class', 'swipe-container ' + direction); + $('.swipe-action').attr('class', 'swipe-action ' + action.class); + $('.swipe-label').text(rcmail.gettext(action.text)); if (!opts[swipedata.axis].target_obj.hasClass('swipe-active')) { var action_style = opts[swipedata.axis].action_sytle(opts[swipedata.axis].target_obj); @@ -270,8 +269,7 @@ rcube_webmail.prototype.swipe = { 'top': action_style.top, 'left': action_style.left, 'width': action_style.width, - 'height': action_style.height, - 'transform': '' + 'height': action_style.height }).show(); opts[swipedata.axis].target_obj.addClass('swipe-active'); rcmail.swipe.active = swipedata.axis; // set the active swipe @@ -292,8 +290,8 @@ rcube_webmail.prototype.swipe = { $('#swipe-action').data('callback', null); } - var vertical = swipedata.axis == 'vertical'; - rcmail.swipe.position_target(opts[swipedata.axis].target_obj, vertical ? changeY : changeX, vertical, opts[swipedata.axis].maxmove); + var pos = swipedata.axis == 'vertical' ? changeY : changeX; + rcmail.swipe.position_target(opts[swipedata.axis].target_obj, pos, opts[swipedata.axis].transition, opts[swipedata.axis].maxmove); }) .on(swipeevents.endevent, function(e) { if (swipeevents.type(e) == 'touch' && swipedata.id == swipeevents.id(e) && rcmail.swipe.active && @@ -319,8 +317,12 @@ $(document).ready(function() { if (rcmail.message_list.draggable || !messagelist_container[0].addEventListener) return; + var swipe_action = $('
').attr('id', 'swipe-action').append( + $('
').addClass('swipe-container').append($('
').addClass('swipe-action').append($('').addClass('swipe-label'))) + ); + rcmail.swipe.parent = messagelist_container; - rcmail.swipe.parent.prepend($('
').attr('id', 'swipe-action').html($('
').append($('').append($('')))).hide()); + rcmail.swipe.parent.prepend(swipe_action.hide()); // down swipe on message list container var swipe_config = { @@ -329,6 +331,7 @@ $(document).ready(function() { 'vertical': { 'minmove': $(window).height() * 0.19, 'maxmove': $(window).height() * 0.2, + 'transition': 'scale', 'action_sytle': function(o) { return { 'top': '', @@ -374,6 +377,7 @@ $(document).ready(function() { 'horizontal': { 'minmove': row_width * 0.25, 'maxmove': row_width * 0.6, + 'transition': 'translatex', 'action_sytle': function(o) { return { 'top': o.position().top,