zmp-vue/esm/components/photo-browser.js

Build full featured iOS & Android apps using ZMP & Vue

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { watch, onMounted, onBeforeUnmount } from 'vue';
import { extend } from '../shared/utils';
import { zmpready, zmp } from '../shared/zmp';
export default {
  name: 'zmp-photo-browser',
  props: {
    init: {
      type: Boolean,
      default: true
    },
    params: Object,
    photos: 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
  },
  emits: ['photobrowser:open', 'photobrowser:close', 'photobrowser:opened', 'photobrowser:closed', 'photobrowser:swipetoclose'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;
    var zmpPhotoBrowser = null;

    var open = function open(index) {
      return zmpPhotoBrowser.open(index);
    };

    var close = function close() {
      return zmpPhotoBrowser.close();
    };

    var expositionToggle = function expositionToggle() {
      return zmpPhotoBrowser.expositionToggle();
    };

    var expositionEnable = function expositionEnable() {
      return zmpPhotoBrowser.expositionEnable();
    };

    var expositionDisable = function expositionDisable() {
      return zmpPhotoBrowser.expositionDisable();
    };

    watch(function () {
      return props.photos;
    }, function (value) {
      var pb = zmpPhotoBrowser;
      if (!pb) return;
      pb.params.photos = value;

      if (pb.opened && pb.swiper) {
        pb.swiper.update();
      }
    });
    onMounted(function () {
      if (!props.init) return;
      zmpready(function () {
        var paramsComputed;

        if (typeof props.params !== 'undefined') {
          paramsComputed = props.params;
        } else {
          paramsComputed = _extends({}, props);
          delete paramsComputed.params;
        }

        Object.keys(paramsComputed).forEach(function (param) {
          if (typeof paramsComputed[param] === 'undefined' || paramsComputed[param] === '') delete paramsComputed[param];
        });
        paramsComputed = extend({}, paramsComputed, {
          on: {
            open: function open() {
              emit('photobrowser:open');
            },
            close: function close() {
              emit('photobrowser:close');
            },
            opened: function opened() {
              emit('photobrowser:opened');
            },
            closed: function closed() {
              emit('photobrowser:closed');
            },
            swipeToClose: function swipeToClose() {
              emit('photobrowser:swipetoclose');
            }
          }
        });
        zmpPhotoBrowser = zmp.photoBrowser.create(paramsComputed);
      });
    });
    onBeforeUnmount(function () {
      if (zmpPhotoBrowser && zmpPhotoBrowser.destroy) zmpPhotoBrowser.destroy();
      zmpPhotoBrowser = null;
    });
    return {
      open: open,
      close: close,
      expositionToggle: expositionToggle,
      expositionEnable: expositionEnable,
      expositionDisable: expositionDisable
    };
  },
  render: function render() {
    return null;
  }
};