';
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
- html += '
';
+ html += `
`;
html += '
';
html += mapLetters(letters, vertical).join('');
html += '
';
@@ -95,227 +106,228 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.focus = focus;
}
- function AlphaPicker(options) {
+ export class AlphaPicker {
+ constructor(options) {
- var self = this;
- this.options = options;
+ this.options = options;
- var element = options.element;
- var itemsContainer = options.itemsContainer;
- var itemClass = options.itemClass;
+ const element = options.element;
+ const itemsContainer = options.itemsContainer;
+ const itemClass = options.itemClass;
- var itemFocusValue;
- var itemFocusTimeout;
+ let itemFocusValue;
+ let itemFocusTimeout;
- function onItemFocusTimeout() {
- itemFocusTimeout = null;
- self.value(itemFocusValue);
- }
-
- var alphaFocusedElement;
- var alphaFocusTimeout;
-
- function onAlphaFocusTimeout() {
-
- alphaFocusTimeout = null;
-
- if (document.activeElement === alphaFocusedElement) {
- var value = alphaFocusedElement.getAttribute('data-value');
- self.value(value, true);
+ function onItemFocusTimeout() {
+ itemFocusTimeout = null;
+ this.value(itemFocusValue);
}
- }
- function onAlphaPickerInKeyboardModeClick(e) {
+ let alphaFocusedElement;
+ let alphaFocusTimeout;
- var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+ function onAlphaFocusTimeout() {
- if (alphaPickerButton) {
- var value = alphaPickerButton.getAttribute('data-value');
-
- element.dispatchEvent(new CustomEvent('alphavalueclicked', {
- cancelable: false,
- detail: {
- value: value
- }
- }));
- }
- }
-
- function onAlphaPickerClick(e) {
-
- var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
-
- if (alphaPickerButton) {
- var value = alphaPickerButton.getAttribute('data-value');
- if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
- self.value(null, true);
- } else {
- self.value(value, true);
- }
- }
- }
-
- function onAlphaPickerFocusIn(e) {
-
- if (alphaFocusTimeout) {
- clearTimeout(alphaFocusTimeout);
alphaFocusTimeout = null;
+
+ if (document.activeElement === alphaFocusedElement) {
+ const value = alphaFocusedElement.getAttribute('data-value');
+ this.value(value, true);
+ }
}
- var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+ function onAlphaPickerInKeyboardModeClick(e) {
- if (alphaPickerButton) {
- alphaFocusedElement = alphaPickerButton;
- alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600);
+ const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+
+ if (alphaPickerButton) {
+ const value = alphaPickerButton.getAttribute('data-value');
+
+ element.dispatchEvent(new CustomEvent('alphavalueclicked', {
+ cancelable: false,
+ detail: {
+ value
+ }
+ }));
+ }
}
- }
- function onItemsFocusIn(e) {
+ function onAlphaPickerClick(e) {
- var item = dom.parentWithClass(e.target, itemClass);
+ const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
- if (item) {
- var prefix = item.getAttribute('data-prefix');
- if (prefix && prefix.length) {
-
- itemFocusValue = prefix[0];
- if (itemFocusTimeout) {
- clearTimeout(itemFocusTimeout);
+ if (alphaPickerButton) {
+ const value = alphaPickerButton.getAttribute('data-value');
+ if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
+ this.value(null, true);
+ } else {
+ this.value(value, true);
}
- itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
}
}
- }
- self.enabled = function (enabled) {
+ function onAlphaPickerFocusIn(e) {
- if (enabled) {
-
- if (itemsContainer) {
- itemsContainer.addEventListener('focus', onItemsFocusIn, true);
+ if (alphaFocusTimeout) {
+ clearTimeout(alphaFocusTimeout);
+ alphaFocusTimeout = null;
}
- if (options.mode === 'keyboard') {
- element.addEventListener('click', onAlphaPickerInKeyboardModeClick);
- }
+ const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+
+ if (alphaPickerButton) {
+ alphaFocusedElement = alphaPickerButton;
+ alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600);
+ }
+ }
+
+ function onItemsFocusIn(e) {
+
+ const item = dom.parentWithClass(e.target, itemClass);
+
+ if (item) {
+ const prefix = item.getAttribute('data-prefix');
+ if (prefix && prefix.length) {
+
+ itemFocusValue = prefix[0];
+ if (itemFocusTimeout) {
+ clearTimeout(itemFocusTimeout);
+ }
+ itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
+ }
+ }
+ }
+
+ this.enabled = function (enabled) {
+
+ if (enabled) {
+
+ if (itemsContainer) {
+ itemsContainer.addEventListener('focus', onItemsFocusIn, true);
+ }
+
+ if (options.mode === 'keyboard') {
+ element.addEventListener('click', onAlphaPickerInKeyboardModeClick);
+ }
+
+ if (options.valueChangeEvent !== 'click') {
+ element.addEventListener('focus', onAlphaPickerFocusIn, true);
+ } else {
+ element.addEventListener('click', onAlphaPickerClick.bind(this));
+ }
- if (options.valueChangeEvent !== 'click') {
- element.addEventListener('focus', onAlphaPickerFocusIn, true);
} else {
- element.addEventListener('click', onAlphaPickerClick.bind(this));
- }
- } else {
-
- if (itemsContainer) {
- itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
- }
-
- element.removeEventListener('click', onAlphaPickerInKeyboardModeClick);
- element.removeEventListener('focus', onAlphaPickerFocusIn, true);
- element.removeEventListener('click', onAlphaPickerClick.bind(this));
- }
- };
-
- render(element, options);
-
- this.enabled(true);
- this.visible(true);
- }
-
- AlphaPicker.prototype.value = function (value, applyValue) {
-
- var element = this.options.element;
- var btn;
- var selected;
-
- if (value !== undefined) {
- if (value != null) {
-
- value = value.toUpperCase();
- this._currentValue = value;
-
- if (this.options.mode !== 'keyboard') {
- selected = element.querySelector('.' + selectedButtonClass);
-
- try {
- btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']');
- } catch (err) {
- console.error('error in querySelector: ' + err);
+ if (itemsContainer) {
+ itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
}
- if (btn && btn !== selected) {
- btn.classList.add(selectedButtonClass);
+ element.removeEventListener('click', onAlphaPickerInKeyboardModeClick);
+ element.removeEventListener('focus', onAlphaPickerFocusIn, true);
+ element.removeEventListener('click', onAlphaPickerClick.bind(this));
+ }
+ };
+
+ render(element, options);
+
+ this.enabled(true);
+ this.visible(true);
+ }
+
+ value(value, applyValue) {
+
+ const element = this.options.element;
+ let btn;
+ let selected;
+
+ if (value !== undefined) {
+ if (value != null) {
+
+ value = value.toUpperCase();
+ this._currentValue = value;
+
+ if (this.options.mode !== 'keyboard') {
+ selected = element.querySelector(`.${selectedButtonClass}`);
+
+ try {
+ btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`);
+ } catch (err) {
+ console.error('error in querySelector:', err);
+ }
+
+ if (btn && btn !== selected) {
+ btn.classList.add(selectedButtonClass);
+ }
+ if (selected && selected !== btn) {
+ selected.classList.remove(selectedButtonClass);
+ }
}
- if (selected && selected !== btn) {
+ } else {
+ this._currentValue = value;
+
+ selected = element.querySelector(`.${selectedButtonClass}`);
+ if (selected) {
selected.classList.remove(selectedButtonClass);
}
}
- } else {
- this._currentValue = value;
-
- selected = element.querySelector('.' + selectedButtonClass);
- if (selected) {
- selected.classList.remove(selectedButtonClass);
- }
}
+
+ if (applyValue) {
+ element.dispatchEvent(new CustomEvent('alphavaluechanged', {
+ cancelable: false,
+ detail: {
+ value
+ }
+ }));
+ }
+
+ return this._currentValue;
}
- if (applyValue) {
- element.dispatchEvent(new CustomEvent('alphavaluechanged', {
- cancelable: false,
- detail: {
- value: value
- }
- }));
+ on(name, fn) {
+ const element = this.options.element;
+ element.addEventListener(name, fn);
}
- return this._currentValue;
- };
-
- AlphaPicker.prototype.on = function (name, fn) {
- var element = this.options.element;
- element.addEventListener(name, fn);
- };
-
- AlphaPicker.prototype.off = function (name, fn) {
- var element = this.options.element;
- element.removeEventListener(name, fn);
- };
-
- AlphaPicker.prototype.visible = function (visible) {
-
- var element = this.options.element;
- element.style.visibility = visible ? 'visible' : 'hidden';
- };
-
- AlphaPicker.prototype.values = function () {
-
- var element = this.options.element;
- var elems = element.querySelectorAll('.alphaPickerButton');
- var values = [];
- for (var i = 0, length = elems.length; i < length; i++) {
-
- values.push(elems[i].getAttribute('data-value'));
-
+ off(name, fn) {
+ const element = this.options.element;
+ element.removeEventListener(name, fn);
}
- return values;
- };
+ visible(visible) {
- AlphaPicker.prototype.focus = function () {
+ const element = this.options.element;
+ element.style.visibility = visible ? 'visible' : 'hidden';
+ }
- var element = this.options.element;
- focusManager.autoFocus(element, true);
- };
+ values() {
- AlphaPicker.prototype.destroy = function () {
+ const element = this.options.element;
+ const elems = element.querySelectorAll('.alphaPickerButton');
+ const values = [];
+ for (let i = 0, length = elems.length; i < length; i++) {
- var element = this.options.element;
- this.enabled(false);
- element.classList.remove('focuscontainer-x');
- this.options = null;
- };
+ values.push(elems[i].getAttribute('data-value'));
- return AlphaPicker;
-});
+ }
+
+ return values;
+ }
+
+ focus() {
+
+ const element = this.options.element;
+ focusManager.autoFocus(element, true);
+ }
+
+ destroy() {
+
+ const element = this.options.element;
+ this.enabled(false);
+ element.classList.remove('focuscontainer-x');
+ this.options = null;
+ }
+ }
+
+/* eslint-enable indent */
+export default AlphaPicker;
diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index c24fcf6ba..d77fe5660 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -192,9 +192,14 @@ button::-moz-focus-inner {
/* Needed in case this is a button */
display: block;
-
- /* Needed in case this is a button */
margin: 0 !important;
+ border: 0 !important;
+ padding: 0 !important;
+ cursor: pointer;
+ color: inherit;
+ width: 100%;
+ font-family: inherit;
+ font-size: inherit;
/* Needed in safari */
height: 100%;
@@ -203,19 +208,12 @@ button::-moz-focus-inner {
contain: strict;
}
-.cardContent-button {
- border: 0 !important;
- padding: 0 !important;
- cursor: pointer;
- color: inherit;
- width: 100%;
- vertical-align: middle;
- font-family: inherit;
- font-size: inherit;
+.cardContent:not(.defaultCardBackground) {
+ background-color: transparent;
}
-.cardContent-button:not(.defaultCardBackground) {
- background-color: transparent;
+.cardBox:not(.visualCardBox) .cardPadder {
+ background-color: #242424;
}
.visualCardBox .cardContent {
@@ -223,7 +221,8 @@ button::-moz-focus-inner {
border-bottom-right-radius: 0;
}
-.cardContent-shadow {
+.cardContent-shadow,
+.cardBox:not(.visualCardBox) .cardPadder {
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index e540a4021..52d5ed202 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -368,9 +368,7 @@ import 'programStyles';
let apiClient;
let lastServerId;
- for (let i = 0; i < items.length; i++) {
-
- let item = items[i];
+ for (const [i, item] of items.entries()) {
let serverId = item.ServerId || options.serverId;
if (serverId !== lastServerId) {
@@ -541,7 +539,7 @@ import 'programStyles';
imgType = 'Backdrop';
imgTag = item.ParentBackdropImageTags[0];
itemId = item.ParentBackdropItemId;
- } else if (item.ImageTags && item.ImageTags.Primary) {
+ } else if (item.ImageTags && item.ImageTags.Primary && (item.Type !== 'Episode' || item.ChildCount !== 0)) {
imgType = 'Primary';
imgTag = item.ImageTags.Primary;
height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
@@ -556,7 +554,10 @@ import 'programStyles';
coverImage = (Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect) <= 0.2;
}
}
-
+ } else if (item.SeriesPrimaryImageTag) {
+ imgType = 'Primary';
+ imgTag = item.SeriesPrimaryImageTag;
+ itemId = item.SeriesId;
} else if (item.PrimaryImageTag) {
imgType = 'Primary';
imgTag = item.PrimaryImageTag;
@@ -577,10 +578,6 @@ import 'programStyles';
imgType = 'Primary';
imgTag = item.ParentPrimaryImageTag;
itemId = item.ParentPrimaryImageItemId;
- } else if (item.SeriesPrimaryImageTag) {
- imgType = 'Primary';
- imgTag = item.SeriesPrimaryImageTag;
- itemId = item.SeriesId;
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
imgType = 'Primary';
imgTag = item.AlbumPrimaryImageTag;
@@ -1370,9 +1367,6 @@ import 'programStyles';
let cardScalableClose = '';
let cardContentClass = 'cardContent';
- if (!options.cardLayout) {
- cardContentClass += ' cardContent-shadow';
- }
let blurhashAttrib = '';
if (blurhash && blurhash.length > 0) {
@@ -1380,21 +1374,20 @@ import 'programStyles';
}
if (layoutManager.tv) {
-
// Don't use the IMG tag with safari because it puts a white border around it
cardImageContainerOpen = imgUrl ? ('
') : ('
');
cardImageContainerClose = '
';
} else {
// Don't use the IMG tag with safari because it puts a white border around it
- cardImageContainerOpen = imgUrl ? ('