aboutsummaryrefslogtreecommitdiff
path: root/assets_src
diff options
context:
space:
mode:
Diffstat (limited to 'assets_src')
-rw-r--r--assets_src/css/list.css4
-rw-r--r--assets_src/js/lib/ajax.js3
-rw-r--r--assets_src/js/lib/dom.js16
-rw-r--r--assets_src/js/like.js75
4 files changed, 95 insertions, 3 deletions
diff --git a/assets_src/css/list.css b/assets_src/css/list.css
index 51b2514..a3e6fcf 100644
--- a/assets_src/css/list.css
+++ b/assets_src/css/list.css
@@ -2,6 +2,10 @@
2 color: rgb(166, 166, 166); 2 color: rgb(166, 166, 166);
3} 3}
4 4
5.liked {
6 background-color: green;
7}
8
5.list-entry { 9.list-entry {
6 height: 80px; 10 height: 80px;
7 padding: 8px; 11 padding: 8px;
diff --git a/assets_src/js/lib/ajax.js b/assets_src/js/lib/ajax.js
index b189a92..71e3764 100644
--- a/assets_src/js/lib/ajax.js
+++ b/assets_src/js/lib/ajax.js
@@ -61,3 +61,6 @@ export async function post(url, body, options) {
61export async function del(url, body, options) { 61export async function del(url, body, options) {
62 return request('DELETE', url, body, options); 62 return request('DELETE', url, body, options);
63} 63}
64export async function put(url, body, options) {
65 return request('PUT', url, body, options);
66}
diff --git a/assets_src/js/lib/dom.js b/assets_src/js/lib/dom.js
index 3c2f4d9..82f5dd2 100644
--- a/assets_src/js/lib/dom.js
+++ b/assets_src/js/lib/dom.js
@@ -27,6 +27,22 @@ export function withClass(className) {
27 return arr; 27 return arr;
28} 28}
29 29
30export function firstChild(el, fn) {
31 if (!el) {
32 return null;
33 }
34
35 for (const child of el.childNodes) {
36 if (child.nodeName === '#text') {
37 continue;
38 }
39 if (fn(child)) {
40 return child;
41 }
42 }
43 return null;
44}
45
30export function next(el, fn) { 46export function next(el, fn) {
31 if (!el) { 47 if (!el) {
32 return null; 48 return null;
diff --git a/assets_src/js/like.js b/assets_src/js/like.js
index 03b15a1..feae345 100644
--- a/assets_src/js/like.js
+++ b/assets_src/js/like.js
@@ -11,12 +11,81 @@ async function updateLikeCount(el) {
11 11
12 const count = await ajax.get(`/api/likes/count?id=${contentId}&type=${type}`, {}); 12 const count = await ajax.get(`/api/likes/count?id=${contentId}&type=${type}`, {});
13 13
14 el.textContent = count; 14 dom.firstChild(el, e => e.classList.contains('like-count')).textContent = count;
15}
16
17async function isLikedByCurrentUser(el) {
18 const type = parseInt(el.getAttribute('content-type'), 10);
19 const contentId = parseInt(el.getAttribute('content-id'), 10);
20 const userId = parseInt(el.getAttribute('update-with'), 10);
21
22 if (isNaN(type) || isNaN(contentId) || isNaN(userId)) {
23 return;
24 }
25
26 const b = await ajax.get(`/api/likes/liked_by?id=${contentId}&type=${type}&user=${userId}`, {});
27
28 console.log(b);
29 return b === 'true';
30}
31
32async function updateLikeByCurrentUser(el, to) {
33 const type = parseInt(el.getAttribute('content-type'), 10);
34 const contentId = parseInt(el.getAttribute('content-id'), 10);
35 const userId = parseInt(el.getAttribute('update-with'), 10);
36
37 if (isNaN(type) || isNaN(contentId) || isNaN(userId)) {
38 return;
39 }
40
41 updateLikeClass(el, to);
42
43 if (to) {
44 await ajax.put('/api/likes', `id=${contentId}&type=${type}&user=${userId}`, {
45 headers: {
46 'Content-Type': 'application/x-www-form-urlencoded',
47 }
48 });
49 } else {
50 await ajax.del('/api/likes', `id=${contentId}&type=${type}&user=${userId}`, {
51 headers: {
52 'Content-Type': 'application/x-www-form-urlencoded',
53 }
54 });
55 }
56 const cont = dom.firstChild(el, e => e.classList.contains('like-count'));
57
58 cont.textContent = parseInt(cont.textContent, 10) + (to ? 1 : -1);
59}
60
61function updateLikeClass(el, to) {
62 el.classList.toggle('liked', to);
15} 63}
16 64
17dom.ready(() => { 65dom.ready(() => {
18 dom.withClass('like-count') 66 dom.withClass('like-div')
19 .forEach(el => { 67 .forEach(async el => {
20 updateLikeCount(el); 68 updateLikeCount(el);
69
70 const userId = parseInt(el.getAttribute('update-with'), 10);
71
72 let liked = await isLikedByCurrentUser(el);
73 updateLikeClass(el, liked);
74 if (!isNaN(userId)) {
75 el.addEventListener('click', async () => {
76 liked = !liked;
77 await updateLikeByCurrentUser(el, liked);
78 });
79 const cap = dom.firstChild(el, e => e.classList.contains('like-caption'));
80 if (cap) {
81 el.addEventListener('mouseover', () => {
82 cap.textContent = `${liked ? 'nicht mehr ' : ''}geil finden`;
83 });
84 el.addEventListener('mouseout', () => cap.textContent = 'Finden das geil');
85 }
86 } else {
87 el.classList.add('disabled');
88 }
89
21 }); 90 });
22}); 91});