diff --git a/dashboard-ui/components/remotecontrol.js b/dashboard-ui/components/remotecontrol.js index ef9b830f00..820dc6ad33 100644 --- a/dashboard-ui/components/remotecontrol.js +++ b/dashboard-ui/components/remotecontrol.js @@ -810,7 +810,7 @@ Events.on(MediaController, 'playerchange', onPlayerChange); - $(context.querySelector('.itemsContainer')).createCardMenus(); + libraryBrowser.createCardMenus(context.querySelector('.itemsContainer')); } diff --git a/dashboard-ui/scripts/episodes.js b/dashboard-ui/scripts/episodes.js index e2724ac909..61323d2f3c 100644 --- a/dashboard-ui/scripts/episodes.js +++ b/dashboard-ui/scripts/episodes.js @@ -147,7 +147,7 @@ function initPage(tabContent) { - $('.itemsContainer', tabContent).on('needsrefresh', function () { + tabContent.querySelector('.itemsContainer').addEventListener('needsrefresh', function () { reloadItems(tabContent); }); diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index ccff7c76fe..506e5fdc16 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -338,7 +338,7 @@ itemsContainer.innerHTML = html; ImageLoader.lazyChildren(itemsContainer); - $(itemsContainer).createCardMenus(); + LibraryBrowser.createCardMenus(itemsContainer); }); } @@ -368,7 +368,7 @@ } else { $('#childrenCollapsible', page).removeClass('hide'); } - renderChildren(page, item, user, context); + renderChildren(page, item); } else { $('#childrenCollapsible', page).addClass('hide'); @@ -757,7 +757,10 @@ }); html += ''; - $('#similarContent', page).html(html).lazyChildren().createCardMenus(); + var similarContent = page.querySelector('#similarContent'); + similarContent.innerHTML = html; + ImageLoader.lazyChildren(similarContent); + LibraryBrowser.createCardMenus(similarContent); }); } @@ -859,7 +862,7 @@ } var _childrenItemsFunction = null; - function renderChildren(page, item, user, context) { + function renderChildren(page, item) { _childrenItemsFunction = null; @@ -875,13 +878,14 @@ query.SortBy = "SortName"; } + var userId = Dashboard.getCurrentUserId(); var promise; if (item.Type == "Series") { promise = ApiClient.getSeasons(item.Id, { - userId: user.Id, + userId: userId, Fields: fields }); } @@ -891,14 +895,14 @@ promise = ApiClient.getEpisodes(item.SeriesId, { seasonId: item.Id, - userId: user.Id, + userId: userId, Fields: fields }); _childrenItemsFunction = getEpisodesFunction(item.SeriesId, { seasonId: item.Id, - userId: user.Id, + userId: userId, Fields: fields }); } @@ -977,7 +981,7 @@ elem.classList.remove('hiddenScrollX'); } - $(elem).createCardMenus(); + LibraryBrowser.createCardMenus(elem); if (item.Type == "BoxSet") { @@ -989,7 +993,7 @@ { name: Globalize.translate('HeaderBooks'), type: 'Book' } ]; - renderCollectionItems(page, item, collectionItemTypes, result.Items, user, context); + renderCollectionItems(page, item, collectionItemTypes, result.Items); } }); @@ -1043,12 +1047,13 @@ }); } - function renderCollectionItems(page, parentItem, types, items, user) { + function renderCollectionItems(page, parentItem, types, items) { // First empty out existing content page.querySelector('.collectionItems').innerHTML = ''; + var i, length; - for (var i = 0, length = types.length; i < length; i++) { + for (i = 0, length = types.length; i < length; i++) { var type = types[i]; @@ -1059,7 +1064,7 @@ }); if (typeItems.length) { - renderCollectionItemType(page, parentItem, type, typeItems, user); + renderCollectionItemType(page, parentItem, type, typeItems); } } @@ -1076,17 +1081,20 @@ }); if (otherTypeItems.length) { - renderCollectionItemType(page, parentItem, otherType, otherTypeItems, user); + renderCollectionItemType(page, parentItem, otherType, otherTypeItems); } if (!items.length) { - renderCollectionItemType(page, parentItem, { name: Globalize.translate('HeaderItems') }, items, user); + renderCollectionItemType(page, parentItem, { name: Globalize.translate('HeaderItems') }, items); } - $('.collectionItems .itemsContainer', page).createCardMenus(); + var containers = page.querySelectorAll('.collectionItems .itemsContainer'); + for (i = 0, length = containers.length; i < length; i++) { + LibraryBrowser.createCardMenus(containers[i]); + } } - function renderCollectionItemType(page, parentItem, type, items, user, context) { + function renderCollectionItemType(page, parentItem, type, items) { var html = ''; @@ -1109,7 +1117,6 @@ shape: shape, showTitle: true, centerText: true, - context: context, lazy: true, showDetailsMenu: true, overlayMoreButton: true, @@ -1121,14 +1128,9 @@ html += ''; var collectionItems = page.querySelector('.collectionItems'); - $(collectionItems).append(html); + collectionItems.insertAdjacentHTML('beforeend', html); ImageLoader.lazyChildren(collectionItems); - $(collectionItems).off('removefromcollection').on('removefromcollection', function (e, itemId) { - - removeFromCollection(page, parentItem, [itemId], user, context); - }); - collectionItems.querySelector('.btnAddToCollection').addEventListener('click', function () { require(['alert'], function (alert) { alert({ @@ -1139,7 +1141,7 @@ }); } - function removeFromCollection(page, parentItem, itemIds, user, context) { + function removeFromCollection(page, parentItem, itemIds) { Dashboard.showLoadingMsg(); @@ -1154,7 +1156,7 @@ }).then(function () { - renderChildren(page, parentItem, user, context); + renderChildren(page, parentItem); Dashboard.hideLoadingMsg(); }); } @@ -2113,6 +2115,13 @@ renderCriticReviews(view, currentItem); }); + view.querySelector('.collectionItems').addEventListener('removefromcollection', function (e) { + + var itemId = e.detail.itemId; + removeFromCollection(view, currentItem, [itemId]); + }); + + //var btnMore = page.querySelectorAll('.btnMoreCommands iron-icon'); //for (var i = 0, length = btnMore.length; i < length; i++) { // btnMore[i].icon = AppInfo.moreIcon; diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 7beb31669e..1980a6c18a 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -15,7 +15,7 @@ function fadeInRight(elem) { - var pct = browserInfo.mobile ? '2%' : '0.5%'; + var pct = browserInfo.mobile ? '2.5%' : '0.5%'; var keyframes = [ { opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 }, diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js index 4501d242a7..dd75a36af8 100644 --- a/dashboard-ui/scripts/librarylist.js +++ b/dashboard-ui/scripts/librarylist.js @@ -1,4 +1,4 @@ -define(['appSettings', 'appStorage', 'libraryBrowser', 'apphost', 'jQuery', 'itemHelper', 'mediaInfo'], function (appSettings, appStorage, LibraryBrowser, appHost, $, itemHelper, mediaInfo) { +define(['appSettings', 'appStorage', 'libraryBrowser', 'apphost', 'itemHelper', 'mediaInfo'], function (appSettings, appStorage, LibraryBrowser, appHost, itemHelper, mediaInfo) { var showOverlayTimeout; @@ -242,9 +242,7 @@ }); Dashboard.hideLoadingMsg(); - itemsContainer.dispatchEvent(new CustomEvent('timercancelled', { - bubbles: true - })); + itemsContainer.dispatchEvent(new CustomEvent('timercancelled', {})); }); }); }); @@ -255,7 +253,7 @@ var displayContextItem = card; if (!card.classList.contains('card') && !card.classList.contains('listItem')) { - card = $(card).parents('.listItem,.card')[0]; + card = parentWithAnyClass(card, ['listItem', 'card']); } var itemId = card.getAttribute('data-itemid'); @@ -637,13 +635,23 @@ case 'removefromplaylist': var itemsContainer = parentWithClass(card, 'itemsContainer'); if (itemsContainer) { - $(itemsContainer).trigger('removefromplaylist', [playlistItemId]); + itemsContainer.dispatchEvent(new CustomEvent('removefromplaylist', { + detail: { + playlistItemId: playlistItemId + }, + cancelable: false + })); } break; case 'removefromcollection': - var itemsContainer = parentWithClass(card, 'itemsContainer'); + var itemsContainer = parentWithClass(card, 'collectionItems'); if (itemsContainer) { - $(card).parents('.collectionItems').trigger('removefromcollection', [itemId]); + itemsContainer.dispatchEvent(new CustomEvent('removefromcollection', { + detail: { + itemId: itemId + }, + cancelable: false + })); } break; default: @@ -661,7 +669,7 @@ var card = e.target; if (!card.classList.contains('card') && !card.classList.contains('listItem')) { - card = $(card).parents('.listItem,.card')[0]; + card = parentWithAnyClass(card, ['listItem', 'card']); } var id = card.getAttribute('data-itemid'); @@ -779,6 +787,25 @@ return false; } + function hasAnyClass(elem, classNames) { + return classNames.filter(function (c) { + return elem.classList.contains(c); + }).length > 0; + } + + function parentWithAnyClass(elem, classNames) { + + while (!elem.classList || !hasAnyClass(elem, classNames)) { + elem = elem.parentNode; + + if (!elem) { + return null; + } + } + + return elem; + } + function parentWithClass(elem, className) { while (!elem.classList || !elem.classList.contains(className)) { @@ -911,17 +938,6 @@ initTapHoldMenus(curr); }; - $.fn.createCardMenus = function (options) { - - for (var i = 0, length = this.length; i < length; i++) { - - var curr = this[i]; - LibraryBrowser.createCardMenus(curr, options); - } - - return this; - }; - function initTapHoldMenus(elem) { if (elem.classList.contains('itemsContainer')) { @@ -1367,7 +1383,7 @@ Dashboard.hideLoadingMsg(); hideSelections(); - $('.itemsContainer', page).trigger('needsrefresh'); + page.querySelector('.itemsContainer').dispatchEvent(new CustomEvent('needsrefresh', {})); }); }); }); @@ -1427,16 +1443,18 @@ function playAllFromHere(index, itemsContainer, method) { - var ids = $('.mediaItem', itemsContainer).get().map(function (i) { + var ids = []; - var node = i; + var mediaItems = itemsContainer.querySelectorAll('.mediaItem'); + for (var i = 0, length = mediaItems.length; i < length; i++) { + var node = mediaItems[i]; var id = node.getAttribute('data-itemid'); while (!id) { node = node.parentNode; id = node.getAttribute('data-itemid'); } - return id; - }); + ids.push(id); + } ids = ids.slice(index); @@ -1468,16 +1486,20 @@ SupportsSync: true }; - if (LibraryBrowser.enableSync(item, user)) { - $('.categorySyncButton', page).removeClass('hide'); - } else { - $('.categorySyncButton', page).addClass('hide'); + var categorySyncButtons = page.querySelectorAll('.categorySyncButton'); + for (var i = 0, length = categorySyncButtons.length; i < length; i++) { + if (LibraryBrowser.enableSync(item, user)) { + categorySyncButtons[i].classList.remove('hide'); + } else { + categorySyncButtons[i].classList.add('hide'); + } } }); } - function onCategorySyncButtonClick(page, button) { + function onCategorySyncButtonClick(e) { + var button = this; var category = button.getAttribute('data-category'); var parentId = LibraryMenu.getTopParentId(); @@ -1496,15 +1518,15 @@ page.addEventListener('click', onItemWithActionClick); var itemsContainers = page.querySelectorAll('.itemsContainer:not(.noautoinit)'); - for (var i = 0, length = itemsContainers.length; i < length; i++) { + var i, length; + for (i = 0, length = itemsContainers.length; i < length; i++) { LibraryBrowser.createCardMenus(itemsContainers[i]); } - $('.categorySyncButton', page).on('click', function () { - - onCategorySyncButtonClick(page, this); - }); - + var categorySyncButtons = page.querySelectorAll('.categorySyncButton'); + for (i = 0, length = categorySyncButtons.length; i < length; i++) { + categorySyncButtons[i].addEventListener('click', onCategorySyncButtonClick); + } }); pageClassOn('pageshow', "libraryPage", function () { @@ -1578,18 +1600,21 @@ function onUserDataChanged(userData) { - $(document.querySelectorAll("*[data-itemid='" + userData.ItemId + "']")).each(function () { + var elems = document.querySelectorAll("*[data-itemid='" + userData.ItemId + "']"); - var mediaType = this.getAttribute('data-mediatype'); + for (var i = 0, length = elems.length; i < length; i++) { + + var elem = elems[i]; + var mediaType = elem.getAttribute('data-mediatype'); if (mediaType == 'Video') { - this.setAttribute('data-positionticks', (userData.PlaybackPositionTicks || 0)); + elem.setAttribute('data-positionticks', (userData.PlaybackPositionTicks || 0)); - if (this.classList.contains('card')) { - renderUserDataChanges(this, userData); + if (elem.classList.contains('card')) { + renderUserDataChanges(elem, userData); } } - }); + } } function onWebSocketMessage(e, data) { diff --git a/dashboard-ui/scripts/livetvsuggested.js b/dashboard-ui/scripts/livetvsuggested.js index ed952e3ba2..0f772143e0 100644 --- a/dashboard-ui/scripts/livetvsuggested.js +++ b/dashboard-ui/scripts/livetvsuggested.js @@ -124,10 +124,16 @@ self.initTab = function () { var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']'); - if (enableScrollX()) { - $('.itemsContainer', tabContent).addClass('hiddenScrollX').createCardMenus(); - } else { - $('.itemsContainer', tabContent).removeClass('hiddenScrollX').createCardMenus(); + + var containers = tabContent.querySelectorAll('.itemsContainer'); + + for (var i = 0, length = containers.length; i < length; i++) { + if (enableScrollX()) { + containers[i].classList.add('hiddenScrollX'); + } else { + containers[i].classList.remove('hiddenScrollX'); + } + LibraryBrowser.createCardMenus(containers[i]); } }; diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js index 9d13bd1d5f..a3a676ca38 100644 --- a/dashboard-ui/scripts/movies.js +++ b/dashboard-ui/scripts/movies.js @@ -291,7 +291,7 @@ reloadItems(context); }); - $('.itemsContainer', context).on('needsrefresh', function () { + context.querySelector('.itemsContainer').addEventListener('needsrefresh', function () { reloadItems(context); }); diff --git a/dashboard-ui/scripts/movietrailers.js b/dashboard-ui/scripts/movietrailers.js index 5289168d4a..4c912feb8c 100644 --- a/dashboard-ui/scripts/movietrailers.js +++ b/dashboard-ui/scripts/movietrailers.js @@ -180,7 +180,7 @@ reloadItems(tabContent); }); - $('.itemsContainer', tabContent).on('needsrefresh', function () { + tabContent.querySelector('.itemsContainer').addEventListener('needsrefresh', function () { reloadItems(tabContent); diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js index 5310068dc8..94f22e4a94 100644 --- a/dashboard-ui/scripts/musicrecommended.js +++ b/dashboard-ui/scripts/musicrecommended.js @@ -258,7 +258,9 @@ $(containers).removeClass('hiddenScrollX'); } - $(containers).createCardMenus(); + for (var i = 0, length = containers.length; i < length; i++) { + LibraryBrowser.createCardMenus(containers[i]); + } }; self.renderTab = function () { diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js index e38aefedce..e4629e1ea6 100644 --- a/dashboard-ui/scripts/nowplayingbar.js +++ b/dashboard-ui/scripts/nowplayingbar.js @@ -1,4 +1,4 @@ -define(['datetime', 'jQuery', 'paper-icon-button-light'], function (datetime, $) { +define(['datetime', 'paper-icon-button-light'], function (datetime) { var currentPlayer; @@ -9,8 +9,8 @@ var unmuteButton; var muteButton; var volumeSlider; - var unpauseButton; - var pauseButton; + var unpauseButtons; + var pauseButtons; var positionSlider; var toggleRepeatButton; var toggleRepeatButtonIcon; @@ -127,6 +127,18 @@ }); } + function onPauseClick() { + if (currentPlayer) { + currentPlayer.pause(); + } + } + + function onUnpauseClick() { + if (currentPlayer) { + currentPlayer.unpause(); + } + } + function bindEvents(elem) { currentTimeElement = elem.querySelector('.nowPlayingBarCurrentTime'); @@ -134,49 +146,49 @@ nowPlayingTextElement = elem.querySelector('.nowPlayingBarText'); nowPlayingUserData = elem.querySelector('.nowPlayingBarUserDataButtons'); - unmuteButton = $('.unmuteButton', elem).on('click', function () { + unmuteButton = elem.querySelector('.unmuteButton'); + unmuteButton.addEventListener('click', function () { if (currentPlayer) { currentPlayer.unMute(); } + }); - muteButton = $('.muteButton', elem).on('click', function () { + muteButton = elem.querySelector('.muteButton'); + muteButton.addEventListener('click', function () { if (currentPlayer) { currentPlayer.mute(); } + }); - $('.stopButton', elem).on('click', function () { + elem.querySelector('.stopButton').addEventListener('click', function () { if (currentPlayer) { currentPlayer.stop(); } }); - pauseButton = $('.pauseButton', elem).on('click', function () { + var i, length; + pauseButtons = elem.querySelectorAll('.pauseButton'); + for (i = 0, length = pauseButtons.length; i < length; i++) { + pauseButtons[i].addEventListener('click', onPauseClick); + } + unpauseButtons = elem.querySelectorAll('.unpauseButton'); + for (i = 0, length = unpauseButtons.length; i < length; i++) { + unpauseButtons[i].addEventListener('click', onUnpauseClick); + } - if (currentPlayer) { - currentPlayer.pause(); - } - }); - - unpauseButton = $('.unpauseButton', elem).on('click', function () { - - if (currentPlayer) { - currentPlayer.unpause(); - } - }); - - $('.nextTrackButton', elem).on('click', function () { + elem.querySelector('.nextTrackButton').addEventListener('click', function () { if (currentPlayer) { currentPlayer.nextTrack(); } }); - $('.previousTrackButton', elem).on('click', function () { + elem.querySelector('.previousTrackButton').addEventListener('click', function () { if (currentPlayer) { currentPlayer.previousTrack(); @@ -193,7 +205,8 @@ showRemoteControl(2); }); - toggleRepeatButton = $('.toggleRepeatButton', elem).on('click', function () { + toggleRepeatButton = elem.querySelector('.toggleRepeatButton'); + toggleRepeatButton.addEventListener('click', function () { if (currentPlayer) { var state = lastPlayerState || {}; @@ -210,21 +223,24 @@ break; } } - })[0]; + }); toggleRepeatButtonIcon = toggleRepeatButton.querySelector('iron-icon'); // Unfortunately this is necessary because the polymer elements might not be ready immediately and there doesn't seem to be an event-driven way to find out when setTimeout(function () { - volumeSlider = $('.nowPlayingBarVolumeSlider', elem).on('change', function () { + + volumeSlider = elem.querySelector('.nowPlayingBarVolumeSlider'); + volumeSlider.addEventListener('change', function () { if (currentPlayer) { currentPlayer.setVolume(this.value); } - })[0]; + }); - positionSlider = $('.nowPlayingBarPositionSlider', elem).on('change', function () { + positionSlider = elem.querySelector('.nowPlayingBarPositionSlider'); + positionSlider.addEventListener('change', function () { if (currentPlayer && lastPlayerState) { @@ -234,7 +250,7 @@ currentPlayer.seek(Math.floor(newPositionTicks)); } - })[0]; + }); positionSlider._setPinValue = function (value) { @@ -273,7 +289,7 @@ return; } - require(['jQuery', 'css!css/nowplayingbar.css', 'paper-slider'], function ($) { + require(['css!css/nowplayingbar.css', 'paper-slider'], function () { nowPlayingBarElement = document.querySelector('.nowPlayingBar'); @@ -282,7 +298,8 @@ return; } - nowPlayingBarElement = $(getNowPlayingBarHtml()).appendTo(document.body)[0]; + document.body.insertAdjacentHTML('beforeend', getNowPlayingBarHtml()); + nowPlayingBarElement = document.querySelector('.nowPlayingBar'); if ((browserInfo.safari || !AppInfo.isNativeApp) && browserInfo.mobile) { // Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc. @@ -296,11 +313,11 @@ } function showButton(button) { - button.removeClass('hide'); + button.classList.remove('hide'); } function hideButton(button) { - button.addClass('hide'); + button.classList.add('hide'); } var lastUpdateTime = 0; @@ -341,16 +358,25 @@ var playerInfo = MediaController.getPlayerInfo(); var playState = state.PlayState || {}; + var i, length; if (playState.IsPaused) { - hideButton(pauseButton); - showButton(unpauseButton); + for (i = 0, length = pauseButtons.length; i < length; i++) { + hideButton(pauseButtons[i]); + } + for (i = 0, length = unpauseButtons.length; i < length; i++) { + showButton(unpauseButtons[i]); + } } else { - showButton(pauseButton); - hideButton(unpauseButton); + for (i = 0, length = pauseButtons.length; i < length; i++) { + showButton(pauseButtons[i]); + } + for (i = 0, length = unpauseButtons.length; i < length; i++) { + hideButton(unpauseButtons[i]); + } } updatePlayerVolumeState(state, playerInfo); diff --git a/dashboard-ui/scripts/playlistedit.js b/dashboard-ui/scripts/playlistedit.js index b0722eb2b3..d2a2b61983 100644 --- a/dashboard-ui/scripts/playlistedit.js +++ b/dashboard-ui/scripts/playlistedit.js @@ -100,16 +100,7 @@ } ImageLoader.lazyChildren(elem); - $(elem).createCardMenus(); - - $(elem).off('needsrefresh').on('needsrefresh', function () { - - reloadItems(page, item); - - }).off('removefromplaylist').on('removefromplaylist', function (e, playlistItemId) { - - removeFromPlaylist(page, item, [playlistItemId]); - }); + LibraryBrowser.createCardMenus(elem); $('.btnNextPage', elem).on('click', function () { query.StartIndex += query.Limit; @@ -189,9 +180,30 @@ }); } + function init(page, item) { + + var elem = page.querySelector('#childrenContent .itemsContainer'); + + elem.addEventListener('removefromplaylist', function (e) { + + var playlistItemId = e.detail.playlistItemId; + removeFromPlaylist(page, item, [playlistItemId]); + }); + + elem.addEventListener('needsrefresh', function () { + + reloadItems(page, item); + }); + } + window.PlaylistViewer = { render: function (page, item) { + if (!page.playlistInit) { + page.playlistInit = true; + init(page, item); + } + reloadItems(page, item); showDragAndDropHelp(); }