framework7 6.3.4 → 7.0.0-beta.3

package/cjs/components/swipeout/swipeout.js

@@ -1,618 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _ssrWindow = require("ssr-window");
-
-var _dom = _interopRequireDefault(require("../../shared/dom7"));
-
-var _utils = require("../../shared/utils");
-
-var _getSupport = require("../../shared/get-support");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Swipeout = {
-  init: function init() {
-    var app = this;
-    var document = (0, _ssrWindow.getDocument)();
-    var touchesStart = {};
-    var isTouched;
-    var isMoved;
-    var isScrolling;
-    var touchStartTime;
-    var touchesDiff;
-    var $swipeoutEl;
-    var $swipeoutContent;
-    var $actionsRight;
-    var $actionsLeft;
-    var actionsLeftWidth;
-    var actionsRightWidth;
-    var translate;
-    var opened;
-    var openedActionsSide;
-    var $leftButtons;
-    var $rightButtons;
-    var direction;
-    var $overswipeLeftButton;
-    var $overswipeRightButton;
-    var overswipeLeft;
-    var overswipeRight;
-
-    function handleTouchStart(e) {
-      if (!app.swipeout.allow) return;
-      isMoved = false;
-      isTouched = true;
-      isScrolling = undefined;
-      touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
-      touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
-      touchStartTime = new Date().getTime();
-      $swipeoutEl = (0, _dom.default)(this);
-    }
-
-    function handleTouchMove(e) {
-      if (!isTouched) return;
-      var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
-      var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
-
-      if (typeof isScrolling === 'undefined') {
-        isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
-      }
-
-      if (isScrolling) {
-        isTouched = false;
-        return;
-      }
-
-      if (!isMoved) {
-        if ((0, _dom.default)('.list.sortable-opened').length > 0) return;
-        $swipeoutContent = $swipeoutEl.find('.swipeout-content');
-        $actionsRight = $swipeoutEl.find('.swipeout-actions-right');
-        $actionsLeft = $swipeoutEl.find('.swipeout-actions-left');
-        actionsLeftWidth = null;
-        actionsRightWidth = null;
-        $leftButtons = null;
-        $rightButtons = null;
-        $overswipeRightButton = null;
-        $overswipeLeftButton = null;
-
-        if ($actionsLeft.length > 0) {
-          actionsLeftWidth = $actionsLeft.outerWidth();
-          $leftButtons = $actionsLeft.children('a');
-          $overswipeLeftButton = $actionsLeft.find('.swipeout-overswipe');
-        }
-
-        if ($actionsRight.length > 0) {
-          actionsRightWidth = $actionsRight.outerWidth();
-          $rightButtons = $actionsRight.children('a');
-          $overswipeRightButton = $actionsRight.find('.swipeout-overswipe');
-        }
-
-        opened = $swipeoutEl.hasClass('swipeout-opened');
-
-        if (opened) {
-          openedActionsSide = $swipeoutEl.find('.swipeout-actions-left.swipeout-actions-opened').length > 0 ? 'left' : 'right';
-        }
-
-        $swipeoutEl.removeClass('swipeout-transitioning');
-
-        if (!app.params.swipeout.noFollow) {
-          $swipeoutEl.find('.swipeout-actions-opened').removeClass('swipeout-actions-opened');
-          $swipeoutEl.removeClass('swipeout-opened');
-        }
-      }
-
-      isMoved = true;
-
-      if (e.cancelable) {
-        e.preventDefault();
-      }
-
-      touchesDiff = pageX - touchesStart.x;
-      translate = touchesDiff;
-
-      if (opened) {
-        if (openedActionsSide === 'right') translate -= actionsRightWidth;else translate += actionsLeftWidth;
-      }
-
-      if (translate > 0 && $actionsLeft.length === 0 || translate < 0 && $actionsRight.length === 0) {
-        if (!opened) {
-          isTouched = false;
-          isMoved = false;
-          $swipeoutContent.transform('');
-
-          if ($rightButtons && $rightButtons.length > 0) {
-            $rightButtons.transform('');
-          }
-
-          if ($leftButtons && $leftButtons.length > 0) {
-            $leftButtons.transform('');
-          }
-
-          return;
-        }
-
-        translate = 0;
-      }
-
-      if (translate < 0) direction = 'to-left';else if (translate > 0) direction = 'to-right';else if (!direction) direction = 'to-left';
-      var buttonOffset;
-      var progress;
-      e.f7PreventSwipePanel = true;
-
-      if (app.params.swipeout.noFollow) {
-        if (opened) {
-          if (openedActionsSide === 'right' && touchesDiff > 0) {
-            app.swipeout.close($swipeoutEl);
-          }
-
-          if (openedActionsSide === 'left' && touchesDiff < 0) {
-            app.swipeout.close($swipeoutEl);
-          }
-        } else {
-          if (touchesDiff < 0 && $actionsRight.length > 0) {
-            app.swipeout.open($swipeoutEl, 'right');
-          }
-
-          if (touchesDiff > 0 && $actionsLeft.length > 0) {
-            app.swipeout.open($swipeoutEl, 'left');
-          }
-        }
-
-        isTouched = false;
-        isMoved = false;
-        return;
-      }
-
-      overswipeLeft = false;
-      overswipeRight = false;
-
-      if ($actionsRight.length > 0) {
-        // Show right actions
-        var buttonTranslate = translate;
-        progress = buttonTranslate / actionsRightWidth;
-
-        if (buttonTranslate < -actionsRightWidth) {
-          var ratio = buttonTranslate / -actionsRightWidth;
-          buttonTranslate = -actionsRightWidth - Math.pow(-buttonTranslate - actionsRightWidth, 0.8);
-          translate = buttonTranslate;
-
-          if ($overswipeRightButton.length > 0 && ratio > app.params.swipeout.overswipeRatio) {
-            overswipeRight = true;
-          }
-        }
-
-        if (direction !== 'to-left') {
-          progress = 0;
-          buttonTranslate = 0;
-        }
-
-        $rightButtons.each(function (buttonEl) {
-          var $buttonEl = (0, _dom.default)(buttonEl);
-
-          if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
-            $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
-          }
-
-          buttonOffset = buttonEl.f7SwipeoutButtonOffset;
-
-          if ($overswipeRightButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-left') {
-            $buttonEl.css({
-              left: (overswipeRight ? -buttonOffset : 0) + "px"
-            });
-
-            if (overswipeRight) {
-              if (!$buttonEl.hasClass('swipeout-overswipe-active')) {
-                $swipeoutEl.trigger('swipeout:overswipeenter');
-                app.emit('swipeoutOverswipeEnter', $swipeoutEl[0]);
-              }
-
-              $buttonEl.addClass('swipeout-overswipe-active');
-            } else {
-              if ($buttonEl.hasClass('swipeout-overswipe-active')) {
-                $swipeoutEl.trigger('swipeout:overswipeexit');
-                app.emit('swipeoutOverswipeExit', $swipeoutEl[0]);
-              }
-
-              $buttonEl.removeClass('swipeout-overswipe-active');
-            }
-          }
-
-          $buttonEl.transform("translate3d(" + (buttonTranslate - buttonOffset * (1 + Math.max(progress, -1))) + "px,0,0)");
-        });
-      }
-
-      if ($actionsLeft.length > 0) {
-        // Show left actions
-        var _buttonTranslate = translate;
-        progress = _buttonTranslate / actionsLeftWidth;
-
-        if (_buttonTranslate > actionsLeftWidth) {
-          var _ratio = _buttonTranslate / actionsRightWidth;
-
-          _buttonTranslate = actionsLeftWidth + Math.pow(_buttonTranslate - actionsLeftWidth, 0.8);
-          translate = _buttonTranslate;
-
-          if ($overswipeLeftButton.length > 0 && _ratio > app.params.swipeout.overswipeRatio) {
-            overswipeLeft = true;
-          }
-        }
-
-        if (direction !== 'to-right') {
-          _buttonTranslate = 0;
-          progress = 0;
-        }
-
-        $leftButtons.each(function (buttonEl, index) {
-          var $buttonEl = (0, _dom.default)(buttonEl);
-
-          if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
-            $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
-          }
-
-          buttonOffset = buttonEl.f7SwipeoutButtonOffset;
-
-          if ($overswipeLeftButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-right') {
-            $buttonEl.css({
-              left: (overswipeLeft ? buttonOffset : 0) + "px"
-            });
-
-            if (overswipeLeft) {
-              if (!$buttonEl.hasClass('swipeout-overswipe-active')) {
-                $swipeoutEl.trigger('swipeout:overswipeenter');
-                app.emit('swipeoutOverswipeEnter', $swipeoutEl[0]);
-              }
-
-              $buttonEl.addClass('swipeout-overswipe-active');
-            } else {
-              if ($buttonEl.hasClass('swipeout-overswipe-active')) {
-                $swipeoutEl.trigger('swipeout:overswipeexit');
-                app.emit('swipeoutOverswipeExit', $swipeoutEl[0]);
-              }
-
-              $buttonEl.removeClass('swipeout-overswipe-active');
-            }
-          }
-
-          if ($leftButtons.length > 1) {
-            $buttonEl.css('z-index', $leftButtons.length - index);
-          }
-
-          $buttonEl.transform("translate3d(" + (_buttonTranslate + buttonOffset * (1 - Math.min(progress, 1))) + "px,0,0)");
-        });
-      }
-
-      $swipeoutEl.trigger('swipeout', progress);
-      app.emit('swipeout', $swipeoutEl[0], progress);
-      $swipeoutContent.transform("translate3d(" + translate + "px,0,0)");
-    }
-
-    function handleTouchEnd() {
-      if (!isTouched || !isMoved) {
-        isTouched = false;
-        isMoved = false;
-        return;
-      }
-
-      isTouched = false;
-      isMoved = false;
-      var timeDiff = new Date().getTime() - touchStartTime;
-      var $actions = direction === 'to-left' ? $actionsRight : $actionsLeft;
-      var actionsWidth = direction === 'to-left' ? actionsRightWidth : actionsLeftWidth;
-      var action;
-      var $buttons;
-      var i;
-
-      if (timeDiff < 300 && (touchesDiff < -10 && direction === 'to-left' || touchesDiff > 10 && direction === 'to-right') || timeDiff >= 300 && Math.abs(translate) > actionsWidth / 2) {
-        action = 'open';
-      } else {
-        action = 'close';
-      }
-
-      if (timeDiff < 300) {
-        if (Math.abs(translate) === 0) action = 'close';
-        if (Math.abs(translate) === actionsWidth) action = 'open';
-      }
-
-      if (action === 'open') {
-        Swipeout.el = $swipeoutEl[0];
-        $swipeoutEl.trigger('swipeout:open');
-        app.emit('swipeoutOpen', $swipeoutEl[0]);
-        $swipeoutEl.addClass('swipeout-opened swipeout-transitioning');
-        var newTranslate = direction === 'to-left' ? -actionsWidth : actionsWidth;
-        $swipeoutContent.transform("translate3d(" + newTranslate + "px,0,0)");
-        $actions.addClass('swipeout-actions-opened');
-        $buttons = direction === 'to-left' ? $rightButtons : $leftButtons;
-
-        if ($buttons) {
-          for (i = 0; i < $buttons.length; i += 1) {
-            (0, _dom.default)($buttons[i]).transform("translate3d(" + newTranslate + "px,0,0)");
-          }
-        }
-
-        if (overswipeRight) {
-          $actionsRight.find('.swipeout-overswipe').trigger('click', 'f7Overswipe');
-        }
-
-        if (overswipeLeft) {
-          $actionsLeft.find('.swipeout-overswipe').trigger('click', 'f7Overswipe');
-        }
-      } else {
-        $swipeoutEl.trigger('swipeout:close');
-        app.emit('swipeoutClose', $swipeoutEl[0]);
-        Swipeout.el = undefined;
-        $swipeoutEl.addClass('swipeout-transitioning').removeClass('swipeout-opened');
-        $swipeoutContent.transform('');
-        $actions.removeClass('swipeout-actions-opened');
-      }
-
-      var buttonOffset;
-
-      if ($leftButtons && $leftButtons.length > 0 && $leftButtons !== $buttons) {
-        $leftButtons.each(function (buttonEl) {
-          var $buttonEl = (0, _dom.default)(buttonEl);
-          buttonOffset = buttonEl.f7SwipeoutButtonOffset;
-
-          if (typeof buttonOffset === 'undefined') {
-            $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
-          }
-
-          $buttonEl.transform("translate3d(" + buttonOffset + "px,0,0)");
-        });
-      }
-
-      if ($rightButtons && $rightButtons.length > 0 && $rightButtons !== $buttons) {
-        $rightButtons.each(function (buttonEl) {
-          var $buttonEl = (0, _dom.default)(buttonEl);
-          buttonOffset = buttonEl.f7SwipeoutButtonOffset;
-
-          if (typeof buttonOffset === 'undefined') {
-            $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
-          }
-
-          $buttonEl.transform("translate3d(" + -buttonOffset + "px,0,0)");
-        });
-      }
-
-      $swipeoutContent.transitionEnd(function () {
-        if (opened && action === 'open' || !opened && action === 'close') return;
-        $swipeoutEl.trigger(action === 'open' ? 'swipeout:opened' : 'swipeout:closed');
-        app.emit(action === 'open' ? 'swipeoutOpened' : 'swipeoutClosed', $swipeoutEl[0]);
-        $swipeoutEl.removeClass('swipeout-transitioning');
-
-        if (opened && action === 'close') {
-          if ($actionsRight.length > 0) {
-            $rightButtons.transform('');
-          }
-
-          if ($actionsLeft.length > 0) {
-            $leftButtons.transform('');
-          }
-        }
-      });
-    }
-
-    var passiveListener = (0, _getSupport.getSupport)().passiveListener ? {
-      passive: true
-    } : false;
-    app.on('touchstart', function (e) {
-      if (Swipeout.el) {
-        var $targetEl = (0, _dom.default)(e.target);
-
-        if (!((0, _dom.default)(Swipeout.el).is($targetEl[0]) || $targetEl.parents('.swipeout').is(Swipeout.el) || $targetEl.hasClass('modal-in') || ($targetEl.attr('class') || '').indexOf('-backdrop') > 0 || $targetEl.hasClass('actions-modal') || $targetEl.parents('.actions-modal.modal-in, .dialog.modal-in').length > 0)) {
-          app.swipeout.close(Swipeout.el);
-        }
-      }
-    });
-    (0, _dom.default)(document).on(app.touchEvents.start, 'li.swipeout', handleTouchStart, passiveListener);
-    app.on('touchmove:active', handleTouchMove);
-    app.on('touchend:passive', handleTouchEnd);
-  },
-  allow: true,
-  el: undefined,
-  open: function open() {
-    var app = this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    var el = args[0],
-        side = args[1],
-        callback = args[2];
-
-    if (typeof args[1] === 'function') {
-      el = args[0];
-      callback = args[1];
-      side = args[2];
-    }
-
-    var $el = (0, _dom.default)(el).eq(0);
-    if ($el.length === 0) return;
-    if (!$el.hasClass('swipeout') || $el.hasClass('swipeout-opened')) return;
-
-    if (!side) {
-      if ($el.find('.swipeout-actions-right').length > 0) side = 'right';else side = 'left';
-    }
-
-    var $swipeoutActions = $el.find(".swipeout-actions-" + side);
-    var $swipeoutContent = $el.find('.swipeout-content');
-    if ($swipeoutActions.length === 0) return;
-    $el.trigger('swipeout:open').addClass('swipeout-opened').removeClass('swipeout-transitioning');
-    app.emit('swipeoutOpen', $el[0]);
-    $swipeoutActions.addClass('swipeout-actions-opened');
-    var $buttons = $swipeoutActions.children('a');
-    var swipeoutActionsWidth = $swipeoutActions.outerWidth();
-    var translate = side === 'right' ? -swipeoutActionsWidth : swipeoutActionsWidth;
-
-    if ($buttons.length > 1) {
-      $buttons.each(function (buttonEl, buttonIndex) {
-        var $buttonEl = (0, _dom.default)(buttonEl);
-
-        if (side === 'right') {
-          $buttonEl.transform("translate3d(" + -buttonEl.offsetLeft + "px,0,0)");
-        } else {
-          $buttonEl.css('z-index', $buttons.length - buttonIndex).transform("translate3d(" + (swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft) + "px,0,0)");
-        }
-      });
-    }
-
-    $el.addClass('swipeout-transitioning');
-    $swipeoutContent.transitionEnd(function () {
-      $el.trigger('swipeout:opened');
-      app.emit('swipeoutOpened', $el[0]);
-      if (callback) callback.call($el[0]);
-    });
-    (0, _utils.nextFrame)(function () {
-      $buttons.transform("translate3d(" + translate + "px,0,0)");
-      $swipeoutContent.transform("translate3d(" + translate + "px,0,0)");
-    });
-    Swipeout.el = $el[0];
-  },
-  close: function close(el, callback) {
-    var app = this;
-    var $el = (0, _dom.default)(el).eq(0);
-    if ($el.length === 0) return;
-    if (!$el.hasClass('swipeout-opened')) return;
-    var side = $el.find('.swipeout-actions-opened').hasClass('swipeout-actions-right') ? 'right' : 'left';
-    var $swipeoutActions = $el.find('.swipeout-actions-opened').removeClass('swipeout-actions-opened');
-    var $buttons = $swipeoutActions.children('a');
-    var swipeoutActionsWidth = $swipeoutActions.outerWidth();
-    app.swipeout.allow = false;
-    $el.trigger('swipeout:close');
-    app.emit('swipeoutClose', $el[0]);
-    $el.removeClass('swipeout-opened').addClass('swipeout-transitioning');
-    var closeTimeout;
-
-    function onSwipeoutClose() {
-      app.swipeout.allow = true;
-      if ($el.hasClass('swipeout-opened')) return;
-      $el.removeClass('swipeout-transitioning');
-      $buttons.transform('');
-      $el.trigger('swipeout:closed');
-      app.emit('swipeoutClosed', $el[0]);
-      if (callback) callback.call($el[0]);
-      if (closeTimeout) clearTimeout(closeTimeout);
-    }
-
-    $el.find('.swipeout-content').transform('').transitionEnd(onSwipeoutClose);
-    closeTimeout = setTimeout(onSwipeoutClose, 500);
-    $buttons.each(function (buttonEl) {
-      var $buttonEl = (0, _dom.default)(buttonEl);
-
-      if (side === 'right') {
-        $buttonEl.transform("translate3d(" + -buttonEl.offsetLeft + "px,0,0)");
-      } else {
-        $buttonEl.transform("translate3d(" + (swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft) + "px,0,0)");
-      }
-
-      $buttonEl.css({
-        left: '0px'
-      }).removeClass('swipeout-overswipe-active');
-    });
-    if (Swipeout.el && Swipeout.el === $el[0]) Swipeout.el = undefined;
-  },
-  delete: function _delete(el, callback) {
-    var app = this;
-    var $el = (0, _dom.default)(el).eq(0);
-    if ($el.length === 0) return;
-    Swipeout.el = undefined;
-    $el.trigger('swipeout:delete');
-    app.emit('swipeoutDelete', $el[0]);
-    $el.css({
-      height: $el.outerHeight() + "px"
-    });
-    $el.transitionEnd(function () {
-      $el.trigger('swipeout:deleted');
-      app.emit('swipeoutDeleted', $el[0]);
-      if (callback) callback.call($el[0]);
-
-      if ($el.parents('.virtual-list').length > 0) {
-        var virtualList = $el.parents('.virtual-list')[0].f7VirtualList;
-        var virtualIndex = $el[0].f7VirtualListIndex;
-        if (virtualList && typeof virtualIndex !== 'undefined') virtualList.deleteItem(virtualIndex);
-      } else if (app.params.swipeout.removeElements) {
-        if (app.params.swipeout.removeElementsWithTimeout) {
-          setTimeout(function () {
-            $el.remove();
-          }, app.params.swipeout.removeElementsTimeout);
-        } else {
-          $el.remove();
-        }
-      } else {
-        $el.removeClass('swipeout-deleting swipeout-transitioning');
-      }
-    }); // eslint-disable-next-line
-    // $el[0]._clientLeft = $el[0].clientLeft;
-
-    (0, _utils.nextFrame)(function () {
-      $el.addClass('swipeout-deleting swipeout-transitioning').css({
-        height: '0px'
-      }).find('.swipeout-content').transform('translate3d(-100%,0,0)');
-    });
-  }
-};
-var _default = {
-  name: 'swipeout',
-  params: {
-    swipeout: {
-      actionsNoFold: false,
-      noFollow: false,
-      removeElements: true,
-      removeElementsWithTimeout: false,
-      removeElementsTimeout: 0,
-      overswipeRatio: 1.2
-    }
-  },
-  create: function create() {
-    var app = this;
-    (0, _utils.bindMethods)(app, {
-      swipeout: Swipeout
-    });
-  },
-  clicks: {
-    '.swipeout-open': function openSwipeout($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
-
-      var app = this;
-      app.swipeout.open(data.swipeout, data.side);
-    },
-    '.swipeout-close': function closeSwipeout($clickedEl) {
-      var app = this;
-      var $swipeoutEl = $clickedEl.closest('.swipeout');
-      if ($swipeoutEl.length === 0) return;
-      app.swipeout.close($swipeoutEl);
-    },
-    '.swipeout-delete': function deleteSwipeout($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
-
-      var app = this;
-      var $swipeoutEl = $clickedEl.closest('.swipeout');
-      if ($swipeoutEl.length === 0) return;
-      var _data = data,
-          confirm = _data.confirm,
-          confirmTitle = _data.confirmTitle;
-
-      if (data.confirm) {
-        app.dialog.confirm(confirm, confirmTitle, function () {
-          app.swipeout.delete($swipeoutEl);
-        });
-      } else {
-        app.swipeout.delete($swipeoutEl);
-      }
-    }
-  },
-  on: {
-    init: function init() {
-      var app = this;
-      if (!app.params.swipeout) return;
-      app.swipeout.init();
-    }
-  }
-};
-exports.default = _default;