Moved responsive image observer to head stack (#52)

config/rapidez/statamic.php

@@ -33,6 +33,10 @@
         ],
     ],
 
+    // This defines the multiplier for the responsive images and which size to show.
+    // Default is 1.5x the displayed size.
+    'responsive_image_multiplier' => 150,
+
     'runway' => [
         // Should we configure Runway? You'll get a products,
         // categories and brands / manufacturers resource.

resources/views/stack/head.blade.php

@@ -0,0 +1,11 @@
+<script>
+    window.responsiveResizeObserver = new ResizeObserver((entries) => {
+        entries.forEach(entry => {
+            const imgWidth = entry.target.getBoundingClientRect().width;
+            const multiplier = entry.target.dataset?.sharpen ? {{ config('rapidez-statamic.responsive_image_multiplier', 150) }} : 100;
+            entry.target.parentNode.querySelectorAll('source').forEach((source) => {
+                source.sizes = Math.ceil(imgWidth / window.innerWidth * multiplier) + 'vw';
+            });
+        });
+    });
+</script>

resources/views/vendor/responsive-images/responsiveImage.blade.php

@@ -0,0 +1,35 @@
+<picture>
+    @foreach (($breakpoints ?? []) as $breakpoint)
+        @foreach($breakpoint->sources() ?? [] as $source)
+            @php
+                $srcSet = $source->getSrcset();
+            @endphp
+
+            @if($srcSet !== null)
+                <source
+                    @if($type = $source->getMimeType()) type="{{ $type }}" @endif
+                    @if($media = $source->getMediaString()) media="{{ $media }}" @endif
+                    srcset="{{ $srcSet }}"
+                    @if($includePlaceholder ?? false) sizes="1px" @endif
+                >
+            @endif
+        @endforeach
+    @endforeach
+
+    <img
+        {!! $attributeString ?? '' !!}
+        src="{{ $src }}"
+        @unless (\Illuminate\Support\Str::contains($attributeString, 'alt'))
+        alt="{{ $asset['alt'] ?? $asset['title'] }}"
+        @endunless
+        @isset($width) width="{{ $width }}" @endisset
+        @isset($height) height="{{ $height }}" @endisset
+        onload="this.onload=null;window.responsiveResizeObserver.observe(this)"
+        @if($hasSources)
+        data-statamic-responsive-images
+        @endif
+        @if(isset($asset['has_focus']) && $asset['has_focus'] && isset($asset['focus_css']) && $asset['focus_css'])
+            style="object-position: {{ $asset['focus_css'] }}"
+        @endif
+    >
+</picture>

src/RapidezStatamicServiceProvider.php

@@ -47,7 +47,8 @@ public function boot()
             ->bootRunway()
             ->bootComposers()
             ->bootPublishables()
-            ->bootUtilities();
+            ->bootUtilities()
+            ->bootStack();
 
         Vue::register();
         Alternates::register();
@@ -83,6 +84,7 @@ public function bootRoutes() : self
     public function bootViews() : self
     {
         $this->loadViewsFrom(__DIR__.'/../resources/views', 'rapidez-statamic');
+        $this->loadViewsFrom(__DIR__.'/../resources/views/vendor/responsive-images', 'responsive-images');
 
         return $this;
     }
@@ -199,10 +201,17 @@ public function bootUtilities() : static
                         ->name('import-brands');
                 });
         });
-        
+
         return $this;
     }
-
+
+    public function bootStack() : static
+    {
+        View::startPush('head', view('rapidez-statamic::stack.head'));
+
+        return $this;
+    }
+
     public function currentSiteIsEnabled(): bool
     {
         return !config('statamic.sites.sites.' . Site::current()->handle() . '.attributes.disabled', false);