Test component for carto debate

src/main/webapp/assets/js/views/cartoTest.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
+    <base-layout id="debate">
-    <base-layout id="cartodebates">
       <template v-slot:title>
         <h1>Debat sur carte</h1>
       </template>
@@ -9,15 +8,8 @@
 
       <div id="mainContainer">
         <div id="documentContainer">
-          <div
+          <div class="scroll-area" @scroll="hidePopup(); updateSpaghettis();" ref="documentContainer">
-            class="scroll-area"
+            <div class="wrap">
-            @scroll="
-              hidePopup();
-              updateSpaghettis();
-            "
-            ref="documentContainer"
-          >
-            <div v-if="leftDisplay === 'document'" class="wrap">
               <documented v-bind:value="$t('documentation.debate_document')">
                 <div id="mapContainer">
                   <img
@@ -42,27 +34,11 @@
                   </table>
                 </div>
               </documented>
-
-              <!-- <documented v-bind:value="$t('documentation.debate_bulets')">
-                <bullets-container
-                  @over-bullet="selectComment($event)"
-                  @click-bullet="
-                    selectComment($event);
-                    scrollToComment($event);
-                  "
-                  v-bind:displayable-comments="displayableComments"
-                  v-bind:comments="filteredComments"
-                >
-                </bullets-container>
-              </documented> -->
             </div>
           </div>
         </div>
 
-        <div
+        <div id="commentsContainer" v-bind:class="{ loading: mountedChildren < debate.commentsCount }"/>
-          id="commentsContainer"
-          v-bind:class="{ loading: mountedChildren < debate.commentsCount }"
-        >
           <div
             class="scroll-area"
             @scroll="
@@ -71,7 +47,23 @@
             "
             ref="commentsContainer"
           >
-            <comment-widget v-for="comment in filteredComments" v-bind:key="comment.id" v-bind:comment="comment"> </comment-widget>
+            <comment-widget 
+                v-for="comment in filteredComments"
+                v-show="displayableComments[comment.id]"
+                v-bind:displayable-comments="displayableComments"
+                v-bind:key="comment.id"
+                v-bind:comment="comment"
+                v-bind:search="search"
+                v-bind:hide-on-scroll="true"
+                @tag-edition="editTags($event)"
+                @selection-end="selectionHandler($event)"
+                @focus-me="selectComment($event); scrollToComment($event)"
+                @select-me="selectComment($event)"
+                @highlight-me="highlight($event)"
+                @mounted="mountChild($event)"
+                @report="reportComment($event)"
+                @collapse="collapseComment($event)">
+            </comment-widget>
           </div>
         </div>
       </div>
@@ -88,20 +80,17 @@
         {{ $t("argue").toLowerCase() }}
       </div>
 
-      <!-- ************************************************** -->
-
       <template v-slot:addons>
-        <comment-modal
+          <comment-modal
-          id="commentModalMap"
+              id="commentModal"
-          ref="commentModal"
+              ref="commentModal"
-          v-bind:comment="newComment"
+              v-bind:comment="newComment">
-        >
+          </comment-modal>
-        </comment-modal>
 
-        <tags-modal ref="tagModal"> </tags-modal>
+          <tags-modal ref="tagModal">
+          </tags-modal>
       </template>
     </base-layout>
-  </div>
 </template>
 <style scoped>
 table,
