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

fix(RSS-ECOMM-5_25): modal close #372

Merged
merged 2 commits into from
Jun 17, 2024
Merged
Changes from 1 commit
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
Next Next commit
fix: modal close
Kleostro committed Jun 17, 2024
commit 9891f8a1444856c653a38b5308686a6187eb4037
44 changes: 18 additions & 26 deletions src/entities/AboutFullCard/view/AboutFullCardView.ts
Original file line number Diff line number Diff line change
@@ -2,12 +2,13 @@ import type { AboutData, AboutFeedback } from '@/shared/types/validation/aboutDa

import AboutShortCardView from '@/entities/AboutShortCard/view/AboutShortCardView.ts';
import LinkModel from '@/shared/Link/model/LinkModel.ts';
import getStore from '@/shared/Store/Store.ts';
import observeStore, { selectCurrentLanguage, selectCurrentTheme } from '@/shared/Store/observer.ts';
import ABOUT_TEXT from '@/shared/constants/about.ts';
import { LINK_DETAILS } from '@/shared/constants/links.ts';
import changeColor from '@/shared/utils/changeColor.ts';
import createBaseElement from '@/shared/utils/createBaseElement.ts';
import getCurrentAppTheme from '@/shared/utils/getCurrentAppTheme.ts';
import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
import hexToRgba from '@/shared/utils/hexToRgba.ts';

