2.3.1 Release

Author: nolimits4web

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://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: May 27, 2018
+ * Released on: June 1, 2018
  */
 html,
 body,