@xenknight/framework7 0.0.2

package/components/toggle/toggle.js

@@ -0,0 +1,57 @@
+import $ from '../../shared/dom7.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+import Toggle from './toggle-class.js';
+export default {
+  name: 'toggle',
+  create() {
+    const app = this;
+    app.toggle = ConstructorMethods({
+      defaultSelector: '.toggle',
+      constructor: Toggle,
+      app,
+      domProp: 'f7Toggle'
+    });
+  },
+  static: {
+    Toggle
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.toggle-init').each(toggleEl => app.toggle.create({
+        el: toggleEl
+      }));
+    },
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.toggle-init').each(toggleEl => {
+        if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.toggle-init').each(toggleEl => app.toggle.create({
+        el: toggleEl
+      }));
+    },
+    pageBeforeRemove(page) {
+      page.$el.find('.toggle-init').each(toggleEl => {
+        if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();
+      });
+    }
+  },
+  vnode: {
+    'toggle-init': {
+      insert(vnode) {
+        const app = this;
+        const toggleEl = vnode.elm;
+        app.toggle.create({
+          el: toggleEl
+        });
+      },
+      destroy(vnode) {
+        const toggleEl = vnode.elm;
+        if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();
+      }
+    }
+  }
+};

package/components/toggle/toggle.less

@@ -0,0 +1,52 @@
+/* === Toggle === */
+@import './toggle-vars.less';
+
+.toggle,
+.toggle-icon {
+  width: var(--f7-toggle-width);
+  height: var(--f7-toggle-height);
+  border-radius: var(--f7-toggle-height);
+}
+.toggle {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  box-sizing: border-box;
+  align-self: center;
+  user-select: none;
+  input[type='checkbox'] {
+    display: none;
+  }
+  input[disabled] ~ .toggle-icon {
+    pointer-events: none;
+  }
+}
+.toggle-icon {
+  z-index: 0;
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  transition: 300ms;
+  box-sizing: border-box;
+  display: block;
+  cursor: pointer;
+  &:before,
+  &:after {
+    content: '';
+  }
+  &:after {
+    position: absolute;
+    z-index: 2;
+    transform: translateX(0px);
+    transition-duration: 300ms;
+  }
+}
+.if-ios-theme({
+  @import './toggle-ios.less';
+});
+.if-md-theme({
+  @import './toggle-md.less';
+});

package/components/toolbar/toolbar-ios.less

