Merge pull request #23 from frontend-park-mail-ru/dev-10

Dev 10: add lookpin page

package.json

@@ -1,7 +1,7 @@
 {
   "scripts": {
     "compile": "globstar -- npx handlebars public/**/*.hbs -f public/precompiled.js",
-    "start": "node server/server.js",
+    "start": "npm run compile && node server/server.js",
     "lint": "eslint ./public/**/*.js",
     "lint:fix": "eslint ./public/**/*.js --fix"
   },

public/components/boards-list/boards-list.hbs

@@ -2,7 +2,7 @@
     {{#if boards}}
         {{#each boards}}
             <div class="savebox__board-selection savebox__board-selection-{{this.BoardName}}">
-                <input class="savebox__board-checkbox" type="checkbox" id="checkbox-{{this.BoardName}}" value="{{this.BoardName}}">
+                <input class="savebox__board-checkbox" type="radio" id="checkbox-{{this.BoardName}}" value="{{this.BoardName}}">
                 <div class="savebox__board-cover-container">
                     <img class="savebox__board-cover" src="{{this.BoardCoverUrl}}" alt="cover">
                 </div>

public/components/boards-list/boards-list.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { BaseComponent } from "../base.js";
+import { BaseComponent } from "../base/base.js";
 
 /**
  * A component that is used to display all boards of currently authorized user.

public/components/button/button.js

@@ -1,57 +1,57 @@
 'use strict';
 
-import { BaseComponent } from '../base.js';
+import { BaseComponent } from '../base/base.js';
 
 export class ButtonComponent extends BaseComponent {
-    #clickHandler = () => { };
-
-    /**
-	 * Creates an instance of ButtonComponent.
-	 * @constructor
-	 * @param {HTMLElement} parent - The parent element where the button will be rendered.
-	 * @param {Object} [state] - The initial state of the button component. (optional)
-	 * @param {Function} [changeHandler] - The function that will handle the button events. (optional)
-	 */
-    constructor(parent, state, clickHandler) {
-        super(parent, state);
-        this.#clickHandler = clickHandler || this.#clickHandler;
-    }
-
-    /**
-	 * Renders the button component.
-	 * @returns {string} - The rendered HTML template of the button.
-	 */
-    renderTemplate() {
-        const template = Handlebars.templates['button.hbs'];
-        const renderedTemplate = template(this.State);
-
-        return renderedTemplate;
-    }
-
-    /**
-	 * Handles the button click event.
-	 * @param {Event} event - The button click event object.
-	 */
-    handleButtonClick(event) {
-        event.stopPropagation();
-        if (typeof this.#clickHandler === 'function' && !this.State.disabled) {
-            this.#clickHandler(event);
-        }
-    }
-
-    /**
-	 * Sets the click event handler for the button.
-	 * @param {Function} changeHandler - The function to handle the button click event.
-	 */
-    setClickHandler(clickHandler) {
-        this.#clickHandler = clickHandler;
-    }
-
-    /**
-	 * Gets the current click event handler for the button.
-	 * @returns {Function} - The current click event handler.
-	 */
-    getClickHandler() {
-        return this.#clickHandler;
+  #clickHandler = () => {};
+
+  /**
+   * Creates an instance of ButtonComponent.
+   * @constructor
+   * @param {HTMLElement} parent - The parent element where the button will be rendered.
+   * @param {Object} [state] - The initial state of the button component. (optional)
+   * @param {Function} [changeHandler] - The function that will handle the button events. (optional)
+   */
+  constructor(parent, state, clickHandler) {
+    super(parent, state);
+    this.#clickHandler = clickHandler || this.#clickHandler;
+  }
+
+  /**
+   * Renders the button component.
+   * @returns {string} - The rendered HTML template of the button.
+   */
+  renderTemplate() {
+    const template = Handlebars.templates['button.hbs'];
+    const renderedTemplate = template(this.State);
+
+    return renderedTemplate;
+  }
+
+  /**
+   * Handles the button click event.
+   * @param {Event} event - The button click event object.
+   */
+  handleButtonClick(event) {
+    event.stopPropagation();
+    if (typeof this.#clickHandler === 'function' && !this.State.disabled) {
+      this.#clickHandler(event);
     }
+  }
+
+  /**
+   * Sets the click event handler for the button.
+   * @param {Function} changeHandler - The function to handle the button click event.
+   */
+  setClickHandler(clickHandler) {
+    this.#clickHandler = clickHandler;
+  }
+
+  /**
+   * Gets the current click event handler for the button.
+   * @returns {Function} - The current click event handler.
+   */
+  getClickHandler() {
+    return this.#clickHandler;
+  }
 }

public/components/button/icon-button.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { BaseComponent } from "../base.js"
+import { BaseComponent } from "../base/base.js"
 
 /**
  * Component that is used to display button with icon inside of it.

public/components/complex/grid/grid.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import { BaseComponent } from '../../base.js';
+import { BaseComponent } from '../../base/base.js';
 
 import { PinComponent } from '../pin/pin.js';
 

public/components/complex/header/header.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import { BaseComponent } from '../../base.js';
+import { BaseComponent } from '../../base/base.js';
 
 import { SearchInputComponent as SeachInput } from '../../search-input/search-input.js';
 import { ButtonComponent as Button } from '../../button/button.js';

public/components/complex/pin/pin.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import { BaseComponent } from '../../base.js';
+import { BaseComponent } from '../../base/base.js';
 
 /**
  * Represents an Image Card Component.

public/components/complex/preview/preview.css

@@ -50,6 +50,7 @@
     cursor: pointer;
 }
 
+
 .preview__author-info {
     display: flex;
     flex-direction: column;

public/components/complex/preview/preview.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { BaseComponent } from '../../base.js';
+import { BaseComponent } from '../../base/base.js';
 
 export class PreviewComponent extends BaseComponent {
     /**

public/components/complex/savebox/savebox.css

@@ -42,6 +42,20 @@
     transition: 0.5s;
 }
 
+.savebox__choose-board-button {
+    margin-top: 5px;
+    width: 100%;
+    height: 15%;
+    outline: none;
+    border: none;
+    background-color: var(--project-primary-red);
+    font-size: 18px;
+    color: var(--pin-create-new-board-button-text-color);
+    border-radius: 10px;
+    cursor: pointer;
+    transition: 0.5s;
+}
+
 .savebox__create-board-button:hover {
     background-color: var(--pin-create-new-board-button-hovered-color);
     transition: 0.5s;

public/components/complex/savebox/savebox.hbs

@@ -4,6 +4,7 @@
         <div class="savebox__boards-list-container">
             {{{boardsList}}}
         </div>
+        <button class="savebox__choose-board-button" type="submit">Выбрать</button>
         <button class="savebox__create-board-button" type="submit">Создать доску</button>
     </div>
 </div>

public/components/complex/savebox/savebox.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { BaseComponent } from '../../base.js';
+import { BaseComponent } from '../../base/base.js';
 
 import { SearchInputComponent as SearchInput } from '../../search-input/search-input.js';
 

public/components/details-menu/details-menu.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { BaseComponent } from "../base.js"
+import { BaseComponent } from "../base/base.js"
 
 /**
  * A component that is used to display options when clicking on 'more' button.

public/components/drop-down-menu/drop-down-menu.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { BaseComponent } from "../base.js"
+import { BaseComponent } from "../base/base.js"
 
 /**
  * Drop down menu component which is used on profile icon hover.

public/components/input-text-area/input-text-area.css

@@ -0,0 +1,37 @@
+.input-text-area {
+    display: flex;
+    flex-direction: column;
+}
+
+.textarea-container {
+    display: flex;
+    align-items: center;
+}
+
+.icon {
+    display: flex;
+    align-items: center;
+    margin-right: 10px; /* Отступ между иконкой и полем */
+}
+
+.icon img {
+    width: 20px; /* Размер иконки */
+    height: 20px;
+}
+
+.input-area {
+    flex-grow: 1; /* Заполняет оставшееся пространство */
+    min-height: 50px;
+    resize: none;
+    padding: 8px;
+    font-size: 16px;
+    border: 1px solid var(--input-border-color);
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+
+.input-area::placeholder {
+    text-align: left; /* Центрирует текст placeholder */
+    color: var(--input-label-color); /* Цвет текста для placeholder */
+}

public/components/input-text-area/input-text-area.hbs

@@ -0,0 +1,19 @@
+<div class="input-text-area">
+    <label class="input-text-area-title">{{title}}</label>
+    <div class="textarea-container">
+        {{#if icon}}
+            <span class="icon" style="margin-right: {{iconMargin}};">
+                <img src="{{icon}}" alt="icon" />
+            </span>
+        {{/if}}
+        <textarea
+            class="input-area"
+            {{#if placeHolder}} placeholder="{{placeHolder}}" {{/if}}
+            {{#if maxLength}} maxlength="{{maxLength}}" {{/if}}
+            {{#if fontSize}} style="font-size: {{fontSize}};" {{/if}}
+            {{#if minHeight}} style="min-height: {{minHeight}};" {{/if}}
+            {{#if maxHeight}} style="max-height: {{maxHeight}};" {{/if}}
+            {{#if autoExpand}} oninput="this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'" {{/if}}
+        ></textarea>
+    </div>
+</div>

public/components/input-text-area/input-text-area.js

@@ -0,0 +1,94 @@
+'use strict';
+
+import { BaseComponent } from '../base/base.js';
+
+/**
+ * Represents a Text Area Component.
+ * @class
+ */
+export class TextAreaComponent extends BaseComponent {
+    /**
+     * The function that will handle the text area input event.
+     * @type {Function}
+     */
+    #inputHandler = () => {};
+
+    /**
+     * Creates an instance of TextAreaComponent.
+     * @constructor
+     * @param {HTMLElement} parent - The parent element where the text area will be rendered.
+     * @param {Object} [state] - The initial state of the text area component. (optional)
+     * @param {Function} [inputHandler] - The function that will handle the text area input event. (optional)
+     */
+    constructor(parent, state = {}, inputHandler = () => {}) {
+        super(parent, state);
+        this.#inputHandler = inputHandler;
+    }
+
+    /**
+     * Renders the text area component.
+     * @returns {string} - The rendered HTML template of the text area.
+     */
+    renderTemplate() {
+        const template = Handlebars.templates['input-text-area.hbs'];
+        const renderedTemplate = template(this.State);
+
+        const parent = this.Parent;
+        if (parent) {
+            parent.innerHTML += renderedTemplate;
+        }
+
+        this.attachEvents();
+
+        return renderedTemplate;
+    }
+
+    /**
+     * Attaches events to the rendered text area component.
+     */
+    attachEvents() {
+        const parent = this.Parent;
+        if (parent instanceof HTMLElement) {
+            const textAreaElement = parent.querySelector('.input-area');
+            if (textAreaElement) {
+                textAreaElement.addEventListener('input', (event) => this.handleInput(event));
+
+                if (this.State.autoExpand) {
+                    textAreaElement.style.overflowY = 'hidden';
+                }
+            }
+        }
+    }
+
+    /**
+     * Handles the input event for the text area.
+     * Adjusts the height if autoExpand is enabled.
+     * @param {Event} event - The text area input event object.
+     */
+    handleInput(event) {
+        if (typeof this.#inputHandler === 'function') {
+            this.#inputHandler(event.target.value);
+        }
+
+        if (this.State.autoExpand) {
+            event.target.style.height = 'auto';
+            event.target.style.height = `${event.target.scrollHeight}px`;
+        }
+    }
+
+    /**
+     * Sets the input event handler for the text area.
+     * @param {Function} inputHandler - The function to handle the text area input event.
+     */
+    setInputHandler(inputHandler) {
+        this.#inputHandler = inputHandler;
+    }
+
+    /**
+     * Gets the current input event handler for the text area.
+     * @returns {Function} - The current input event handler.
+     */
+    getInputHandler() {
+        return this.#inputHandler;
+    }
+}