mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rename more components and update references
This commit is contained in:
dkanada
parent
35094da328
commit
1aaaffde4c
24 changed files with 23 additions and 23 deletions
112
src/components/imageOptionsEditor/imageOptionsEditor.js
Normal file
112
src/components/imageOptionsEditor/imageOptionsEditor.js
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emby-input'], function (globalize, dom, dialogHelper) {
|
||||
'use strict';
|
||||
|
||||
function getDefaultImageConfig(itemType, type) {
|
||||
return {
|
||||
Type: type,
|
||||
MinWidth: 0,
|
||||
Limit: 'Primary' === type ? 1 : 0
|
||||
};
|
||||
}
|
||||
|
||||
function findImageOptions(imageOptions, type) {
|
||||
return imageOptions.filter(function (i) {
|
||||
return i.Type == type;
|
||||
})[0];
|
||||
}
|
||||
|
||||
function getImageConfig(options, availableOptions, imageType, itemType) {
|
||||
return findImageOptions(options.ImageOptions || [], imageType) || findImageOptions(availableOptions.DefaultImageOptions || [], imageType) || getDefaultImageConfig(itemType, imageType);
|
||||
}
|
||||
|
||||
function setVisibilityOfBackdrops(elem, visible) {
|
||||
if (visible) {
|
||||
elem.classList.remove('hide');
|
||||
elem.querySelector('input').setAttribute('required', 'required');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
elem.querySelector('input').setAttribute('required', '');
|
||||
elem.querySelector('input').removeAttribute('required');
|
||||
}
|
||||
}
|
||||
|
||||
function loadValues(context, itemType, options, availableOptions) {
|
||||
var supportedImageTypes = availableOptions.SupportedImageTypes || [];
|
||||
setVisibilityOfBackdrops(context.querySelector('.backdropFields'), -1 != supportedImageTypes.indexOf('Backdrop'));
|
||||
setVisibilityOfBackdrops(context.querySelector('.screenshotFields'), -1 != supportedImageTypes.indexOf('Screenshot'));
|
||||
Array.prototype.forEach.call(context.querySelectorAll('.imageType'), function (i) {
|
||||
var imageType = i.getAttribute('data-imagetype');
|
||||
var container = dom.parentWithTag(i, 'LABEL');
|
||||
|
||||
if (-1 == supportedImageTypes.indexOf(imageType)) {
|
||||
container.classList.add('hide');
|
||||
} else {
|
||||
container.classList.remove('hide');
|
||||
}
|
||||
|
||||
if (getImageConfig(options, availableOptions, imageType, itemType).Limit) {
|
||||
i.checked = true;
|
||||
} else {
|
||||
i.checked = false;
|
||||
}
|
||||
});
|
||||
var backdropConfig = getImageConfig(options, availableOptions, 'Backdrop', itemType);
|
||||
context.querySelector('#txtMaxBackdrops').value = backdropConfig.Limit;
|
||||
context.querySelector('#txtMinBackdropDownloadWidth').value = backdropConfig.MinWidth;
|
||||
var screenshotConfig = getImageConfig(options, availableOptions, 'Screenshot', itemType);
|
||||
context.querySelector('#txtMaxScreenshots').value = screenshotConfig.Limit;
|
||||
context.querySelector('#txtMinScreenshotDownloadWidth').value = screenshotConfig.MinWidth;
|
||||
}
|
||||
|
||||
function saveValues(context, options) {
|
||||
options.ImageOptions = Array.prototype.map.call(context.querySelectorAll('.imageType:not(.hide)'), function (c) {
|
||||
return {
|
||||
Type: c.getAttribute('data-imagetype'),
|
||||
Limit: c.checked ? 1 : 0,
|
||||
MinWidth: 0
|
||||
};
|
||||
});
|
||||
options.ImageOptions.push({
|
||||
Type: 'Backdrop',
|
||||
Limit: context.querySelector('#txtMaxBackdrops').value,
|
||||
MinWidth: context.querySelector('#txtMinBackdropDownloadWidth').value
|
||||
});
|
||||
options.ImageOptions.push({
|
||||
Type: 'Screenshot',
|
||||
Limit: context.querySelector('#txtMaxScreenshots').value,
|
||||
MinWidth: context.querySelector('#txtMinScreenshotDownloadWidth').value
|
||||
});
|
||||
}
|
||||
|
||||
function editor() {
|
||||
this.show = function (itemType, options, availableOptions) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'components/imageOptionsEditor/imageOptionsEditor.template.html', true);
|
||||
|
||||
xhr.onload = function (e) {
|
||||
var template = this.response;
|
||||
var dlg = dialogHelper.createDialog({
|
||||
size: 'medium-tall',
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
});
|
||||
dlg.classList.add('formDialog');
|
||||
dlg.innerHTML = globalize.translateDocument(template);
|
||||
dlg.addEventListener('close', function () {
|
||||
saveValues(dlg, options);
|
||||
});
|
||||
loadValues(dlg, itemType, options, availableOptions);
|
||||
dialogHelper.open(dlg).then(resolve, resolve);
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
};
|
||||
|
||||
xhr.send();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
return editor;
|
||||
});
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<div class="formDialogHeader">
|
||||
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
|
||||
<h3 class="formDialogHeaderTitle">
|
||||
${HeaderImageOptions}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="formDialogContent scrollY">
|
||||
<div class="dialogContentInner dialog-content-centered">
|
||||
<form style="margin:1.5em auto 0;">
|
||||
|
||||
<div class="verticalSection">
|
||||
<h3 class="checkboxListLabel">${HeaderFetchImages}</h3>
|
||||
<div class="imageSelections checkboxList">
|
||||
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Primary" />
|
||||
<span>${OptionDownloadPrimaryImage}</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Art" />
|
||||
<span>${OptionDownloadArtImage}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="BoxRear" />
|
||||
<span>${OptionDownloadBackImage}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Banner" />
|
||||
<span>${OptionDownloadBannerImage}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Box" />
|
||||
<span>${OptionDownloadBoxImage}</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Disc" />
|
||||
<span>${OptionDownloadDiscImage}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Logo" />
|
||||
<span>${OptionDownloadLogoImage}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Menu" />
|
||||
<span>${OptionDownloadMenuImage}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Thumb" />
|
||||
<span>${OptionDownloadThumbImage}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="backdropFields">
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="number" id="txtMaxBackdrops" pattern="[0-9]*" required="required" min="0" label="${LabelMaxBackdropsPerItem}" />
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="number" id="txtMinBackdropDownloadWidth" pattern="[0-9]*" required="required" min="0" label="${LabelMinBackdropDownloadWidth}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screenshotFields">
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="number" id="txtMaxScreenshots" pattern="[0-9]*" required="required" min="0" label="${LabelMaxScreenshotsPerItem}" />
|
||||
</div>
|
||||
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="number" id="txtMinScreenshotDownloadWidth" pattern="[0-9]*" required="required" min="0" label="${LabelMinScreenshotDownloadWidth}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue