2.3.1 Release

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 # Change Log
 
+# [v2.3.1](https://github.com/framework7io/framework7/compare/v2.3.0...v2.3.1) - June 1, 2018
+ * Searchbar
+ * Fixed issue with not hiding/showing backdrop when `customSearch` is enabled
+ * Sortable
+ * New app parameter `sortable.moveElements` by default is `true`. Useful to disable when you use for DOM manipulation other library like Vue or React
+ * Swiper update to latest v4.3.2:
+ * Core
+ * Added `addSlide(index, slide)` method to add slide at required position. Thanks to @kochizufan
+ * Fixed issue with loop #2647. Thanks to @kochizufan
+ * Pagination
+ * New `formatFractionCurrent(number)` parameter to format current number in Fraction pagination
+ * New `formatFractionTotal(number)` parameter to format total number in Fraction pagination
+ * Minor fixes
+
 # [v2.3.0](https://github.com/framework7io/framework7/compare/v2.2.5...v2.3.0) - May 27, 2018
  * View/Router
  * Fixed missing `pushStateOnLoad` parameter

dist/components/searchbar/searchbar-class.js

@@ -384,7 +384,7 @@ class Searchbar extends FrameworkClass {
  sb.query = query;
  sb.value = query;
 
- const { $searchContainer, $el, $backdropEl, $foundEl, $notFoundEl, $hideOnSearchEl, isVirtualList } = sb;
+ const { $searchContainer, $el, $foundEl, $notFoundEl, $hideOnSearchEl, isVirtualList } = sb;
 
  // Hide on search element
  if (query.length > 0 && $hideOnSearchEl) {
@@ -393,10 +393,15 @@ class Searchbar extends FrameworkClass {
  $hideOnSearchEl.removeClass('hidden-by-searchbar');
  }
  // Add active/inactive classes on overlay
- if (query.length === 0) {
- if ($searchContainer && $searchContainer.length && $el.hasClass('searchbar-enabled') && $backdropEl) sb.backdropShow();
- } else if ($searchContainer && $searchContainer.length && $el.hasClass('searchbar-enabled')) {
- sb.backdropHide();
+ if (
+ ($searchContainer && $searchContainer.length && $el.hasClass('searchbar-enabled')) ||
+ (sb.params.customSearch && $el.hasClass('searchbar-enabled'))
+ ) {
+ if (query.length === 0) {
+ sb.backdropShow();
+ } else {
+ sb.backdropHide();
+ }
  }
 
  if (sb.params.customSearch) {

dist/components/sortable/sortable.js

@@ -138,22 +138,27 @@ const Sortable = {
  let virtualList;
  let oldIndex;
  let newIndex;
- if ($insertAfterEl) {
- $sortingEl.insertAfter($insertAfterEl);
- }
- if ($insertBeforeEl) {
- $sortingEl.insertBefore($insertBeforeEl);
+ if (app.params.sortable.moveElements) {
+ if ($insertAfterEl) {
+ $sortingEl.insertAfter($insertAfterEl);
+ }
+ if ($insertBeforeEl) {
+ $sortingEl.insertBefore($insertBeforeEl);
+ }
  }
 
- $sortingEl.trigger('sortable:sort', { from: indexFrom, to: $sortingEl.index() });
- app.emit('sortableSort', $sortingEl[0], { from: indexFrom, to: $sortingEl.index() });
-
- if (($insertAfterEl || $insertBeforeEl) && $sortableContainer.hasClass('virtual-list')) {
+ if (($insertAfterEl || $insertBeforeEl) &&
+ $sortableContainer.hasClass('virtual-list')
+ ) {
  virtualList = $sortableContainer[0].f7VirtualList;
  oldIndex = $sortingEl[0].f7VirtualListIndex;
  newIndex = $insertBeforeEl ? $insertBeforeEl[0].f7VirtualListIndex : $insertAfterEl[0].f7VirtualListIndex;
  if (virtualList) virtualList.moveItem(oldIndex, newIndex);
  }
+
+ $sortingEl.trigger('sortable:sort', { from: indexFrom, to: $sortingEl.index() });
+ app.emit('sortableSort', $sortingEl[0], { from: indexFrom, to: $sortingEl.index() });
+
  $insertBeforeEl = undefined;
  $insertAfterEl = undefined;
  isTouched = false;
@@ -196,7 +201,9 @@ const Sortable = {
 export default {
  name: 'sortable',
  params: {
- sortable: true,
+ sortable: {
+ moveElements: true,
+ },
  },
  create() {
  const app = this;
@@ -212,7 +219,8 @@ export default {
  on: {
  init() {
  const app = this;
- if (app.params.sortable) app.sortable.init();
+ if (!app.params.sortable) return;
+ app.sortable.init();
  },
  },
  clicks: {

dist/components/swiper/swiper-class/components/core/loop/loopFix.js

@@ -19,7 +19,7 @@ export default function () {
  if (slideChanged && diff !== 0) {
  swiper.setTranslate((rtl ? -swiper.translate : swiper.translate) - diff);
  }
- } else if ((params.slidesPerView === 'auto' && activeIndex >= loopedSlides * 2) || (activeIndex > slides.length - (params.slidesPerView * 2))) {
+ } else if ((params.slidesPerView === 'auto' && activeIndex >= loopedSlides * 2) || (activeIndex >= slides.length - loopedSlides)) {
  // Fix For Positive Oversliding
  newIndex = -slides.length + activeIndex + loopedSlides;
  newIndex += loopedSlides;

dist/components/swiper/swiper-class/components/core/manipulation/addSlide.js

@@ -0,0 +1,53 @@
+import Support from '../../../utils/support';
+
+export default function (index, slides) {
+ const swiper = this;
+ const { $wrapperEl, params, activeIndex } = swiper;
+ let activeIndexBuffer = activeIndex;
+ if (params.loop) {
+ activeIndexBuffer -= swiper.loopedSlides;
+ swiper.loopDestroy();
+ swiper.slides = $wrapperEl.children(`.${params.slideClass}`);
+ }
+ const baseLength = swiper.slides.length;
+ if (index <= 0) {
+ swiper.prependSlide(slides);
+ return;
+ } else if (index >= baseLength) {
+ swiper.appendSlide(slides);
+ return;
+ }
+ let newActiveIndex = activeIndexBuffer > index ? activeIndexBuffer + 1 : activeIndexBuffer;
+
+ const slidesBuffer = [];
+ for (let i = baseLength - 1; i >= index; i -= 1) {
+ const currentSlide = swiper.slides.eq(i);
+ currentSlide.remove();
+ slidesBuffer.unshift(currentSlide);
+ }
+
+ if (typeof slides === 'object' && 'length' in slides) {
+ for (let i = 0; i < slides.length; i += 1) {
+ if (slides[i]) $wrapperEl.append(slides[i]);
+ }
+ newActiveIndex = activeIndexBuffer > index ? activeIndexBuffer + slides.length : activeIndexBuffer;
+ } else {
+ $wrapperEl.append(slides);
+ }
+
+ for (let i = 0; i < slidesBuffer.length; i += 1) {
+ $wrapperEl.append(slidesBuffer[i]);
+ }
+
+ if (params.loop) {
+ swiper.loopCreate();
+ }
+ if (!(params.observer && Support.observer)) {
+ swiper.update();
+ }
+ if (params.loop) {
+ swiper.slideTo(newActiveIndex + swiper.loopedSlides, 0, false);
+ } else {
+ swiper.slideTo(newActiveIndex, 0, false);
+ }
+}

dist/components/swiper/swiper-class/components/core/manipulation/index.js

@@ -1,11 +1,13 @@
 import appendSlide from './appendSlide';
 import prependSlide from './prependSlide';
+import addSlide from './addSlide';
 import removeSlide from './removeSlide';
 import removeAllSlides from './removeAllSlides';
 
 export default {
  appendSlide,
  prependSlide,
+ addSlide,
  removeSlide,
  removeAllSlides,
 };

dist/components/swiper/swiper-class/components/core/manipulation/removeSlide.js

@@ -4,11 +4,13 @@ export default function (slidesIndexes) {
  const swiper = this;
  const { params, $wrapperEl, activeIndex } = swiper;
 
+ let activeIndexBuffer = activeIndex;
  if (params.loop) {
+ activeIndexBuffer -= swiper.loopedSlides;
  swiper.loopDestroy();
  swiper.slides = $wrapperEl.children(`.${params.slideClass}`);
  }
- let newActiveIndex = activeIndex;
+ let newActiveIndex = activeIndexBuffer;
  let indexToRemove;
 
  if (typeof slidesIndexes === 'object' && 'length' in slidesIndexes) {

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

@@ -9,8 +9,9 @@ export default function () {
  const {
  $wrapperEl, size: swiperSize, rtlTranslate: rtl, wrongRTL,
  } = swiper;
- const slides = $wrapperEl.children(`.${swiper.params.slideClass}`);
  const isVirtual = swiper.virtual && params.virtual.enabled;
+ const previousSlidesLength = isVirtual ? swiper.virtual.slides.length : swiper.slides.length;
+ const slides = $wrapperEl.children(`.${swiper.params.slideClass}`);
  const slidesLength = isVirtual ? swiper.virtual.slides.length : slides.length;
  let snapGrid = [];
  const slidesGrid = [];
@@ -26,7 +27,6 @@ export default function () {
  offsetAfter = params.slidesOffsetAfter.call(swiper);
  }
 
- const previousSlidesLength = slidesLength;
  const previousSnapGridLength = swiper.snapGrid.length;
  const previousSlidesGridLength = swiper.snapGrid.length;
 

dist/components/swiper/swiper-class/components/pagination/pagination.js

@@ -103,8 +103,8 @@ const Pagination = {
  }
  }
  if (params.type === 'fraction') {
- $el.find(`.${params.currentClass}`).text(current + 1);
- $el.find(`.${params.totalClass}`).text(total);
+ $el.find(`.${params.currentClass}`).text(params.formatFractionCurrent(current + 1));
+ $el.find(`.${params.totalClass}`).text(params.formatFractionTotal(total));
  }
  if (params.type === 'progressbar') {
  let progressbarDirection;
@@ -254,6 +254,8 @@ export default {
  type: 'bullets', // 'bullets' or 'progressbar' or 'fraction' or 'custom'
  dynamicBullets: false,
  dynamicMainBullets: 1,
+ formatFractionCurrent: number => number,
+ formatFractionTotal: number => number,
  bulletClass: 'swiper-pagination-bullet',
  bulletActiveClass: 'swiper-pagination-bullet-active',
  modifierClass: 'swiper-pagination-', // NEW

dist/css/framework7.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 2.3.0
+ * Framework7 2.3.1
  * Full featured mobile HTML framework for building iOS & Android apps
  * http:https://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: May 27, 2018
+ * Released on: June 1, 2018
  */
 html,
 body,

dist/css/framework7.ios.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 2.3.0
+ * Framework7 2.3.1
  * Full featured mobile HTML framework for building iOS & Android apps
  * http:https://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: May 27, 2018
+ * Released on: June 1, 2018
  */
 html,
 body,

dist/css/framework7.md.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 2.3.0
+ * Framework7 2.3.1
  * Full featured mobile HTML framework for building iOS & Android apps
  * http:https://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: May 27, 2018
+ * Released on: June 1, 2018
  */
 html,
 body,

dist/css/framework7.rtl.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 2.3.0
+ * Framework7 2.3.1
  * Full featured mobile HTML framework for building iOS & Android apps
  * http:https://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: May 27, 2018
+ * Released on: June 1, 2018
  */
 html {
  direction: rtl;

dist/css/framework7.rtl.ios.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 2.3.0
+ * Framework7 2.3.1
  * Full featured mobile HTML framework for building iOS & Android apps
  * http:https://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: May 27, 2018
+ * Released on: June 1, 2018
  */
 html {
  direction: rtl;

dist/css/framework7.rtl.md.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 2.3.0
+ * Framework7 2.3.1
  * Full featured mobile HTML framework for building iOS & Android apps
  * http:https://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: May 27, 2018
+ * Released on: June 1, 2018
  */
 html {
  direction: rtl;