framework7 6.3.4 → 7.0.0-beta.3

package/esm/components/card/card.js

@@ -1,612 +0,0 @@
-/* eslint no-param-reassign: "off" */
-import { getDocument } from 'ssr-window';
-import { bindMethods } from '../../shared/utils';
-import { getSupport } from '../../shared/get-support';
-import { getDevice } from '../../shared/get-device';
-import $ from '../../shared/dom7';
-var CardExpandable = {
-  open: function open(cardEl, animate) {
-    if (cardEl === void 0) {
-      cardEl = '.card-expandable';
-    }
-
-    if (animate === void 0) {
-      animate = true;
-    }
-
-    var app = this;
-    var device = getDevice();
-    var document = getDocument();
-    var support = getSupport();
-    var $cardEl = $(cardEl).eq(0);
-    if (!$cardEl || !$cardEl.length) return;
-    if ($cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) return;
-    var $pageEl = $cardEl.parents('.page').eq(0);
-    if (!$pageEl.length) return;
-
-    if ($pageEl.find('.card-opened').length) {
-      return;
-    }
-
-    var prevented;
-
-    function prevent() {
-      prevented = true;
-    }
-
-    $cardEl.trigger('card:beforeopen', {
-      prevent: prevent
-    });
-    app.emit('cardBeforeOpen', $cardEl[0], prevent);
-    if (prevented) return;
-    var cardParams = Object.assign({
-      animate: animate
-    }, app.params.card, $cardEl.dataset());
-    var $pageContentEl = $cardEl.parents('.page-content');
-    var $backdropEl;
-
-    if ($cardEl.attr('data-backdrop-el')) {
-      $backdropEl = $($cardEl.attr('data-backdrop-el'));
-    }
-
-    if (!$backdropEl && cardParams.backdrop) {
-      $backdropEl = $pageContentEl.find('.card-backdrop');
-
-      if (!$backdropEl.length) {
-        $backdropEl = $('<div class="card-backdrop"></div>');
-        $pageContentEl.append($backdropEl);
-      }
-    }
-
-    var $navbarEl;
-    var $toolbarEl;
-
-    if (cardParams.hideNavbarOnOpen) {
-      $navbarEl = $pageEl.children('.navbar');
-
-      if (!$navbarEl.length) {
-        if ($pageEl[0].f7Page) $navbarEl = $pageEl[0].f7Page.$navbarEl;
-      }
-    }
-
-    if (cardParams.hideToolbarOnOpen) {
-      $toolbarEl = $pageEl.children('.toolbar');
-
-      if (!$toolbarEl.length) {
-        $toolbarEl = $pageEl.parents('.view').children('.toolbar');
-      }
-
-      if (!$toolbarEl.length) {
-        $toolbarEl = $pageEl.parents('.views').children('.toolbar');
-      }
-    }
-
-    var currTransform = $cardEl.css('transform');
-    var hasTransform;
-
-    if (currTransform && currTransform.match(/[2-9]/)) {
-      hasTransform = true;
-    }
-
-    var $cardContentEl = $cardEl.children('.card-content');
-    var $cardSizeEl = $(document.createElement('div')).addClass('card-expandable-size');
-    $cardEl.append($cardSizeEl);
-    var cardWidth = $cardEl[0].offsetWidth;
-    var cardHeight = $cardEl[0].offsetHeight;
-    var pageWidth = $pageEl[0].offsetWidth;
-    var pageHeight = $pageEl[0].offsetHeight;
-    var maxWidth = $cardSizeEl[0].offsetWidth || pageWidth;
-    var maxHeight = $cardSizeEl[0].offsetHeight || pageHeight;
-    var statusbarHeight;
-
-    if ($navbarEl && !cardParams.hideStatusbarOnOpen && maxHeight === pageHeight) {
-      statusbarHeight = parseInt($navbarEl.css('--f7-safe-area-top'), 10);
-      if (Number.isNaN(statusbarHeight)) statusbarHeight = 0;
-    }
-
-    if (statusbarHeight) {
-      maxHeight -= statusbarHeight;
-    }
-
-    var scaleX = maxWidth / cardWidth;
-    var scaleY = maxHeight / cardHeight;
-    var offset = $cardEl.offset();
-    var pageOffset = $pageEl.offset();
-
-    if (statusbarHeight) {
-      pageOffset.top += statusbarHeight / 2;
-    }
-
-    offset.left -= pageOffset.left;
-    var cardLeftOffset;
-    var cardTopOffset;
-
-    if (hasTransform) {
-      var transformValues = currTransform.replace(/matrix\(|\)/g, '').split(',').map(function (el) {
-        return el.trim();
-      });
-
-      if (transformValues && transformValues.length > 1) {
-        var scale = parseFloat(transformValues[0]);
-        cardLeftOffset = offset.left - cardWidth * (1 - scale) / 2;
-        cardTopOffset = offset.top - pageOffset.top - cardHeight * (1 - scale) / 2;
-        if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;
-      } else {
-        cardLeftOffset = $cardEl[0].offsetLeft;
-        cardTopOffset = $cardEl[0].offsetTop - ($pageContentEl.length ? $pageContentEl[0].scrollTop : 0);
-      }
-    } else {
-      cardLeftOffset = offset.left;
-      cardTopOffset = offset.top - pageOffset.top;
-      if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;
-    }
-
-    cardLeftOffset -= (pageWidth - maxWidth) / 2;
-    cardTopOffset -= (pageHeight - maxHeight) / 2;
-    var cardRightOffset = maxWidth - cardWidth - cardLeftOffset;
-
-    if (app.rtl) {
-      var _ref = [cardRightOffset, cardLeftOffset];
-      cardLeftOffset = _ref[0];
-      cardRightOffset = _ref[1];
-    }
-
-    var cardBottomOffset = maxHeight - cardHeight - cardTopOffset;
-    var translateX = (cardRightOffset - cardLeftOffset) / 2;
-    var translateY = (cardBottomOffset - cardTopOffset) / 2;
-
-    if (cardParams.hideNavbarOnOpen && $navbarEl && $navbarEl.length) {
-      if ($navbarEl.closest('.navbar-hidden').length) {
-        // Was hidden
-        $cardEl[0].f7KeepNavbarOnClose = true;
-      } else {
-        delete $cardEl[0].f7KeepNavbarOnClose;
-        app.navbar.hide($navbarEl, cardParams.animate, cardParams.hideStatusbarOnOpen, true);
-      }
-    }
-
-    if (cardParams.hideToolbarOnOpen && $toolbarEl && $toolbarEl.length) {
-      if ($toolbarEl.closest('.toolbar-hidden').length) {
-        // Was hidden
-        $cardEl[0].f7KeepToolbarOnClose = true;
-      } else {
-        delete $cardEl[0].f7KeepToolbarOnClose;
-        app.toolbar.hide($toolbarEl, cardParams.animate);
-      }
-    }
-
-    if ($backdropEl) {
-      $backdropEl.removeClass('card-backdrop-out').addClass('card-backdrop-in');
-    }
-
-    $cardEl.removeClass('card-transitioning');
-
-    if (cardParams.animate) {
-      $cardEl.addClass('card-opening');
-    }
-
-    $cardEl.trigger('card:open');
-    app.emit('cardOpen', $cardEl[0]);
-
-    function transitionEnd() {
-      $pageEl.addClass('page-with-card-opened');
-
-      if (device.ios && $pageContentEl.length) {
-        $pageContentEl.css('height', $pageContentEl[0].offsetHeight + 1 + "px");
-        setTimeout(function () {
-          $pageContentEl.css('height', '');
-        });
-      }
-
-      $cardEl.addClass('card-opened');
-      $cardEl.removeClass('card-opening');
-      $cardEl.trigger('card:opened');
-      app.emit('cardOpened', $cardEl[0], $pageEl[0]);
-    }
-
-    $cardContentEl.css({
-      width: maxWidth + "px",
-      height: maxHeight + "px"
-    }).transform("translate3d(" + (app.rtl ? cardLeftOffset + translateX : -cardLeftOffset - translateX) + "px, 0px, 0) scale(" + 1 / scaleX + ", " + 1 / scaleY + ")");
-    $cardEl.transform("translate3d(" + (app.rtl ? -translateX : translateX) + "px, " + translateY + "px, 0) scale(" + scaleX + ", " + scaleY + ")");
-
-    if (cardParams.animate) {
-      $cardEl.transitionEnd(function () {
-        transitionEnd();
-      });
-    } else {
-      transitionEnd();
-    }
-
-    function onResize() {
-      $cardEl.removeClass('card-transitioning');
-      cardWidth = $cardEl[0].offsetWidth;
-      cardHeight = $cardEl[0].offsetHeight;
-      pageWidth = $pageEl[0].offsetWidth;
-      pageHeight = $pageEl[0].offsetHeight;
-      maxWidth = $cardSizeEl[0].offsetWidth || pageWidth;
-      maxHeight = $cardSizeEl[0].offsetHeight || pageHeight;
-      statusbarHeight = 0;
-
-      if ($navbarEl && !cardParams.hideStatusbarOnOpen && maxHeight === pageHeight) {
-        statusbarHeight = parseInt($navbarEl.css('--f7-safe-area-top'), 10);
-        if (Number.isNaN(statusbarHeight)) statusbarHeight = 0;
-      }
-
-      if (statusbarHeight) {
-        maxHeight -= statusbarHeight;
-      }
-
-      scaleX = maxWidth / cardWidth;
-      scaleY = maxHeight / cardHeight;
-      $cardEl.transform('translate3d(0px, 0px, 0) scale(1)');
-      offset = $cardEl.offset();
-      pageOffset = $pageEl.offset();
-
-      if (statusbarHeight) {
-        pageOffset.top += statusbarHeight / 2;
-      }
-
-      offset.left -= pageOffset.left;
-      offset.top -= pageOffset.top;
-      cardLeftOffset = offset.left - (pageWidth - maxWidth) / 2;
-      if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;
-      cardTopOffset = offset.top - (pageHeight - maxHeight) / 2;
-      cardRightOffset = maxWidth - cardWidth - cardLeftOffset;
-      cardBottomOffset = maxHeight - cardHeight - cardTopOffset;
-
-      if (app.rtl) {
-        var _ref2 = [cardRightOffset, cardLeftOffset];
-        cardLeftOffset = _ref2[0];
-        cardRightOffset = _ref2[1];
-      }
-
-      translateX = (cardRightOffset - cardLeftOffset) / 2;
-      translateY = (cardBottomOffset - cardTopOffset) / 2;
-      $cardEl.transform("translate3d(" + (app.rtl ? -translateX : translateX) + "px, " + translateY + "px, 0) scale(" + scaleX + ", " + scaleY + ")");
-      $cardContentEl.css({
-        width: maxWidth + "px",
-        height: maxHeight + "px"
-      }).transform("translate3d(" + (app.rtl ? cardLeftOffset + translateX : -cardLeftOffset - translateX) + "px, 0px, 0) scale(" + 1 / scaleX + ", " + 1 / scaleY + ")");
-    }
-
-    var cardScrollTop;
-    var isTouched;
-    var isMoved;
-    var touchStartX;
-    var touchStartY;
-    var touchEndX;
-    var touchEndY;
-    var isScrolling;
-    var progress;
-    var isV;
-    var isH;
-    var $cardScrollableEl;
-
-    function onTouchStart(e) {
-      if (!$(e.target).closest($cardEl).length) return;
-      if (!$cardEl.hasClass('card-opened')) return;
-      $cardScrollableEl = $cardEl.find(cardParams.scrollableEl);
-
-      if ($cardScrollableEl[0] && $cardScrollableEl[0] !== $cardContentEl[0] && !$cardScrollableEl[0].contains(e.target)) {
-        cardScrollTop = 0;
-      } else {
-        cardScrollTop = $cardScrollableEl.scrollTop();
-      }
-
-      isTouched = true;
-      touchStartX = e.targetTouches[0].pageX;
-      touchStartY = e.targetTouches[0].pageY;
-      isScrolling = undefined;
-      isV = false;
-      isH = false;
-    }
-
-    function onTouchMove(e) {
-      if (!isTouched) return;
-      touchEndX = e.targetTouches[0].pageX;
-      touchEndY = e.targetTouches[0].pageY;
-
-      if (typeof isScrolling === 'undefined') {
-        isScrolling = !!(isScrolling || Math.abs(touchEndY - touchStartY) > Math.abs(touchEndX - touchStartX));
-      }
-
-      if (!isH && !isV) {
-        if (!isScrolling && e.targetTouches[0].clientX <= 50) {
-          isH = true;
-        } else {
-          isV = true;
-        }
-      }
-
-      if (!(isH || isV) || isV && cardScrollTop !== 0) {
-        isTouched = true;
-        isMoved = true;
-        return;
-      }
-
-      if (!isMoved) {
-        $cardEl.removeClass('card-transitioning');
-      }
-
-      isMoved = true;
-      progress = isV ? Math.max((touchEndY - touchStartY) / 150, 0) : Math.max((touchEndX - touchStartX) / (cardWidth / 2), 0);
-
-      if (progress > 0 && isV || isH) {
-        if (isV && device.ios && $cardScrollableEl[0] === $cardContentEl[0]) {
-          $cardScrollableEl.css('-webkit-overflow-scrolling', 'auto');
-          $cardScrollableEl.scrollTop(0);
-        }
-
-        e.preventDefault();
-      }
-
-      if (progress > 1) progress = Math.pow(progress, 0.3);
-
-      if (progress > (isV ? 1.3 : 1.1)) {
-        isTouched = false;
-        isMoved = false;
-        app.card.close($cardEl);
-      } else {
-        $cardEl.transform("translate3d(" + (app.rtl ? -translateX : translateX) + "px, " + translateY + "px, 0) scale(" + scaleX * (1 - progress * 0.2) + ", " + scaleY * (1 - progress * 0.2) + ")");
-      }
-    }
-
-    function onTouchEnd() {
-      if (!isTouched || !isMoved) return;
-      isTouched = false;
-      isMoved = false;
-
-      if (device.ios) {
-        $cardScrollableEl.css('-webkit-overflow-scrolling', '');
-      }
-
-      if (progress >= 0.8) {
-        app.card.close($cardEl);
-      } else {
-        $cardEl.addClass('card-transitioning').transform("translate3d(" + (app.rtl ? -translateX : translateX) + "px, " + translateY + "px, 0) scale(" + scaleX + ", " + scaleY + ")");
-      }
-    }
-
-    $cardEl[0].detachEventHandlers = function detachEventHandlers() {
-      app.off('resize', onResize);
-
-      if (support.touch && cardParams.swipeToClose) {
-        app.off('touchstart:passive', onTouchStart);
-        app.off('touchmove:active', onTouchMove);
-        app.off('touchend:passive', onTouchEnd);
-      }
-    };
-
-    app.on('resize', onResize);
-
-    if (support.touch && cardParams.swipeToClose) {
-      app.on('touchstart:passive', onTouchStart);
-      app.on('touchmove:active', onTouchMove);
-      app.on('touchend:passive', onTouchEnd);
-    }
-  },
-  close: function close(cardEl, animate) {
-    if (cardEl === void 0) {
-      cardEl = '.card-expandable.card-opened';
-    }
-
-    if (animate === void 0) {
-      animate = true;
-    }
-
-    var app = this;
-    var device = getDevice();
-    var $cardEl = $(cardEl).eq(0);
-    if (!$cardEl || !$cardEl.length) return;
-    if (!$cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) return;
-    var $cardContentEl = $cardEl.children('.card-content');
-    var $pageContentEl = $cardEl.parents('.page-content');
-    var $pageEl = $cardEl.parents('.page').eq(0);
-    if (!$pageEl.length) return;
-    var cardParams = Object.assign({
-      animate: animate
-    }, app.params.card, $cardEl.dataset());
-    var $cardScrollableEl = $cardEl.find(cardParams.scrollableEl);
-    var $navbarEl;
-    var $toolbarEl;
-    var $backdropEl;
-
-    if ($cardEl.attr('data-backdrop-el')) {
-      $backdropEl = $($cardEl.attr('data-backdrop-el'));
-    }
-
-    if (cardParams.backdrop) {
-      $backdropEl = $cardEl.parents('.page-content').find('.card-backdrop');
-    }
-
-    if (cardParams.hideNavbarOnOpen) {
-      $navbarEl = $pageEl.children('.navbar');
-
-      if (!$navbarEl.length) {
-        if ($pageEl[0].f7Page) $navbarEl = $pageEl[0].f7Page.$navbarEl;
-      }
-
-      if ($navbarEl && $navbarEl.length && !$cardEl[0].f7KeepNavbarOnClose) {
-        app.navbar.show($navbarEl, cardParams.animate, true);
-      }
-    }
-
-    if (cardParams.hideToolbarOnOpen) {
-      $toolbarEl = $pageEl.children('.toolbar');
-
-      if (!$toolbarEl.length) {
-        $toolbarEl = $pageEl.parents('.view').children('.toolbar');
-      }
-
-      if (!$toolbarEl.length) {
-        $toolbarEl = $pageEl.parents('.views').children('.toolbar');
-      }
-
-      if ($toolbarEl && $toolbarEl.length && !$cardEl[0].f7KeepToolbarOnClose) {
-        app.toolbar.show($toolbarEl, cardParams.animate);
-      }
-    }
-
-    $pageEl.removeClass('page-with-card-opened');
-
-    if (device.ios && $pageContentEl.length) {
-      $pageContentEl.css('height', $pageContentEl[0].offsetHeight + 1 + "px");
-      setTimeout(function () {
-        $pageContentEl.css('height', '');
-      });
-    }
-
-    if ($backdropEl && $backdropEl.length) {
-      $backdropEl.removeClass('card-backdrop-in').addClass('card-backdrop-out');
-    }
-
-    $cardEl.removeClass('card-opened card-transitioning');
-
-    if (cardParams.animate) {
-      $cardEl.addClass('card-closing');
-    } else {
-      $cardEl.addClass('card-no-transition');
-    }
-
-    $cardEl.transform('');
-    $cardEl.trigger('card:close');
-    app.emit('cardClose', $cardEl[0], $pageEl[0]);
-    var animateWidth = $cardEl.hasClass('card-expandable-animate-width');
-
-    function transitionEnd() {
-      if (!animateWidth) {
-        $cardContentEl.css({
-          width: '',
-          height: ''
-        });
-      }
-
-      if ($backdropEl && $backdropEl.length) {
-        $backdropEl.removeClass('card-backdrop-in card-backdrop-out');
-      }
-
-      $cardEl.removeClass('card-closing card-no-transition');
-      $cardEl.trigger('card:closed');
-      $cardEl.find('.card-expandable-size').remove();
-      app.emit('cardClosed', $cardEl[0], $pageEl[0]);
-    }
-
-    if (animateWidth) {
-      $cardContentEl.css({
-        width: '',
-        height: ''
-      });
-    }
-
-    $cardContentEl.transform('').scrollTop(0, animate ? 300 : 0);
-
-    if ($cardScrollableEl.length && $cardScrollableEl[0] !== $cardContentEl[0]) {
-      $cardScrollableEl.scrollTop(0, animate ? 300 : 0);
-    }
-
-    if (animate) {
-      $cardContentEl.transitionEnd(function () {
-        transitionEnd();
-      });
-    } else {
-      transitionEnd();
-    }
-
-    if ($cardEl[0].detachEventHandlers) {
-      $cardEl[0].detachEventHandlers();
-      delete $cardEl[0].detachEventHandlers;
-    }
-  },
-  toggle: function toggle(cardEl, animate) {
-    if (cardEl === void 0) {
-      cardEl = '.card-expandable';
-    }
-
-    var app = this;
-    var $cardEl = $(cardEl).eq(0);
-    if (!$cardEl.length) return;
-
-    if ($cardEl.hasClass('card-opened')) {
-      app.card.close($cardEl, animate);
-    } else {
-      app.card.open($cardEl, animate);
-    }
-  }
-};
-export default {
-  name: 'card',
-  params: {
-    card: {
-      hideNavbarOnOpen: true,
-      hideStatusbarOnOpen: true,
-      hideToolbarOnOpen: true,
-      scrollableEl: '.card-content',
-      swipeToClose: true,
-      closeByBackdropClick: true,
-      backdrop: true
-    }
-  },
-  create: function create() {
-    var app = this;
-    bindMethods(app, {
-      card: CardExpandable
-    });
-  },
-  on: {
-    pageBeforeIn: function pageBeforeIn(page) {
-      var app = this;
-
-      if (app.params.card.hideNavbarOnOpen && page.navbarEl && page.$el.find('.card-opened.card-expandable').length) {
-        app.navbar.hide(page.navbarEl, true, app.params.card.hideStatusbarOnOpen, true);
-      }
-
-      if (app.params.card.hideToolbarOnOpen && page.$el.find('.card-opened.card-expandable').length) {
-        var $toolbarEl = page.$el.children('.toolbar');
-
-        if (!$toolbarEl.length) {
-          $toolbarEl = page.$el.parents('.view').children('.toolbar');
-        }
-
-        if (!$toolbarEl.length) {
-          $toolbarEl = page.$el.parents('.views').children('.toolbar');
-        }
-
-        if ($toolbarEl && $toolbarEl.length) {
-          app.toolbar.hide($toolbarEl);
-        }
-      }
-    }
-  },
-  clicks: {
-    '.card-close': function closeCard($clickedEl, data) {
-      var app = this;
-      app.card.close(data.card, data.animate);
-    },
-    '.card-open': function closeCard($clickedEl, data) {
-      var app = this;
-      app.card.open(data.card, data.animate);
-    },
-    '.card-expandable': function toggleExpandableCard($clickedEl, data, e) {
-      var app = this;
-      if ($clickedEl.hasClass('card-opened') || $clickedEl.hasClass('card-opening') || $clickedEl.hasClass('card-closing')) return;
-      if ($(e.target).closest('.card-prevent-open, .card-close').length) return;
-      app.card.open($clickedEl);
-    },
-    '.card-backdrop-in': function onBackdropClick() {
-      var app = this;
-      var needToClose = false;
-      if (app.params.card.closeByBackdropClick) needToClose = true;
-      var $openedCardEl = $('.card-opened');
-      if (!$openedCardEl.length) return;
-
-      if ($openedCardEl.attr('data-close-by-backdrop-click') === 'true') {
-        needToClose = true;
-      } else if ($openedCardEl.attr('data-close-by-backdrop-click') === 'false') {
-        needToClose = false;
-      }
-
-      if (needToClose) app.card.close($openedCardEl);
-    }
-  }
-};

package/esm/components/checkbox/checkbox.js

@@ -1,3 +0,0 @@
-export default {
-  name: 'checkbox'
-};

package/esm/components/chip/chip.js

@@ -1,3 +0,0 @@
-export default {
-  name: 'chip'
-};