feat: animation when moving template pages (monicahq/chandler#134)

monicahq · Jun 13, 2022 · 58e96e0 · 58e96e0
1 parent 83e622e
commit 58e96e0
Showing 1 changed file with 32 additions and 5 deletions.
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
@@ -1,4 +1,11 @@
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.flip-list-move {
+  transition: transform 0.5s;
+}
+.no-move {
+  transition: transform 0s;
+}
+</style>
 
 <template>
   <div>
@@ -26,10 +33,17 @@
 
     <!-- list of pages that can be deleted -->
     <draggable
-      :list="localPages"
+      v-model="localPages"
+      class="list-group"
       item-key="id"
-      :component-data="{ name: 'fade' }"
-      handle=".handle"
+      v-bind="dragOptions"
+      :component-data="{
+        tag: 'div',
+        type: 'transition-group',
+        name: !drag ? 'flip-list' : null,
+      }"
+      @start="drag = true"
+      @end="drag = false"
       @change="updatePosition">
       <template #item="{ element }">
         <div
@@ -163,6 +177,7 @@ export default {
 
   data() {
     return {
+      drag: false,
       loadingState: '',
       createPageModalShown: false,
       renamePageModalShownId: 0,
@@ -177,6 +192,17 @@ export default {
     };
   },
 
+  computed: {
+    dragOptions() {
+      return {
+        animation: 200,
+        group: 'description',
+        disabled: false,
+        ghostClass: 'ghost',
+      };
+    },
+  },
+
   mounted() {
     this.localPages = this.data.template_pages;
   },
@@ -255,7 +281,8 @@ export default {
 
     updatePosition(event) {
       // the event object comes from the draggable component
-      this.form.position = event.moved.newIndex + 1;
+      // no idea why we need to +2 but otherwise it doesn't work
+      this.form.position = event.moved.newIndex + 2;
 
       axios
         .post(event.moved.element.url.order, this.form)