Popup component: delay popup from component?

1

I’m working on a image uploader / cropping tool. Currently i’m building the following flow:

  1. From a button callback, I set a event handler to catch the uploaded image and call my app method: f7app.methods.image_uploader(…). This function shows a action sheet to select camera roll or start camera.
  2. After the user has selected or made a picture, I launch a popup-component to edit/crop the image. Image url is forwarded through route context.
  3. From my edit popup-component ‘Done’ button, I emit an event with image data and close the popup.

This works, although I’m wondering if it is possible to navigate to a popup route, but prevent the popup from appearing immediately. In fact, would be nice if I can put my image_uploader method inside the component, so it is self contained.

2

Seems like it can be just moved to reusable function:

function imageUploader(f7) {
  // show actions
  f7.actions.create(...).open();
  // then show popup
  f7.popup.create(...).open();
  // ...
  return imageData;
}

import imageUploader from '...';

//...
const imageData = imageUploader(f7);
3

Thanks, that’s like the way I’m doing it right now. But was wondering if there is a nice way to put it in a reusable single file component. Just because single file components feel like a very great way to organize functional stuff :slight_smile:

I’ve built a qr/ean scanner (with interface overlay, using bitpay qrscanner) in a single file component as well, and that works very great. I emit a qr event with scan data when the scan is finished, and then close the popup.

4

Yes, why not? :slight_smile: I guess the component should contain the button(file input) + actions logic + popup then

5

Yes that’s what I’m trying to achieve. I’m not using a file input, but a plugin to capture from camera or camera roll. That is choosen in the action sheet. After the picture data is available, I open the popup with a cropping/editor tool.

Maybe I asked wrong. How can I navigate to a component, without immediately showing any visual view? First there should only be a action sheet (picture roll/camera), use plugin to get picture data, and then open popup with crop+edit tool.

Or maybe it is just easier to put it in a old school function :slight_smile:

6

It is impossible really to navigate to it, but i still don’t understand why or don’ get the issue.
If you put into custom component, then it should be something like:

<template>
  <button @click="uploadImage">Upload image</button>
</template>
<script>
return {
  methods: {
    uploadImage() {
      // same logic as in func with calling actions and popups, etc.
    }
  }
}
</script>

And such component can be registered as custom component https://framework7.io/docs/router-component.html#custom-components

7

Totally missed the custom components, great!! That seems to be what I meant to put my functionality in a reusable component. I have a page which contains several images which can be changed by clicking “Edit” buttons, and this way I can just include the component for each editable image.

I always thought of components only as things which can be used through routes. Never noticed the custom components.