Storyblok Raises $80M Series C - Read News

What’s the True Total Price of Enterprise CMS? Find out here.

Skip to main content

How can I open my custom field type in full screen?

Each custom field type is sandboxed in an iframe. To still allow you to open overlays or similar full screen behaviors you can use the following setup, which will open your custom field type in an overlay prepared by us.

<template>
  <div>
    <div v-show="!modalIsOpen">
      Custom field is in sidebar / not in modal
      <button @click=openModal>Open</button>
    </div>
    <div v-if="modalIsOpen">
      Custom field is in not in sidebar but in a modal
      <button @click=closeModal>Close</button>
    </div>
  </div>
</template>

<script>
export default {
  mixins: [window.Storyblok.plugin],
  data() {
    return {
      modalIsOpen: false
    }
  },
  methods: {
    initWith() {
      return {
        // needs to be equal to your storyblok plugin name
        plugin: 'my-plugin-name'
      }
    },
    pluginCreated() {
      // eslint-disable-next-line
      console.log('plugin:created')
    },
    openModal(){
      this.$emit('toggle-modal', true)
      this.modalIsOpen = true
    },
    closeModal(){
      this.$emit('toggle-modal', false)
      this.modalIsOpen = false
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}
</script>