github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-31 12:00:08 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add scrolling recently watched and added to user and library pages

Browse source
This commit is contained in:
JonnyWong16 2016-02-27 00:00:11 -08:00
parent fed7d4cc34
commit b5e9ff3b4e
5 changed files with 200 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

3
data/interfaces/default/css/plexpy.css
View file

@ -2772,7 +2772,8 @@ a.no-highlight:hover {
.nav-header > li > a:hover {
background-color: transparent;
}
#recently-added-row-scroller {
#recently-added-row-scroller,
#recently-watched-row-scroller {
width: 8750px;
position: relative;
}

86
data/interfaces/default/library.html
View file

@ -118,6 +118,14 @@ DOCUMENTATION :: END
<div class="row">
<div class="col-md-12">
<div class="table-card-header">
<ul class="nav nav-header nav-dashboard pull-right">
<li>
<a href="#" id="recently-watched-page-left" class="paginate-watched btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
</li>
<li>
<a href="#" id="recently-watched-page-right" class="paginate-watched btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
</li>
</ul>
<div class="header-bar">
<span><i class="fa fa-history"></i> Recently Watched</span>
</div>
@ -135,6 +143,14 @@ DOCUMENTATION :: END
<div class="row">
<div class="col-md-12">
<div class="table-card-header">
<ul class="nav nav-header nav-dashboard pull-right">
<li>
<a href="#" id="recently-added-page-left" class="paginate-added btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
</li>
<li>
<a href="#" id="recently-added-page-right" class="paginate-added btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
</li>
</ul>
<div class="header-bar">
<span><i class="fa fa-history"></i> Recently Added</span>
</div>
@ -460,22 +476,13 @@ DOCUMENTATION :: END
});
function recentlyWatched() {
var widthVal = $("#library-recently-watched").width();
var tmp = (widthVal-25) / 175;
if (tmp > 0) {
var containerSize = parseInt(tmp);
} else {
var containerSize = 1;
}
// Populate recently watched
$.ajax({
url: 'get_library_recently_watched',
async: true,
data: {
section_id: section_id,
limit: containerSize
limit: 50
},
complete: function(xhr, status) {
$("#library-recently-watched").html(xhr.responseText);
@ -484,22 +491,13 @@ DOCUMENTATION :: END
}
function recentlyAdded() {
var widthVal = $("#library-recently-added").width();
var tmp = (widthVal-25) / 175;
if (tmp > 0) {
var containerSize = parseInt(tmp);
} else {
var containerSize = 1;
}
// Populate recently added
$.ajax({
url: 'get_library_recently_added',
async: true,
data: {
section_id: section_id,
limit: containerSize
limit: 50
},
complete: function(xhr, status) {
$("#library-recently-added").html(xhr.responseText);
@ -515,6 +513,54 @@ DOCUMENTATION :: END
});
$('div.art-face').animate({ opacity: 0.2 }, { duration: 1000 });
var leftTotalWatched = 0;
$(".paginate-watched").click(function (e) {
e.preventDefault();
var scroller = $("#recently-watched-row-scroller");
var containerWidth = $("#library-recently-watched").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175;
var leftMax = -(parseInt(scroller.width()) + scrollAmount);
leftTotalWatched = Math.max(Math.min(leftTotalWatched + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotalWatched }, 250);
if (leftTotalWatched == 0) {
$("#recently-watched-page-left").addClass("disabled").blur();
} else {
$("#recently-watched-page-left").removeClass("disabled");
}
if (leftTotalWatched == leftMax) {
$("#recently-watched-page-right").addClass("disabled").blur();
} else {
$("#recently-watched-page-right").removeClass("disabled");
}
});
var leftTotalAdded = 0;
$(".paginate-added").click(function (e) {
e.preventDefault();
var scroller = $("#recently-added-row-scroller");
var containerWidth = $("#library-recently-added").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175;
var leftMax = -(parseInt(scroller.width()) + scrollAmount);
leftTotalAdded = Math.max(Math.min(leftTotalAdded + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotalAdded }, 250);
if (leftTotalAdded == 0) {
$("#recently-added-page-left").addClass("disabled").blur();
} else {
$("#recently-added-page-left").removeClass("disabled");
}
if (leftTotalAdded == leftMax) {
$("#recently-added-page-right").addClass("disabled").blur();
} else {
$("#recently-added-page-right").removeClass("disabled");
}
});
});
</script>
% endif

2
data/interfaces/default/library_recently_added.html
View file

@ -32,6 +32,7 @@ DOCUMENTATION :: END
% if data:
<div class="dashboard-recent-media-row">
<div id="recently-added-row-scroller" style="left: 0;">
<ul class="dashboard-recent-media list-unstyled">
% for item in data:
<li>
@ -89,6 +90,7 @@ DOCUMENTATION :: END
</li>
% endfor
</ul>
</div>
</div>
% else:
<div class="text-muted">No stats to show.

44
data/interfaces/default/user.html
View file

@ -112,6 +112,14 @@ from plexpy import helpers
<div class="row">
<div class="col-md-12">
<div class="table-card-header">
<ul class="nav nav-header nav-dashboard pull-right">
<li>
<a href="#" id="recently-watched-page-left" class="paginate btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
</li>
<li>
<a href="#" id="recently-watched-page-right" class="paginate btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
</li>
</ul>
<div class="header-bar">
<span><i class="fa fa-history"></i> Recently Watched</span>
</div>
@ -471,22 +479,13 @@ from plexpy import helpers
});
function recentlyWatched() {
var widthVal = $("#user-recently-watched").width();
var tmp = (widthVal-25) / 175;
if (tmp > 0) {
var containerSize = parseInt(tmp);
} else {
var containerSize = 1;
}
// Populate recently watched
$.ajax({
url: 'get_user_recently_watched',
async: true,
data: {
user_id: user_id,
limit: containerSize
limit: 50
},
complete: function(xhr, status) {
$("#user-recently-watched").html(xhr.responseText);
@ -495,8 +494,29 @@ from plexpy import helpers
}
recentlyWatched();
$(window).resize(function() {
recentlyWatched();
var leftTotal = 0;
$(".paginate").click(function (e) {
e.preventDefault();
var scroller = $("#recently-watched-row-scroller");
var containerWidth = $("#user-recently-watched").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175;
var leftMax = -(parseInt(scroller.width()) + scrollAmount);
leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotal }, 250);
if (leftTotal == 0) {
$("#recently-watched-page-left").addClass("disabled").blur();
} else {
$("#recently-watched-page-left").removeClass("disabled");
}
if (leftTotal == leftMax) {
$("#recently-watched-page-right").addClass("disabled").blur();
} else {
$("#recently-watched-page-right").removeClass("disabled");
}
});
});
</script>

2
data/interfaces/default/user_recently_watched.html
View file

@ -28,6 +28,7 @@ DOCUMENTATION :: END
% if data:
<div class="dashboard-recent-media-row">
<div id="recently-watched-row-scroller" style="left: 0;">
<ul class="dashboard-recent-media list-unstyled">
% for item in data:
<li>
@ -78,6 +79,7 @@ DOCUMENTATION :: END
</li>
% endfor
</ul>
</div>
</div>
% else:
<div class="text-muted">No stats to show.</div><br>