[Help] Cupertino-pane & ion-fab buttons

[Andranik0]

Hi @roman-rr,

I would like to add an ion-fab button (https://ionicframework.com/docs/api/fab) at the bottom of my Ionic application, but right above the cupertino-pane division, in order to let this button dynamically follow the pane's moves.

→ Is there a simple way to do so?

HTML

<ion-content>
 <ion-fab horizontal="end">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <div class="cupertino-pane">
    <h1>Header</h1>
    <p>Content</p>
  </div>
</ion-content>

CSS

.cupertino-pane{
    margin: 20px;
}

TS

  ngOnInit() {
    this.drawer = new CupertinoPane('.cupertino-pane', {
      onDrag: () => console.log('Drag event')
    });

    this.drawer.present();
  }

Thanks in advance for your help!

Andra

[roman-rr]

@Andranik0

In this example ion-fab following pane onDrag events.
You can complete behavior for other events with similar way.
Feel free to ask if you stuck on some moment.

<ion-content [fullscreen]="true">
  <ion-fab horizontal="end" vertical="bottom" id="fab-button">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <div class="cupertino-pane">
    <h1>Header</h1>
    <p>Content</p>
  </div>
</ion-content>

  public drawer: CupertinoPane;
  public fabButton: HTMLElement;
  constructor() {}

  ngOnInit() {
    this.fabButton = document.getElementById('fab-button');

    this.drawer = new CupertinoPane('.cupertino-pane', {
      onDrag: (ev) => {
        this.fabButton.style.bottom = `${window.innerHeight}px`;
        this.fabButton.style.transform = `translateY(${this.getPaneTransformY}px)`;
      }
    });
    this.drawer.present();
  }

  get getPaneTransformY():number {
    const translateYRegex = /\.*translateY\((.*)px\)/i;
    return parseFloat(translateYRegex.exec((<any>document.querySelector('.pane')).style.transform)[1]);
  }

[Andranik0]

Hi @roman-rr,

Thanks for your answer.

Unfortunately, it seems it does not fully take into account the elasticity/bounce property of the pane's moves, and thus leads to unexpected behaviors at the end of the drag.

Could it be possible to directly integrate the fabButton to the pane component in order to display it right above the "draggable" section (to get something similar to the already existing "close button" but outside the pane)? Or maybe fix the behavior described above regarding the use of onDrag?

Some screenshots to let you understand my issue:

(works while we drag: "bottom" of the fabButton is properly set)

(does not work once we stop dragging: "bottom" of the fabButton is set at the drag end and does not follow the animation / the pane's rebound)

TS code:

  drawer: CupertinoPane;
  fabButton: HTMLElement;

  constructor() {}

  ngOnInit() {
    this.fabButton = document.getElementById('fab-button');
    this.drawer = new CupertinoPane('.cuper', {
      onDrag: (ev) => {
        this.fabButton.style.bottom = `${window.innerHeight}px`;
        this.fabButton.style.transform = `translateY(${this.getPaneTransformY}px)`;
      },
      buttonClose: false,
      initialBreak: 'bottom',
      breaks: {
        top: { enabled: true, offset: 290 },
        middle: { enabled: false },
        bottom: { enabled: true, offset: 110 },
      },
    });

    this.drawer.present();
  }

  get getPaneTransformY(): number {
    const translateYRegex = /\.*translateY\((.*)px\)/i;
    return parseFloat(translateYRegex.exec((<any>document.querySelector('.pane')).style.transform)[1]);
  }

HTML code:

<ion-content [fullscreen]="true">
  <ion-fab id="fab-button" horizontal="end" vertical="bottom">
    <ion-fab-button size="small">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
  <div class="cuper">
    <h1>Header</h1>
    <p>Content</p>
  </div>
</ion-content>

Thanks a lot!

Andra

[roman-rr]

@Andranik0 Check out v.1.1.51
New property followerElement implemented.

Try it out:

  drawer: CupertinoPane;
  constructor() {}

  ngOnInit() {
    this.drawer = new CupertinoPane('.cuper', {
      followerElement: 'ion-fab',
      buttonClose: false,
      initialBreak: 'bottom',
      breaks: {
        top: { enabled: true, offset: 290 },
        middle: { enabled: false },
        bottom: { enabled: true, offset: 110 },
      },
    });

    this.drawer.present({animated: true});
  }

<ion-content [fullscreen]="true">
  <ion-fab horizontal="end" vertical="center">
    <ion-fab-button size="small">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <div class="cuper">
    <h1>Header</h1>
    <p>Content</p>
  </div>
</ion-content>

[Andranik0]

Hi @roman-rr,

It works perfectly! Good job!

Thanks,

Andra