@xenknight/framework7 0.0.8 → 0.0.9

package/components/searchbar-new/searchbar-new-class.js

@@ -103,8 +103,18 @@ class SearchbarNew extends FrameworkClass {
         $backdropEl = $('<div class="searchbar-new-backdrop"></div>');
         if ($pageEl && $pageEl.length) {
           if ($el.parents($pageEl).length > 0 && $navbarEl && $el.parents($navbarEl).length === 0) {
+            // Searchbar is in page but not in navbar - insert before searchbar
             $backdropEl.insertBefore($el);
+          } else if ($navbarEl && $navbarEl.length > 0) {
+            // Searchbar is in navbar - insert after navbar, before page-content
+            const $pageContent = $pageEl.find('.page-content').eq(0);
+            if ($pageContent.length) {
+              $backdropEl.insertBefore($pageContent);
+            } else {
+              $navbarEl.after($backdropEl);
+            }
           } else {
+            // Default: insert before page-content
             $backdropEl.insertBefore($pageEl.find('.page-content').eq(0));
           }
         } else {
@@ -183,8 +193,8 @@ class SearchbarNew extends FrameworkClass {
       }
     }
     function onInputClear(e, previousValue) {
-      sb.$el.trigger('searchbar-new:clear', previousValue);
-      sb.emit('local::clear searchbarNewClear', sb, previousValue);
+      sb.$el.trigger('searchbar:clear', previousValue);
+      sb.emit('local::clear searchbarClear', sb, previousValue);
     }
     function disableOnClick(e) {
       sb.disable(e);
@@ -257,15 +267,16 @@ class SearchbarNew extends FrameworkClass {
     }
     const previousQuery = sb.value;
     sb.$inputEl.val('').trigger('change').focus();
-    sb.$el.trigger('searchbar-new:clear', previousQuery);
-    sb.emit('local::clear searchbarNewClear', sb, previousQuery);
+    sb.$el.trigger('searchbar:clear', previousQuery);
+    sb.emit('local::clear searchbarClear', sb, previousQuery);
     return sb;
   }
   setDisableButtonMargin() {
     const sb = this;
     if (sb.expandable) return;
     const app = sb.app;
-    sb.$disableButtonEl.transition(0).show();
+    sb.$disableButtonEl.transition(0);
+    sb.$disableButtonEl.css('display', 'flex');
     sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, `${-sb.disableButtonEl.offsetWidth}px`);
     /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
     sb._clientLeft = sb.$disableButtonEl[0].clientLeft;
@@ -317,8 +328,8 @@ class SearchbarNew extends FrameworkClass {
         }
       }
       if (sb.$hideOnEnableEl) sb.$hideOnEnableEl.addClass('hidden-by-searchbar-new');
