Contrib.social

Initial support for allowing interaction with the preview

Open on Drupal.org →
Created on 11 November 2024, about 1 month ago

Overview

We currently prevent interaction with the preview to allow dragging and dropping components to work smoothly. (Imagine trying to drag a range slider but accidentally picking up and dragging the component that renders it).

To achieve this, the overlay component sits on top of the iFrame and intercepts all mouse events and the iFrame itself has a tabindex of -1 to prevent navigating to elements inside it with the keyboard.

We want to allow users to use/interact with the page they are previewing.

Proposed resolution

As the first step, we need build a foundational UX and basic UI.

  1. Implement a UI state to manage "interactive" vs "editing" mode.
  2. Add a button on the top bar that allows toggling between the two states
  3. When in "interactive" mode hide the overlay elements
  4. When in "interactive" mode allow the iFrame to receive focus
  5. When in "interactive" mode hide both sidebars
  6. When in "interactive" alter or intercept all link clicks to ensure the user can't navigate away from the XB page.

Bonus/optional/tbd

  1. Add a keyboard shortcut, that when held, will enable "interactive" mode.
  2. Differentiate between "interactive" mode and the ability to hide the left/right side bars
  3. When in "interactive" mode, make the preview full screen and remove the canvas style UX to make it feel more like a "real" preview.

User interface changes

✨ Feature request
Status

Active

Version

0.0

Component

Page builder

Created by

🇬🇧United Kingdom jessebaker

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024