Fix links

frontend-park-mail-ru · Nov 7, 2024 · 3709fdf · 3709fdf
1 parent dd4be5f
commit 3709fdf
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 146 deletions.
diff --git a/src/pages/artist/ui/Artist.js b/src/pages/artist/ui/Artist.js
@@ -1,43 +1,43 @@
-import { TrackListAPI } from "../../../widgets/trackList/index.js";
-import { AlbumListAPI } from "../../../widgets/albumList/index.js";
-import { ArtistCardView } from "../../../widgets/artistCard/index.js";
-import { TrackListView } from "../../../widgets/trackList/index.js";
-import { AlbumListView } from "../../../widgets/albumList/index.js";
-import { FooterPlayerView } from "../../../widgets/footerPlayer/index.js";
-import { userStore } from "../../../entities/user/model/store.js";
-import { player } from "../../../shared/player/model/store.js";
+import { TrackListAPI } from '../../../widgets/trackList/index.js';
+import { AlbumListAPI } from '../../../widgets/albumList/index.js';
+import { ArtistCardView } from '../../../widgets/artistCard/index.js';
+import { TrackListView } from '../../../widgets/trackList/index.js';
+import { AlbumListView } from '../../../widgets/albumList/index.js';
+import { FooterPlayerView } from '../../../widgets/footerPlayer/index.js';
+import { userStore } from '../../../entities/user/model/store.js';
+import { player } from '../../../shared/player/model/store.js';
 
 export class ArtistPage {
-  /**
-   * Creates an instance of the View class.
-   */
-  constructor(params) {
-    this.parent = document.querySelector("#root");
-    this.artistId = params["artistId"];
-  }
+	/**
+	 * Creates an instance of the View class.
+	 */
+	constructor(params) {
+		this.parent = document.querySelector('#root');
+		this.artistId = params['artistId'];
+	}
 
-  async render() {
-    this.parent.innerHTML = "";
+	async render() {
+		this.parent.innerHTML = '';
 
-    const artistCardView = new ArtistCardView(this.parent, this.artistId);
-    await artistCardView.render();
+		const artistCardView = new ArtistCardView(this.parent, this.artistId);
+		await artistCardView.render();
 
-    const trackListAPI = new TrackListAPI(this.artistId);
-    const tracks = await trackListAPI.get();
-    const trackListView = new TrackListView(this.parent, this.artistId);
-    await trackListView.render(tracks.slice(0, 5));
+		const trackListAPI = new TrackListAPI(this.artistId);
+		const tracks = await trackListAPI.get();
+		const trackListView = new TrackListView(this.parent, this.artistId);
+		await trackListView.render(tracks.slice(0, 5));
 
-    player.setTracks(tracks);
+		player.setTracks(tracks);
 
-    const albumListAPI = new AlbumListAPI(this.artistId);
-    const albumListView = new AlbumListView(this.parent, this.artistId);
-    const albums = await albumListAPI.get();
-    await albumListView.render(albums.slice(0, 5));
+		const albumListAPI = new AlbumListAPI(this.artistId);
+		const albumListView = new AlbumListView(this.parent, this.artistId);
+		const albums = await albumListAPI.get();
+		await albumListView.render(albums.slice(0, 5));
 
-    const footPlayerView = new FooterPlayerView(this.parent);
-    const user = userStore.storage.user;
-    if (user) {
-      await footPlayerView.render();
-    }
-  }
+		const footPlayerView = new FooterPlayerView(this.parent);
+		const user = userStore.storage.user;
+		if (user) {
+			await footPlayerView.render();
+		}
+	}
 }
