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

update listviews

This commit is contained in:
Luke Pulverenti 2016-07-16 14:02:39 -04:00
parent 1032fa887e
commit f458196922
31 changed files with 168 additions and 100 deletions

View file

@ -15,12 +15,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.4.81",
"_release": "1.4.81",
"version": "1.4.84",
"_release": "1.4.84",
"_resolution": {
"type": "version",
"tag": "1.4.81",
"commit": "77ba771ece78a8beb9262d7ac296175df6c052b2"
"tag": "1.4.84",
"commit": "15bfe5a5a9ca97a96f3f30c76dd463266f66e290"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

View file

@ -0,0 +1,17 @@
define(['itemShortcuts', 'registerElement'], function (itemShortcuts) {
var ItemsContainerProtoType = Object.create(HTMLDivElement.prototype);
ItemsContainerProtoType.attachedCallback = function () {
itemShortcuts.on(this);
};
ItemsContainerProtoType.detachedCallback = function () {
itemShortcuts.off(this);
};
document.registerElement('emby-itemscontainer', {
prototype: ItemsContainerProtoType,
extends: 'div'
});
});

View file

@ -8,6 +8,7 @@
top: 0;
left: 0;
bottom: 0;
background-color: #52B54B;
}
.timerIndicator {

View file

@ -16,7 +16,7 @@ button.listItem {
display: block;
align-items: center;
text-align: left;
padding: .25em .5em .25em 1em !important;
padding: .25em .25em .25em .25em !important;
line-height: 170%;
border-bottom: 1px solid #2a2a2a;
}
@ -26,7 +26,7 @@ div.listItem {
}
.listItem.largeImage {
padding: 1em 0 1em 1em;
padding: .5em !important;
}
.listItem > *:not(.listItemBody) {
@ -38,6 +38,14 @@ div.listItem {
vertical-align: middle;
}
.listItem [is=paper-icon-button-light] {
margin: 0;
}
.listViewDragHandle {
margin-left: -.25em !important;
}
.listItemBody {
flex-grow: 1;
padding: 0 1em;
@ -89,8 +97,8 @@ div.listItem {
background-repeat: no-repeat;
background-size: contain;
flex-shrink: 0;
margin-left: -.75em;
background-position: center center;
position: relative;
}
.listItemIcon {
@ -103,7 +111,6 @@ div.listItem {
width: 45vh;
height: 30vh;
background-position: center center;
position: relative;
margin-right: 2%;
margin-left: 1%;
}

View file

@ -153,7 +153,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
}
}
var cssClass = "itemAction listItem";
var cssClass = "listItem";
if (clickEntireItem) {
cssClass += ' itemAction';
}
var downloadWidth = 80;
@ -162,7 +166,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
downloadWidth = 500;
}
html += '<' + outerTagName + ' class="' + cssClass + '" data-index="' + index + '" data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '">';
var playlistItemId = item.PlaylistItemId ? (' data-playlistitemid="' + item.PlaylistItemId + '"') : '';
html += '<' + outerTagName + ' class="' + cssClass + '" data-index="' + index + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '">';
if (!clickEntireItem && options.dragHandle) {
html += '<button is="paper-icon-button-light" class="listViewDragHandle autoSize"><i class="md-icon">&#xE25D;</i></button>';
}
var imgUrl = getImageUrl(item, downloadWidth);
@ -218,7 +228,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
lineCount++;
}
html += '<div class="listItemBody">';
cssClass = 'listItemBody';
if (!clickEntireItem) {
cssClass += ' itemAction';
}
html += '<div class="' + cssClass + '">';
for (var i = 0, textLinesLength = textlines.length; i < textLinesLength; i++) {

View file

@ -1,7 +1,11 @@
define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'globalize', 'loading'], function (playbackManager, inputManager, connectionManager, embyRouter, globalize, loading) {
function playAllFromHere(card, serverId) {
var cards = card.parentNode.querySelectorAll('.itemAction[data-id]');
var parent = card.parentNode;
var className = card.classList.length ? ('.' + card.classList[0]) : '';
var cards = parent.querySelectorAll(className + '[data-id]');
var ids = [];
var foundCard = false;
@ -13,6 +17,11 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
ids.push(cards[i].getAttribute('data-id'));
}
}
if (!ids.length) {
return;
}
playbackManager.play({
ids: ids,
serverId: serverId
@ -75,7 +84,14 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
}
function executeAction(card, action) {
var id = card.getAttribute('data-id');
if (!id) {
card = parentWithAttribute(card, 'data-id');
id = card.getAttribute('data-id');
}
var serverId = card.getAttribute('data-serverid');
var type = card.getAttribute('data-type');
var isfolder = card.getAttribute('data-isfolder') == 'true';
@ -197,7 +213,14 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
var card = parentWithClass(e.target, 'itemAction');
if (card) {
var action = card.getAttribute('data-action');
var actionElement = card;
var action = actionElement.getAttribute('data-action');
if (!action) {
actionElement = parentWithAttribute(actionElement, 'data-action');
action = actionElement.getAttribute('data-action');
}
if (action) {
executeAction(card, action);
@ -205,6 +228,19 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
}
}
function parentWithAttribute(elem, name) {
while (!elem.getAttribute(name)) {
elem = elem.parentNode;
if (!elem) {
return null;
}
}
return elem;
}
function parentWithClass(elem, className) {
while (!elem.classList || !elem.classList.contains(className)) {

View file

@ -413,7 +413,8 @@
html += listView.getListViewHtml({
items: MediaController.playlist(),
smallIcon: true
smallIcon: true,
action: 'none'
});
playlistNeedsRefresh = false;
@ -557,34 +558,15 @@
function onContextClick(e) {
var lnkPlayFromIndex = parentWithClass(e.target, 'lnkPlayFromIndex');
if (lnkPlayFromIndex != null) {
var index = parseInt(lnkPlayFromIndex.getAttribute('data-index'));
MediaController.currentPlaylistIndex(index);
loadPlaylist(context);
e.preventDefault();
e.stopPropagation();
return false;
}
var lnkRemoveFromPlaylist = parentWithClass(e.target, 'lnkRemoveFromPlaylist');
if (lnkRemoveFromPlaylist != null) {
var index = parseInt(lnkRemoveFromPlaylist.getAttribute('data-index'));
MediaController.removeFromPlaylist(index);
loadPlaylist(context);
e.preventDefault();
e.stopPropagation();
return false;
}
var mediaItem = parentWithClass(e.target, 'mediaItem');
var mediaItem = parentWithClass(e.target, 'itemAction');
if (mediaItem != null) {
var info = libraryBrowser.getListItemInfo(mediaItem);
MediaController.currentPlaylistIndex(info.index);
mediaItem = parentWithClass(e.target, 'listItem');
var indexValue = mediaItem.getAttribute('data-index');
if (indexValue) {
MediaController.currentPlaylistIndex(parseInt(indexValue));
}
e.preventDefault();
e.stopPropagation();

View file

@ -949,10 +949,17 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
margin-right: 5px;
}
/* Polyfill */
.itemProgressBar[role]:after {
/* Undo these to original */
.listItem .itemProgressBar {
width: auto;
margin: 0;
height: .56vh;
}
/* Polyfill */
.itemProgressBar[role]:after {
background-image: none; /* removes default background from polyfill */
}
}
/*
* Background of the progress bar background

View file

@ -106,6 +106,10 @@ h2 {
font-weight: 400;
}
h3 {
font-weight: 500;
}
a, a:active, a:hover {
text-decoration: none;
}

View file

@ -81,7 +81,7 @@
<span id="childrenTitle"></span>
</h1>
<div id="childrenContent">
<div class="childrenItemsContainer itemsContainer noautoinit" style="text-align:left;"></div>
<div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer noautoinit" style="text-align:left;"></div>
</div>
</div>
<div id="additionalPartsCollapsible" class="detailSection hide">
@ -155,7 +155,7 @@
<h1>
${HeaderThemeSongs}
</h1>
<div id="themeSongsContent"></div>
<div id="themeSongsContent" is="emby-itemscontainer"></div>
</div>
<div class="detailSection detailsSection">
<h1>

View file

@ -10,6 +10,6 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
<button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize hide"><i class="md-icon">add</i></button>
</div>
<div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
</div>
</div>

View file

@ -55,7 +55,7 @@
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="itemsContainer itemsContainerWithAlphaPicker">
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div>
@ -71,7 +71,7 @@
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="itemsContainer itemsContainerWithAlphaPicker">
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div>
@ -88,7 +88,7 @@
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;">
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;">
</div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div>

View file

@ -53,7 +53,7 @@
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="itemsContainer itemsContainerWithAlphaPicker">
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div>
@ -69,7 +69,7 @@
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="itemsContainer itemsContainerWithAlphaPicker">
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div>
@ -85,7 +85,7 @@
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="itemsContainer itemsContainerWithAlphaPicker">
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div>
@ -98,7 +98,7 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div>
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
<div is="emby-itemscontainer" id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div>

View file

@ -186,7 +186,7 @@
</div>
</div>
<div class="pageTabContent ehsContent" id="playlistTab" data-index="2">
<div class="playlist itemsContainer" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;">
<div class="playlist itemsContainer" is="emby-itemscontainer" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;">
</div>
</div>
</div>

View file

@ -1,4 +1,4 @@
<div id="playlistsPage" data-dom-cache="true" data-role="page" class="page libraryPage noSecondaryNavPage" data-require="scripts/playlists" data-title="${HeaderPlaylists}">
<div id="playlistsPage" data-dom-cache="true" data-role="page" class="page libraryPage noSecondaryNavPage" data-require="scripts/playlists,emby-itemscontainer" data-title="${HeaderPlaylists}">
<div data-role="content">
<div class="viewSettings">
@ -7,7 +7,7 @@
&nbsp;
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
<div class="noItemsMessage hide" style="text-align: center;">
<p>${MessageNoPlaylistsAvailable}</p>
</div>

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'listView'], function (events, libraryBrowser, imageLoader, listView) {
define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView) {
return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['listView'], function (listView) {
define(['listView', 'emby-itemscontainer'], function (listView) {
function renderItems(page, item) {
@ -82,7 +82,7 @@
html += '<a href="#" class="clearLink hide" style="margin-left:1em;vertical-align:middle;"><button is="emby-button" type="button" class="raised more mini noIcon">' + Globalize.translate('ButtonMore') + '</button></a>';
html += '</div>';
html += '<div class="itemsContainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += '</div>';
html += '</div>';

View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'alphaPicker', 'listView'], function (libraryBrowser, alphaPicker, listView) {
define(['libraryBrowser', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (libraryBrowser, alphaPicker, listView) {
return function (view, params) {

View file

@ -254,12 +254,15 @@
var displayContextItem = card;
if (!card.classList.contains('card') && !card.classList.contains('listItem')) {
card = parentWithAnyClass(card, ['listItem', 'card']);
card = parentWithClass(card, 'card');
if (!card) {
return;
}
var itemId = card.getAttribute('data-itemid');
var playlistItemId = card.getAttribute('data-playlistitemid');
var commands = card.getAttribute('data-commands').split(',');
var itemType = card.getAttribute('data-itemtype');
var mediaType = card.getAttribute('data-mediatype');

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) {

View file

@ -67,27 +67,22 @@
showRemoveFromPlaylist: true,
playFromHere: true,
action: 'playallfromhere',
smallIcon: true
smallIcon: true,
dragHandle: true
});
}
var elem = page.querySelector('#childrenContent .itemsContainer');
elem.innerHTML = html;
var listItems = [];
var elems = elem.querySelectorAll('.listItem');
for (var i = 0, length = elems.length; i < length; i++) {
listItems.push(elems[i]);
}
var listParent = elem;
var listParent = elem.querySelector('.paperList');
if (!AppInfo.isTouchPreferred) {
require(['sortable'], function (Sortable) {
var sortable = new Sortable(listParent, {
draggable: ".listItem",
handle: '.listViewDragHandle',
// dragging ended
onEnd: function (/**Event*/evt) {
@ -96,8 +91,6 @@
}
});
});
}
ImageLoader.lazyChildren(elem);
LibraryBrowser.createCardMenus(elem);
@ -117,14 +110,13 @@
function onDrop(evt, page, item) {
Dashboard.showLoadingMsg();
var el = evt.item;
var newIndex = evt.newIndex;
var itemId = el.getAttribute('data-playlistitemid');
Dashboard.showLoadingMsg();
ApiClient.ajax({
url: ApiClient.getUrl('Playlists/' + item.Id + '/Items/' + itemId + '/Move/' + newIndex),

View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'listView'], function (libraryBrowser, listView) {
define(['libraryBrowser', 'listView', 'emby-itemscontainer'], function (libraryBrowser, listView) {
return function (view, params) {

View file

@ -1803,6 +1803,7 @@ var AppInfo = {};
define("emby-collapse", [embyWebComponentsBowerPath + "/emby-collapse/emby-collapse"], returnFirstDependency);
define("emby-button", [embyWebComponentsBowerPath + "/emby-button/emby-button"], returnFirstDependency);
define("emby-itemscontainer", [embyWebComponentsBowerPath + "/emby-itemscontainer/emby-itemscontainer"], returnFirstDependency);
define("alphaPicker", [embyWebComponentsBowerPath + "/alphapicker/alphapicker"], returnFirstDependency);
define("paper-icon-button-light", [embyWebComponentsBowerPath + "/emby-button/paper-icon-button-light"]);
@ -2021,6 +2022,9 @@ var AppInfo = {};
return {
isPlayingVideo: function () {
return false;
},
play: function (options) {
MediaController.play(options);
}
};
});
@ -2273,7 +2277,7 @@ var AppInfo = {};
var baseUrl = 'bower_components/emby-webcomponents/strings/';
var languages = ['da', 'de', 'en-US', 'es-MX', 'kk', 'nb', 'nl', 'pt-BR', 'pt-PT', 'ru', 'sv'];
var languages = ['da', 'de', 'en-US', 'es-MX', 'kk', 'nb', 'nl', 'pt-BR', 'pt-PT', 'ru', 'sv', 'zh-TW'];
var translations = languages.map(function (i) {
return {
@ -2566,7 +2570,7 @@ var AppInfo = {};
defineRoute({
path: '/itemdetails.html',
dependencies: ['emby-button', 'tileitemcss', 'scripts/livetvcomponents', 'paper-icon-button-light', 'listViewStyle'],
dependencies: ['emby-button', 'tileitemcss', 'scripts/livetvcomponents', 'paper-icon-button-light', 'emby-itemscontainer'],
controller: 'scripts/itemdetailpage',
autoFocus: false,
transition: 'fade'
@ -2836,7 +2840,7 @@ var AppInfo = {};
defineRoute({
path: '/nowplaying.html',
dependencies: ['paper-icon-button-light', 'emby-slider', 'emby-button', 'emby-input'],
dependencies: ['paper-icon-button-light', 'emby-slider', 'emby-button', 'emby-input', 'emby-itemscontainer'],
controller: 'scripts/nowplayingpage',
autoFocus: false,
transition: 'fade'

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'listView'], function (events, libraryBrowser, imageLoader, listView) {
define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView) {
return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) {

View file

@ -5,7 +5,7 @@
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</div>

View file

@ -73,7 +73,7 @@
<div class="alphaPicker alphabetPicker vertical">
</div>
<div class="itemsContainer itemsContainerWithAlphaPicker">
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div>
@ -86,7 +86,7 @@
<button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div>
<div class="itemsContainer">
<div is="emby-itemscontainer" class="itemsContainer">
</div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div>