{"_id":"@aerni/alpine-statamic-responsive-images","_rev":"1-de15c998b888832aecef9156ebdb5f99","name":"@aerni/alpine-statamic-responsive-images","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aerni/alpine-statamic-responsive-images","description":"An Alpine implementation of the Statamic Responsive Images script.","version":"1.0.0","author":{"name":"Michael Aerni","email":"hello@michaelaerni.ch","url":"https://michaelaerni.ch"},"repository":{"type":"git","url":"git+https://github.com/aerni/alpine-statamic-responsive-images.git"},"license":"MIT","main":"dist/module.cjs.js","module":"dist/module.esm.js","devDependencies":{"brotli-size":"^4.0.0","esbuild":"^0.8.39","eslint":"^7.22.0","eslint-config-standard":"^16.0.2","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.3.1","eslint-plugin-standard":"^4.1.0","lint-staged":"^10.5.4"},"scripts":{"build":"node ./scripts/build.js","watch":"node ./scripts/build.js --watch","lint":"eslint .","lint-fix":"eslint . --fix"},"gitHead":"e341eadfeedcf2c99699b3190d8c4206277b31c7","bugs":{"url":"https://github.com/aerni/alpine-statamic-responsive-images/issues"},"homepage":"https://github.com/aerni/alpine-statamic-responsive-images#readme","_id":"@aerni/alpine-statamic-responsive-images@1.0.0","_nodeVersion":"20.1.0","_npmVersion":"9.6.4","dist":{"integrity":"sha512-NXGsNDkX1bUgKAIjqYAvyi+HEtBJZp8x5qfgP3cIzLTtk8YDiocV66hp5QlWjTXVGwdmnXCRs0XdH1bwAbZ0Hg==","shasum":"7e1440bb7421a0cec813d6af5100789e946452d5","tarball":"https://registry.npmjs.org/@aerni/alpine-statamic-responsive-images/-/alpine-statamic-responsive-images-1.0.0.tgz","fileCount":14,"unpackedSize":12807,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJlycMRmlsI1zB8H8zpYrcYpwAyAKR3uRFY8FJx+dt4wIhAMruh31Wr1yWlVoMikvPJ+aM7zrLqLAXHmu+Jm+MQroP"}]},"_npmUser":{"name":"aerni","email":"hello@michaelaerni.ch"},"directories":{},"maintainers":[{"name":"aerni","email":"hello@michaelaerni.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alpine-statamic-responsive-images_1.0.0_1686597062263_0.3388848646274709"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aerni/alpine-statamic-responsive-images","description":"An Alpine implementation of the Statamic Responsive Images script.","version":"1.0.1","author":{"name":"Michael Aerni","email":"hello@michaelaerni.ch","url":"https://michaelaerni.ch"},"repository":{"type":"git","url":"git+https://github.com/aerni/alpine-statamic-responsive-images.git"},"license":"MIT","main":"dist/module.cjs.js","module":"dist/module.esm.js","devDependencies":{"brotli-size":"^4.0.0","esbuild":"^0.8.39","eslint":"^7.22.0","eslint-config-standard":"^16.0.2","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.3.1","eslint-plugin-standard":"^4.1.0","lint-staged":"^10.5.4"},"scripts":{"build":"node ./scripts/build.js","watch":"node ./scripts/build.js --watch","lint":"eslint .","lint-fix":"eslint . --fix"},"gitHead":"85f1bcef6ce8a6a1584be1359fd3c61209332122","bugs":{"url":"https://github.com/aerni/alpine-statamic-responsive-images/issues"},"homepage":"https://github.com/aerni/alpine-statamic-responsive-images#readme","_id":"@aerni/alpine-statamic-responsive-images@1.0.1","_nodeVersion":"20.1.0","_npmVersion":"9.6.4","dist":{"integrity":"sha512-P1l40bYbsbcljCYr1/vDCb8lsAeHomS98FeIH1djhwHssXc46Z48xTC9yTc6957IJ4/NOCfOH2Y/wv5JXpTQdA==","shasum":"c09607ad2732c8963bbf46853382799535b87b9a","tarball":"https://registry.npmjs.org/@aerni/alpine-statamic-responsive-images/-/alpine-statamic-responsive-images-1.0.1.tgz","fileCount":14,"unpackedSize":12937,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICc00b2Nva3kqCU3PQx4t6l52N2di1blZd7IXEx2zDWcAiBv/pCDNsyhx1I83Ff27Hex/O3kogzG4Fv9Sfrci1eCTg=="}]},"_npmUser":{"name":"aerni","email":"hello@michaelaerni.ch"},"directories":{},"maintainers":[{"name":"aerni","email":"hello@michaelaerni.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alpine-statamic-responsive-images_1.0.1_1687895607562_0.7243860028710212"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-12T19:11:02.205Z","1.0.0":"2023-06-12T19:11:02.424Z","modified":"2023-06-27T19:53:27.895Z","1.0.1":"2023-06-27T19:53:27.769Z"},"maintainers":[{"name":"aerni","email":"hello@michaelaerni.ch"}],"description":"An Alpine implementation of the Statamic Responsive Images script.","homepage":"https://github.com/aerni/alpine-statamic-responsive-images#readme","repository":{"type":"git","url":"git+https://github.com/aerni/alpine-statamic-responsive-images.git"},"author":{"name":"Michael Aerni","email":"hello@michaelaerni.ch","url":"https://michaelaerni.ch"},"bugs":{"url":"https://github.com/aerni/alpine-statamic-responsive-images/issues"},"license":"MIT","readme":"![NPM Version](https://badgen.net/npm/v/@aerni/alpine-statamic-responsive-images?style=flat-square)\n![Build Size](https://badgen.net/badgesize/gzip/aerni/alpine-statamic-responsive-images/main/dist/cdn.min.js?style=flat-square)\n![License](https://img.shields.io/github/license/aerni/alpine-statamic-responsive-images?style=flat-square)\n\n# Alpine Statamic Responsive Images\nThis Alpine plugin replaces the inline script of the Statamic Responsive Images addon with a simple to use `x-statamic-responsive-images` directive. Using this directive resolves the issue of images not loading on subsequent page loads when using Statamic Responsive Images together with Laravel Livewire or pjax libraries like Swup, BarbaJS, and Turbolinks.\n\nYou can also use this plugin if you simply like the idea of using a nice Alpine directive instead of the inline script in the `responsiveImage.blade.php` view.\n\nThis addon has been tested with `v3.12.2` of Statamic Responsive Images.\n\n## Installation\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\nYou can include the CDN build of this plugin as a `<script>` tag, just make sure to include it before Alpine's core script.\n\n```html\n<!-- Alpine Resize -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@aerni/alpine-statamic-responsive-images@1.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\nYou can install this plugin via NPM for use inside your bundle:\n\n```\nnpm install @aerni/alpine-statamic-responsive-images\n```\n\nThen initialize it in your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport statamicResponsiveImages from '@aerni/alpine-statamic-responsive-images'\n\nAlpine.plugin(statamicResponsiveImages)\n```\n\n## Usage\nReplace the `data-statamic-responsive-images` attribute with `x-data` and `x-statamic-responsive-images`. Then delete the original inline script.\n\n```diff\n- @once\n-    <script>\n-        window.addEventListener('load', function () {\n-            window.responsiveResizeObserver = new ResizeObserver((entries) => {\n-                entries.forEach(entry => {\n-                    const imgWidth = entry.target.getBoundingClientRect().width;\n-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {\n-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';\n-                    });\n-                });\n-            });\n-\n-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {\n-                responsiveResizeObserver.onload = null;\n-                responsiveResizeObserver.observe(responsiveImage);\n-            });\n-        });\n-    </script>\n- @endonce\n\n<picture>\n    @foreach (($breakpoints ?? []) as $breakpoint)\n        @foreach($breakpoint->sources() ?? [] as $source)\n            @php\n                $srcSet = $source->getSrcset();\n            @endphp\n\n            @if($srcSet !== null)\n                <source\n                    @if($type = $source->getMimeType()) type=\"{{ $type }}\" @endif\n                    @if($media = $source->getMediaString()) media=\"{{ $media }}\" @endif\n                    srcset=\"{{ $srcSet }}\"\n                    @if($includePlaceholder ?? false) sizes=\"1px\" @endif\n                >\n            @endif\n        @endforeach\n    @endforeach\n\n    <img\n        {!! $attributeString ?? '' !!}\n        src=\"{{ $src }}\"\n        @unless (\\Illuminate\\Support\\Str::contains($attributeString, 'alt'))\n        alt=\"{{ $asset['alt'] ?? $asset['title'] }}\"\n        @endunless\n        @isset($width) width=\"{{ $width }}\" @endisset\n        @isset($height) height=\"{{ $height }}\" @endisset\n        @if($hasSources)\n-        data-statamic-responsive-images\n+        x-data\n+        x-statamic-responsive-images\n        @endif\n    >\n</picture>\n```\n","readmeFilename":"README.md"}