|
| 1 | +import { setCustomVariant, setTool } from "../state/actions/tool.mjs"; |
| 2 | +import { VariantButton } from "./variant.mjs"; |
| 3 | + |
| 4 | +import { |
| 5 | + createSvgDataUri, |
| 6 | + serializeSvg, |
| 7 | + deserializeSvgFromDataURI, |
| 8 | + normalizeSvgSize, |
| 9 | +} from "../svg-utils.mjs"; |
| 10 | + |
| 11 | +export class VariantStampButton extends VariantButton { |
| 12 | + constructor(options) { |
| 13 | + super(options); |
| 14 | + |
| 15 | + const { variant, tool, state } = options; |
| 16 | + this.#variant = variant; |
| 17 | + this.#tool = tool; |
| 18 | + this.#state = state; |
| 19 | + } |
| 20 | + |
| 21 | + #variant = null; |
| 22 | + #tool = null; |
| 23 | + #state = null; |
| 24 | + |
| 25 | + connectedCallback() { |
| 26 | + super.connectedCallback(); |
| 27 | + } |
| 28 | + |
| 29 | + click = () => { |
| 30 | + if (this.#variant.value) { |
| 31 | + setTool(this.#tool, { state: this.#state, variant: this.#variant }); |
| 32 | + return; |
| 33 | + } |
| 34 | + |
| 35 | + const fileInput = document.createElement("input"); |
| 36 | + fileInput.type = "file"; |
| 37 | + fileInput.accept = "image/svg+xml"; |
| 38 | + fileInput.style.display = "none"; |
| 39 | + |
| 40 | + const handleFileUpload = (event) => { |
| 41 | + this.#readUploadedSVG(event, fileInput); |
| 42 | + }; |
| 43 | + |
| 44 | + fileInput.addEventListener("stamp-custom-slot-success", (event) => { |
| 45 | + fileInput.removeEventListener("change", handleFileUpload); |
| 46 | + fileInput.remove(); |
| 47 | + |
| 48 | + const updatedVariant = { |
| 49 | + ...this.#variant, |
| 50 | + iconUrl: event.detail.iconDataUri, |
| 51 | + value: event.detail.dataUri, |
| 52 | + }; |
| 53 | + setTool(this.#tool, { state: this.#state, variant: updatedVariant }); |
| 54 | + setCustomVariant(this.#tool, updatedVariant, { state: this.#state }); |
| 55 | + this.#variant = updatedVariant; |
| 56 | + super.uiButton.setAttribute("icon-url", event.detail.iconDataUri); |
| 57 | + }); |
| 58 | + fileInput.addEventListener("stamp-custom-slot-failure", () => { |
| 59 | + alert("Something went wrong with uploading the image!"); |
| 60 | + }); |
| 61 | + fileInput.addEventListener("change", handleFileUpload); |
| 62 | + |
| 63 | + fileInput.click(); |
| 64 | + }; |
| 65 | + |
| 66 | + #readUploadedSVG = (event, fileInput) => { |
| 67 | + const file = event.target.files[0]; |
| 68 | + const failureEvent = new CustomEvent("stamp-custom-slot-failure"); |
| 69 | + |
| 70 | + if (!file) { |
| 71 | + fileInput.dispatchEvent(failureEvent); |
| 72 | + throw new Error("No file selected!"); |
| 73 | + } |
| 74 | + |
| 75 | + const fileReader = new FileReader(); |
| 76 | + fileReader.addEventListener("load", (fileEvent) => { |
| 77 | + const parsedSvgElement = deserializeSvgFromDataURI( |
| 78 | + fileEvent.srcElement.result, |
| 79 | + ); |
| 80 | + const iconSvgDocument = parsedSvgElement.documentElement.cloneNode(true); |
| 81 | + const stampSvgDocument = parsedSvgElement.documentElement.cloneNode(true); |
| 82 | + const iconSvgElement = normalizeSvgSize(iconSvgDocument); |
| 83 | + const stampSvgElement = normalizeSvgSize(stampSvgDocument, 50); |
| 84 | + |
| 85 | + fileInput.dispatchEvent( |
| 86 | + new CustomEvent("stamp-custom-slot-success", { |
| 87 | + detail: { |
| 88 | + iconDataUri: createSvgDataUri(serializeSvg(iconSvgElement)), |
| 89 | + dataUri: createSvgDataUri(serializeSvg(stampSvgElement)), |
| 90 | + }, |
| 91 | + }), |
| 92 | + ); |
| 93 | + }); |
| 94 | + fileReader.addEventListener("error", () => { |
| 95 | + fileInput.dispatchEvent(failureEvent); |
| 96 | + }); |
| 97 | + |
| 98 | + fileReader.readAsDataURL(file); |
| 99 | + }; |
| 100 | + |
| 101 | + static compare(id, value) { |
| 102 | + return VariantButton.compare(id, value); |
| 103 | + } |
| 104 | +} |
0 commit comments