Попытка отобразить комментарии рядом с соответствующим диапазоном do c в компоненте Vue - PullRequest
Новая
       38

Попытка отобразить комментарии рядом с соответствующим диапазоном do c в компоненте Vue

0 голосов
/ 11 апреля 2020

Я пытаюсь эмулировать комментарии в стиле Medium в документе html.

Этот ответ почти дошел до меня: Как реализовать интерфейс комментариев в стиле Medium в VueJS

С помощью этого метода я могу выделить текст и сделать комментарии, но я хочу отображать комментарии в той же строке, что и диапазон, выбранный комментатором. Код, который у меня есть, обрабатывает каждый абзац как отдельный документ, так что я не знаю, как вернуться к правильному абзацу, чтобы найти исходный диапазон, который комментируется.

Вот компонент комментирования: 

<template>
  <div class="popup" :style="{top: offsetTop, left: offsetLeft}" ref="popup">
    <span @click="AlertSelectedText">Comment</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      popupInitialTopOffset: 0,
      popupInitialLeftOffset: 0,
      offsetTop: 0,
      offsetLeft: "-999em",
      selectedText: undefined
    };
  },
  methods: {
    ListenToDocumentSelection() {
      let sel = window.getSelection();
      console.log('sel is: ', sel)
      setTimeout(_ => {
        if (sel && !sel.isCollapsed) {
          this.selectedText = sel.toString();
          if (sel.rangeCount) {
            let range = sel.getRangeAt(0).cloneRange();
            console.log('range is: ', range)
            if (range.getBoundingClientRect) {
              var rect = range.getBoundingClientRect();
              console.log('boundingrect is: ', rect)
              let left = rect.left + (rect.right - rect.left) / 2;
              let top = rect.top;

              this.offsetTop = top - this.popupInitialTopOffset - 30 + "px";

              this.offsetLeft = left - this.popupInitialLeftOffset / 2 + "px";
            }
          }
        } else {
          this.offsetLeft = "-999em";
        }
      }, 0);
    },
    AlertSelectedText() {
      alert(`"${this.selectedText}" posted as comment`);
    }
  },
  mounted() {
    this.popupInitialTopOffset = this.$refs.popup.offsetHeight;
    this.popupInitialLeftOffset = this.$refs.popup.offsetWidth;
    console.log('this is the positions of the popup', this.popupInitialTopOffset, this.popupInitialLeftOffset);
    window.addEventListener("mouseup", this.ListenToDocumentSelection);
  },
  destroyed() {
    window.removeEventListener("mouseup", this.ListenToDocumentSelection);
  }
};
</script>
<style scoped>
.popup {
  position: absolute;
  color: #FFF;
  background-color: #000;
  padding: 10px;
  border-radius: 5px;
  transform-origin: center, center;
  cursor: pointer;
}
.popup:after {
  content: "";
  border-bottom: 5px solid #000;
  border-right: 5px solid #000;
  border-top: 5px solid transparent;
  border-left: 5px solid transparent;
  position: absolute;
  top: calc(100% - 5px);
  transform: rotate(45deg);
  left: calc(50% - 3px);
}
</style>

Если бы я мог знать, как добавить координаты для возврата в закомментированный диапазон, я думаю, что смог бы справиться с остальными.

1 Ответ

0 голосов
/ 13 апреля 2020

Везде, где вы хотите включить комментирование, попробуйте дать этим элементам класс и уникальный идентификатор.

Класс поможет вам определить, что у него включено комментирование, а идентификатор поможет вам однозначно идентифицировать его.

В вашей логике c вы можете получить доступ к списку классов этого элемента. как 

sel.anchorNode.parentElement.classList

и ID как 

sel.anchorNode.parentElement.id

С помощью этой комбинации вы наверняка можете связать комментарий со своими элементами.

...