3.4.2 release

Author: nolimits4web

CHANGELOG.md

@@ -2,6 +2,29 @@
 
 # Change Log
 
+# [v3.4.2](https://github.com/framework7io/framework7/compare/v3.4.0...v3.4.2) - October 12, 2018
+  * Core
+    * Device
+      * Added correct detection for `webView` prop when app installed to home screen
+    * Accordion
+      * Fixes issue when `accordionOpened` event fired without passing opened element as argument
+    * Request
+      * If `contentType: 'application/json'` and `processData: false` it will automatically send POST data as JSON
+    * Picker
+      * Fixed issue when double click outside of opened Picker could cause router navigating to previous page
+    * Pull To Refresh
+      * Now it will ignore PTR when scrolling in page's nested container
+    * Panel
+      * Now it respects `swipeThreshold` parameter when `swipeNoFollow` is enabled
+    * Searchbar
+      * New `searchGroup` parameter to handle custom item groups to hide on search
+      * New `searchGroupTitle` parameter to handle custom item groups titles to hide on search
+  * Phenome (React / Vue)
+    * Input - better handling of `with-value` and `focused` states when used in list item
+    * Searchbar - new `searchGroup` and `searchGroupTitle` props
+    * Page - improved router-related page classes handling that could cause issue with navigation
+  * Minor fixes
+
 # [v3.4.0](https://github.com/framework7io/framework7/compare/v3.3.2...v3.4.0) - September 28, 2018
   * Core
     * Lazy modules support 🎉
@@ -26,7 +49,6 @@
     * Lots of TypeScript definitions fixes and tweaks
   * Minor fixes
 
-
 # [v3.3.2](https://github.com/framework7io/framework7/compare/v3.3.1...v3.3.2) - September 20, 2018
   * Core
     * Support for new iPhone XR / XS / XS Max

packages/core/components/accordion/accordion.js

