@xenknight/framework7 0.0.6 → 0.0.7

package/components/toolbar-new/toolbar-ios.less

@@ -0,0 +1,193 @@
+.ios {
+  .toolbar-new-pane {
+    user-select: none;
+  }
+  .toolbar-new-pane,
+  .toolbar-new .left,
+  .toolbar-new .right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    border-radius: 32px;
+    .ios-glass();
+  }
+  .toolbar-new {
+    .left {
+      margin-right: auto;
+    }
+    .right {
+      margin-left: auto;
+    }
+    .left:empty,
+    .right:empty {
+      display: none;
+    }
+
+    a.icon-only {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0;
+      min-width: 48px;
+      min-height: 48px;
+      padding: 0;
+    }
+    .link {
+      padding: 0 12px;
+      height: 100%;
+    }
+    &:before,
+    &:after {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+    &:before {
+      backdrop-filter: blur(2px);
+      mask-image: linear-gradient(
+        to top,
+        black calc(50% + var(--f7-safe-area-bottom, 0px)),
+        transparent 100%
+      );
+    }
+    &:after {
+      background-image: linear-gradient(
+        to top,
+        var(--f7-toolbar-new-bars-bg-color) var(--f7-safe-area-bottom, 0px),
+        transparent 100%
+      );
+    }
+    &.toolbar-new-bottom,
+    &.messagebar {
+      &:before,
+      &:after {
+        top: -16px;
+      }
+      .toolbar-new-inner {
+        padding-bottom: 16px;
+      }
+    }
+    &.toolbar-new-top,
+    &:not(.toolbar-new-bottom, .toolbar-new-top, .messagebar) {
+      &:before {
+        mask-image: linear-gradient(
+          to bottom,
+          black calc(50% + var(--f7-safe-area-top, 0px)),
+          transparent 100%
+        );
+      }
+      &:after {
+        background-image: linear-gradient(
+          to bottom,
+          var(--f7-toolbar-new-bars-bg-color) var(--f7-safe-area-top, 0px),
+          transparent 100%
+        );
+      }
+      &:before,
+      &:after {
+        bottom: -16px;
+      }
+      .toolbar-new-inner {
+        padding-top: 16px;
+      }
+    }
+  }
+  .navbar-new ~ .toolbar-new-top {
+    &:before,
+    &:after {
+      display: none;
+    }
+  }
+  .toolbar-new-inner {
+    justify-content: center;
+    overflow: visible;
+    gap: 16px;
+  }
+  .tabbar-new-scrollable .toolbar-new-pane {
+    .scrollable();
+    .no-scrollbar();
+    justify-content: flex-start;
+  }
+  .tabbar-new:not(.tabbar-new-scrollable) {
+    touch-action: none;
+  }
+  .tabbar-new-icons {
+    .tab-link,
+    .link {
+      padding-top: 4px;
+      padding-bottom: 4px;
+      i + span {
+        margin: 0;
+        margin-top: 4px;
+      }
+    }
+  }
+  @media (max-width: 767px) {
+    .tabbar-new .toolbar-new-pane {
+      width: 100%;
+    }
+  }
+  @media (min-width: 768px) {
+    .tabbar-new .tab-link {
+      padding-left: 16px;
+      padding-right: 16px;
+      min-width: 96px;
+    }
+  }
+
+  // Scrollable
+  .tabbar-new-scrollable {
+    .toolbar-new-inner {
+      justify-content: flex-start;
+    }
+    .tab-link,
+    .link {
+      padding: 0 8px;
+    }
+  }
+  .tab-link-highlight {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    transition-duration: 300ms;
+    border-radius: inherit;
+    .ltr({
+      left: 0;
+    });
+    .rtl({
+      right: 0;
+    });
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 4px;
+      border-radius: inherit;
+      transition-duration: 300ms;
+    }
+    &:before {
+      background-color: var(--f7-tabbar-new-link-highlight-bg-color);
+    }
+    &:after {
+      opacity: 0;
+      box-shadow: var(--f7-glass-shadow-thumb);
+      background-color: var(--f7-tabbar-new-link-highlight-active-bg-color);
+    }
+  }
+  .tab-link-highlight-pressed {
+    &:before {
+      opacity: 0;
+    }
+    &:after {
+      opacity: 1;
+    }
+    &:before,
+    &:after {
+      scale: 1.4;
+    }
+  }
+}

