3.6.0 release

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 # Change Log
 
+# [v3.6.0](https://github.com/framework7io/framework7/compare/v3.5.2...v3.6.0) - December 7, 2018
+  * Core
+    * Router
+      * New `keepAlive` routes. When route's page is specified with `keepAlive: true`, then it, instead of removing and destroying component, it will be detached from DOM and attached back when required.
+      * New `router.clearPreviousPages()` method that removes all previous (stacked) pages from DOM
+    * Accordion
+      * New `accordion:beforeopen` event that is triggered right before accordion will be opened. `event.detail.prevent` contains function that will prevent it from opening if called;
+      * New `accordion:beforeclose` event that is triggered right before accordion will be closed. `event.detail.prevent` contains function that will prevent it from closing if called;
+  * Phenome (React / Vue)
+    * AccordionItem and ListItem have new `accordion:beforeopen` / `accordionBeforeOpen` events, second argument passed to handler contains function that will prevent it from closing if called;
+    * AccordionItem and ListItem have new `accordion:beforeclose` / `accordionBeforeClose` events, second argument passed to  handler contains function that will prevent it from closing if called;
+    *  View component now accepts MD-theme related swipeback props: `mdSwipeBack`, `mdSwipeBackAnimateShadow`, `mdSwipeBackAnimateOpacity`, `mdSwipeBackActiveArea`, `mdSwipeBackThreshold`
+    * ListItem has new `virtualListIndex: Number` property to specify item index when rendered inside of Virtual List
+    * Searchbar has new `value` property to specify Searchbar input's value. Can be usefule when used with `customSearch` enabled
+  * Lots of minor fixes and improvements
+
 # [v3.5.2](https://github.com/framework7io/framework7/compare/v3.5.1...v3.5.2) - November 12, 2018
   * Core
     * List

packages/core/components/accordion/accordion.d.ts

