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

improve poster sizing

Browse source
This commit is contained in:
Luke Pulverenti 2014-08-01 22:34:45 -04:00
parent 48ea645cf9
commit cd1e583fa7
58 changed files with 931 additions and 549 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@
showOverlayTimeout = null;
}
$('.posterItemOverlayTarget:visible', this).each(function () {
$('.cardOverlayTarget:visible', this).each(function () {
var elem = this;
@ -21,28 +21,30 @@
});
$('.posterItemOverlayTarget:visible', this).stop().animate({ "height": "0" }, function () {
$('.cardOverlayTarget:visible', this).stop().animate({ "height": "0" }, function () {
$(this).hide();
});
}
function getOverlayHtml(item, currentUser, posterItem, commands) {
function getOverlayHtml(item, currentUser, card, commands) {
var html = '';
html += '<div class="posterItemOverlayInner">';
html += '<div class="cardOverlayInner">';
var isSmallItem = $(posterItem).hasClass('smallBackdropPosterItem') || $(posterItem).hasClass('miniBackdropPosterItem');
var isMiniItem = $(posterItem).hasClass('miniBackdropPosterItem');
var isPortrait = $(posterItem).hasClass('portraitPosterItem');
var isSquare = $(posterItem).hasClass('squarePosterItem');
var className = card.className.toLowerCase();
var isMiniItem = className.indexOf('mini') != -1;
var isSmallItem = isMiniItem || className.indexOf('small') != -1;
var isPortrait = className.indexOf('portrait') != -1;
var isSquare = className.indexOf('square') != -1;
var parentName = isSmallItem || isMiniItem || isPortrait ? null : item.SeriesName;
var name = LibraryBrowser.getPosterViewDisplayName(item, true);
html += '<div style="font-weight:bold;margin-bottom:1em;">';
html += '<div style="margin-bottom:1em;">';
var logoHeight = isSmallItem || isMiniItem ? 20 : 26;
var maxLogoWidth = isPortrait ? 100 : 200;
var imgUrl;
@ -210,7 +212,7 @@
return false;
}
function onPosterItemTapHold(e) {
function onCardTapHold(e) {
showContextMenu(this);
@ -218,26 +220,26 @@
return false;
}
function showContextMenu(posterItem) {
function showContextMenu(card) {
$('.tapHoldMenu').popup("close").remove();
var displayContextItem = posterItem;
var displayContextItem = card;
if ($(posterItem).hasClass('listviewMenuButton')) {
posterItem = $(posterItem).parents('.listItem')[0];
if ($(card).hasClass('listviewMenuButton')) {
card = $(card).parents('.listItem')[0];
}
var itemId = posterItem.getAttribute('data-itemid');
var commands = posterItem.getAttribute('data-commands').split(',');
var itemType = posterItem.getAttribute('data-itemtype');
var mediaType = posterItem.getAttribute('data-mediatype');
var playbackPositionTicks = parseInt(posterItem.getAttribute('data-positionticks') || '0');
var playAccess = posterItem.getAttribute('data-playaccess');
var locationType = posterItem.getAttribute('data-locationtype');
var isPlaceHolder = posterItem.getAttribute('data-placeholder') == 'true';
var itemId = card.getAttribute('data-itemid');
var commands = card.getAttribute('data-commands').split(',');
var itemType = card.getAttribute('data-itemtype');
var mediaType = card.getAttribute('data-mediatype');
var playbackPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0');
var playAccess = card.getAttribute('data-playaccess');
var locationType = card.getAttribute('data-locationtype');
var isPlaceHolder = card.getAttribute('data-placeholder') == 'true';
$(posterItem).addClass('hasContextMenu');
$(card).addClass('hasContextMenu');
Dashboard.getCurrentUser().done(function (user) {
@ -246,7 +248,7 @@
html += '<ul data-role="listview" style="min-width: 240px;">';
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
var href = posterItem.getAttribute('data-href') || posterItem.href;
var href = card.getAttribute('data-href') || card.href;
html += '<li><a href="' + href + '">' + Globalize.translate('ButtonOpen') + '</a></li>';
html += '<li><a href="' + href + '" target="_blank">' + Globalize.translate('ButtonOpenInNewTab') + '</a></li>';
@ -288,7 +290,7 @@
var elem = $('.tapHoldMenu').popup({ positionTo: displayContextItem }).trigger('create').popup("open").on("popupafterclose", function () {
$(this).off("popupafterclose").remove();
$(posterItem).removeClass('hasContextMenu');
$(card).removeClass('hasContextMenu');
});
$('.btnPlay', elem).on('click', onPlayButtonClick);
@ -308,15 +310,15 @@
return false;
}
function onGroupedPosterItemClick(e) {
function onGroupedCardClick(e) {
var target = $(e.target);
var posterItem = this;
var itemId = posterItem.getAttribute('data-itemid');
var context = posterItem.getAttribute('data-context');
var card = this;
var itemId = card.getAttribute('data-itemid');
var context = card.getAttribute('data-context');
$(posterItem).addClass('hasContextMenu');
$(card).addClass('hasContextMenu');
var userId = Dashboard.getCurrentUserId();
@ -324,14 +326,14 @@
var options = {
Limit: parseInt($('.playedIndicator', posterItem).html() || '10'),
Limit: parseInt($('.playedIndicator', card).html() || '10'),
Fields: "PrimaryImageAspectRatio,DateCreated",
ParentId: itemId,
IsFolder: false,
GroupItems: false
};
if ($(posterItem).hasClass('unplayedGroupings')) {
if ($(card).hasClass('unplayedGroupings')) {
options.IsPlayed = false;
}
@ -357,7 +359,7 @@
html += '<div>';
html += '<ul data-role="listview">';
var href = posterItem.href || LibraryBrowser.getHref(item, context);
var href = card.href || LibraryBrowser.getHref(item, context);
var header = Globalize.translate('HeaderLatestFromChannel').replace('{0}', '<a href="' + href + '">' + item.Name + '</a>');
html += '<li data-role="list-divider">' + header + '</li>';
@ -418,7 +420,7 @@
var elem = $('.groupingMenu').popup().trigger('create').popup("open").on("popupafterclose", function () {
$(this).off("popupafterclose").remove();
$(posterItem).removeClass('hasContextMenu');
$(card).removeClass('hasContextMenu');
});
});
@ -428,7 +430,7 @@
}
$.fn.createPosterItemMenus = function () {
$.fn.createCardMenus = function () {
var preventHover = false;
@ -442,7 +444,7 @@
return;
}
var innerElem = $('.posterItemOverlayTarget', elem);
var innerElem = $('.cardOverlayTarget', elem);
var id = elem.getAttribute('data-itemid');
var commands = elem.getAttribute('data-commands').split(',');
@ -491,18 +493,18 @@
preventHover = true;
}
var elems = '.backdropPosterItem,.smallBackdropPosterItem,.portraitPosterItem,.squarePosterItem,.miniBackdropPosterItem';
var elems = '.card:not(.bannerCard)';
$('.posterItem', this).on('contextmenu.posterItemMenu', onPosterItemTapHold);
$('.card', this).on('contextmenu.cardMenu', onCardTapHold);
$('.listviewMenuButton', this).on('click', onListViewMenuButtonClick);
$('.groupedPosterItem', this).on('click', onGroupedPosterItemClick);
$('.groupedCard', this).on('click', onGroupedCardClick);
return this.off('.posterItemHoverMenu')
.on('mouseenter.posterItemHoverMenu', elems, onHoverIn)
.on('mouseleave.posterItemHoverMenu', elems, onHoverOut)
.on("touchstart.posterItemHoverMenu", elems, preventTouchHover);
return this.off('.cardHoverMenu')
.on('mouseenter.cardHoverMenu', elems, onHoverIn)
.on('mouseleave.cardHoverMenu', elems, onHoverOut)
.on("touchstart.cardHoverMenu", elems, preventTouchHover);
};
function toggleSelections(page) {
@ -539,7 +541,7 @@
var selection = $('.chkItemSelect:checked', page);
return selection.parents('.posterItem')
return selection.parents('.card')
.map(function () {
return this.getAttribute('data-itemid');
@ -561,9 +563,9 @@
return;
}
var names = $('.chkItemSelect:checked', page).parents('.posterItem').get().reverse().map(function (e) {
var names = $('.chkItemSelect:checked', page).parents('.card').get().reverse().map(function (e) {
return $('.posterItemText', e).html();
return $('.cardText', e).html();
}).join('<br/>');
@ -657,32 +659,32 @@
$('.viewTabButton:first', page).trigger('click');
});
function renderUserDataChanges(posterItem, userData) {
function renderUserDataChanges(card, userData) {
if (userData.Played) {
if (!$('.playedIndicator', posterItem).length) {
if (!$('.playedIndicator', card).length) {
$('<div class="playedIndicator"></div>').insertAfter($('.posterItemOverlayTarget', posterItem));
$('<div class="playedIndicator"></div>').insertAfter($('.cardOverlayTarget', card));
}
$('.playedIndicator', posterItem).html('<div class="ui-icon-check ui-btn-icon-notext"></div>');
$('.posterItemProgress', posterItem).remove();
$('.playedIndicator', card).html('<div class="ui-icon-check ui-btn-icon-notext"></div>');
$('.cardProgress', card).remove();
}
else if (userData.UnplayedItemCount) {
if (!$('.playedIndicator', posterItem).length) {
if (!$('.playedIndicator', card).length) {
$('<div class="playedIndicator"></div>').insertAfter($('.posterItemOverlayTarget', posterItem));
$('<div class="playedIndicator"></div>').insertAfter($('.cardOverlayTarget', card));
}
$('.playedIndicator', posterItem).html(userData.UnplayedItemCount);
$('.playedIndicator', card).html(userData.UnplayedItemCount);
}
else {
$('.playedIndicator', posterItem).remove();
$('.playedIndicator', card).remove();
var progressHtml = LibraryBrowser.getItemProgressBarHtml(userData);
$('.posterItemProgress', posterItem).html(progressHtml);
$('.cardProgress', card).html(progressHtml);
}
}
@ -694,7 +696,7 @@
this.setAttribute('data-positionticks', (userData.PlaybackPositionTicks || 0));
if ($(this).hasClass('posterItem')) {
if ($(this).hasClass('card')) {
renderUserDataChanges(this, userData);
}
});