@xenknight/framework7 0.0.2

package/components/panel/panel.less

@@ -0,0 +1,403 @@
+/* === Panels === */
+@import './panel-vars.less';
+
+.panel-backdrop {
+  position: absolute;
+  left: 0;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 5999;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translate3d(0, 0, 0);
+  background-color: var(--f7-panel-backdrop-bg-color);
+  transition-property: transform, opacity;
+  transition-duration: var(--f7-panel-transition-duration);
+  .with-panel,
+  .with-panel-closing {
+    visibility: visible;
+  }
+  &.not-animated {
+    transition-duration: 0ms !important;
+  }
+}
+.panel {
+  z-index: 1000;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0px;
+  height: 100%;
+  transform: translate3d(0, 0, 0);
+  width: var(--f7-panel-width);
+  background-color: var(--f7-panel-bg-color);
+  overflow: visible;
+  transition-property: transform;
+  transition-duration: var(--f7-panel-transition-duration);
+  &:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(
+      .panel-in-swipe
+    ) {
+    display: none;
+  }
+
+  &:after {
+    pointer-events: none;
+    opacity: 0;
+    z-index: 5999;
+    position: absolute;
+    content: '';
+    top: 0;
+    width: 20px;
+    height: 100%;
+    transition-property: transform, opacity;
+    transition-duration: var(--f7-panel-transition-duration);
+  }
+  &.not-animated {
+    &,
+    &:after {
+      transition-duration: 0ms !important;
+    }
+  }
+  &.panel-reveal.not-animated {
+    & ~ .views,
+    & ~ .view {
+      transition-duration: 0ms !important;
+    }
+  }
+  &.panel-resizing {
+    user-select: none;
+    &,
+    &:after,
+    & ~ .views,
+    & ~ .view {
+      transition-duration: 0ms !important;
+    }
+  }
+}
+.panel-cover,
+.panel-floating {
+  z-index: 6000;
+}
+.panel-floating {
+  overflow: hidden;
+  border-radius: 16px;
+  height: auto;
+  top: calc(8px + var(--f7-safe-area-top, 0px));
+  bottom: calc(8px + var(--f7-safe-area-bottom, 0px));
+  .views,
+  .view {
+    --f7-safe-area-top: 0px;
+    --f7-safe-area-bottom: 0px;
+  }
+}
+.page .panel-floating {
+  top: calc(8px + var(--f7-page-navbar-offset, 0px));
+  bottom: calc(8px + var(--f7-safe-area-bottom, 0px));
+  .page {
+    --f7-page-navbar-offset: 0px;
+  }
+  .navbar ~ *,
+  .navbars ~ * {
+    --f7-page-navbar-offset: calc(var(--f7-navbar-height));
+  }
+}
+.panel-left {
+  left: 0;
+  width: var(--f7-panel-left-width, var(--f7-panel-width));
+  &.panel-cover,
+  &.panel-floating,
+  &.panel-push {
+    transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
+  }
+}
+.panel-right {
+  right: 0;
+  width: var(--f7-panel-right-width, var(--f7-panel-width));
+  &.panel-cover,
+  &.panel-floating,
+  &.panel-push {
+    transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
+  }
+}
+.panel-in-breakpoint {
+  transform: translate3d(0, 0, 0) !important;
+  transition-duration: 0ms;
+  &:after {
+    display: none;
+  }
+  &.panel-cover,
+  &.panel-floating {
+    z-index: 5900;
+  }
+}
+.panel,
+.panel-backdrop {
+  transition-timing-function: var(--f7-panel-transition-timing-function);
+}
+html {
+  &.with-panel-left-reveal,
+  &.with-panel-right-reveal,
+  &.with-panel-left-push,
+  &.with-panel-right-push,
+  &.with-panel-closing {
+    .views,
+    .framework7-root > .view {
+      transition-duration: var(--f7-panel-transition-duration);
+      transition-property: transform;
+      transition-timing-function: var(--f7-panel-transition-timing-function);
+    }
+  }
+  &.with-panel {
+    .framework7-root > .views,
+    .framework7-root > .view {
+      .page-content {
+        .not-scrollable();
+      }
+    }
+  }
+  &.with-panel-left-reveal,
+  &.with-panel-left-push {
+    .views,
+    .framework7-root > .view {
+      transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
+    }
+  }
+  &.with-panel-right-reveal,
+  &.with-panel-right-push {
+    .views,
+    .framework7-root > .view {
+      transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
+    }
+  }
+}
+.page {
+  > .panel-backdrop {
+    z-index: 290;
+  }
+  > .panel-reveal,
+  .panel-push {
+    z-index: 1;
+  }
+  > .panel-cover,
+  > .panel-floating {
+    z-index: 300;
+  }
+  &.with-panel-left-reveal,
+  &.with-panel-right-reveal,
+  &.with-panel-left-push,
+  &.with-panel-right-push,
+  &.with-panel-closing {
+    > .page-content,
+    > .tabs {
+      transition-duration: var(--f7-panel-transition-duration);
+      transition-property: transform;
+      transition-timing-function: var(--f7-panel-transition-timing-function);
+    }
+  }
+  &.with-panel-left-reveal,
+  &.with-panel-left-push {
+    > .page-content,
+    > .tabs {
+      transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
+    }
+  }
+  &.with-panel-right-reveal,
+  &.with-panel-right-push {
+    > .page-content,
+    > .tabs {
+      transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
+    }
+  }
+}
+.with-panel-closing {
+  .panel-backdrop-in {
+    visibility: visible;
+    pointer-events: auto;
+    opacity: 0;
+  }
+}
+.with-panel-left-reveal,
+.with-panel-right-reveal,
+.with-panel-left-cover,
+.with-panel-right-cover,
+.with-panel-left-floating,
+.with-panel-right-floating,
+.with-panel-left-push,
+.with-panel-right-push {
+  .panel-backdrop-in {
+    visibility: visible;
+    pointer-events: auto;
+    opacity: 1;
+  }
+}
+
+.with-panel-left-reveal,
+.with-panel-left-push {
+  .panel-backdrop-in {
+    transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
+  }
+}
+.with-panel-right-reveal,
+.with-panel-right-push {
+  .panel-backdrop-in {
+    transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
+  }
+}
+.with-panel-left-cover .panel-left,
+.with-panel-left-push .panel-left {
+  transform: translate3d(0px, 0, 0);
+}
+.with-panel-left-floating .panel-left {
+  transform: translate3d(8px, 0, 0);
+}
+.with-panel-right-cover .panel-right,
+.with-panel-right-push .panel-right {
+  transform: translate3d(0px, 0, 0);
+}
+.with-panel-right-floating .panel-right {
+  transform: translate3d(-8px, 0, 0);
+}
+.panel-resizable {
+  max-width: 100%;
+}
+.panel-resize-handler {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 6000;
+  display: none;
+  .panel-resizable & {
+    display: block;
+  }
+  .panel-left.panel-cover &,
+  .panel-left.panel-floating & {
+    right: -3px;
+  }
+  .panel-left.panel-reveal &,
+  .panel-left.panel-push & {
+    right: 0;
+  }
+  .panel-right.panel-cover &,
+  .panel-right.panel-floating & {
+    left: -3px;
+  }
+  .panel-right.panel-reveal &,
+  .panel-right.panel-push & {
+    left: 0;
+  }
+}
+
+.panel-left.panel-in-collapsed {
+  & ~ .views,
+  & ~ .view,
+  & ~ .page-content,
+  & ~ .tabs {
+    margin-left: var(--f7-panel-left-collapsed-width, var(--f7-panel-collapsed-width));
+  }
+
+  .page.with-panel-left-reveal & ~ .page-content,
+  .page.with-panel-left-reveal & ~ .tabs,
+  html.with-panel-left-reveal & ~ .views,
+  html.with-panel-left-reveal & ~ .view {
+    transform: translate3d(
+      calc(
+        var(--f7-panel-left-width, var(--f7-panel-width)) -
+          var(--f7-panel-left-collapsed-width, var(--f7-panel-collapsed-width))
+      ),
+      0,
+      0
+    );
+  }
+}
+.panel-right.panel-in-collapsed {
+  & ~ .views,
+  & ~ .view,
+  & ~ .page-content,
+  & ~ .tabs {
+    margin-right: var(--f7-panel-right-collapsed-width, var(--f7-panel-collapsed-width));
+  }
+  .page.with-panel-right-reveal & ~ .page-content,
+  .page.with-panel-right-reveal & ~ .tabs,
+  html.with-panel-right-reveal & ~ .views,
+  html.with-panel-right-reveal & ~ .view {
+    transform: translate3d(
+      calc(
+        var(--f7-panel-right-collapsed-width, var(--f7-panel-collapsed-width)) -
+          var(--f7-panel-right-width, var(--f7-panel-width))
+      ),
+      0,
+      0
+    );
+  }
+}
+
+html.with-modal-popup-push .framework7-root,
+html.with-modal-popup-push-closing .framework7-root {
+  --f7-panelPushScale: var(--f7-popup-push-scale);
+  --f7-panelPushTransitionDuration: var(--f7-popup-transition-duration);
+  --f7-panelPushTransitionTimingFunction: var(--f7-popup-transition-timing-function);
+  --f7-panelPushBorderRadius: var(--f7-popup-push-border-radius);
+}
+html.with-modal-sheet-push .framework7-root,
+html.with-modal-sheet-push-closing .framework7-root {
+  --f7-panelPushScale: var(--f7-sheet-push-scale);
+  --f7-panelPushTransitionDuration: var(--f7-sheet-transition-duration);
+  --f7-panelPushTransitionTimingFunction: var(--f7-sheet-transition-timing-function);
+  --f7-panelPushBorderRadius: var(--f7-sheet-push-border-radius);
+}
+html.with-modal-popup-push .framework7-root,
+html.with-modal-sheet-push .framework7-root {
+  > .panel-in,
+  > .panel-out {
+    transition-duration: var(--f7-panelPushTransitionDuration);
+    transition-timing-function: var(--f7-panelPushTransitionTimingFunction);
+
+    &.panel-reveal.panel-left,
+    &.panel-push.panel-left {
+      transform: scale(var(--f7-panelPushScale, 1));
+      transform-origin: 50vw center;
+      border-top-left-radius: var(--f7-panelPushBorderRadius);
+      .view {
+        border-top-left-radius: var(--f7-panelPushBorderRadius);
+      }
+    }
+    &.panel-reveal.panel-right,
+    &.panel-push.panel-right {
+      transform: scale(var(--f7-panelPushScale, 1));
+      transform-origin: calc(var(--f7-panel-left-width, var(--f7-panel-width)) - 50vw) center;
+      border-top-right-radius: var(--f7-panelPushBorderRadius);
+      .view {
+        border-top-right-radius: var(--f7-panelPushBorderRadius);
+      }
+    }
+    &.panel-cover.panel-left {
+      transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0px);
+    }
+    &.panel-cover.panel-right {
+      transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0px);
+    }
+  }
+}
+html.with-modal-popup-push-closing .framework7-root > .panel-in,
+html.with-modal-sheet-push-closing .framework7-root > .panel-in {
+  transition-duration: var(--f7-panelPushTransitionDuration);
+  transition-timing-function: var(--f7-panelPushTransitionTimingFunction);
+  &.panel-reveal.panel-left,
+  &.panel-push.panel-left {
+    transform-origin: 50vw center;
+  }
+  &.panel-reveal.panel-right,
+  &.panel-push.panel-right {
+    transform-origin: calc(var(--f7-panel-right-width, var(--f7-panel-width)) - 50vw) center;
+  }
+}
+
+.if-ios-theme({
+  @import './panel-ios.less';
+});
+.if-md-theme({
+  @import './panel-md.less';
+});

