gallery.mjs/gallery.mjs.min

"use strict";export default class gallery{#wrap;#input;#gallery;#identifiers;get identifiers(){return this.#identifiers}#update;prefixes={wrap:"",image:"image_"};#dragged;#events=new Map([["dragstart",(event)=>{this.#dragged=event.target.getAttribute("id");event.dataTransfer.effectAllowed="move"}],["dragover",(event)=>{event.preventDefault();event.dataTransfer.dropEffect="move"}],["dragenter",(event)=>{const wrap=event.target.closest("div.image");if(wrap?.getAttribute("id")!==this.#dragged){wrap?.classList.add("target")}}],["dragleave",(event)=>{const wrap=event.target.closest("div.image");if(wrap instanceof HTMLElement){wrap.classList.remove("target")}}],["dragend",(event)=>{const wrap=event.target.closest("div.image");if(wrap instanceof HTMLElement){wrap.classList.remove("target")}}],["drop",(event)=>{const wrap=event.target.closest("div.image");if(wrap instanceof HTMLElement&&wrap.getAttribute("id")&&wrap.getAttribute("id")!==this.#dragged){this.#gallery.querySelector("div.image.target")?.classList.remove("target");const from=this.#identifiers.indexOf(this.#dragged);const to=this.#identifiers.indexOf(wrap.getAttribute("id"));[this.#identifiers[from],this.#identifiers[to]]=[this.#identifiers[to],this.#identifiers[from]]}}]]);constructor(wrap,input,gallery,inject=false){if(wrap instanceof HTMLElement){this.#wrap=wrap;if(inject){this.#wrap.gallery=this}}if(input instanceof HTMLInputElement){this.#input=input}if(gallery instanceof HTMLElement){this.#gallery=gallery}this.proxy();this.#identifiers.push(...[...this.#gallery.querySelectorAll("div.image")].map((image)=>image.getAttribute("id")))}proxy(){this.#identifiers=new Proxy([],{set:(target,property,value)=>{this.#update??=Promise.resolve().then(()=>{this.#update=null;document.getElementById("order").textContent="Order: "+target.join(", ");target.forEach((identifier)=>{this.#gallery.appendChild(document.getElementById(identifier))})});return Reflect.set(target,property,value)}})}ascending(){this.#identifiers.sort((a,b)=>a-b)}start(){for(const[event,handler]of this.#events){this.#gallery.addEventListener(event,handler)}}stop(){for(const[event,handler]of this.#events){this.#gallery.removeEventListener(event,handler)}}import(files){this.stop();this.proxy();this.#gallery.innerHTML="";for(let i=0;i<files.length;i+=1){const wrap=document.createElement("div");wrap.classList.add("image");wrap.setAttribute("id",this.prefixes.wrap+i);wrap.setAttribute("draggable",true);const button=document.createElement("button");button.classList.add("delete");button.addEventListener("click",(event)=>{const index=this.#identifiers.indexOf(this.prefixes.wrap+i);if(index>-1){this.#identifiers.splice(index,1);wrap.remove()}});const trash=document.createElement("i");trash.classList.add("icon","trash");const image=document.createElement("img");image.setAttribute("id",this.prefixes.image+i);image.setAttribute("draggable",false);image.setAttribute("src",URL.createObjectURL(files[i]));button.appendChild(trash);wrap.appendChild(image);wrap.appendChild(button);this.#gallery.appendChild(wrap);this.#identifiers.push(wrap.getAttribute("id"))}this.start()}}