diff --git a/src/entities/AboutFullCard/view/AboutFullCardView.ts b/src/entities/AboutFullCard/view/AboutFullCardView.ts index 5eeaf4f7..0861c86b 100644 --- a/src/entities/AboutFullCard/view/AboutFullCardView.ts +++ b/src/entities/AboutFullCard/view/AboutFullCardView.ts @@ -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_DETAIL } 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; } diff --git a/src/entities/AboutShortCard/view/AboutShortCardView.ts b/src/entities/AboutShortCard/view/AboutShortCardView.ts index ed43eef0..2c472391 100644 --- a/src/entities/AboutShortCard/view/AboutShortCardView.ts +++ b/src/entities/AboutShortCard/view/AboutShortCardView.ts @@ -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_DETAIL } from '@/shared/constants/links.ts'; import SVG_DETAIL 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,12 +41,10 @@ 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; } @@ -53,23 +52,23 @@ class AboutShortCardView { 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_DETAIL.SVG_URL, 'svg'); svg.append(createSVGUse(SVG_DETAIL.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,16 +169,16 @@ 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_DETAIL.SVG_URL, 'svg'); svg.append(createSVGUse(SVG_DETAIL.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); @@ -194,7 +186,7 @@ class AboutShortCardView { 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; } diff --git a/src/pages/AboutUsPage/view/AboutUsPageView.ts b/src/pages/AboutUsPage/view/AboutUsPageView.ts index e8c3d99f..df326b43 100644 --- a/src/pages/AboutUsPage/view/AboutUsPageView.ts +++ b/src/pages/AboutUsPage/view/AboutUsPageView.ts @@ -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_DETAIL } from '@/shared/constants/links.ts'; import { PAGE_DESCRIPTION } from '@/shared/constants/pages.ts'; import SVG_DETAIL 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; } diff --git a/src/shared/Modal/view/ModalView.ts b/src/shared/Modal/view/ModalView.ts index 16141234..4926adf8 100644 --- a/src/shared/Modal/view/ModalView.ts +++ b/src/shared/Modal/view/ModalView.ts @@ -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 => {}; } }); } diff --git a/src/shared/utils/getCurrentAppTheme.ts b/src/shared/utils/getCurrentAppTheme.ts new file mode 100644 index 00000000..23037a46 --- /dev/null +++ b/src/shared/utils/getCurrentAppTheme.ts @@ -0,0 +1,4 @@ +import getStore from '../Store/Store.ts'; + +const getCurrentAppTheme = (): 'false' | 'true' => (getStore().getState().isAppThemeLight ? 'true' : 'false'); +export default getCurrentAppTheme;