Generalize tree topic guiderails to any level

pradoslaw · Dec 16, 2024 · 572bd03 · 572bd03
1 parent 9c11a01
commit 572bd03
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 55 deletions.
diff --git a/resources/js/components/forum/post-guiderail.vue b/resources/js/components/forum/post-guiderail.vue
@@ -1,10 +1,9 @@
 <template>
   <div
     v-for="cssClass in parentGuiderails"
-    class="position-absolute post-guiderail post-guiderail-of-parent" :class="cssClass"
+    class="position-absolute post-guiderail" :class="cssClass"
   />
-  <div class="position-absolute post-guiderail post-guiderail-to-sibling" v-if="hasNextSibling"/>
-  <div class="position-absolute post-guiderail post-guiderail-to-parent">
+  <div class="position-absolute post-guiderail post-guiderail-to-parent" v-if="linksToParent">
     <div class="position-absolute post-guiderail-button d-flex justify-content-center align-items-center cursor-pointer" @click="toggle" style="font-size:0.7em;">
       <vue-icon name="postGuiderailExpanded" v-if="expanded"/>
       <vue-icon name="postGuiderailCollapsed" v-else/>
@@ -21,8 +20,8 @@ export default {
   emits: ['toggle'],
   props: {
     expanded: {required: true, type: Boolean},
-    hasNextSibling: {required: false, default: false},
     parentLevels: {required: false, type: Array},
+    linksToParent: {required: false, type: Boolean},
   },
   methods: {
     toggle(): void {
@@ -32,10 +31,19 @@ export default {
   computed: {
     parentGuiderails(): number[] {
       return this.$props.parentLevels.map(parentLevel => {
-        if (parentLevel === 1) {
-          return 'post-guiderail-of-parent-1';
-        }
-        return 'post-guiderail-of-parent-2';
+        const parentLevels = {
+          0: 'post-guiderail-to-sibling',
+          1: 'post-guiderail-of-parent post-guiderail-of-parent-1',
+          2: 'post-guiderail-of-parent post-guiderail-of-parent-2',
+          3: 'post-guiderail-of-parent post-guiderail-of-parent-3',
+          4: 'post-guiderail-of-parent post-guiderail-of-parent-4',
+          5: 'post-guiderail-of-parent post-guiderail-of-parent-5',
+          6: 'post-guiderail-of-parent post-guiderail-of-parent-6',
+          7: 'post-guiderail-of-parent post-guiderail-of-parent-7',
+          8: 'post-guiderail-of-parent post-guiderail-of-parent-8',
+          9: 'post-guiderail-of-parent post-guiderail-of-parent-9',
+        };
+        return parentLevels[parentLevel];
       });
     },
   },

diff --git a/resources/js/components/forum/post.vue b/resources/js/components/forum/post.vue
@@ -2,7 +2,7 @@
   <div class="card card-post card-post-folded neon-post-folded" :class="postIndentCssClasses" v-if="postFolded">
     <vue-post-guiderail
       v-if="guiderailVisible"
-      :has-next-sibling="hasNextSibling"
+      :links-to-parent="linksToParent"
       :parent-levels="parentsWithSiblings"
       :expanded="postFolded"
       @toggle="guiderailToggle"
@@ -21,7 +21,7 @@
        ]">
     <vue-post-guiderail
       v-if="guiderailVisible"
-      :has-next-sibling="hasNextSibling"
+      :links-to-parent="linksToParent"
       :parent-levels="parentsWithSiblings"
       :expanded="postFolded"
       @toggle="guiderailToggle"
@@ -528,9 +528,6 @@ export default {
     ...mapGetters('user', ['isAuthorized']),
     ...mapGetters('posts', ['posts']),
     ...mapGetters('topics', ['topic', 'is_mode_tree', 'is_mode_linear']),
-    hasNextSibling(): boolean {
-      return this.$props.treeItem.hasNextSibling;
-    },
     postIndentCssClasses(): string[] {
       if (!this.$props.treeItem) return [];
       const level = this.$props.treeItem.nestLevel;
@@ -550,19 +547,21 @@ export default {
       return ['indent', 'indent-12'];
     },
     guiderailVisible(): boolean {
-      if (!this.$props.treeItem) {
-        return false;
-      }
-      return this.$props.treeItem.nestLevel >= 2;
+      return !!this.$props.treeItem;
+    },
+    linksToParent(): boolean {
+      return this.$props.treeItem.nestLevel > 1;
     },
     parentsWithSiblings(): number[] {
-      const parentsWithSiblings = [];
-      const level = this.$props.treeItem.nestLevel;
-      if (level > 2 && store.getters['posts/parentPostHasNextSibling'](this.$props.post, 1)) {
-        parentsWithSiblings.push(1);
-      }
-      if (level > 3 && store.getters['posts/parentPostHasNextSibling'](this.$props.post, 2)) {
-        parentsWithSiblings.push(2);
+      return this.parentLevelsWithSiblings
+        .map(parentLevel => this.$props.treeItem.nestLevel - parentLevel)
+        .filter(nestLevel => nestLevel > 1)
+        .map(nestLevel => this.$props.treeItem.nestLevel - nestLevel);
+    },
+    parentLevelsWithSiblings(): number[] {
+      const parentsWithSiblings = store.getters['posts/parentLevelsWithSiblings'](this.$props.post);
+      if (this.$props.treeItem.hasNextSibling) {
+        parentsWithSiblings.push(0);
       }
       return parentsWithSiblings;
     },

diff --git a/resources/js/store/modules/posts.ts b/resources/js/store/modules/posts.ts
@@ -42,38 +42,21 @@ const getters = {
   exists: state => (id: number) => id in state.data,
   currentPage: state => state.current_page,
   totalPages: state => state.last_page,
-  parentPostHasNextSibling: (state, getters) => (post: Post, parentLevel: number): boolean => {
-    if (parentLevel === 1) {
-      return getters._directParentPostHasNextSibling(post);
-    }
-    if (parentLevel === 2) {
-      return getters._grandParentPostHasNextSibling(post);
-    }
-    return false;
-  },
-  _directParentPostHasNextSibling: (state, getters) => (post: Post): boolean => {
-    if (post.parentPostId === null) {
-      return false;
-    }
-    const parentPost: TreePost = getters.treeTopicPostsMap.get(post.parentPostId);
-    if (parentPost.post.parentPostId === null) {
-      return false;
-    }
-    return parentPost.treeItem.hasNextSibling;
-  },
-  _grandParentPostHasNextSibling: (state, getters) => (post: Post): boolean => {
-    if (post.parentPostId === null) {
-      return false;
-    }
-    const parentPost: TreePost = getters.treeTopicPostsMap.get(post.parentPostId);
-    if (parentPost.post.parentPostId === null) {
-      return false;
-    }
-    const grandParentPost: TreePost = getters.treeTopicPostsMap.get(parentPost.post.parentPostId);
-    if (grandParentPost.post.parentPostId === null) {
-      return false;
+  parentLevelsWithSiblings: (state, getters) => (post: Post): number[] => {
+    const parentLevels: number[] = [];
+    let current: Post = post;
+    let level = 1;
+    while (true) {
+      if (current.parentPostId === null) {
+        return parentLevels;
+      }
+      const parentPost: TreePost = getters.treeTopicPostsMap.get(current.parentPostId);
+      if (parentPost.treeItem.hasNextSibling) {
+        parentLevels.push(level);
+      }
+      current = parentPost.post;
+      ++level;
     }
-    return grandParentPost.treeItem.hasNextSibling;
   },
 };
 

diff --git a/resources/sass/components/forum/_tree_topic.scss b/resources/sass/components/forum/_tree_topic.scss
@@ -69,4 +69,11 @@ $post-border-width:          1px; // change to 0px in modern look&feel
 
   &.post-guiderail-of-parent-1 { left: -($guiderail-post-left-offset + $indent-width * 1); }
   &.post-guiderail-of-parent-2 { left: -($guiderail-post-left-offset + $indent-width * 2); }
+  &.post-guiderail-of-parent-3 { left: -($guiderail-post-left-offset + $indent-width * 3); }
+  &.post-guiderail-of-parent-4 { left: -($guiderail-post-left-offset + $indent-width * 4); }
+  &.post-guiderail-of-parent-5 { left: -($guiderail-post-left-offset + $indent-width * 5); }
+  &.post-guiderail-of-parent-6 { left: -($guiderail-post-left-offset + $indent-width * 6); }
+  &.post-guiderail-of-parent-7 { left: -($guiderail-post-left-offset + $indent-width * 7); }
+  &.post-guiderail-of-parent-8 { left: -($guiderail-post-left-offset + $indent-width * 8); }
+  &.post-guiderail-of-parent-9 { left: -($guiderail-post-left-offset + $indent-width * 9); }
 }