Add: Configuration option to use horizontal scroll

horizontal_scroll 3.0
Juraj Nyíri 3 years ago
parent 6ef18a5f09
commit 9c4e73276d

@ -19962,6 +19962,7 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
this.port = document.createElement('paper-input');
this.maxCount = document.createElement('paper-input');
this.maxRows = document.createElement('paper-input');
this.useHorizontalScroll = document.createElement('paper-dropdown-menu');
this.minWidth = document.createElement('paper-input');
this.minEpisodeWidth = document.createElement('paper-input');
this.minExpandedWidth = document.createElement('paper-input');
@ -20042,6 +20043,12 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
else {
this.config.maxRows = this.maxRows.value;
}
if (lodash.isEmpty(this.useHorizontalScroll.value)) {
this.config.useHorizontalScroll = '';
}
else {
this.config.useHorizontalScroll = this.useHorizontalScroll.value;
}
if (lodash.isEmpty(this.minWidth.value)) {
this.config.minWidth = '';
}
@ -20360,6 +20367,22 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
this.maxCount.type = 'number';
this.maxCount.addEventListener('change', this.valueUpdated);
this.plexValidSection.appendChild(this.maxCount);
this.useHorizontalScroll.innerHTML = '';
const useHorizontalScrollItems = document.createElement('paper-listbox');
useHorizontalScrollItems.appendChild(addDropdownItem('Yes'));
useHorizontalScrollItems.appendChild(addDropdownItem('No'));
useHorizontalScrollItems.slot = 'dropdown-content';
this.useHorizontalScroll.label = 'Use horizontal scroll';
this.useHorizontalScroll.appendChild(useHorizontalScrollItems);
this.useHorizontalScroll.style.width = '100%';
this.useHorizontalScroll.addEventListener('value-changed', this.valueUpdated);
if (lodash.isEmpty(this.config.useHorizontalScroll)) {
this.useHorizontalScroll.value = 'No';
}
else {
this.useHorizontalScroll.value = this.config.useHorizontalScroll;
}
this.plexValidSection.appendChild(this.useHorizontalScroll);
this.maxRows.label = 'Maximum number of rows to display (Optional)';
this.maxRows.value = this.config.maxRows;
this.maxRows.type = 'number';
@ -20672,6 +20695,9 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
if (lodash.isNumber(this.config.maxRows)) {
this.config.maxRows = `${this.config.maxRows}`;
}
if (lodash.isNumber(this.config.useHorizontalScroll)) {
this.config.useHorizontalScroll = `${this.config.useHorizontalScroll}`;
}
if (lodash.isNumber(this.config.minWidth)) {
this.config.minWidth = `${this.config.minWidth}`;
}
@ -21465,6 +21491,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
super(...arguments);
this.searchInputElem = document.createElement('input');
this.plexProtocol = 'http';
this.useHorizontalScroll = false;
this.plexPort = false;
this.epgData = {};
this.detailsShown = false;
@ -21904,6 +21931,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
count += 1;
if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem);
if (this.useHorizontalScroll) {
if (lodash.isEmpty(this.contentContainer.style.width)) {
this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`;
}
@ -21912,6 +21940,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
getWidth(movieElem) +
10}px`;
}
}
this.renderedItems += 1;
}
}
@ -22005,8 +22034,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
this.content = document.createElement('div');
this.content.innerHTML = this.loadCustomStyles();
if (this.useHorizontalScroll) {
this.content.style.overflowX = 'auto';
this.content.style.whiteSpace = 'nowrap';
}
if (this.error !== '') {
this.content.innerHTML += `Error: ${this.error}`;
}
@ -22914,19 +22945,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.minimizeAll();
this.activeMovieElem = undefined;
this.hideDetails();
/*
if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
movieElemLocal.style.width = `${CSS_STYLE.width}px`;
movieElemLocal.style.height = `${CSS_STYLE.width}px`;
} else {
movieElemLocal.style.width = `${CSS_STYLE.width}px`;
movieElemLocal.style.height = `${CSS_STYLE.height}px`;
}
movieElemLocal.style.zIndex = '1';
movieElemLocal.style.position = 'relative';
movieElemLocal.style.top = `0px`;
movieElemLocal.style.left = `0px`;
*/
setTimeout(() => {
movieElemLocal.dataset.clicked = 'false';
}, 500);
@ -23146,6 +23164,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (config.protocol) {
this.plexProtocol = config.protocol;
}
if (config.useHorizontalScroll && lodash.isEqual(config.useHorizontalScroll, 'Yes')) {
this.useHorizontalScroll = true;
}
if (config.port && !lodash.isEqual(config.port, '')) {
this.plexPort = config.port;
}

