External elements

by Wahab896

HTML

<div data-js="filter" data-preview-image="https://img.icons8.com/cute-clipart/2x/google-logo.png">
    </div>

JavaScript

/* The main module for this is external. */
const elements = document.querySelectorAll('[data-js="filter"]');
if (elements.length) {
  import('https://elements.stoumann.dk/assets/js/css-filter.mjs').then(module => {
		debugger;
    const jsClass = module.default;
    elements.forEach(element => {
      new jsClass(element, element.dataset, presets);
    });
  })
}

const presets = [
  {
  "name": "watercolor",
  "description": "",
  "value": "url('#squiggly-1') brightness(1.3) invert(0.17) saturate(2.6) sepia(0.25)",
  "values": [
    {
      "brightness": 1.3,
      "invert": 0.17,
      "saturate": 2.6,
      "sepia": 0.25,
      "url": "url('#squiggly-1')"
    }
  ]
},
{
  "name": "faded-photo",
  "description": "",
  "value": "blur(0.2px) brightness(1.1) hue-rotate(5deg) opacity(0.9) saturate(1.3) sepia(0.4)",
  "values": [
    {
      "blur": 0.2,
      "brightness": 1.1,
      "hue-rotate": 5,
      "opacity": 0.9,
      "saturate": 1.3,
      "sepia": 0.40
    }
  ]
},
{
  "name": "old-horror",
  "description": "",
  "value": "url('#grain') grayscale(1) sepia(0.5) brightness(1.3) invert(0.8)",
  "values": [
    {
      "url": "url('#grain')",
      "grayscale": 1,
      "sepia": 0.5,
      "brightness": 1.3,
      "invert": 0.8
    }
  ]
},


];