package/components/panel/resizable-panel.js

@@ -0,0 +1,160 @@
+import $ from '../../shared/dom7.js';
+import { extend, nextFrame } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+function resizablePanel(panel) {
+  const app = panel.app;
+  const support = getSupport();
+  if (panel.resizableInitialized) return;
+  extend(panel, {
+    resizable: true,
+    resizableWidth: null,
+    resizableInitialized: true
+  });
+  const $htmlEl = $('html');
+  const {
+    $el,
+    $backdropEl,
+    side,
+    effect
+  } = panel;
+  if (!$el) return;
+  let isTouched;
+  let isMoved;
+  const touchesStart = {};
+  let touchesDiff;
+  let panelWidth;
+  let $viewEl;
+  let panelMinWidth;
+  let panelMaxWidth;
+  let visibleByBreakpoint;
+  const isPushingPanel = effect !== 'cover' && effect !== 'floating';
+  function transformCSSWidth(v) {
+    if (!v) return null;
+    if (v.indexOf('%') >= 0 || v.indexOf('vw') >= 0) {
+      return parseInt(v, 10) / 100 * app.width;
+    }
+    const newV = parseInt(v, 10);
+    if (Number.isNaN(newV)) return null;
+    return newV;
+  }
+  function isResizable() {
+    return panel.resizable && $el.hasClass('panel-resizable');
+  }
+  function handleTouchStart(e) {
+    if (!isResizable()) return;
+    touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+    touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+    isMoved = false;
+    isTouched = true;
+    panelMinWidth = transformCSSWidth($el.css('min-width'));
+    panelMaxWidth = transformCSSWidth($el.css('max-width'));
+    visibleByBreakpoint = $el.hasClass('panel-in-breakpoint');
+  }
+  function handleTouchMove(e) {
+    if (!isTouched) return;
+    const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+    if (!isMoved) {
+      panelWidth = $el[0].offsetWidth;
+      $el.transition(0);
+      $el.addClass('panel-resizing');
+      $htmlEl.css('cursor', 'col-resize');
+      if (isPushingPanel || visibleByBreakpoint) {
+        $viewEl = $(panel.getViewEl());
+        if (panel.$containerEl && panel.$containerEl.hasClass('page')) {
+          $viewEl.add(panel.$containerEl.children('.page-content, .tabs, .fab'));
+        }
+      }
+      if (isPushingPanel && !visibleByBreakpoint) {
+        $backdropEl.transition(0);
+        $viewEl.transition(0);
+      }
+    }
+    isMoved = true;
+    e.preventDefault();
+    touchesDiff = pageX - touchesStart.x;
+    let newPanelWidth = side === 'left' ? panelWidth + touchesDiff : panelWidth - touchesDiff;
+    if (panelMinWidth && !Number.isNaN(panelMinWidth)) {
+      newPanelWidth = Math.max(newPanelWidth, panelMinWidth);
+    }
+    if (panelMaxWidth && !Number.isNaN(panelMaxWidth)) {
+      newPanelWidth = Math.min(newPanelWidth, panelMaxWidth);
+    }
+    newPanelWidth = Math.min(Math.max(newPanelWidth, 0), app.width);
+    panel.resizableWidth = newPanelWidth;
+    $el[0].style.width = `${newPanelWidth}px`;
+    if (isPushingPanel && !visibleByBreakpoint) {
+      if ($viewEl) {
+        $viewEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);
+      }
+      if ($backdropEl) {
+        $backdropEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);
+      }
+    } else if (visibleByBreakpoint && $viewEl) {
+      $viewEl.css(`margin-${side}`, `${newPanelWidth}px`);
+    }
+    $el.trigger('panel:resize', newPanelWidth);
+    panel.emit('local::resize panelResize', panel, newPanelWidth);
+  }
+  function handleTouchEnd() {
+    $('html').css('cursor', '');
+    if (!isTouched || !isMoved) {
+      isTouched = false;
+      isMoved = false;
+      return;
+    }
+    isTouched = false;
+    isMoved = false;
+    $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);
+    $el[0].style.width = '';
+    if (isPushingPanel && !visibleByBreakpoint) {
+      $viewEl.transform('');
+      $backdropEl.transform('');
+    }
+    $el.removeClass('panel-resizing');
+    nextFrame(() => {
+      $el.transition('');
+      if (isPushingPanel) {
+        $backdropEl.transition('');
+        if ($viewEl) $viewEl.transition('');
+      }
+    });
+  }
+  function handleResize() {
+    if (!panel.opened || !panel.resizableWidth) return;
+    panelMinWidth = transformCSSWidth($el.css('min-width'));
+    panelMaxWidth = transformCSSWidth($el.css('max-width'));
+    if (panelMinWidth && !Number.isNaN(panelMinWidth) && panel.resizableWidth < panelMinWidth) {
+      panel.resizableWidth = Math.max(panel.resizableWidth, panelMinWidth);
+    }
+    if (panelMaxWidth && !Number.isNaN(panelMaxWidth) && panel.resizableWidth > panelMaxWidth) {
+      panel.resizableWidth = Math.min(panel.resizableWidth, panelMaxWidth);
+    }
+    panel.resizableWidth = Math.min(Math.max(panel.resizableWidth, 0), app.width);
+    $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);
+  }
+  if (panel.$el.find('.panel-resize-handler').length === 0) {
+    panel.$el.append('<div class="panel-resize-handler"></div>');
+  }
+  panel.$resizeHandlerEl = panel.$el.children('.panel-resize-handler');
+  $el.addClass('panel-resizable');
+
+  // Add Events
+  const passive = support.passiveListener ? {
+    passive: true
+  } : false;
+  panel.$el.on(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive);
+  app.on('touchmove:active', handleTouchMove);
+  app.on('touchend:passive', handleTouchEnd);
+  app.on('resize', handleResize);
+  panel.on('beforeOpen', handleResize);
+  panel.once('panelDestroy', () => {
+    $el.removeClass('panel-resizable');
+    panel.$resizeHandlerEl.remove();
+    panel.$el.off(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive);
+    app.off('touchmove:active', handleTouchMove);
+    app.off('touchend:passive', handleTouchEnd);
+    app.off('resize', handleResize);
+    panel.off('beforeOpen', handleResize);
+  });
+}
+export default resizablePanel;