';
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/search/searchfields.js b/src/components/search/searchfields.js
index 53ab187a81..7e77814772 100644
--- a/src/components/search/searchfields.js
+++ b/src/components/search/searchfields.js
@@ -43,7 +43,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
function initAlphaPicker(alphaPickerElement, instance) {
- instance.alphaPicker = new AlphaPicker({
+ instance.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement,
mode: 'keyboard'
});
diff --git a/src/components/tabbedview/itemstab.js b/src/components/tabbedview/itemstab.js
index 884cfa2015..4aac2f747d 100644
--- a/src/components/tabbedview/itemstab.js
+++ b/src/components/tabbedview/itemstab.js
@@ -51,7 +51,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
instance.itemsContainer = view.querySelector('.itemsContainer');
- instance.alphaPicker = new AlphaPicker({
+ instance.alphaPicker = new AlphaPicker.default({
element: instance.alphaPickerElement,
itemsContainer: instance.itemsContainer,
itemClass: 'card'
diff --git a/src/controllers/list.js b/src/controllers/list.js
index 401df3f4d1..73ca93c71c 100644
--- a/src/controllers/list.js
+++ b/src/controllers/list.js
@@ -1,4 +1,4 @@
-define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, alphaPicker) {
+define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, AlphaPicker) {
'use strict';
function getInitialLiveTvQuery(instance, params) {
@@ -544,7 +544,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
alphaPickerElement.classList.add('focuscontainer-right');
self.itemsContainer.parentNode.classList.add('padded-right-withalphapicker');
- self.alphaPicker = new alphaPicker({
+ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement,
itemsContainer: layoutManager.tv ? self.itemsContainer : null,
itemClass: 'card',
diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js
index c22b52c47e..82b162e2ad 100644
--- a/src/controllers/movies/movies.js
+++ b/src/controllers/movies/movies.js
@@ -1,4 +1,4 @@
-define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, alphaPicker, listView, cardBuilder, globalize) {
+define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, AlphaPicker, listView, cardBuilder, globalize) {
'use strict';
return function (view, params, tabContent, options) {
@@ -168,7 +168,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
query.StartIndex = 0;
itemsContainer.refreshItems();
});
- self.alphaPicker = new alphaPicker({
+ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement,
valueChangeEvent: 'click'
});
diff --git a/src/controllers/movies/movietrailers.js b/src/controllers/movies/movietrailers.js
index 5daad8d7c3..a9db0abf49 100644
--- a/src/controllers/movies/movietrailers.js
+++ b/src/controllers/movies/movietrailers.js
@@ -1,4 +1,4 @@
-define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) {
+define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
'use strict';
return function (view, params, tabContent) {
@@ -213,7 +213,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
query.StartIndex = 0;
reloadItems();
});
- self.alphaPicker = new alphaPicker({
+ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement,
valueChangeEvent: 'click'
});
diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js
index 645daf4ad9..3630e0b9f9 100644
--- a/src/controllers/music/musicalbums.js
+++ b/src/controllers/music/musicalbums.js
@@ -1,4 +1,4 @@
-define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) {
+define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
'use strict';
return function (view, params, tabContent) {
@@ -215,7 +215,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
query.StartIndex = 0;
reloadItems(tabContent);
});
- self.alphaPicker = new alphaPicker({
+ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement,
valueChangeEvent: 'click'
});
diff --git a/src/controllers/music/musicartists.js b/src/controllers/music/musicartists.js
index 7a889ff8b9..c9a0b06b77 100644
--- a/src/controllers/music/musicartists.js
+++ b/src/controllers/music/musicartists.js
@@ -1,4 +1,4 @@
-define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost, userSettings) {
+define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, appHost, userSettings) {
'use strict';
return function (view, params, tabContent) {
@@ -199,7 +199,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
query.StartIndex = 0;
reloadItems(tabContent);
});
- self.alphaPicker = new alphaPicker({
+ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement,
valueChangeEvent: 'click'
});
diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js
index 0bd5e4b52e..4425c3aee1 100644
--- a/src/controllers/shows/tvshows.js
+++ b/src/controllers/shows/tvshows.js
@@ -1,4 +1,4 @@
-define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'alphaPicker', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker, userSettings, globalize) {
+define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'alphaPicker', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, AlphaPicker, userSettings, globalize) {
'use strict';
return function (view, params, tabContent) {
@@ -226,7 +226,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
query.StartIndex = 0;
reloadItems(tabContent);
});
- self.alphaPicker = new alphaPicker({
+ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement,
valueChangeEvent: 'click'
});