2019-10-09 18:59:17 +03:00
|
|
|
define(["globalize", "dom", "dialogHelper", "emby-checkbox", "emby-select", "emby-input"], function (globalize, dom, dialogHelper) {
|
2018-10-23 01:05:09 +03:00
|
|
|
"use strict";
|
|
|
|
|
|
|
|
function getDefaultImageConfig(itemType, type) {
|
|
|
|
return {
|
|
|
|
Type: type,
|
|
|
|
MinWidth: 0,
|
|
|
|
Limit: "Primary" === type ? 1 : 0
|
2019-10-09 18:59:17 +03:00
|
|
|
};
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function findImageOptions(imageOptions, type) {
|
2019-10-09 18:59:17 +03:00
|
|
|
return imageOptions.filter(function (i) {
|
|
|
|
return i.Type == type;
|
|
|
|
})[0];
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function getImageConfig(options, availableOptions, imageType, itemType) {
|
2019-10-09 18:59:17 +03:00
|
|
|
return findImageOptions(options.ImageOptions || [], imageType) || findImageOptions(availableOptions.DefaultImageOptions || [], imageType) || getDefaultImageConfig(itemType, imageType);
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function setVisibilityOfBackdrops(elem, visible) {
|
2019-10-09 18:59:17 +03:00
|
|
|
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");
|
|
|
|
}
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function loadValues(context, itemType, options, availableOptions) {
|
|
|
|
var supportedImageTypes = availableOptions.SupportedImageTypes || [];
|
2019-10-09 18:59:17 +03:00
|
|
|
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;
|
|
|
|
}
|
2018-10-23 01:05:09 +03:00
|
|
|
});
|
|
|
|
var backdropConfig = getImageConfig(options, availableOptions, "Backdrop", itemType);
|
2019-10-09 18:59:17 +03:00
|
|
|
context.querySelector("#txtMaxBackdrops").value = backdropConfig.Limit;
|
|
|
|
context.querySelector("#txtMinBackdropDownloadWidth").value = backdropConfig.MinWidth;
|
2018-10-23 01:05:09 +03:00
|
|
|
var screenshotConfig = getImageConfig(options, availableOptions, "Screenshot", itemType);
|
2019-10-09 18:59:17 +03:00
|
|
|
context.querySelector("#txtMaxScreenshots").value = screenshotConfig.Limit;
|
|
|
|
context.querySelector("#txtMinScreenshotDownloadWidth").value = screenshotConfig.MinWidth;
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function saveValues(context, options) {
|
2019-10-09 18:59:17 +03:00
|
|
|
options.ImageOptions = Array.prototype.map.call(context.querySelectorAll(".imageType:not(.hide)"), function (c) {
|
2018-10-23 01:05:09 +03:00
|
|
|
return {
|
|
|
|
Type: c.getAttribute("data-imagetype"),
|
|
|
|
Limit: c.checked ? 1 : 0,
|
|
|
|
MinWidth: 0
|
2019-10-09 18:59:17 +03:00
|
|
|
};
|
|
|
|
});
|
|
|
|
options.ImageOptions.push({
|
2018-10-23 01:05:09 +03:00
|
|
|
Type: "Backdrop",
|
|
|
|
Limit: context.querySelector("#txtMaxBackdrops").value,
|
|
|
|
MinWidth: context.querySelector("#txtMinBackdropDownloadWidth").value
|
2019-10-09 18:59:17 +03:00
|
|
|
});
|
|
|
|
options.ImageOptions.push({
|
2018-10-23 01:05:09 +03:00
|
|
|
Type: "Screenshot",
|
|
|
|
Limit: context.querySelector("#txtMaxScreenshots").value,
|
|
|
|
MinWidth: context.querySelector("#txtMinScreenshotDownloadWidth").value
|
2019-10-09 18:59:17 +03:00
|
|
|
});
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function editor() {
|
2019-10-09 18:59:17 +03:00
|
|
|
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();
|
|
|
|
});
|
|
|
|
};
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
2019-10-09 18:59:17 +03:00
|
|
|
|
|
|
|
return editor;
|
|
|
|
});
|