package/components/toolbar-new/toolbar-md.less

@@ -0,0 +1,152 @@
+.md {
+  .toolbar-new-pane {
+    display: contents;
+  }
+  .toolbar-new {
+    background-color: var(--f7-toolbar-new-bg-color, var(--f7-bars-bg-color));
+    .link {
+      justify-content: center;
+      padding: 0 12px;
+      min-width: 48px;
+      min-height: 48px;
+      line-height: var(--f7-toolbar-new-link-line-height, var(--f7-toolbar-new-height));
+      height: var(--f7-toolbar-new-link-height, var(--f7-toolbar-new-height));
+    }
+    a.icon-only {
+      min-width: 48px;
+      flex-shrink: 0;
+      padding: 0;
+    }
+  }
+  .toolbar-new-top,
+  .md .toolbar-new-top-md {
+    &.no-outline {
+      &:after {
+        display: none !important;
+      }
+    }
+    &.toolbar-new-hidden {
+      &:before {
+        display: none !important;
+      }
+    }
+    &:after,
+    &:before {
+      backface-visibility: hidden;
+    }
+    .hairline(bottom, var(--f7-toolbar-new-border-color, var(--f7-bars-border-color)));
+  }
+  .toolbar-new-bottom,
+  .md .toolbar-new-bottom-md {
+    &.no-outline {
+      &:before {
+        display: none !important;
+      }
+    }
+    &.toolbar-new-hidden {
+      &:after {
+        display: none !important;
+      }
+    }
+    .hairline(top, var(--f7-toolbar-new-border-color, var(--f7-bars-border-color)));
+  }
+  .toolbar-new-inner {
+    justify-content: space-between;
+    overflow: hidden;
+  }
+  .tabbar-new,
+  .tabbar-new-icons {
+    .tab-link,
+    .link {
+      padding-left: 0;
+      padding-right: 0;
+    }
+    a.icon-only {
+      flex-shrink: initial;
+    }
+    .tab-link {
+      transition-duration: 300ms;
+      overflow: hidden;
+      position: relative;
+    }
+    i.icon {
+      position: relative;
+      &::before {
+        content: '';
+        width: 64px;
+        height: 32px;
+        border-radius: 32px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%) scaleX(0.5);
+        background: var(--f7-tabbar-new-link-active-icon-bg-color);
+        opacity: 0;
+        transition-duration: 200ms;
+        z-index: -1;
+      }
+      + .tabbar-new-label {
+        margin-top: 8px;
+      }
+    }
+    .tab-link-active i.icon::before {
+      opacity: 1;
+      transform: translateX(-50%) translateY(-50%) scaleX(1);
+    }
+  }
+
+  .tabbar-new-icons {
+    .tab-link,
+    .link {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+  }
+  .tabbar-new-label {
+    max-width: 100%;
+    overflow: hidden;
+    line-height: 1.2;
+  }
+
+  // Scrollable
+  .tabbar-new-scrollable {
+    .toolbar-new-inner {
+      overflow: auto;
+    }
+    .tab-link,
+    .link {
+      padding: 0 12px;
+    }
+  }
+  .toolbar-new-top-md,
+  .toolbar-new-top {
+    .tab-link-highlight {
+      bottom: 0;
+    }
+  }
+  .toolbar-new-bottom,
+  .toolbar-new-bottom-md {
+    .tab-link-highlight {
+      top: 0;
+    }
+  }
+  .tabbar-new,
+  .tabbar-new-icons {
+    &.tabbar-new-icons .tab-link-highlight {
+      display: none;
+    }
+    &:not(.tabbar-new-icons) .tab-link-highlight {
+      position: absolute;
+      height: 2px;
+      background: var(--f7-tabbar-new-link-active-border-color, var(--f7-theme-color));
+      transition-duration: 300ms;
+      .ltr({
+        left: 0;
+      });
+      .rtl({
+        right: 0;
+      });
+    }
+  }
+}
+

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

