Now make a script.js file and paste the given below code.
window.onload = () => {
window.onresize();
initDraggable();
update();
setTimeout(()=>{
toast("Like and Comment ❤");
},500);
}
window.onresize = () => {
let p = qs(".clip-area");
let cb = p.getBoundingClientRect();
p.style.setProperty("--w",cb.width+"px");
p.style.setProperty("--h",cb.height+"px");
}
function update(){
let ca = qs(".clip-area");
let points = [...qsa("[draggable]")];
let path = "polygon(";
points.forEach((t,i) => {
const p = t.parentElement ;
const cb = t.getBoundingClientRect();
let {x,y} = getXYOffset(t,p);
path += (i==0?"":",");
path += `${Math.round(x)}% ${Math.round(y)}%`;
});
path+=")";
//console.log(path)
ca.style.setProperty("--cp",path);
qs(".clip-path").innerText = path;
}
function initDraggable(){
let de = [...qsa("[draggable]")];
de.forEach(makeDraggable);
}
function makeDraggable(e){
addEventHooks(e)
e.setAttribute("tabindex","1");
e.ps = ps.bind(e);
e.pm = pm.bind(e);
e.pe = pe.bind(e);
e.on("touchstart",e.ps);
e.on("mousedown",e.ps);
e.on("dblclick",clone);
}
function clamp(v,min,max){
return Math.max(min,Math.min(v,max));
}
function getXYOffset(t,p){
let tcb = t.getBoundingClientRect();
let pcb = p.getBoundingClientRect();
x = ((tcb.x - pcb.x + tcb.width/2)/pcb.width);
y = ((tcb.y - pcb.y + tcb.height/2)/pcb.height);
x = clamp(x,0,1)*100;
y = clamp(y,0,1)*100;
return { x , y };
}
function getOffset(e,p){
let cb = p.getBoundingClientRect();
let x = e.pageX || e.touches[0].pageX;
let y = e.pageY || e.touches[0].pageY;
x = ((x-cb.x)/cb.width);
y = ((y-cb.y)/cb.height);
x = clamp(x,0,1);
y = clamp(y,0,1);
return { x , y };
}
function clone(e){
let t = e.target;
let np = ce("div");
let p = t.parentElement;
let x = t.style.getPropertyValue("--x");
let y = t.style.getPropertyValue("--y");
np.setAttribute("draggable","true");
np.style.setProperty("--x",x)
np.style.setProperty("--y",y)
makeDraggable(np);
p.insertBefore(np,t);
vibrate(50);
}
function vibrate(t){
try{
navigator.vibrate(t);
} catch(err){
// do nothing
}
}
function ps(e){
const t = e.target;
const p = t.parentElement;
addEventHooks(p)
p.on("touchmove",t.pm);
p.on("mousemove",t.pm);
p.on("touchend",t.pe);
p.on("mouseup",t.pe);
p.on("touchleave",t.pe);
p.on("mouseleave",t.pe);
[...qsa('[data-active="true"]')].forEach(a=>{
a.dataset.active = "false";
})
t.dataset.active = "true";
}
function pm(e){
const t = e.target;
const p = t.parentElement ;
const cb = p.getBoundingClientRect();
let {x,y} = getOffset(e,p);
t.style.setProperty("--x",x);
t.style.setProperty("--y",y);
update();
}
function pe(e){
const t = e.target;
const p = t.parentElement;
p.off("touchmove",t.pm);
p.off("mousemove",t.pm);
p.off("touchend",t.pe);
p.off("mouseup",t.pe);
p.off("touchleave",t.pe);
p.off("mouseleave",t.pe);
}
function copy(e){
let path = "clip-path: " + qs(".clip-path").innerText + " ;";
copyToClipboard(path);
toast("Copied to Clioboard");
vibrate(50);
}
function toast(msg){
let t = ce("div");
t.classList.add("toast");
t.innerText = msg;
qs("body").append(t);
setTimeout(()=>{t.remove()},5000);
}
function remove(){
if(qsa("[draggable]").length < 4) return;
let a = qs("[data-active='true']");
if(a){
let ns = a.nextElementSibling;
if(!ns) ns = qs("[draggable]");
let x = ns.style.getPropertyValue("--x");
let y = ns.style.getPropertyValue("--y");
qs(".clip-area").dataset.animate="true";
ns.dataset.active = "true";
a.style.setProperty("--x",x)
a.style.setProperty("--y",y)
update();
setTimeout(()=>{
a.remove();
qs(".clip-area").dataset.animate="false";
update();
},200);
vibrate(60);
}
}
