<div
  data-js="responsive"
  data-lbl-app-header="Responsive Image Configurator">
</div>

/* 
This tool can be used to render markup for cases with complex, responsive images.

Try the presets for examples.

Demos:
https://codepen.io/stoumann/pen/KKawZPz
https://codepen.io/stoumann/pen/bGgNaNN

*/

const elements = document.querySelectorAll('[data-js="responsive"]');
		if (elements.length) {
			import('https://elements.stoumann.dk/assets/js/app-responsive.mjs')
			.then(module => {
				const jsClass = module.default;
				elements.forEach(element => {
					new jsClass(element, element.dataset, presets);
				});
			})
		}
		/* Default presets for localhost demo / or when REST API fails */
		const presets = [
		{
      "name": "Responsive 100vw",
      "description": "Responsive with server-side scaling, no `sizes` defined.",
      "value": "",
      "values": [
        {
          "alt": "alt text",
          "aspectHeight": 0,
          "aspectWidth": 0,
          "crossorigin": "anonymous",
          "decoding": "async",
          "images": [
            {
              "breakpoint": 0,
              "colorscheme": "",
              "src": "[IMAGE-1].jpg"
            }
          ],
          "loading": "lazy",
          "sizes": [
            {
              "breakpoint": 0,
              "size": 100,
              "unit": "vw"
            }
          ],
          "path": "https://your.cdn/img/",
          "scaler": [
            250,
            450,
            650,
            850,
            1050,
            1250,
            1450,
            1650,
            1850
          ]
        }
      ]
    },
    {
      "name": "Responsive 100vw 16:9",
      "description": "Responsive with server-side scaling, no `sizes` defined, aspect-ratio 16:9",
      "value": "",
      "values": [
        {
          "alt": "alt text",
          "aspectHeight": 9,
          "aspectWidth": 16,
          "crossorigin": "anonymous",
          "decoding": "async",
          "images": [
            {
              "breakpoint": 0,
              "colorscheme": "",
              "src": "[IMAGE-1].jpg"
            }
          ],
          "loading": "lazy",
          "sizes": [
            {
              "breakpoint": 0,
              "size": 100,
              "unit": "vw"
            }
          ],
          "path": "../assets/img/",
          "scaler": [
            250,
            450,
            650,
            850,
            1050,
            1250,
            1450,
            1650,
            1850
          ]
        }
      ]
    },
    {
      "name": "Responsive 100vw 50vw 33vw",
      "description": "Responsive with server-side scaling, 3 `sizes` defined. On smaller devices, the image will be 100vw, on tablets 50vw, and on desktops 33vw",
      "value": "",
      "values": [
        {
          "alt": "alt text",
          "aspectHeight": 0,
          "aspectWidth": 0,
          "crossorigin": "anonymous",
          "decoding": "async",
          "images": [
            {
              "breakpoint": 0,
              "colorscheme": "",
              "src": "[IMAGE-1].jpg"
            }
          ],
          "loading": "lazy",
          "sizes": [
            {
              "breakpoint": 0,
              "size": 100,
              "unit": "vw"
            },
            {
              "breakpoint": 768,
              "size": 50,
              "unit": "vw"
            },
            {
              "breakpoint": 1200,
              "size": 33,
              "unit": "vw"
            }
          ],
          "path": "../assets/img/",
          "scaler": [
            250,
            450,
            650,
            850,
            1050,
            1250,
            1450,
            1650,
            1850
          ]
        }
      ]
    },
    {
      "name": "Art Direction",
      "description": "Changes to another image at 768px.",
      "value": "",
      "values": [
        {
          "alt": "alt text",
          "aspectHeight": 0,
          "aspectWidth": 0,
          "crossorigin": "anonymous",
          "decoding": "async",
          "images": [
            {
              "breakpoint": 0,
              "colorscheme": "",
              "src": "[IMAGE-1].jpg"
            },
            {
              "breakpoint": 768,
              "colorscheme": "",
              "src": "[IMAGE-2].jpg"
            }
          ],
          "loading": "lazy",
          "sizes": [
            {
              "breakpoint": 0,
              "size": 100,
              "unit": "vw"
            },
            {
              "breakpoint": 768,
              "size": 50,
              "unit": "vw"
            },
            {
              "breakpoint": 1200,
              "size": 33,
              "unit": "vw"
            }
          ],
          "path": "../assets/img/",
          "scaler": [
            250,
            450,
            650,
            850,
            1050,
            1250,
            1450,
            1650,
            1850
          ]
        }
      ]
    },
    {
      "name": "Dark Mode",
      "description": "Changes to another image when user prefers `dark mode`.",
      "value": "",
      "values": [
        {
          "alt": "alt text",
          "aspectHeight": 0,
          "aspectWidth": 0,
          "crossorigin": "anonymous",
          "decoding": "async",
          "images": [
            {
              "breakpoint": 0,
              "colorscheme": "light",
              "src": "light.jpg"
            },
            {
              "breakpoint": 0,
              "colorscheme": "dark",
              "src": "dark.jpg"
            }
          ],
          "loading": "lazy",
          "sizes": [
            {
              "breakpoint": 0,
              "size": 100,
              "unit": "vw"
            },
            {
              "breakpoint": 768,
              "size": 50,
              "unit": "vw"
            },
            {
              "breakpoint": 1200,
              "size": 33,
              "unit": "vw"
            }
          ],
          "path": "../assets/img/",
          "scaler": [
            250,
            450,
            650,
            850,
            1050,
            1250,
            1450,
            1650,
            1850
          ]
        }
      ]
    },
    {
      "name": "Art Direction with Dark Mode",
      "description": "This preset use art direction to change the image at 768px. If the user has `dark mode` enabled, another set of images will be used.",
      "value": "",
      "values": [
        {
          "alt": "Art direction with Dark Mode",
          "aspectHeight": 9,
          "aspectWidth": 16,
          "crossorigin": "anonymous",
          "decoding": "async",
          "images": [
            {
              "breakpoint": 0,
              "colorscheme": "light",
              "src": "light-small.jpg"
            },
            {
              "breakpoint": 768,
              "colorscheme": "light",
              "src": "light-large.jpg"
            },
            {
              "breakpoint": 0,
              "colorscheme": "dark",
              "src": "dark-small.jpg"
            },
            {
              "breakpoint": 768,
              "colorscheme": "dark",
              "src": "dark-large.jpg"
            }
          ],
          "loading": "lazy",
          "sizes": [
            {
              "breakpoint": 0,
              "size": 100,
              "unit": "vw"
            },
            {
              "breakpoint": 768,
              "size": 50,
              "unit": "vw"
            },
            {
              "breakpoint": 1200,
              "size": 33,
              "unit": "vw"
            }
          ],
          "path": "../assets/img/",
          "scaler": [
            250,
            450,
            650,
            850,
            1050,
            1250,
            1450,
            1650,
            1850
          ]
        }
      ]
    }
		]