-      sb.$el.trigger('searchbar-new:enable');
-      sb.emit('local::enable searchbarNewEnable', sb);
+      sb.$el.trigger('searchbar:enable');
+      sb.emit('local::enable searchbarEnable', sb);
     }
     let needsFocus = false;
     if (setFocus === true) {
@@ -359,9 +370,10 @@ class SearchbarNew extends FrameworkClass {
     if (sb.expandable) {
       const $navbarEl = sb.$el.parents('.navbar-new');
       const $pageContentEl = sb.$pageEl && sb.$pageEl.find('.page-content');
+      const $transitionTargetEl = app.theme === 'md' ? sb.$el : sb.$el.find('.searchbar-new-input-wrap');
       if ($navbarEl.hasClass('navbar-new-large') && $pageContentEl.length) {
         const $titleLargeEl = $navbarEl.find('.title-large');
-        sb.$el.transitionEnd(() => {
+        $transitionTargetEl.transitionEnd(() => {
           $pageContentEl.removeClass('with-searchbar-new-expandable-closing');
         });
         if ($navbarEl.hasClass('navbar-new-large') && $navbarEl.hasClass('navbar-new-large-collapsed') && $titleLargeEl.length) {
@@ -379,12 +391,12 @@ class SearchbarNew extends FrameworkClass {
       }
       if (app.theme === 'md' && $navbarEl.length) {
         $navbarEl.removeClass('with-searchbar-new-expandable-enabled with-searchbar-new-expandable-enabled-no-transition').addClass('with-searchbar-new-expandable-closing');
-        sb.$el.transitionEnd(() => {
+        $transitionTargetEl.transitionEnd(() => {
           $navbarEl.removeClass('with-searchbar-new-expandable-closing');
         });
       } else {
         $navbarEl.removeClass('with-searchbar-new-expandable-enabled with-searchbar-new-expandable-enabled-no-transition').addClass('with-searchbar-new-expandable-closing');
-        sb.$el.transitionEnd(() => {
+        $transitionTargetEl.transitionEnd(() => {
           $navbarEl.removeClass('with-searchbar-new-expandable-closing');
         });
         if (sb.$pageEl) {
@@ -401,8 +413,8 @@ class SearchbarNew extends FrameworkClass {
     sb.enabled = false;
     sb.$inputEl.blur();
     if (sb.$hideOnEnableEl) sb.$hideOnEnableEl.removeClass('hidden-by-searchbar-new');
-    sb.$el.trigger('searchbar-new:disable');
-    sb.emit('local::disable searchbarNewDisable', sb);
+    sb.$el.trigger('searchbar:disable');
+    sb.emit('local::disable searchbarDisable', sb);
     return sb;
   }
   toggle() {
@@ -461,11 +473,11 @@ class SearchbarNew extends FrameworkClass {
       }
     }
     if (sb.params.customSearch) {
-      $el.trigger('searchbar-new:search', {
+      $el.trigger('searchbar:search', {
         query,
         previousQuery: sb.previousQuery
       });
-      sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery);
+      sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery);
       return sb;
     }
     let foundItems = [];
@@ -476,11 +488,11 @@ class SearchbarNew extends FrameworkClass {
         sb.virtualList.resetFilter();
         if ($notFoundEl) $notFoundEl.hide();
         if ($foundEl) $foundEl.show();
-        $el.trigger('searchbar-new:search', {
+        $el.trigger('searchbar:search', {
           query,
           previousQuery: sb.previousQuery
         });
-        sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery);
+        sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery);
         return sb;
       }
       vlQuery = sb.params.removeDiacritics ? removeDiacritics(query) : query;
@@ -563,12 +575,12 @@ class SearchbarNew extends FrameworkClass {
     if (isVirtualList && sb.virtualList) {
       sb.virtualList.filterItems(foundItems);
     }
-    $el.trigger('searchbar-new:search', {
+    $el.trigger('searchbar:search', {
       query,
       previousQuery: sb.previousQuery,
       foundItems
     });
-    sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery, foundItems);
+    sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery, foundItems);
     return sb;
   }
   init() {
@@ -579,8 +591,8 @@ class SearchbarNew extends FrameworkClass {
   }
   destroy() {
     const sb = this;
-    sb.emit('local::beforeDestroy searchbarNewBeforeDestroy', sb);
-    sb.$el.trigger('searchbar-new:beforedestroy');
+    sb.emit('local::beforeDestroy searchbarBeforeDestroy', sb);
+    sb.$el.trigger('searchbar:beforedestroy');
     sb.detachEvents();
     if (sb.$el[0]) {
       sb.$el[0].f7SearchbarNew = null;

package/components/searchbar-new/searchbar-vars.less

@@ -1,75 +1,75 @@
-:root {
-  /*
-  --f7-searchbar-new-link-color: var(--f7-bars-link-color);
-  --f7-searchbar-new-inline-input-font-size: var(--f7-searchbar-new-input-font-size);
-  */
-  --f7-searchbar-new-input-border-width: 0px;
-  --f7-searchbar-new-input-border-color: transparent;
-}
-.ios-vars({
-  /*
-  --f7-searchbar-new-border-color: var(--f7-bars-border-color);
-  */
-  --f7-searchbar-new-bg-color: transparent;
-  --f7-searchbar-new-height: 44px;
-  --f7-searchbar-new-inner-padding-left: 0px;
-  --f7-searchbar-new-inner-padding-right: 0px;
-  --f7-searchbar-new-link-color: var(--f7-bars-text-color);
-  --f7-searchbar-new-input-font-size: 17px;
-  --f7-searchbar-new-input-border-radius: 44px;
-  --f7-searchbar-new-input-height: 44px;
-  --f7-searchbar-new-inline-input-height: 44px;
-  /*
-  --f7-searchbar-new-inline-input-border-radius: var(--f7-searchbar-new-input-border-radius);
-  */
-  --f7-searchbar-new-input-padding-horizontal: 44px;
-  /*
-  --f7-searchbar-new-inline-input-padding-horizontal: var(--f7-searchbar-new-input-padding-horizontal);
-  --f7-searchbar-new-input-clear-button-color: var(--f7-input-clear-button-color);
-  */
-  --f7-searchbar-new-backdrop-bg-color: rgba(0,0,0,0.4);
-  --f7-searchbar-new-in-page-content-margin: 16px;
-  --f7-searchbar-new-in-page-content-box-shadow: none;
-  --f7-searchbar-new-in-page-content-border-radius: 44px;
-  --f7-searchbar-new-in-page-content-input-border-radius: 44px;
-  --f7-searchbar-new-input-bg-color: var(--f7-glass-bg-color);
-  .light-vars({
-    --f7-searchbar-new-placeholder-color: rgba(0, 0, 0, 0.4);
-    --f7-searchbar-new-input-text-color: #000;
-    --f7-searchbar-new-search-icon-color: rgba(0, 0, 0, 0.4);
-    --f7-searchbar-new-bars-bg-color: #efeff4;
-  });
-  .dark-vars({
-    --f7-searchbar-new-placeholder-color: rgba(255, 255, 255, 0.4);
-    --f7-searchbar-new-input-text-color: #fff;
-    --f7-searchbar-new-search-icon-color: rgba(255, 255, 255, 0.4);
-    --f7-searchbar-new-bars-bg-color: rgba(0, 0, 0, 0.5);
-  });
-});
-.md-vars({
-  --f7-searchbar-new-border-color: transparent;
-  --f7-searchbar-new-height: 48px;
-  --f7-searchbar-new-inner-padding-left: 8px;
-  --f7-searchbar-new-inner-padding-right: 8px;
-  --f7-searchbar-new-input-font-size: 16px;
-  --f7-searchbar-new-input-border-radius: 24px;
-  --f7-searchbar-new-input-height: 48px;
-  --f7-searchbar-new-inline-input-height: 48px;
-  --f7-searchbar-new-inline-input-border-radius: 24px;
-  --f7-searchbar-new-input-padding-horizontal: 16px;
-  --f7-searchbar-new-inline-input-padding-horizontal: 16px;
-  --f7-searchbar-new-backdrop-bg-color: rgba(0,0,0,0.25);
-  --f7-searchbar-new-in-page-content-margin: 16px 0;
-  --f7-searchbar-new-in-page-content-box-shadow: none;
-  --f7-searchbar-new-in-page-content-border-radius: 24px;
-  --f7-searchbar-new-in-page-content-input-border-radius: 24px;
-  --f7-searchbar-new-bg-color: transparent;
-});
-.md-color-vars({
-  --f7-searchbar-new-link-color: var(--f7-md-on-surface);
-  --f7-searchbar-new-search-icon-color: var(--f7-md-on-surface);
-  --f7-searchbar-new-input-clear-button-color: var(--f7-md-on-surface);
-  --f7-searchbar-new-placeholder-color: var(--f7-md-on-surface-variant);
-  --f7-searchbar-new-input-bg-color: var(--f7-md-secondary-container);
-  --f7-searchbar-new-input-text-color: var(--f7-md-on-surface);
-});
+:root {
+  /*
+  --f7-searchbar-new-link-color: var(--f7-bars-link-color);
+  --f7-searchbar-new-inline-input-font-size: var(--f7-searchbar-new-input-font-size);
+  */
+  --f7-searchbar-new-input-border-width: 0px;
+  --f7-searchbar-new-input-border-color: transparent;
+}
+.ios-vars({
+  /*
+  --f7-searchbar-new-border-color: var(--f7-bars-border-color);
+  */
+  --f7-searchbar-new-bg-color: transparent;
+  --f7-searchbar-new-height: 44px;
+  --f7-searchbar-new-inner-padding-left: 0px;
+  --f7-searchbar-new-inner-padding-right: 0px;
+  --f7-searchbar-new-link-color: var(--f7-bars-text-color);
+  --f7-searchbar-new-input-font-size: 17px;
+  --f7-searchbar-new-input-border-radius: 44px;
+  --f7-searchbar-new-input-height: 44px;
+  --f7-searchbar-new-inline-input-height: 44px;
+  /*
+  --f7-searchbar-new-inline-input-border-radius: var(--f7-searchbar-new-input-border-radius);
+  */
+  --f7-searchbar-new-input-padding-horizontal: 44px;
+  /*
+  --f7-searchbar-new-inline-input-padding-horizontal: var(--f7-searchbar-new-input-padding-horizontal);
+  --f7-searchbar-new-input-clear-button-color: var(--f7-input-clear-button-color);
+  */
+  --f7-searchbar-new-backdrop-bg-color: rgba(0,0,0,0.4);
+  --f7-searchbar-new-in-page-content-margin: 16px;
+  --f7-searchbar-new-in-page-content-box-shadow: none;
+  --f7-searchbar-new-in-page-content-border-radius: 44px;
+  --f7-searchbar-new-in-page-content-input-border-radius: 44px;
+  --f7-searchbar-new-input-bg-color: var(--f7-glass-bg-color);
+  .light-vars({
+    --f7-searchbar-new-placeholder-color: rgba(0, 0, 0, 0.4);
+    --f7-searchbar-new-input-text-color: #000;
+    --f7-searchbar-new-search-icon-color: rgba(0, 0, 0, 0.4);
+    --f7-searchbar-new-bars-bg-color: #efeff4;
+  });
+  .dark-vars({
+    --f7-searchbar-new-placeholder-color: rgba(255, 255, 255, 0.4);
+    --f7-searchbar-new-input-text-color: #fff;
+    --f7-searchbar-new-search-icon-color: rgba(255, 255, 255, 0.4);
+    --f7-searchbar-new-bars-bg-color: rgba(0, 0, 0, 0.5);
+  });
+});
+.md-vars({
+  --f7-searchbar-new-border-color: transparent;
+  --f7-searchbar-new-height: 48px;
+  --f7-searchbar-new-inner-padding-left: 8px;
+  --f7-searchbar-new-inner-padding-right: 8px;
+  --f7-searchbar-new-input-font-size: 16px;
+  --f7-searchbar-new-input-border-radius: 24px;
+  --f7-searchbar-new-input-height: 48px;
+  --f7-searchbar-new-inline-input-height: 48px;
+  --f7-searchbar-new-inline-input-border-radius: 24px;
+  --f7-searchbar-new-input-padding-horizontal: 16px;
+  --f7-searchbar-new-inline-input-padding-horizontal: 16px;
+  --f7-searchbar-new-backdrop-bg-color: rgba(0,0,0,0.25);
+  --f7-searchbar-new-in-page-content-margin: 16px 0;
+  --f7-searchbar-new-in-page-content-box-shadow: none;
+  --f7-searchbar-new-in-page-content-border-radius: 24px;
+  --f7-searchbar-new-in-page-content-input-border-radius: 24px;
+  --f7-searchbar-new-bg-color: transparent;
+});
+.md-color-vars({
+  --f7-searchbar-new-link-color: var(--f7-md-on-surface);
+  --f7-searchbar-new-search-icon-color: var(--f7-md-on-surface);
+  --f7-searchbar-new-input-clear-button-color: var(--f7-md-on-surface);
+  --f7-searchbar-new-placeholder-color: var(--f7-md-on-surface-variant);
+  --f7-searchbar-new-input-bg-color: var(--f7-md-secondary-container);
+  --f7-searchbar-new-input-text-color: var(--f7-md-on-surface);
+});