-
Notifications
You must be signed in to change notification settings - Fork 1
/
modal.js
95 lines (78 loc) · 3.51 KB
/
modal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
class Modal {
constructor(url, requestsObj, post) {
this.url = url;
this.modal = this.createElement('div', ['modal']);
this.modalOverlay = this.createElement('div', ['modal-overlay']);
this.modalCloseBtn = this.createElement('button', ['modal__close'], 'X');
this.requestsObj = requestsObj;
this.post = post;
}
renderModal(userId, id, name, lastname, email, title = '', text = '', method = '') {
const userInfo = this.createElement('div', ['modal__user-data']);
userInfo.innerHTML = `
<img class="user-photo" src="./img/${userId}.jpeg" alt="user photo">
<p class="post__user-name">${name} ${lastname}</p>
<p class="post__user-email">${email}</p>`;
// form
const postForm = this.createElement('form', ['form']);
// input
const titleLabel = this.createElement('label', ['form__label'], 'Title', { for: "post__title" });
const titleEl = this.createElement('input', ['form__title-field'], title,
{ type: 'text', id: 'post__title', name: 'title', placeholder: 'Post title' });
// texarea
const textLabel = this.createElement('label', ['form__label'], 'Text', { for: "post__text" });
const textEl = this.createElement('textarea', ['form__text-field'], text,
{ name: "text", id: "post__text", cols: "30", rows: "5", placeholder: "Post text" });
const saveChangesBtn = this.createElement('button', ['modal__save-btn'], 'Save changes');
saveChangesBtn.type = 'submit';
saveChangesBtn.addEventListener('click', (e) => {
e.preventDefault();
if (method === 'POST') {
const newPostObjData = this.post.getNewPostData();
newPostObjData.userId = userId;
const { title, body } = newPostObjData;
const newPost = this.post.renderPost(userId, name, lastname, body, title, email, id)
this.requestsObj.sendData(`${this.url}/posts/`, newPostObjData);
this.post.posts.push(newPostObjData);
this.post.list.prepend(newPost);
} else {
this.post.updatePost(id);
}
this.deleteModal();
})
postForm.append(titleLabel, titleEl, textLabel, textEl, saveChangesBtn)
this.modal.append(this.modalCloseBtn, userInfo, postForm);
document.body.append(this.modal, this.modalOverlay)
}
showModal(userId, id, name, lastname, email, title, text, method = '') {
this.renderModal(userId, id, name, lastname, email, title, text, method);
this.modalCloseBtn.addEventListener('click', () => {
this.deleteModal()
})
}
deleteModal() {
const modal = document.querySelector('.modal');
if (modal) {
const modalOverlay = document.querySelector('.modal-overlay');
modal.innerHTML = '';
modal.remove();
modalOverlay.remove();
}
}
createElement(tag, [classes], text = '', attributes = {}) {
const element = document.createElement(tag);
element.classList.add(...[classes]);
if (tag === 'input' || tag === 'textarea') {
element.value = text;
} else {
element.innerText = text;
}
if (attributes) {
Object.keys(attributes).forEach(attr => {
element.setAttribute(attr, attributes[attr]);
})
}
return element;
}
}
export default Modal;