Ogoun
8 months ago
parent
112daccec9
commit
f836c4963b
@ -1 +1 @@
|
|||||||
7f90fe300e225561cd7cc7726bf5d2f940d1cc60e07ec84b3e5f3a0ec108d1d7
|
a7e97588f3d72640975deb9345bc56ed8105e4a411d7365c01f74b565d536185
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 977 B |
@ -0,0 +1,106 @@
|
|||||||
|
import { waitForElement, changeTags } from "../../requests/index.js";
|
||||||
|
|
||||||
|
export default class TagsComponent {
|
||||||
|
element;
|
||||||
|
constructor({ tags = [], bookid = null, article }) {
|
||||||
|
this.tags = tags;
|
||||||
|
this.article = article;
|
||||||
|
this.bookid = bookid;
|
||||||
|
this.isTextareaMode = false;
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
get template() {
|
||||||
|
return `
|
||||||
|
<h6 data-edit-tag class="main-book__tags_title mt-m">
|
||||||
|
Теги
|
||||||
|
<div class="pencil"></div>
|
||||||
|
</h6>
|
||||||
|
<div class="main-book__center main-book__tags d-fl mv-s">${this.getTags(
|
||||||
|
this.tags
|
||||||
|
)}</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
getTags(tags) {
|
||||||
|
return (tags || [])
|
||||||
|
.map(({ id, name }) => {
|
||||||
|
return `<a class="main-book__tag main-book__link" data-tag=${id}>#${name}</a>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
getTextarea(tags) {
|
||||||
|
return `
|
||||||
|
<textarea class="main-book__textarea" data-area>${(tags || [])
|
||||||
|
.map(({ name }) => name)
|
||||||
|
.join(" ")}</textarea>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
initialize() {
|
||||||
|
this.initEventListeners();
|
||||||
|
}
|
||||||
|
|
||||||
|
initEventListeners() {
|
||||||
|
const tagsEditorListener = this.article.querySelector(
|
||||||
|
".main-book__tags_title"
|
||||||
|
);
|
||||||
|
|
||||||
|
tagsEditorListener.addEventListener("click", () => {
|
||||||
|
const tagsWrapper = this.article.querySelector(".main-book__tags");
|
||||||
|
|
||||||
|
if (!this.isTextareaMode) {
|
||||||
|
tagsWrapper.innerHTML = this.getTextarea(this.tags);
|
||||||
|
this.article.querySelector(".main-book__textarea").focus();
|
||||||
|
this.isTextareaMode = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.article.addEventListener("keypress", (event) => {
|
||||||
|
if (event.key === "Enter") {
|
||||||
|
if (this.isTextareaMode) {
|
||||||
|
this.closeTextarea();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("outside-click", async () => {
|
||||||
|
if (this.isTextareaMode) {
|
||||||
|
this.closeTextarea();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async closeTextarea() {
|
||||||
|
const tagsWrapper = this.article.querySelector(".main-book__tags");
|
||||||
|
const area = this.article.querySelector(".main-book__textarea");
|
||||||
|
|
||||||
|
const tags = area.value
|
||||||
|
.split(" ")
|
||||||
|
.map((item) => item.trim())
|
||||||
|
.filter((i) => i);
|
||||||
|
if (!!(tags || []).length > 0) {
|
||||||
|
await this.setTags({ bookid: this.bookid, tags });
|
||||||
|
}
|
||||||
|
tagsWrapper.innerHTML = this.getTags(this.tags);
|
||||||
|
this.isTextareaMode = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async waitRendered() {
|
||||||
|
await waitForElement(".main-book__tags");
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
|
||||||
|
async render() {
|
||||||
|
this.element = document.createElement("div");
|
||||||
|
this.element.innerHTML = this.template;
|
||||||
|
await this.waitRendered();
|
||||||
|
}
|
||||||
|
|
||||||
|
async setTags({ bookid, tags }) {
|
||||||
|
document.body.classList.add("blur", "spinner");
|
||||||
|
const newTags = await changeTags({ bookid, tags });
|
||||||
|
this.tags = newTags;
|
||||||
|
document.body.classList.remove("spinner");
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
export const stopPropagation = event => {
|
||||||
|
event.stopImmediatePropagation();
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
Binary file not shown.
@ -1 +1 @@
|
|||||||
22258ed3f3bd48ae74b9c3607cf0cf82ec9b3322b631691b32743438f798c7cc
|
509bc785dfee6d2836ba0599e079958f32ff95621449af032e3881340993551e
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
@ -1 +1 @@
|
|||||||
d7606117e667c055ed565f5f0d94c916cbdbb0bbb171442e9a9d4b51ab356451
|
153deb8a7a296fdeedff24e4e5322961f1ebc6ec896447287c432b0746206083
|
||||||
|
|||||||
Binary file not shown.
Loading…
Reference in new issue