Working on layout preview

Kirby 3 Issues 🐛
4

Sorry for bumping this old topic, but I’ve been searching for a long time so I thought I share my approach. In my case I wanted to reflect the selected background color for each layout in the layout’s toolbar.

panel.plugin('my/plugin', {
  components: {
    'k-layout-field': {
      extends: 'k-layout-field',
      watch: {
        value() {
          // Update the color as soon as the layout settings are changing.
          this.setColor()
        },
      },

      mounted() {
        // Also set the color on start.
        this.setColor()
      },

      methods: {
        setColor() {
          Array.from(this.$el.querySelectorAll('.k-layout')).forEach(
            (layout, index) => {
              // Get the layout settings (attrs) for each layout.
              const layoutAttrs = this.value[index].attrs

              let { color } = layoutAttrs
              // This is only necessary because the color field I'm using might
              // store the color as an array of colors.
              color = Array.isArray(color) ? color[0] : color

              // Set a css variable on the layout so we can style it
              // individually.
              if (color) {
                layout.style.setProperty('--layout-attrs-color', color)
              } else {
                layout.style.removeProperty('--layout-attrs-color')
              }
            }
          )
        },
      },
    },
  },
})


.k-layout-toolbar {
  background-color: var(--layout-attrs-color);
}
2 Likes