5.7.0 release

Author: nolimits4web

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.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/card/card.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/navbar/navbar.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.js

@@ -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-class.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/panel.d.ts

@@ -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;