From ac006a8de66ef41a9b7dddd1a3ba786f2c73a214 Mon Sep 17 00:00:00 2001 From: wiseStann Date: Mon, 4 Nov 2024 15:43:42 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20=D0=BF=D1=80=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=20=D0=B4?= =?UTF-8?q?=D0=BE=D1=81=D0=BA=D0=B8=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80?= =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20=D0=BF=D1=80=D0=BE=D1=84=D0=B8?= =?UTF-8?q?=D0=BB=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 58 +- public/components/{base => }/base.js | 0 public/components/boards-list/boards-list.js | 2 +- public/components/button/button.js | 2 +- public/components/complex/grid/grid.js | 23 +- public/components/complex/header/header.js | 2 +- public/components/complex/pin/pin.css | 9 +- public/components/complex/pin/pin.hbs | 15 +- public/components/complex/pin/pin.js | 2 +- public/components/complex/preview/preview.js | 2 +- public/components/complex/savebox/savebox.js | 2 +- .../components/details-menu/details-menu.js | 2 +- .../drop-down-menu/drop-down-menu.js | 2 +- public/components/input/input.js | 2 +- .../components/search-input/search-input.js | 2 +- public/pages/login/login.js | 2 +- public/pages/main/main.js | 23 +- public/pages/profile/board-grid.hbs | 2 +- public/pages/profile/board-grid.js | 16 +- public/pages/profile/profile.css | 14 +- public/pages/profile/profile.hbs | 4 +- public/pages/profile/profile.js | 526 +++++++++++++++++- public/pages/signup/signup.js | 2 +- public/precompiled.js | 45 +- 24 files changed, 681 insertions(+), 78 deletions(-) rename public/components/{base => }/base.js (100%) diff --git a/public/app.js b/public/app.js index a7c6dcc..ceabfec 100644 --- a/public/app.js +++ b/public/app.js @@ -131,6 +131,7 @@ export default class App { { PinID: 1, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -138,6 +139,7 @@ export default class App { { PinID: 2, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -145,6 +147,7 @@ export default class App { { PinID: 3, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -152,6 +155,7 @@ export default class App { { PinID: 4, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -159,6 +163,7 @@ export default class App { { PinID: 5, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -166,6 +171,7 @@ export default class App { { PinID: 6, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -173,6 +179,7 @@ export default class App { { PinID: 7, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -180,6 +187,7 @@ export default class App { { PinID: 8, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -187,6 +195,7 @@ export default class App { { PinID: 9, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -194,6 +203,7 @@ export default class App { { PinID: 10, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -201,30 +211,35 @@ export default class App { { PinID: 11, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 12, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 13, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 14, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 15, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -232,6 +247,7 @@ export default class App { { PinID: 16, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -239,6 +255,7 @@ export default class App { { PinID: 17, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -246,6 +263,7 @@ export default class App { { PinID: 18, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -253,6 +271,7 @@ export default class App { { PinID: 19, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -260,6 +279,7 @@ export default class App { { PinID: 20, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -267,6 +287,7 @@ export default class App { { PinID: 21, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -274,6 +295,7 @@ export default class App { { PinID: 22, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -281,6 +303,7 @@ export default class App { { PinID: 23, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -288,6 +311,7 @@ export default class App { { PinID: 24, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -295,30 +319,35 @@ export default class App { { PinID: 25, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 26, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 27, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 28, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 29, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -326,6 +355,7 @@ export default class App { { PinID: 30, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -333,6 +363,7 @@ export default class App { { PinID: 31, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -340,6 +371,7 @@ export default class App { { PinID: 32, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -347,6 +379,7 @@ export default class App { { PinID: 33, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -354,6 +387,7 @@ export default class App { { PinID: 34, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -361,6 +395,7 @@ export default class App { { PinID: 35, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -368,6 +403,7 @@ export default class App { { PinID: 36, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -375,6 +411,7 @@ export default class App { { PinID: 37, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -382,6 +419,7 @@ export default class App { { PinID: 38, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -389,30 +427,35 @@ export default class App { { PinID: 39, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 40, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 41, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 42, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 43, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -420,6 +463,7 @@ export default class App { { PinID: 44, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -427,6 +471,7 @@ export default class App { { PinID: 45, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -434,6 +479,7 @@ export default class App { { PinID: 46, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -441,6 +487,7 @@ export default class App { { PinID: 47, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", BoardID: 1, @@ -448,6 +495,7 @@ export default class App { { PinID: 48, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -455,6 +503,7 @@ export default class App { { PinID: 49, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -462,6 +511,7 @@ export default class App { { PinID: 50, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -469,6 +519,7 @@ export default class App { { PinID: 51, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -476,6 +527,7 @@ export default class App { { PinID: 52, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, @@ -483,24 +535,28 @@ export default class App { { PinID: 53, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 54, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 55, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, { PinID: 56, AuthorName: "Mary Jane", + AuthorAvatar: './assets/imgs/avatar.jpg', AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", }, @@ -530,7 +586,7 @@ export default class App { const template = Handlebars.templates['unknown.hbs'] const renderedTemplate = template() - this.root.insertAdjacentHTML(renderedTemplate); + this.root.insertAdjacentHTML('beforeend', renderedTemplate); document.querySelector('.tomain__tap-button').addEventListener('click', (event) => { event.preventDefault(); diff --git a/public/components/base/base.js b/public/components/base.js similarity index 100% rename from public/components/base/base.js rename to public/components/base.js diff --git a/public/components/boards-list/boards-list.js b/public/components/boards-list/boards-list.js index ea1f6d5..ffce336 100644 --- a/public/components/boards-list/boards-list.js +++ b/public/components/boards-list/boards-list.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from "../base/base.js"; +import { BaseComponent } from "../base.js"; /** * A component that is used to display all boards of currently authorized user. diff --git a/public/components/button/button.js b/public/components/button/button.js index 8f6d8f0..b16b90d 100644 --- a/public/components/button/button.js +++ b/public/components/button/button.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../components/base/base.js'; +import { BaseComponent } from '../base.js'; export class ButtonComponent extends BaseComponent { #clickHandler = () => { }; diff --git a/public/components/complex/grid/grid.js b/public/components/complex/grid/grid.js index 6d0ae93..0298258 100644 --- a/public/components/complex/grid/grid.js +++ b/public/components/complex/grid/grid.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../base/base.js'; +import { BaseComponent } from '../../base.js'; import { PinComponent } from '../pin/pin.js'; @@ -21,20 +21,26 @@ const PREVIEW_IMG_X_FACTOR = 1.5; */ export class GridComponent extends BaseComponent { #pins = []; // pins stored on the grid + #marginTop; /** * Creates an instance of GridComponent. * @param {HTMLElement} parent - The parent element for rendering. * @param {Array} pins - An array of objects representing pin data. + * @param {Boolean} marginTop - Should grid be margin topped or not. */ - constructor(parent, pins) { + constructor(parent, pins, marginTop) { super(parent); this.#pins = pins; + this.#marginTop = marginTop; + let idx = 0; // Providing layout rebuild on resize events window.addEventListener('resize', (event) => { event.preventDefault(); + console.log("RESIZE:", idx++); + let body = document.body, html = document.documentElement; @@ -51,7 +57,6 @@ export class GridComponent extends BaseComponent { } this.buildLayout(); - }, true); } @@ -83,7 +88,14 @@ export class GridComponent extends BaseComponent { const columnsN = this.adaptiveColumnsN; const widthGutter = 30, heightGutter = 15; let heights = new Array(columnsN).fill(0); - const headerHeight = document.querySelector('.header__content-container').clientHeight; + + let headerHeight = 0; + if (this.#marginTop) { + const header = document.querySelector('.header__content-container'); + if (header) { + headerHeight = header.clientHeight; + } + } const columnWidth = (this.parentContainerWidth - widthGutter * (columnsN + 1)) / columnsN; @@ -131,6 +143,7 @@ export class GridComponent extends BaseComponent { let newColumnN = Math.floor(this.parentContainerWidth / this.parentContainerColumnsRatio); if (newColumnN == 0) newColumnN = 1; + return newColumnN; } @@ -140,7 +153,7 @@ export class GridComponent extends BaseComponent { */ buildPinPreview(pin) { const pinPreviewBtn = document.querySelector(`.pin__image-preview-button-${pin.PinID}`); - const parent = this.Parent; + const parent = document.getElementById('root'); const previewState = { MediaUrl: pin.MediaUrl, diff --git a/public/components/complex/header/header.js b/public/components/complex/header/header.js index d9837be..fae3345 100644 --- a/public/components/complex/header/header.js +++ b/public/components/complex/header/header.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../base/base.js'; +import { BaseComponent } from '../../base.js'; import { SearchInputComponent as SeachInput } from '../../search-input/search-input.js'; import { ButtonComponent as Button } from '../../button/button.js'; diff --git a/public/components/complex/pin/pin.css b/public/components/complex/pin/pin.css index 80af8bb..9954f39 100644 --- a/public/components/complex/pin/pin.css +++ b/public/components/complex/pin/pin.css @@ -4,11 +4,12 @@ div[class^=pin__content-container] { flex-direction: column; } -div[class^=pin__content-container] { - transition: all 0.2s ease-in-out; -} +/* div[class^=pin__content-container] { + transition: all 0.1s ease-in-out; +} */ .pin__image-container { + position: relative; width: 100%; height: 100%; } @@ -30,7 +31,7 @@ div[class^=pin__image-preview-button] { justify-content: center; align-items: center; position: absolute; - bottom: 70px; + bottom: 20px; right: 15px; width: 40px; height: 40px; diff --git a/public/components/complex/pin/pin.hbs b/public/components/complex/pin/pin.hbs index 590c6c7..47a4eba 100644 --- a/public/components/complex/pin/pin.hbs +++ b/public/components/complex/pin/pin.hbs @@ -5,12 +5,13 @@ Preview -
- {{!-- --}} - -
-

{{{pin.AuthorName}}}

-

{{{pin.AuthorFollowersNumber}}} Followers

+ {{#unless pin.imageOnly}} +
+ +
+

{{{pin.AuthorName}}}

+

{{{pin.AuthorFollowersNumber}}} Followers

+
-
+ {{/unless}}
diff --git a/public/components/complex/pin/pin.js b/public/components/complex/pin/pin.js index d4f7991..2d1d140 100644 --- a/public/components/complex/pin/pin.js +++ b/public/components/complex/pin/pin.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../base/base.js'; +import { BaseComponent } from '../../base.js'; /** * Represents an Image Card Component. diff --git a/public/components/complex/preview/preview.js b/public/components/complex/preview/preview.js index 8d9b5f4..bee2bc6 100644 --- a/public/components/complex/preview/preview.js +++ b/public/components/complex/preview/preview.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from '../../base/base.js'; +import { BaseComponent } from '../../base.js'; export class PreviewComponent extends BaseComponent { /** diff --git a/public/components/complex/savebox/savebox.js b/public/components/complex/savebox/savebox.js index eb08c3d..5e4a869 100644 --- a/public/components/complex/savebox/savebox.js +++ b/public/components/complex/savebox/savebox.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from '../../base/base.js'; +import { BaseComponent } from '../../base.js'; import { SearchInputComponent as SearchInput } from '../../search-input/search-input.js'; diff --git a/public/components/details-menu/details-menu.js b/public/components/details-menu/details-menu.js index 3340edb..313102c 100644 --- a/public/components/details-menu/details-menu.js +++ b/public/components/details-menu/details-menu.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from "../base/base.js" +import { BaseComponent } from "../base.js" /** * A component that is used to display options when clicking on 'more' button. diff --git a/public/components/drop-down-menu/drop-down-menu.js b/public/components/drop-down-menu/drop-down-menu.js index 2e37c28..1e034c6 100644 --- a/public/components/drop-down-menu/drop-down-menu.js +++ b/public/components/drop-down-menu/drop-down-menu.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from "../base/base.js" +import { BaseComponent } from "../base.js" /** * Drop down menu component which is used on profile icon hover. diff --git a/public/components/input/input.js b/public/components/input/input.js index 5a75777..d4bbfe4 100644 --- a/public/components/input/input.js +++ b/public/components/input/input.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../base/base.js'; +import { BaseComponent } from '../base.js'; /** * Represents an Input Component. diff --git a/public/components/search-input/search-input.js b/public/components/search-input/search-input.js index f7fa984..229b38a 100644 --- a/public/components/search-input/search-input.js +++ b/public/components/search-input/search-input.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from '../base/base.js' +import { BaseComponent } from '../base.js' /** * A component that is used to display search bar. diff --git a/public/pages/login/login.js b/public/pages/login/login.js index 9796c7c..cded03d 100644 --- a/public/pages/login/login.js +++ b/public/pages/login/login.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../components/base/base.js'; +import { BaseComponent } from '../../components/base.js'; import { InputComponent as Input } from '../../components/input/input.js'; import { ButtonComponent as Button } from '../../components/button/button.js'; diff --git a/public/pages/main/main.js b/public/pages/main/main.js index c3712c0..e1e8a70 100644 --- a/public/pages/main/main.js +++ b/public/pages/main/main.js @@ -9,7 +9,7 @@ import { BACKEND_LOGOUT_ROUTE } from '../../constants/api.js' import { postMethod } from '../../modules/network.js' import { app } from '../../index.js' -import { BaseComponent } from '../../components/base/base.js' +import { BaseComponent } from '../../components/base.js' import { DropDownMenuComponent as DropDownMenu } from '../../components/drop-down-menu/drop-down-menu.js' @@ -41,7 +41,7 @@ export class MainPageComponent extends BaseComponent { async renderTemplate() { const template = Handlebars.templates['main.hbs']; - const grid = new Grid(this.Parent, this.#pins); + const grid = new Grid(this.Parent, this.#pins, true); const renderedTemplate = template({ header: new Header(this.Parent, await isAuthorized()).renderTemplate(), @@ -75,6 +75,10 @@ export class MainPageComponent extends BaseComponent { const searchInputClearIcon = document.querySelector(`.header__search-input-content-container .searchinput__content-container .searchinput__clear-icon`); + if (!searchInputClearIcon) { + return; + } + searchInputClearIcon.addEventListener('click', (event) => { event.preventDefault(); const searchInputField = document.querySelector(`.header__search-input-content-container @@ -91,13 +95,14 @@ export class MainPageComponent extends BaseComponent { */ addLogoListener() { const headerLogInButton = document.querySelector('.header__logo-container') - headerLogInButton.addEventListener('click', (event) => { - event.preventDefault(); - - root.innerHTML = ''; - console.log(app.LastPage); - app.renderPage(ROUTES.main); - }); + if (headerLogInButton) { + headerLogInButton.addEventListener('click', (event) => { + event.preventDefault(); + + root.innerHTML = ''; + app.renderPage(ROUTES.main); + }); + } } /** diff --git a/public/pages/profile/board-grid.hbs b/public/pages/profile/board-grid.hbs index d7e1aca..c73c99a 100644 --- a/public/pages/profile/board-grid.hbs +++ b/public/pages/profile/board-grid.hbs @@ -7,7 +7,7 @@

{{{this.title}}}

- {{#if profile.currentUser}} + {{#if ../profile.currentUser}} {{#if this.private}} Private {{/if}} diff --git a/public/pages/profile/board-grid.js b/public/pages/profile/board-grid.js index 354910b..391a029 100644 --- a/public/pages/profile/board-grid.js +++ b/public/pages/profile/board-grid.js @@ -1,27 +1,37 @@ 'use strict' -import { BaseComponent } from "../../components/base/base.js" +import { BaseComponent } from "../../components/base.js" /** * Component that is used to display boards grid on user profile page. */ export class BoardGridComponent extends BaseComponent { #boards; - + #currentUser; + /** * * @param {HTMLElement} parent - HTML element of the parent container. * @param {Array} boards - list of boards of currently authorized user. + * @param {Boolean} currentUser - whether print boards of authorized user or not. */ - constructor(parent, boards) { + constructor(parent, boards, currentUser) { super(parent); this.#boards = boards; + this.#currentUser = currentUser; } + /** + * Renders a template of board grid component. + * @returns rendered template of board grid component. + */ renderTemplate() { const template = Handlebars.templates['board-grid.hbs']; const renderedTemplate = template({ boards: this.#boards, + profile: { + currentUser: this.#currentUser, + }, }); return renderedTemplate; diff --git a/public/pages/profile/profile.css b/public/pages/profile/profile.css index cb479c5..d9105c1 100644 --- a/public/pages/profile/profile.css +++ b/public/pages/profile/profile.css @@ -245,8 +245,7 @@ hr { align-items: center; } -.profile__boards-header-nav-to-pinset-link, -.profile__boards-header-nav-to-profile { +a[class^=profile__boards-header-nav-to] { text-decoration: none; color: var(--pinset-profile-navigation-text-color); transition: 0.5s; @@ -257,8 +256,7 @@ hr { height: 20px; } -.profile__boards-header-nav-to-pinset-link:hover, -.profile__boards-header-nav-to-profile:hover { +a[class^=profile__boards-header-nav-to]:hover { color: var(--pinset-profile-navigation-hovered-text-color); transition: 0.5s; } @@ -294,7 +292,7 @@ hr { .profile__boards-header-search-block .searchinput__content-container { width: 100%; - height: 90%; + height: 100%; border-radius: 10px; } @@ -304,12 +302,12 @@ hr { } .profile__boards-header-search-block img { - width: 45px; - height: 45px; + width: 40px; + height: 40px; } .profile__boards-header-searh-filter-icon { - margin: 5px; + margin-left: 5px; } .profile__boards-header-search-block img:hover { diff --git a/public/pages/profile/profile.hbs b/public/pages/profile/profile.hbs index e331558..1fe62e7 100644 --- a/public/pages/profile/profile.hbs +++ b/public/pages/profile/profile.hbs @@ -78,13 +78,13 @@ Pinset Navigate - + Мой профиль

Мои доски

- Create + Create
{{else}}
diff --git a/public/pages/profile/profile.js b/public/pages/profile/profile.js index db337e8..8262519 100644 --- a/public/pages/profile/profile.js +++ b/public/pages/profile/profile.js @@ -1,19 +1,20 @@ 'use strict' -import { BaseComponent } from "../../components/base/base.js"; +import { BaseComponent } from "../../components/base.js"; import { ButtonComponent as Button } from "../../components/button/button.js"; import { HeaderComponent as Header } from "../../components/complex/header/header.js"; import { SearchInputComponent as SearchInput } from "../../components/search-input/search-input.js"; import { BoardGridComponent as BoardGrid } from "./board-grid.js"; import { DropDownMenuComponent as DropDownMenu } from "../../components/drop-down-menu/drop-down-menu.js"; -import { isAuthorized } from "../../modules/network.js"; +import { GridComponent as Grid } from "../../components/complex/grid/grid.js"; import { app } from "../../index.js"; import { ROUTES } from "../../constants/routes.js"; import { postMethod } from "../../modules/network.js"; import { BACKEND_LOGOUT_ROUTE } from "../../constants/api.js"; +import { isAuthorized } from "../../modules/network.js"; /** * Page of a user profile. @@ -29,6 +30,7 @@ export class ProfilePageComponent extends BaseComponent { window.addEventListener('resize', (event) => { event.preventDefault(); + this.resizeBoardsCovers(); }); } @@ -46,7 +48,7 @@ export class ProfilePageComponent extends BaseComponent { type: 'submit', className: 'profile__user-chat-button', }).renderTemplate(); - + this.State.subscribeButton = new Button(this.Parent, { label: 'Подписаться', type: 'submit', @@ -58,7 +60,7 @@ export class ProfilePageComponent extends BaseComponent { header: new Header(this.Parent, await isAuthorized()).renderTemplate(), searchInputBar: new SearchInput(this.Parent, { Placeholder: 'Искать в досках' }).renderTemplate(), profile: this.State, - boardGrid: new BoardGrid(this.Parent, this.State.boards).renderTemplate(), + boardGrid: new BoardGrid(this.Parent, this.State.boards, this.State.currentUser).renderTemplate(), }); this.Parent.insertAdjacentHTML('beforeend', renderedTemplate); @@ -74,6 +76,7 @@ export class ProfilePageComponent extends BaseComponent { this.addSearchInputsListeners(); this.addBoardsSearchBarListener(); this.addProfileImgListener(); + this.addBoardListener(); return renderedTemplate; } @@ -87,7 +90,6 @@ export class ProfilePageComponent extends BaseComponent { event.preventDefault(); root.innerHTML = ''; - console.log(app.LastPage); app.renderPage(ROUTES.main); }); } @@ -101,7 +103,7 @@ export class ProfilePageComponent extends BaseComponent { for (let i = 0; i < searchInputFields.length; i++) { searchInputClearIcons[i].addEventListener('click', (event) => { event.preventDefault(); - + searchInputFields[i].value = ''; searchInputFields[i].focus(); }); @@ -123,7 +125,8 @@ export class ProfilePageComponent extends BaseComponent { } } - const matchedBoardsComponent = new BoardGrid(this.Parent, matchedBoards); + + const matchedBoardsComponent = new BoardGrid(this.Parent, matchedBoards, this.State.currentUser); const renderedMatchedBoards = matchedBoardsComponent.renderTemplate(); const boardsContainer = document.querySelector('.profile__boards-container'); const currentBoardsGrid = document.querySelector('.profile__boards-list-container'); @@ -178,19 +181,19 @@ export class ProfilePageComponent extends BaseComponent { if (profileContainer) { profileContainer.addEventListener('click', (event) => { event.preventDefault(); - + if (!document.querySelector('.drop-down-menu__content-container')) { const dropDownMenu = new DropDownMenu(this.Parent); const renderedTemplate = dropDownMenu.renderTemplate(); profileContainer.insertAdjacentHTML('beforeend', renderedTemplate); - + const dropDownMenuElement = document.querySelector('.drop-down-menu__content-container'); if (dropDownMenuElement) { const header = document.querySelector('.header__content-container'); const dropDownMenuMarginTop = -10, dropDownMenuMarginRight = 10; dropDownMenuElement.style.top = header.clientHeight + dropDownMenuMarginTop + 'px'; dropDownMenuElement.style.right = dropDownMenuMarginRight + 'px'; - + this.addLogoutButtonListener(); this.addProfileListener(); } @@ -238,4 +241,507 @@ export class ProfilePageComponent extends BaseComponent { }); } } + + /** + * + */ + addBoardListener() { + const pinSet = [ + { + PinID: 1, + imageOnly: true, + MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 2, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 3, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 4, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 5, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 6, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 7, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 8, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 9, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 10, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 11, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 12, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 13, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 14, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 15, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 16, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 17, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 18, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 19, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 20, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 21, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 22, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 23, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 24, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 25, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 26, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 27, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 28, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 29, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 30, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 31, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 32, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 33, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 34, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 35, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 36, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 37, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 38, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 39, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 40, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 41, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 42, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 43, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 44, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 45, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 46, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 47, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", + BoardID: 1, + }, + { + PinID: 48, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 49, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 50, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 51, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 52, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + BoardID: 1, + }, + { + PinID: 53, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 54, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 55, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + { + PinID: 56, + imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, + MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", + }, + ]; + + const pinGridParent = document.querySelector('.profile__boards-container'); + + const pinGrid = new Grid(pinGridParent, pinSet, false); + const renderedPinGrid = pinGrid.renderTemplate(); + + const boardGrid = document.querySelector('.profile__boards-list-container'); + const allBoards = document.querySelectorAll('.profile__board'); + const boardsContainer = document.querySelector('.profile__boards-container'); + + const navigationBar = document.querySelector('.profile__boards-header-navigation'); + const navArrow = navigationBar.querySelector('.profile__boards-header-navigation-arrow'); + const nextNavArrow = navArrow.cloneNode(true); + + const navBarSectionText = navigationBar.querySelector('.profile__boards-header-nav-to-profile-link'); + const nextNavBarSectionText = navBarSectionText.cloneNode(true); + + const headerSearchBlock = document.querySelector('.profile__boards-header-search-block'); + + for (const board of allBoards) { + board.addEventListener('click', (event) => { + event.preventDefault(); + + const boardTitle = board.querySelector('.profile__board-title').textContent; + + // Update navigation bar menu + navigationBar.appendChild(nextNavArrow); + nextNavBarSectionText.textContent = boardTitle; + nextNavBarSectionText.className = 'profile__boards-header-nav-to-board'; + + // CHANGE HREF HERE + nextNavBarSectionText.href = '/profile/board'; + navigationBar.appendChild(nextNavBarSectionText); + + // Update title + document.querySelector('.profile__boards-header-title p').textContent = boardTitle; + const headerTitleContainer = document.querySelector('.profile__boards-header-title'); + headerTitleContainer.removeChild(document.querySelector('.profile__boards-header-create-board-btn')); + + // Update search input bar + headerSearchBlock.removeChild(headerSearchBlock.querySelector('.searchinput__content-container')); + const actualSearchBar = new SearchInput(this.Parent, { Placeholder: `Искать в доске ${boardTitle}` }); + const renderedSearchBar = actualSearchBar.renderTemplate(); + headerSearchBlock.insertAdjacentHTML('afterbegin', renderedSearchBar); + + // Replace board grid with pins grid + boardsContainer.removeChild(boardGrid); + boardsContainer.insertAdjacentHTML('beforeend', renderedPinGrid); + + document.body.addEventListener('load', (event) => { + event.preventDefault(); + pinGrid.buildLayout(); + }, true); + + // Providing layout rebuild on resize events + window.addEventListener('resize', (event) => { + event.preventDefault(); + pinGrid.buildLayout(); + }, true); + + for (const pin of pinSet) { + pinGrid.buildPinPreview(pin); + } + }); + } + } }; diff --git a/public/pages/signup/signup.js b/public/pages/signup/signup.js index 4483819..a9e68bc 100644 --- a/public/pages/signup/signup.js +++ b/public/pages/signup/signup.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../components/base/base.js'; +import { BaseComponent } from '../../components/base.js'; import { InputComponent as Input } from '../../components/input/input.js'; import { ButtonComponent as Button } from '../../components/button/button.js'; diff --git a/public/precompiled.js b/public/precompiled.js index 9a025bd..2606b4e 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -158,7 +158,24 @@ templates['header.hbs'] = template({"1":function(container,depth0,helpers,partia + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? lookupProperty(stack1,"isAuthorized") : stack1),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":10,"column":1},"end":{"line":21,"column":8}}})) != null ? stack1 : "") + "
\r\n"; },"useData":true}); -templates['pin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { +templates['pin.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { + var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return "
\r\n \r\n
\r\n

" + + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") + + "

\r\n

" + + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") + + " Followers

\r\n
\r\n
\r\n"; +},"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { return parent[propertyName]; @@ -174,13 +191,9 @@ templates['pin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(conta + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"MediaUrl") : stack1), depth0)) + "\">\r\n
\r\n \"Preview\"\r\n
\r\n
\r\n
\r\n \r\n
\r\n

" - + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n

" - + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\r\n
\r\n
\r\n\r\n"; + + "\">\r\n \"Preview\"\r\n \r\n \r\n" + + ((stack1 = lookupProperty(helpers,"unless").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"imageOnly") : stack1),{"name":"unless","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":8,"column":1},"end":{"line":16,"column":12}}})) != null ? stack1 : "") + + "\r\n"; },"useData":true}); templates['preview.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { return " \"bookmark\r\n"; @@ -392,7 +405,7 @@ templates['main.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(cont + ((stack1 = ((helper = (helper = lookupProperty(helpers,"grid") || (depth0 != null ? lookupProperty(depth0,"grid") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"grid","hash":{},"data":data,"loc":{"start":{"line":3,"column":4},"end":{"line":3,"column":14}}}) : helper))) != null ? stack1 : "") + "\r\n\r\n"; },"useData":true}); -templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { +templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,partials,data,blockParams,depths) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { return parent[propertyName]; @@ -400,8 +413,8 @@ templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,pa return undefined }; - return ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"boards") : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":8},"end":{"line":33,"column":17}}})) != null ? stack1 : ""); -},"2":function(container,depth0,helpers,partials,data) { + return ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"boards") : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":8},"end":{"line":33,"column":17}}})) != null ? stack1 : ""); +},"2":function(container,depth0,helpers,partials,data,blockParams,depths) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { return parent[propertyName]; @@ -418,7 +431,7 @@ templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,pa + "\">\r\n
\r\n

" + ((stack1 = alias1((depth0 != null ? lookupProperty(depth0,"title") : depth0), depth0)) != null ? stack1 : "") + "

\r\n" - + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"profile") : depth0)) != null ? lookupProperty(stack1,"currentUser") : stack1),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":10,"column":24},"end":{"line":14,"column":31}}})) != null ? stack1 : "") + + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depths[1] != null ? lookupProperty(depths[1],"profile") : depths[1])) != null ? lookupProperty(stack1,"currentUser") : stack1),{"name":"if","hash":{},"fn":container.program(3, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":10,"column":24},"end":{"line":14,"column":31}}})) != null ? stack1 : "") + "
\r\n
\r\n
\r\n
\r\n

" + ((stack1 = alias1((depth0 != null ? lookupProperty(depth0,"bookmarkedNumber") : depth0), depth0)) != null ? stack1 : "") + "

\r\n \"Bookmark\"\r\n
\r\n
\r\n

" @@ -439,7 +452,7 @@ templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,pa return " \"Private\"\r\n"; },"6":function(container,depth0,helpers,partials,data) { return "

По вашему запросу ничего не найдено

\r\n"; -},"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { +},"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data,blockParams,depths) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { return parent[propertyName]; @@ -448,9 +461,9 @@ templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,pa }; return "
\r\n" - + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"boards") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(6, data, 0),"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":36,"column":11}}})) != null ? stack1 : "") + + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"boards") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0, blockParams, depths),"inverse":container.program(6, data, 0, blockParams, depths),"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":36,"column":11}}})) != null ? stack1 : "") + "
\r\n"; -},"useData":true}); +},"useData":true,"useDepths":true}); templates['profile.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { return "
\r\n \"Settings\"\r\n
\r\n"; },"3":function(container,depth0,helpers,partials,data) { @@ -475,7 +488,7 @@ templates['profile.hbs'] = template({"1":function(container,depth0,helpers,parti },"11":function(container,depth0,helpers,partials,data) { return " \"Pinterest\"\r\n"; },"13":function(container,depth0,helpers,partials,data) { - return "
\r\n \r\n Pinset\r\n \r\n \"Navigate\"\r\n \r\n Мой профиль\r\n \r\n
\r\n
\r\n

Мои доски

\r\n \"Create\"\r\n
\r\n"; + return "
\r\n \r\n Pinset\r\n \r\n \"Navigate\"\r\n \r\n Мой профиль\r\n \r\n
\r\n
\r\n

Мои доски

\r\n \"Create\"\r\n
\r\n"; },"15":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { From fbf8959454f96472372587ea4c17488e3307f4c0 Mon Sep 17 00:00:00 2001 From: wiseStann Date: Mon, 4 Nov 2024 18:08:56 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D0=B8=20=D1=80=D0=B5=D0=B4?= =?UTF-8?q?=D0=B0=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F,=20=D1=83=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=B4=D0=BE=D1=81=D0=BA=D0=B8,=20=D0=BF=D0=BE=D0=BF=D1=80?= =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=20=D1=81=D0=B5=D1=82=D0=BA=D1=83=20?= =?UTF-8?q?=D0=BF=D0=B8=D0=BD=D0=BE=D0=B2=20=D0=B8=20=D0=BF=D0=B0=D1=80?= =?UTF-8?q?=D1=83=20=D0=BE=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D1=87=D0=B8?= =?UTF-8?q?=D0=BA=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/icons/delete.svg | 2 ++ public/components/button/icon-button.hbs | 3 ++ public/components/button/icon-button.js | 30 ++++++++++++++++++++ public/components/complex/grid/grid.js | 4 +-- public/components/complex/pin/pin.css | 6 ---- public/constants.css | 3 ++ public/pages/profile/profile.css | 35 ++++++++++++++++++++++++ public/pages/profile/profile.js | 32 ++++++++++++++++++++-- public/precompiled.js | 16 +++++++++++ 9 files changed, 120 insertions(+), 11 deletions(-) create mode 100644 public/assets/icons/delete.svg create mode 100644 public/components/button/icon-button.hbs create mode 100644 public/components/button/icon-button.js diff --git a/public/assets/icons/delete.svg b/public/assets/icons/delete.svg new file mode 100644 index 0000000..ecaac4e --- /dev/null +++ b/public/assets/icons/delete.svg @@ -0,0 +1,2 @@ +
 \ No newline at end of file diff --git a/public/components/button/icon-button.hbs b/public/components/button/icon-button.hbs new file mode 100644 index 0000000..2d9a91c --- /dev/null +++ b/public/components/button/icon-button.hbs @@ -0,0 +1,3 @@ +
+ +
diff --git a/public/components/button/icon-button.js b/public/components/button/icon-button.js new file mode 100644 index 0000000..fa43d2b --- /dev/null +++ b/public/components/button/icon-button.js @@ -0,0 +1,30 @@ +'use strict' + +import { BaseComponent } from "../base.js" + +/** + * Component that is used to display button with icon inside of it. + */ +export class IconButtonComponent extends BaseComponent { + /** + * Creates an IconButtonComponent. + * @param {HTMLElement} parent - HTML element of the parent container. + * @param {String} iconPath - file path to the icon. + */ + constructor(parent, state) { + super(parent, state); + } + + /** + * Renders a template of IconButtonComponent. + * @returns rendered template of IconButtonComponent. + */ + renderTemplate() { + const template = Handlebars.templates['icon-button.hbs']; + const renderedTemplate = template({ + state: this.State + }); + + return renderedTemplate; + } +}; diff --git a/public/components/complex/grid/grid.js b/public/components/complex/grid/grid.js index 0298258..bc8b907 100644 --- a/public/components/complex/grid/grid.js +++ b/public/components/complex/grid/grid.js @@ -34,13 +34,10 @@ export class GridComponent extends BaseComponent { this.#pins = pins; this.#marginTop = marginTop; - let idx = 0; // Providing layout rebuild on resize events window.addEventListener('resize', (event) => { event.preventDefault(); - console.log("RESIZE:", idx++); - let body = document.body, html = document.documentElement; @@ -261,6 +258,7 @@ export class GridComponent extends BaseComponent { previewContainer.style.width = `${intWidth * PREVIEW_IMG_X_FACTOR + previewRightSide.clientWidth}px`; previewContainer.style.height = `${intHeight * PREVIEW_IMG_X_FACTOR + previewTopSide.clientHeight + previewBottomSide.clientHeight}px`; + previewContainer.style.marginTop = '3%'; // Create dark transparent background and add event listeners this.createBackgroundListeners(); diff --git a/public/components/complex/pin/pin.css b/public/components/complex/pin/pin.css index 9954f39..dbcf8c2 100644 --- a/public/components/complex/pin/pin.css +++ b/public/components/complex/pin/pin.css @@ -4,10 +4,6 @@ div[class^=pin__content-container] { flex-direction: column; } -/* div[class^=pin__content-container] { - transition: all 0.1s ease-in-out; -} */ - .pin__image-container { position: relative; width: 100%; @@ -16,13 +12,11 @@ div[class^=pin__content-container] { img[class^=pin__image] { border-radius: 20px; - transition: 0.5s; } .pin__image-container:hover img[class^=pin__image] { filter: brightness(70%); cursor: pointer; - transition: 0.5s; } div[class^=pin__image-preview-button] { diff --git a/public/constants.css b/public/constants.css index b8fa05d..7bf8077 100644 --- a/public/constants.css +++ b/public/constants.css @@ -58,4 +58,7 @@ --pinset-profile-user-name-text-color: #333333; --pinset-profile-user-edit-block-color: #757575; --pinset-profile-user-edit-block-hovered-color: #585858; + + --pinset-delete-button-color: #C20000; + --pinset-delete-button-hovered-color: #910000; } diff --git a/public/pages/profile/profile.css b/public/pages/profile/profile.css index d9105c1..94a2083 100644 --- a/public/pages/profile/profile.css +++ b/public/pages/profile/profile.css @@ -275,6 +275,41 @@ a[class^=profile__boards-header-nav-to]:hover { cursor: pointer; } +.icon-button__content-container { + width: 45px; + height: 45px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + transition: 0.5s; +} + +.icon-button__edit-img, +.icon-button__delete-img { + width: 40px; + height: 40px; +} + +.icon-button__content-container.icon-button__edit-img { + margin: 10px; + background-color: var(--pinset-profile-user-edit-block-color); +} + +.icon-button__content-container.icon-button__edit-img:hover { + background-color: var(--pinset-profile-user-edit-block-hovered-color); + cursor: pointer; + transition: 0.5s; +} + +.icon-button__content-container.icon-button__delete-img { + background-color: var(--pinset-delete-button-color); +} + +.icon-button__content-container.icon-button__delete-img:hover { + background-color: var(--pinset-delete-button-hovered-color); +} + .profile__boards-header-title p { margin: 0; font-size: 30px; diff --git a/public/pages/profile/profile.js b/public/pages/profile/profile.js index 8262519..75abdba 100644 --- a/public/pages/profile/profile.js +++ b/public/pages/profile/profile.js @@ -16,6 +16,8 @@ import { postMethod } from "../../modules/network.js"; import { BACKEND_LOGOUT_ROUTE } from "../../constants/api.js"; import { isAuthorized } from "../../modules/network.js"; +import { IconButtonComponent as IconButton } from "../../components/button/icon-button.js"; + /** * Page of a user profile. */ @@ -76,6 +78,7 @@ export class ProfilePageComponent extends BaseComponent { this.addSearchInputsListeners(); this.addBoardsSearchBarListener(); this.addProfileImgListener(); + this.addBoardDetailsIconListener(); this.addBoardListener(); return renderedTemplate; @@ -125,7 +128,6 @@ export class ProfilePageComponent extends BaseComponent { } } - const matchedBoardsComponent = new BoardGrid(this.Parent, matchedBoards, this.State.currentUser); const renderedMatchedBoards = matchedBoardsComponent.renderTemplate(); const boardsContainer = document.querySelector('.profile__boards-container'); @@ -135,6 +137,8 @@ export class ProfilePageComponent extends BaseComponent { boardsContainer.insertAdjacentHTML('beforeend', renderedMatchedBoards); this.resizeBoardsCovers(); + this.addBoardDetailsIconListener(); + this.addBoardListener(); } /** @@ -243,13 +247,15 @@ export class ProfilePageComponent extends BaseComponent { } /** - * + * Creates a listener of board click event. */ addBoardListener() { const pinSet = [ { PinID: 1, imageOnly: true, + AuthorName: "Mary Jane", + AuthorFollowersNumber: 100, MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", BoardID: 1, }, @@ -716,6 +722,14 @@ export class ProfilePageComponent extends BaseComponent { document.querySelector('.profile__boards-header-title p').textContent = boardTitle; const headerTitleContainer = document.querySelector('.profile__boards-header-title'); headerTitleContainer.removeChild(document.querySelector('.profile__boards-header-create-board-btn')); + headerTitleContainer.insertAdjacentHTML('beforeend', new IconButton(this.Parent, { + className: 'icon-button__edit-img', + iconPath: './assets/icons/edit.svg', + }).renderTemplate()); + headerTitleContainer.insertAdjacentHTML('beforeend', new IconButton(this.Parent, { + className: 'icon-button__delete-img', + iconPath: './assets/icons/delete.svg', + }).renderTemplate()); // Update search input bar headerSearchBlock.removeChild(headerSearchBlock.querySelector('.searchinput__content-container')); @@ -744,4 +758,18 @@ export class ProfilePageComponent extends BaseComponent { }); } } + + /** + * Creates a listener of board details icon click events. + */ + addBoardDetailsIconListener() { + const detailsIcons = document.querySelectorAll('.profile__board-cover-more-icon'); + + for (const icon of detailsIcons) { + icon.addEventListener('click', (event) => { + event.preventDefault(); + event.stopImmediatePropagation(); + }); + } + } }; diff --git a/public/precompiled.js b/public/precompiled.js index 2606b4e..3ebb21e 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -100,6 +100,22 @@ templates['button.hbs'] = template({"1":function(container,depth0,helpers,partia + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"iconRight") : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":5,"column":1},"end":{"line":5,"column":68}}})) != null ? stack1 : "") + "\r\n\r\n"; },"useData":true}); +templates['icon-button.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { + var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return "
\r\n \r\n
\r\n"; +},"useData":true}); templates['grid.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1;