@ -26,6 +26,8 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
maxRows: any = document.createElement('paper-input');
useHorizontalScroll: any = document.createElement('paper-dropdown-menu');
minWidth: any = document.createElement('paper-input');
minEpisodeWidth: any = document.createElement('paper-input');
@ -145,6 +147,12 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
this.config.maxRows = this.maxRows.value;
}
if (_.isEmpty(this.useHorizontalScroll.value)) {
this.config.useHorizontalScroll = '';
} else {
this.config.useHorizontalScroll = this.useHorizontalScroll.value;
}
if (_.isEmpty(this.minWidth.value)) {
this.config.minWidth = '';
} else {
@ -485,6 +493,22 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
this.maxCount.addEventListener('change', this.valueUpdated);
this.plexValidSection.appendChild(this.maxCount);
this.useHorizontalScroll.innerHTML = '';
const useHorizontalScrollItems: any = document.createElement('paper-listbox');
useHorizontalScrollItems.appendChild(addDropdownItem('Yes'));
useHorizontalScrollItems.appendChild(addDropdownItem('No'));
useHorizontalScrollItems.slot = 'dropdown-content';
this.useHorizontalScroll.label = 'Use horizontal scroll';
this.useHorizontalScroll.appendChild(useHorizontalScrollItems);
this.useHorizontalScroll.style.width = '100%';
this.useHorizontalScroll.addEventListener('value-changed', this.valueUpdated);
if (_.isEmpty(this.config.useHorizontalScroll)) {
this.useHorizontalScroll.value = 'No';
} else {
this.useHorizontalScroll.value = this.config.useHorizontalScroll;
}
this.plexValidSection.appendChild(this.useHorizontalScroll);
this.maxRows.label = 'Maximum number of rows to display (Optional)';
this.maxRows.value = this.config.maxRows;
this.maxRows.type = 'number';
@ -817,6 +841,10 @@ class PlexMeetsHomeAssistantEditor extends HTMLElement {
this.config.maxRows = `${this.config.maxRows}`;
}
if (_.isNumber(this.config.useHorizontalScroll)) {
this.config.useHorizontalScroll = `${this.config.useHorizontalScroll}`;
}
if (_.isNumber(this.config.minWidth)) {
this.config.minWidth = `${this.config.minWidth}`;
}

@ -34,6 +34,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
plexProtocol: 'http' | 'https' = 'http';
useHorizontalScroll = false;
plexPort: number | false = false;
epgData: Record<string, any> = {};
@ -595,6 +597,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
count += 1;
if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem);
if (this.useHorizontalScroll) {
if (_.isEmpty(this.contentContainer.style.width)) {
this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`;
} else {
@ -602,6 +605,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
getWidth(movieElem) +
10}px`;
}
}
this.renderedItems += 1;
}
@ -708,8 +712,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.content = document.createElement('div');
this.content.innerHTML = this.loadCustomStyles();
if (this.useHorizontalScroll) {
this.content.style.overflowX = 'auto';
this.content.style.whiteSpace = 'nowrap';
}
if (this.error !== '') {
this.content.innerHTML += `Error: ${this.error}`;
@ -1712,19 +1718,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.minimizeAll();
this.activeMovieElem = undefined;
this.hideDetails();
/*
if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
movieElemLocal.style.width = `${CSS_STYLE.width}px`;
movieElemLocal.style.height = `${CSS_STYLE.width}px`;
} else {
movieElemLocal.style.width = `${CSS_STYLE.width}px`;
movieElemLocal.style.height = `${CSS_STYLE.height}px`;
}
movieElemLocal.style.zIndex = '1';
movieElemLocal.style.position = 'relative';
movieElemLocal.style.top = `0px`;
movieElemLocal.style.left = `0px`;
*/
setTimeout(() => {
movieElemLocal.dataset.clicked = 'false';
@ -1972,6 +1965,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (config.protocol) {
this.plexProtocol = config.protocol;
}
if (config.useHorizontalScroll && _.isEqual(config.useHorizontalScroll, 'Yes')) {
this.useHorizontalScroll = true;
}
if (config.port && !_.isEqual(config.port, '')) {
this.plexPort = config.port;
} else {

Loading…
Cancel
Save