From 0b2a9879861077c3f826ce827210c8ec588ff55c Mon Sep 17 00:00:00 2001 From: rasulov1337 <117843890+rasulov1337@users.noreply.github.com> Date: Sun, 10 Nov 2024 21:22:18 +0300 Subject: [PATCH] rewrite adpage to use reactivity --- components/AdCard/AdCard.hbs | 1 - components/AdCard/AdCard.ts | 17 +- components/AdPage/AdPage.hbs | 13 +- components/AdPage/AdPage.sass | 206 ---------------- components/AdPage/AdPage.scss | 225 ++++++++++++++++++ components/AdPage/AdPage.ts | 113 ++++----- .../ReactiveComponent/ReactiveComponent.ts | 1 - index.ts | 4 +- modules/Utils.ts | 1 + style.sass | 32 +-- 10 files changed, 304 insertions(+), 309 deletions(-) delete mode 100644 components/AdPage/AdPage.sass create mode 100644 components/AdPage/AdPage.scss diff --git a/components/AdCard/AdCard.hbs b/components/AdCard/AdCard.hbs index 91fbb32d..5a2b78ca 100644 --- a/components/AdCard/AdCard.hbs +++ b/components/AdCard/AdCard.hbs @@ -6,7 +6,6 @@ src='{{currentImagePath}}' alt='Housing card image' /> -

{{toShowIndex}}

{{#each images}} diff --git a/components/AdCard/AdCard.ts b/components/AdCard/AdCard.ts index 4bfab905..8638e983 100644 --- a/components/AdCard/AdCard.ts +++ b/components/AdCard/AdCard.ts @@ -27,7 +27,7 @@ export default class AdCard extends ReactiveComponent { toShowIndex: 0, }, computedValues: { - currentImagePath: (state: Record) => { + currentImagePath: (state) => { return data.images[state.toShowIndex as number].path; }, }, @@ -43,9 +43,11 @@ export default class AdCard extends ReactiveComponent { router.navigateTo(`/ads/?id=${this.#data.id}`); }; - this.thisElement - .querySelector('.js-like-button')! - .addEventListener('click', this.#addToFavorite); + ( + this.thisElement.querySelector( + '.js-like-button' + ) as HTMLButtonElement + ).onclick = this.#addToFavorite; setTimeout(() => { this.#addImageScrolling(); @@ -67,10 +69,8 @@ export default class AdCard extends ReactiveComponent { 'housing-card__circle' ); - imgElem.addEventListener('mousemove', (e) => - this.#onMouseMove(e, areaFraction) - ); - imgElem.addEventListener('mouseout', () => this.#onMouseOut()); + imgElem.onmousemove = (e) => this.#onMouseMove(e, areaFraction); + imgElem.onmouseout = () => this.#onMouseOut(); this.#circles[this.state.toShowIndex as number].classList.add( 'housing-card__circle--fill' @@ -91,6 +91,7 @@ export default class AdCard extends ReactiveComponent { } console.log('new to show index:', toShowIndex); + // todo: fix this // setTimeout(() => { this.state.toShowIndex = toShowIndex; // }, SCROLL_DELAY); diff --git a/components/AdPage/AdPage.hbs b/components/AdPage/AdPage.hbs index be6b011c..a051d24f 100644 --- a/components/AdPage/AdPage.hbs +++ b/components/AdPage/AdPage.hbs @@ -1,9 +1,15 @@ -
+