From 0e8e8dbc8236bcb2645d4fdcea37c2da032fd826 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Thu, 6 May 2021 13:22:47 +0200 Subject: [PATCH] Fix: Expanded card top position on multiple cards --- dist/plex-meets-homeassistant.js | 24 ++++++++++++++---------- src/plex-meets-homeassistant.ts | 25 +++++++++++++++---------- 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index ad3654c..042dc50 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19515,8 +19515,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideSeasons = () => { if (this.seasonsElem) { this.seasonsElemHidden = true; - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const top = this.getTop(); this.seasonsElem.style.top = `${top + 2000}px`; setTimeout(() => { if (this.seasonsElem && !this.seasonElemFreshlyLoaded) { @@ -19530,8 +19529,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideEpisodes = () => { if (this.episodesElem) { this.episodesElemHidden = true; - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const top = this.getTop(); this.episodesElem.style.top = `${top + 2000}px`; setTimeout(() => { if (this.episodesElem && !this.episodesElemFreshlyLoaded) { @@ -19562,8 +19560,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }; this.hideDetails = () => { - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const top = this.getTop(); if (this.detailElem) { this.detailElem.style.top = `${top - 1000}px`; this.detailElem.style.color = 'rgba(255,255,255,0)'; @@ -19572,8 +19569,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }; this.showDetails = async (data) => { - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const top = this.getTop(); if (this.detailElem) { this.detailElem.style.transition = '0s'; this.detailElem.style.top = `${top - 1000}px`; @@ -19819,8 +19815,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideBackground(); } else { - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const top = this.getTop(); this.minimizeAll(); this.showDetails(this.activeMovieElemData); this.showBackground(); @@ -19833,6 +19828,15 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.activeMovieElem = movieElemLocal; } }; + this.getTop = () => { + const doc = document.documentElement; + const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const cardTop = getOffset(this.content).top; + if (top < cardTop) { + return 0; + } + return top - cardTop + 64; + }; this.getMovieElement = (data, serverID) => { const thumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.expandedWidth}&height=${CSS_STYLE.expandedHeight}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`; const container = document.createElement('div'); diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 3bd27dc..995b00b 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -297,8 +297,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { hideSeasons = (): void => { if (this.seasonsElem) { this.seasonsElemHidden = true; - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const top = this.getTop(); this.seasonsElem.style.top = `${top + 2000}px`; setTimeout(() => { if (this.seasonsElem && !this.seasonElemFreshlyLoaded) { @@ -313,8 +312,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { hideEpisodes = (): void => { if (this.episodesElem) { this.episodesElemHidden = true; - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const top = this.getTop(); this.episodesElem.style.top = `${top + 2000}px`; setTimeout(() => { if (this.episodesElem && !this.episodesElemFreshlyLoaded) { @@ -347,8 +345,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; hideDetails = (): void => { - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const top = this.getTop(); if (this.detailElem) { this.detailElem.style.top = `${top - 1000}px`; this.detailElem.style.color = 'rgba(255,255,255,0)'; @@ -358,8 +355,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; showDetails = async (data: any): Promise => { - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const top = this.getTop(); if (this.detailElem) { this.detailElem.style.transition = '0s'; this.detailElem.style.top = `${top - 1000}px`; @@ -645,8 +641,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideBackground(); } else { - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const top = this.getTop(); this.minimizeAll(); this.showDetails(this.activeMovieElemData); this.showBackground(); @@ -660,6 +655,16 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }; + getTop = (): number => { + const doc = document.documentElement; + const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const cardTop = getOffset(this.content).top; + if (top < cardTop) { + return 0; + } + return top - cardTop + 64; + }; + getMovieElement = (data: any, serverID: string): HTMLDivElement => { const thumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.expandedWidth}&height=${CSS_STYLE.expandedHeight}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;