Update ImageUtilities.plugin.js

This commit is contained in:
Mirco Wittrien 2023-02-20 09:15:40 +01:00
parent 8c2ec5ea52
commit aa26153e58
1 changed files with 46 additions and 15 deletions

View File

@ -214,8 +214,9 @@ module.exports = (_ => {
galleryFilter: {},
zoomSettings: {
pixelMode: {value: false, label: "Uses Pixel Lens instead of a Blur Lens"},
lensSize: {value: 200, digits: 0, minValue: 50, maxValue: 5000, unit: "px", label: "context_lenssize"},
zoomLevel: {value: 2, digits: 1, minValue: 1, maxValue: 20, unit: "x", label: "ACCESSIBILITY_ZOOM_LEVEL_LABEL"},
lensSize: {value: 200, digits: 0, minValue: 50, maxValue: 5000, unit: "px", label: "context_lenssize"}
zoomSpeed: {value: 0.1, digits: 2, minValue: 0.01, maxValue: 1, unit: "", label: "context_zoomspeed"}
},
rescaleSettings: {
messages: {value: "NONE", description: "Messages"},
@ -1220,8 +1221,9 @@ module.exports = (_ => {
let vanishObserver;
let zoomLevel = this.settings.zoomSettings.zoomLevel;
let imgRects = BDFDB.DOMUtils.getRects(e.node.firstElementChild);
let lens = BDFDB.DOMUtils.create(`<div class="${BDFDB.disCN._imageutilitieslense}" style="border-radius: 50% !important; pointer-events: none !important; z-index: 10000 !important; width: ${this.settings.zoomSettings.lensSize}px !important; height: ${this.settings.zoomSettings.lensSize}px !important; position: fixed !important;"><div style="position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;"><${e.node.firstElementChild.tagName} src="${!this.isValid(e.instance.props.src, "video") ? e.instance.props.src : this.getPosterUrl(e.instance.props.src)}" style="width: ${imgRects.width * this.settings.zoomSettings.zoomLevel}px; height: ${imgRects.height * this.settings.zoomSettings.zoomLevel}px; position: fixed !important;${this.settings.zoomSettings.pixelMode ? " image-rendering: pixelated !important;" : ""}"${e.node.firstElementChild.tagName == "VIDEO" ? " loop autoplay" : ""}></${e.node.firstElementChild.tagName}></div></div>`);
let lens = BDFDB.DOMUtils.create(`<div class="${BDFDB.disCN._imageutilitieslense}" style="border-radius: 50% !important; pointer-events: none !important; z-index: 10000 !important; width: ${this.settings.zoomSettings.lensSize}px !important; height: ${this.settings.zoomSettings.lensSize}px !important; position: fixed !important;"><div style="position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;"><${e.node.firstElementChild.tagName} src="${!this.isValid(e.instance.props.src, "video") ? e.instance.props.src : this.getPosterUrl(e.instance.props.src)}" style="width: ${imgRects.width * zoomLevel}px; height: ${imgRects.height * zoomLevel}px; position: fixed !important;${this.settings.zoomSettings.pixelMode ? " image-rendering: pixelated !important;" : ""}"${e.node.firstElementChild.tagName == "VIDEO" ? " loop autoplay" : ""}></${e.node.firstElementChild.tagName}></div></div>`);
let pane = lens.firstElementChild.firstElementChild;
let backdrop = BDFDB.DOMUtils.create(`<div class="${BDFDB.disCN._imageutilitieslensebackdrop}" style="background: rgba(0, 0, 0, 0.3) !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; pointer-events: none !important; z-index: 8000 !important;"></div>`);
let appMount = document.querySelector(BDFDB.dotCN.appmount);
@ -1243,10 +1245,10 @@ module.exports = (_ => {
lens.style.setProperty("height", this.settings.zoomSettings.lensSize + "px", "important");
lens.style.setProperty("clip-path", `circle(${(this.settings.zoomSettings.lensSize/2) + 2}px at center)`, "important");
lens.firstElementChild.style.setProperty("clip-path", `circle(${this.settings.zoomSettings.lensSize/2}px at center)`, "important");
pane.style.setProperty("left", imgRects.left + ((this.settings.zoomSettings.zoomLevel - 1) * (imgRects.left - x - halfW)) + "px", "important");
pane.style.setProperty("top", imgRects.top + ((this.settings.zoomSettings.zoomLevel - 1) * (imgRects.top - y - halfH)) + "px", "important");
pane.style.setProperty("width", imgRects.width * this.settings.zoomSettings.zoomLevel + "px", "important");
pane.style.setProperty("height", imgRects.height * this.settings.zoomSettings.zoomLevel + "px", "important");
pane.style.setProperty("left", imgRects.left + ((zoomLevel - 1) * (imgRects.left - x - halfW)) + "px", "important");
pane.style.setProperty("top", imgRects.top + ((zoomLevel - 1) * (imgRects.top - y - halfH)) + "px", "important");
pane.style.setProperty("width", imgRects.width * zoomLevel + "px", "important");
pane.style.setProperty("height", imgRects.height * zoomLevel + "px", "important");
};
lens.update();
@ -1273,12 +1275,12 @@ module.exports = (_ => {
this.addListener("wheel", "Zoom", event2 => {
if (!document.contains(e.node)) this.cleanupListeners("Zoom");
else {
if (event2.deltaY < 0 && (this.settings.zoomSettings.zoomLevel + 0.1) <= this.defaults.zoomSettings.zoomLevel.maxValue) {
this.settings.zoomSettings.zoomLevel += 0.1;
if (event2.deltaY < 0 && (zoomLevel + this.settings.zoomSettings.zoomSpeed * zoomLevel) <= this.defaults.zoomSettings.zoomLevel.maxValue) {
zoomLevel += this.settings.zoomSettings.zoomSpeed * zoomLevel;
lens.update();
}
else if (event2.deltaY > 0 && (this.settings.zoomSettings.zoomLevel - 0.1) >= this.defaults.zoomSettings.zoomLevel.minValue) {
this.settings.zoomSettings.zoomLevel -= 0.1;
else if (event2.deltaY > 0 && (zoomLevel - this.settings.zoomSettings.zoomSpeed * zoomLevel) >= this.defaults.zoomSettings.zoomLevel.minValue) {
zoomLevel -= this.settings.zoomSettings.zoomSpeed * zoomLevel;
lens.update();
}
}
@ -1287,12 +1289,12 @@ module.exports = (_ => {
if (!document.contains(e.node)) this.cleanupListeners("Zoom");
else if (!firedEvents.includes("Zoom")) {
firedEvents.push("Zoom");
if (event2.keyCode == 187 && (this.settings.zoomSettings.zoomLevel + 0.5) <= this.defaults.zoomSettings.zoomLevel.maxValue) {
this.settings.zoomSettings.zoomLevel += 0.5;
if (event2.keyCode == 187 && (zoomLevel + zoomLevel * 0.5) <= this.defaults.zoomSettings.zoomLevel.maxValue) {
zoomLevel += zoomLevel * 0.5;
lens.update();
}
else if (event2.keyCode == 189 && (this.settings.zoomSettings.zoomLevel - 0.5) >= this.defaults.zoomSettings.zoomLevel.minValue) {
this.settings.zoomSettings.zoomLevel -= 0.5;
else if (event2.keyCode == 189 && (zoomLevel - zoomLevel * 0.5) >= this.defaults.zoomSettings.zoomLevel.minValue) {
zoomLevel -= zoomLevel * 0.5;
lens.update();
}
}
@ -1690,6 +1692,7 @@ module.exports = (_ => {
context_copy: "Копирайте {{var0}}",
context_imageactions: "Действия с изображения",
context_lenssize: "Размер на обектива",
context_zoomspeed: "Скорост на мащабиране",
context_saveas: "Запазете {{var0}} като ...",
context_searchwith: "Търсете {{var0}} с ...",
context_videoactions: "Видео действия",
@ -1705,6 +1708,7 @@ module.exports = (_ => {
context_copy: "Zkopírovat {{var0}}",
context_imageactions: "Akce s obrázky",
context_lenssize: "Velikost lupy",
context_zoomspeed: "Rychlost zoomu",
context_saveas: "Uložit {{var0}} jako...",
context_searchwith: "Hledat {{var0}} pomocí...",
context_videoactions: "Video akce",
@ -1720,6 +1724,7 @@ module.exports = (_ => {
context_copy: "Kopiér {{var0}}",
context_imageactions: "Billedhandlinger",
context_lenssize: "Objektivstørrelse",
context_zoomspeed: "Zoomhastighed",
context_saveas: "Gem {{var0}} som ...",
context_searchwith: "Søg i {{var0}} med ...",
context_videoactions: "Videohandlinger",
@ -1735,6 +1740,7 @@ module.exports = (_ => {
context_copy: "{{var0}} kopieren",
context_imageactions: "Bildaktionen",
context_lenssize: "Linsengröße",
context_zoomspeed: "Zoomgeschwindigkeit",
context_saveas: "{{var0}} speichern als ...",
context_searchwith: "{{var0}} suchen mit ...",
context_videoactions: "Videoaktionen",
@ -1750,6 +1756,7 @@ module.exports = (_ => {
context_copy: "Αντιγραφή {{var0}}",
context_imageactions: "Ενέργειες εικόνας",
context_lenssize: "Μέγεθος φακού",
context_zoomspeed: "Ταχύτητα ζουμ",
context_saveas: "Αποθήκευση {{var0}} ως ...",
context_searchwith: "Αναζήτηση {{var0}} με ...",
context_videoactions: "Ενέργειες βίντεο",
@ -1765,6 +1772,7 @@ module.exports = (_ => {
context_copy: "Copiar {{var0}}",
context_imageactions: "Acciones de imagen",
context_lenssize: "Tamaño de la lente",
context_zoomspeed: "Velocidad de zoom",
context_saveas: "Guardar {{var0}} como ...",
context_searchwith: "Buscar {{var0}} con ...",
context_videoactions: "Acciones de vídeo",
@ -1780,6 +1788,7 @@ module.exports = (_ => {
context_copy: "Kopioi {{var0}}",
context_imageactions: "Kuvatoiminnot",
context_lenssize: "Linssin koko",
context_zoomspeed: "Zoomausnopeus",
context_saveas: "Tallenna {{var0}} nimellä ...",
context_searchwith: "Tee haku {{var0}} ...",
context_videoactions: "Videotoiminnot",
@ -1795,6 +1804,7 @@ module.exports = (_ => {
context_copy: "Copier {{var0}}",
context_imageactions: "Actions sur les images",
context_lenssize: "Taille de l'objectif",
context_zoomspeed: "Vitesse de zoom",
context_saveas: "Enregistrer {{var0}} sous ...",
context_searchwith: "Rechercher {{var0}} avec ...",
context_videoactions: "Actions vidéo",
@ -1810,6 +1820,7 @@ module.exports = (_ => {
context_copy: "कॉपी {{var0}}",
context_imageactions: "छवि क्रियाएँ",
context_lenssize: "लेंस का आकार",
context_zoomspeed: "ज़ूम गति",
context_saveas: "{{var0}} को इस रूप में सेव करें...",
context_searchwith: "इसके साथ {{var0}} खोजें ...",
context_videoactions: "वीडियो क्रिया",
@ -1825,6 +1836,7 @@ module.exports = (_ => {
context_copy: "Kopiraj {{var0}}",
context_imageactions: "Radnje slike",
context_lenssize: "Veličina leće",
context_zoomspeed: "Brzina zumiranja",
context_saveas: "Spremi {{var0}} kao ...",
context_searchwith: "Traži {{var0}} sa ...",
context_videoactions: "Video radnje",
@ -1840,6 +1852,7 @@ module.exports = (_ => {
context_copy: "{{var0}} másolása",
context_imageactions: "Képműveletek",
context_lenssize: "Lencse mérete",
context_zoomspeed: "Zoom sebesség",
context_saveas: "{{var0}} mentése másként ...",
context_searchwith: "Keresés a következőben: {{var0}} a következővel:",
context_videoactions: "Videóműveletek",
@ -1855,6 +1868,7 @@ module.exports = (_ => {
context_copy: "Copia {{var0}}",
context_imageactions: "Azioni immagine",
context_lenssize: "Dimensione della lente",
context_zoomspeed: "Velocità dello zoom",
context_saveas: "Salva {{var0}} come ...",
context_searchwith: "Cerca {{var0}} con ...",
context_videoactions: "Azioni video",
@ -1870,6 +1884,7 @@ module.exports = (_ => {
context_copy: "{{var0}} をコピーします",
context_imageactions: "画像アクション",
context_lenssize: "レンズサイズ",
context_zoomspeed: "ズーム速度",
context_saveas: "{{var0}} を...として保存します",
context_searchwith: "{{var0}} を...で検索",
context_videoactions: "ビデオ アクション",
@ -1885,6 +1900,7 @@ module.exports = (_ => {
context_copy: "{{var0}} 복사",
context_imageactions: "이미지 작업",
context_lenssize: "렌즈 크기",
context_zoomspeed: "줌 속도",
context_saveas: "{{var0}} 을 다른 이름으로 저장 ...",
context_searchwith: "{{var0}} 검색 ...",
context_videoactions: "비디오 작업",
@ -1900,6 +1916,7 @@ module.exports = (_ => {
context_copy: "Kopijuoti {{var0}}",
context_imageactions: "Vaizdo veiksmai",
context_lenssize: "Objektyvo dydis",
context_zoomspeed: "Priartinimo greitis",
context_saveas: "Išsaugoti '{{var0}}' kaip ...",
context_searchwith: "Ieškoti {{var0}} naudojant ...",
context_videoactions: "Vaizdo įrašų veiksmai",
@ -1915,6 +1932,7 @@ module.exports = (_ => {
context_copy: "Kopieer {{var0}}",
context_imageactions: "Afbeeldingsacties",
context_lenssize: "Lens Maat",
context_zoomspeed: "Zoom snelheid",
context_saveas: "Bewaar {{var0}} als ...",
context_searchwith: "Zoek {{var0}} met ...",
context_videoactions: "Video-acties",
@ -1930,6 +1948,7 @@ module.exports = (_ => {
context_copy: "Kopier {{var0}}",
context_imageactions: "Bildehandlinger",
context_lenssize: "Linsestørrelse",
context_zoomspeed: "Zoomhastighet",
context_saveas: "Lagre {{var0}} som ...",
context_searchwith: "Søk på {{var0}} med ...",
context_videoactions: "Videohandlinger",
@ -1945,6 +1964,7 @@ module.exports = (_ => {
context_copy: "Kopiuj {{var0}}",
context_imageactions: "Działania związane z obrazem",
context_lenssize: "Rozmiar soczewki",
context_zoomspeed: "Szybkość zoomu",
context_saveas: "Zapisz {{var0}} jako ...",
context_searchwith: "Wyszukaj {{var0}} za pomocą ...",
context_videoactions: "Akcje wideo",
@ -1960,6 +1980,7 @@ module.exports = (_ => {
context_copy: "Copiar {{var0}}",
context_imageactions: "Ações de imagem",
context_lenssize: "Tamanho da lente",
context_zoomspeed: "Velocidade do zoom",
context_saveas: "Salvar {{var0}} como ...",
context_searchwith: "Pesquisar {{var0}} com ...",
context_videoactions: "Ações de vídeo",
@ -1975,6 +1996,7 @@ module.exports = (_ => {
context_copy: "Copiați {{var0}}",
context_imageactions: "Acțiuni de imagine",
context_lenssize: "Dimensiunea obiectivului",
context_zoomspeed: "Viteza de zoom",
context_saveas: "Salvați {{var0}} ca ...",
context_searchwith: "Căutați {{var0}} cu ...",
context_videoactions: "Acțiuni video",
@ -1990,6 +2012,7 @@ module.exports = (_ => {
context_copy: "Скопируйте {{var0}}",
context_imageactions: "Действия с изображением",
context_lenssize: "Размер линзы",
context_zoomspeed: "Скорость масштабирования",
context_saveas: "Сохранить {{var0}} как ...",
context_searchwith: "Искать {{var0}} с помощью ...",
context_videoactions: "Действия с видео",
@ -2005,6 +2028,7 @@ module.exports = (_ => {
context_copy: "Kopiera {{var0}}",
context_imageactions: "Bildåtgärder",
context_lenssize: "Linsstorlek",
context_zoomspeed: "Zoomhastighet",
context_saveas: "Spara {{var0}} som ...",
context_searchwith: "Sök {{var0}} med ...",
context_videoactions: "Videoåtgärder",
@ -2020,6 +2044,7 @@ module.exports = (_ => {
context_copy: "คัดลอก{{var0}}",
context_imageactions: "การทำงานของรูปภาพ",
context_lenssize: "ขนาดเลนส์",
context_zoomspeed: "ความเร็วในการซูม",
context_saveas: "บันทึก{{var0}}เป็น ...",
context_searchwith: "ค้นหา{{var0}} ้วย ...",
context_videoactions: "การกระทำของวิดีโอ",
@ -2035,6 +2060,7 @@ module.exports = (_ => {
context_copy: "{{var0}} kopyala",
context_imageactions: "Görüntü Eylemleri",
context_lenssize: "Lens Boyutu",
context_zoomspeed: "yakınlaştırma hızı",
context_saveas: "{{var0}} farklı kaydet ...",
context_searchwith: "{{var0}} şununla ara ...",
context_videoactions: "Video Eylemleri",
@ -2050,6 +2076,7 @@ module.exports = (_ => {
context_copy: "Копіювати {{var0}}",
context_imageactions: "Дії із зображеннями",
context_lenssize: "Розмір лінзи",
context_zoomspeed: "Швидкість масштабування",
context_saveas: "Збережіть {{var0}} як ...",
context_searchwith: "Шукати {{var0}} за допомогою ...",
context_videoactions: "Відео дії",
@ -2065,6 +2092,7 @@ module.exports = (_ => {
context_copy: "Sao chép {{var0}}",
context_imageactions: "Hành động hình ảnh",
context_lenssize: "Kích thước ống kính",
context_zoomspeed: "tốc độ thu phóng",
context_saveas: "Lưu {{var0}} dưới dạng ...",
context_searchwith: "Tìm kiếm {{var0}} bằng ...",
context_videoactions: "Hành động video",
@ -2080,6 +2108,7 @@ module.exports = (_ => {
context_copy: "复制 {{var0}}",
context_imageactions: "图像动作",
context_lenssize: "缩放尺寸",
context_zoomspeed: "变焦速度",
context_saveas: "将 {{var0}} 另存到...",
context_searchwith: "搜索 {{var0}} 使用...",
context_videoactions: "视频动作",
@ -2095,6 +2124,7 @@ module.exports = (_ => {
context_copy: "複製 {{var0}}",
context_imageactions: "圖像動作",
context_lenssize: "縮放尺寸",
context_zoomspeed: "变焦速度",
context_saveas: "將 {{var0}} 另存到...",
context_searchwith: "搜尋 {{var0}} 使用...",
context_videoactions: "視頻動作",
@ -2110,6 +2140,7 @@ module.exports = (_ => {
context_copy: "Copy {{var0}}",
context_imageactions: "Image Actions",
context_lenssize: "Lens Size",
context_zoomspeed: "Zoom speed",
context_saveas: "Save {{var0}} as ...",
context_searchwith: "Search {{var0}} with ...",
context_videoactions: "Video Actions",
@ -2124,4 +2155,4 @@ module.exports = (_ => {
}
};
})(window.BDFDB_Global.PluginUtils.buildPlugin(changeLog));
})();
})();