Online demo TODO
Currently just hosted on GitHub here.
First, you'll need an array of seats. Each seats needs to be an object with the following keys (all keys are optional):
id: (string) The label for the seat (e.g. A1). If this isn't provided, an empty space is added instead of a seat.booked: (boolean) If the seat has been booked already.unavailable: (boolean) If the seat is unavailable.
Next, initialise with the minimum required parameters:
const popcorn = new window.Popcorn({
elem: '#elem', // Selector for your element
width: 1000, // Width of the canvas
height: 500, // Height of the canvas
rowWidth: 12, // Maximum number of seats per row
maxSeats: 2, // Maximum number of seats to select
seatList: seats,
});popcorn.on(eventName, callbackFunction);The callback function will receive an event object with the detail property populated with relevant data.
There are 3 types of events available:
popcorn.selectseat: Triggered when selecting a seat. Event data contains seat label (id) & total count of selected seats (total).popcorn.deselectseat: Triggering when deselecting a seat. Event data contains seat label (id) & total count of selected seats (total).popcorn.maxseats: Triggered when clicking on a seat, but the maximum number of seats has already been reached. Event data contains total count of selected seats (total).
// Get an array of seat labels selected
popcorn.selected;
// Set the selected seats
popcorn.selected = ['A1', 'A2', 'A3'];
// Destroy this popcorn instance
popcorn.destroy();