framework7-vue/components/photo-browser.js

Build full featured iOS & Android apps using Framework7 & Vue

import { watch, onMounted, onBeforeUnmount } from 'vue';
import { extend } from '../shared/utils.js';
import { f7ready, f7 } from '../shared/f7.js';
export default {
  name: 'f7-photo-browser',
  props: {
    init: {
      type: Boolean,
      default: true
    },
    params: Object,
    photos: Array,
    thumbs: Array,
    exposition: {
      type: Boolean,
      default: true
    },
    expositionHideCaptions: {
      type: Boolean,
      default: false
    },
    type: {
      type: String
    },
    navbar: {
      type: Boolean,
      default: true
    },
    toolbar: {
      type: Boolean,
      default: true
    },
    theme: {
      type: String
    },
    captionsTheme: {
      type: String
    },
    iconsColor: {
      type: String
    },
    swipeToClose: {
      type: Boolean,
      default: true
    },
    pageBackLinkText: {
      type: String,
      default: undefined
    },
    popupCloseLinkText: {
      type: String,
      default: undefined
    },
    navbarOfText: {
      type: String,
      default: undefined
    },
    navbarShowCount: {
      type: Boolean,
      default: undefined
    },
    swiper: {
      type: Object
    },
    url: {
      type: String
    },
    routableModals: {
      type: Boolean,
      default: false
    },
    virtualSlides: {
      type: Boolean,
      default: true
    },
    view: [String, Object],
    renderNavbar: Function,
    renderToolbar: Function,
    renderCaption: Function,
    renderObject: Function,
    renderLazyPhoto: Function,
    renderPhoto: Function,
    renderPage: Function,
    renderPopup: Function,
    renderStandalone: Function,
    renderThumb: Function
  },
  emits: ['photobrowser:open', 'photobrowser:close', 'photobrowser:opened', 'photobrowser:closed', 'photobrowser:swipetoclose'],
  setup(props, {
    emit
  }) {
    let f7PhotoBrowser = null;
    const open = index => {
      return f7PhotoBrowser.open(index);
    };
    const close = () => {
      return f7PhotoBrowser.close();
    };
    const expositionToggle = () => {
      return f7PhotoBrowser.expositionToggle();
    };
    const expositionEnable = () => {
      return f7PhotoBrowser.expositionEnable();
    };
    const expositionDisable = () => {
      return f7PhotoBrowser.expositionDisable();
    };
    watch(() => props.photos, value => {
      const pb = f7PhotoBrowser;
      if (!pb) return;
      pb.params.photos = value;
      if (pb.opened && pb.swiper) {
        pb.swiper.update();
      }
    });
    watch(() => props.thumbs, value => {
      const pb = f7PhotoBrowser;
      if (!pb) return;
      pb.params.thumbs = value;
      if (pb.opened && pb.thumbsSwiper) {
        pb.thumbsSwiper.update();
      }
    });
    onMounted(() => {
      if (!props.init) return;
      f7ready(() => {
        let paramsComputed;
        if (typeof props.params !== 'undefined') {
          paramsComputed = props.params;
        } else {
          paramsComputed = {
            ...props
          };
          delete paramsComputed.params;
        }
        Object.keys(paramsComputed).forEach(param => {
          if (typeof paramsComputed[param] === 'undefined' || paramsComputed[param] === '') delete paramsComputed[param];
        });
        paramsComputed = extend({}, paramsComputed, {
          on: {
            open() {
              emit('photobrowser:open');
            },
            close() {
              emit('photobrowser:close');
            },
            opened() {
              emit('photobrowser:opened');
            },
            closed() {
              emit('photobrowser:closed');
            },
            swipeToClose() {
              emit('photobrowser:swipetoclose');
            }
          }
        });
        f7PhotoBrowser = f7.photoBrowser.create(paramsComputed);
      });
    });
    onBeforeUnmount(() => {
      if (f7PhotoBrowser && f7PhotoBrowser.destroy) f7PhotoBrowser.destroy();
      f7PhotoBrowser = null;
    });
    return {
      open,
      close,
      expositionToggle,
      expositionEnable,
      expositionDisable
    };
  },
  render() {
    return null;
  }
};