mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
create collections from movies page
This commit is contained in:
Luke Pulverenti
parent
d3a7d45969
commit
e0996c055a
5 changed files with 270 additions and 71 deletions
|
|
@ -62,30 +62,27 @@
|
|||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
.libraryMenuButton {
|
||||
/*padding-left: 10px;
|
||||
opacity: .85;*/
|
||||
}
|
||||
|
||||
.headerHomeButton {
|
||||
padding-right: 0!important;
|
||||
}
|
||||
|
||||
.libraryMenuButton img, .headerHomeButton img {
|
||||
.libraryMenuButton img {
|
||||
border: 1px solid #444 !important;
|
||||
padding: .5em;
|
||||
background-color: #181818;
|
||||
border-radius: 5px;
|
||||
height: 14px!important;
|
||||
}
|
||||
}
|
||||
|
||||
.libraryMenuButton:hover {
|
||||
.libraryMenuButton:hover {
|
||||
opacity: 1!important;
|
||||
}
|
||||
}
|
||||
|
||||
.libraryMenuButton img:hover, .headerHomeButton img:hover {
|
||||
.libraryMenuButton img:hover {
|
||||
background-color: #38c;
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
.libraryMenuButton {
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
||||
.libraryMenuButtonText {
|
||||
color: #fff !important;
|
||||
|
|
@ -321,14 +318,6 @@
|
|||
color: #ddd;
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
|
||||
.headerSettingsButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
|
||||
.libraryMenuButtonText {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>${TitleMediaBrowser}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="moviesPage" data-role="page" class="page libraryPage" data-theme="b">
|
||||
<div id="moviesPage" data-role="page" class="page libraryPage collectionEditorPage" data-theme="b">
|
||||
|
||||
<div class="libraryViewNav scopedLibraryViewNav">
|
||||
<a href="movieslatest.html">${TabLatest}</a>
|
||||
|
|
@ -38,13 +38,45 @@
|
|||
</div>
|
||||
|
||||
<div class="selectionCommands" style="display: none;">
|
||||
<div data-role="controlgroup" data-type="horizontal" class="selectionCommandsControlGroup">
|
||||
<div class="selectionCommandsControlGroup">
|
||||
<button class="btnMergeVersions" data-mini="true" data-icon="recycle" data-inline="true" title="${ButtonGroupVersions}">${ButtonGroupVersions}</button>
|
||||
<button class="btnAddToCollection" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToCollection}">${ButtonAddToCollection}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="items" class="itemsContainer"></div>
|
||||
</div>
|
||||
<div data-role="panel" class="newCollectionPanel" data-position="right" data-display="overlay" data-position-fixed="true">
|
||||
<form class="newCollectionForm">
|
||||
|
||||
<h3>${HeaderAddToCollection}</h3>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<label for="selectCollectionToAddTo">${LabelSelectCollection}</label>
|
||||
<select id="selectCollectionToAddTo" data-mini="true"></select>
|
||||
</div>
|
||||
<br />
|
||||
<div class="newCollectionInfo">
|
||||
<div>
|
||||
<label for="txtNewCollectionName">${LabelName}</label>
|
||||
<input type="text" id="txtNewCollectionName" required="required" />
|
||||
<div class="fieldDescription">${NewCollectionNameExample}</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<label for="chkEnableInternetMetadata">${OptionSearchForInternetMetadata}</label>
|
||||
<input type="checkbox" id="chkEnableInternetMetadata" data-mini="true" />
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<p>
|
||||
<input class="fldSelectedItemIds" type="hidden" />
|
||||
<button type="submit" data-icon="plus" data-mini="true">${ButtonSubmit}</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-position-fixed="true">
|
||||
|
||||
<form>
|
||||
|
|
@ -210,6 +242,9 @@
|
|||
|
||||
</form>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$('.newCollectionForm').off('submit', BoxSetEditor.onNewCollectionSubmit).on('submit', BoxSetEditor.onNewCollectionSubmit);
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -300,7 +300,7 @@
|
|||
if (selection.length < 2) {
|
||||
|
||||
Dashboard.alert({
|
||||
message: Globalize.translate('MessagePleaseSelectItemsToGroup'),
|
||||
message: Globalize.translate('MessagePleaseSelectTwoItems'),
|
||||
title: Globalize.translate('HeaderError')
|
||||
});
|
||||
|
||||
|
|
@ -324,6 +324,7 @@
|
|||
Dashboard.showLoadingMsg();
|
||||
|
||||
$.ajax({
|
||||
|
||||
type: "POST",
|
||||
url: ApiClient.getUrl("Videos/MergeVersions", { Ids: selection.join(',') })
|
||||
|
||||
|
|
@ -331,7 +332,7 @@
|
|||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
hideSelections();
|
||||
hideSelections(page);
|
||||
|
||||
$('.itemsContainer', page).trigger('needsrefresh');
|
||||
});
|
||||
|
|
@ -339,6 +340,23 @@
|
|||
});
|
||||
}
|
||||
|
||||
function addToCollection(page) {
|
||||
|
||||
var selection = getSelectedItems(page);
|
||||
|
||||
if (selection.length < 1) {
|
||||
|
||||
Dashboard.alert({
|
||||
message: Globalize.translate('MessagePleaseSelectOneItem'),
|
||||
title: Globalize.translate('HeaderError')
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
BoxSetEditor.showPanel(page, selection);
|
||||
}
|
||||
|
||||
$(document).on('pageinit', ".libraryPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
|
@ -351,6 +369,16 @@
|
|||
combineVersions(page);
|
||||
});
|
||||
|
||||
$('.btnAddToCollection', page).on('click', function () {
|
||||
addToCollection(page);
|
||||
});
|
||||
|
||||
}).on('pagebeforeshow', ".libraryPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
hideSelections(page);
|
||||
|
||||
});
|
||||
|
||||
})(jQuery, document, window);
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
$(document).trigger('headercreated');
|
||||
|
||||
$('.libraryMenuButton').on('click', showLibraryMenu);
|
||||
$('.libraryMenuButton').createHoverTouch().on('hovertouch', showLibraryMenu);
|
||||
}
|
||||
|
||||
function getItemHref(item) {
|
||||
|
|
@ -86,10 +86,15 @@
|
|||
|
||||
updateLibraryNavLinks($.mobile.activePage);
|
||||
|
||||
$(panel).panel('toggle');
|
||||
$(panel).panel('toggle').off('mouseleave.librarymenu').on('mouseleave.librarymenu', function () {
|
||||
|
||||
$(this).panel("close");
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function updateLibraryMenu(panel) {
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
ApiClient.getItems(userId, {
|
||||
|
|
@ -350,3 +355,53 @@
|
|||
});
|
||||
|
||||
})(window, document, jQuery);
|
||||
|
||||
$.fn.createHoverTouch = function () {
|
||||
|
||||
var preventHover = false;
|
||||
var timerId;
|
||||
|
||||
function startTimer(elem) {
|
||||
|
||||
stopTimer();
|
||||
|
||||
timerId = setTimeout(function () {
|
||||
|
||||
$(elem).trigger('hovertouch');
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function stopTimer(elem) {
|
||||
|
||||
if (timerId) {
|
||||
clearTimeout(timerId);
|
||||
timerId = null;
|
||||
}
|
||||
}
|
||||
|
||||
return $(this).on('mouseenter', function () {
|
||||
|
||||
if (preventHover === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
startTimer(this);
|
||||
|
||||
}).on('mouseleave', function () {
|
||||
|
||||
stopTimer(this);
|
||||
|
||||
}).on('touchstart', function () {
|
||||
|
||||
preventHover = true;
|
||||
|
||||
}).on('click', function () {
|
||||
|
||||
preventHover = true;
|
||||
|
||||
if (preventHover) {
|
||||
$(this).trigger('hovertouch');
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
|
@ -104,13 +104,6 @@
|
|||
$('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
|
||||
}
|
||||
|
||||
function showNewCollectionPanel(page) {
|
||||
|
||||
$('.newCollectionPanel', page).panel('toggle');
|
||||
|
||||
$('#txtNewCollectionName', page).val('').focus();
|
||||
}
|
||||
|
||||
$(document).on('pageinit', "#boxsetsPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
|
@ -200,20 +193,53 @@
|
|||
|
||||
updateFilterControls(this);
|
||||
|
||||
}).on('collectionedit', "#boxsetsPage", function () {
|
||||
|
||||
reloadItems(this);
|
||||
});
|
||||
|
||||
})(jQuery, document);
|
||||
|
||||
(function ($, document) {
|
||||
|
||||
function showNewCollectionPanel(page) {
|
||||
function showNewCollectionPanel(page, items) {
|
||||
|
||||
$('.newCollectionPanel', page).panel('toggle');
|
||||
$('.fldSelectedItemIds', page).val(items.join(','));
|
||||
|
||||
$('#txtNewCollectionName', page).val('').focus();
|
||||
var panel = $('.newCollectionPanel', page).panel('toggle');
|
||||
|
||||
populateCollections(panel);
|
||||
}
|
||||
|
||||
function populateCollections(panel) {
|
||||
|
||||
var select = $('#selectCollectionToAddTo', panel);
|
||||
|
||||
if (!select.length) {
|
||||
|
||||
$('#txtNewCollectionName', panel).val('').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
$('.newCollectionInfo', panel).hide();
|
||||
|
||||
var options = {
|
||||
|
||||
Recursive: true,
|
||||
IncludeItemTypes: "BoxSet"
|
||||
};
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<option value="">' + Globalize.translate('OptionNewCollection') + '</option>';
|
||||
|
||||
html += result.Items.map(function (i) {
|
||||
|
||||
return '<option value="' + i.Id + '">' + i.Name + '</option>';
|
||||
});
|
||||
|
||||
select.html(html).val('').selectmenu('refresh').trigger('change');
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('pageinit', ".collectionEditorPage", function () {
|
||||
|
|
@ -222,7 +248,18 @@
|
|||
|
||||
$('.btnNewCollection', page).on('click', function () {
|
||||
|
||||
showNewCollectionPanel(page);
|
||||
showNewCollectionPanel(page, []);
|
||||
});
|
||||
|
||||
$('#selectCollectionToAddTo', page).on('change', function () {
|
||||
|
||||
if (this.value) {
|
||||
$('.newCollectionInfo', page).hide();
|
||||
$('#txtNewCollectionName', page).removeAttr('required');
|
||||
} else {
|
||||
$('.newCollectionInfo', page).show();
|
||||
$('#txtNewCollectionName', page).attr('required', 'required');
|
||||
}
|
||||
});
|
||||
|
||||
}).on('pagebeforeshow', ".collectionEditorPage", function () {
|
||||
|
|
@ -240,23 +277,49 @@
|
|||
});
|
||||
});
|
||||
|
||||
window.BoxSetEditor = {
|
||||
|
||||
onNewCollectionSubmit: function () {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var page = $(this).parents('.page');
|
||||
function createCollection(page) {
|
||||
|
||||
var url = ApiClient.getUrl("Collections", {
|
||||
|
||||
Name: $('#txtNewCollectionName', page).val(),
|
||||
IsLocked: !$('#chkEnableInternetMetadata', page).checked(),
|
||||
Ids: $('.fldSelectedItemIds', page).val() || ''
|
||||
|
||||
ParentId: getParameterByName('parentId') || LibraryMenu.getTopParentId()
|
||||
//ParentId: getParameterByName('parentId') || LibraryMenu.getTopParentId()
|
||||
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
dataType: "json"
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
var id = result.Id;
|
||||
var destination = 'itemdetails.html?id=' + id;
|
||||
|
||||
var context = getParameterByName('context');
|
||||
|
||||
if (context) {
|
||||
destination += "&context=" + context;
|
||||
}
|
||||
|
||||
$('.newCollectionPanel', page).panel('toggle');
|
||||
Dashboard.navigate(destination);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function addToCollection(page, id) {
|
||||
|
||||
var url = ApiClient.getUrl("Collections/" + id + "/Items", {
|
||||
|
||||
Ids: $('.fldSelectedItemIds', page).val() || ''
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url
|
||||
|
|
@ -265,12 +328,41 @@
|
|||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
$('.newCollectionPanel', page).panel('toggle');
|
||||
var destination = 'itemdetails.html?id=' + id;
|
||||
|
||||
$(page).trigger('collectionedit');
|
||||
var context = getParameterByName('context');
|
||||
|
||||
if (context) {
|
||||
destination += "&context=" + context;
|
||||
}
|
||||
|
||||
$('.newCollectionPanel', page).panel('toggle');
|
||||
Dashboard.navigate(destination);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
window.BoxSetEditor = {
|
||||
|
||||
showPanel: function (page, items) {
|
||||
showNewCollectionPanel(page, items);
|
||||
},
|
||||
|
||||
onNewCollectionSubmit: function () {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var page = $(this).parents('.page');
|
||||
|
||||
var collectionId = $('#selectCollectionToAddTo', page).val();
|
||||
|
||||
if (collectionId) {
|
||||
addToCollection(page, collectionId);
|
||||
} else {
|
||||
createCollection(page);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue