add multi-select commands

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;
+    top: 0;
-    background-color: rgba(0, 0, 0, .85);
+    background-color: rgba(0, 0, 0, .3);
     z-index: 999;
-    text-align: center;
+    border: 2px solid #52B54B;
-    padding: 1em;
 }
 
-    .itemSelectionPanel .ui-checkbox {
+    .itemSelectionPanel #checkbox {
-        max-width: 130px;
+        border-radius: 0 !important;
-        margin-left: auto;
-        margin-right: auto;
     }
 
+.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 {

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

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) {
+        if (playButton) {
-            return;
+            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.off('click', onCardClick);
-        this.on('click', onGroupedCardClick);
+        this.on('click', onCardClick);
-
-        this.off('click', onListViewMenuButtonClick);
-        this.on('click', onListViewMenuButtonClick);
-
-        this.off('click', onListViewPlayButtonClick);
-        this.on('click', onListViewPlayButtonClick);
 
         if (AppInfo.isTouchPreferred) {
-            //this.off('contextmenu', disableEvent);
+            this.off('contextmenu', disableEvent);
-            //this.on('contextmenu', disableEvent);
+            this.on('contextmenu', disableEvent);
-            this.off('contextmenu', onContextMenu);
+            //this.off('contextmenu', onContextMenu);
-            this.on('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();
+    function showSelection(item) {
-            $('.itemSelectionPanel', page).hide();
 
-        } 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;
+            var html = '';
-                $('.cardContent', page).each(function () {
-                    var chkItemSelectId = 'chkItemSelect' + index;
 
-                    $(this).append('<div class="itemSelectionPanel" onclick="return false;"><div class="ui-checkbox"><label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off" for="' + chkItemSelectId + '">Select</label><input id="' + chkItemSelectId + '" type="checkbox" class="chkItemSelect" data-enhanced="true" /></div></div>');
+            html += '<paper-checkbox class="chkItemSelect"></paper-checkbox>';
-                    index++;
-                });
 
-                $('.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 += '<div style="float:left;">';
+            html += '<paper-icon-button class="btnCloseSelectionPanel" icon="close"></paper-icon-button>';
+            html += '<span class="itemSelectionCount"></span>';
+            html += '</div>';
+
+            html += '<paper-icon-button class="btnSelectionPanelOptions" icon="more-vert" style="float:right;"></paper-icon-button>';
+
+            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();
+        if (selectedItems.length) {
-    }
+            var itemSelectionCount = document.querySelector('.itemSelectionCount');
-
+            if (itemSelectionCount) {
-    function hideSelections(page) {
+                itemSelectionCount.innerHTML = selectedItems.length;
-
+            }
-        var selectionCommands = page.querySelector('.selectionCommands');
+        } else {
-        if (selectionCommands) {
+            hideSelections();
-            selectionCommands.style.display = 'none';
-        }
-
-        var elems = page.getElementsByClassName('itemSelectionPanel');
-        for (var i = 0, length = elems.length; i < length; i++) {
-            elems[i].style.display = 'none';
         }
     }
 
-    function getSelectedItems(page) {
+    function showMenuForSelectedItems(e) {
         
-        var selection = $('.chkItemSelect:checked', page);
+        Dashboard.getCurrentUser().done(function (user) {
 
-        return selection.parents('.card')
+            var items = [];
-            .map(function () {
 
-                return this.getAttribute('data-itemid');
+            items.push({
+                name: Globalize.translate('ButtonAddToCollection'),
+                id: 'addtocollection',
+                ironIcon: 'add'
+            });
 
-            }).get();
+            items.push({
+                name: Globalize.translate('ButtonAddToPlaylist'),
+                id: 'playlist',
+                ironIcon: 'playlist-add'
+            });
+
+            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');
+        $(page).on('click', '.itemWithAction', onItemWithActionClick);
-        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 '<option value="' + i + '">' + i + '</option>';
-
-        }).join(''));
-
-        $(page).on('click', '.btnToggleSelections', function () {
-
-            toggleSelections(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);
+        hideSelections();
-        $(page.querySelectorAll('.viewTabButton:first-child')).trigger('click');
     });
 
     function renderUserDataChanges(card, userData) {

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