Repeater with Context Menu

Page Elements

First we added a repeater to our page. Then we attached the following elements to the repeater:

• Text elements: For displaying text in each item

• Quick Actions button: Clicking it opens the context menu

• Text input: For editing the title of the repeater item

• Icon button: For applying the edited text to the title

The context menu is not part of each repeater item, but rather a single container box that is dynamically positioned under the specific Quick Actions button that was clicked. The menu includes the following elements:

• Edit Item button: Clicking it allows site visitors to edit the repeater item’s title

• Delete Item button: Clicking it deletes the current item from the repeater

Code

Our code does the following:

1. When the page loads, show a preloader by switching to the ‘loader’ state of a multi-state box.

2. Load data into the repeater using the getDataFromBackend function and switch to the ‘withData’ state of a multi-state box.

3. If a Quick Actions button is clicked, calculate the position of the current repeater item and display the context menu under the Quick Actions button using the wix-animations API.

4. If a site visitor clicks the Edit Item button, show the text input element, allowing the site visitor to edit the title. Hide the input after the visitor clicks the icon button for applying the edit. Hide the context menu.

5. If a site visitor clicks the Delete Item button, delete the item. Hide the context menu.