From 88ec426ac4026a4b39effe2bc08534ae3ab562ec Mon Sep 17 00:00:00 2001
From: Florrie <florrie@area17.com>
Date: Fri, 23 Jun 2023 16:53:28 -0400
Subject: [PATCH] Pass breakpoints config to Previewer component

---
 frontend/js/components/Previewer.vue | 8 +++++---
 views/layouts/form.blade.php         | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/js/components/Previewer.vue b/frontend/js/components/Previewer.vue
index 99442af53a..c2269689a1 100755
--- a/frontend/js/components/Previewer.vue
+++ b/frontend/js/components/Previewer.vue
@@ -70,6 +70,7 @@
     components: {
       'a17-iframe': A17PreviewerFrame
     },
+    props: ['breakpointsConfig'],
     data: function () {
       return {
         loadedCurrent: false,
@@ -77,7 +78,7 @@
         activeBreakpoint: 1280,
         lastActiveBreakpoint: 1280,
         scrollPosition: 0,
-        breakpoints: [
+        breakpoints: this.breakpointsConfig || [
           {
             size: 1280,
             name: 'preview-desktop'
@@ -115,11 +116,12 @@
     methods: {
       open: function (previewId = 0) {
         const self = this
+        const desktopWidth = this.breakpoints.find(item => item.name === 'preview-desktop').size
 
         // reset previewer state
         this.loadedCurrent = false
-        this.activeBreakpoint = 1280
-        this.lastActiveBreakpoint = 1280
+        this.activeBreakpoint = desktopWidth || 1280
+        this.lastActiveBreakpoint = desktopWidth || 1280
 
         function initPreview () {
           if (self.$refs.overlay) self.$refs.overlay.open()
diff --git a/views/layouts/form.blade.php b/views/layouts/form.blade.php
index b8fd3001bf..3c4d1fdcae 100644
--- a/views/layouts/form.blade.php
+++ b/views/layouts/form.blade.php
@@ -155,7 +155,7 @@
     </a17-modal>
     <a17-editor v-if="editor" ref="editor"
                 bg-color="{{ config('twill.block_editor.background_color') ?? '#FFFFFF' }}"></a17-editor>
-    <a17-previewer ref="preview"></a17-previewer>
+    <a17-previewer ref="preview" :breakpoints-config="{{ json_encode(config('twill.preview.breakpoints')) }}"></a17-previewer>
     <a17-dialog ref="warningContentEditor" modal-title="{{ twillTrans('twill::lang.form.dialogs.delete.title') }}"
                 confirm-label="{{ twillTrans('twill::lang.form.dialogs.delete.confirm') }}">
         <p class="modal--tiny-title">