Graffiti Modal

A styling modal for user input within Graffiti implementations. Used for login popups and choosing servers. For example, see the Solid session manager

Usage

Install the package with:

npm install @graffiti-garden/modal

Then use it in your application as follows:

import { GraffitiModal } from "@graffiti-garden/modal";

const modal = new GraffitiModal({
  useTemplateHTML: import("./templates.html").then((module) => module.default),
  onClose() {
    console.log("Modal closed");
  },
});

button.addEventListener("click", () => {
  modal.displayTemplate("my-template"); // The id of a template in the HTML
  modal.open();
});

See the demo for a full example.

Development

Clone the repository, then install and build the package as follows:

npm install
npm run build

Then you can run the demo by running:

npx http-server

and navigating to localhost:8080/demo.

Image Compression

To make the .jpg image smaller, use:

cwebp -q QUALITY -m 6 -mt assets/graffiti.jpg -o src/graffiti.webp

Where quality is a number between 0 (horrible) and 100 (perfect).