mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update popup metadata editor

Browse source
This commit is contained in:
Luke Pulverenti 2016-01-23 13:45:50 -05:00
parent 030708ad4b
commit 6ea653d815
2 changed files with 151 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

116
dashboard-ui/components/metadataeditor/metadataeditor.js
View file

@ -1,4 +1,4 @@
define(['components/paperdialoghelper', 'paper-checkbox', 'paper-dialog', 'paper-input'], function (paperDialogHelper) { define(['components/paperdialoghelper', 'paper-checkbox', 'paper-dialog', 'paper-input', 'paper-item-body', 'paper-icon-item'], function (paperDialogHelper) {
var currentDialog; var currentDialog;
var metadataEditorInfo; var metadataEditorInfo;
@ -43,6 +43,45 @@
return false; return false;
} }
function parentWithClass(elem, className) {
while (!elem.classList || !elem.classList.contains(className)) {
elem = elem.parentNode;
if (!elem) {
return null;
}
}
return elem;
}
function editableListViewValues(list) {
return list.find('.textValue').map(function () { return $(this).text(); }).get();
}
function addElementToEditableListview(source, sortCallback) {
require(['prompt'], function (prompt) {
prompt({
text: 'Value:',
callback: function (text) {
if (text == '') return;
var parent = $(source).parents('.editableListviewContainer');
var list = parent.find('.paperList');
var items = editableListViewValues(list);
items.push(text);
populateListView(list[0], items, sortCallback);
}
});
});
}
function removeElementFromListview(source) {
$(source).parents('paper-icon-item').remove();
}
function init(context) { function init(context) {
$('.btnCancel', context).on('click', function () { $('.btnCancel', context).on('click', function () {
@ -50,6 +89,20 @@
closeDialog(false); closeDialog(false);
}); });
context.addEventListener('click', function (e) {
var btnRemoveFromEditorList = parentWithClass(e.target, 'btnRemoveFromEditorList');
if (btnRemoveFromEditorList) {
removeElementFromListview(btnRemoveFromEditorList);
}
var btnAddTextItem = parentWithClass(e.target, 'btnAddTextItem');
if (btnAddTextItem) {
addElementToEditableListview(btnAddTextItem);
}
});
$('form', context).off('submit', onSubmit).on('submit', onSubmit); $('form', context).off('submit', onSubmit).on('submit', onSubmit);
} }
@ -339,13 +392,13 @@
if (item.Type == "Person") { if (item.Type == "Person") {
context.querySelector('#txtProductionYear').label = Globalize.translate('LabelBirthYear'); context.querySelector('#txtProductionYear').label = Globalize.translate('LabelBirthYear');
context.querySelector("label[for='txtPremiereDate']").innerHTML = Globalize.translate('LabelBirthDate'); context.querySelector("#txtPremiereDate").innerHTML = Globalize.translate('LabelBirthDate');
context.querySelector("label[for='txtEndDate']").innerHTML = Globalize.translate('LabelDeathDate'); context.querySelector("#txtEndDate").innerHTML = Globalize.translate('LabelDeathDate');
$('#fldPlaceOfBirth', context).show(); $('#fldPlaceOfBirth', context).show();
} else { } else {
context.querySelector('#txtProductionYear').label = Globalize.translate('LabelYear'); context.querySelector('#txtProductionYear').label = Globalize.translate('LabelYear');
context.querySelector("label[for='txtPremiereDate']").innerHTML = Globalize.translate('LabelReleaseDate'); context.querySelector("#txtPremiereDate").innerHTML = Globalize.translate('LabelReleaseDate');
context.querySelector("label[for='txtEndDate']").innerHTML = Globalize.translate('LabelEndDate'); context.querySelector("#txtEndDate").innerHTML = Globalize.translate('LabelEndDate');
$('#fldPlaceOfBirth', context).hide(); $('#fldPlaceOfBirth', context).hide();
} }
@ -439,14 +492,14 @@
}); });
populateListView($('#listCountries', context), item.ProductionLocations || []); populateListView($('#listCountries', context)[0], item.ProductionLocations || []);
populateListView($('#listGenres', context), item.Genres); populateListView($('#listGenres', context)[0], item.Genres);
populatePeople(context, item.People || []); populatePeople(context, item.People || []);
populateListView($('#listStudios', context), (item.Studios || []).map(function (element) { return element.Name || ''; })); populateListView($('#listStudios', context)[0], (item.Studios || []).map(function (element) { return element.Name || ''; }));
populateListView($('#listTags', context), item.Tags); populateListView($('#listTags', context)[0], item.Tags);
populateListView($('#listKeywords', context), item.Keywords); populateListView($('#listKeywords', context)[0], item.Keywords);
var lockData = (item.LockData || false); var lockData = (item.LockData || false);
var chkLockData = context.querySelector("#chkLockData"); var chkLockData = context.querySelector("#chkLockData");
@ -613,17 +666,35 @@
} }
function populateListView(list, items, sortCallback) { function populateListView(list, items, sortCallback) {
//items = items || [];
//if (typeof (sortCallback) === 'undefined') { items = items || [];
// items.sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); }); if (typeof (sortCallback) === 'undefined') {
//} else { items.sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); });
// items = sortCallback(items); } else {
//} items = sortCallback(items);
//var html = ''; }
//for (var i = 0; i < items.length; i++) { var html = '';
// html += '<li data-mini="true"><a class="data">' + items[i] + '</a><a href="#" onclick="EditItemMetadataPage.removeElementFromListview(this)" class="btnRemoveFromEditorList"></a></li>'; for (var i = 0; i < items.length; i++) {
//} html += '<paper-icon-item>';
//list.html(html).listview('refresh');
html += '<paper-fab mini style="background-color:#444;" icon="live-tv" item-icon></paper-fab>';
html += '<paper-item-body>';
html += '<div class="textValue">';
html += items[i];
html += '</div>';
html += '</paper-item-body>';
html += '<paper-icon-button icon="delete" data-index="' + i + '" class="btnRemoveFromEditorList"></paper-icon-button>';
html += '</paper-icon-item>';
//html += '<li data-mini="true"><a class="data">' + items[i] + '</a><a href="#" onclick="EditItemMetadataPage.removeElementFromListview(this)" class="btnRemoveFromEditorList"></a></li>';
}
list.innerHTML = html;
} }
function populatePeople(context, people) { function populatePeople(context, people) {
@ -793,7 +864,8 @@
var template = this.response; var template = this.response;
var dlg = paperDialogHelper.createDialog({ var dlg = paperDialogHelper.createDialog({
removeOnClose: true removeOnClose: true,
size: 'small'
}); });
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');

123
dashboard-ui/components/metadataeditor/metadataeditor.template.html
View file

@ -76,9 +76,8 @@
<div id="fldShortOverview" style="display: none;"> <div id="fldShortOverview" style="display: none;">
<paper-input id="txtShortOverview" type="text" label="${LabelShortOverview}"></paper-input> <paper-input id="txtShortOverview" type="text" label="${LabelShortOverview}"></paper-input>
</div> </div>
<div id="fldPremiereDate" style="display: none;"> <div id="fldPremiereDate">
<label for="txtPremiereDate" class="likePaperLabel">${LabelReleaseDate}</label> <paper-input id="txtPremiereDate" label="${LabelReleaseDate}" type="date"></paper-input>
<input id="txtPremiereDate" type="date" class="likePaperText" data-role="none" />
</div> </div>
<div id="fldYear" style="display: none;"> <div id="fldYear" style="display: none;">
<paper-input id="txtProductionYear" type="number" label="${LabelYear}"></paper-input> <paper-input id="txtProductionYear" type="number" label="${LabelYear}"></paper-input>
@ -86,9 +85,8 @@
<div id="fldPlaceOfBirth" style="display: none;"> <div id="fldPlaceOfBirth" style="display: none;">
<paper-input id="txtPlaceOfBirth" type="text" label="${LabelPlaceOfBirth}"></paper-input> <paper-input id="txtPlaceOfBirth" type="text" label="${LabelPlaceOfBirth}"></paper-input>
</div> </div>
<div id="fldEndDate" style="display: none;"> <div id="fldEndDate">
<label for="txtEndDate" class="likePaperLabel">${LabelEndDate}</label> <paper-input id="txtEndDate" label="${LabelEndDate}" type="date"></paper-input>
<input id="txtEndDate" type="date" class="likePaperText" data-role="none" />
</div> </div>
<div id="fldAirDays" style="display: none;"> <div id="fldAirDays" style="display: none;">
<p>${LabelAirDays}</p> <p>${LabelAirDays}</p>
@ -210,74 +208,67 @@
</div> </div>
</div> </div>
<div data-role="collapsible" data-mini="true" id="countriesCollapsible" style="display: none; margin-top: 1em;"> <div id="countriesCollapsible" class="editableListviewContainer" style="display: none; margin-top: 3em;">
<h3>${HeaderCountries}</h3> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
<div data-role="editableListviewContainer"> ${HeaderCountries}
<div> </h1>
<div style="display: inline-block; width: 80%;"> <paper-button raised class="btnAddTextItem submit mini" style="margin-left:1em;" title="${ButtonAdd}">
<input type="text" class="txtEditableListview" /> <iron-icon icon="add"></iron-icon>
</div> <span>${ButtonAdd}</span>
<paper-icon-button icon="add" onclick="EditItemMetadataPage.addElementToEditableListview(this)"></paper-icon-button> </paper-button>
</div> <div class="paperList" id="listCountries"></div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listCountries"></ul>
</div>
</div> </div>
<div data-role="collapsible" data-mini="true" id="genresCollapsible" style="display: none; margin-top: 1em;"> <div id="genresCollapsible" class="editableListviewContainer" style="display: none; margin-top: 3em;">
<h3>${HeaderGenres}</h3> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
<div data-role="editableListviewContainer"> ${HeaderGenres}
<div> </h1>
<div style="display: inline-block; width: 80%;"> <paper-button raised class="btnAddTextItem submit mini" style="margin-left:1em;" title="${ButtonAdd}">
<input type="text" class="txtEditableListview" /> <iron-icon icon="add"></iron-icon>
</div> <span>${ButtonAdd}</span>
<paper-icon-button icon="add" onclick="EditItemMetadataPage.addElementToEditableListview(this)"></paper-icon-button> </paper-button>
</div> <div class="paperList" id="listGenres"></div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listGenres"></ul>
</div>
</div> </div>
<div data-mini="true" data-role="collapsible" id="peopleCollapsible" style="display: none; margin-top: 1em;"> <div data-mini="true" data-role="collapsible" id="peopleCollapsible" style="display: none; margin-top: 3em;">
<h3>${HeaderPeople}</h3> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
${HeaderPeople}
</h1>
<paper-button raised id="btnAddPerson" class="btnAddPerson submit mini" style="margin-left:1em;" title="${ButtonAdd}">
<iron-icon icon="add"></iron-icon>
<span>${ButtonAdd}</span>
</paper-button>
<div> <div>
<br />
<button type="button" id="btnAddPerson" data-icon="plus" data-mini="true" data-theme="a">${ButtonAdd}</button>
<br />
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="peopleList"></ul> <ul data-role="listview" data-inset="true" data-split-icon="delete" id="peopleList"></ul>
</div> </div>
</div> </div>
<div data-mini="true" data-role="collapsible" id="keywordsCollapsible" style="display: none; margin-top: 1em;"> <div id="keywordsCollapsible" class="editableListviewContainer" style="display: none; margin-top: 3em;">
<h3>${HeaderPlotKeywords}</h3> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
<div data-role="editableListviewContainer"> ${HeaderPlotKeywords}
<div> </h1>
<div style="display: inline-block; width: 80%;"> <paper-button raised class="btnAddTextItem submit mini" style="margin-left:1em;" title="${ButtonAdd}">
<input type="text" class="txtEditableListview" /> <iron-icon icon="add"></iron-icon>
</div> <span>${ButtonAdd}</span>
<paper-icon-button icon="add" onclick="EditItemMetadataPage.addElementToEditableListview(this)"></paper-icon-button> </paper-button>
</div> <div class="paperList" id="listKeywords"></div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listKeywords"></ul>
</div>
</div> </div>
<div data-role="collapsible" data-mini="true" id="studiosCollapsible" style="display: none; margin-top: 1em;"> <div id="studiosCollapsible" class="editableListviewContainer" style="display: none; margin-top: 3em;">
<h3>${HeaderStudios}</h3> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
<div data-role="editableListviewContainer"> ${HeaderStudios}
<div> </h1>
<div style="display: inline-block; width: 80%;"> <paper-button raised class="btnAddTextItem submit mini" style="margin-left:1em;" title="${ButtonAdd}">
<input type="text" class="txtEditableListview" /> <iron-icon icon="add"></iron-icon>
</div> <span>${ButtonAdd}</span>
<paper-icon-button icon="add" onclick="EditItemMetadataPage.addElementToEditableListview(this)"></paper-icon-button> </paper-button>
</div> <div class="paperList" id="listStudios"></div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listStudios"></ul>
</div>
</div> </div>
<div data-mini="true" data-role="collapsible" id="tagsCollapsible" style="display: none; margin-top: 1em;"> <div id="tagsCollapsible" class="editableListviewContainer" style="display: none; margin-top: 3em;">
<h3>${HeaderTags}</h3> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
<div data-role="editableListviewContainer"> ${HeaderTags}
<div> </h1>
<div style="display: inline-block; width: 80%;"> <paper-button raised class="btnAddTextItem submit mini" style="margin-left:1em;" title="${ButtonAdd}">
<input type="text" class="txtEditableListview" /> <iron-icon icon="add"></iron-icon>
</div> <span>${ButtonAdd}</span>
<paper-icon-button icon="add" onclick="EditItemMetadataPage.addElementToEditableListview(this)"></paper-icon-button> </paper-button>
</div> <div class="paperList" id="listTags"></div>
<ul data-role="listview" data-inset="true" data-split-icon="delete" id="listTags"></ul>
</div>
</div> </div>
<div id="metadataSettingsCollapsible" style="display: none; margin-top: 3em;"> <div id="metadataSettingsCollapsible" style="display: none; margin-top: 3em;">
<h1>${HeaderMetadataSettings}</h1> <h1>${HeaderMetadataSettings}</h1>