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;
|
||||
}
|
||||
|
||||
.ui-body-b .iconCardImage {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.iconCardImage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>${TitleMediaLibrary}</title>
|
||||
</head>
|
||||
<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 class="content-primary">
|
||||
|
|
@ -26,37 +26,6 @@
|
|||
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -74,63 +74,44 @@
|
|||
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) {
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
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() {
|
||||
|
||||
return [
|
||||
|
|
@ -347,7 +315,7 @@
|
|||
|
||||
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="cardScalable">';
|
||||
|
|
|
|||
|
|
@ -2062,6 +2062,7 @@ var AppInfo = {};
|
|||
directorybrowser: 'components/directorybrowser/directorybrowser',
|
||||
collectioneditor: 'components/collectioneditor/collectioneditor',
|
||||
playlisteditor: 'components/playlisteditor/playlisteditor',
|
||||
medialibraryeditor: 'components/medialibraryeditor/medialibraryeditor',
|
||||
howler: 'bower_components/howler.js/howler.min',
|
||||
dragula: 'bower_components/dragula.js/dist/dragula.min'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<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">
|
||||
|
||||
|
|
@ -19,38 +19,7 @@
|
|||
|
||||
<br />
|
||||
<div id="divVirtualFolders"></div>
|
||||
|
||||
<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">
|
||||
<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