3.6.0 release

Author: nolimits4web

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

package-lock.json

@@ -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.d.ts

@@ -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/accordion/accordion.js

@@ -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/actions/actions.d.ts

@@ -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/calendar/calendar-class.js

@@ -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/dialog/dialog.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/login-screen/login-screen.d.ts

@@ -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/navbar/navbar.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)) {