From 653293c3b176cf40d09ba9565b379eacb4ebcc69 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Sun, 27 Sep 2015 19:32:09 -0400 Subject: [PATCH] add multi-select commands --- dashboard-ui/css/librarybrowser.css | 50 ++-- dashboard-ui/scripts/episodes.js | 8 - dashboard-ui/scripts/librarylist.js | 350 +++++++++++++++++----------- dashboard-ui/scripts/movies.js | 8 - 4 files changed, 250 insertions(+), 166 deletions(-) diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 1804e4f09..b73c583e0 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -312,17 +312,6 @@ vertical-align: middle; } -.criticRatingSummary { - color: #506A16 !important; - background-color: #F2F0C4; - background-image: -webkit-gradient(linear,left top,left bottom,from(#FFE37C),to(#F2F0C4)); - background-image: -webkit-linear-gradient(top,#FFE37C,#F2F0C4); - background-image: -moz-linear-gradient(top,#FFE37C,#F2F0C4); - background-image: -ms-linear-gradient(top,#FFE37C,#F2F0C4); - background-image: -o-linear-gradient(top,#FFE37C,#F2F0C4); - background-image: linear-gradient(top,#FFE37C,#F2F0C4); -} - .criticRatingScore { font-weight: bold; font-size: 18px; @@ -1216,19 +1205,42 @@ span.itemCommunityRating:not(:empty) + .userDataIcons { bottom: 0; left: 0; right: 0; - height: 55px; - background-color: rgba(0, 0, 0, .85); + top: 0; + background-color: rgba(0, 0, 0, .3); z-index: 999; - text-align: center; - padding: 1em; + border: 2px solid #52B54B; } - .itemSelectionPanel .ui-checkbox { - max-width: 130px; - margin-left: auto; - margin-right: auto; + .itemSelectionPanel #checkbox { + border-radius: 0 !important; } +.selectionCommandsPanel { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 50px; + background: #52B54B; + z-index: 1000; +} + + .selectionCommandsPanel paper-icon-button { + color: #fff; + vertical-align: middle; + } + +.itemSelectionCount { + font-size: 28px; + vertical-align: middle; + color: #fff; +} + +.selectionCommandsPanel iron-icon { + height: 32px; + width: 32px; +} + @media all and (min-height: 480px) { .alphabetPicker { diff --git a/dashboard-ui/scripts/episodes.js b/dashboard-ui/scripts/episodes.js index 1c1588540..50756169f 100644 --- a/dashboard-ui/scripts/episodes.js +++ b/dashboard-ui/scripts/episodes.js @@ -379,14 +379,6 @@ reloadItems(tabContent, viewPanel); updateFilterControls(tabContent, viewPanel); } - - Dashboard.getCurrentUser().done(function (user) { - if (user.Policy.IsAdministrator) { - $('.btnMergeVersions', page).show(); - } else { - $('.btnMergeVersions', page).hide(); - } - }); }; })(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js index fbbe49a07..423a0b261 100644 --- a/dashboard-ui/scripts/librarylist.js +++ b/dashboard-ui/scripts/librarylist.js @@ -519,25 +519,8 @@ }); } - function onListViewMenuButtonClick(e) { + function onListViewPlayButtonClick(e, playButton) { - var btn = parentWithClass(e.target, 'listviewMenuButton') || parentWithClass(e.target, 'cardOverlayMoreButton'); - - if (btn) { - showContextMenu(btn, {}); - - e.preventDefault(); - return false; - } - } - - function onListViewPlayButtonClick(e) { - - var playButton = parentWithClass(e.target, 'cardOverlayPlayButton'); - - if (!playButton) { - return; - } var card = e.target; if (!card.classList.contains('card') && !card.classList.contains('listItem')) { @@ -579,13 +562,40 @@ return false; } - function onGroupedCardClick(e) { + function onCardClick(e) { - var card = parentWithClass(e.target, 'groupedCard'); + var playButton = parentWithClass(e.target, 'cardOverlayPlayButton'); - if (!card) { - return; + if (playButton) { + return onListViewPlayButtonClick(e, playButton); } + + var listviewMenuButton = parentWithClass(e.target, 'listviewMenuButton') || parentWithClass(e.target, 'cardOverlayMoreButton'); + + if (listviewMenuButton) { + showContextMenu(listviewMenuButton, {}); + + e.preventDefault(); + return false; + } + + var card = parentWithClass(e.target, 'card'); + + if (card) { + + var itemSelectionPanel = card.querySelector('.itemSelectionPanel'); + if (itemSelectionPanel) { + return onItemSelectionPanelClick(e, itemSelectionPanel); + } + + if (card.classList.contains('groupedCard')) { + return onGroupedCardClick(e); + } + } + } + + function onGroupedCardClick(e, card) { + var itemId = card.getAttribute('data-itemid'); var context = card.getAttribute('data-context'); @@ -872,7 +882,7 @@ elem = elem.querySelector('a'); - if ($('.itemSelectionPanel:visible', elem).length) { + if (elem.querySelector('.itemSelectionPanel')) { return; } @@ -945,20 +955,14 @@ preventHover = true; } - this.off('click', onGroupedCardClick); - this.on('click', onGroupedCardClick); - - this.off('click', onListViewMenuButtonClick); - this.on('click', onListViewMenuButtonClick); - - this.off('click', onListViewPlayButtonClick); - this.on('click', onListViewPlayButtonClick); + this.off('click', onCardClick); + this.on('click', onCardClick); if (AppInfo.isTouchPreferred) { - //this.off('contextmenu', disableEvent); - //this.on('contextmenu', disableEvent); - this.off('contextmenu', onContextMenu); - this.on('contextmenu', onContextMenu); + this.off('contextmenu', disableEvent); + this.on('contextmenu', disableEvent); + //this.off('contextmenu', onContextMenu); + //this.on('contextmenu', onContextMenu); } else { this.off('contextmenu', onContextMenu); @@ -975,7 +979,7 @@ } for (var i = 0, length = this.length; i < length; i++) { - //initTapHold(this[i]); + initTapHold(this[i]); } return this; @@ -987,7 +991,31 @@ } function onTapHold(e) { - onContextMenu(e); + + var card = parentWithClass(e.target, 'card'); + + if (card) { + + showSelections(card); + + e.preventDefault(); + return false; + } + } + + function onTapHoldUp(e) { + + var itemSelectionPanel = parentWithClass(e.target, 'itemSelectionPanel'); + + if (itemSelectionPanel) { + if (!parentWithClass(e.target, 'chkItemSelect')) { + var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); + + if (chkItemSelect) { + chkItemSelect.checked = !chkItemSelect.checked; + } + } + } } function initTapHold(element) { @@ -1001,78 +1029,187 @@ var hammertime = new Hammer(element); hammertime.on('press', onTapHold); + hammertime.on('pressup', onTapHoldUp); }); } - function toggleSelections(page) { + function onItemSelectionPanelClick(e, itemSelectionPanel) { - Dashboard.showLoadingMsg(); + // toggle the checkbox, if it wasn't clicked on + if (!parentWithClass(e.target, 'chkItemSelect')) { + var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); - var selectionCommands = $('.selectionCommands', page); + if (chkItemSelect) { + var newValue = !chkItemSelect.checked; + chkItemSelect.checked = newValue; + updateItemSelection(chkItemSelect, newValue); + } + } - if (selectionCommands.is(':visible')) { + e.preventDefault(); + return false; + } - selectionCommands.hide(); - $('.itemSelectionPanel', page).hide(); + function showSelection(item) { - } else { + var itemSelectionPanel = item.querySelector('.itemSelectionPanel'); - selectionCommands.show(); + if (!itemSelectionPanel) { - var panels = $('.itemSelectionPanel', page).show(); + itemSelectionPanel = document.createElement('div'); + itemSelectionPanel.classList.add('itemSelectionPanel'); - if (!panels.length) { + item.querySelector('.cardContent').appendChild(itemSelectionPanel); - var index = 0; - $('.cardContent', page).each(function () { - var chkItemSelectId = 'chkItemSelect' + index; + var html = ''; - $(this).append('
'); - index++; - }); + html += ''; - $('.itemsContainer', page).trigger('create'); + itemSelectionPanel.innerHTML = html; + } + } + + function showSelectionCommands() { + + var selectionCommandsPanel = document.querySelector('.selectionCommandsPanel'); + + if (!selectionCommandsPanel) { + + selectionCommandsPanel = document.createElement('div'); + selectionCommandsPanel.classList.add('selectionCommandsPanel'); + + document.body.appendChild(selectionCommandsPanel); + + var html = ''; + + html += '
'; + html += ''; + html += ''; + html += '
'; + + html += ''; + + selectionCommandsPanel.innerHTML = html; + + $('.btnCloseSelectionPanel', selectionCommandsPanel).on('click', hideSelections); + $('.btnSelectionPanelOptions', selectionCommandsPanel).on('click', showMenuForSelectedItems); + } + } + + function showSelections(initialCard) { + + var cards = document.querySelectorAll('.card'); + for (var i = 0, length = cards.length; i < length; i++) { + showSelection(cards[i]); + } + + showSelectionCommands(); + initialCard.querySelector('.chkItemSelect').checked = true; + updateItemSelection(initialCard, true); + } + + function hideSelections() { + + var selectionCommandsPanel = document.querySelector('.selectionCommandsPanel'); + if (selectionCommandsPanel) { + + selectionCommandsPanel.parentNode.removeChild(selectionCommandsPanel); + + selectedItems = []; + var elems = document.querySelectorAll('.itemSelectionPanel'); + for (var i = 0, length = elems.length; i < length; i++) { + elems[i].parentNode.removeChild(elems[i]); + } + } + } + + var selectedItems = []; + function updateItemSelection(chkItemSelect, selected) { + + var id = parentWithClass(chkItemSelect, 'card').getAttribute('data-itemid'); + + if (selected) { + + var current = selectedItems.filter(function (i) { + return i == id; + }); + + if (!current.length) { + selectedItems.push(id); } - $('.chkItemSelect:checked', page).checked(false).checkboxradio('refresh'); + } else { + selectedItems = selectedItems.filter(function (i) { + return i != id; + }); } - Dashboard.hideLoadingMsg(); - } - - function hideSelections(page) { - - var selectionCommands = page.querySelector('.selectionCommands'); - if (selectionCommands) { - selectionCommands.style.display = 'none'; - } - - var elems = page.getElementsByClassName('itemSelectionPanel'); - for (var i = 0, length = elems.length; i < length; i++) { - elems[i].style.display = 'none'; + if (selectedItems.length) { + var itemSelectionCount = document.querySelector('.itemSelectionCount'); + if (itemSelectionCount) { + itemSelectionCount.innerHTML = selectedItems.length; + } + } else { + hideSelections(); } } - function getSelectedItems(page) { + function showMenuForSelectedItems(e) { + + Dashboard.getCurrentUser().done(function (user) { - var selection = $('.chkItemSelect:checked', page); + var items = []; - return selection.parents('.card') - .map(function () { + items.push({ + name: Globalize.translate('ButtonAddToCollection'), + id: 'addtocollection', + ironIcon: 'add' + }); - return this.getAttribute('data-itemid'); + items.push({ + name: Globalize.translate('ButtonAddToPlaylist'), + id: 'playlist', + ironIcon: 'playlist-add' + }); - }).get(); + require(['actionsheet'], function () { + + ActionSheetElement.show({ + items: items, + positionTo: e.target, + callback: function (id) { + + switch (id) { + + case 'addtocollection': + BoxSetEditor.showPanel(selectedItems); + break; + case 'playlist': + PlaylistManager.showPanel(selectedItems); + break; + default: + break; + } + } + }); + + }); + }); + } + + function getSelectedItems() { + + return selectedItems; } function onSyncJobListSubmit() { - hideSelections($($.mobile.activePage)[0]); + hideSelections(); } function sync(page) { - var selection = getSelectedItems(page); + var selection = getSelectedItems(); if (selection.length < 1) { @@ -1094,7 +1231,7 @@ function combineVersions(page) { - var selection = getSelectedItems(page); + var selection = getSelectedItems(); if (selection.length < 2) { @@ -1131,7 +1268,7 @@ Dashboard.hideLoadingMsg(); - hideSelections(page); + hideSelections(); $('.itemsContainer', page).trigger('needsrefresh'); }); @@ -1141,7 +1278,7 @@ function addToCollection(page) { - var selection = getSelectedItems(page); + var selection = getSelectedItems(); if (selection.length < 1) { @@ -1158,7 +1295,7 @@ function addToPlaylist(page) { - var selection = getSelectedItems(page); + var selection = getSelectedItems(); if (selection.length < 1) { @@ -1239,55 +1376,7 @@ var page = this; - var btnAddToPlaylist = page.querySelector('.btnAddToPlaylist'); - if (btnAddToPlaylist) { - Events.on(btnAddToPlaylist, 'click', function () { - addToPlaylist(page); - }); - } - - var btnMergeVersions = page.querySelector('.btnMergeVersions'); - if (btnMergeVersions) { - Events.on(btnMergeVersions, 'click', function () { - combineVersions(page); - }); - } - - var btnSyncItems = page.querySelector('.btnSyncItems'); - if (btnSyncItems) { - Events.on(btnSyncItems, 'click', function () { - sync(page); - }); - } - - var btnAddToCollection = page.querySelector('.btnAddToCollection'); - if (btnAddToCollection) { - Events.on(btnAddToCollection, 'click', function () { - addToCollection(page); - }); - } - - $(page.getElementsByClassName('viewTabButton')).on('click', function () { - - var parent = $(this).parents('.viewPanel'); - $('.viewTabButton', parent).removeClass('ui-btn-active'); - this.classList.add('ui-btn-active'); - - $('.viewTab', parent).hide(); - $('.' + this.getAttribute('data-tab'), parent).show(); - }); - - $('select.selectPageSize', $('.viewPanel', page)).html(LibraryBrowser.getDefaultPageSizeSelections().map(function (i) { - - return ''; - - }).join('')); - - $(page).on('click', '.btnToggleSelections', function () { - - toggleSelections(page); - - }).on('click', '.itemWithAction', onItemWithActionClick); + $(page).on('click', '.itemWithAction', onItemWithActionClick); var itemsContainers = page.getElementsByClassName('itemsContainer'); for (var i = 0, length = itemsContainers.length; i < length; i++) { @@ -1300,8 +1389,7 @@ var page = this; - hideSelections(page); - $(page.querySelectorAll('.viewTabButton:first-child')).trigger('click'); + hideSelections(); }); function renderUserDataChanges(card, userData) { diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js index 46913dff0..3de460e2c 100644 --- a/dashboard-ui/scripts/movies.js +++ b/dashboard-ui/scripts/movies.js @@ -238,14 +238,6 @@ Dashboard.hideLoadingMsg(); }); - - Dashboard.getCurrentUser().done(function (user) { - if (user.Policy.IsAdministrator) { - $('.btnMergeVersions', page).show(); - } else { - $('.btnMergeVersions', page).hide(); - } - }); } function updateFilterControls(tabContent, viewPanel) {