Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev 10: add lookpin page #23

Merged
merged 15 commits into from
Nov 18, 2024
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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"
},
Expand Down
428 changes: 247 additions & 181 deletions public/app.js

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions public/assets/icons/upload.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
2 changes: 1 addition & 1 deletion public/components/boards-list/boards-list.js
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
102 changes: 51 additions & 51 deletions public/components/button/button.js
Original file line number Diff line number Diff line change
@@ -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;
}
}
2 changes: 1 addition & 1 deletion public/components/button/icon-button.js
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 1 addition & 1 deletion public/components/complex/grid/grid.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use strict';

import { BaseComponent } from '../../base.js';
import { BaseComponent } from '../../base/base.js';

import { PinComponent } from '../pin/pin.js';

Expand Down
2 changes: 1 addition & 1 deletion public/components/complex/header/header.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion public/components/complex/pin/pin.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use strict';

import { BaseComponent } from '../../base.js';
import { BaseComponent } from '../../base/base.js';

/**
* Represents an Image Card Component.
Expand Down
2 changes: 1 addition & 1 deletion public/components/complex/preview/preview.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use strict'

import { BaseComponent } from '../../base.js';
import { BaseComponent } from '../../base/base.js';

export class PreviewComponent extends BaseComponent {
/**
Expand Down
2 changes: 1 addition & 1 deletion public/components/complex/savebox/savebox.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion public/components/details-menu/details-menu.js
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 1 addition & 1 deletion public/components/drop-down-menu/drop-down-menu.js
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
37 changes: 37 additions & 0 deletions public/components/input-text-area/input-text-area.css
Original file line number Diff line number Diff line change
@@ -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 #ccc;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Цвет в cssVars

border-radius: 4px;
box-sizing: border-box;
}


.input-area::placeholder {
text-align: left; /* Центрирует текст placeholder */
color: #888; /* Цвет текста для placeholder */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

В cssVars

}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Перевод строки в конце файла

19 changes: 19 additions & 0 deletions public/components/input-text-area/input-text-area.hbs
Original file line number Diff line number Diff line change
@@ -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>
94 changes: 94 additions & 0 deletions public/components/input-text-area/input-text-area.js
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading