Update: All movie elements properly put into one scrollable div

horizontal_scroll_2
Juraj Nyíri 3 years ago
parent 07bf8f531c
commit 39c4768e4c

@ -19128,6 +19128,10 @@ const getHeight = (el) => {
const height = Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight, el.scrollHeight, el.offsetHeight);
return height;
};
const getWidth = (el) => {
const width = Math.max(el.scrollWidth, el.offsetWidth, el.clientWidth, el.scrollWidth, el.offsetWidth);
return width;
};
const getOffset = (el) => {
let x = 0;
let y = 0;
@ -21319,6 +21323,9 @@ style.textContent = css `
border-radius: 5px;
transition: 0.5s;
}
.contentContainer {
overflow: hidden;
}
.movieElem {
margin-bottom: 5px;
background-repeat: no-repeat;
@ -21897,6 +21904,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
count += 1;
if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem);
if (lodash.isEmpty(this.contentContainer.style.width)) {
console.log('1');
this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`;
}
else {
console.log('2');
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
getWidth(movieElem) +
10}px`;
}
console.log(getWidth(movieElem));
this.renderedItems += 1;
}
}
@ -22005,6 +22023,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.card.appendChild(this.content);
this.contentContainer = document.createElement('div');
this.contentContainer.className = 'contentContainer';
// this.contentContainer.style.height = `${CSS_STYLE.height}px`;
this.content.appendChild(this.contentContainer);
const contentbg = document.createElement('div');
contentbg.className = 'contentbg';
@ -22184,7 +22203,24 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.loadCustomStyles();
};
this.calculatePositions = () => {
return; // temp
// return; // temp
// todo: figure out why interval is needed here and do it properly
const setLeftOffsetsInterval = setInterval(() => {
this.movieElems = this.getElementsByClassName('movieElem');
for (let i = 0; i < this.movieElems.length; i += 1) {
if (this.movieElems[i].offsetLeft === 0) {
break;
}
else {
clearInterval(setLeftOffsetsInterval);
}
this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`;
this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft;
this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`;
this.movieElems[i].dataset.top = this.movieElems[i].offsetTop;
this.movieElems[i].style.position = 'absolute';
}
}, 100);
};
this.minimizeSeasons = () => {
this.seasonsElemHidden = false;

@ -377,6 +377,9 @@ style.textContent = css`
border-radius: 5px;
transition: 0.5s;
}
.contentContainer {
overflow: hidden;
}
.movieElem {
margin-bottom: 5px;
background-repeat: no-repeat;

@ -18,7 +18,8 @@ import {
getOldPlexServerErrorMessage,
getDetailsBottom,
clickHandler,
fetchEntityRegistry
fetchEntityRegistry,
getWidth
} from './modules/utils';
import style from './modules/style';
@ -594,6 +595,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
count += 1;
if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem);
if (_.isEmpty(this.contentContainer.style.width)) {
console.log('1');
this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`;
} else {
console.log('2');
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
getWidth(movieElem) +
10}px`;
}
console.log(getWidth(movieElem));
this.renderedItems += 1;
}
}
@ -715,6 +727,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.contentContainer = document.createElement('div');
this.contentContainer.className = 'contentContainer';
// this.contentContainer.style.height = `${CSS_STYLE.height}px`;
this.content.appendChild(this.contentContainer);
const contentbg = document.createElement('div');
@ -915,7 +928,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
};
calculatePositions = (): void => {
return; // temp
// return; // temp
// todo: figure out why interval is needed here and do it properly
const setLeftOffsetsInterval = setInterval(() => {
this.movieElems = this.getElementsByClassName('movieElem');

Loading…
Cancel
Save