From 134b73af293a0bb43d091e9b004eac5af7737820 Mon Sep 17 00:00:00 2001
From: szymon <szymon@magico.pl>
Date: Thu, 6 Apr 2023 11:05:28 +0200
Subject: [PATCH] pagebuilder fullscreen mode

---
 src/components/MagicoModal.vue        |  27 +++--
 src/components/MagicoPagebuilder.vue  | 141 +++++++++++++++-----------
 src/components/PagebuilderContent.vue |  36 +++++--
 src/components/PagebuilderSection.vue |  12 +--
 src/components/grid.js                |  24 ++---
 src/components/plugin/SectionHtml.vue |   4 +-
 src/components/tinymce/config.js      |   2 +-
 7 files changed, 153 insertions(+), 93 deletions(-)

diff --git a/src/components/MagicoModal.vue b/src/components/MagicoModal.vue
index 5ab04e8..39625c4 100644
--- a/src/components/MagicoModal.vue
+++ b/src/components/MagicoModal.vue
@@ -24,20 +24,23 @@ export default {
         }
     },
     mounted() {
+        document.body.append(document.getElementById(this.id));
         this.modal = new Modal(document.getElementById(this.id))
         let vm = this;
         document.getElementById(this.id).addEventListener('hidden.bs.modal', function () {
             vm.triggerModal(false);
         })
-        this.triggerModal(this.value);
+        this.triggerModal(this.value, false);
     },
     methods: {
-        triggerModal: function (value) {
+        triggerModal: function (value, emit = true) {
             if (value == true) {
                 this.modal.show();
             } else {
                 this.modal.hide()
-                this.$emit('hide');
+                if (emit) {
+                    this.$emit('hide');
+                }
             }
             this.$emit('input', value);
         }
@@ -47,8 +50,20 @@ export default {
             this.triggerModal(this.value);
         }
     },
-    destroy() {
-        this.modal.dispose()
+    onDestroy: function () {
+        document.getElementById(this.id).remove();
     }
 }
-</script>
\ No newline at end of file
+</script>
+<style>
+.modal-xxl {
+    width: 100% !important;
+    max-width: 100% !important;
+    padding: 0 10px !important;
+}
+.modal-xlg {
+    width: 75% !important;
+    max-width: 75% !important;
+    padding: 0 10px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/MagicoPagebuilder.vue b/src/components/MagicoPagebuilder.vue
index 50c1ef0..9862946 100644
--- a/src/components/MagicoPagebuilder.vue
+++ b/src/components/MagicoPagebuilder.vue
@@ -1,67 +1,75 @@
 <template>
-  <section class="content card-body " id="pagebuilder">
-    <div class="d-flex justify-content-end">
+  <section :class="{ 'pagebuilder-fullscreen': fullscreen }" class="content card-body " id="pagebuilder">
+    <div class="pagebuilder-body">
 
-      <button @click.prevent="modalLoad = !modalLoad; pageType = { name: null }" title="Wczytaj szablon do schowka"
-        class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">find_replace</span></button>
-      <button @click.prevent="modalSave = !modalSave; pageType = { name: null }" title="Zapisz szablon do schowka"
-        class="btn btn-outline-success btn-icon-sm"><span class="material-icons-outlined">save</span></button>
 
-      <!-- <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
+      <div class="d-flex justify-content-between">
+        <button @click.prevent="fullscreen = !fullscreen" title="Tryb pełnoekranowy"
+          class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">fullscreen</span></button>
+        <div>
+
+          <button @click.prevent="modalLoad = !modalLoad; pageType = { name: null }" title="Wczytaj szablon do schowka"
+            class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">find_replace</span></button>
+          <button @click.prevent="modalSave = !modalSave; pageType = { name: null }" title="Zapisz szablon do schowka"
+            class="btn btn-outline-success btn-icon-sm"><span class="material-icons-outlined">save</span></button>
+        </div>
+
+        <!-- <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
         układ z innej strony</button> -->
-    </div>
-
-    <draggable :options="{ handle: '.box-move' }" v-model="comps" @start="drag = true" @end="drag = false; onChange()">
-      <div v-for="(item, index) in comps" :key="index">
-        <PagebuilderSection :value="item" v-on:deleteSection="deleteSection" v-on:copy="copySection" @change="onChange">
-        </PagebuilderSection>
       </div>
-    </draggable>
 
-    <b-modal class_other="modal-xl" v-model="modalSave" title="Zapisz szablon do schowka"
-      v-on:onClose="modalSave = false">
-      <div slot="modal-title"><span></span></div>
-      <div>
-        <PagebuilderTemplateSave v-model="pageType" :szablon="value">
-        </PagebuilderTemplateSave>
+      <draggable :options="{ handle: '.box-move' }" v-model="comps" @start="drag = true" @end="drag = false; onChange()">
+        <div v-for="(item, index) in comps" :key="index">
+          <PagebuilderSection :value="item" v-on:deleteSection="deleteSection" v-on:copy="copySection" @change="onChange">
+          </PagebuilderSection>
+        </div>
+      </draggable>
+
+      <b-modal class_other="modal-xl" v-model="modalSave" title="Zapisz szablon do schowka"
+        v-on:onClose="modalSave = false">
+        <div slot="modal-title"><span></span></div>
+        <div>
+          <PagebuilderTemplateSave v-model="pageType" :szablon="value">
+          </PagebuilderTemplateSave>
+        </div>
+        <div><button @click.prevent="modalSaveSave" title="Zapisz do schowka" class="btn btn-success mr-1"
+            :disabled="!pageType.name">Zapisz do schowka </button></div>
+      </b-modal>
+
+      <b-modal class_other="modal-xl" v-model="modalLoad" title="Wczytaj szablon ze schowka"
+        v-on:onClose="modalLoad = false">
+        <div>
+          <PagebuilderTemplateLoad v-model="pageType" @input="modalLoadClick"></PagebuilderTemplateLoad>
+        </div>
+
+      </b-modal>
+
+      <b-modal class_other="modal-xl" v-model="modalCopy" v-on:onClose="modalCopy = false">
+        <div slot="modal-title"><span>Zapisz lub Kopiuj układ w schowku</span></div>
+        <div>
+          <PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
+        </div>
+        <div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
+            @click.prevent="changeBody">Skopiuj układ i treść </button></div>
+      </b-modal>
+
+      <b-modal class_other="modal-xl" v-model="modalAddSection" title=" Dodaj sekcję"
+        v-on:onClose="modalAddSection = false" hide-footer>
+        <div slot="modal-title"><span>
+
+          </span></div>
+        <div>
+          <DropdownSectionGrid v-on:input="addSection" v-model="optionx">
+          </DropdownSectionGrid>
+        </div>
+        <div slot="modal-footer"></div>
+      </b-modal>
+      <div class="text-center">
+        <!-- <textarea style="display:none" :name="namex">{{ comps }}</textarea> --><button
+          class="btn btn-block btn-primary mt-4" @click.prevent="modalAddSection = !modalAddSection; optionx = false">
+          Dodaj sekcję
+        </button>
       </div>
-      <div><button @click.prevent="modalSaveSave" title="Zapisz do schowka" class="btn btn-success mr-1"
-          :disabled="!pageType.name">Zapisz do schowka </button></div>
-    </b-modal>
-
-    <b-modal class_other="modal-xl" v-model="modalLoad" title="Wczytaj szablon ze schowka"
-      v-on:onClose="modalLoad = false">
-      <div>
-        <PagebuilderTemplateLoad v-model="pageType" @input="modalLoadClick"></PagebuilderTemplateLoad>
-      </div>
-    
-    </b-modal>
-
-    <b-modal class_other="modal-xl" v-model="modalCopy" v-on:onClose="modalCopy = false">
-      <div slot="modal-title"><span>Zapisz lub Kopiuj układ w schowku</span></div>
-      <div>
-        <PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
-      </div>
-      <div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
-          @click.prevent="changeBody">Skopiuj układ i treść </button></div>
-    </b-modal>
-
-    <b-modal class_other="modal-xl" v-model="modalAddSection" title=" Dodaj sekcję"
-      v-on:onClose="modalAddSection = false" hide-footer>
-      <div slot="modal-title"><span>
-
-        </span></div>
-      <div>
-        <DropdownSectionGrid v-on:input="addSection" v-model="optionx">
-        </DropdownSectionGrid>
-      </div>
-      <div slot="modal-footer"></div>
-    </b-modal>
-    <div class="text-center">
-      <!-- <textarea style="display:none" :name="namex">{{ comps }}</textarea> --><button
-        class="btn btn-block btn-primary mt-4" @click.prevent="modalAddSection = !modalAddSection; optionx = false">
-        Dodaj sekcję
-      </button>
     </div>
   </section>
 </template>
@@ -87,6 +95,7 @@ export default {
   },
   data: function () {
     return {
+      fullscreen: false,
       grid: grid,
       namex: 'body', //podmieniane przez name
       drag: false,
@@ -212,4 +221,22 @@ a {
 #pagebuilder {
   background-color: #f5f5f5;
 }
+
+.pagebuilder-fullscreen {
+  position: fixed;
+  top: 10px;
+  width: 80%;
+  left: 10%;
+  right: 10%;
+  min-height: 100vh;
+  z-index: 100;
+  overflow-y: auto;
+}
+
+.pagebuilder-fullscreen .pagebuilder-body {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 95vh;
+  padding-right: 20px;
+}
 </style>
diff --git a/src/components/PagebuilderContent.vue b/src/components/PagebuilderContent.vue
index f6766f2..68ff484 100644
--- a/src/components/PagebuilderContent.vue
+++ b/src/components/PagebuilderContent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div style="min-height: 100px;" :class="value.name">
+    <div style="min-height: 100px;" class="pagebuilder-column" :class="value.name">
 
         <b-modal v-model="modalAddBox" class_other="modal-xl" v-on:onClose="modalAddBox = false" title="Dodaj widżet">
 
@@ -17,11 +17,11 @@
             <div>
                 <div class="from-group">
                     <label>Klasa kolumny</label>
-                    <input v-model="value.class" type="text" class="form-control">
+                    <input @input="onChange" v-model="value.class" type="text" class="form-control">
                 </div>
             </div>
-            <div slot="modal-footer"><button @click="modalColumnsSettings = false"
-                    class="btn btn-outline-secondary">Zapisz i zamknij</button></div>
+            <div slot="modal-footer"><button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">Zapisz
+                    i zamknij</button></div>
         </b-modal>
         <draggable :options="{ handle: '.box-move' }" v-model="value.items" @start="drag = true"
             @end="drag = false; onChange()" group="people">
@@ -32,10 +32,11 @@
                     v-model="value.items[index]" @input="onChange" @change="onChange"></component>
             </div>
         </draggable>
-        <div class="d-flex posistion-relative">
-            <div class="flex-fill mr-0 pr-0">
-                <button class="mb-3 w-100 btn btn-icon-sm btn-primary off_tooltip_off"
-                    @click.prevent="modalAddBox = !modalAddBox" title=" "> <i
+        <div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
+        <div class="posistion-relative " :class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'">
+            <div class="flex-fill mr-0 pr-0 ">
+                <button class=" w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
+                    @click.prevent="modalAddBox = !modalAddBox" title="Dodaj widget"> <i
                         class="material-icons-outlined">add_circle_outline</i></button>
             </div>
             <div class="ml-0 pl-0">
@@ -92,4 +93,21 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
+<style>
+.pagebuilder-column-hover {
+    display: none;
+}
+
+.pagebuilder-column-hover-padding {
+    padding: 17px;
+}
+
+.pagebuilder-column:hover .pagebuilder-column-hover {
+    display: flex;
+}
+
+.pagebuilder-column:hover .pagebuilder-column-hover-padding {
+    padding: 0px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/PagebuilderSection.vue b/src/components/PagebuilderSection.vue
index 3928444..a6325d0 100644
--- a/src/components/PagebuilderSection.vue
+++ b/src/components/PagebuilderSection.vue
@@ -10,23 +10,23 @@
 
 
         <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px;">
-            <a href="#" title="pilder_addsection_moveicon');?>" class="box-settings-icon box-move"><i
+            <a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"><i
                     class="material-icons-outlined">sort</i></a>
-            <a href="#" title="pagebuilder_addsection_duplicateicon" @click.prevent="copySection"
+            <a href="#" title="Duplikuj sekcje" @click.prevent="copySection"
                 class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a>
-            <a href="#" title="pagebuilder_addsection_settingsicon" @click.prevent="toggleSettings"
+            <a href="#" title="Ustawienia sekcji" @click.prevent="toggleSettings"
                 class="box-settings-icon box-settings text-secondary"><i
                     class="material-icons-outlined">settings</i></a>
-            <a href="#" title="pagebuilder_addsection_deleteicon" @click.prevent="deleteSection"
+            <a href="#" title="Usuń sekcje" @click.prevent="deleteSection"
                 class="box-settings-icon box-delete text-danger"><i class="material-icons-outlined">delete</i></a>
-            <b-modal v-model="show_settings" title="pagebuilder_addsection_settings_settings"
+            <b-modal v-model="show_settings" title="Ustawienia sekcji"
                 @onClose="ustawieniaSave()">
 
                 <div>
                     <div>
                         <div class="form-group mb-2">
                             <label class="w-100 col-form-label">
-                                pagebuilder_addsection_settings_cssclass
+                                Klasa sekcji
                             </label>
                             <input type="text" class="form-control" v-model="value.class">
                         </div>
diff --git a/src/components/grid.js b/src/components/grid.js
index c353433..b4a0697 100644
--- a/src/components/grid.js
+++ b/src/components/grid.js
@@ -1,14 +1,14 @@
 export default {
-    'col_1': { label: '1 kolumna  ', name: 'col_1', columns: [{ name: 'col-md-12', items: [] }] },
-    'col_2': { label: '2 kolumny po 6 ', name: 'col_2', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-6', items: [] }] },
-    'col_4_8': { label: '2 kolumny 2 i 8 ', name: 'col_4_8', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-8', items: [] }] },
-    'col_8_4': { label: '2 kolkumny 8 i 2 ', name: 'col_8_4', columns: [{ name: 'col-md-8', items: [] }, { name: 'col-md-4', items: [] }] },
-    'col_2_10': { label: '2 kolumny 2 i 10 ', name: 'col_2_10', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-10', items: [] }] },
-    'col_10_2': { label: '2 kolkumny 10 i 2 ', name: 'col_10_2', columns: [{ name: 'col-md-10', items: [] }, { name: 'col-md-2', items: [] }] },
-    'col_3': { label: '3 kolumny po 4 ', name: 'col_3', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }] },
-    'col_3_6_3': { label: '3 kolumny: 3 ,6, 3 ', name: 'col_3_6_3', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }] },
-    'col_6_3_3': { label: '3 kolumny: 6,3,3 ', name: 'col_6_3_3', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
-    'col_3_3_6': { label: '3 kolumny: 3,3,6 ', name: 'col_3_3_6', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }] },
-    'col_4': { label: '4 kolumny po 3 ', name: 'col_4', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
-    'col_6': { label: '6 kolumn po 2 ', name: 'col_6', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }] },
+    'col_1': { label: '1 kolumna  ', name: 'col_1', class: '', columns: [{ name: 'col-md-12', items: [] }] },
+    'col_2': { label: '2 kolumny po 6 ', name: 'col_2', class: '', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-6', items: [] }] },
+    'col_4_8': { label: '2 kolumny 2 i 8 ', name: 'col_4_8', class: '', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-8', items: [] }] },
+    'col_8_4': { label: '2 kolkumny 8 i 2 ', name: 'col_8_4', class: '', columns: [{ name: 'col-md-8', items: [] }, { name: 'col-md-4', items: [] }] },
+    'col_2_10': { label: '2 kolumny 2 i 10 ', name: 'col_2_10', class: '', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-10', items: [] }] },
+    'col_10_2': { label: '2 kolkumny 10 i 2 ', name: 'col_10_2', class: '', columns: [{ name: 'col-md-10', items: [] }, { name: 'col-md-2', items: [] }] },
+    'col_3': { label: '3 kolumny po 4 ', name: 'col_3', class: '', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }] },
+    'col_3_6_3': { label: '3 kolumny: 3 ,6, 3 ', name: 'col_3_6_3', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }] },
+    'col_6_3_3': { label: '3 kolumny: 6,3,3 ', name: 'col_6_3_3', class: '', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
+    'col_3_3_6': { label: '3 kolumny: 3,3,6 ', name: 'col_3_3_6', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }] },
+    'col_4': { label: '4 kolumny po 3 ', name: 'col_4', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
+    'col_6': { label: '6 kolumn po 2 ', name: 'col_6', class: '', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }] },
 }
