Pass breakpoints config to Previewer component

area17 · Aug 5, 2023 · 88ec426 · 88ec426
1 parent 5429a2f
commit 88ec426
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/frontend/js/components/Previewer.vue b/frontend/js/components/Previewer.vue
@@ -70,14 +70,15 @@
     components: {
       'a17-iframe': A17PreviewerFrame
     },
+    props: ['breakpointsConfig'],
     data: function () {
       return {
         loadedCurrent: false,
         slipScreen: false,
         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
@@ -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">