@xenknight/framework7 0.0.6 → 0.0.7

package/components/searchbar-new/searchbar.js

@@ -0,0 +1,122 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import SearchbarNew from './searchbar-new-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'searchbar-new',
+  static: {
+    SearchbarNew
+  },
+  create() {
+    const app = this;
+    app.searchbarNew = ConstructorMethods({
+      defaultSelector: '.searchbar-new',
+      constructor: SearchbarNew,
+      app,
+      domProp: 'f7SearchbarNew',
+      addMethods: 'clear enable disable toggle search'.split(' ')
+    });
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.searchbar-new-init').each(searchbarEl => {
+        const $searchbarEl = $(searchbarEl);
+        app.searchbarNew.create(extend($searchbarEl.dataset(), {
+          el: searchbarEl
+        }));
+      });
+    },
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.searchbar-new-init').each(searchbarEl => {
+        if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+          searchbarEl.f7SearchbarNew.destroy();
+        }
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.searchbar-new-init').each(searchbarEl => {
+        const $searchbarEl = $(searchbarEl);
+        app.searchbarNew.create(extend($searchbarEl.dataset(), {
+          el: searchbarEl
+        }));
+      });
+      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarNewEl && page.$navbarNewEl.length > 0) {
+        page.$navbarNewEl.find('.searchbar-new-init').each(searchbarEl => {
+          const $searchbarEl = $(searchbarEl);
+          app.searchbarNew.create(extend($searchbarEl.dataset(), {
+            el: searchbarEl
+          }));
+        });
+      }
+    },
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.searchbar-new-init').each(searchbarEl => {
+        if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+          searchbarEl.f7SearchbarNew.destroy();
+        }
+      });
+      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarNewEl && page.$navbarNewEl.length > 0) {
+        page.$navbarNewEl.find('.searchbar-new-init').each(searchbarEl => {
+          if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+            searchbarEl.f7SearchbarNew.destroy();
+          }
+        });
+      }
+    }
+  },
+  clicks: {
+    '.searchbar-new-clear': function clear($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbarNew.get(data.searchbar);
+      if (sb) sb.clear();
+    },
+    '.searchbar-new-enable': function enable($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbarNew.get(data.searchbar);
+      if (sb) sb.enable(true);
+    },
+    '.searchbar-new-disable': function disable($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbarNew.get(data.searchbar);
+      if (sb) sb.disable();
+    },
+    '.searchbar-new-toggle': function toggle($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbarNew.get(data.searchbar);
+      if (sb) sb.toggle();
+    }
+  },
+  vnode: {
+    'searchbar-new-init': {
+      insert(vnode) {
+        const app = this;
+        const searchbarEl = vnode.elm;
+        const $searchbarEl = $(searchbarEl);
+        app.searchbarNew.create(extend($searchbarEl.dataset(), {
+          el: searchbarEl
+        }));
+      },
+      destroy(vnode) {
+        const searchbarEl = vnode.elm;
+        if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+          searchbarEl.f7SearchbarNew.destroy();
+        }
+      }
+    }
+  }
+};

package/components/searchbar-new/searchbar.less