@@ -18,12 +18,18 @@ export namespace Accordion {
 
   }
   interface AppEvents {
+    /** Event will be triggered before accordion content starts its opening animation */
+    accordionBeforeOpen : (el : HTMLElement | CSSSelector, prevent: () => void) => void
+
     /** Event will be triggered when accordion content starts its opening animation */
     accordionOpen : (el : HTMLElement | CSSSelector) => void
 
     /** Event will be triggered after accordion content completes its opening animation */
     accordionOpened : (el : HTMLElement | CSSSelector) => void
 
+    /** Event will be triggered before accordion content starts its closing animation */
+    accordionBeforeClose : (el : HTMLElement | CSSSelector, prevent: () => void) => void
+
     /** Event will be triggered when accordion content starts its closing animation */
     accordionClose : (el : HTMLElement | CSSSelector) => void
 

packages/core/components/accordion/accordion.js

@@ -19,6 +19,13 @@ const Accordion = {
   open(el) {
     const app = this;
     const $el = $(el);
+    let prevented = false;
+    function prevent() {
+      prevented = true;
+    }
+    $el.trigger('accordion:beforeopen', { prevent }, prevent);
+    app.emit('accordionBeforeOpen', $el[0], prevent);
+    if (prevented) return;
     const $list = $el.parents('.accordion-list').eq(0);
     let $contentEl = $el.children('.accordion-item-content');
     $contentEl.removeAttr('aria-hidden');
@@ -51,6 +58,13 @@ const Accordion = {
   close(el) {
     const app = this;
     const $el = $(el);
+    let prevented = false;
+    function prevent() {
+      prevented = true;
+    }
+    $el.trigger('accordion:beforeclose', { prevent }, prevent);
+    app.emit('accordionBeforeClose', $el[0], prevent);
+    if (prevented) return;
     let $contentEl = $el.children('.accordion-item-content');
     if ($contentEl.length === 0) $contentEl = $el.find('.accordion-item-content');
     $el.removeClass('accordion-item-opened');

packages/core/components/actions/actions.d.ts

@@ -19,9 +19,9 @@ export namespace Actions {
     opened : boolean
 
     /** Open action sheet. Where animate - boolean (by default true) - defines whether it should be opened with animation */
-    open(animate : boolean) : void
+    open(animate? : boolean) : void
     /** Close action sheet. Where animate - boolean (by default true) - defines whether it should be closed with animation */
-    close(animate : boolean) : void
+    close(animate? : boolean) : void
     /** Destroy action sheet */
     destroy() : void
   }
@@ -121,11 +121,11 @@ export namespace Actions {
       /** destroy Action Sheet instance */
       destroy(el : HTMLElement | CSSSelector | Actions) : void;
       /** get Action Sheet instance by HTML element */
-      get(el : HTMLElement | CSSSelector) : Actions;
+      get(el? : HTMLElement | CSSSelector) : Actions;
       /** opens Action Sheet */
-      open(el : HTMLElement | CSSSelector, animate : boolean) : Actions;
+      open(el? : HTMLElement | CSSSelector, animate? : boolean) : Actions;
       /** closes Action Sheet */
-      close(el : HTMLElement | CSSSelector, animate : boolean) : Actions;
+      close(el? : HTMLElement | CSSSelector, animate? : boolean) : Actions;
     }
   }
   interface AppParams {

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

@@ -1252,7 +1252,7 @@ class Calendar extends Framework7Class {
     }
 
     // Extra focus
-    if (!inline && $inputEl.length && app.theme === 'md') {
+    if (!inline && $inputEl && $inputEl.length && app.theme === 'md') {
       $inputEl.trigger('focus');
     }
 

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

@@ -19,15 +19,15 @@ export namespace Dialog {
     opened : boolean
 
     /** Open dialog */
-    open(animate : boolean) : void
+    open(animate?: boolean) : void
     /** Close dialog. */
-    close(animate : boolean) : void
+    close(animate?: boolean) : void
     /** Sets dialog progress when Dialog Progress shortcut in use */
     setProgress(
       /** progressbar progress (from 0 to 100) */
-      progress : number,
+      progress: number,
       /** (in ms) - progressbar progress change duration */
-      duration : number) : void
+      duration?: number) : void
     /** Sets dialog's title */
     setTitle(title : string) : void
     /** Sets dialog's text */
@@ -115,11 +115,11 @@ export namespace Dialog {
       /** destroy Dialog instance */
       destroy(el : HTMLElement | CSSSelector | Dialog) : void;
       /** get Dialog instance by HTML element */
-      get(el : HTMLElement | CSSSelector) : Dialog;
+      get(el? : HTMLElement | CSSSelector) : Dialog;
       /** opens Dialog */
-      open(el : HTMLElement | CSSSelector, animate : boolean) : Dialog;
+      open(el? : HTMLElement | CSSSelector, animate? : boolean) : Dialog;
       /** closes Dialog */
-      close(el : HTMLElement | CSSSelector, animate : boolean) : Dialog;
+      close(el? : HTMLElement | CSSSelector, animate? : boolean) : Dialog;
 
       /** create Alert Dialog and open it */
       alert(text : string, title : string, callback?: () => void) : Dialog

packages/core/components/login-screen/login-screen.d.ts

@@ -15,9 +15,9 @@ export namespace LoginScreen {
     opened : boolean
 
     /** Open login screen. Where */
-    open(animate : boolean) : LoginScreen
+    open(animate? : boolean) : LoginScreen
     /** Close login screen. Where */
-    close(animate : boolean) : LoginScreen
+    close(animate? : boolean) : LoginScreen
     /** Destroy login screen */
     destroy() : void
   }
@@ -64,11 +64,11 @@ export namespace LoginScreen {
       /** destroy LoginScreen instance */
       destroy(el : HTMLElement | CSSSelector | LoginScreen) : void
       /** get LoginScreen instance by HTML element */
-      get(el : HTMLElement | CSSSelector) : LoginScreen
+      get(el? : HTMLElement | CSSSelector) : LoginScreen
       /** open LoginScreen */
-      open(el : HTMLElement | CSSSelector, animate?: boolean) : LoginScreen
+      open(el? : HTMLElement | CSSSelector, animate?: boolean) : LoginScreen
       /** closes LoginScreen */
-      close(el : HTMLElement | CSSSelector, animate?: boolean) : LoginScreen
+      close(el? : HTMLElement | CSSSelector, animate?: boolean) : LoginScreen
     }
   }
   interface AppParams {

packages/core/components/navbar/navbar.js

@@ -178,7 +178,16 @@ const Navbar = {
       $navbarInnerEl = $navbarInnerEl.find('.navbar-inner');
       if ($navbarInnerEl.length > 1) return undefined;
     }
-    return $navbarInnerEl[0].f7Page;
+    if ($navbarInnerEl.parents('.page').length) {
+      return $navbarInnerEl.parents('.page')[0];
+    }
+    let pageEl;
+    $navbarInnerEl.parents('.view').find('.page').each((index, el) => {
+      if (el && el.f7Page && el.f7Page.navbarEl && $navbarInnerEl[0] === el.f7Page.navbarEl) {
+        pageEl = el;
+      }
+    });
+    return pageEl;
   },
   initHideNavbarOnScroll(pageEl, navbarInnerEl) {
     const app = this;
@@ -242,6 +251,7 @@ export default {
         hide: Navbar.hide.bind(app),
         show: Navbar.show.bind(app),
         getElByPage: Navbar.getElByPage.bind(app),
+        getPageByEl: Navbar.getPageByEl.bind(app),
         initHideNavbarOnScroll: Navbar.initHideNavbarOnScroll.bind(app),
       },
     });

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

@@ -28,7 +28,7 @@ function swipePanel(panel) {
   function handleTouchStart(e) {
     if (!panel.swipeable) return;
     if (!app.panel.allowOpen || (!params.swipe && !params.swipeOnlyClose) || isTouched) return;
-    if ($('.modal-in, .photo-browser-in').length > 0) return;
+    if ($('.modal-in:not(.toast):not(.notification), .photo-browser-in').length > 0) return;
     otherPanel = app.panel[side === 'left' ? 'right' : 'left'] || {};
     if (!panel.opened && otherPanel.opened) return;
     if (!(params.swipeCloseOpposite || params.swipeOnlyClose)) {

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

@@ -347,7 +347,7 @@ class Picker extends Framework7Class {
     }
 
     // Extra focus
-    if (!inline && $inputEl.length && app.theme === 'md') {
+    if (!inline && $inputEl && $inputEl.length && app.theme === 'md') {
       $inputEl.trigger('focus');
     }
 

packages/core/components/popover/popover.d.ts

@@ -89,11 +89,11 @@ export namespace Popover {
       /** destroy Popover instance */
       destroy(el : HTMLElement | CSSSelector | Popover) : void
       /** get Popover instance by HTML element */
-      get(el : HTMLElement | CSSSelector) : Popover
+      get(el? : HTMLElement | CSSSelector) : Popover
       /** open Popover */
-      open(el : HTMLElement | CSSSelector, targetEl?: HTMLElement | CSSSelector, animate?: boolean) : Popover
+      open(el? : HTMLElement | CSSSelector, targetEl?: HTMLElement | CSSSelector, animate?: boolean) : Popover
       /** closes Popover */
-      close(el : HTMLElement | CSSSelector, animate?: boolean) : Popover
+      close(el? : HTMLElement | CSSSelector, animate?: boolean) : Popover
     }
   }
   interface AppParams {

packages/core/components/popup/popup.d.ts

@@ -48,9 +48,9 @@ export namespace Popup {
     opened : boolean
 
     /** Open popup. */
-    open(animate: boolean) : Popup
+    open(animate?: boolean) : Popup
     /** Close popup. */
-    close(animate: boolean) : Popup
+    close(animate?: boolean) : Popup
     /** Destroy popup */
     destroy() : void
   }
@@ -72,11 +72,11 @@ export namespace Popup {
       /** destroy Popup instance */
       destroy(el : HTMLElement | CSSSelector | Popup) : void
       /** get Popup instance by HTML element */
-      get(el : HTMLElement | CSSSelector) : Popup
+      get(el? : HTMLElement | CSSSelector) : Popup
       /** open Popup */
-      open(el : HTMLElement | CSSSelector, animate?: boolean) : Popup
+      open(el? : HTMLElement | CSSSelector, animate?: boolean) : Popup
       /** closes Popup */
-      close(el : HTMLElement | CSSSelector, animate?: boolean) : Popup
+      close(el? : HTMLElement | CSSSelector, animate?: boolean) : Popup
     }
   }
   interface AppParams {

packages/core/components/preloader/preloader.less

@@ -10,14 +10,15 @@
   visibility: visible;
   opacity: 0;
   background: none;
+  z-index: 14000;
 }
 .preloader-modal {
   position: absolute;
   left: 50%;
   top: 50%;
   padding: 8px;
   background: rgba(0,0,0,0.8);
-  z-index: 13500;
+  z-index: 14500;
   transform: translateX(-50%) translateY(-50%);
   .preloader {
     display: block !important;

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

@@ -273,19 +273,22 @@ class Range extends Framework7Class {
       range.calcSize();
       range.layout();
     }
+    let parentModals;
+    let parentPanel;
+    let parentPage;
     range.attachEvents = function attachEvents() {
       const passive = Support.passiveListener ? { passive: true } : false;
       range.$el.on(app.touchEvents.start, handleTouchStart, passive);
       app.on('touchmove', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
       app.on('tabShow', handleResize);
       app.on('resize', handleResize);
-      range.$el
-        .parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast')
-        .on('modal:open', handleResize);
-      range.$el
-        .parents('.panel')
-        .on('panel:open', handleResize);
+      parentModals = range.$el.parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast');
+      parentModals.on('modal:open', handleResize);
+      parentPanel = range.$el.parents('.panel');
+      parentPanel.on('panel:open', handleResize);
+      parentPage = range.$el.parents('.page').eq(0);
+      parentPage.on('page:reinit', handleResize);
     };
     range.detachEvents = function detachEvents() {
       const passive = Support.passiveListener ? { passive: true } : false;
@@ -294,12 +297,18 @@ class Range extends Framework7Class {
       app.off('touchend:passive', handleTouchEnd);
       app.off('tabShow', handleResize);
       app.off('resize', handleResize);
-      range.$el
-        .parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast')
-        .off('modal:open', handleResize);
-      range.$el
-        .parents('.panel')
-        .off('panel:open', handleResize);
+      if (parentModals) {
+        parentModals.off('modal:open', handleResize);
+      }
+      if (parentPanel) {
+        parentPanel.off('panel:open', handleResize);
+      }
+      if (parentPage) {
+        parentPage.off('page:reinit', handleResize);
+      }
+      parentModals = null;
+      parentPanel = null;
+      parentPage = null;
     };
 
     // Install Modules

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

@@ -54,9 +54,8 @@ class Searchbar extends FrameworkClass {
     } else {
       $navbarEl = $el.parents('.navbar-inner');
       if ($navbarEl.length > 0) {
-        if ($navbarEl[0].f7Page) {
-          $pageEl = $navbarEl[0].f7Page.$el;
-        } else {
+        $pageEl = $(app.navbar.getPageByEl($navbarEl[0]));
+        if (!$pageEl.length) {
           const $currentPageEl = $el.parents('.view').find('.page-current');
           if ($currentPageEl[0] && $currentPageEl[0].f7Page && $currentPageEl[0].f7Page.navbarEl === $navbarEl[0]) {
             $pageEl = $currentPageEl;

packages/core/components/sheet/sheet.d.ts

@@ -52,9 +52,9 @@ export namespace Sheet {
     opened : boolean
 
     /** Open sheet. */
-    open(animate: boolean) : Sheet
+    open(animate?: boolean) : Sheet
     /** Close sheet. */
-    close(animate: boolean) : Sheet
+    close(animate?: boolean) : Sheet
     /** Destroy sheet */
     destroy() : void
   }
@@ -76,11 +76,11 @@ export namespace Sheet {
       /** destroy Sheet Modal instance */
       destroy(el : HTMLElement | CSSSelector | Sheet) : void
       /** get Sheet Modal instance by HTML element */
-      get(el : HTMLElement | CSSSelector) : Sheet
+      get(el? : HTMLElement | CSSSelector) : Sheet
       /** open Sheet Modal */
-      open(el : HTMLElement | CSSSelector, animate?: boolean) : Sheet
+      open(el? : HTMLElement | CSSSelector, animate?: boolean) : Sheet
       /** closes Sheet Modal */
-      close(el : HTMLElement | CSSSelector, animate?: boolean) : Sheet
+      close(el? : HTMLElement | CSSSelector, animate?: boolean) : Sheet
     }
   }
   interface AppParams {

packages/core/components/sortable/sortable.js

@@ -152,11 +152,21 @@ const Sortable = {
          && $sortableContainer.hasClass('virtual-list')
       ) {
         indexFrom = $sortingEl[0].f7VirtualListIndex;
-        indexTo = $insertBeforeEl ? $insertBeforeEl[0].f7VirtualListIndex : $insertAfterEl[0].f7VirtualListIndex;
+        if (typeof indexFrom === 'undefined') indexFrom = $sortingEl.attr('data-virtual-list-index');
+        if ($insertBeforeEl) {
+          indexTo = $insertBeforeEl[0].f7VirtualListIndex;
+          if (typeof indexTo === 'undefined') indexTo = $insertBeforeEl.attr('data-virtual-list-index');
+        } else {
+          indexTo = $insertAfterEl[0].f7VirtualListIndex;
+          if (typeof indexTo === 'undefined') indexTo = $insertAfterEl.attr('data-virtual-list-index');
+        }
+        if (indexTo !== null) indexTo = parseInt(indexTo, 10);
+        else indexTo = undefined;
+
         const virtualList = $sortableContainer[0].f7VirtualList;
         if (virtualList) virtualList.moveItem(indexFrom, indexTo);
       }
-      if (typeof indexTo !== 'undefined' && indexTo !== indexFrom) {
+      if (typeof indexTo !== 'undefined' && !Number.isNaN(indexTo) && indexTo !== indexFrom) {
         $sortingEl.trigger('sortable:sort', { from: indexFrom, to: indexTo });
         app.emit('sortableSort', $sortingEl[0], { from: indexFrom, to: indexTo });
       }