Ogoun
4 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