49 lines
1.9 KiB
JavaScript
49 lines
1.9 KiB
JavaScript
import * as basicLightbox from 'basiclightbox'
|
|
|
|
class CustomImage extends HTMLElement {
|
|
async connectedCallback(){
|
|
const originalURL = new URL(this.getAttribute("src"), document.baseURI).href;
|
|
|
|
|
|
var graphql = JSON.stringify({
|
|
query: "query($url: String!) {imgproxy(url: $url)}",
|
|
variables: {
|
|
"url": originalURL
|
|
}
|
|
})
|
|
var requestOptions = {
|
|
method: 'POST',
|
|
body: graphql,
|
|
headers: { 'Content-Type': 'application/json' }
|
|
};
|
|
|
|
let imgproxy = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.imgproxy;
|
|
|
|
let image = document.createElement("img");
|
|
image.src = imgproxy;
|
|
if(this.getAttribute("alt") != null) image.setAttribute("alt", this.getAttribute("alt"));
|
|
if(this.getAttribute("title") != null) image.setAttribute("title", this.getAttribute("title"));
|
|
if(this.getAttribute("class") != null) image.setAttribute("class", this.getAttribute("class"));
|
|
if(this.getAttribute("style") != null) image.setAttribute("style", this.getAttribute("style"));
|
|
if(this.getAttribute("width") != null) image.setAttribute("width", this.getAttribute("width"));
|
|
if(this.getAttribute("height") != null) image.setAttribute("height", this.getAttribute("height"));
|
|
if(this.getAttribute("id") != null) image.setAttribute("id", this.getAttribute("id"));
|
|
image.setAttribute("loading", "lazy");
|
|
image.setAttribute("original-src", originalURL);
|
|
this.appendChild(image);
|
|
|
|
this.setAttribute("id", "");
|
|
|
|
if(!(this.getAttribute("data-noPreview") === "true")) {
|
|
image.onclick = () => {
|
|
const instance = basicLightbox.create(`
|
|
<img src="${originalURL}">
|
|
`);
|
|
instance.show();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("jl-img", CustomImage)
|