@@ -0,0 +1,47 @@
+.ios {
+  .toolbar {
+    a.icon-only {
+      min-height: var(--f7-toolbar-height);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0;
+      min-width: 44px;
+    }
+  }
+  .tabbar-icons {
+    .tab-link,
+    .link {
+      padding-top: 4px;
+      padding-bottom: 4px;
+      i + span {
+        margin: 0;
+        margin-top: 4px;
+      }
+    }
+  }
+  @media (min-width: 768px) and (min-height: 600px) {
+    .tabbar,
+    .tabbar-icons {
+      .tab-link,
+      .link {
+        justify-content: center;
+        flex-direction: row;
+        i + span {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+
+  // Scrollable
+  .tabbar-scrollable {
+    .toolbar-inner {
+      justify-content: flex-start;
+    }
+    .tab-link,
+    .link {
+      padding: 0 8px;
+    }
+  }
+}

package/components/toolbar/toolbar-md.less

@@ -0,0 +1,77 @@
+.md {
+  .toolbar {
+    .link {
+      justify-content: center;
+      padding: 0 12px;
+      min-width: 48px;
+    }
+    a.icon-only {
+      min-width: 0;
+      flex-shrink: 0;
+    }
+  }
+  .tabbar,
+  .tabbar-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-link-active-icon-bg-color);
+        opacity: 0;
+        transition-duration: 200ms;
+        z-index: -1;
+      }
+      + .tabbar-label {
+        margin-top: 8px;
+      }
+    }
+    .tab-link-active i.icon::before {
+      opacity: 1;
+      transform: translateX(-50%) translateY(-50%) scaleX(1);
+    }
+  }
+
+  .tabbar-icons {
+    .tab-link,
+    .link {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+  }
+  .tabbar-label {
+    max-width: 100%;
+    overflow: hidden;
+    line-height: 1.2;
+  }
+
+  // Scrollable
+  .tabbar-scrollable {
+    .toolbar-inner {
+      overflow: auto;
+    }
+    .tab-link,
+    .link {
+      padding: 0 12px;
+    }
+  }
+}

package/components/toolbar/toolbar-vars.less

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

package/components/toolbar/toolbar.d.ts

@@ -0,0 +1,43 @@
+import { Dom7Array } from 'dom7';
+import { CSSSelector, Framework7Plugin } from '../app/app-class.js';
+
+export namespace Toolbar {
+  interface AppMethods {
+    toolbar: {
+      /** Hide toolbar */
+      hide(toolbarEl: HTMLElement | CSSSelector, animate?: boolean): void;
+      /** Show toolbar */
+      show(toolbarEl: HTMLElement | CSSSelector, animate?: boolean): void;
+      /** Set highlight on tab links according to active one (This will have effect only in MD theme) */
+      setHighlight(tabbarEl: HTMLElement | CSSSelector): void;
+    };
+  }
+  interface AppParams {
+    toolbar?:
+      | {
+          /** Will hide Toolbars/Tabbars on page scroll (default false) */
+          hideOnPageScroll?: boolean;
+          /** Set to true to show hidden Toolbar/Tabbar when scrolling reaches end of the page (default true) */
+          showOnPageScrollEnd?: boolean;
+          /** Set to false and hidden Toolbar/Tabbar will not become visible when you scroll page to top everytime. They will become visible only at the most top scroll position, in the beginning of the page (default true)  */
+          showOnPageScrollTop?: boolean;
+        }
+      | undefined;
+  }
+  interface DomEvents {
+    /** Event will be triggered when Toolbar becomes hidden */
+    'toolbar:hide': () => void;
+    /** Event will be triggered when Toolbar becomes visible */
+    'toolbar:show': () => void;
+  }
+  interface AppEvents {
+    /** Event will be triggered when Toolbar becomes visible */
+    toolbarShow: (toolbarEl: HTMLElement) => void;
+    /** Event will be triggered when Toolbar becomes hidden */
+    toolbarHide: (toolbarEl: HTMLElement) => void;
+  }
+}
+
+declare const ToolbarComponent: Framework7Plugin;
+
+export default ToolbarComponent;

package/components/toolbar/toolbar.js

@@ -0,0 +1,198 @@
+import $ from '../../shared/dom7.js';
+import { nextFrame, bindMethods } from '../../shared/utils.js';
+const Toolbar = {
+  setHighlight(tabbarEl) {
+    const app = this;
+    const $tabbarEl = $(tabbarEl);
+    if (app.theme === 'ios' && !$tabbarEl.hasClass('tabbar-highlight')) return;
+    if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-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) {
+      $tabbarEl.children('.toolbar-inner').append('<span class="tab-link-highlight"></span>');
+      $highlightEl = $tabbarEl.find('.tab-link-highlight');
+    } else if ($highlightEl.next().length) {
+      $tabbarEl.children('.toolbar-inner').append($highlightEl);
+    }
+    const $activeLink = $tabbarEl.find('.tab-link-active');
+    let highlightWidth;
+    let highlightTranslate;
+    if ($tabbarEl.hasClass('tabbar-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.toolbar.setHighlight(tabbarEl);
+  },
+  hide(el, animate) {
+    if (animate === void 0) {
+      animate = true;
+    }
+    const app = this;
+    const $el = $(el);
+    if ($el.hasClass('toolbar-hidden')) return;
+    const className = `toolbar-hidden${animate ? ' toolbar-transitioning' : ''}`;
+    $el.transitionEnd(() => {
+      $el.removeClass('toolbar-transitioning');
+    });
+    $el.addClass(className);
+    $el.trigger('toolbar:hide');
+    app.emit('toolbarHide', $el[0]);
+  },
+  show(el, animate) {
+    if (animate === void 0) {
+      animate = true;
+    }
+    const app = this;
+    const $el = $(el);
+    if (!$el.hasClass('toolbar-hidden')) return;
+    if (animate) {
+      $el.addClass('toolbar-transitioning');
+      $el.transitionEnd(() => {
+        $el.removeClass('toolbar-transitioning');
+      });
+    }
+    $el.removeClass('toolbar-hidden');
+    $el.trigger('toolbar:show');
+    app.emit('toolbarShow', $el[0]);
+  },
+  initToolbarOnScroll(pageEl) {
+    const app = this;
+    const $pageEl = $(pageEl);
+    let $toolbarEl = $pageEl.parents('.view').children('.toolbar');
+    if ($toolbarEl.length === 0) {
+      $toolbarEl = $pageEl.find('.toolbar');
+    }
+    if ($toolbarEl.length === 0) {
+      $toolbarEl = $pageEl.parents('.views').children('.tabbar, .tabbar-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-hidden');
+      if (reachEnd) {
+        if (app.params.toolbar.showOnPageScrollEnd) {
+          action = 'show';
+        }
+      } else if (previousScrollTop > currentScrollTop) {
+        if (app.params.toolbar.showOnPageScrollTop || currentScrollTop <= 44) {
+          action = 'show';
+        } else {
+          action = 'hide';
+        }
+      } else if (currentScrollTop > 44) {
+        action = 'hide';
+      } else {
+        action = 'show';
+      }
+      if (action === 'show' && toolbarHidden) {
+        app.toolbar.show($toolbarEl);
+        toolbarHidden = false;
+      } else if (action === 'hide' && !toolbarHidden) {
+        app.toolbar.hide($toolbarEl);
+        toolbarHidden = true;
+      }
+      previousScrollTop = currentScrollTop;
+    }
+    $pageEl.on('scroll', '.page-content', handleScroll, true);
+    $pageEl[0].f7ScrollToolbarHandler = handleScroll;
+  }
+};
+export default {
+  name: 'toolbar',
+  create() {
+    const app = this;
+    bindMethods(app, {
+      toolbar: Toolbar
+    });
+  },
+  params: {
+    toolbar: {
+      hideOnPageScroll: false,
+      showOnPageScrollEnd: true,
+      showOnPageScrollTop: true
+    }
+  },
+  on: {
+    pageBeforeRemove(page) {
+      if (page.$el[0].f7ScrollToolbarHandler) {
+        page.$el.off('scroll', '.page-content', page.$el[0].f7ScrollToolbarHandler, true);
+      }
+    },
+    pageBeforeIn(page) {
+      const app = this;
+      let $toolbarEl = page.$el.parents('.view').children('.toolbar');
+      if ($toolbarEl.length === 0) {
+        $toolbarEl = page.$el.parents('.views').children('.tabbar, .tabbar-icons');
+      }
+      if ($toolbarEl.length === 0) {
+        $toolbarEl = page.$el.find('.toolbar');
+      }
+      if ($toolbarEl.length === 0) {
+        return;
+      }
+      if (page.$el.hasClass('no-toolbar')) {
+        app.toolbar.hide($toolbarEl);
+      } else {
+        app.toolbar.show($toolbarEl);
+      }
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.tabbar, .tabbar-icons').each(tabbarEl => {
+        app.toolbar.init(tabbarEl);
+      });
+      if (app.params.toolbar.hideOnPageScroll || page.$el.find('.hide-toolbar-on-scroll').length || page.$el.hasClass('hide-toolbar-on-scroll') || page.$el.find('.hide-bars-on-scroll').length || page.$el.hasClass('hide-bars-on-scroll')) {
+        if (page.$el.find('.keep-toolbar-on-scroll').length || page.$el.hasClass('keep-toolbar-on-scroll') || page.$el.find('.keep-bars-on-scroll').length || page.$el.hasClass('keep-bars-on-scroll')) {
+          return;
+        }
+        app.toolbar.initToolbarOnScroll(page.el);
+      }
+    },
+    init() {
+      const app = this;
+      app.$el.find('.tabbar, .tabbar-icons').each(tabbarEl => {
+        app.toolbar.init(tabbarEl);
+      });
+    }
+  },
+  vnode: {
+    tabbar: {
+      insert(vnode) {
+        const app = this;
+        app.toolbar.init(vnode.elm);
+      }
+    }
+  }
+};