5.7.0 release

CHANGELOG.md

@@ -2,6 +2,47 @@
 
 # Change Log
 
+# [v5.7.0](https://github.com/framework7io/framework7/compare/v5.6.0...v5.7.0) - April 25, 2020
+ * Core
+ * Card
+ * Fixed issue when expandable card didn't work when expandable card was opened in another page
+ * Fixed issue when used with "hide on scroll" Navbar/Toolbar on iOS
+ * Panel
+ * New `swipeNoFollow` parameter - fallback option for potentially better performance on old/slow devices. If you enable it, then swipe panel will not follow your finger during touch move, it will be automatically opened/closed on swipe left/right. (default false)
+ * Popup
+ * Disabled top/bottom safe areas on "tablet" when opened not as full screen popup
+ * Now it correctly handles and stack multiple opened "push" popups
+ * Radio
+ * Now radio icon can be rendered in the beginning or in the end of the list item, by adding `item-radio-icon-start` or `item-radio-icon-end` class to `item-radio` list element
+ * Smart Select
+ * Add support for more data-option-icon properties:
+ * `data-option-icon` - if it just a string then will create an icon with this class. If it is in the format of `f7:icon_name` then it will create a F7-Icons icon. If it is in the format of `md:icon_name` then it will create a Material Icons icon
+ * `data-option-icon-ios` - same as `data-option-icon` but will apply only when iOS theme is active
+ * `data-option-icon-md` - same as `data-option-icon` but will apply only when MD theme is active
+ * `data-option-icon-aurora` - same as `data-option-icon` but will apply only when Aurora theme is active
+ * Swiper - updated to latest 5.3.8
+ * Core
+ * Fix iOS bug with double bounce on free mode momentum bounce
+ * A11y
+ * Fixed focus ring on navigation buttons (#3544)
+ * Fixed RegExp issue in paginationBulletMessage (#3540, #3541)
+ * Thumbs
+ * Added thumbs.autoScrollOffset parameter that allows to set on what thumbs active slide from edge it should automaticall move scroll thumbs
+ * View
+ * New `masterDetailResizable` parameter to enable resizable Master Detail layout
+ * New `viewResize` / `view:resize` event on Master Detail resize
+ * React/Vue/Svelte
+ * ListItem
+ * New `radioIcon` string property to define where to display radio icon - in the beginning or in the end of the list item. Can be `start` or `end`
+ * Navbar
+ * Fixed not working `onBackClick` event in Svelte
+ * Panel
+ * New `swipeNoFollow` boolean property - fallback option for potentially better performance on old/slow devices. If you enable it, then swipe panel will not follow your finger during touch move, it will be automatically opened/closed on swipe left/right. (default false)
+ * View
+ * New `materDetailResizable` boolean property to enable resizable Master Detail layout
+ * New `viewResize` / `view:resize` event on Master Detail resize
+ * Minor fixes
+
 # [v5.6.0](https://github.com/framework7io/framework7/compare/v5.5.5...v5.6.0) - April 18, 2020
  * Core
  * App

packages/core/components/card/card.js

@@ -7,15 +7,17 @@ const CardExpandable = {
  open(cardEl = '.card-expandable', animate = true) {
  const app = this;
 
- if ($('.card-opened').length) return;
  const $cardEl = $(cardEl).eq(0);
-
  if (!$cardEl || !$cardEl.length) return;
  if ($cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) return;
 
  const $pageEl = $cardEl.parents('.page').eq(0);
  if (!$pageEl.length) return;
 
+ if ($pageEl.find('.card-opened').length) {
+ return;
+ }
+
  let prevented;
 
  function prevent() {

packages/core/components/navbar/navbar.js

@@ -491,6 +491,7 @@ const Navbar = {
  }
 
  function handleTitleHideShow() {
+ if ($pageEl.hasClass('page-with-card-opened')) return;
  scrollHeight = scrollContent.scrollHeight;
  offsetHeight = scrollContent.offsetHeight;
  reachEnd = currentScrollTop + offsetHeight >= scrollHeight;
@@ -613,7 +614,7 @@ export default {
  },
  },
  on: {
- 'panelBreakpoint panelCollapsedBreakpoint panelResize resize viewMasterDetailBreakpoint': function onPanelResize() {
+ 'panelBreakpoint panelCollapsedBreakpoint panelResize viewResize resize viewMasterDetailBreakpoint': function onPanelResize() {
  const app = this;
  $('.navbar').each((index, navbarEl) => {
  app.navbar.size(navbarEl);

packages/core/components/panel/panel-class.js

@@ -1,8 +1,8 @@
 import $ from 'dom7';
 import Utils from '../../utils/utils';
 import Framework7Class from '../../utils/class';
-import SwipePanel from './swipe-panel';
-import ResizablePanel from './resizable-panel';
+import swipePanel from './swipe-panel';
+import resizablePanel from './resizable-panel';
 
 class Panel extends Framework7Class {
  constructor(app, params = {}) {
@@ -208,7 +208,7 @@ class Panel extends Framework7Class {
  panel.resizable = true;
  panel.$el.addClass('panel-resizable');
  } else {
- ResizablePanel(panel);
+ resizablePanel(panel);
  }
  return panel;
  }
@@ -225,7 +225,7 @@ class Panel extends Framework7Class {
  if (panel.swipeInitialized) {
  panel.swipeable = true;
  } else {
- SwipePanel(panel);
+ swipePanel(panel);
  }
  return panel;
  }

packages/core/components/panel/panel.d.ts

@@ -47,6 +47,8 @@ export namespace Panel {
  collapsedBreakpoint?: number
  /** Enables ability to open/close panel with swipe (default false) */
  swipe?: boolean
+ /** Fallback option for potentially better performance on old/slow devices. If you enable it, then swipe panel will not follow your finger during touch move, it will be automatically opened/closed on swipe left/right. (default false) */
+ swipeNoFollow?: boolean
  /** This parameter allows to close (but not open) panel with swipes. (default false) */
  swipeOnlyClose?: boolean
  /** Width (in px) of invisible edge from the screen that triggers swipe panel. (default 0) */

packages/core/components/panel/panel.js

@@ -15,6 +15,7 @@ export default {
  visibleBreakpoint: undefined,
  collapsedBreakpoint: undefined,
  swipe: false, // or true
+ swipeNoFollow: false, // or true
  swipeOnlyClose: false,
  swipeActiveArea: 0,
  swipeThreshold: 0,

packages/core/components/panel/swipe-panel.js

@@ -18,6 +18,7 @@ function swipePanel(panel) {
  let isGestureStarted;
  let isMoved;
  let isScrolling;
+ let isInterrupted;
  const touchesStart = {};
  let touchStartTime;
  let touchesDiff;
@@ -61,12 +62,13 @@ function swipePanel(panel) {
  isMoved = false;
  isTouched = true;
  isScrolling = undefined;
+ isInterrupted = false;
 
  touchStartTime = Utils.now();
  direction = undefined;
  }
  function handleTouchMove(e) {
- if (!isTouched || isGestureStarted) return;
+ if (!isTouched || isGestureStarted || isInterrupted) return;
  touchMoves += 1;
  if (touchMoves < 2) return;
  if (e.f7PreventSwipePanel || app.preventSwipePanelBySwipeBack || app.preventSwipePanel) {
@@ -166,23 +168,37 @@ function swipePanel(panel) {
  translate = panelWidth;
  }
  }
+ const noFollowProgress = Math.abs(translate / panelWidth);
  if (effect === 'reveal') {
- $viewEl.transform(`translate3d(${translate}px,0,0)`).transition(0);
- $backdropEl.transform(`translate3d(${translate}px,0,0)`).transition(0);
+ if (!params.swipeNoFollow) {
+ $viewEl.transform(`translate3d(${translate}px,0,0)`).transition(0);
+ $backdropEl.transform(`translate3d(${translate}px,0,0)`).transition(0);
+ }
 
  $el.trigger('panel:swipe', Math.abs(translate / panelWidth));
  panel.emit('local::swipe panelSwipe', panel, Math.abs(translate / panelWidth));
  } else {
  if (side === 'left') translate -= panelWidth;
- $el.transform(`translate3d(${translate}px,0,0)`).transition(0);
+ if (!params.swipeNoFollow) {
+ $el.transform(`translate3d(${translate}px,0,0)`).transition(0);
 
- $backdropEl.transition(0);
- backdropOpacity = 1 - Math.abs(translate / panelWidth);
- $backdropEl.css({ opacity: backdropOpacity });
+ $backdropEl.transition(0);
+ backdropOpacity = 1 - Math.abs(translate / panelWidth);
+ $backdropEl.css({ opacity: backdropOpacity });
+ }
 
  $el.trigger('panel:swipe', Math.abs(translate / panelWidth));
  panel.emit('local::swipe panelSwipe', panel, Math.abs(translate / panelWidth));
  }
+
+ if (params.swipeNoFollow) {
+ const stateChanged = (panel.opened && noFollowProgress === 0) || (!panel.opened && noFollowProgress === 1);
+ if (stateChanged) {
+ isInterrupted = true;
+ // eslint-disable-next-line
+ handleTouchEnd(e);
+ }
+ }
  }
  function handleTouchEnd(e) {
  if (!isTouched || !isMoved) {
@@ -195,7 +211,7 @@ function swipePanel(panel) {
  isMoved = false;
  const timeDiff = (new Date()).getTime() - touchStartTime;
  let action;
- const edge = (translate === 0 || Math.abs(translate) === panelWidth);
+ const edge = (translate === 0 || Math.abs(translate) === panelWidth) && !params.swipeNoFollow;
 
  const threshold = params.swipeThreshold || 0;