@@ -159,6 +148,7 @@ module.exports = {
 
   created() {
     this.initDataArray();
+    this.fetchData();
   },
   computed: {
     filteredComments() {
@@ -177,7 +167,382 @@ module.exports = {
       }
     },
   },
+  watch: {
+      '$route'() {
+          this.fetchData();
+          if (this.$route.query.comment) {
+              this.scrollToComment(this.$route.query.comment);
+          }
+      },
+      debate() {
+          this.displayableComments = {};
+          //This is to make all the properties reactive
+          this.debate.comments.forEach((comment) => Vue.set(this.displayableComments, comment.id, true));
+      },
+      leftDisplay(val) {
+          if (val === 'scraps') {
+              this.fetchScraps();
+          }
+          if (val !== 'document') {
+              this.updateSpaghettis();
+          }
+      },
+      // search(val) {
+      //     if (this.leftDisplay === 'scraps' || this.leftDisplay === 'theme') {
+      //         this.updateSpaghettis();
+      //     }
+      //     this.updateDisplayableComments();
+      // },
+      sortByPosition(val) {
+          if (val) {
+              this.debate.deepSortComments((a, b) => a.compareBoundaryPoints(Range.START_TO_START, b));
+          } else {
+              this.debate.deepSortComments((a, b) => (a.created > b.created) ? 1 : -1);
+          }
+          if (this.leftDisplay !== 'document') {
+              // Sort by disply position
+              this.$nextTick(() => {
+                  this.spaghettiData.forEach((s) => {
+                      s.comments.sort((a, b) => {
+                          let divA = document.getElementById("comment_" + a.id);
+                          let divB = document.getElementById("comment_" + b.id);
+                          return divA.offsetTop - divB.offsetTop
+                      });
+                  })
+              });
+              this.updateSpaghettis();
+          }
+      }
+  },
   methods: {
+    /******************* */
+    fetchData() {
+        ArenService.Debates.get({
+            id: 3,
+            onSuccess: (debate) => {
+                this.debate = debate;
+            },
+            onError: () => {
+                this.$router.push("/404");
+            }
+        });
+    },
+    fetchScraps() {
+        ArenService.Debates.getScraps({
+            id: this.debate.id,
+            onSuccess: (result) => {
+                if (result.length > 0) {
+                    let arrLength = result.map(r => r.comments.length).sort();
+                    let minLength = arrLength[arrLength.length - this.scrapsMagicNumber];
+                    result = result.filter(s => s.comments.length > 1 && s.comments.length >= minLength);
+                    result.forEach((s, i) => {
+                        s.id = i;
+                        s.comments = s.comments.map(cid => ArenService.Store.get(cid, Comment));
+                        let range = new Range();
+                        range.setPathStart(this.documentAsDom, s.startContainer, s.startOffset);
+                        range.setPathEnd(this.documentAsDom, s.endContainer, s.endOffset);
+                        s.selected = false;
+                        s.html = range.getHtml();
+                        s.spaghettis = [];
+                        s.comments.sort((a, b) => {
+                            let divA = document.getElementById("comment_" + a.id);
+                            let divB = document.getElementById("comment_" + b.id);
+                            return divA.offsetTop - divB.offsetTop
+                        });
+                    });
+                    this.scraps = result;
+                    this.updateSpaghettis();
+                }
+            }
+        });
+    },
+    fetchTheme() {
+        if (this.themes.findIndex((t) => t.html === this.themeInput) === -1) {
+            ArenService.Debates.getTheme({
+                id: this.debate.id,
+                query: {theme: this.themeInput},
+                onSuccess: (result) => {
+                    if (result.comments.length > 0) {
+                        result.comments = result.comments.map(cid => ArenService.Store.get(cid, Comment)).filter((c) => c !== -1);
+                        result.html = result.theme;
+                        result.spaghettis = [];
+                        result.selected = false;
+                        result.comments.sort((a, b) => {
+                            let divA = document.getElementById("comment_" + a.id);
+                            let divB = document.getElementById("comment_" + b.id);
+                            return divA.offsetTop - divB.offsetTop
+                        });
+                        this.themes.push(result);
+                        this.updateSpaghettis();
+                        this.themeInput = "";
+                    } else {
+                        this.themeHelper = this.$t('helper.theme_not_found');
+                        setTimeout(() => this.themeHelper = false, 3500);
+                    }
+                }
+            });
+        } else {
+            this.themeHelper = this.$t('helper.theme_already_set');
+            setTimeout(() => this.themeHelper = false, 3500);
+        }
+    },
+    updateDisplayableComments() {
+        let selectedScrapComments = false;
+        this.debate.comments.forEach((comment) => this.displayableComments[comment.id] = !selectedScrapComments || selectedScrapComments.includes(comment));
+    },
+    mountChild(comment) {
+        this.mountedChildren++;
+        console.table("Mounted Child", this.mountedChildren);
+        // If there is a commentId in the url, scroll to its position
+        if (this.$route.query.comment && this.mountedChildren >= this.debate.commentsCount) {
+            this.$nextTick(() => {
+                this.scrollToComment(this.$route.query.comment);
+            });
+        }
+        // When a new comment is created, scrool to its position
+        if (this.newComment && comment.owner.id === this.$root.user.id) {
+            this.$nextTick(() => {
+                this.scrollToComment(comment);
+                this.newComment = false;
+            });
+        }
+    },
+    hidePopup() {
+        this.selectedRange = false;
+    },
+    clearSelection( ) {
+        if (this.$route.query.comment) {
+            this.$router.replace({'query': null});
+        }
+        clearSelection( );
+    },
+    editTags(comment) {
+        this.$refs.tagModal.comment = comment;
+        let copy = [...comment.proposedTags];
+        this.$refs.tagModal.open((returnComment) => {
+            if (returnComment) {
+                ArenService.Comments.edit({
+                    data: returnComment,
+                    loading: false
+                });
+            } else {
+                comment.proposedTags = copy;
+            }
+        });
+    },
+    mailleSelectionHandler(comment,text){
+            if (this.newComment === false) {
+                this.newComment = new Comment( );
+            }
+            if (!this.$refs.commentModal.isOpen()) {
+                this.newComment.debate = this.debate;
+                this.newComment.hypostases = [];
+                this.newComment.tags = [];
+                this.newComment.parent = comment;
+                this.newComment.selection = text;
+                this.newComment.startContainer = 0;
+                this.newComment.endContainer = 0;
+                this.newComment.startOffset = 0;
+                this.newComment.endOffset = 0;
+            } else {
+                this.hidePopup();
+            }
+            this.createComment();
+    },
+    selectionHandler(comment) {
+        let selection = getSelection( );
+        let position = selection.anchorNode.compareDocumentPosition(selection.focusNode);
+        let backward = false;
+        if (!position && selection.anchorOffset > selection.focusOffset ||
+                position === Node.DOCUMENT_POSITION_PRECEDING)
+            backward = true;
+        if (!selection.isCollapsed) {
+            this.selectedRange = selection.getRangeAt(0);
+            this.selectedRange.affineToWord();
+            if (this.newComment === false) {
+                this.newComment = new Comment( );
+            }
+            if (!this.$refs.commentModal.isOpen()) {
+                this.newComment.debate = this.debate;
+                this.newComment.hypostases = [];
+                this.newComment.tags = [];
+                this.newComment.parent = comment;
+                this.newComment.selection = this.selectedRange.getHtml();
+                let container = this.getCommentContainer(this.newComment);
+                this.newComment.startContainer = container.getChildPathTo(this.selectedRange.startContainer);
+                this.newComment.endContainer = container.getChildPathTo(this.selectedRange.endContainer);
+                this.newComment.startOffset = this.selectedRange.startOffset;
+                this.newComment.endOffset = this.selectedRange.endOffset;
+
+                this.popupPositionFromRange(backward);
+            } else {
+                this.hidePopup();
+            }
+        }
+    },
+    popupPositionFromRange(backward) {
+        if (this.selectedRange) {
+            backward = backward === undefined ? this.$refs.arguePopup.classList.contains('top') : backward;
+            let top = mainContainer.offsetTop + 28;
+            let bottom = mainContainer.offsetHeight - window.scrollY + top - 58;
+            let rects = this.selectedRange.getClientRects( );
+            let start = rects[0];
+            let end = rects[rects.length - 1];
+            if (backward && start.y > top || (end.y + end.height) > bottom) {
+                this.popup.x = start.x + window.scrollX;
+                this.popup.y = start.y + window.scrollY;
+                this.$refs.arguePopup.classList.remove('bottom');
+                this.$refs.arguePopup.classList.add('top');
+            } else {
+                this.popup.x = end.x + end.width + window.scrollX;
+                this.popup.y = end.y + end.height + window.scrollY;
+                this.$refs.arguePopup.classList.remove('top');
+                this.$refs.arguePopup.classList.add('bottom');
+            }
+        }
+    },
+    getCommentContainer(comment) {
+        return comment.parent
+                ? document.querySelector("#comment_" + comment.parent.id + " .argumentation")
+                : this.$refs.documentDisplay;
+    },
+    createComment( ) {
+        if (!this.$root.user.is('USER')) {
+            this.$confirm({
+                title: this.$t('not_connected'),
+                message: this.$t('helper.not_connected'),
+                isInfo: true
+            });
+        } else {
+            this.$refs.commentModal.open((returnValue) => {
+                if (returnValue) {
+                    ArenService.Debates.addComment({
+                        id: this.newComment.debate.id,
+                        data: this.newComment,
+                        loading: false
+                    });
+                }
+            });
+            this.hidePopup( );
+            // For the selected text to stay
+            this.highlight(this.newComment);
+        }
+    },
+    selectComment(comment) {
+        let range = new Range( );
+        let container = comment.parent
+                ? document.querySelector("#comment_" + comment.parent.id + " .argumentation")
+                : this.$refs.documentDisplay;
+        range.setPathStart(container, comment.startContainer, comment.startOffset);
+        range.setPathEnd(container, comment.endContainer, comment.endOffset);
+        clearSelection( );
+        getSelection( ).addRange(range);
+        return range;
+    },
+    highlight(comment) {
+        if (!comment.parent) {
+            let range = this.selectComment(comment);
+            if (!inScrollView(this.$refs.documentContainer, range)) {
+                scrollCenter(this.$refs.documentContainer, range);
+            }
+        } else {
+            // Select after scroll is done because of lazy loading
+            this.scrollToComment(comment.parent, false, () => {
+                this.selectComment(comment);
+            });
+        }
+    },
+    scrollToComment(comment, focus = true, callback = () => {}) {
+        let commentDiv = document.getElementById("comment_" + (comment.id ? comment.id : comment));
+        let previousScroll = this.$refs.commentsContainer.scrollTop;
+        if (focus) {
+            commentDiv.querySelector(".focuser").focus( );
+        }
+        this.$refs.commentsContainer.scrollTop = previousScroll;
+        if (!inScrollView(this.$refs.commentsContainer, commentDiv)) {
+            scrollCenter(this.$refs.commentsContainer, commentDiv, callback);
+        } else {
+            callback();
+    }
+    },
+    scrollToScrap(scrapId, callback) {
+        let scrapDiv = document.getElementById("scrap_" + scrapId);
+        if (!inScrollView(this.$refs.documentContainer, scrapDiv)) {
+            scrollCenter(this.$refs.documentContainer, scrapDiv, callback);
+        } else {
+            callback();
+        }
+    },
+    spaghetti(scrap, scrapIndex, comment, commentIndex) {
+        let scrapId = "scrap_" + scrapIndex;
+        let commentId = "comment_" + comment.id;
+        let scrapDiv = document.getElementById(scrapId);
+        let commentDiv = document.getElementById(commentId);
+        // Check if a parent is collapsed, if so remove spaghettis
+        let answersDiv = commentDiv.closest(".answers-container");
+        while (answersDiv && commentDiv) {
+            let commentParentDiv = answersDiv.previousElementSibling;
+            if (commentDiv.offsetTop - commentParentDiv.offsetTop < (commentParentDiv.offsetHeight / 2)) {
+                commentDiv = false;
+            } else {
+                answersDiv = answersDiv.parentElement.closest(".answers-container");
+            }
+
+        }
+        // Only if the div exists and is visible
+        if (commentDiv && commentDiv.offsetParent !== null) {
+            let offsetStart = this.$refs.documentContainer.scrollTop;
+            let offsetEnd = this.$refs.commentsContainer.scrollTop;
+            let heightStart = Math.min(scrapDiv.offsetHeight * 0.5, scrap.comments.length * 2);
+            let deltaY = heightStart / scrap.comments.length;
+
+            return d3.linkHorizontal().x(d => d.x).y(d => d.y)({
+                source: {
+                    x: (scrapDiv.offsetLeft + scrapDiv.offsetWidth),
+                    y: (scrapDiv.offsetTop + commentIndex * deltaY + (scrapDiv.offsetHeight - heightStart) / 2) - offsetStart
+                },
+                target: {
+                    x: commentDiv.offsetLeft,
+                    y: (commentDiv.offsetTop + commentDiv.offsetHeight / 2) - offsetEnd
+                }
+            });
+        }
+        return "";
+    },
+    updateSpaghettis() {
+        if (this.leftDisplay !== 'document') {
+            this.$nextTick(() => {
+                this.spaghettiData.forEach((s, scrapIndex) => {
+                    s.spaghettis = s.comments.map((c, comIndex) => this.spaghetti(s, scrapIndex, c, comIndex));
+                    s.color = d3.interpolateRainbow(scrapIndex / this.spaghettiData.length);
+                });
+            });
+        }
+    },
+    clickSpaghetti() {
+        let arrIds = this.spaghettiOver.split('_');
+        this.spaghettiCountDown = 2;
+        this.scrollToScrap(arrIds[1], () => this.spaghettiCountDown--);
+        this.scrollToComment(arrIds[2], true, () => this.spaghettiCountDown--);
+    },
+    collapseComment(duration) {
+        let start = Date.now();
+        duration = duration + 500;
+        let interval = setInterval(() => {
+            this.updateSpaghettis();
+            if (Date.now() - start >= duration) {
+                clearInterval(interval);
+            }
+        }, 1000 / 60);
+    },
+    reportComment(comment) {
+        this.$confirm({
+            title: this.$t('report'),
+            message: this.$t('helper.report_details')
+        });
+    },
+    /********************* */
+
     initDataArray() {
       let arr = [];
       let col = Array(this.nbOfColumns).fill(false);
@@ -190,47 +555,9 @@ module.exports = {
       let row = this.arrayData[l].slice();
       row[c] = true;
       this.arrayData.splice(l, 1, row);
-      this.createComment();
+      this.mailleSelectionHandler(null,`Maille ligne ${l+1}, colonne ${c+1}`);
-    },
+    }
-    createComment() {
-      if (!this.$root.user.is("USER")) {
-        this.$confirm({
-          title: this.$t("not_connected"),
-          message: this.$t("helper.not_connected"),
-          isInfo: true,
-        });
-      } else {
-        this.$refs.commentModal.open((returnValue) => {
-          if (returnValue) {
-            // ArenService.Debates.addComment({
-            //   id: this.newComment.debate.id,
-            //   data: this.newComment,
-            //   loading: false,
-            // });
-          }
-        });
-        // this.hidePopup();
-      }
-    },
-    updateSpaghettis() {
-      if (this.leftDisplay !== "document") {
-        this.$nextTick(() => {
-          this.spaghettiData.forEach((s, scrapIndex) => {
-            s.spaghettis = s.comments.map((c, comIndex) =>
-              this.spaghetti(s, scrapIndex, c, comIndex)
-            );
-            s.color = d3.interpolateRainbow(
-              scrapIndex / this.spaghettiData.length
-            );
-          });
-        });
-      }
-    },
-    hidePopup() {
-      this.selectedRange = false;
-    },
   },
-
   components: {
     "tags-modal": vueLoader("components/modals/tagsModal"),
     "comment-modal": vueLoader("components/modals/commentModal"),