diff --git a/src/pages/more-albums/ui/MoreAlbums.js b/src/pages/more-albums/ui/MoreAlbums.js
@@ -1,42 +1,28 @@
-import { TrackListAPI } from "../../../widgets/trackList/index.js";
-import { AlbumListAPI } from "../../../widgets/albumList/index.js";
-import { AlbumListView } from "../../../widgets/albumList/index.js";
-import { FooterPlayerView } from "../../../widgets/footerPlayer/index.js";
-import { userStore } from "../../../entities/user/model/store.js";
-import { player } from "../../../shared/player/model/store.js";
+import { AlbumListAPI } from '../../../widgets/albumList/index.js';
+import { AlbumListView } from '../../../widgets/albumList/index.js';
 import template from './MoreAlbums.hbs';
 import './MoreAlbums.scss';
 
 export class MoreAlbumsPage {
-    /**
-     * Creates an instance of the View class.
-     */
-    constructor(params) {
-        this.parent = document.querySelector("#root");
-        this.entity = params["entity"];
-        this.entityId = params["id"];
-    }
+	/**
+	 * Creates an instance of the View class.
+	 */
+	constructor(params) {
+		this.parent = document.querySelector('#root');
+		this.entity = params['entity'];
+		this.entityId = params['id'];
+	}
 
-    async render() {
-        if (this.entity === "artist") {
-            this.artistId = this.entityId;
-        }
-
-        this.parent.innerHTML = template();
+	async render() {
+		if (this.entity === 'artist') {
+			this.artistId = this.entityId;
+		}
 
-        const albumListAPI = new AlbumListAPI(this.artistId);
-        const albums = await albumListAPI.get();
-        const albumListView = new AlbumListView(this.parent, this.artistId);
-        await albumListView.render(albums, false);
-
-        const trackListAPI = new TrackListAPI(this.artistId);
-        const tracks = await trackListAPI.get();
-        player.setTracks(tracks);
+		this.parent.innerHTML = template();
 
-        const footPlayerView = new FooterPlayerView(this.parent);
-        const user = userStore.storage.user;
-        if (user) {
-          await footPlayerView.render();
-        }
-    }
-}
+		const albumListAPI = new AlbumListAPI(this.artistId);
+		const albums = await albumListAPI.get();
+		const albumListView = new AlbumListView(this.parent, this.artistId);
+		await albumListView.render(albums, false);
+	}
+}
diff --git a/src/pages/more-artists/ui/MoreArtists.js b/src/pages/more-artists/ui/MoreArtists.js
@@ -1,36 +1,22 @@
-import { TrackListAPI } from "../../../widgets/trackList/index.js";
-import { ArtistListAPI } from "../../../widgets/artistList/index.js";
-import { ArtistListView } from "../../../widgets/artistList/index.js";
-import { FooterPlayerView } from "../../../widgets/footerPlayer/index.js";
-import { userStore } from "../../../entities/user/model/store.js";
-import { player } from "../../../shared/player/model/store.js";
+import { ArtistListAPI } from '../../../widgets/artistList/index.js';
+import { ArtistListView } from '../../../widgets/artistList/index.js';
 import template from './MoreArtists.hbs';
 import './MoreArtists.scss';
 
 export class MoreArtistsPage {
-    /**
-     * Creates an instance of the View class.
-     */
-    constructor() {
-        this.parent = document.querySelector("#root");
-    }
+	/**
+	 * Creates an instance of the View class.
+	 */
+	constructor() {
+		this.parent = document.querySelector('#root');
+	}
 
-    async render() {
-        this.parent.innerHTML = template();
+	async render() {
+		this.parent.innerHTML = template();
 
-        const artistListAPI = new ArtistListAPI();
-        const artists = await artistListAPI.get();
-        const artistListView = new ArtistListView(this.parent);
-        await artistListView.render(artists, false);
-
-        const trackListAPI = new TrackListAPI();
-        const tracks = await trackListAPI.get();
-        player.setTracks(tracks);
-
-        const footPlayerView = new FooterPlayerView(this.parent);
-        const user = userStore.storage.user;
-        if (user) {
-          await footPlayerView.render();
-        }
-    }
-}
+		const artistListAPI = new ArtistListAPI();
+		const artists = await artistListAPI.get();
+		const artistListView = new ArtistListView(this.parent);
+		await artistListView.render(artists, false);
+	}
+}
diff --git a/src/pages/more-tracks/ui/MoreTracks.js b/src/pages/more-tracks/ui/MoreTracks.js
@@ -1,41 +1,47 @@
-import { TrackListAPI } from "../../../widgets/trackList/index.js";
-import { TrackListView } from "../../../widgets/trackList/index.js";
-import { FooterPlayerView } from "../../../widgets/footerPlayer/index.js";
-import { userStore } from "../../../entities/user/model/store.js";
-import { player } from "../../../shared/player/model/store.js";
+import { TrackListAPI } from '../../../widgets/trackList/index.js';
+import { TrackListView } from '../../../widgets/trackList/index.js';
+import { FooterPlayerView } from '../../../widgets/footerPlayer/index.js';
+import { userStore } from '../../../entities/user/model/store.js';
+import { player } from '../../../shared/player/model/store.js';
 import template from './MoreTracks.hbs';
 import './MoreTracks.scss';
 
 export class MoreTracksPage {
-    /**
-     * Creates an instance of the View class.
-     */
-    constructor(params) {
-        this.parent = document.querySelector("#root");
-        this.entity = params["entity"];
-        this.entityId = params["id"];
-    }
+	/**
+	 * Creates an instance of the View class.
+	 */
+	constructor(params) {
+		this.parent = document.querySelector('#root');
+		this.entity = params['entity'];
+		this.entityId = params['id'];
+	}
 
-    async render() {
-        if (this.entity === "artist") {
-            this.artistId = this.entityId;
-        } else if (this.entity === "album") {
-            this.albumId = this.entityId;
-        }
+	async render() {
+		this.parent.innerHTML = '';
 
-        this.parent.innerHTML = template();
+		if (this.entity === 'artist') {
+			this.artistId = this.entityId;
+		} else if (this.entity === 'album') {
+			this.albumId = this.entityId;
+		}
 
-        const trackListAPI = new TrackListAPI(this.artistId, this.albumId);
-        const trackListView = new TrackListView(this.parent, this.artistId, this.albumId);
-        const tracks = await trackListAPI.get();
-        await trackListView.render(tracks, false);
+		this.parent.innerHTML = template();
 
-        player.setTracks(tracks);
+		const trackListAPI = new TrackListAPI(this.artistId, this.albumId);
+		const trackListView = new TrackListView(
+			this.parent,
+			this.artistId,
+			this.albumId,
+		);
+		const tracks = await trackListAPI.get();
+		await trackListView.render(tracks, false);
 
-        const footPlayerView = new FooterPlayerView(this.parent);
-        const user = userStore.storage.user;
-        if (user) {
-          await footPlayerView.render();
-        }
-    }
-}
+		player.setTracks(tracks);
+
+		const footPlayerView = new FooterPlayerView(this.parent);
+		const user = userStore.storage.user;
+		if (user) {
+			await footPlayerView.render();
+		}
+	}
+}
diff --git a/src/widgets/artistCarousel/ui/artistCarousel.hbs b/src/widgets/artistCarousel/ui/artistCarousel.hbs
@@ -2,7 +2,7 @@
     <div class="popular_artists__block">
         <div class="popular_artists__text">
             Популярные артисты
