3.5.1 release

Author: nolimits4web

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 # Change Log
 
+# [v3.5.1](https://github.com/framework7io/framework7/compare/v3.5.0...v3.5.1) - November 2, 2018
+  * Core
+    * Swiper update to latest 4.4.2:
+      * New `touchStartForcePreventDefault` parameter to force touch start event prevent default
+      * Breakpoints fix when breakpoint keys are strings
+      * Fixed issue when draggable scrollbar may not work on desktop Safari
+      * Fixed issue with wrong sort of Virtual Slides
+    * Swipeout
+      * Added new `swipeout:overswipeenter` and `swipeout:overswipeexit` events fired when overswipe enabled/disabled
+    * Panel
+      * Fixed issue when Swipe Panel could cause kind of screen flickering on open
+  * Phenome
+    * Messagebar - new `textareaId` property to set ID attribute on its textarea
+    * ListItem - new `swipeoutOverswipeEnter` and `swipeoutOverswipeExit` events
+  * Minor fixes
+
 # [v3.5.0](https://github.com/framework7io/framework7/compare/v3.4.3...v3.5.0) - October 26, 2018
   * Phenome
     * Fix issues with handling "stacked" pages

packages/core/components/dialog/dialog.d.ts

@@ -42,15 +42,15 @@ export namespace Dialog {
     /** Enables bold button text. (default false) */
     bold?: boolean
     /** Button color, one of default colors. */
-    color: string
+    color?: string
     /** If enabled then button click will close Dialog. (default true) */
     close?: boolean
     /** Additional button CSS class. */
-    cssClass: string
+    cssClass?: string
     /** Array with keyboard keycodes that will be used to trigger button click. For example, key code 13 means that button click will be triggered on Enter key press. (default []) */
     keyCodes?: number[]
     /** Callback function that will be executed after click on this button. */
-    onClick: (dialog : Dialog, e : Event) => void
+    onClick?: (dialog : Dialog, e : Event) => void
   }
 
   interface Parameters {

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

@@ -119,7 +119,7 @@ class Modal extends Framework7Class {
 
 
     /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
-    // modal._clientLeft = $el[0].clientLeft;
+    modal._clientLeft = $el[0].clientLeft;
 
     // Modal
     function transitionEnd() {
@@ -130,24 +130,22 @@ class Modal extends Framework7Class {
       }
     }
     if (animate) {
-      Utils.nextFrame(() => {
-        if ($backdropEl) {
-          $backdropEl.removeClass('not-animated');
-          $backdropEl.addClass('backdrop-in');
-        }
-        $el
-          .animationEnd(() => {
-            transitionEnd();
-          });
-        $el
-          .transitionEnd(() => {
-            transitionEnd();
-          });
-        $el
-          .removeClass('modal-out not-animated')
-          .addClass('modal-in');
-        modal.onOpen();
-      });
+      if ($backdropEl) {
+        $backdropEl.removeClass('not-animated');
+        $backdropEl.addClass('backdrop-in');
+      }
+      $el
+        .animationEnd(() => {
+          transitionEnd();
+        });
+      $el
+        .transitionEnd(() => {
+          transitionEnd();
+        });
+      $el
+        .removeClass('modal-out not-animated')
+        .addClass('modal-in');
+      modal.onOpen();
     } else {
       if ($backdropEl) {
         $backdropEl.addClass('backdrop-in not-animated');

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

@@ -214,35 +214,33 @@ class Panel extends Framework7Class {
     $backdropEl.show();
 
     /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
-    // panel._clientLeft = $el[0].clientLeft;
-
-    Utils.nextFrame(() => {
-      $('html').addClass(`with-panel with-panel-${side}-${effect}`);
-      panel.onOpen();
-
-      // Transition End;
-      const transitionEndTarget = effect === 'reveal' ? $el.nextAll('.view, .views').eq(0) : $el;
-
-      function panelTransitionEnd() {
-        transitionEndTarget.transitionEnd((e) => {
-          if ($(e.target).is(transitionEndTarget)) {
-            if ($el.hasClass('panel-active')) {
-              panel.onOpened();
-              $backdropEl.css({ display: '' });
-            } else {
-              panel.onClosed();
-              $backdropEl.css({ display: '' });
-            }
-          } else panelTransitionEnd();
-        });
-      }
-      if (animate) {
-        panelTransitionEnd();
-      } else {
-        panel.onOpened();
-        $backdropEl.css({ display: '' });
-      }
-    });
+    panel._clientLeft = $el[0].clientLeft;
+
+    $('html').addClass(`with-panel with-panel-${side}-${effect}`);
+    panel.onOpen();
+
+    // Transition End;
+    const transitionEndTarget = effect === 'reveal' ? $el.nextAll('.view, .views').eq(0) : $el;
+
+    function panelTransitionEnd() {
+      transitionEndTarget.transitionEnd((e) => {
+        if ($(e.target).is(transitionEndTarget)) {
+          if ($el.hasClass('panel-active')) {
+            panel.onOpened();
+            $backdropEl.css({ display: '' });
+          } else {
+            panel.onClosed();
+            $backdropEl.css({ display: '' });
+          }
+        } else panelTransitionEnd();
+      });
+    }
+    if (animate) {
+      panelTransitionEnd();
+    } else {
+      panel.onOpened();
+      $backdropEl.css({ display: '' });
+    }
 
     return true;
   }

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

@@ -276,11 +276,9 @@ class Searchbar extends FrameworkClass {
     sb.$disableButtonEl.transition(0).show();
     sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, `${-sb.disableButtonEl.offsetWidth}px`);
     /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
-    // sb._clientLeft = sb.$disableButtonEl[0].clientLeft;
-    Utils.nextFrame(() => {
-      sb.$disableButtonEl.transition('');
-      sb.disableButtonHasMargin = true;
-    });
+    sb._clientLeft = sb.$disableButtonEl[0].clientLeft;
+    sb.$disableButtonEl.transition('');
+    sb.disableButtonHasMargin = true;
   }
 
   enable(setFocus) {

packages/core/components/swipeout/swipeout.js

@@ -165,8 +165,16 @@ const Swipeout = {
           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');
             }
           }
@@ -197,8 +205,16 @@ const Swipeout = {
           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');
             }
           }

packages/core/components/swiper/swiper-class/components/core/breakpoints/setBreakpoint.js

@@ -7,13 +7,30 @@ export default function () {
   } = swiper;
   const breakpoints = params.breakpoints;
   if (!breakpoints || (breakpoints && Object.keys(breakpoints).length === 0)) return;
+
   // Set breakpoint for window width and update parameters
   const breakpoint = swiper.getBreakpoint(breakpoints);
+
   if (breakpoint && swiper.currentBreakpoint !== breakpoint) {
-    const breakPointsParams = breakpoint in breakpoints ? breakpoints[breakpoint] : swiper.originalParams;
-    const needsReLoop = params.loop && (breakPointsParams.slidesPerView !== params.slidesPerView);
+    const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
+    if (breakpointOnlyParams) {
+      ['slidesPerView', 'spaceBetween', 'slidesPerGroup'].forEach((param) => {
+        const paramValue = breakpointOnlyParams[param];
+        if (typeof paramValue === 'undefined') return;
+        if (param === 'slidesPerView' && (paramValue === 'AUTO' || paramValue === 'auto')) {
+          breakpointOnlyParams[param] = 'auto';
+        } else if (param === 'slidesPerView') {
+          breakpointOnlyParams[param] = parseFloat(paramValue);
+        } else {
+          breakpointOnlyParams[param] = parseInt(paramValue, 10);
+        }
+      });
+    }
+
+    const breakpointParams = breakpointOnlyParams || swiper.originalParams;
+    const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView);
 
-    Utils.extend(swiper.params, breakPointsParams);
+    Utils.extend(swiper.params, breakpointParams);
 
     Utils.extend(swiper, {
       allowTouchMove: swiper.params.allowTouchMove,
@@ -29,6 +46,6 @@ export default function () {
       swiper.updateSlides();
       swiper.slideTo((activeIndex - loopedSlides) + swiper.loopedSlides, 0, false);
     }
-    swiper.emit('breakpoint', breakPointsParams);
+    swiper.emit('breakpoint', breakpointParams);
   }
 }

packages/core/components/swiper/swiper-class/components/core/defaults.js

@@ -68,6 +68,7 @@ export default {
   threshold: 0,
   touchMoveStopPropagation: true,
   touchStartPreventDefault: true,
+  touchStartForcePreventDefault: false,
   touchReleaseOnEdges: false,
 
   // Unique Navigation Elements

packages/core/components/swiper/swiper-class/components/core/events/onTouchStart.js

@@ -65,7 +65,9 @@ export default function (event) {
     ) {
       document.activeElement.blur();
     }
-    if (preventDefault && swiper.allowTouchMove && params.touchStartPreventDefault) {
+
+    const shouldPreventDefault = preventDefault && swiper.allowTouchMove && params.touchStartPreventDefault;
+    if (params.touchStartForcePreventDefault || shouldPreventDefault) {
       e.preventDefault();
     }
   }

packages/core/components/swiper/swiper-class/components/core/update/updateSlides.js

@@ -122,11 +122,11 @@ export default function () {
       } else {
         // eslint-disable-next-line
         if (swiper.isHorizontal()) {
-          slideSize = slide[0].getBoundingClientRect().width
+          slideSize = parseFloat(slideStyles.getPropertyValue('width'))
             + parseFloat(slideStyles.getPropertyValue('margin-left'))
             + parseFloat(slideStyles.getPropertyValue('margin-right'));
         } else {
-          slideSize = slide[0].getBoundingClientRect().height
+          slideSize = parseFloat(slideStyles.getPropertyValue('height'))
             + parseFloat(slideStyles.getPropertyValue('margin-top'))
             + parseFloat(slideStyles.getPropertyValue('margin-bottom'));
         }