mirror of
https://github.com/ArenMg/aren.git
synced 2024-11-16 21:50:50 +00:00
Test component for carto debate
This commit is contained in:
Henintsoa
parent
39b9a12100
commit
a375429014
1 changed files with 406 additions and 79 deletions
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<base-layout id="cartodebates">
|
||||
<base-layout id="debate">
|
||||
<template v-slot:title>
|
||||
<h1>Debat sur carte</h1>
|
||||
</template>
|
||||
|
|
@ -9,15 +8,8 @@
|
|||
|
||||
<div id="mainContainer">
|
||||
<div id="documentContainer">
|
||||
<div
|
||||
class="scroll-area"
|
||||
@scroll="
|
||||
hidePopup();
|
||||
updateSpaghettis();
|
||||
"
|
||||
ref="documentContainer"
|
||||
>
|
||||
<div v-if="leftDisplay === 'document'" class="wrap">
|
||||
<div class="scroll-area" @scroll="hidePopup(); updateSpaghettis();" ref="documentContainer">
|
||||
<div 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
|
||||
id="commentsContainer"
|
||||
v-bind:class="{ loading: mountedChildren < debate.commentsCount }"
|
||||
>
|
||||
<div 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
|
||||
id="commentModalMap"
|
||||
ref="commentModal"
|
||||
v-bind:comment="newComment"
|
||||
>
|
||||
</comment-modal>
|
||||
<comment-modal
|
||||
id="commentModal"
|
||||
ref="commentModal"
|
||||
v-bind:comment="newComment">
|
||||
</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();
|
||||
},
|
||||
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;
|
||||
},
|
||||
this.mailleSelectionHandler(null,`Maille ligne ${l+1}, colonne ${c+1}`);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
"tags-modal": vueLoader("components/modals/tagsModal"),
|
||||
"comment-modal": vueLoader("components/modals/commentModal"),
|
||||
|
|
|
|||
Loading…
Reference in a new issue