5.3.2 release

CHANGELOG.md

@@ -2,6 +2,27 @@
 
 # Change Log
 
+# [v5.3.2](https://github.com/framework7io/framework7/compare/v5.3.0...v5.3.2) - January 18, 2019
+ * Core
+ * Component
+ * Now main app component will be created on app init respecting cordova's deviceready event
+ * Toolbar
+ * Fixed Tabbar init when it used in main app component
+ * Picker
+ * Added `backdrop` parameter support
+ * Swiper updated to latest 5.3.0
+ * Core
+ * New `slidesPerGroupSkip` behavior (#3361)
+ * New ratio-based breakpoints (#3389)
+ * Added SCSS interpolation (#3373, #3374)
+ * Mousehweel
+ * Fixed issue when it can fail on load (#3383)
+ * Touch
+ * Fixed issue when it could prevent Leaflet map controls on iOS 12.x
+ * Vue/React
+ * Navbar - fixed issue when it could disappear with custom transitions
+ * Minor fixes
+
 # [v5.3.0](https://github.com/framework7io/framework7/compare/v5.2.0...v5.3.0) - January 3, 2019
  * Core
  * Card

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

@@ -109,30 +109,14 @@ class Framework7 extends Framework7Class {
  html.classList.remove('theme-dark');
  }
  };
+
  // Init
- function init() {
- if (Device.cordova && app.params.initOnDeviceReady) {
- $(document).on('deviceready', () => {
- app.init();
- });
- } else {
+ if (Device.cordova && app.params.initOnDeviceReady) {
+ $(document).on('deviceready', () => {
  app.init();
- }
- }
- if (app.params.component || app.params.componentUrl) {
- app.router.componentLoader(
- app.params.component,
- app.params.componentUrl,
- { componentOptions: { el: app.root[0] } },
- (el) => {
- app.root = $(el);
- app.root[0].f7 = app;
- app.rootComponent = el.f7Component;
- if (app.params.init) init();
- }
- );
- } else if (app.params.init) {
- init();
+ });
+ } else {
+ app.init();
  }
 
  // Return app instance
@@ -184,7 +168,24 @@ class Framework7 extends Framework7Class {
  if (app.mq.light) app.mq.light.removeListener(app.colorSchemeListener);
  }
 
- init() {
+ initAppComponent(callback) {
+ const app = this;
+ app.router.componentLoader(
+ app.params.component,
+ app.params.componentUrl,
+ { componentOptions: { el: app.root[0] } },
+ (el) => {
+ app.root = $(el);
+ app.root[0].f7 = app;
+ app.rootComponent = el.f7Component;
+ if (callback) callback();
+ },
+ () => {}
+ );
+ }
+
+ // eslint-disable-next-line
+ _init() {
  const app = this;
  if (app.initialized) return app;
 
@@ -237,6 +238,17 @@ class Framework7 extends Framework7Class {
  return app;
  }
 
+ init() {
+ const app = this;
+ if (app.params.component || app.params.componentUrl) {
+ app.initAppComponent(() => {
+ app._init(); // eslint-disable-line
+ });
+ } else {
+ app._init(); // eslint-disable-line
+ }
+ }
+
  // eslint-disable-next-line
  loadModule(...args) {
  return Framework7.loadModule(...args);

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

@@ -60,7 +60,7 @@ export namespace Dialog {
  backdrop?: boolean
  /** When enabled, dialog will be closed on backdrop click. (default true) */
  closeByBackdropClick?: boolean
- /** Whether the Dialog should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods. (default true) */
+ /** Whether the Dialog should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods. (default false) */
  animate?: boolean
  /** Dialog title. */
  title?: string
@@ -132,9 +132,9 @@ export namespace Dialog {
  confirm(text : string, callbackOk?: () => void, callbackCancel?: () => void) : Dialog
 
  /** create Prompt Dialog and open it */
- prompt(text : string, title : string, callbackOk?: (value : string) => void, callbackCancel?: (value : string) => void) : Dialog
+ prompt(text : string, title : string, callbackOk?: (value : string) => void, callbackCancel?: (value : string) => void, defaultValue?: string) : Dialog
  /** create Prompt Dialog with default title and open it */
- prompt(text : string, callbackOk?: (value : string) => void, callbackCancel?: (value : string) => void) : Dialog
+ prompt(text : string, callbackOk?: (value : string) => void, callbackCancel?: (value : string) => void, defaultValue?: string) : Dialog
 
  /** create Login Dialog and open it */
  login(text : string, title : string, callbackOk?: (username : string, password : string) => void, callbackCancel?: (username : string, password : string) => void) : Dialog

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

@@ -454,7 +454,7 @@ class Picker extends Framework7Class {
  targetEl: $inputEl,
  scrollToEl: params.scrollToInput ? $inputEl : undefined,
  content: picker.render(),
- backdrop: isPopover,
+ backdrop: typeof params.backdrop !== 'undefined' ? params.backdrop : isPopover,
  on: {
  open() {
  const modal = this;

packages/core/components/picker/picker.d.ts

@@ -121,6 +121,8 @@ export namespace Picker {
  sheetPush?: boolean
  /** Enables ability to close Picker sheet with swipe (default false) */
  sheetSwipeToClose?: boolean | undefined
+ /** Enables backdrop (dark semi transparent layer behind). (default undefined - based on Popover or Sheet defaults) */
+ backdrop?: boolean
  /** String with CSS selector or HTMLElement with related input element. */
  inputEl?: HTMLElement | CSSSelector
  /** Scroll viewport (page-content) to input when picker opened. (default true) */

packages/core/components/picker/picker.js

@@ -39,6 +39,7 @@ export default {
  openIn: 'auto', // or 'popover' or 'sheet'
  sheetPush: false,
  sheetSwipeToClose: undefined,
+ backdrop: undefined, // uses Popover or Sheet defaults
  formatValue: null,
  inputEl: null,
  inputReadOnly: true,

packages/core/components/swiper/swiper-src/components/core/breakpoints/getBreakpoint.js

@@ -4,14 +4,20 @@ export default function (breakpoints) {
  // Get breakpoint for window width
  if (!breakpoints) return undefined;
  let breakpoint = false;
- const points = [];
- Object.keys(breakpoints).forEach((point) => {
- points.push(point);
+
+ const points = Object.keys(breakpoints).map((point) => {
+ if (typeof point === 'string' && point.startsWith('@')) {
+ const minRatio = parseFloat(point.substr(1));
+ const value = window.innerHeight * minRatio;
+ return { value, point };
+ }
+ return { value: point, point };
  });
- points.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
+
+ points.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10));
  for (let i = 0; i < points.length; i += 1) {
- const point = points[i];
- if (point <= window.innerWidth) {
+ const { point, value } = points[i];
+ if (value <= window.innerWidth) {
  breakpoint = point;
  }
  }

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

@@ -14,7 +14,7 @@ export default function () {
  if (breakpoint && swiper.currentBreakpoint !== breakpoint) {
  const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
  if (breakpointOnlyParams) {
- ['slidesPerView', 'spaceBetween', 'slidesPerGroup', 'slidesPerColumn'].forEach((param) => {
+ ['slidesPerView', 'spaceBetween', 'slidesPerGroup', 'slidesPerGroupSkip', 'slidesPerColumn'].forEach((param) => {
  const paramValue = breakpointOnlyParams[param];
  if (typeof paramValue === 'undefined') return;
  if (param === 'slidesPerView' && (paramValue === 'AUTO' || paramValue === 'auto')) {

packages/core/components/swiper/swiper-src/components/core/core.scss

@@ -1,5 +1,5 @@
 :root {
- --swiper-theme-color: $themeColor;
+ --swiper-theme-color: #{$themeColor};
 }
 .swiper-container {
  margin-left: auto;

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

@@ -44,6 +44,7 @@ export default {
  slidesPerColumn: 1,
  slidesPerColumnFill: 'column',
  slidesPerGroup: 1,
+ slidesPerGroupSkip: 0,
  centeredSlides: false,
  centeredSlidesBounds: false,
  slidesOffsetBefore: 0, // in px

packages/core/components/swiper/swiper-src/components/core/events/onTouchEnd.js

@@ -238,11 +238,12 @@ export default function (event) {
  // Find current slide
  let stopIndex = 0;
  let groupSize = swiper.slidesSizesGrid[0];
- for (let i = 0; i < slidesGrid.length; i += params.slidesPerGroup) {
- if (typeof slidesGrid[i + params.slidesPerGroup] !== 'undefined') {
- if (currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + params.slidesPerGroup]) {
+ for (let i = 0; i < slidesGrid.length; i += (i < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup)) {
+ const increment = (i < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup);
+ if (typeof slidesGrid[i + increment] !== 'undefined') {
+ if (currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + increment]) {
  stopIndex = i;
- groupSize = slidesGrid[i + params.slidesPerGroup] - slidesGrid[i];
+ groupSize = slidesGrid[i + increment] - slidesGrid[i];
  }
  } else if (currentPos >= slidesGrid[i]) {
  stopIndex = i;
@@ -252,6 +253,7 @@ export default function (event) {
 
  // Find current slide size
  const ratio = (currentPos - slidesGrid[stopIndex]) / groupSize;
+ const increment = (stopIndex < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup);
 
  if (timeDiff > params.longSwipesMs) {
  // Long touches
@@ -260,11 +262,11 @@ export default function (event) {
  return;
  }
  if (swiper.swipeDirection === 'next') {
- if (ratio >= params.longSwipesRatio) swiper.slideTo(stopIndex + params.slidesPerGroup);
+ if (ratio >= params.longSwipesRatio) swiper.slideTo(stopIndex + increment);
  else swiper.slideTo(stopIndex);
  }
  if (swiper.swipeDirection === 'prev') {
- if (ratio > (1 - params.longSwipesRatio)) swiper.slideTo(stopIndex + params.slidesPerGroup);
+ if (ratio > (1 - params.longSwipesRatio)) swiper.slideTo(stopIndex + increment);
  else swiper.slideTo(stopIndex);
  }
  } else {
@@ -276,13 +278,13 @@ export default function (event) {
  const isNavButtonTarget = swiper.navigation && (e.target === swiper.navigation.nextEl || e.target === swiper.navigation.prevEl);
  if (!isNavButtonTarget) {
  if (swiper.swipeDirection === 'next') {
- swiper.slideTo(stopIndex + params.slidesPerGroup);
+ swiper.slideTo(stopIndex + increment);
  }
  if (swiper.swipeDirection === 'prev') {
  swiper.slideTo(stopIndex);
  }
  } else if (e.target === swiper.navigation.nextEl) {
- swiper.slideTo(stopIndex + params.slidesPerGroup);
+ swiper.slideTo(stopIndex + increment);
  } else {
  swiper.slideTo(stopIndex);
  }

packages/core/components/swiper/swiper-src/components/core/slide/slideNext.js

@@ -2,12 +2,12 @@
 export default function (speed = this.params.speed, runCallbacks = true, internal) {
  const swiper = this;
  const { params, animating } = swiper;
+ const increment = swiper.activeIndex < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup;
  if (params.loop) {
  if (animating) return false;
  swiper.loopFix();
  // eslint-disable-next-line
  swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
- return swiper.slideTo(swiper.activeIndex + params.slidesPerGroup, speed, runCallbacks, internal);
  }
- return swiper.slideTo(swiper.activeIndex + params.slidesPerGroup, speed, runCallbacks, internal);
+ return swiper.slideTo(swiper.activeIndex + increment, speed, runCallbacks, internal);
 }

packages/core/components/swiper/swiper-src/components/core/slide/slideTo.js

@@ -10,8 +10,9 @@ export default function (index = 0, speed = this.params.speed, runCallbacks = tr
  return false;
  }
 
- let snapIndex = Math.floor(slideIndex / params.slidesPerGroup);
- if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
+ const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex);
+ let snapIndex = skip + Math.floor((slideIndex - skip) / swiper.params.slidesPerGroup);
+ if (snapIndex >= slidesGrid.length) snapIndex = slidesGrid.length - 1;
 
  if ((activeIndex || params.initialSlide || 0) === (previousIndex || 0) && runCallbacks) {
  swiper.emit('beforeSlideChangeStart');

packages/core/components/swiper/swiper-src/components/core/slide/slideToClosest.js

@@ -2,7 +2,8 @@
 export default function (speed = this.params.speed, runCallbacks = true, internal, threshold = 0.5) {
  const swiper = this;
  let index = swiper.activeIndex;
- const snapIndex = Math.floor(index / swiper.params.slidesPerGroup);
+ const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
+ const snapIndex = skip + Math.floor((index - skip) / swiper.params.slidesPerGroup);
 
  const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;
 
@@ -24,7 +25,7 @@ export default function (speed = this.params.speed, runCallbacks = true, interna
  }
  }
  index = Math.max(index, 0);
- index = Math.min(index, swiper.snapGrid.length - 1);
+ index = Math.min(index, swiper.slidesGrid.length - 1);
 
  return swiper.slideTo(index, speed, runCallbacks, internal);
 }

packages/core/components/swiper/swiper-src/components/core/update/updateActiveIndex.js

@@ -28,7 +28,8 @@ export default function (newActiveIndex) {
  if (snapGrid.indexOf(translate) >= 0) {
  snapIndex = snapGrid.indexOf(translate);
  } else {
- snapIndex = Math.floor(activeIndex / params.slidesPerGroup);
+ const skip = Math.min(params.slidesPerGroupSkip, activeIndex);
+ snapIndex = skip + Math.floor((activeIndex - skip) / params.slidesPerGroup);
  }
  if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
  if (activeIndex === previousIndex) {

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

@@ -195,7 +195,7 @@ export default function () {
  slidesGrid.push(slidePosition);
  } else {
  if (params.roundLengths) slidePosition = Math.floor(slidePosition);
- if ((index) % params.slidesPerGroup === 0) snapGrid.push(slidePosition);
+ if ((index - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params.slidesPerGroup === 0) snapGrid.push(slidePosition);
  slidesGrid.push(slidePosition);
  slidePosition = slidePosition + slideSize + spaceBetween;
  }

packages/core/components/swiper/swiper-src/components/mousewheel/mousewheel.js

@@ -121,7 +121,11 @@ const Mousewheel = {
  e.preventDefault();
  }
 
- if (!swiper.mouseEntered && !params.releaseOnEdges) return true;
+ let target = swiper.$el;
+ if (swiper.params.mousewheel.eventsTarged !== 'container') {
+ target = $(swiper.params.mousewheel.eventsTarged);
+ }
+ if (!swiper.mouseEntered && !target[0].contains(e.target) && !params.releaseOnEdges) return true;
 
  if (e.originalEvent) e = e.originalEvent; // jquery fix
  let delta = 0;

packages/core/components/swiper/swiper-src/components/navigation/navigation.scss

@@ -51,7 +51,7 @@
  .swiper-button-prev,
  .swiper-button-next {
  &.swiper-button-#{$navColorName} {
- --swiper-navigation-color: $navColorValue;
+ --swiper-navigation-color: #{$navColorValue};
  }
  }
 }

packages/core/components/swiper/swiper-src/components/pagination/pagination.scss

@@ -141,7 +141,7 @@
 }
 @each $paginationColorName, $paginationColorValue in $colors {
  .swiper-pagination-#{$paginationColorName} {
- --swiper-pagination-color: $paginationColorValue;
+ --swiper-pagination-color: #{$paginationColorValue};
  }
 }
 .swiper-pagination-lock {

packages/core/components/toolbar/toolbar.js

@@ -212,4 +212,12 @@ export default {
  });
  },
  },
+ vnode: {
+ tabbar: {
+ insert(vnode) {
+ const app = this;
+ app.toolbar.init(vnode.elm);
+ },
+ },
+ },
 };

packages/core/css/framework7.bundle.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 5.3.0
+ * Framework7 5.3.2
  * Full featured mobile HTML framework for building iOS & Android apps
  * http://framework7.io/
  *
  * Copyright 2014-2020 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: January 3, 2020
+ * Released on: January 18, 2020
  */
 
 /*====================