@@ -0,0 +1,77 @@
+:root {
+  /*
+  --f7-toolbar-new-bg-color: var(--f7-bars-bg-color);
+  --f7-toolbar-new-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+  --f7-toolbar-new-border-color: var(--f7-bars-border-color);
+  --f7-toolbar-new-text-color: var(--f7-bars-text-color);
+  */
+  --f7-tabbar-new-link-active-bg-color: transparent;
+  --f7-tabbar-new-label-text-transform: none;
+  --f7-toolbar-new-hide-show-transition-duration: 400ms;
+}
+.ios-vars({
+  --f7-toolbar-new-height: 64px;
+  --f7-toolbar-new-font-size: 17px;
+  --f7-toolbar-new-inner-padding-left: 16px;
+  --f7-toolbar-new-inner-padding-right: 16px;
+  --f7-toolbar-new-link-font-weight: 400;
+  --f7-toolbar-new-link-color: var(--f7-bars-text-color);
+  --f7-tabbar-new-link-inactive-color: var(--f7-bars-text-color);
+  /*
+  --f7-toolbar-new-link-height: var(--f7-toolbar-new-height);
+  --f7-toolbar-new-link-line-height: var(--f7-toolbar-new-height);
+  --f7-tabbar-new-link-active-color: var(--f7-theme-color);
+  */
+  --f7-tabbar-new-icons-height: 80px;
+  --f7-tabbar-new-icons-tablet-height: 80px;
+  --f7-tabbar-new-icon-size: 28px;
+  --f7-tabbar-new-link-text-transform: none;
+  --f7-tabbar-new-link-font-weight: 400;
+  --f7-tabbar-new-link-letter-spacing: 0;
+
+  --f7-tabbar-new-label-font-size: 12px;
+  --f7-tabbar-new-label-tablet-font-size: 14px;
+  --f7-tabbar-new-label-font-weight: 500;
+  --f7-tabbar-new-label-letter-spacing: 0.01;
+  .dark-vars({
+    --f7-tabbar-new-link-highlight-bg-color: rgba(255,255,255,0.15);
+    --f7-tabbar-new-link-highlight-active-bg-color: rgba(255,255,255,0.1);
+    --f7-toolbar-new-bars-bg-color: rgba(0, 0, 0, 0.5);
+  });
+  .light-vars({
+    --f7-tabbar-new-link-highlight-bg-color: rgba(0,0,0,0.1);
+    --f7-tabbar-new-link-highlight-active-bg-color: rgba(0,0,0,0.05);
+    --f7-toolbar-new-bars-bg-color: #efeff4;
+  });
+
+});
+.md-vars({
+  --f7-toolbar-new-height: 56px;
+  --f7-toolbar-new-font-size: 14px;
+  --f7-toolbar-new-inner-padding-left: 0px;
+  --f7-toolbar-new-inner-padding-right: 0px;
+  /*
+  --f7-toolbar-new-link-color: var(--f7-bars-link-color);
+  --f7-toolbar-new-link-height: var(--f7-toolbar-new-height);
+  --f7-toolbar-new-link-line-height: var(--f7-toolbar-new-height);
+  */
+  --f7-tabbar-new-icons-height: 80px;
+  --f7-tabbar-new-icons-tablet-height: 80px;
+  --f7-tabbar-new-icon-size: 24px;
+  --f7-tabbar-new-link-text-transform: none;
+  --f7-tabbar-new-link-font-weight: 500;
+  --f7-tabbar-new-link-letter-spacing: 0;
+  --f7-toolbar-new-link-font-weight: 500;
+
+  --f7-tabbar-new-label-font-size: 12px;
+  --f7-tabbar-new-label-tablet-font-size: 12px;
+  --f7-tabbar-new-label-font-weight: 500;
+  --f7-tabbar-new-label-letter-spacing: 0;
+
+});
+.md-color-vars({
+  --f7-tabbar-new-link-active-color: var(--f7-md-on-secondary-container);
+  --f7-tabbar-new-link-active-border-color: var(--f7-md-primary);
+  --f7-tabbar-new-link-inactive-color: var(--f7-md-on-surface-variant);
+  --f7-tabbar-new-link-active-icon-bg-color: var(--f7-md-secondary-container);
+});

package/components/toolbar-new/toolbar.js

