Update: Horizontal scroll opening kinda works

horizontal_scroll
Juraj Nyíri 3 years ago
parent 39c4768e4c
commit 5341e2ec77

@ -21905,16 +21905,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (count > this.renderedItems) { if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem); this.contentContainer.appendChild(movieElem);
if (lodash.isEmpty(this.contentContainer.style.width)) { if (lodash.isEmpty(this.contentContainer.style.width)) {
console.log('1');
this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`; this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`;
} }
else { else {
console.log('2');
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) + this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
getWidth(movieElem) + getWidth(movieElem) +
10}px`; 10}px`;
} }
console.log(getWidth(movieElem));
this.renderedItems += 1; this.renderedItems += 1;
} }
} }
@ -22214,11 +22211,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
else { else {
clearInterval(setLeftOffsetsInterval); clearInterval(setLeftOffsetsInterval);
} }
/*
this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`; this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`;
this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft; this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft;
this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`; this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`;
this.movieElems[i].dataset.top = this.movieElems[i].offsetTop; this.movieElems[i].dataset.top = this.movieElems[i].offsetTop;
this.movieElems[i].style.position = 'absolute'; this.movieElems[i].style.position = 'absolute';
*/
} }
}, 100); }, 100);
}; };
@ -22297,9 +22296,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.movieElems[i].style.height = `${CSS_STYLE.height}px`; this.movieElems[i].style.height = `${CSS_STYLE.height}px`;
} }
this.movieElems[i].style['z-index'] = 1; this.movieElems[i].style['z-index'] = 1;
this.movieElems[i].style.position = 'absolute'; this.movieElems[i].style.position = 'relative';
this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`; this.movieElems[i].style.left = `0px`;
this.movieElems[i].style.top = `${this.movieElems[i].dataset.top}px`; this.movieElems[i].style.top = `0px`;
this.movieElems[i].dataset.clicked = false; this.movieElems[i].dataset.clicked = false;
} }
} }
@ -22916,8 +22915,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
movieElemLocal.style.height = `${CSS_STYLE.height}px`; movieElemLocal.style.height = `${CSS_STYLE.height}px`;
} }
movieElemLocal.style.zIndex = '1'; movieElemLocal.style.zIndex = '1';
movieElemLocal.style.top = `${movieElem.dataset.top}px`; movieElemLocal.style.position = 'relative';
movieElemLocal.style.left = `${movieElem.dataset.left}px`; movieElemLocal.style.top = `0px`;
movieElemLocal.style.left = `0px`;
setTimeout(() => { setTimeout(() => {
movieElemLocal.dataset.clicked = 'false'; movieElemLocal.dataset.clicked = 'false';
}, 500); }, 500);
@ -22935,6 +22935,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
movieElemLocal.style.width = `${this.minExpandedWidth}px`; movieElemLocal.style.width = `${this.minExpandedWidth}px`;
movieElemLocal.style.height = `${this.minExpandedHeight}px`; movieElemLocal.style.height = `${this.minExpandedHeight}px`;
} }
movieElemLocal.style.position = 'absolute';
movieElemLocal.style.zIndex = '3'; movieElemLocal.style.zIndex = '3';
movieElemLocal.style.left = '16px'; movieElemLocal.style.left = '16px';
movieElemLocal.style.top = `${top + 16}px`; movieElemLocal.style.top = `${top + 16}px`;
@ -23052,10 +23053,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const margin2 = this.fontSize2 / 4; const margin2 = this.fontSize2 / 4;
titleElem.className = 'titleElem'; titleElem.className = 'titleElem';
if (!lodash.isNil(data.channelCallSign)) { if (!lodash.isNil(data.channelCallSign)) {
titleElem.style.marginTop = `${CSS_STYLE.width}px`; titleElem.style.marginTop = `0px`;
} }
else { else {
titleElem.style.marginTop = `${CSS_STYLE.height + margin1}px`; titleElem.style.marginTop = `${margin1}px`;
} }
titleElem.style.fontSize = `${this.fontSize1}px`; titleElem.style.fontSize = `${this.fontSize1}px`;
titleElem.style.marginBottom = `${margin1}px`; titleElem.style.marginBottom = `${margin1}px`;

@ -596,16 +596,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (count > this.renderedItems) { if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem); this.contentContainer.appendChild(movieElem);
if (_.isEmpty(this.contentContainer.style.width)) { if (_.isEmpty(this.contentContainer.style.width)) {
console.log('1');
this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`; this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`;
} else { } else {
console.log('2');
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) + this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
getWidth(movieElem) + getWidth(movieElem) +
10}px`; 10}px`;
} }
console.log(getWidth(movieElem));
this.renderedItems += 1; this.renderedItems += 1;
} }
} }
@ -938,11 +935,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} else { } else {
clearInterval(setLeftOffsetsInterval); clearInterval(setLeftOffsetsInterval);
} }
/*
this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`; this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`;
this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft; this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft;
this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`; this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`;
this.movieElems[i].dataset.top = this.movieElems[i].offsetTop; this.movieElems[i].dataset.top = this.movieElems[i].offsetTop;
this.movieElems[i].style.position = 'absolute'; this.movieElems[i].style.position = 'absolute';
*/
} }
}, 100); }, 100);
}; };
@ -1030,9 +1029,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
this.movieElems[i].style['z-index'] = 1; this.movieElems[i].style['z-index'] = 1;
this.movieElems[i].style.position = 'absolute'; this.movieElems[i].style.position = 'relative';
this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`; this.movieElems[i].style.left = `0px`;
this.movieElems[i].style.top = `${this.movieElems[i].dataset.top}px`; this.movieElems[i].style.top = `0px`;
this.movieElems[i].dataset.clicked = false; this.movieElems[i].dataset.clicked = false;
} }
} }
@ -1713,8 +1712,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
movieElemLocal.style.height = `${CSS_STYLE.height}px`; movieElemLocal.style.height = `${CSS_STYLE.height}px`;
} }
movieElemLocal.style.zIndex = '1'; movieElemLocal.style.zIndex = '1';
movieElemLocal.style.top = `${movieElem.dataset.top}px`; movieElemLocal.style.position = 'relative';
movieElemLocal.style.left = `${movieElem.dataset.left}px`; movieElemLocal.style.top = `0px`;
movieElemLocal.style.left = `0px`;
setTimeout(() => { setTimeout(() => {
movieElemLocal.dataset.clicked = 'false'; movieElemLocal.dataset.clicked = 'false';
@ -1732,6 +1732,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
movieElemLocal.style.width = `${this.minExpandedWidth}px`; movieElemLocal.style.width = `${this.minExpandedWidth}px`;
movieElemLocal.style.height = `${this.minExpandedHeight}px`; movieElemLocal.style.height = `${this.minExpandedHeight}px`;
} }
movieElemLocal.style.position = 'absolute';
movieElemLocal.style.zIndex = '3'; movieElemLocal.style.zIndex = '3';
movieElemLocal.style.left = '16px'; movieElemLocal.style.left = '16px';
movieElemLocal.style.top = `${top + 16}px`; movieElemLocal.style.top = `${top + 16}px`;
@ -1871,9 +1872,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const margin2 = this.fontSize2 / 4; const margin2 = this.fontSize2 / 4;
titleElem.className = 'titleElem'; titleElem.className = 'titleElem';
if (!_.isNil(data.channelCallSign)) { if (!_.isNil(data.channelCallSign)) {
titleElem.style.marginTop = `${CSS_STYLE.width}px`; titleElem.style.marginTop = `0px`;
} else { } else {
titleElem.style.marginTop = `${CSS_STYLE.height + margin1}px`; titleElem.style.marginTop = `${margin1}px`;
} }
titleElem.style.fontSize = `${this.fontSize1}px`; titleElem.style.fontSize = `${this.fontSize1}px`;
titleElem.style.marginBottom = `${margin1}px`; titleElem.style.marginBottom = `${margin1}px`;

Loading…
Cancel
Save