@@ -34,10 +34,9 @@ const Accordion = {
         $contentEl.css('height', 'auto');
         Utils.nextFrame(() => {
           $contentEl.transition('');
+          $el.trigger('accordion:opened');
+          app.emit('accordionOpened', $el[0]);
         });
-        $contentEl.transition('');
-        $el.trigger('accordion:opened');
-        app.emit('accordionOpened', $el[0]);
       } else {
         $contentEl.css('height', '');
         $el.trigger('accordion:closed');
@@ -65,9 +64,9 @@ const Accordion = {
         $contentEl.css('height', 'auto');
         Utils.nextFrame(() => {
           $contentEl.transition('');
+          $el.trigger('accordion:opened');
+          app.emit('accordionOpened', $el[0]);
         });
-        $el.trigger('accordion:opened');
-        app.emit('accordionOpened', $el[0]);
       } else {
         $contentEl.css('height', '');
         $el.trigger('accordion:closed');

packages/core/components/app/app-class.d.ts

@@ -64,7 +64,7 @@ export interface Framework7Params {
   initOnDeviceReady? : boolean
   /** Object with events handlers.. (default {}) */
   on?: {
-    [event in keyof Framework7Events] : Framework7Events[event]
+    [event in keyof Framework7Events]? : Framework7Events[event]
   }
 
 }
@@ -144,9 +144,9 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   /** Initialize app. In case you disabled auto initialization with init: false parameter */
   init() : void
   /** Load module */
-  loadModule(module: string | Function | Framework7Plugin) : Promise
+  loadModule(module: string | Function | Framework7Plugin) : Promise<any>
   /** Load modules */
-  loadModules(modules: any[]) : Promise
+  loadModules(modules: any[]) : Promise<any>
 }
 
 declare class Framework7 implements Framework7 {

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

@@ -473,7 +473,7 @@ class Autocomplete extends Framework7Class {
       // Dropwdown placeholder
       itemHtml = `
         <li class="autocomplete-dropdown-placeholder">
-          <div class="item-content">
+          <label class="item-content">
             <div class="item-inner">
               <div class="item-title">${item.text}</div>
             </div>

packages/core/components/input/input.js

@@ -106,7 +106,12 @@ const Input = {
     $inputEl.removeClass('input-focused');
   },
   checkEmptyState(inputEl) {
-    const $inputEl = $(inputEl);
+    let $inputEl = $(inputEl);
+    if (!$inputEl.is('input, select, textarea')) {
+      $inputEl = $inputEl.find('input, select, textarea').eq(0);
+    }
+    if (!$inputEl.length) return;
+
     const value = $inputEl.val();
     const $itemInputEl = $inputEl.parents('.item-input');
     const $inputWrapEl = $inputEl.parents('.input');
@@ -216,7 +221,7 @@ const Input = {
       const previousValue = $inputEl.val();
       $inputEl
         .val('')
-        .trigger('change input')
+        .trigger('input change')
         .focus()
         .trigger('input:clear', previousValue);
     }

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

@@ -127,20 +127,40 @@ function swipePanel(panel) {
       }
     }
 
+    let threshold = panel.opened ? 0 : -params.swipeThreshold;
+    if (side === 'right') threshold = -threshold;
+
     if (params.swipeNoFollow) {
+      const touchesDiffNoFollow = (pageX - touchesStart.x);
       const timeDiff = (new Date()).getTime() - touchStartTime;
-      if (timeDiff < 300) {
-        if (direction === 'to-left') {
-          if (side === 'right') app.panel.open(side);
-          if (side === 'left' && $el.hasClass('panel-active')) app.panel.close();
-        }
-        if (direction === 'to-right') {
-          if (side === 'left') app.panel.open(side);
-          if (side === 'right' && $el.hasClass('panel-active')) app.panel.close();
+      let needToSwitch;
+      if (!panel.opened && (
+        (side === 'left' && touchesDiffNoFollow > -threshold)
+        || (side === 'right' && -touchesDiffNoFollow > threshold)
+      )) {
+        needToSwitch = true;
+      }
+      if (panel.opened && (
+        (side === 'left' && touchesDiffNoFollow < 0)
+        || (side === 'right' && touchesDiffNoFollow > 0)
+      )) {
+        needToSwitch = true;
+      }
+
+      if (needToSwitch) {
+        if (timeDiff < 300) {
+          if (direction === 'to-left') {
+            if (side === 'right') app.panel.open(side);
+            if (side === 'left' && $el.hasClass('panel-active')) app.panel.close();
+          }
+          if (direction === 'to-right') {
+            if (side === 'left') app.panel.open(side);
+            if (side === 'right' && $el.hasClass('panel-active')) app.panel.close();
+          }
         }
+        isTouched = false;
+        isMoved = false;
       }
-      isTouched = false;
-      isMoved = false;
       return;
     }
 
@@ -158,8 +178,6 @@ function swipePanel(panel) {
     isMoved = true;
 
     e.preventDefault();
-    let threshold = panel.opened ? 0 : -params.swipeThreshold;
-    if (side === 'right') threshold = -threshold;
 
     touchesDiff = (pageX - touchesStart.x) + threshold;
 

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

@@ -54,7 +54,7 @@ class Picker extends Framework7Class {
     function onHtmlClick(e) {
       const $targetEl = $(e.target);
       if (picker.isPopover()) return;
-      if (!picker.opened) return;
+      if (!picker.opened || picker.closing) return;
       if ($targetEl.closest('[class*="backdrop"]').length) return;
       if ($inputEl && $inputEl.length > 0) {
         if ($targetEl[0] !== $inputEl[0] && $targetEl.closest('.sheet-modal').length === 0) {
@@ -318,6 +318,8 @@ class Picker extends Framework7Class {
     const picker = this;
     const { initialized, $el, app, $inputEl, inline, value, params } = picker;
     picker.opened = true;
+    picker.closing = false;
+    picker.opening = true;
 
     // Init main events
     picker.attachResizeEvent();
@@ -363,6 +365,7 @@ class Picker extends Framework7Class {
 
   onOpened() {
     const picker = this;
+    picker.opening = false;
 
     if (picker.$el) {
       picker.$el.trigger('picker:opened', picker);
@@ -376,6 +379,8 @@ class Picker extends Framework7Class {
   onClose() {
     const picker = this;
     const app = picker.app;
+    picker.opening = false;
+    picker.closing = true;
 
     // Detach events
     picker.detachResizeEvent();
@@ -399,6 +404,7 @@ class Picker extends Framework7Class {
   onClosed() {
     const picker = this;
     picker.opened = false;
+    picker.closing = false;
 
     if (!picker.inline) {
       Utils.nextTick(() => {

packages/core/components/pull-to-refresh/pull-to-refresh-class.js

@@ -128,7 +128,19 @@ class PullToRefresh extends Framework7Class {
 
       if (!isMoved) {
         $el.removeClass('ptr-transitioning');
-        if (scrollTop > $el[0].offsetHeight) {
+        let targetIsEl;
+        let targetIsScrollable;
+        $(e.target).parents().each((index, targetEl) => {
+          if (targetEl === el) {
+            targetIsEl = true;
+          }
+          if (targetIsEl) return;
+          if (targetEl.scrollHeight > targetEl.offsetHeight) {
+            targetIsScrollable = true;
+          }
+        });
+
+        if (targetIsScrollable || scrollTop > $el[0].offsetHeight) {
           isTouched = false;
           return;
         }

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

@@ -18,6 +18,8 @@ class Searchbar extends FrameworkClass {
       searchContainer: undefined, // container to search, HTMLElement or CSS selector
       searchItem: 'li', // single item selector, CSS selector
       searchIn: undefined, // where to search in item, CSS selector
+      searchGroup: '.list-group',
+      searchGroupTitle: '.item-divider, .list-group-title',
       ignore: '.searchbar-ignore',
       foundEl: '.searchbar-found',
       notFoundEl: '.searchbar-not-found',
@@ -477,13 +479,13 @@ class Searchbar extends FrameworkClass {
       });
 
       if (sb.params.hideDividers) {
-        $searchContainer.find('.item-divider, .list-group-title').each((titleIndex, titleEl) => {
+        $searchContainer.find(sb.params.searchGroupTitle).each((titleIndex, titleEl) => {
           const $titleEl = $(titleEl);
-          const $nextElements = $titleEl.nextAll('li');
+          const $nextElements = $titleEl.nextAll(sb.params.searchItem);
           let hide = true;
           for (let i = 0; i < $nextElements.length; i += 1) {
             const $nextEl = $nextElements.eq(i);
-            if ($nextEl.hasClass('list-group-title') || $nextEl.hasClass('item-divider')) break;
+            if ($nextEl.is(sb.params.searchGroupTitle)) break;
             if (!$nextEl.hasClass('hidden-by-searchbar')) {
               hide = false;
             }
@@ -494,10 +496,13 @@ class Searchbar extends FrameworkClass {
         });
       }
       if (sb.params.hideGroups) {
-        $searchContainer.find('.list-group').each((groupIndex, groupEl) => {
+        $searchContainer.find(sb.params.searchGroup).each((groupIndex, groupEl) => {
           const $groupEl = $(groupEl);
           const ignore = sb.params.ignore && $groupEl.is(sb.params.ignore);
-          const notHidden = $groupEl.find('li:not(.hidden-by-searchbar)');
+          // eslint-disable-next-line
+          const notHidden = $groupEl.find(sb.params.searchItem).filter((index, el) => {
+            return !$(el).hasClass('hidden-by-searchbar');
+          });
           if (notHidden.length === 0 && !ignore) {
             $groupEl.addClass('hidden-by-searchbar');
           } else {

packages/core/components/searchbar/searchbar.d.ts

@@ -17,6 +17,10 @@ export namespace Searchbar {
     searchIn?: CSSSelector
     /** CSS selector of single search item. If we do a search in List View, then it must be a single list element li (default "li") */
     searchItem?: CSSSelector
+    /** CSS selector of group element. Used when hideGroups enabled to hide groups. If we do a search in List View, then it usually a list group (default "list-group") */
+    searchGroup?: CSSSelector
+    /** CSS selector of group titles and dividers. Used when hideDividers enabled to hide group titles and dividers. If we do a search in List View, then it usually a list group title or list item divider (default ".item-divider, .list-group-title") */
+    searchGroupTitle?: CSSSelector
     /** CSS selector or HTMLElement of searchbar "found" element to make it hidden when there is no search results (default ".searchbar-found") */
     foundEl?: HTMLElement | CSSSelector
     /** CSS selector or HTMLElement of searchbar "not-found" element to make it visible when there is no search results (default ".searchbar-not-found") */