cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-18 03:18:19 -07:00
Code Issues Packages Projects Releases Wiki Activity

update metadata editor hide/show methods

Browse Source
This commit is contained in:
Luke Pulverenti 2016-07-23 17:03:55 -04:00
parent 9f46827e8c
commit b2c31014ca
2 changed files with 64 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
dashboard-ui/components/metadataeditor/metadataeditor.js
View File

@ -441,7 +441,7 @@
function renderContentTypeOptions(context, metadataInfo) { function renderContentTypeOptions(context, metadataInfo) {
if (metadataInfo.ContentTypeOptions.length) { if (!metadataInfo.ContentTypeOptions.length) {
hideElement('#fldContentType', context); hideElement('#fldContentType', context);
} else { } else {
showElement('#fldContentType', context); showElement('#fldContentType', context);
@ -508,37 +508,47 @@
elem.innerHTML = html; elem.innerHTML = html;
var extIdEls = elem.querySelector('.txtExternalId') || []; var extIdEls = elem.querySelector('.txtExternalId') || [];
extIdEls.forEach(function (el) { Array.prototype.forEach.call(extIdEls, function (el) {
el.addEventListener('change', onExternalIdChange.bind(el)); el.addEventListener('change', onExternalIdChange.bind(el));
el.dispatchEvent(new Event('change')) el.dispatchEvent(new Event('change'));
}) });
} }
// Function to hide the element by selector or raw element // Function to hide the element by selector or raw element
// Selector can be an element or a selector string // Selector can be an element or a selector string
// Context is optional and restricts the querySelector to the context // Context is optional and restricts the querySelector to the context
function hideElement(selector, context) { function hideElement(selector, context, multiple) {
context = context || document; context = context || document;
if (typeof selector == 'string') { if (typeof selector == 'string') {
Array.prototype.forEach.call(context.querySelectorAll(selector), function(el){
el.style.display = 'none'; var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
})
Array.prototype.forEach.call(elements, function (el) {
if (el) {
el.classList.add('hide');
}
});
} else { } else {
selector.style.display = 'none'; selector.classList.add('hide');
} }
} }
// Function to show the element by selector or raw element // Function to show the element by selector or raw element
// Selector can be an element or a selector string // Selector can be an element or a selector string
// Context is optional and restricts the querySelector to the context // Context is optional and restricts the querySelector to the context
function showElement(selector, context) { function showElement(selector, context, multiple) {
context = context || document; context = context || document;
if (typeof selector == 'string') { if (typeof selector == 'string') {
Array.prototype.forEach.call(context.querySelectorAll(selector), function(el){
el.style.display = ''; var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
})
Array.prototype.forEach.call(elements, function (el) {
if (el) {
el.classList.remove('hide');
}
});
} else { } else {
selector.style.display = ''; selector.classList.remove('hide');
} }
} }
@ -1137,12 +1147,6 @@
setFieldVisibilities(context, item); setFieldVisibilities(context, item);
fillItemInfo(context, item, metadataEditorInfo.ParentalRatingOptions); fillItemInfo(context, item, metadataEditorInfo.ParentalRatingOptions);
if (item.MediaType == 'Photo') {
hideElement('#btnEditImages', context);
} else {
showElement('#btnEditImages', context);
}
if (item.MediaType == "Video" && item.Type != "Episode") { if (item.MediaType == "Video" && item.Type != "Episode") {
showElement('#fldShortOverview', context); showElement('#fldShortOverview', context);
} else { } else {

80
dashboard-ui/components/metadataeditor/metadataeditor.template.html
View File

@ -20,7 +20,7 @@
<div class="metadataFormFields"> <div class="metadataFormFields">
<div style="padding: 0 0 10px;"> <div style="padding: 0 0 10px;">
<div id="fldContentType" style="display:none;" class="selectContainer"> <div id="fldContentType" class="selectContainer hide">
<select is="emby-select" id="selectContentType" label="${LabelContentType}"></select> <select is="emby-select" id="selectContentType" label="${LabelContentType}"></select>
</div> </div>
<div id="fldPath" class="inputContainer"> <div id="fldPath" class="inputContainer">
@ -35,73 +35,73 @@
<div class="inputContainer"> <div class="inputContainer">
<input is="emby-input" id="txtSortName" type="text" label="${LabelSortTitle}" /> <input is="emby-input" id="txtSortName" type="text" label="${LabelSortTitle}" />
</div> </div>
<div id="fldDateAdded" style="display: none;" class="inputContainer"> <div id="fldDateAdded" class="hide inputContainer">
<input is="emby-input" id="txtDateAdded" type="date" label="${LabelDateAdded}" /> <input is="emby-input" id="txtDateAdded" type="date" label="${LabelDateAdded}" />
<div class="fieldDescription">${ConfigureDateAdded}</div> <div class="fieldDescription">${ConfigureDateAdded}</div>
</div> </div>
<div id="fldStatus" style="display: none;" class="selectContainer"> <div id="fldStatus" class="hide selectContainer">
<select is="emby-select" id="selectStatus" label="${LabelStatus}"></select> <select is="emby-select" id="selectStatus" label="${LabelStatus}"></select>
</div> </div>
<div id="fldArtist" style="display: none;" class="inputContainer"> <div id="fldArtist" class="hide inputContainer">
<input is="emby-input" id="txtArtist" type="text" label="${LabelArtists}" /> <input is="emby-input" id="txtArtist" type="text" label="${LabelArtists}" />
<div class="fieldDescription">${LabelArtistsHelp}</div> <div class="fieldDescription">${LabelArtistsHelp}</div>
</div> </div>
<div id="fldAlbumArtist" style="display: none;" class="inputContainer"> <div id="fldAlbumArtist" class="hide inputContainer">
<input is="emby-input" id="txtAlbumArtist" type="text" label="${LabelAlbumArtists}" /> <input is="emby-input" id="txtAlbumArtist" type="text" label="${LabelAlbumArtists}" />
<div class="fieldDescription">${LabelArtistsHelp}</div> <div class="fieldDescription">${LabelArtistsHelp}</div>
</div> </div>
<div id="fldAlbum" style="display: none;" class="inputContainer"> <div id="fldAlbum" class="hide inputContainer">
<input is="emby-input" id="txtAlbum" type="text" label="${LabelAlbum}" /> <input is="emby-input" id="txtAlbum" type="text" label="${LabelAlbum}" />
</div> </div>
<div id="fldParentIndexNumber" style="display: none;" class="inputContainer"> <div id="fldParentIndexNumber" class="hide inputContainer">
<input is="emby-input" id="txtParentIndexNumber" type="number" /> <input is="emby-input" id="txtParentIndexNumber" type="number" />
</div> </div>
<div id="fldIndexNumber" style="display: none;" class="inputContainer"> <div id="fldIndexNumber" class="hide inputContainer">
<input is="emby-input" id="txtIndexNumber" type="number" pattern="[0-9]*" /> <input is="emby-input" id="txtIndexNumber" type="number" pattern="[0-9]*" />
</div> </div>
<div id="fldCommunityRating" style="display: none;" class="inputContainer"> <div id="fldCommunityRating" class="hide inputContainer">
<input is="emby-input" id="txtCommunityRating" type="number" step=".1" min="0" max="10" label="${LabelCommunityRating}" /> <input is="emby-input" id="txtCommunityRating" type="number" step=".1" min="0" max="10" label="${LabelCommunityRating}" />
</div> </div>
<div id="fldCommunityVoteCount" style="display: none;" class="inputContainer"> <div id="fldCommunityVoteCount" class="hide inputContainer">
<input is="emby-input" id="txtCommunityVoteCount" type="number" step="1" label="${LabelVoteCount}" /> <input is="emby-input" id="txtCommunityVoteCount" type="number" step="1" label="${LabelVoteCount}" />
</div> </div>
<div id="fldMetascore" style="display: none;" class="inputContainer"> <div id="fldMetascore" class="hide inputContainer">
<input is="emby-input" id="txtMetascore" type="number" step="1" min="0" max="100" label="${LabelMetascore}" /> <input is="emby-input" id="txtMetascore" type="number" step="1" min="0" max="100" label="${LabelMetascore}" />
</div> </div>
<div id="fldCriticRating" style="display: none;" class="inputContainer"> <div id="fldCriticRating" class="hide inputContainer">
<input is="emby-input" id="txtCriticRating" type="number" step=".1" label="${LabelCriticRating}" /> <input is="emby-input" id="txtCriticRating" type="number" step=".1" label="${LabelCriticRating}" />
</div> </div>
<div id="fldCriticRatingSummary" style="display: none;" class="inputContainer"> <div id="fldCriticRatingSummary" class="hide inputContainer">
<input is="emby-input" id="txtCriticRatingSummary" type="text" label="${LabelCriticRatingSummary}" /> <input is="emby-input" id="txtCriticRatingSummary" type="text" label="${LabelCriticRatingSummary}" />
</div> </div>
<div id="fldAwardSummary" style="display: none;" class="inputContainer"> <div id="fldAwardSummary" class="hide inputContainer">
<input is="emby-input" id="txtAwardSummary" type="text" label="${LabelAwardSummary}" /> <input is="emby-input" id="txtAwardSummary" type="text" label="${LabelAwardSummary}" />
</div> </div>
<div class="inputContainer"> <div class="inputContainer">
<input is="emby-input" id="txtHomePageUrl" type="text" label="${LabelWebsite}" /> <input is="emby-input" id="txtHomePageUrl" type="text" label="${LabelWebsite}" />
</div> </div>
<div id="fldTagline" style="display: none;" class="inputContainer"> <div id="fldTagline" class="hide inputContainer">
<input is="emby-input" id="txtTagline" type="text" label="${LabelTagline}" /> <input is="emby-input" id="txtTagline" type="text" label="${LabelTagline}" />
</div> </div>
<div class="inputContainer"> <div class="inputContainer">
<textarea is="emby-textarea" id="txtOverview" label="${LabelOverview}"></textarea> <textarea is="emby-textarea" id="txtOverview" label="${LabelOverview}"></textarea>
</div> </div>
<div id="fldShortOverview" style="display: none;" class="inputContainer"> <div id="fldShortOverview" class="hide inputContainer">
<input is="emby-input" id="txtShortOverview" type="text" label="${LabelShortOverview}" /> <input is="emby-input" id="txtShortOverview" type="text" label="${LabelShortOverview}" />
</div> </div>
<div id="fldPremiereDate" class="inputContainer"> <div id="fldPremiereDate" class="inputContainer">
<input is="emby-input" id="txtPremiereDate" label="${LabelReleaseDate}" type="date" /> <input is="emby-input" id="txtPremiereDate" label="${LabelReleaseDate}" type="date" />
</div> </div>
<div id="fldYear" style="display: none;" class="inputContainer"> <div id="fldYear" class="hide inputContainer">
<input is="emby-input" id="txtProductionYear" type="number" label="${LabelYear}" /> <input is="emby-input" id="txtProductionYear" type="number" label="${LabelYear}" />
</div> </div>
<div id="fldPlaceOfBirth" style="display: none;" class="inputContainer"> <div id="fldPlaceOfBirth" class="hide inputContainer">
<input is="emby-input" id="txtPlaceOfBirth" type="text" label="${LabelPlaceOfBirth}" /> <input is="emby-input" id="txtPlaceOfBirth" type="text" label="${LabelPlaceOfBirth}" />
</div> </div>
<div id="fldEndDate" class="inputContainer"> <div id="fldEndDate" class="inputContainer">
<input is="emby-input" id="txtEndDate" label="${LabelEndDate}" type="date" /> <input is="emby-input" id="txtEndDate" label="${LabelEndDate}" type="date" />
</div> </div>
<div id="fldAirDays" style="display: none;"> <div id="fldAirDays" class="hide">
<p>${LabelAirDays}</p> <p>${LabelAirDays}</p>
<div class="checkboxList"> <div class="checkboxList">
@ -137,31 +137,31 @@
<br /> <br />
</div> </div>
<div id="fldAirTime" style="display: none;" class="inputContainer"> <div id="fldAirTime" class="inputContainer hide">
<input is="emby-input" id="txtAirTime" type="text" label="${LabelAirTime}" /> <input is="emby-input" id="txtAirTime" type="text" label="${LabelAirTime}" />
</div> </div>
<div id="fldSeriesRuntime" style="display: none;" class="inputContainer"> <div id="fldSeriesRuntime" class="inputContainer hide">
<input is="emby-input" id="txtSeriesRuntime" type="number" label="${LabelRuntimeMinutes}" /> <input is="emby-input" id="txtSeriesRuntime" type="number" label="${LabelRuntimeMinutes}" />
</div> </div>
<div id="fldOfficialRating" style="display: none;" class="selectContainer"> <div id="fldOfficialRating" class="selectContainer hide">
<select is="emby-select" id="selectOfficialRating" label="${LabelParentalRating}"></select> <select is="emby-select" id="selectOfficialRating" label="${LabelParentalRating}"></select>
</div> </div>
<div id="fldCustomRating" style="display: none;" class="selectContainer"> <div id="fldCustomRating" class="selectContainer hide">
<select is="emby-select" id="selectCustomRating" label="${LabelCustomRating}"></select> <select is="emby-select" id="selectCustomRating" label="${LabelCustomRating}"></select>
</div> </div>
<div id="fldBudget" style="display: none;" class="inputContainer"> <div id="fldBudget" class="inputContainer hide">
<input is="emby-input" id="txtBudget" type="number" label="${LabelBudget}" /> <input is="emby-input" id="txtBudget" type="number" label="${LabelBudget}" />
</div> </div>
<div id="fldRevenue" style="display: none;" class="inputContainer"> <div id="fldRevenue" class="inputContainer hide">
<input is="emby-input" id="txtRevenue" type="number" label="${LabelRevenue}" /> <input is="emby-input" id="txtRevenue" type="number" label="${LabelRevenue}" />
</div> </div>
<div id="fldOriginalAspectRatio" style="display: none;" class="inputContainer"> <div id="fldOriginalAspectRatio" class="inputContainer hide">
<input is="emby-input" id="txtOriginalAspectRatio" type="text" label="${LabelOriginalAspectRatio}" /> <input is="emby-input" id="txtOriginalAspectRatio" type="text" label="${LabelOriginalAspectRatio}" />
</div> </div>
<div id="fldPlayers" style="display: none;" class="inputContainer"> <div id="fldPlayers" class="inputContainer hide">
<input is="emby-input" id="txtPlayers" type="number" pattern="[0-9]*" label="${LabelPlayers}" /> <input is="emby-input" id="txtPlayers" type="number" pattern="[0-9]*" label="${LabelPlayers}" />
</div> </div>
<div id="fld3dFormat" style="display: none;" class="selectContainer"> <div id="fld3dFormat" class="selectContainer hide">
<select is="emby-select" id="select3dFormat" label="${Label3DFormat}"> <select is="emby-select" id="select3dFormat" label="${Label3DFormat}">
<option value=""></option> <option value=""></option>
<option value="HalfSideBySide">HSBS</option> <option value="HalfSideBySide">HSBS</option>
@ -174,7 +174,7 @@
</div> </div>
<br /> <br />
<div class="detailSection" id="collapsibleDvdEpisodeInfo" style="display: none;"> <div class="detailSection hide" id="collapsibleDvdEpisodeInfo">
<h1> <h1>
${HeaderAlternateEpisodeNumbers} ${HeaderAlternateEpisodeNumbers}
</h1> </h1>
@ -189,7 +189,7 @@
</div> </div>
</div> </div>
<div class="detailSection" id="collapsibleSpecialEpisodeInfo" style="display: none;"> <div class="detailSection hide" id="collapsibleSpecialEpisodeInfo">
<h1> <h1>
${HeaderSpecialEpisodeInfo} ${HeaderSpecialEpisodeInfo}
</h1> </h1>
@ -212,11 +212,11 @@
</div> </div>
</div> </div>
<div class="detailSection" id="collapsibleDisplaySettings" style="display:none;"> <div class="detailSection hide" id="collapsibleDisplaySettings">
<h1> <h1>
${HeaderDisplaySettings} ${HeaderDisplaySettings}
</h1> </h1>
<div id="fldSourceType" style="display: none;" class="fldDisplaySetting inputContainer"> <div id="fldSourceType" class="hide fldDisplaySetting inputContainer">
<input is="emby-input" id="txtDisplayMediaType" type="text" label="${LabelTreatImageAs}" /> <input is="emby-input" id="txtDisplayMediaType" type="text" label="${LabelTreatImageAs}" />
</div> </div>
<div id="fldDisplayOrder" class="fldDisplaySetting selectContainer"> <div id="fldDisplayOrder" class="fldDisplaySetting selectContainer">
@ -224,7 +224,7 @@
</div> </div>
</div> </div>
<div id="countriesCollapsible" class="editableListviewContainer" style="display: none; margin-top: 3em;"> <div id="countriesCollapsible" class="editableListviewContainer hide" style="margin-top: 3em;">
<h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;"> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
${HeaderCountries} ${HeaderCountries}
</h1> </h1>
@ -234,7 +234,7 @@
</button> </button>
<div class="paperList" id="listCountries"></div> <div class="paperList" id="listCountries"></div>
</div> </div>
<div id="genresCollapsible" class="editableListviewContainer" style="display: none; margin-top: 3em;"> <div id="genresCollapsible" class="editableListviewContainer hide" style="margin-top: 3em;">
<h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;"> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
${HeaderGenres} ${HeaderGenres}
</h1> </h1>
@ -244,7 +244,7 @@
</button> </button>
<div class="paperList" id="listGenres"></div> <div class="paperList" id="listGenres"></div>
</div> </div>
<div id="peopleCollapsible" style="display: none; margin-top: 3em;"> <div id="peopleCollapsible" style="margin-top: 3em;" class="hide">
<h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;"> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
${HeaderPeople} ${HeaderPeople}
</h1> </h1>
@ -255,7 +255,7 @@
<div id="peopleList" class="paperList"> <div id="peopleList" class="paperList">
</div> </div>
</div> </div>
<div id="keywordsCollapsible" class="editableListviewContainer" style="display: none; margin-top: 3em;"> <div id="keywordsCollapsible" class="editableListviewContainer hide" style="margin-top: 3em;">
<h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;"> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
${HeaderPlotKeywords} ${HeaderPlotKeywords}
</h1> </h1>
@ -265,7 +265,7 @@
</button> </button>
<div class="paperList" id="listKeywords"></div> <div class="paperList" id="listKeywords"></div>
</div> </div>
<div id="studiosCollapsible" class="editableListviewContainer" style="display: none; margin-top: 3em;"> <div id="studiosCollapsible" class="editableListviewContainer hide" style="margin-top: 3em;">
<h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;"> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
${HeaderStudios} ${HeaderStudios}
</h1> </h1>
@ -275,7 +275,7 @@
</button> </button>
<div class="paperList" id="listStudios"></div> <div class="paperList" id="listStudios"></div>
</div> </div>
<div id="tagsCollapsible" class="editableListviewContainer" style="display: none; margin-top: 3em;"> <div id="tagsCollapsible" class="editableListviewContainer hide" style="margin-top: 3em;">
<h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;"> <h1 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
${HeaderTags} ${HeaderTags}
</h1> </h1>
@ -285,7 +285,7 @@
</button> </button>
<div class="paperList" id="listTags"></div> <div class="paperList" id="listTags"></div>
</div> </div>
<div id="metadataSettingsCollapsible" style="display: none; margin-top: 3em;"> <div id="metadataSettingsCollapsible" style="margin-top: 3em;" class="hide">
<h1>${HeaderMetadataSettings}</h1> <h1>${HeaderMetadataSettings}</h1>
<div> <div>
<div class="selectContainer"> <div class="selectContainer">
@ -303,7 +303,7 @@
<span>${LabelLockItemToPreventChanges}</span> <span>${LabelLockItemToPreventChanges}</span>
</label> </label>
<div class="providerSettingsContainer checkboxList" style="display: none"> <div class="providerSettingsContainer checkboxList hide">
</div> </div>
</div> </div>
</div> </div>