-            <a href="{{ showMoreHref }}" class=" popular_artists__show_more link">Показать еще</a>
+            <a href="{{ showMoreHref }}" class=" popular_artists__show_more link_more_artists">Показать еще</a>
         </div>
         <div class="carousel__container">
             <button class="carousel__button carousel__button--prev">❮</button>
@@ -14,4 +14,4 @@
             <button class="carousel__button carousel__button--next">❯</button>
         </div>
     </div>
-</div>
+</div>
diff --git a/src/widgets/artistCarousel/ui/artistCarousel.js b/src/widgets/artistCarousel/ui/artistCarousel.js
@@ -48,7 +48,6 @@ export class ArtistCarouselView {
 		this.addEvents();
 	}
 
-
 	onEvents() {
 		eventBus.on('carousel:next', this.handleGoNext);
 		eventBus.on('carousel:prev', this.handleGoPrev);
@@ -62,11 +61,21 @@ export class ArtistCarouselView {
 	addEvents() {
 		this.nextBtn.addEventListener('click', this.handleNextBtn);
 		this.prevBtn.addEventListener('click', this.handlePrevBtn);
+
+		const links = this.parent.querySelectorAll('.link_more_artists');
+		links.forEach((link) => {
+			link.addEventListener('click', (event) => this.handleLink(event));
+		});
 	}
 
 	deleteEvents() {
 		this.nextBtn.removeEventListener('click', this.handleNextBtn);
 		this.prevBtn.removeEventListener('click', this.handlePrevBtn);
+
+		const links = this.parent.querySelectorAll('.link');
+		links.forEach((link) => {
+			link.removeEventListener('click', (event) => this.handleLink(event));
+		});
 	}
 
 	async getElements() {
@@ -81,11 +90,17 @@ export class ArtistCarouselView {
 		this.carouselInnerWidth = this.carouselInner.offsetWidth;
 
 		this.maxPosition = -(this.carouselInnerWidth - this.carouselAreaWidth);
+	}
 
+	handleLink(event) {
+		event.preventDefault();
+		const href = event.target.getAttribute('href');
+		eventBus.emit('navigate', href);
 	}
 
 	handleGoNext = () => {
-		const remainingWidth = this.carouselInnerWidth + this.position - this.carouselAreaWidth;
+		const remainingWidth =
+			this.carouselInnerWidth + this.position - this.carouselAreaWidth;
 
 		if (remainingWidth > this.itemWidth) {
 			this.position -= this.itemWidth;
@@ -98,7 +113,8 @@ export class ArtistCarouselView {
 
 	handleGoPrev = () => {
 		if (this.position < 0) {
-			this.position += ((this.position + this.itemWidth) > 0 ? -this.position : this.itemWidth);
+			this.position +=
+				this.position + this.itemWidth > 0 ? -this.position : this.itemWidth;
 			this.carouselInner.style.transform = `translateX(${this.position}px)`;
 		}
 	};
@@ -109,7 +125,7 @@ export class ArtistCarouselView {
 
 	handlePrevBtn = () => {
 		eventBus.emit('carousel:prev');
-	}
+	};
 
 	destructor() {
 		this.deleteEvents();

diff --git a/src/widgets/footerPlayer/ui/footerPlayer.js b/src/widgets/footerPlayer/ui/footerPlayer.js
@@ -127,7 +127,10 @@ export class FooterPlayerView {
 
 	handleLoading = () => {
 		const trackInfo = player.getTrackInfo();
-		this.trackInfoTrackImg.setAttribute('src', `${S3_BUCKETS.TRACK_IMAGES}/${trackInfo.image}`);
+		this.trackInfoTrackImg.setAttribute(
+			'src',
+			`${S3_BUCKETS.TRACK_IMAGES}/${trackInfo.image}`,
+		);
 		this.trackInfoTrackName.textContent = trackInfo.name;
 		this.trackInfoTrackArtist.textContent = trackInfo.artist;
 

diff --git a/src/widgets/trackList/ui/trackList.hbs b/src/widgets/trackList/ui/trackList.hbs
@@ -3,7 +3,7 @@
     {{#if showMoreHref}}
       <div class="tracks__recommend_text">
         Популярные аудиозаписи
-        <a href="{{ showMoreHref }}" class="tracks__show_more link">Показать еще</a>
+        <a href="{{ showMoreHref }}" class="tracks__show_more link_more_tracks">Показать еще</a>
       </div>
     {{/if}}
     <div class="tracks__tracks" id="tracks">