Add thumb popover to collections and playlists tables

This commit is contained in:
JonnyWong16 2020-10-02 22:03:33 -07:00
parent f84c4ca73c
commit f7fa773ec7
No known key found for this signature in database
GPG key ID: B1F1F9807184697A
2 changed files with 27 additions and 2 deletions

View file

@ -24,7 +24,8 @@ collections_table_options = {
"data": "titleSort",
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData !== '') {
$(td).html('<a href="' + page('info', rowData['ratingKey']) + '"><i class="fa fa-blank fa-fw"></i>' + rowData['title'] + '</a>');
var thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="' + page('pms_image_proxy', rowData['thumb'], rowData['ratingKey'], 300, 450, null, null, null, 'poster') + '" data-height="120" data-width="80">' + rowData['title'] + '</span>';
$(td).html('<a href="' + page('info', rowData['ratingKey']) + '"><i class="fa fa-blank fa-fw"></i>' + thumb_popover + '</a>');
}
},
"width": "50%",
@ -88,6 +89,18 @@ collections_table_options = {
// Jump to top of page
//$('html,body').scrollTop(0);
$('#ajaxMsg').fadeOut();
$('body').popover({
selector: '[data-toggle="popover"]',
html: true,
container: 'body',
trigger: 'hover',
placement: 'right',
template: '<div class="popover history-thumbnail-popover" role="tooltip"><div class="arrow" style="top: 50%;"></div><div class="popover-content"></div></div>',
content: function () {
return '<div class="history-thumbnail" style="background-image: url(' + $(this).data('img') + '); height: ' + $(this).data('height') + 'px; width: ' + $(this).data('width') + 'px;" />';
}
});
},
"preDrawCallback": function(settings) {
var msg = "<i class='fa fa-refresh fa-spin'></i>&nbsp; Fetching rows...";

View file

@ -34,7 +34,8 @@ playlists_table_options = {
} else if (rowData['librarySectionID']) {
breadcrumb = '&section_id=' + rowData['librarySectionID'];
}
$(td).html('<a href="' + page('info', rowData['ratingKey']) + breadcrumb +'">' + smart + cellData + '</a>');
var thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="' + page('pms_image_proxy', rowData['composite'], rowData['ratingKey'], 300, 300, null, null, null, 'cover') + '" data-height="80" data-width="80">' + smart + cellData + '</span>';
$(td).html('<a href="' + page('info', rowData['ratingKey']) + breadcrumb +'">' + thumb_popover + '</a>');
}
},
"width": "60%",
@ -77,6 +78,17 @@ playlists_table_options = {
selector: '[data-toggle="tooltip"]',
container: 'body'
});
$('body').popover({
selector: '[data-toggle="popover"]',
html: true,
container: 'body',
trigger: 'hover',
placement: 'right',
template: '<div class="popover history-thumbnail-popover" role="tooltip"><div class="arrow" style="top: 50%;"></div><div class="popover-content"></div></div>',
content: function () {
return '<div class="history-thumbnail" style="background-image: url(' + $(this).data('img') + '); height: ' + $(this).data('height') + 'px; width: ' + $(this).data('width') + 'px;" />';
}
});
},
"preDrawCallback": function(settings) {
var msg = "<i class='fa fa-refresh fa-spin'></i>&nbsp; Fetching rows...";