@@ -0,0 +1,331 @@
+/* === Searchbar New === */
+@import './searchbar-vars.less';
+
+.searchbar-new {
+  --f7-link-highlight-color: var(--f7-link-highlight-black);
+  .dark & {
+    --f7-link-highlight-color: var(--f7-link-highlight-white);
+  }
+  width: 100%;
+  position: relative;
+  z-index: 200;
+  height: var(--f7-searchbar-new-height);
+  background-color: var(--f7-searchbar-new-bars-bg-color);
+  input[type='search']::-webkit-search-decoration {
+    display: none;
+  }
+  .ios .subnavbar & {
+    background-color: transparent;
+    backdrop-filter: none;
+    .hairline-remove(bottom);
+  }
+  &.no-outline {
+    &:after {
+      display: none !important;
+    }
+  }
+
+  .hairline(bottom, var(--f7-searchbar-new-border-color, var(--f7-bars-border-color)));
+
+  .page > &:not(.searchbar-new-inline) {
+    z-index: 600;
+  }
+  input[type='text'],
+  input[type='search'] {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    display: block;
+    border: var(--f7-searchbar-new-input-border-width) solid
+      var(--f7-searchbar-new-input-border-color);
+    appearance: none;
+    font-family: inherit;
+    font-weight: normal;
+    color: var(--f7-searchbar-new-input-text-color);
+    font-size: var(--f7-searchbar-new-input-font-size);
+    background-color: var(--f7-searchbar-new-input-bg-color);
+    border-radius: var(--f7-searchbar-new-input-border-radius);
+    position: relative;
+    padding: 0;
+    .ltr({
+      padding-left: calc(var(--f7-searchbar-new-input-padding-horizontal) + var(--f7-searchbar-new-input-extra-padding-left, 0px));
+      padding-right: calc(var(--f7-searchbar-new-input-padding-horizontal) + var(--f7-searchbar-new-input-extra-padding-right, 0px));;
+    });
+    .rtl({
+      padding-left: calc(var(--f7-searchbar-new-input-padding-horizontal) + var(--f7-searchbar-new-input-extra-padding-right, 0px));;
+      padding-right: calc(var(--f7-searchbar-new-input-padding-horizontal) + var(--f7-searchbar-new-input-extra-padding-left, 0px));
+    });
+    &::placeholder {
+      color: var(--f7-searchbar-new-placeholder-color);
+      opacity: 1;
+    }
+  }
+  input::-webkit-search-cancel-button {
+    appearance: none;
+  }
+  .searchbar-new-input-wrap {
+    flex-shrink: 1;
+    width: 100%;
+    height: var(--f7-searchbar-new-input-height);
+    position: relative;
+  }
+  a {
+    color: var(--f7-searchbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+  }
+  .page > &:not(.searchbar-new-inline) {
+    position: absolute;
+    left: 16px;
+    right: 16px;
+    width: auto;
+    top: 0;
+  }
+  .page-content &:not(.searchbar-new-inline) {
+    border-radius: var(--f7-searchbar-new-in-page-content-border-radius);
+    margin: var(--f7-searchbar-new-in-page-content-margin);
+    width: auto;
+    box-shadow: var(--f7-searchbar-new-in-page-content-box-shadow);
+    .searchbar-new-inner,
+    input[type='text'],
+    input[type='search'] {
+      border-radius: var(
+        --f7-searchbar-new-in-page-content-input-border-radius,
+        var(--f7-searchbar-new-input-border-radius)
+      );
+    }
+  }
+  .input-clear-button {
+    color: var(--f7-searchbar-new-input-clear-button-color, var(--f7-input-clear-button-color));
+  }
+}
+.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-searchbar-new-height);
+  position: absolute;
+  transition-duration: 300ms;
+  pointer-events: none;
+}
+.navbar-new .searchbar-new-expandable {
+  .hairline-remove(bottom);
+  background: transparent;
+}
+.navbar-new .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+  .searchbar-new-inner {
+    top: var(--f7-safe-area-top);
+    height: calc(100% - var(--f7-safe-area-top));
+  }
+}
+.toolbar .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-toolbar-height);
+}
+.subnavbar .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-subnavbar-height);
+}
+.tabbar-icons .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-tabbar-icons-height);
+}
+.searchbar-new-inner {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 calc(var(--f7-searchbar-new-inner-padding-right) + var(--f7-safe-area-right)) 0
+    calc(var(--f7-searchbar-new-inner-padding-left) + var(--f7-safe-area-left));
+}
+.searchbar-new-disable-button {
+  cursor: pointer;
+  pointer-events: none;
+  appearance: none;
+  background: none;
+  border: none;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  opacity: 0;
+}
+.searchbar-new-icon {
+  pointer-events: none;
+  background-position: center;
+  background-repeat: no-repeat;
+  &:after {
+    color: var(--f7-searchbar-new-search-icon-color);
+    .core-icons-font();
+  }
+}
+.searchbar-new-backdrop {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  opacity: 0;
+  pointer-events: none;
+  transition-duration: 300ms;
+  transform: translate3d(0, 0, 0);
+  background: var(--f7-searchbar-new-backdrop-bg-color);
+  &.searchbar-new-backdrop-in {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .page-content > & {
+    position: fixed;
+  }
+}
+.searchbar-new-found {
+  display: none;
+}
+.searchbar-new-not-found {
+  display: none;
+}
+.hidden-by-searchbar-new {
+  &,
+  .list &,
+  .list.li&,
+  .list li& {
+    display: none !important;
+  }
+}
+.navbar-new.with-searchbar-new-expandable-enabled-no-transition,
+.navbar-new.with-searchbar-new-expandable-enabled-no-transition {
+  --f7-navbar-new-large-collapse-progress: 1;
+}
+.navbar-new.with-searchbar-new-expandable-enabled,
+.navbar-new.with-searchbar-new-expandable-enabled {
+  --f7-navbar-new-large-collapse-progress: 1;
+  .navbar-new-bg,
+  .title-large,
+  .title-large-text {
+    transition-duration: 300ms;
+  }
+}
+.navbar-new.with-searchbar-new-expandable-closing,
+.navbar-new.with-searchbar-new-expandable-closing {
+  .navbar-new-bg,
+  .title-large,
+  .title-large-text {
+    transition-duration: 300ms;
+  }
+}
+
+.page-content.with-searchbar-new-expandable-enabled {
+  height: calc(100% + var(--f7-navbar-new-large-title-height));
+  transform: translateY(calc(-1 * var(--f7-navbar-new-large-title-height)));
+  transition-duration: 300ms;
+  transition-property: transform;
+}
+.page-content.with-searchbar-new-expandable-closing {
+  transition-duration: 300ms;
+}
+
+// Relation with page
+.navbar-new ~ .page:not(.no-navbar) > .searchbar-new,
+.page > .navbar-new ~ .searchbar-new {
+  top: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+}
+
+.navbar-new ~ .page-with-navbar-new-large:not(.no-navbar) .searchbar-new,
+.page-with-navbar-new-large .navbar-new ~ .searchbar-new,
+.page-with-navbar-new-large .navbar-new ~ * .searchbar-new {
+  top: calc(
+    var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top)
+  );
+  transform: translate3d(
+    0,
+    calc(
+      -1 * var(--f7-navbar-new-large-collapse-progress) * var(--f7-navbar-new-large-title-height)
+    ),
+    0
+  );
+}
+.page-with-navbar-new-large .page-content .searchbar-new {
+  top: 0;
+  transform: none;
+}
+
+.searchbar-new ~ * {
+  --f7-page-searchbar-new-offset: var(--f7-searchbar-new-height);
+}
+
+// Toolbar
+.page > .toolbar-top,
+.ios .page > .toolbar-top-ios,
+.md .page > .toolbar-top-md {
+  ~ .searchbar-new {
+    top: var(--f7-toolbar-height);
+  }
+}
+.page > .tabbar-icons.toolbar-top,
+.ios .page > .tabbar-icons.toolbar-top-ios,
+.md .page > .tabbar-icons.toolbar-top-md {
+  ~ .searchbar-new {
+    top: var(--f7-tabbar-icons-height);
+  }
+}
+.page > .navbar-new ~ .toolbar-top,
+.ios .page > .navbar-new ~ .toolbar-top-ios,
+.md .page > .navbar-new ~ .toolbar-top-md {
+  ~ .searchbar-new {
+    top: calc(var(--f7-navbar-new-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top));
+  }
+}
+.page > .navbar-new ~ .tabbar-icons.toolbar-top,
+.ios .page > .navbar-new ~ .tabbar-icons.toolbar-top-ios,
+.md .page > .navbar-new ~ .tabbar-icons.toolbar-top-md {
+  ~ .searchbar-new {
+    top: calc(
+      var(--f7-navbar-new-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top)
+    );
+  }
+}
+
+.searchbar-new.searchbar-new-inline {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  background-image: none;
+
+  &:after,
+  &:before {
+    display: none !important;
+  }
+  .searchbar-new-input-wrap {
+    height: var(--f7-searchbar-new-inline-input-height, var(--f7-searchbar-new-input-height));
+  }
+  .searchbar-new-inner {
+    padding: 0;
+    position: static;
+    width: auto;
+    height: auto;
+  }
+  input[type='text'],
+  input[type='search'] {
+    font-size: var(
+      --f7-searchbar-new-inline-input-font-size,
+      var(--f7-searchbar-new-input-font-size)
+    );
+    border-radius: var(
+      --f7-searchbar-new-inline-input-border-radius,
+      var(--f7-searchbar-new-input-border-radius)
+    );
+    .ltr({
+      padding-left: calc(var(--f7-searchbar-new-inline-input-padding-horizontal, var(--f7-searchbar-new-input-padding-horizontal)) + var(--f7-searchbar-new-input-extra-padding-left, 0px));
+      padding-right: calc(var(--f7-searchbar-new-inline-input-padding-horizontal, var(--f7-searchbar-new-input-padding-horizontal)) + var(--f7-searchbar-new-input-extra-padding-right, 0px));;
+    });
+    .rtl({
+      padding-left: calc(var(--f7-searchbar-new-inline-input-padding-horizontal, var(--f7-searchbar-new-input-padding-horizontal)) + var(--f7-searchbar-new-input-extra-padding-right, 0px));;
+      padding-right: calc(var(--f7-searchbar-new-inline-input-padding-horizontal, var(--f7-searchbar-new-input-padding-horizontal)) + var(--f7-searchbar-new-input-extra-padding-left, 0px));
+    });
+  }
+}
+
+.if-ios-theme({
+  @import './searchbar-ios.less';
+});
+.if-md-theme({
+  @import './searchbar-md.less';
+});

package/components/swipeout/swipeout.js

@@ -27,7 +27,6 @@ const Swipeout = {
     let $overswipeRightButton;
     let overswipeLeft;
     let overswipeRight;
-    const isIOS = app.theme === 'ios';
     function handleTouchStart(e) {
       if (!app.swipeout.allow) return;
       isMoved = false;
@@ -162,7 +161,7 @@ const Swipeout = {
           buttonOffset = buttonEl.f7SwipeoutButtonOffset;
           const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
           if ($overswipeRightButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-left') {
-            if (isIOS) {
+            if (app.theme === 'ios') {
               const newWidth = overswipeRight ? buttonWidth + buttonOffset - 8 : buttonWidth;
               const diff = newWidth - buttonWidth;
               $buttonEl.css({
@@ -188,7 +187,7 @@ const Swipeout = {
               $buttonEl.removeClass('swipeout-overswipe-active');
             }
           }
-          if (isIOS) {
+          if (app.theme === 'ios') {
             const buttonEndPos = actionsRightWidth - buttonOffset;
             const buttonStartPos = actionsRightWidth - buttonOffset - buttonWidth;
             let buttonProgress = (-buttonTranslate - buttonStartPos) / (buttonEndPos - buttonStartPos);
@@ -221,12 +220,12 @@ const Swipeout = {
             $buttonEl[0].f7SwipeoutButtonWidth = buttonEl.offsetWidth;
           }
           if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
-            $buttonEl[0].f7SwipeoutButtonOffset = isIOS ? buttonEl.offsetLeft : actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
+            $buttonEl[0].f7SwipeoutButtonOffset = app.theme === 'ios' ? buttonEl.offsetLeft : actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
           }
           const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
           buttonOffset = buttonEl.f7SwipeoutButtonOffset;
           if ($overswipeLeftButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-right') {
-            if (isIOS) {
+            if (app.theme === 'ios') {
               const newWidth = overswipeLeft ? actionsLeftWidth - 16 : buttonWidth;
               const diff = newWidth - buttonWidth;
               $buttonEl.css({
@@ -255,7 +254,7 @@ const Swipeout = {
           if ($leftButtons.length > 1) {
             $buttonEl.css('z-index', $leftButtons.length - index);
           }
-          if (isIOS) {
+          if (app.theme === 'ios') {
             const buttonStartPos = buttonOffset;
             const buttonEndPos = buttonStartPos + buttonWidth;
             let buttonProgress = (buttonTranslate - buttonStartPos) / (buttonEndPos - buttonStartPos);
@@ -305,7 +304,7 @@ const Swipeout = {
         $buttons = direction === 'to-left' ? $rightButtons : $leftButtons;
         if ($buttons) {
           for (i = 0; i < $buttons.length; i += 1) {
-            if (isIOS) {
+            if (app.theme === 'ios') {
               $($buttons[i]).transform(`scale(1)`);
             } else {
               $($buttons[i]).transform(`translate3d(${newTranslate}px,0,0)`);
@@ -334,7 +333,7 @@ const Swipeout = {
           if (typeof buttonOffset === 'undefined') {
             $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
           }
-          if (isIOS) {
+          if (app.theme === 'ios') {
             $buttonEl.transform(`scale(0)`);
           } else {
             $buttonEl.transform(`translate3d(${buttonOffset}px,0,0)`);
@@ -348,7 +347,7 @@ const Swipeout = {
           if (typeof buttonOffset === 'undefined') {
             $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
           }
-          if (isIOS) {
+          if (app.theme === 'ios') {
             $buttonEl.transform(`scale(0)`);
           } else {
             $buttonEl.transform(`translate3d(${-buttonOffset}px,0,0)`);

package/components/tabs/tabs.js

@@ -190,6 +190,11 @@ const Tab = {
         if (hasHighlight) {
           app.toolbar.setHighlight($tabbarEl);
         }
+        // Toolbar New Highlight
+        const $tabbarNewEl = $tabLinkEl.parents('.tabbar-new, .tabbar-new-icons');
+        if (app.toolbarNew && $tabbarNewEl.length > 0) {
+          app.toolbarNew.setHighlight($tabbarNewEl);
+        }
       }
     }
     return {

package/components/toolbar-new/tabbar-highlight.js

@@ -0,0 +1,134 @@
+import { getDocument } from 'ssr-window';
+const startAnimation = data => {
+  data.raf = requestAnimationFrame(() => {
+    if (!data.setTransform) return;
+    const highlightEl = data.highlightEl;
+    if (!highlightEl) return;
+    highlightEl.style.transform = data.setTransform;
+    highlightEl.style.transitionTimingFunction = 'ease-out';
+    data.setTransform = null;
+  });
+};
+const stopAnimation = data => {
+  cancelAnimationFrame(data.raf);
+};
+const setHighlightOnTouch = (data, e) => {
+  const {
+    rect,
+    linkEls,
+    highlightEl
+  } = data;
+  if (!highlightEl) return;
+  const {
+    clientX
+  } = e;
+  const highlightWidth = rect.width / linkEls.length;
+  const leftOffset = clientX - rect.left - highlightWidth / 2;
+  const minLeft = 0;
+  const maxLeft = rect.width - highlightWidth;
+  const translateX = Math.max(minLeft, Math.min(leftOffset, maxLeft));
+  const linkCenters = [...linkEls].map((el, index) => {
+    return index * highlightWidth + highlightWidth / 2;
+  });
+  const closestLinkCenter = linkCenters.reduce((prev, curr) => {
+    const highlightCenter = translateX + highlightWidth / 2;
+    return Math.abs(curr - highlightCenter) < Math.abs(prev - highlightCenter) ? curr : prev;
+  }, linkCenters[0]);
+  const closestLinkIndex = linkCenters.indexOf(closestLinkCenter);
+  data.newActiveIndex = closestLinkIndex;
+  highlightEl.classList.add('tab-link-highlight-pressed');
+  data.setTransform = `translateX(${translateX}px)`;
+  startAnimation(data);
+};
+const unsetHighlightOnTouch = data => {
+  cancelAnimationFrame(data.raf);
+  data.setTransform = null;
+  const {
+    highlightEl
+  } = data;
+  if (!highlightEl) return;
+  highlightEl.classList.remove('tab-link-highlight-pressed');
+  const {
+    activeIndex,
+    newActiveIndex,
+    linkEls
+  } = data;
+  if (activeIndex !== newActiveIndex) {
+    linkEls[newActiveIndex].click();
+  }
+  highlightEl.style.transform = `translateX(${newActiveIndex * 100}%)`;
+  highlightEl.style.transitionTimingFunction = '';
+  highlightEl.style.transform = `translateX(${newActiveIndex * 100}%)`;
+};
+export const initTabbarNewHighlight = el => {
+  const document = getDocument();
+  if (!el) return;
+  if (el.classList.contains('tabbar-new-scrollable')) {
+    return;
+  }
+  const highlightEl = el.querySelector('.tab-link-highlight');
+  const toolbarPaneEl = el.querySelector('.toolbar-new-pane');
+  if (!highlightEl || !toolbarPaneEl) return;
+  const data = {
+    el,
+    highlightEl,
+    touched: false,
+    moved: false,
+    rect: null,
+    setTransform: null,
+    raf: null
+  };
+  el.f7ToolbarNewHighlightData = data;
+  el.f7ToolbarNewOnPointer = e => {
+    if (e.type === 'touchstart') {
+      e.preventDefault();
+    }
+    if (e.pointerType !== 'touch') return;
+    if (!el) return;
+    if (e.type === 'pointerdown') {
+      data.linkEls = el.querySelectorAll('.tab-link');
+      data.rect = toolbarPaneEl.getBoundingClientRect();
+      data.touched = true;
+      setHighlightOnTouch(data, e);
+      startAnimation(data);
+    }
+    if (e.type === 'pointermove') {
+      if (!data.touched) return;
+      data.moved = true;
+      setHighlightOnTouch(data, e);
+    }
+    if (e.type === 'pointerup') {
+      if (!data.touched) return;
+      data.touched = false;
+      data.moved = false;
+      unsetHighlightOnTouch(data);
+      stopAnimation(data);
+    }
+  };
+  el.addEventListener('touchstart', el.f7ToolbarNewOnPointer, {
+    passive: false
+  });
+  el.addEventListener('pointerdown', el.f7ToolbarNewOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointermove', el.f7ToolbarNewOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointerup', el.f7ToolbarNewOnPointer, {
+    passive: false
+  });
+  document.addEventListener('pointercancel', el.f7ToolbarNewOnPointer, {
+    passive: false
+  });
+};
+export const destroyTabbarNewHighlight = el => {
+  if (!el || !el.f7ToolbarNewOnPointer) return;
+  const document = getDocument();
+  el.removeEventListener('touchstart', el.f7ToolbarNewOnPointer);
+  el.removeEventListener('pointerdown', el.f7ToolbarNewOnPointer);
+  document.removeEventListener('pointermove', el.f7ToolbarNewOnPointer);
+  document.removeEventListener('pointerup', el.f7ToolbarNewOnPointer);
+  document.removeEventListener('pointercancel', el.f7ToolbarNewOnPointer);
+  el.f7ToolbarNewOnPointer = null;
+  el.f7ToolbarNewHighlightData = null;
+};