From d8cde41200baa0636059e8da9827a628769769af Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Tue, 7 Jun 2016 01:42:26 -0400 Subject: [PATCH] use shared alpha picker --- .../emby-webcomponents/.bower.json | 8 +- .../alphapicker/alphapicker.js | 258 ++++++++++++++++++ .../emby-webcomponents/alphapicker/style.css | 52 ++++ .../emby-webcomponents/guide/guide.css | 21 +- .../iron-a11y-announcer/.bower.json | 6 +- .../bower_components/polymer/.bower.json | 2 +- dashboard-ui/channelitems.html | 2 +- dashboard-ui/css/librarybrowser.css | 39 +-- dashboard-ui/games.html | 2 +- dashboard-ui/itemlist.html | 4 +- dashboard-ui/movies.html | 8 +- dashboard-ui/music.html | 12 +- dashboard-ui/scripts/alphapicker.js | 113 -------- dashboard-ui/scripts/channelitems.js | 24 -- dashboard-ui/scripts/itemlistpage.js | 41 +-- dashboard-ui/scripts/librarylist.js | 2 +- dashboard-ui/scripts/mediaplayer-video.js | 20 +- dashboard-ui/scripts/movies.js | 21 +- dashboard-ui/scripts/movietrailers.js | 23 +- dashboard-ui/scripts/musicalbumartists.js | 23 +- dashboard-ui/scripts/musicalbums.js | 31 +-- dashboard-ui/scripts/musicartists.js | 28 +- dashboard-ui/scripts/site.js | 7 +- dashboard-ui/scripts/tvrecommended.js | 2 +- dashboard-ui/scripts/tvshows.js | 22 +- dashboard-ui/tv.html | 4 +- 26 files changed, 444 insertions(+), 331 deletions(-) create mode 100644 dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js create mode 100644 dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css delete mode 100644 dashboard-ui/scripts/alphapicker.js diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json index 9f96b71527..8465614643 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json +++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json @@ -15,12 +15,12 @@ }, "devDependencies": {}, "ignore": [], - "version": "1.4.31", - "_release": "1.4.31", + "version": "1.4.32", + "_release": "1.4.32", "_resolution": { "type": "version", - "tag": "1.4.31", - "commit": "c2a74911a4ce0de5a826fac66213e7309121d475" + "tag": "1.4.32", + "commit": "426134a6a3e7ac58f429862eb998e0f20c23e38f" }, "_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_target": "^1.2.0", diff --git a/dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js b/dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js new file mode 100644 index 0000000000..ff49e11a40 --- /dev/null +++ b/dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js @@ -0,0 +1,258 @@ +define(['focusManager', 'layoutManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-button-light'], function (focusManager, layoutManager) { + + function focus() { + var selected = this.querySelector('.selected'); + + if (selected) { + focusManager.focus(selected); + } else { + focusManager.autoFocus(this, true); + } + } + + function getLetterButton(l) { + return ''; + } + + function render(element, options) { + + element.classList.add('alphaPicker'); + element.classList.add('focuscontainer-x'); + + var html = ''; + var letters; + + html += '
'; + if (options.mode == 'keyboard') { + html += ''; + } else { + letters = ['#']; + html += letters.map(getLetterButton).join(''); + } + + letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; + html += letters.map(getLetterButton).join(''); + + if (options.mode == 'keyboard') { + html += ''; + html += '
'; + + letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; + html += '
'; + html += '
'; + html += letters.map(getLetterButton).join(''); + html += '
'; + } else { + html += ''; + } + + element.innerHTML = html; + + if (options.mode != 'keyboard') { + element.querySelector('.alphaPickerButton').classList.add('selected'); + } + + element.classList.add('focusable'); + element.focus = focus; + } + + function alphaPicker(options) { + + var self = this; + + var element = options.element; + var itemsContainer = options.itemsContainer; + var itemClass = options.itemClass; + + var itemFocusValue; + var 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 parentWithClass(elem, className) { + + while (!elem.classList || !elem.classList.contains(className)) { + elem = elem.parentNode; + + if (!elem) { + return null; + } + } + + return elem; + } + + function onAlphaPickerClick(e) { + + var alphaPickerButton = parentWithClass(e.target, 'alphaPickerButton'); + + if (alphaPickerButton) { + var value = alphaPickerButton.getAttribute('data-value'); + + element.dispatchEvent(new CustomEvent("alphavalueclicked", { + detail: { + value: value + } + })); + } + } + + function onAlphaPickerFocusIn(e) { + + if (alphaFocusTimeout) { + clearTimeout(alphaFocusTimeout); + alphaFocusTimeout = null; + } + + var alphaPickerButton = parentWithClass(e.target, 'alphaPickerButton'); + + if (alphaPickerButton) { + alphaFocusedElement = alphaPickerButton; + alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 100); + } + } + + function onItemsFocusIn(e) { + + var item = parentWithClass(e.target, itemClass); + + if (item) { + var prefix = item.getAttribute('data-prefix'); + if (prefix && prefix.length) { + + itemFocusValue = prefix[0]; + if (itemFocusTimeout) { + clearTimeout(itemFocusTimeout); + } + itemFocusTimeout = setTimeout(onItemFocusTimeout, 100); + } + } + } + + self.enabled = function (enabled) { + + if (enabled) { + + if (itemsContainer) { + itemsContainer.addEventListener('focus', onItemsFocusIn, true); + } + + if (options.mode == 'keyboard') { + element.addEventListener('click', onAlphaPickerClick); + } + + if (layoutManager.tv) { + element.addEventListener('focus', onAlphaPickerFocusIn, true); + } else { + element.addEventListener('click', onAlphaPickerFocusIn); + } + + } else { + + if (itemsContainer) { + itemsContainer.removeEventListener('focus', onItemsFocusIn, true); + } + + element.removeEventListener('click', onAlphaPickerClick); + element.removeEventListener('focus', onAlphaPickerFocusIn, true); + element.removeEventListener('click', onAlphaPickerFocusIn); + } + }; + + self.on = function (name, fn) { + element.addEventListener(name, fn); + }; + + self.off = function (name, fn) { + element.removeEventListener(name, fn); + }; + + self.destroy = function () { + + self.enabled(false); + element.classList.remove('focuscontainer-x'); + }; + + self.visible = function (visible) { + + element.style.visibility = visible ? 'visible' : 'hidden'; + }; + + var currentValue; + self.value = function (value, applyValue) { + + if (value != null) { + + value = value.toUpperCase(); + currentValue = value; + + if (options.mode != 'keyboard') { + var selected = element.querySelector('.selected'); + var btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']'); + + if (btn && btn != selected) { + btn.classList.add('selected'); + } + if (selected && selected != btn) { + selected.classList.remove('selected'); + } + } + + if (applyValue) { + element.dispatchEvent(new CustomEvent("alphavaluechanged", { + detail: { + value: value + } + })); + } + } + + return currentValue; + }; + + self.values = function () { + + var elems = element.querySelectorAll('.alphaPickerButton'); + var values = []; + for (var i = 0, length = elems.length; i < length; i++) { + + values.push(elems[i].getAttribute('data-value')); + + } + + return values; + }; + + self.focus = function () { + focusManager.autoFocus(element, true); + }; + + render(element, options); + + self.enabled(true); + self.visible(true); + } + + return alphaPicker; +}); \ No newline at end of file diff --git a/dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css b/dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css new file mode 100644 index 0000000000..6abb9dd1fe --- /dev/null +++ b/dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css @@ -0,0 +1,52 @@ +.alphaPicker { + text-align: center; + display: flex; + flex-direction: column; +} + +.alphaPickerRow { + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; +} + +.alphaPicker.vertical .alphaPickerRow { + flex-direction: column; +} + +button.alphaPickerButton { + min-width: initial; + margin: 0; + padding: .1em .4em !important; + width: auto; + border-radius: .1em; + font-weight: normal; + opacity: .25; +} + +.vertical .alphaPickerButton { + padding: .25em .4em !important; +} + +.layout-desktop .alphaPickerButton { + opacity: .7; +} + +[is=paper-icon-button-light].alphaPickerButton { + opacity: .25; + width: 4.4vh; + height: 4.4vh; +} + +.alphaPickerButton.selected { + color: #000; + background-color: #bbb; + opacity: 1; +} + +.alphaPickerButton:focus { + background-color: #52B54B; + opacity: 1; + color: #fff; +} diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css index 563e0fbb3b..c526024d77 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css +++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css @@ -4,25 +4,6 @@ align-items: initial; } - .tvguide ::-webkit-scrollbar { - width: 10px; - height: 10px; - } - - .tvguide ::-webkit-scrollbar-button:start:decrement, - .tvguide ::-webkit-scrollbar-button:end:increment { - display: none; - } - - .tvguide ::-webkit-scrollbar-track-piece { - background-color: #3b3b3b; - } - - .tvguide ::-webkit-scrollbar-thumb:vertical, .tvguide ::-webkit-scrollbar-thumb:horizontal { - -webkit-border-radius: 2px; - background: #888 no-repeat center; - } - .tvGuideHeader { white-space: nowrap; width: 100%; @@ -144,7 +125,7 @@ .currentTimeIndicatorArrowContainer { position: absolute; - bottom: -1.35vh; + bottom: -1.3vh; width: 100%; color: #52B54B; margin-left: .65vh; diff --git a/dashboard-ui/bower_components/iron-a11y-announcer/.bower.json b/dashboard-ui/bower_components/iron-a11y-announcer/.bower.json index d0996a0614..1baafa9707 100644 --- a/dashboard-ui/bower_components/iron-a11y-announcer/.bower.json +++ b/dashboard-ui/bower_components/iron-a11y-announcer/.bower.json @@ -30,14 +30,14 @@ "web-component-tester": "polymer/web-component-tester#^3.4.0" }, "ignore": [], - "homepage": "https://github.com/PolymerElements/iron-a11y-announcer", + "homepage": "https://github.com/polymerelements/iron-a11y-announcer", "_release": "1.0.4", "_resolution": { "type": "version", "tag": "v1.0.4", "commit": "5ce3eb8c4282bb53cd72e348858dc6be6b4c50b9" }, - "_source": "git://github.com/PolymerElements/iron-a11y-announcer.git", + "_source": "git://github.com/polymerelements/iron-a11y-announcer.git", "_target": "^1.0.0", - "_originalSource": "PolymerElements/iron-a11y-announcer" + "_originalSource": "polymerelements/iron-a11y-announcer" } \ No newline at end of file diff --git a/dashboard-ui/bower_components/polymer/.bower.json b/dashboard-ui/bower_components/polymer/.bower.json index e3120e6882..4782b3c50f 100644 --- a/dashboard-ui/bower_components/polymer/.bower.json +++ b/dashboard-ui/bower_components/polymer/.bower.json @@ -39,6 +39,6 @@ "commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a" }, "_source": "git://github.com/Polymer/polymer.git", - "_target": "^1.1.0", + "_target": "^1.0.0", "_originalSource": "Polymer/polymer" } \ No newline at end of file diff --git a/dashboard-ui/channelitems.html b/dashboard-ui/channelitems.html index 83c12d7967..f4118157cf 100644 --- a/dashboard-ui/channelitems.html +++ b/dashboard-ui/channelitems.html @@ -1,4 +1,4 @@ -
+
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 8ac7f660d3..849a68776b 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -1088,11 +1088,14 @@ span.itemCommunityRating:not(:empty) + .userDataIcons { padding-top: 1px; } -@media all and (min-height: 480px) { +@media all and (max-height: 480px) { .alphabetPicker { - display: block; + display: none; } +} + +@media all and (min-height: 480px) { .itemsContainerWithAlphaPicker { margin-right: 20px; @@ -1117,38 +1120,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons { } } -@media all and (min-height: 600px) { - - .alphabetPicker a { - padding-top: 2px; - padding-bottom: 2px; - } -} - -@media all and (min-height: 650px) { - - .alphabetPicker a { - padding-top: 3px; - padding-bottom: 3px; - } -} - -@media all and (min-height: 700px) { - - .alphabetPicker a { - padding-top: 4px; - padding-bottom: 4px; - } -} - -@media all and (min-height: 750px) { - - .alphabetPicker a { - padding-top: 5px; - padding-bottom: 5px; - } -} - @media all and (min-height: 900px) { .alphabetPicker { diff --git a/dashboard-ui/games.html b/dashboard-ui/games.html index 71b766863c..e941584825 100644 --- a/dashboard-ui/games.html +++ b/dashboard-ui/games.html @@ -1,4 +1,4 @@ -
+
${TabSuggestions} ${TabGames} diff --git a/dashboard-ui/itemlist.html b/dashboard-ui/itemlist.html index 8c4cdd2559..6cdec15d67 100644 --- a/dashboard-ui/itemlist.html +++ b/dashboard-ui/itemlist.html @@ -1,5 +1,5 @@ 
-
+
@@ -7,6 +7,6 @@
-
+
\ No newline at end of file diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html index c3ba7af6fa..86b595e07c 100644 --- a/dashboard-ui/movies.html +++ b/dashboard-ui/movies.html @@ -37,22 +37,22 @@
-
+
-
+
-
+
-
+
diff --git a/dashboard-ui/music.html b/dashboard-ui/music.html index f2067c60f9..3c5f3efafd 100644 --- a/dashboard-ui/music.html +++ b/dashboard-ui/music.html @@ -41,31 +41,31 @@
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/dashboard-ui/scripts/alphapicker.js b/dashboard-ui/scripts/alphapicker.js deleted file mode 100644 index 780a5612a3..0000000000 --- a/dashboard-ui/scripts/alphapicker.js +++ /dev/null @@ -1,113 +0,0 @@ -define(['jQuery'], function ($) { - - function getPickerHtml() { - - var html = ''; - - html += '#'; - html += 'A'; - html += 'B'; - html += 'C'; - html += 'D'; - html += 'E'; - html += 'F'; - html += 'G'; - html += 'H'; - html += 'I'; - html += 'J'; - html += 'K'; - html += 'L'; - html += 'M'; - html += 'N'; - html += 'O'; - html += 'P'; - html += 'Q'; - html += 'R'; - html += 'S'; - html += 'T'; - html += 'U'; - html += 'V'; - html += 'W'; - html += 'X'; - html += 'Y'; - html += 'Z'; - - return html; - } - - function init(container, picker) { - - $('.itemsContainer', container).addClass('itemsContainerWithAlphaPicker'); - - picker.innerHTML = getPickerHtml(); - - $(picker).on('click', 'a', function () { - - var elem = this; - - var isSelected = elem.classList.contains('selectedCharacter'); - - $('.selectedCharacter', picker).removeClass('selectedCharacter'); - - if (!isSelected) { - - elem.classList.add('selectedCharacter'); - $(picker).trigger('alphaselect', [this.innerHTML]); - } else { - $(picker).trigger('alphaclear'); - } - }); - } - - pageClassOn('pageinit', "libraryPage", function () { - - var page = this; - - var pickers = page.querySelectorAll('.alphabetPicker'); - - if (!pickers.length) { - return; - } - - if (page.classList.contains('pageWithAbsoluteTabs')) { - - for (var i = 0, length = pickers.length; i < length; i++) { - init($(pickers[i]).parents('.pageTabContent'), pickers[i]); - } - - } else { - init(page, pickers[0]); - } - }); - - $.fn.alphaValue = function (val) { - - if (val == null) { - return $('.selectedCharacter', this).html(); - } - - val = val.toLowerCase(); - - $('.selectedCharacter', this).removeClass('selectedCharacter'); - - $('a', this).each(function () { - - if (this.innerHTML.toLowerCase() == val) { - - this.classList.add('selectedCharacter'); - - } else { - this.classList.remove('selectedCharacter'); - } - - }); - - return this; - }; - - $.fn.alphaClear = function (val) { - - return this.alphaValue(''); - }; - -}); \ No newline at end of file diff --git a/dashboard-ui/scripts/channelitems.js b/dashboard-ui/scripts/channelitems.js index 286f72b77b..7838d3ddfa 100644 --- a/dashboard-ui/scripts/channelitems.js +++ b/dashboard-ui/scripts/channelitems.js @@ -247,32 +247,8 @@ function updateFilterControls(page) { - var query = getQuery(page); - $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater); } - pageIdOn('pageinit', "channelItemsPage", function () { - - var page = this; - - $('.alphabetPicker', this).on('alphaselect', function (e, character) { - - var query = getQuery(page); - query.NameStartsWithOrGreater = character; - query.StartIndex = 0; - - reloadItems(page); - - }).on('alphaclear', function (e) { - - var query = getQuery(page); - query.NameStartsWithOrGreater = ''; - - reloadItems(page); - }); - - }); - pageIdOn('pagebeforeshow', "channelItemsPage", function () { var page = this; diff --git a/dashboard-ui/scripts/itemlistpage.js b/dashboard-ui/scripts/itemlistpage.js index d8ad427be3..9e6651f470 100644 --- a/dashboard-ui/scripts/itemlistpage.js +++ b/dashboard-ui/scripts/itemlistpage.js @@ -1,4 +1,4 @@ -define(['libraryBrowser', 'jQuery'], function (libraryBrowser, $) { +define(['libraryBrowser', 'jQuery', 'alphaPicker'], function (libraryBrowser, $, alphaPicker) { return function (view, params) { @@ -237,13 +237,6 @@ }); } - function updateFilterControls() { - - var query = getQuery(); - - $('.alphabetPicker', view).alphaValue(query.NameStartsWithOrGreater); - } - function onListItemClick(e) { var query = getQuery(); @@ -257,28 +250,38 @@ } } - $('.alphabetPicker', view).on('alphaselect', function (e, character) { - + var alphaPickerElement = view.querySelector('.alphaPicker'); + alphaPickerElement.addEventListener('alphavaluechanged', function (e) { + var newValue = e.detail.value; var query = getQuery(); - query.NameStartsWithOrGreater = character; + query.NameStartsWithOrGreater = newValue; query.StartIndex = 0; - - reloadItems(view); - - }).on('alphaclear', function (e) { - - var query = getQuery(); - query.NameStartsWithOrGreater = ''; - reloadItems(view); }); + self.alphaPicker = new alphaPicker({ + element: alphaPickerElement + }); + $(view).on('click', '.mediaItem', onListItemClick); + function updateFilterControls() { + + var query = getQuery(); + + self.alphaPicker.value(query.NameStartsWithOrGreater); + } + view.addEventListener('viewbeforeshow', function (e) { reloadItems(view); updateFilterControls(); LibraryMenu.setBackButtonVisible(params.context); }); + + view.addEventListener('viewdestroy', function (e) { + if (self.alphaPicker) { + self.alphaPicker.destroy(); + } + }); }; }); \ No newline at end of file diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js index a357890966..26449340fc 100644 --- a/dashboard-ui/scripts/librarylist.js +++ b/dashboard-ui/scripts/librarylist.js @@ -1593,7 +1593,7 @@ cardProgress.innerHTML = progressHtml; } else { - cardProgress = card.querySelector('.cardFooter'); + cardProgress = card.querySelector('.cardProgress'); if (cardProgress) { cardProgress.parentNode.removeChild(cardProgress); } diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 22823b4d7a..8877114a72 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -432,12 +432,28 @@ nowPlayingTabButtons[i].addEventListener('click', onTabButtonClick); } - elem.querySelector('.chapterCard').addEventListener('click', function () { + elem.addEventListener('click', function (e) { - self.seek(parseInt(this.getAttribute('data-position'))); + var chapterCard = parentWithClass(e.target, 'chapterCard'); + if (chapterCard) { + self.seek(parseInt(chapterCard.getAttribute('data-position'))); + } }); }; + function parentWithClass(elem, className) { + + while (!elem.classList || !elem.classList.contains(className)) { + elem = elem.parentNode; + + if (!elem) { + return null; + } + } + + return elem; + } + function getNowPlayingTabsHtml(item) { var html = ''; diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js index a3a676ca38..ea0ee1d293 100644 --- a/dashboard-ui/scripts/movies.js +++ b/dashboard-ui/scripts/movies.js @@ -1,4 +1,4 @@ -define(['jQuery'], function ($) { +define(['jQuery', 'alphaPicker'], function ($, alphaPicker) { return function (view, params, tabContent) { @@ -270,25 +270,22 @@ var query = getQuery(context); - $('.alphabetPicker', context).alphaValue(query.NameStartsWithOrGreater); + self.alphaPicker.value(query.NameStartsWithOrGreater); } function initPage(context) { - $('.alphabetPicker', context).on('alphaselect', function (e, character) { - + var alphaPickerElement = context.querySelector('.alphaPicker'); + alphaPickerElement.addEventListener('alphavaluechanged', function (e) { + var newValue = e.detail.value; var query = getQuery(context); - query.NameStartsWithOrGreater = character; + query.NameStartsWithOrGreater = newValue; query.StartIndex = 0; - reloadItems(context); + }); - }).on('alphaclear', function (e) { - - var query = getQuery(context); - query.NameStartsWithOrGreater = ''; - - reloadItems(context); + self.alphaPicker = new alphaPicker({ + element: alphaPickerElement }); context.querySelector('.itemsContainer').addEventListener('needsrefresh', function () { diff --git a/dashboard-ui/scripts/movietrailers.js b/dashboard-ui/scripts/movietrailers.js index 4c912feb8c..63da5df9c5 100644 --- a/dashboard-ui/scripts/movietrailers.js +++ b/dashboard-ui/scripts/movietrailers.js @@ -1,4 +1,4 @@ -define(['jQuery'], function ($) { +define(['jQuery', 'alphaPicker'], function ($, alphaPicker) { var data = {}; @@ -159,25 +159,22 @@ var query = getQuery(tabContent); - $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater); + self.alphaPicker.value(query.NameStartsWithOrGreater); } function initPage(page, tabContent) { - $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) { - - var query = getQuery(page); - query.NameStartsWithOrGreater = character; + var alphaPickerElement = tabContent.querySelector('.alphaPicker'); + alphaPickerElement.addEventListener('alphavaluechanged', function (e) { + var newValue = e.detail.value; + var query = getQuery(tabContent); + query.NameStartsWithOrGreater = newValue; query.StartIndex = 0; - reloadItems(tabContent); + }); - }).on('alphaclear', function (e) { - - var query = getQuery(page); - query.NameStartsWithOrGreater = ''; - - reloadItems(tabContent); + self.alphaPicker = new alphaPicker({ + element: alphaPickerElement }); tabContent.querySelector('.itemsContainer').addEventListener('needsrefresh', function () { diff --git a/dashboard-ui/scripts/musicalbumartists.js b/dashboard-ui/scripts/musicalbumartists.js index f05469d4a8..20e3177ba6 100644 --- a/dashboard-ui/scripts/musicalbumartists.js +++ b/dashboard-ui/scripts/musicalbumartists.js @@ -1,4 +1,4 @@ -define(['jQuery'], function ($) { +define(['jQuery', 'alphaPicker'], function ($, alphaPicker) { return function (view, params, tabContent) { @@ -156,25 +156,20 @@ var query = getQuery(tabContent); - $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater); + self.alphaPicker.value(query.NameStartsWithOrGreater); } - $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) { - + var alphaPickerElement = tabContent.querySelector('.alphaPicker'); + alphaPickerElement.addEventListener('alphavaluechanged', function (e) { + var newValue = e.detail.value; var query = getQuery(tabContent); - - query.NameStartsWithOrGreater = character; + query.NameStartsWithOrGreater = newValue; query.StartIndex = 0; - reloadItems(tabContent); + }); - }).on('alphaclear', function (e) { - - var query = getQuery(tabContent); - - query.NameStartsWithOrGreater = ''; - - reloadItems(tabContent); + self.alphaPicker = new alphaPicker({ + element: alphaPickerElement }); self.renderTab = function () { diff --git a/dashboard-ui/scripts/musicalbums.js b/dashboard-ui/scripts/musicalbums.js index 55de337146..0aa2164b96 100644 --- a/dashboard-ui/scripts/musicalbums.js +++ b/dashboard-ui/scripts/musicalbums.js @@ -1,4 +1,4 @@ -define(['jQuery'], function ($) { +define(['jQuery', 'alphaPicker'], function ($, alphaPicker) { return function (view, params, tabContent) { @@ -209,33 +209,20 @@ var query = getQuery(page); - $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater); + self.alphaPicker.value(query.NameStartsWithOrGreater); } - $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) { - + var alphaPickerElement = tabContent.querySelector('.alphaPicker'); + alphaPickerElement.addEventListener('alphavaluechanged', function (e) { + var newValue = e.detail.value; var query = getQuery(tabContent); - - if (query.SortBy.indexOf('AlbumArtist') == -1) { - query.NameStartsWithOrGreater = character; - query.AlbumArtistStartsWithOrGreater = ''; - } else { - query.AlbumArtistStartsWithOrGreater = character; - query.NameStartsWithOrGreater = ''; - } - + query.NameStartsWithOrGreater = newValue; query.StartIndex = 0; - reloadItems(tabContent); + }); - }).on('alphaclear', function (e) { - - var query = getQuery(tabContent); - - query.NameStartsWithOrGreater = ''; - query.AlbumArtistStartsWithOrGreater = ''; - - reloadItems(tabContent); + self.alphaPicker = new alphaPicker({ + element: alphaPickerElement }); self.renderTab = function () { diff --git a/dashboard-ui/scripts/musicartists.js b/dashboard-ui/scripts/musicartists.js index 3fa00ba7a3..6b74f14160 100644 --- a/dashboard-ui/scripts/musicartists.js +++ b/dashboard-ui/scripts/musicartists.js @@ -1,4 +1,4 @@ -define(['jQuery'], function ($) { +define(['jQuery', 'alphaPicker'], function ($, alphaPicker) { return function (view, params, tabContent) { @@ -156,27 +156,23 @@ var query = getQuery(tabContent); - $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater); + self.alphaPicker.value(query.NameStartsWithOrGreater); } - $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) { - + var alphaPickerElement = tabContent.querySelector('.alphaPicker'); + alphaPickerElement.addEventListener('alphavaluechanged', function (e) { + var newValue = e.detail.value; var query = getQuery(tabContent); - - query.NameStartsWithOrGreater = character; + query.NameStartsWithOrGreater = newValue; query.StartIndex = 0; - - reloadItems(tabContent); - - }).on('alphaclear', function (e) { - - var query = getQuery(tabContent); - - query.NameStartsWithOrGreater = ''; - reloadItems(tabContent); }); - self.renderTab = function () { + + self.alphaPicker = new alphaPicker({ + element: alphaPickerElement + }); + + self.renderTab = function () { reloadItems(tabContent); }; diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 22f5f4a841..9988b11e7f 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -1792,6 +1792,7 @@ var AppInfo = {}; define("libjass", [bowerPath + "/libjass/libjass", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency); define("emby-button", [embyWebComponentsBowerPath + "/emby-button/emby-button"], returnFirstDependency); + define("alphaPicker", [embyWebComponentsBowerPath + "/alphapicker/alphapicker"], returnFirstDependency); define("paper-icon-button-light", [embyWebComponentsBowerPath + "/emby-button/paper-icon-button-light"]); define("emby-input", [embyWebComponentsBowerPath + "/emby-input/emby-input"], returnFirstDependency); @@ -2582,7 +2583,7 @@ var AppInfo = {}; defineRoute({ path: '/itemlist.html', - dependencies: ['paper-checkbox', 'scripts/alphapicker'], + dependencies: ['paper-checkbox'], autoFocus: false, controller: 'scripts/itemlistpage', transition: 'fade' @@ -2744,7 +2745,7 @@ var AppInfo = {}; defineRoute({ path: '/movies.html', - dependencies: ['paper-checkbox', 'scripts/alphapicker', 'emby-button'], + dependencies: ['paper-checkbox', 'emby-button'], autoFocus: false, controller: 'scripts/moviesrecommended', transition: 'fade' @@ -2752,7 +2753,7 @@ var AppInfo = {}; defineRoute({ path: '/music.html', - dependencies: ['scripts/alphapicker'], + dependencies: [], controller: 'scripts/musicrecommended', autoFocus: false, transition: 'fade' diff --git a/dashboard-ui/scripts/tvrecommended.js b/dashboard-ui/scripts/tvrecommended.js index 7ee10c4568..009c098dab 100644 --- a/dashboard-ui/scripts/tvrecommended.js +++ b/dashboard-ui/scripts/tvrecommended.js @@ -1,4 +1,4 @@ -define(['libraryBrowser', 'scripts/alphapicker', 'scrollStyles'], function (libraryBrowser) { +define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) { return function (view, params) { diff --git a/dashboard-ui/scripts/tvshows.js b/dashboard-ui/scripts/tvshows.js index 90974ded37..01d18bd7ba 100644 --- a/dashboard-ui/scripts/tvshows.js +++ b/dashboard-ui/scripts/tvshows.js @@ -1,4 +1,4 @@ -define(['events', 'libraryBrowser', 'imageLoader', 'jQuery'], function (events, libraryBrowser, imageLoader, $) { +define(['events', 'libraryBrowser', 'imageLoader', 'jQuery', 'alphaPicker'], function (events, libraryBrowser, imageLoader, $, alphaPicker) { return function (view, params, tabContent) { @@ -187,26 +187,22 @@ function updateFilterControls(tabContent) { var query = getQuery(tabContent); - $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater); + self.alphaPicker.value(query.NameStartsWithOrGreater); } function initPage(tabContent) { - $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) { - + var alphaPickerElement = tabContent.querySelector('.alphaPicker'); + alphaPickerElement.addEventListener('alphavaluechanged', function (e) { + var newValue = e.detail.value; var query = getQuery(tabContent); - query.NameStartsWithOrGreater = character; + query.NameStartsWithOrGreater = newValue; query.StartIndex = 0; - reloadItems(tabContent); + }); - }).on('alphaclear', function (e) { - - var query = getQuery(tabContent); - query.NameStartsWithOrGreater = ''; - getQuery(tabContent).StartIndex = 0; - - reloadItems(tabContent); + self.alphaPicker = new alphaPicker({ + element: alphaPickerElement }); tabContent.querySelector('.btnFilter').addEventListener('click', function () { diff --git a/dashboard-ui/tv.html b/dashboard-ui/tv.html index 26e96d5407..e115cf0acf 100644 --- a/dashboard-ui/tv.html +++ b/dashboard-ui/tv.html @@ -60,10 +60,10 @@
-
+
-
+