<div
  data-js="clippath"
	data-lbl-app-header="CSS &lt;code&gt;clip-path&lt;/code&gt; Editor"
  data-preview-image="https://assets.stoumann.dk/img/clippath-demo.jpg">
</div>

/*
The CSS for this is external
*/

/* The main module for this is external. The editor is work-in-progress and has some issues when resizing the browser. The arrow-keys works best, if you want to "fine-tune" a point. The final version will work with an API, see how the JSON is under "Preset Code". For this version, localStorage is used, when saving a preset.
NOTE: url()-presets can NOT be edited!
*/
const elements = document.querySelectorAll('[data-js="clippath"]');
if (elements.length) {
  import('https://assets.stoumann.dk/js/css-clippath.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": "triangle",
    "description": "",
    "value": "polygon(50% 0%, 0% 100%, 100% 100%)",
    "values": [
      {
        "coords":  [[50, 0], [0, 100], [100, 100]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "trapezoid",
    "description": "",
    "value": "polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)",
    "values": [
      {
        "coords":  [[20, 0], [80, 0], [100, 100], [0, 100]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "parallel",
    "description": "",
    "value": "polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)",
    "values": [
      {
        "coords":  [[25, 0], [100, 0], [75, 100], [0, 100]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "rhombus",
    "description": "",
    "value": "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
    "values": [
      {
        "coords":  [[50, 0], [100, 50], [50, 100], [0, 50]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "inset",
    "description": "",
    "value": "polygon(10% 10%,90% 10%,90% 90%,10% 90%)",
    "values": [
      {
        "coords": [[10,10],[90,10],[90,90],[10,90]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "pentagon",
    "description": "",
    "value": "polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)",
    "values": [
      {
        "coords":  [[50, 0], [100, 38], [82, 100], [18, 100], [0, 38]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "hexagon",
    "description": "",
    "value": "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
    "values": [
      {
        "coords": [[50, 0], [100, 25], [100, 75], [50, 100], [0, 75], [0, 25]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "heptagon",
    "description": "",
    "value": "polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%)",
    "values": [
      {
        "coords": [[50, 0], [90, 20], [100, 60], [75, 100], [25, 100], [0, 60],	[10, 20]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "octagon",
    "description": "",
    "value": "polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)",
    "values": [
      {
        "coords":[[30, 0],[70, 0], [100, 30], [100, 70], [70, 100], [30, 100], [0, 70], [0, 30]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "nonagon",
    "description": "",
    "value": "polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%)",
    "values": [
      {
        "coords": [[50, 0], [83, 12], [100, 43], [94, 78], [68, 100], [32, 100], [6, 78], [0, 43], [17, 12]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "decagon",
    "description": "",
    "value": "polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)",
    "values": [
      {
        "coords": [[50, 0], [80, 10], [100, 35], [100, 70], [80, 90], [50, 100], [20, 90], [0, 70], [0, 35], [20, 10]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "bevel",
    "description": "",
    "value": "polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)",
    "values": [
      {
        "coords": [[20, 0], [80, 0], [100, 20], [100, 80], [80, 100], [20, 100], [0, 80], [0, 20]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "rabbet",
    "description": "",
    "value": "polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)",
    "values": [
      {
        "coords":  [[0, 15], [15, 15], [15, 0], [85, 0], [85, 15], [100, 15], [100, 85], [85, 85], [85, 100], [15, 100], [15, 85], [0, 85]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "left arrow",
    "description": "",
    "value": "polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)",
    "values": [
      {
        "coords": [[40, 0], [40, 20], [100, 20], [100, 80], [40, 80], [40, 100], [0, 50]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "right arrow",
    "description": "",
    "value": "polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)",
    "values": [
      {
        "coords": [[0, 20], [60, 20], [60, 0], [100, 50], [60, 100], [60, 80], [0, 80]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "left point",
    "description": "",
    "value": "polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%)",
    "values": [
      {
        "coords":  [[25, 0], [100, 1], [100, 100], [25, 100], [0, 50]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "right point",
    "description": "",
    "value": "polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%)",
    "values": [
      {
        "coords": [[0, 0], [75, 0], [100, 50], [75, 100], [0, 100]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "left chev",
    "description": "",
    "value": "polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%)",
    "values": [
      {
        "coords": [[100, 0], [75, 50], [100, 100], [25, 100], [0, 50], [25, 0]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "right chev",
    "description": "",
    "value": "polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)",
    "values": [
      {
        "coords": [[75, 0], [100, 50], [75, 100], [0, 100], [25, 50], [0, 0]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "star",
    "description": "",
    "value": "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
    "values": [
      {
        "coords": [[50, 0], [61, 35], [98, 35], [68, 57], [79, 91], [50, 70], [21, 91], [32, 57], [2, 35], [39, 35]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "plus",
    "description": "",
    "value": "polygon(35% 0%,65% 0%,65% 35%,100% 35%,100% 60%,65% 60%,65% 100%,35% 100%,35% 60%,0% 60%,0% 35%,35% 35%)",
    "values": [
      {
        "coords": [[35,0],[65,0],[65,35],[100,35],[100,60],[65,60],[65,100],[35,100],[35,60],[0,60],[0,35],[35,35]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "minus",
    "description": "",
    "value": "polygon(100% 35%,100% 60%,0% 60%,0% 35%)",
    "values": [
      {
        "coords": [[100,35],[100,60],[0,60],[0,35]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "message",
    "description": "",
    "value": "polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)",
    "values": [
      {
        "coords": [[0, 0], [100, 0], [100, 75], [75, 75], [75, 100], [50, 75], [0, 75]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "close",
    "description": "",
    "value": "polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%)",
    "values": [
      {
        "coords": [[20, 0], [0, 20], [30, 50], [0, 80], [20, 100], [50, 70], [80, 100], [100, 80], [70, 50], [100, 20], [80, 0], [50, 30] ],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "frame",
    "description": "",
    "value": "polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%)",
    "values": [
      {
        "coords": [[0, 0], [0, 100], [25, 100], [25, 25], [75, 25], [75, 75], [25, 75], [25, 100], [100, 100], [100, 0]],
        "type": "polygon"
      }
    ]
  },
  {
    "name": "lightning",
    "description": "",
    "value": "polygon(25% 0%,70% 0%,40% 35%,95% 35%,20% 100%,40% 55%,0% 55%)",
    "values": [
      {
        "coords": [[25,0],[70,0],[40,35],[95,35],[20,100],[40,55],[0,55]],
        "type": "polygon"
      }
    ]
  },
  {"name":"blinds","deletable":false,"value":"polygon(0% 5%,100% 5%,100% 25%,0% 25%,0% 40%,100% 40%,100% 60%,0% 60%,0% 75%,100% 75%,100% 95%,0% 95%)","values":[{"coords":[[0,5],[100,5],[100,25],[0,25],[0,40],[100,40],[100,60],[0,60],[0,75],[100,75],[100,95],[0,95]],"type":"polygon"}]},
  {"name":"house","deletable":false,"value":"polygon(50% 0%,70% 15%,70% 2%,90% 2%,90% 30%,100% 40%,100% 100%,65% 100%,65% 65%,35% 65%,35% 100%,0% 100%,0% 40%)","values":[{"coords":[[50,0],[70,15],[70,2],[90,2],[90,30],[100,40],[100,100],[65,100],[65,65],[35,65],[35,100],[0,100],[0,40]],"type":"polygon"}]},
  {
    "name": "circle",
    "description": "",
    "value": "ellipse(45% 45% at 50% 50%)",
    "values": [
      {
        "coords": [[50, 50], [50, 5], [95, 50]],
        "type": "ellipse"
      }
    ]
  },
  {
    "name": "ellipse",
    "description": "",
    "value": "ellipse(25% 45% at 50% 50%)",
    "values": [
      {
        "coords": [[50, 50], [50, 5], [75, 50]],
        "type": "ellipse"
      }
    ]
  },
  {
    "name": "heart",
    "description": "",
    "value": "url(#heart)",
    "values": [
      {
        "data": "<path d='M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z'>",
        "height": 100,
        "type": "url",
        "width": 100
      }
    ]
  },
  {
    "name": "leave",
    "description": "",
    "value": "url(#leave)",
    "values": [
      {
        "data": "<path d='M0.989,0.131 c-0.108,-0.082,-0.275,-0.131,-0.446,-0.131 c-0.211,0,-0.384,0.074,-0.473,0.202 c-0.042,0.06,-0.065,0.132,-0.069,0.212 c-0.003,0.072,0.009,0.151,0.036,0.237 c0.093,-0.278,0.352,-0.495,0.651,-0.495 c0,0,-0.28,0.074,-0.455,0.301 c0,0,-0.002,0.003,-0.006,0.009 c-0.035,0.047,-0.066,0.101,-0.089,0.162 c-0.039,0.093,-0.075,0.22,-0.075,0.373 h0.125 c0,0,-0.019,-0.119,0.014,-0.257 c0.055,0.007,0.104,0.011,0.148,0.011 c0.115,0,0.197,-0.025,0.258,-0.078 c0.054,-0.048,0.084,-0.112,0.116,-0.18 c0.048,-0.104,0.103,-0.222,0.263,-0.313 c0.009,-0.005,0.015,-0.015,0.016,-0.025 s-0.004,-0.021,-0.012,-0.027'>",
        "height": 1,
        "type": "url",
        "width": 1
      }
    ]
  },
  {
    "name": "baloon",
    "description": "",
    "value": "url(#baloon)",
    "values": [
      {
        "data": "<path d='M0.417,0 v0 c0.23,0,0.417,0.17,0.417,0.379 s-0.187,0.379,-0.417,0.379 c-0.022,0,-0.044,-0.002,-0.065,-0.005 c-0.089,0.1,-0.193,0.118,-0.296,0.121 v-0.025 c0.056,-0.031,0.101,-0.086,0.101,-0.15 c0,-0.009,-0.001,-0.018,-0.002,-0.026 c-0.094,-0.07,-0.154,-0.176,-0.154,-0.295 c0,-0.209,0.187,-0.379,0.417,-0.379 M0.865,0.85 c0,0.055,0.032,0.102,0.08,0.129 v0.021 c-0.09,-0.002,-0.172,-0.018,-0.249,-0.104 c-0.018,0.003,-0.037,0.004,-0.056,0.004 c-0.083,0,-0.159,-0.025,-0.22,-0.067 c0.126,0,0.244,-0.046,0.334,-0.128 c0.045,-0.041,0.081,-0.09,0.106,-0.144 c0.027,-0.057,0.04,-0.119,0.04,-0.182 c0,-0.01,0,-0.02,-0.001,-0.03 c0.063,0.059,0.102,0.138,0.102,0.226 c0,0.102,-0.052,0.193,-0.134,0.253 c-0.001,0.007,-0.002,0.015,-0.002,0.022'>",
        "height": 1,
        "type": "url",
        "width": 1
      }
    ]
  },
  {
    "name": "marker",
    "description": "",
    "value": "url(#marker)",
    "values": [
      {
        "data": "<path d='M0,0.8v9c0,0.4,0.3,1,0.8,1.3l6.5,4.4c0.4,0.3,1.1,0.3,1.5,0l6.5-4.4c0.4-0.3,0.8-0.9,0.8-1.3v-9C16,0.3,15.5,0,14.9,0H1.1 C0.5,0,0,0.3,0,0.8L0,0.8z'>",
        "height": 16,
        "type": "url",
        "width": 16
      }
    ]
  },
  {
    "name": "checkmark",
    "description": "",
    "value": "url(#checkmark)",
    "values": [
      {
        "data": "<path d='M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z'>",
        "height": 46,
        "type": "url",
        "width": 46
      }
    ]
  },
  {
    "name": "cog",
    "description": "",
    "value": "url(#cog)",
    "values": [
      {
        "data": "<path d='M43.454,18.443h-2.437c-0.453-1.766-1.16-3.42-2.082-4.933l1.752-1.756c0.473-0.473,0.733-1.104,0.733-1.774 c0-0.669-0.262-1.301-0.733-1.773l-2.92-2.917c-0.947-0.948-2.602-0.947-3.545-0.001l-1.826,1.815 C30.9,6.232,29.296,5.56,27.529,5.128V2.52c0-1.383-1.105-2.52-2.488-2.52h-4.128c-1.383,0-2.471,1.137-2.471,2.52v2.607 c-1.766,0.431-3.38,1.104-4.878,1.977l-1.825-1.815c-0.946-0.948-2.602-0.947-3.551-0.001L5.27,8.205 C4.802,8.672,4.535,9.318,4.535,9.978c0,0.669,0.259,1.299,0.733,1.772l1.752,1.76c-0.921,1.513-1.629,3.167-2.081,4.933H2.501 C1.117,18.443,0,19.555,0,20.935v4.125c0,1.384,1.117,2.471,2.501,2.471h2.438c0.452,1.766,1.159,3.43,2.079,4.943l-1.752,1.763 c-0.474,0.473-0.734,1.106-0.734,1.776s0.261,1.303,0.734,1.776l2.92,2.919c0.474,0.473,1.103,0.733,1.772,0.733 s1.299-0.261,1.773-0.733l1.833-1.816c1.498,0.873,3.112,1.545,4.878,1.978v2.604c0,1.383,1.088,2.498,2.471,2.498h4.128 c1.383,0,2.488-1.115,2.488-2.498v-2.605c1.767-0.432,3.371-1.104,4.869-1.977l1.817,1.812c0.474,0.475,1.104,0.735,1.775,0.735 c0.67,0,1.301-0.261,1.774-0.733l2.92-2.917c0.473-0.472,0.732-1.103,0.734-1.772c0-0.67-0.262-1.299-0.734-1.773l-1.75-1.77 c0.92-1.514,1.627-3.179,2.08-4.943h2.438c1.383,0,2.52-1.087,2.52-2.471v-4.125C45.973,19.555,44.837,18.443,43.454,18.443z M22.976,30.85c-4.378,0-7.928-3.517-7.928-7.852c0-4.338,3.55-7.85,7.928-7.85c4.379,0,7.931,3.512,7.931,7.85 C30.906,27.334,27.355,30.85,22.976,30.85z'>",
        "height": 46,
        "type": "url",
        "width": 46
      }
    ]
  },
  {
    "name": "user",
    "description": "",
    "value": "url(#user)",
    "values": [
      {
        "data": "<path d='M22.766,0.001C10.194,0.001,0,10.193,0,22.766s10.193,22.765,22.766,22.765c12.574,0,22.766-10.192,22.766-22.765 S35.34,0.001,22.766,0.001z M22.766,6.808c4.16,0,7.531,3.372,7.531,7.53c0,4.159-3.371,7.53-7.531,7.53 c-4.158,0-7.529-3.371-7.529-7.53C15.237,10.18,18.608,6.808,22.766,6.808z M22.761,39.579c-4.149,0-7.949-1.511-10.88-4.012 c-0.714-0.609-1.126-1.502-1.126-2.439c0-4.217,3.413-7.592,7.631-7.592h8.762c4.219,0,7.619,3.375,7.619,7.592 c0,0.938-0.41,1.829-1.125,2.438C30.712,38.068,26.911,39.579,22.761,39.579z'>",
        "height": 46,
        "type": "url",
        "width": 46
      }
    ]
  }
];