Merge pull request #21 from frontend-park-mail-ru/dev-15

Dev-15: страница доски
frontend-park-mail-ru · Nov 4, 2024 · a1b51ca · a1b51ca
2 parents fc9557b + fbf8959
commit a1b51ca
Show file tree

Hide file tree

Showing 28 changed files with 793 additions and 81 deletions.
diff --git a/public/app.js b/public/app.js
diff --git a/public/assets/icons/delete.svg b/public/assets/icons/delete.svg
diff --git a/public/components/base/base.js → public/components/base.js b/public/components/base/base.js → public/components/base.js
diff --git 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
@@ -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/button/icon-button.hbs b/public/components/button/icon-button.hbs
@@ -0,0 +1,3 @@
+<div class="icon-button__content-container {{state.className}}">
+    <img class="{{state.className}}" src="{{state.iconPath}}">
+</div>
diff --git a/public/components/button/icon-button.js 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
@@ -1,6 +1,6 @@
 'use strict';
 
-import { BaseComponent } from '../../base/base.js';
+import { BaseComponent } from '../../base.js';
 
 import { PinComponent } from '../pin/pin.js';
 
@@ -21,15 +21,18 @@ 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;
 
 		// Providing layout rebuild on resize events
 		window.addEventListener('resize', (event) => {
@@ -51,7 +54,6 @@ export class GridComponent extends BaseComponent {
 			}
 
 			this.buildLayout();
-
 		}, true);
 	}
 
@@ -83,7 +85,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 +140,7 @@ export class GridComponent extends BaseComponent {
 		let newColumnN = Math.floor(this.parentContainerWidth / this.parentContainerColumnsRatio);
 		if (newColumnN == 0)
 			newColumnN = 1;
+
 		return newColumnN;
 	}
 
@@ -140,7 +150,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,
@@ -248,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/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
@@ -4,24 +4,19 @@ div[class^=pin__content-container] {
 	flex-direction: column;
 }
 
-div[class^=pin__content-container] {
-    transition: all 0.2s ease-in-out;
-}
-
 .pin__image-container {
+	position: relative;
 	width: 100%;
 	height: 100%;
 }
 
 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] {
@@ -30,7 +25,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
@@ -5,12 +5,13 @@
 			<img src="./assets/icons/magnifier.svg" alt="Preview">
 		</div>
 	</div>
-	<div class="pin__author-container-{{pin.PinID}}">
-		{{!-- <img class="pin__author-avatar" src="{{pin.AuthorAvatar}}"> --}}
-		<img class="pin__author-avatar" src="./assets/imgs/avatar.jpg">
-		<div class="pin__author-info">
-			<p class="pin__author-name">{{{pin.AuthorName}}}</p>
-			<p class="pin__author-followers-number">{{{pin.AuthorFollowersNumber}}} Followers</p>
+	{{#unless pin.imageOnly}}
+		<div class="pin__author-container-{{pin.PinID}}">
+			<img class="pin__author-avatar" src="{{pin.AuthorAvatar}}">
+			<div class="pin__author-info">
+				<p class="pin__author-name">{{{pin.AuthorName}}}</p>
+				<p class="pin__author-followers-number">{{{pin.AuthorFollowersNumber}}} Followers</p>
+			</div>
 		</div>
-	</div>
+	{{/unless}}
 </div>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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/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
@@ -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
@@ -7,7 +7,7 @@
                 <div class="profile__board-info-container-{{this.boardID}}">
                     <div class="profile__board-title-container">
                         <p class="profile__board-title">{{{this.title}}}</p>
-                        {{#if profile.currentUser}}
+                        {{#if ../profile.currentUser}}
                             {{#if this.private}}
                                 <img src="./assets/icons/private.svg" alt="Private">
                             {{/if}}

diff --git 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;