mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

use shared alpha picker

Browse source
This commit is contained in:
Luke Pulverenti 2016-06-07 01:42:26 -04:00
parent 0f7541beda
commit d8cde41200
26 changed files with 444 additions and 331 deletions
Download patch file Download diff file Expand all files Collapse all files

8
dashboard-ui/bower_components/emby-webcomponents/.bower.json vendored
View file

@ -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",

258
dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js vendored Normal file
View file

@ -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 '<button data-value="' + l + '" class="clearButton alphaPickerButton">' + l + '</button>';
}
function render(element, options) {
element.classList.add('alphaPicker');
element.classList.add('focuscontainer-x');
var html = '';
var letters;
html += '<div class="alphaPickerRow">';
if (options.mode == 'keyboard') {
html += '<button data-value=" " is="paper-icon-button-light" class="alphaPickerButton">\
<iron-icon icon="space-bar"></iron-icon>\
</button>';
} 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 += '<button data-value="backspace" is="paper-icon-button-light" class="alphaPickerButton">\
<iron-icon icon="backspace"></iron-icon>\
</button>';
html += '</div>';
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
html += '<div class="alphaPickerRow">';
html += '<br/>';
html += letters.map(getLetterButton).join('');
html += '</div>';
} else {
html += '</div>';
}
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;
});

52
dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css vendored Normal file
View file

@ -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;
}

21
dashboard-ui/bower_components/emby-webcomponents/guide/guide.css vendored
View file

@ -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;

6
dashboard-ui/bower_components/iron-a11y-announcer/.bower.json vendored
View file

@ -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"
}

2
dashboard-ui/bower_components/polymer/.bower.json vendored
View file

@ -39,6 +39,6 @@
"commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a"
},
"_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.1.0",
"_target": "^1.0.0",
"_originalSource": "Polymer/polymer"
}

2
dashboard-ui/channelitems.html
View file

@ -1,4 +1,4 @@
<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage noSecondaryNavPage" data-contextname="${HeaderChannels}" data-require="scripts/channelitems,paper-checkbox,scripts/alphapicker" data-backbutton="true" data-menubutton="false">
<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage noSecondaryNavPage" data-contextname="${HeaderChannels}" data-require="scripts/channelitems,paper-checkbox" data-backbutton="true" data-menubutton="false">
<div data-role="content">
<div class="viewSettings">

39
dashboard-ui/css/librarybrowser.css
View file

@ -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 {

2
dashboard-ui/games.html
View file

@ -1,4 +1,4 @@
<div id="gamesPage" data-role="page" class="page libraryPage listPage" data-require="scripts/gamespage,scripts/alphapicker">
<div id="gamesPage" data-role="page" class="page libraryPage listPage" data-require="scripts/gamespage">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="gamesrecommended.html">${TabSuggestions}</a>
<a href="#" class="ui-btn-active">${TabGames}</a>

4
dashboard-ui/itemlist.html
View file

@ -1,5 +1,5 @@
<div id="itemListPage" data-role="page" class="page libraryPage folderListPage noSecondaryNavPage">
<div class="alphabetPicker">
<div class="alphaPicker vertical alphabetPicker">
</div>
<div data-role="content" class="itemListContent">
@ -7,6 +7,6 @@
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
<div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
</div>
</div>

8
dashboard-ui/movies.html
View file

@ -37,22 +37,22 @@
</div>
</div>
<div class="pageTabContent ehsContent" id="moviesTab" data-index="1">
<div class="alphabetPicker">
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer" style="text-align:center;"></div>
<div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
</div>
<div class="pageTabContent ehsContent" id="trailersTab" data-index="2">
<div class="alphabetPicker">
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer" style="text-align:center;"></div>
<div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
<p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
</div>
<div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">

12
dashboard-ui/music.html
View file

@ -41,31 +41,31 @@
<div class="favoriteSections homePageSection"></div>
</div>
<div class="pageTabContent pageTabContent ehsContent" id="albumsTab" data-index="1">
<div class="alphabetPicker">
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
<div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker"></div>
</div>
<div class="pageTabContent pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
<div class="alphabetPicker">
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
<div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
</div>
<div class="pageTabContent pageTabContent ehsContent" id="artistsTab" data-index="3">
<div class="alphabetPicker">
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
<div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
</div>
<div class="pageTabContent pageTabContent ehsContent" id="songsTab" data-index="4">
<div class="viewSettings">

113
dashboard-ui/scripts/alphapicker.js
View file

@ -1,113 +0,0 @@
define(['jQuery'], function ($) {
function getPickerHtml() {
var html = '';
html += '<a href="#">#</a>';
html += '<a href="#">A</a>';
html += '<a href="#">B</a>';
html += '<a href="#">C</a>';
html += '<a href="#">D</a>';
html += '<a href="#">E</a>';
html += '<a href="#">F</a>';
html += '<a href="#">G</a>';
html += '<a href="#">H</a>';
html += '<a href="#">I</a>';
html += '<a href="#">J</a>';
html += '<a href="#">K</a>';
html += '<a href="#">L</a>';
html += '<a href="#">M</a>';
html += '<a href="#">N</a>';
html += '<a href="#">O</a>';
html += '<a href="#">P</a>';
html += '<a href="#">Q</a>';
html += '<a href="#">R</a>';
html += '<a href="#">S</a>';
html += '<a href="#">T</a>';
html += '<a href="#">U</a>';
html += '<a href="#">V</a>';
html += '<a href="#">W</a>';
html += '<a href="#">X</a>';
html += '<a href="#">Y</a>';
html += '<a href="#">Z</a>';
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('');
};
});

24
dashboard-ui/scripts/channelitems.js
View file

@ -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;

41
dashboard-ui/scripts/itemlistpage.js
View file

@ -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();
}
});
};
});

2
dashboard-ui/scripts/librarylist.js
View file

@ -1593,7 +1593,7 @@
cardProgress.innerHTML = progressHtml;
}
else {
cardProgress = card.querySelector('.cardFooter');
cardProgress = card.querySelector('.cardProgress');
if (cardProgress) {
cardProgress.parentNode.removeChild(cardProgress);
}

20
dashboard-ui/scripts/mediaplayer-video.js
View file

@ -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 = '';

21
dashboard-ui/scripts/movies.js
View file

@ -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 () {

23
dashboard-ui/scripts/movietrailers.js
View file

@ -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 () {

23
dashboard-ui/scripts/musicalbumartists.js
View file

@ -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 () {

31
dashboard-ui/scripts/musicalbums.js
View file

@ -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 () {

26
dashboard-ui/scripts/musicartists.js
View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) {
define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
return function (view, params, tabContent) {
@ -156,26 +156,22 @@
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 () {
reloadItems(tabContent);

7
dashboard-ui/scripts/site.js
View file

@ -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'

2
dashboard-ui/scripts/tvrecommended.js
View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'scripts/alphapicker', 'scrollStyles'], function (libraryBrowser) {
define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
return function (view, params) {

22
dashboard-ui/scripts/tvshows.js
View file

@ -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 () {

4
dashboard-ui/tv.html
View file

@ -60,10 +60,10 @@
</div>
</div>
<div class="alphabetPicker">
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="itemsContainer">
<div class="itemsContainer itemsContainerWithAlphaPicker">
</div>
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
<div class="paging"></div>