import styles from './aboutFullCardView.module.scss';
@@ -42,27 +43,27 @@ class AboutFullCardView extends AboutShortCardView {

const title = createBaseElement({
cssClasses: [styles.title],
innerContent: ABOUT_TEXT[getStore().getState().currentLanguage].CHECKLIST,
innerContent: ABOUT_TEXT[getCurrentLanguage()].CHECKLIST,
tag: 'h3',
});

changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
changeColor(title, this.params.coverColor[getCurrentAppTheme()].color);
list.append(title);
this.params.checklist[getStore().getState().currentLanguage].forEach((item) => {
this.params.checklist[getCurrentLanguage()].forEach((item) => {
list.append(this.createCheckItem(item));
});

observeStore(selectCurrentLanguage, () => {
list.innerHTML = '';
title.innerText = ABOUT_TEXT[getStore().getState().currentLanguage].CHECKLIST;
title.innerText = ABOUT_TEXT[getCurrentLanguage()].CHECKLIST;
list.append(title);
this.params.checklist[getStore().getState().currentLanguage].forEach((item) => {
this.params.checklist[getCurrentLanguage()].forEach((item) => {
list.append(this.createCheckItem(item));
});
});

observeStore(selectCurrentTheme, () => {
changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
changeColor(title, this.params.coverColor[getCurrentAppTheme()].color);
});
return list;
}
@@ -71,14 +72,11 @@ class AboutFullCardView extends AboutShortCardView {
const listItem = createBaseElement({ cssClasses: [styles.feedbackListItem], tag: 'li' });
const label = createBaseElement({
cssClasses: [styles.label, styles.feedbackLabel],
innerContent: `β€” ${item.text[getStore().getState().currentLanguage].text}`,
innerContent: `β€” ${item.text[getCurrentLanguage()].text}`,
tag: 'label',
});

label.style.backgroundColor = hexToRgba(
this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
0.2,
);
label.style.backgroundColor = hexToRgba(this.params.coverColor[getCurrentAppTheme()].color, 0.2);

const href = `https://github.com/${item.from}`;
const background = `url(${`/img/png/${item.from}Avatar.png`})`;
@@ -93,21 +91,15 @@ class AboutFullCardView extends AboutShortCardView {
avatar.getHTML().style.backgroundImage = background;
from.getHTML().append(avatar.getHTML());

changeColor(from.getHTML(), this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
changeColor(from.getHTML(), this.params.coverColor[getCurrentAppTheme()].color);

observeStore(selectCurrentLanguage, () => {
label.innerText = `β€” ${item.text[getStore().getState().currentLanguage].text}`;
label.innerText = `β€” ${item.text[getCurrentLanguage()].text}`;
});

observeStore(selectCurrentTheme, () => {
changeColor(
from.getHTML(),
this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
);
label.style.backgroundColor = hexToRgba(
this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
0.2,
);
changeColor(from.getHTML(), this.params.coverColor[getCurrentAppTheme()].color);
label.style.backgroundColor = hexToRgba(this.params.coverColor[getCurrentAppTheme()].color, 0.2);
});

listItem.append(from.getHTML(), label);
@@ -122,22 +114,22 @@ class AboutFullCardView extends AboutShortCardView {

const title = createBaseElement({
cssClasses: [styles.title],
innerContent: ABOUT_TEXT[getStore().getState().currentLanguage].FEEDBACK,
innerContent: ABOUT_TEXT[getCurrentLanguage()].FEEDBACK,
tag: 'h3',
});

changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
changeColor(title, this.params.coverColor[getCurrentAppTheme()].color);
list.append(title);
this.params.feedback.forEach((item) => {
list.append(this.createFeedbackItem(item));
});

observeStore(selectCurrentLanguage, () => {
title.innerText = ABOUT_TEXT[getStore().getState().currentLanguage].FEEDBACK;
title.innerText = ABOUT_TEXT[getCurrentLanguage()].FEEDBACK;
});

observeStore(selectCurrentTheme, () => {
changeColor(title, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
changeColor(title, this.params.coverColor[getCurrentAppTheme()].color);
});
return list;
}
48 changes: 20 additions & 28 deletions src/entities/AboutShortCard/view/AboutShortCardView.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import type { AboutData, AboutLabel } from '@/shared/types/validation/aboutData';

import LinkModel from '@/shared/Link/model/LinkModel.ts';
import getStore from '@/shared/Store/Store.ts';
import observeStore, { selectCurrentLanguage, selectCurrentTheme } from '@/shared/Store/observer.ts';
import { LINK_DETAILS } from '@/shared/constants/links.ts';
import SVG_DETAILS from '@/shared/constants/svg.ts';
import changeColor from '@/shared/utils/changeColor.ts';
import createBaseElement from '@/shared/utils/createBaseElement.ts';
import createSVGUse, { changeFill, changeStroke } from '@/shared/utils/createSVGUse.ts';
import getCurrentAppTheme from '@/shared/utils/getCurrentAppTheme.ts';
import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';

import styles from './aboutShortCardView.module.scss';

@@ -40,36 +41,34 @@ class AboutShortCardView {
tag: 'div',
});

cover.style.backgroundColor =
this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
cover.style.backgroundColor = this.params.coverColor[getCurrentAppTheme()].color;

observeStore(selectCurrentTheme, () => {
cover.style.backgroundColor =
this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
cover.style.backgroundColor = this.params.coverColor[getCurrentAppTheme()].color;
});
return cover;
}

private createFullName(): HTMLSpanElement {
const fullName = createBaseElement({
cssClasses: [styles.fullName],
innerContent: this.params.userName[getStore().getState().currentLanguage].text,
innerContent: this.params.userName[getCurrentLanguage()].text,
tag: 'span',
});

const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg');
svg.append(createSVGUse(SVG_DETAILS.PROFILE));
changeStroke(svg, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
changeStroke(svg, this.params.coverColor[getCurrentAppTheme()].color);

observeStore(selectCurrentTheme, () => {
changeStroke(svg, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
changeStroke(svg, this.params.coverColor[getCurrentAppTheme()].color);
});
fullName.append(svg);

observeStore(selectCurrentLanguage, () => {
const textNode = [...fullName.childNodes].find((child) => child.nodeType === Node.TEXT_NODE);
if (textNode) {
textNode.textContent = this.params.userName[getStore().getState().currentLanguage].text;
textNode.textContent = this.params.userName[getCurrentLanguage()].text;
}
});
return fullName;
@@ -85,16 +84,10 @@ class AboutShortCardView {
text: this.params.github.name,
});

changeColor(
githubName.getHTML(),
this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
);
changeColor(githubName.getHTML(), this.params.coverColor[getCurrentAppTheme()].color);

observeStore(selectCurrentTheme, () => {
changeColor(
githubName.getHTML(),
this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color,
);
changeColor(githubName.getHTML(), this.params.coverColor[getCurrentAppTheme()].color);
});

return githubName;
@@ -142,14 +135,13 @@ class AboutShortCardView {
tag: 'span',
});

labelName.style.color = item.color[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
label.style.backgroundColor = item.backgroundColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
labelName.style.color = item.color[getCurrentAppTheme()].color;
label.style.backgroundColor = item.backgroundColor[getCurrentAppTheme()].color;
label.append(labelName);

observeStore(selectCurrentTheme, () => {
labelName.style.color = item.color[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
label.style.backgroundColor =
item.backgroundColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color;
labelName.style.color = item.color[getCurrentAppTheme()].color;
label.style.backgroundColor = item.backgroundColor[getCurrentAppTheme()].color;
});
return label;
}
@@ -177,24 +169,24 @@ class AboutShortCardView {
private createPosition(): HTMLSpanElement {
const position = createBaseElement({
cssClasses: [styles.position],
innerContent: this.params.position[getStore().getState().currentLanguage].text,
innerContent: this.params.position[getCurrentLanguage()].text,
tag: 'span',
});

const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg');
svg.append(createSVGUse(SVG_DETAILS.STAR));
changeFill(svg, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
changeFill(svg, this.params.coverColor[getCurrentAppTheme()].color);

observeStore(selectCurrentTheme, () => {
changeFill(svg, this.params.coverColor[getStore().getState().isAppThemeLight ? 'true' : 'false'].color);
changeFill(svg, this.params.coverColor[getCurrentAppTheme()].color);
});

position.append(svg);

observeStore(selectCurrentLanguage, () => {
const textNode = [...position.childNodes].find((child) => child.nodeType === Node.TEXT_NODE);
if (textNode) {
textNode.textContent = this.params.position[getStore().getState().currentLanguage].text;
textNode.textContent = this.params.position[getCurrentLanguage()].text;
}
});
return position;
@@ -203,12 +195,12 @@ class AboutShortCardView {
private createShortDescription(): HTMLSpanElement {
const shortDescription = createBaseElement({
cssClasses: [styles.shortDescription],
innerContent: this.params.shortDescription[getStore().getState().currentLanguage].text,
innerContent: this.params.shortDescription[getCurrentLanguage()].text,
tag: 'span',
});

observeStore(selectCurrentLanguage, () => {
shortDescription.textContent = this.params.shortDescription[getStore().getState().currentLanguage].text;
shortDescription.textContent = this.params.shortDescription[getCurrentLanguage()].text;
});
return shortDescription;
}
6 changes: 3 additions & 3 deletions src/pages/AboutUsPage/view/AboutUsPageView.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import LinkModel from '@/shared/Link/model/LinkModel.ts';
import getStore from '@/shared/Store/Store.ts';
import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
import { LINK_DETAILS } from '@/shared/constants/links.ts';
import { PAGE_DESCRIPTION } from '@/shared/constants/pages.ts';
import SVG_DETAILS from '@/shared/constants/svg.ts';
import createBaseElement from '@/shared/utils/createBaseElement.ts';
import createSVGUse from '@/shared/utils/createSVGUse.ts';
import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';

import styles from './aboutUsPageView.module.scss';

@@ -62,12 +62,12 @@ class AboutUsPageView {
private createTitle(): HTMLHeadingElement {
const title = createBaseElement({
cssClasses: [styles.title],
innerContent: PAGE_DESCRIPTION[getStore().getState().currentLanguage].ABOUT,
innerContent: PAGE_DESCRIPTION[getCurrentLanguage()].ABOUT,
tag: 'h1',
});

observeStore(selectCurrentLanguage, () => {
title.innerText = PAGE_DESCRIPTION[getStore().getState().currentLanguage].ABOUT;
title.innerText = PAGE_DESCRIPTION[getCurrentLanguage()].ABOUT;
});
return title;
}
2 changes: 2 additions & 0 deletions src/shared/Modal/view/ModalView.ts
Original file line number Diff line number Diff line change
@@ -20,6 +20,7 @@ class ModalView {
document.addEventListener('click', (event) => {
if (event.target === this.modalOverlay && !this.modalContent.classList.contains(styles.modalContent_hidden)) {
this.hide(this.callback);
this.callback = (): void => {};
}
});

@@ -30,6 +31,7 @@ class ModalView {
!this.modalContent.classList.contains(styles.modalContent_hidden)
) {
this.hide(this.callback);
this.callback = (): void => {};
}
});
}
4 changes: 4 additions & 0 deletions src/shared/utils/getCurrentAppTheme.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import getStore from '../Store/Store.ts';

const getCurrentAppTheme = (): 'false' | 'true' => (getStore().getState().isAppThemeLight ? 'true' : 'false');
export default getCurrentAppTheme;