@@ -0,0 +1,223 @@
+import $ from '../../shared/dom7.js';
+import { nextFrame, bindMethods } from '../../shared/utils.js';
+import { destroyTabbarNewHighlight, initTabbarNewHighlight } from './tabbar-highlight.js';
+const ToolbarNew = {
+  setHighlight(tabbarEl) {
+    const app = this;
+    const $tabbarEl = $(tabbarEl);
+    if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar-new') || $tabbarEl.hasClass('tabbar-new-icons'))) {
+      return;
+    }
+    let $highlightEl = $tabbarEl.find('.tab-link-highlight');
+    const tabLinksCount = $tabbarEl.find('.tab-link').length;
+    if (tabLinksCount === 0) {
+      $highlightEl.remove();
+      return;
+    }
+    if ($highlightEl.length === 0) {
+      if (app.theme === 'ios') {
+        $tabbarEl.children('.toolbar-new-inner').children('.toolbar-new-pane').append('<span class="tab-link-highlight"></span>');
+      } else {
+        $tabbarEl.children('.toolbar-new-inner').append('<span class="tab-link-highlight"></span>');
+      }
+      $highlightEl = $tabbarEl.find('.tab-link-highlight');
+    } else if ($highlightEl.next('a,button,.tab-link').length) {
+      if (app.theme === 'ios') {
+        $tabbarEl.children('.toolbar-new-inner').children('.toolbar-new-pane').append($highlightEl);
+      } else {
+        $tabbarEl.children('.toolbar-new-inner').append($highlightEl);
+      }
+    }
+    const $activeLink = $tabbarEl.find('.tab-link-active');
+    let highlightWidth;
+    let highlightTranslate;
+    if ($tabbarEl.hasClass('tabbar-new-scrollable') && $activeLink && $activeLink[0]) {
+      highlightWidth = `${$activeLink[0].offsetWidth}px`;
+      highlightTranslate = `${$activeLink[0].offsetLeft}px`;
+    } else {
+      const activeIndex = $activeLink.index();
+      highlightWidth = `${100 / tabLinksCount}%`;
+      highlightTranslate = `${(app.rtl ? -activeIndex : activeIndex) * 100}%`;
+    }
+    nextFrame(() => {
+      $highlightEl.css('width', highlightWidth).transform(`translate3d(${highlightTranslate},0,0)`);
+    });
+  },
+  init(tabbarEl) {
+    const app = this;
+    app.toolbarNew.setHighlight(tabbarEl);
+    if (app.theme !== 'ios') return;
+    initTabbarNewHighlight(tabbarEl);
+  },
+  destroy(tabbarEl) {
+    const app = this;
+    if (app.theme !== 'ios') return;
+    destroyTabbarNewHighlight(tabbarEl);
+  },
+  hide(el, animate) {
+    if (animate === void 0) {
+      animate = true;
+    }
+    const app = this;
+    const $el = $(el);
+    if ($el.hasClass('toolbar-new-hidden')) return;
+    const className = `toolbar-new-hidden${animate ? ' toolbar-new-transitioning' : ''}`;
+    $el.transitionEnd(() => {
+      $el.removeClass('toolbar-new-transitioning');
+    });
+    $el.addClass(className);
+    $el.trigger('toolbar-new:hide');
+    app.emit('toolbarNewHide', $el[0]);
+  },
+  show(el, animate) {
+    if (animate === void 0) {
+      animate = true;
+    }
+    const app = this;
+    const $el = $(el);
+    if (!$el.hasClass('toolbar-new-hidden')) return;
+    if (animate) {
+      $el.addClass('toolbar-new-transitioning');
+      $el.transitionEnd(() => {
+        $el.removeClass('toolbar-new-transitioning');
+      });
+    }
+    $el.removeClass('toolbar-new-hidden');
+    $el.trigger('toolbar-new:show');
+    app.emit('toolbarNewShow', $el[0]);
+  },
+  initToolbarOnScroll(pageEl) {
+    const app = this;
+    const $pageEl = $(pageEl);
+    let $toolbarEl = $pageEl.parents('.view').children('.toolbar-new');
+    if ($toolbarEl.length === 0) {
+      $toolbarEl = $pageEl.find('.toolbar-new');
+    }
+    if ($toolbarEl.length === 0) {
+      $toolbarEl = $pageEl.parents('.views').children('.tabbar-new, .tabbar-new-icons');
+    }
+    if ($toolbarEl.length === 0) {
+      return;
+    }
+    let previousScrollTop;
+    let currentScrollTop;
+    let scrollHeight;
+    let offsetHeight;
+    let reachEnd;
+    let action;
+    let toolbarHidden;
+    function handleScroll(e) {
+      if ($pageEl.hasClass('page-with-card-opened')) return;
+      if ($pageEl.hasClass('page-previous')) return;
+      const scrollContent = this;
+      if (e && e.target && e.target !== scrollContent) {
+        return;
+      }
+      currentScrollTop = scrollContent.scrollTop;
+      scrollHeight = scrollContent.scrollHeight;
+      offsetHeight = scrollContent.offsetHeight;
+      reachEnd = currentScrollTop + offsetHeight >= scrollHeight;
+      toolbarHidden = $toolbarEl.hasClass('toolbar-new-hidden');
+      if (reachEnd) {
+        if (app.params.toolbarNew.showOnPageScrollEnd) {
+          action = 'show';
+        }
+      } else if (previousScrollTop > currentScrollTop) {
+        if (app.params.toolbarNew.showOnPageScrollTop || currentScrollTop <= 44) {
+          action = 'show';
+        } else {
+          action = 'hide';
+        }
+      } else if (currentScrollTop > 44) {
+        action = 'hide';
+      } else {
+        action = 'show';
+      }
+      if (action === 'show' && toolbarHidden) {
+        app.toolbarNew.show($toolbarEl);
+        toolbarHidden = false;
+      } else if (action === 'hide' && !toolbarHidden) {
+        app.toolbarNew.hide($toolbarEl);
+        toolbarHidden = true;
+      }
+      previousScrollTop = currentScrollTop;
+    }
+    $pageEl.on('scroll', '.page-content', handleScroll, true);
+    $pageEl[0].f7ScrollToolbarNewHandler = handleScroll;
+  }
+};
+export default {
+  name: 'toolbar-new',
+  create() {
+    const app = this;
+    bindMethods(app, {
+      toolbarNew: ToolbarNew
+    });
+  },
+  params: {
+    toolbarNew: {
+      hideOnPageScroll: false,
+      showOnPageScrollEnd: true,
+      showOnPageScrollTop: true
+    }
+  },
+  on: {
+    pageBeforeRemove(page) {
+      const app = this;
+      if (page.$el[0].f7ScrollToolbarNewHandler) {
+        page.$el.off('scroll', '.page-content', page.$el[0].f7ScrollToolbarNewHandler, true);
+      }
+      page.$el.find('.tabbar-new, .tabbar-new-icons').each(tabbarEl => {
+        app.toolbarNew.destroy(tabbarEl);
+      });
+    },
+    pageBeforeIn(page) {
+      const app = this;
+      let $toolbarEl = page.$el.parents('.view').children('.toolbar-new');
+      if ($toolbarEl.length === 0) {
+        $toolbarEl = page.$el.parents('.views').children('.tabbar-new, .tabbar-new-icons');
+      }
+      if ($toolbarEl.length === 0) {
+        $toolbarEl = page.$el.find('.toolbar-new');
+      }
+      if ($toolbarEl.length === 0) {
+        return;
+      }
+      if (page.$el.hasClass('no-toolbar-new')) {
+        app.toolbarNew.hide($toolbarEl);
+      } else {
+        app.toolbarNew.show($toolbarEl);
+      }
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.tabbar-new, .tabbar-new-icons').each(tabbarEl => {
+        app.toolbarNew.init(tabbarEl);
+      });
+      if (app.params.toolbarNew.hideOnPageScroll || page.$el.find('.hide-toolbar-new-on-scroll').length || page.$el.hasClass('hide-toolbar-new-on-scroll') || page.$el.find('.hide-bars-on-scroll').length || page.$el.hasClass('hide-bars-on-scroll')) {
+        if (page.$el.find('.keep-toolbar-new-on-scroll').length || page.$el.hasClass('keep-toolbar-new-on-scroll') || page.$el.find('.keep-bars-on-scroll').length || page.$el.hasClass('keep-bars-on-scroll')) {
+          return;
+        }
+        app.toolbarNew.initToolbarOnScroll(page.el);
+      }
+    },
+    init() {
+      const app = this;
+      app.$el.find('.tabbar-new, .tabbar-new-icons').each(tabbarEl => {
+        app.toolbarNew.init(tabbarEl);
+      });
+    }
+  },
+  vnode: {
+    tabbarNew: {
+      insert(vnode) {
+        const app = this;
+        app.toolbarNew.init(vnode.elm);
+      },
+      destroy(vnode) {
+        const app = this;
+        app.toolbarNew.destroy(vnode.elm);
+      }
+    }
+  }
+};