\ No newline at end of file
diff --git a/src/components/plugin/SectionHtml.vue b/src/components/plugin/SectionHtml.vue
index 7e6763b..9516c01 100644
--- a/src/components/plugin/SectionHtml.vue
+++ b/src/components/plugin/SectionHtml.vue
@@ -4,7 +4,7 @@
             <span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
                 class="font-weight-bold text-primary">{{ langs.label }}</span>
         </div>
-
+     
         <div class="col-sm-12 col-md-6 p-0 text-end">
             <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
                     class="material-icons-outlined">create</i></a>
@@ -12,7 +12,7 @@
                 v-on:hide="onCloseModal">
                 <div class="mb-4">
                     <div class="form-group">
-                        <textarea class="form-control" v-model="text"></textarea>
+                        <textarea rows="40" class="form-control" v-model="text"></textarea>
                     </div>
                 </div>
                 <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
diff --git a/src/components/tinymce/config.js b/src/components/tinymce/config.js
index 9ba6b38..ff15ec9 100644
--- a/src/components/tinymce/config.js
+++ b/src/components/tinymce/config.js
@@ -106,7 +106,7 @@ export default {
     valid_styles: {
         '*': 'display, margin, float, margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom, text-decoration, border,font-size,color,background,background-color,line-height,text-align,list-style-type, border-radius',
     },
-    plugins: ['advlist', 'lists', 'link',  'print', 'hr',  'code', 'table', 'contextmenu', 'emoticons', 'paste', 'textcolor', 'textpattern'],
+    plugins: ['advlist', 'lists', 'link',  'print', 'hr',  'code', 'table', 'contextmenu', 'emoticons', 'paste', 'textcolor', 'textpattern','autoresize'],
     removed_menuitems: 'newdocument',
     toolbarxx: "undo redo | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor",
     toolbar1: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media | forecolor backcolor',