first attempt in disabling image coursel on redirect

This commit is contained in:
Alexander Bocken 2024-02-18 19:53:47 +01:00
parent e556e65707
commit 794817f69d
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
2 changed files with 12 additions and 2 deletions

View File

@ -21,7 +21,6 @@ onMount(() => {
}) })
const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
console.log(recipe)
</script> </script>
<style> <style>
.card_anchor{ .card_anchor{

View File

@ -2,15 +2,25 @@
export let src export let src
export let placeholder_src export let placeholder_src
let isloaded=false let isloaded=false
let isredirected=false
import { onMount } from "svelte"; import { onMount } from "svelte";
onMount(() => { onMount(() => {
const el = document.querySelector("img") const el = document.querySelector("img")
if(el.complete){ if(el.complete){
isloaded = true isloaded = true
} }
fetch(src, { method: 'HEAD' })
.then(response => {
if(response.redirected){
isredirected = true
}
})
}) })
function show_dialog_img(){ function show_dialog_img(){
if(isredirected){
return
}
if(document.querySelector("img").complete){ if(document.querySelector("img").complete){
document.querySelector("#img_carousel").showModal(); document.querySelector("#img_carousel").showModal();
} }
@ -160,11 +170,12 @@ dialog button{
.zoom-in{ .zoom-in{
cursor: zoom-in; cursor: zoom-in;
} }
</style> </style>
<section class="section"> <section class="section">
<figure class="image-container"> <figure class="image-container">
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class:zoom-in={isloaded} on:click={show_dialog_img}> <div class:zoom-in={isloaded && !isredirected} on:click={show_dialog_img}>
<div class=placeholder style="background-image:url({placeholder_src})" > <div class=placeholder style="background-image:url({placeholder_src})" >
<div class=placeholder_blur> <div class=placeholder_blur>
<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/> <img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/>