mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework new library dialog
This commit is contained in:
Luke Pulverenti
parent
51638b966c
commit
f2f50dd590
7 changed files with 177 additions and 131 deletions
114
dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
Normal file
114
dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
define([], function () {
|
||||||
|
|
||||||
|
var currentDeferred;
|
||||||
|
var hasChanges;
|
||||||
|
var currentOptions;
|
||||||
|
|
||||||
|
function onSubmit() {
|
||||||
|
|
||||||
|
var form = this;
|
||||||
|
var dlg = $(form).parents('paper-dialog')[0];
|
||||||
|
|
||||||
|
ApiClient.addVirtualFolder($('#txtValue', form).val(), $('#selectCollectionType', form).val(), currentOptions.refresh).done(function () {
|
||||||
|
|
||||||
|
hasChanges = true;
|
||||||
|
PaperDialogHelper.close(dlg);
|
||||||
|
|
||||||
|
}).fail(function () {
|
||||||
|
|
||||||
|
Dashboard.showError(Globalize.translate('DefaultErrorMessage'));
|
||||||
|
});
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCollectionTypeOptionsHtml(collectionTypeOptions) {
|
||||||
|
|
||||||
|
return collectionTypeOptions.filter(function (i) {
|
||||||
|
|
||||||
|
return i.isSelectable !== false;
|
||||||
|
|
||||||
|
}).map(function (i) {
|
||||||
|
|
||||||
|
return '<option value="' + i.value + '">' + i.name + '</option>';
|
||||||
|
|
||||||
|
}).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function initEditor(page, collectionTypeOptions) {
|
||||||
|
|
||||||
|
$('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('');
|
||||||
|
|
||||||
|
$('form', page).off('submit', onSubmit).on('submit', onSubmit);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDialogClosed() {
|
||||||
|
|
||||||
|
$(this).remove();
|
||||||
|
Dashboard.hideLoadingMsg();
|
||||||
|
currentDeferred.resolveWith(null, [hasChanges]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function editor() {
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
self.show = function (options) {
|
||||||
|
|
||||||
|
var deferred = DeferredBuilder.Deferred();
|
||||||
|
|
||||||
|
currentOptions = options;
|
||||||
|
currentDeferred = deferred;
|
||||||
|
hasChanges = false;
|
||||||
|
|
||||||
|
require(['components/paperdialoghelper'], function () {
|
||||||
|
|
||||||
|
HttpClient.send({
|
||||||
|
|
||||||
|
type: 'GET',
|
||||||
|
url: 'components/medialibraryeditor/medialibraryeditor.template.html'
|
||||||
|
|
||||||
|
}).done(function (template) {
|
||||||
|
|
||||||
|
var dlg = PaperDialogHelper.createDialog({
|
||||||
|
size: 'small',
|
||||||
|
theme: 'a'
|
||||||
|
});
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
html += '<h2 class="dialogHeader">';
|
||||||
|
html += '<paper-fab icon="arrow-back" class="mini btnCloseDialog"></paper-fab>';
|
||||||
|
|
||||||
|
var title = Globalize.translate('ButtonAddMediaLibrary');
|
||||||
|
|
||||||
|
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + title + '</div>';
|
||||||
|
html += '</h2>';
|
||||||
|
|
||||||
|
html += '<div class="editorContent" style="max-width:800px;margin:auto;">';
|
||||||
|
html += Globalize.translateDocument(template);
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
dlg.innerHTML = html;
|
||||||
|
document.body.appendChild(dlg);
|
||||||
|
|
||||||
|
var editorContent = dlg.querySelector('.editorContent');
|
||||||
|
initEditor(editorContent, options.collectionTypeOptions);
|
||||||
|
|
||||||
|
$(dlg).on('iron-overlay-closed', onDialogClosed);
|
||||||
|
|
||||||
|
PaperDialogHelper.openWithHash(dlg, 'medialibraryeditor');
|
||||||
|
|
||||||
|
$('.btnCloseDialog', dlg).on('click', function () {
|
||||||
|
|
||||||
|
PaperDialogHelper.close(dlg);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
return deferred.promise();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return editor;
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<form style="max-width:100%;">
|
||||||
|
<br />
|
||||||
|
<div id="fldCollectionType">
|
||||||
|
<label for="selectCollectionType">${LabelContentType}</label>
|
||||||
|
<select id="selectCollectionType" data-mini="true" required="required"></select>
|
||||||
|
<div class="collectionTypeFieldDescription fieldDescription">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<paper-input type="text" id="txtValue" required="required" label="${LabelName}"></paper-input>
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<div>
|
||||||
|
<button type="submit" class="clearButton" data-role="none">
|
||||||
|
<paper-button raised class="submit block">
|
||||||
|
<iron-icon icon="check"></iron-icon>
|
||||||
|
<span>${ButtonOk}</span>
|
||||||
|
</paper-button>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
@ -308,6 +308,10 @@
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui-body-b .iconCardImage {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.iconCardImage {
|
.iconCardImage {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<title>${TitleMediaLibrary}</title>
|
<title>${TitleMediaLibrary}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="mediaLibraryPage" data-role="page" class="page type-interior mediaLibraryPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Library%20setup" data-require="jqmpopup,scripts/medialibrarypage,scripts/taskbutton">
|
<div id="mediaLibraryPage" data-role="page" class="page type-interior mediaLibraryPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Library%20setup" data-require="scripts/medialibrarypage,scripts/taskbutton">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
<div class="content-primary">
|
<div class="content-primary">
|
||||||
|
|
@ -26,37 +26,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div data-role="popup" id="popupEnterText" class="popup">
|
|
||||||
|
|
||||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
|
||||||
<h3></h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-role="content">
|
|
||||||
<form id="textEntryForm" style="width:280px;">
|
|
||||||
<div id="fldCollectionType" style="margin:.5em 0 1.5em;">
|
|
||||||
<label for="selectCollectionType">${LabelContentType}</label>
|
|
||||||
<select id="selectCollectionType" name="selectCollectionType" data-mini="true"></select>
|
|
||||||
<div class="collectionTypeFieldDescription fieldDescription">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
<label id="lblValue" for="txtValue"></label>
|
|
||||||
<input type="text" id="txtValue" required="required" />
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<p>
|
|
||||||
<button type="submit" data-theme="b" data-icon="check">
|
|
||||||
${ButtonOk}
|
|
||||||
</button>
|
|
||||||
<button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');">
|
|
||||||
${ButtonCancel}
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -74,63 +74,44 @@
|
||||||
reloadLibrary(page);
|
reloadLibrary(page);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTextValue(header, label, initialValue, showCollectionType, callback) {
|
|
||||||
|
|
||||||
var page = $.mobile.activePage;
|
|
||||||
|
|
||||||
var popup = $('#popupEnterText', page);
|
|
||||||
|
|
||||||
$('h3', popup).html(header);
|
|
||||||
$('#lblValue', popup).html(label);
|
|
||||||
$('#txtValue', popup).val(initialValue);
|
|
||||||
|
|
||||||
if (showCollectionType) {
|
|
||||||
$('#fldCollectionType', popup).show();
|
|
||||||
$('#selectCollectionType', popup).attr('required', 'required');
|
|
||||||
} else {
|
|
||||||
$('#fldCollectionType', popup).hide();
|
|
||||||
$('#selectCollectionType', popup).removeAttr('required');
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#selectCollectionType', popup).html(getCollectionTypeOptionsHtml()).val('');
|
|
||||||
|
|
||||||
popup.on("popupafterclose", function () {
|
|
||||||
$(this).off("popupafterclose").off("click");
|
|
||||||
$('#textEntryForm', this).off("submit");
|
|
||||||
}).popup("open");
|
|
||||||
|
|
||||||
$('#textEntryForm', popup).on('submit', function () {
|
|
||||||
|
|
||||||
if (callback) {
|
|
||||||
|
|
||||||
if (showCollectionType) {
|
|
||||||
|
|
||||||
var collectionType = $('#selectCollectionType', popup).val();
|
|
||||||
|
|
||||||
// The server expects an empty value for mixed
|
|
||||||
if (collectionType == 'mixed') {
|
|
||||||
collectionType = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
callback($('#txtValue', popup).val(), collectionType);
|
|
||||||
} else {
|
|
||||||
callback($('#txtValue', popup).val());
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function addVirtualFolder(page) {
|
function addVirtualFolder(page) {
|
||||||
|
|
||||||
getTextValue(Globalize.translate('HeaderAddMediaFolder'), Globalize.translate('LabelName'), "", true, function (name, type) {
|
//$('#textEntryForm', popup).on('submit', function () {
|
||||||
|
|
||||||
var refreshAfterChange = shouldRefreshLibraryAfterChanges();
|
// if (callback) {
|
||||||
|
|
||||||
ApiClient.addVirtualFolder(name, type, refreshAfterChange).done(processOperationResult);
|
// if (showCollectionType) {
|
||||||
|
|
||||||
|
// var collectionType = $('#selectCollectionType', popup).val();
|
||||||
|
|
||||||
|
// // The server expects an empty value for mixed
|
||||||
|
// if (collectionType == 'mixed') {
|
||||||
|
// collectionType = '';
|
||||||
|
// }
|
||||||
|
|
||||||
|
// callback($('#txtValue', popup).val(), collectionType);
|
||||||
|
// } else {
|
||||||
|
// callback($('#txtValue', popup).val());
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return false;
|
||||||
|
//});
|
||||||
|
|
||||||
|
require(['medialibraryeditor'], function (medialibraryeditor) {
|
||||||
|
|
||||||
|
new medialibraryeditor().show({
|
||||||
|
|
||||||
|
collectionTypeOptions: getCollectionTypeOptions(),
|
||||||
|
refresh: shouldRefreshLibraryAfterChanges()
|
||||||
|
|
||||||
|
}).done(function (hasChanges) {
|
||||||
|
|
||||||
|
if (hasChanges) {
|
||||||
|
reloadLibrary(page);
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -280,19 +261,6 @@
|
||||||
Dashboard.hideLoadingMsg();
|
Dashboard.hideLoadingMsg();
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCollectionTypeOptionsHtml() {
|
|
||||||
|
|
||||||
return getCollectionTypeOptions().filter(function (i) {
|
|
||||||
|
|
||||||
return i.isSelectable !== false;
|
|
||||||
|
|
||||||
}).map(function (i) {
|
|
||||||
|
|
||||||
return '<option value="' + i.value + '">' + i.name + '</option>';
|
|
||||||
|
|
||||||
}).join("");
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCollectionTypeOptions() {
|
function getCollectionTypeOptions() {
|
||||||
|
|
||||||
return [
|
return [
|
||||||
|
|
@ -347,7 +315,7 @@
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
html += '<div class="card backdropCard" style="max-width:300px;" data-index="' + index + '">';
|
html += '<div class="card backdropCard" data-index="' + index + '">';
|
||||||
|
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
|
||||||
|
|
@ -2062,6 +2062,7 @@ var AppInfo = {};
|
||||||
directorybrowser: 'components/directorybrowser/directorybrowser',
|
directorybrowser: 'components/directorybrowser/directorybrowser',
|
||||||
collectioneditor: 'components/collectioneditor/collectioneditor',
|
collectioneditor: 'components/collectioneditor/collectioneditor',
|
||||||
playlisteditor: 'components/playlisteditor/playlisteditor',
|
playlisteditor: 'components/playlisteditor/playlisteditor',
|
||||||
|
medialibraryeditor: 'components/medialibraryeditor/medialibraryeditor',
|
||||||
howler: 'bower_components/howler.js/howler.min',
|
howler: 'bower_components/howler.js/howler.min',
|
||||||
dragula: 'bower_components/dragula.js/dist/dragula.min'
|
dragula: 'bower_components/dragula.js/dist/dragula.min'
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<title>Emby</title>
|
<title>Emby</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="wizardLibraryPage" data-role="page" class="page standalonePage wizardPage mediaLibraryPage" data-require="jqmcollapsible,jqmlistview,jqmpopup,scripts/medialibrarypage,scripts/taskbutton,paperbuttonstyle">
|
<div id="wizardLibraryPage" data-role="page" class="page standalonePage wizardPage mediaLibraryPage" data-require="scripts/medialibrarypage,scripts/taskbutton">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
|
|
||||||
|
|
@ -19,38 +19,7 @@
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<div id="divVirtualFolders"></div>
|
<div id="divVirtualFolders"></div>
|
||||||
|
<br />
|
||||||
<div data-role="popup" id="popupEnterText" class="popup">
|
|
||||||
|
|
||||||
<div class="ui-corner-top ui-bar-a" style="text-align: center; padding: 0 20px;">
|
|
||||||
<h3></h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-role="content">
|
|
||||||
<form id="textEntryForm" style="width:280px;">
|
|
||||||
<div id="fldCollectionType" style="margin:.5em 0 1.5em;">
|
|
||||||
<label for="selectCollectionType">${LabelContentType}</label>
|
|
||||||
<select id="selectCollectionType" name="selectCollectionType" data-mini="true"></select>
|
|
||||||
<div class="collectionTypeFieldDescription fieldDescription">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
<label id="lblValue" for="txtValue"></label>
|
|
||||||
<input type="text" id="txtValue" required="required" />
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<p>
|
|
||||||
<button type="submit" data-theme="b" data-icon="check">
|
|
||||||
${ButtonOk}
|
|
||||||
</button>
|
|
||||||
<button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');">
|
|
||||||
${ButtonCancel}
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<br />
|
<br />
|
||||||
<div class="wizardNavigation">
|
<div class="wizardNavigation">
|
||||||
<button type="button" data-role="none" class="clearButton" style="width:auto;" onclick="history.back();"><paper-button raised class="subdued"><iron-icon icon="arrow-back"></iron-icon><span>${LabelPrevious}</span></paper-button></button>
|
<button type="button" data-role="none" class="clearButton" style="width:auto;" onclick="history.back();"><paper-button raised class="subdued"><iron-icon icon="arrow-back"></iron-icon><span>${LabelPrevious}</span></paper-button></button>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue