Focused Views

CustardUI provides a powerful way to share specific content from a page. "Share Mode" allows you to select exactly what you want to highlight, and "Focus View" (or Presentation View) displays that content to the recipient, filtering out distractions.

Share Mode

Types of Sharing

There are three modes of sharing:

  • Show: Generates a custom view that shows only the specific elements you selected. All other content is hidden.
  • Hide: Generates a view that hides the selected elements. All others are shown.
  • Highlight: Generates a view that keeps the full page but visually outlines the selected elements in red with an arrow indicator. This is ideal for pointing out specific sections without losing the surrounding context.

To toggle between modes, use the floating toolbar at the bottom of the page in share mode.

Toggling Share Mode

There are two ways to toggle Share Mode:

Settings Toggle

To access share mode, you can open the settings dialog and click the "Share" tab, and click 'select elements to share'.

You can trigger the Share Mode UI in headless mode directly via URL links. This is useful if you do not wish to use any other features of CustardUI, such as the settings dialog, which you can disable.

  • Two modes are supported, through the hash and query parameters.
  • Note that clicking on the query parameter link will refresh the page. However, using the query allows you to append additional hash parameters to the URL.
    • E.g. https://yoursite.com/guide.html?cv-share-highlight#selecting-elements
Trigger (Hash) Trigger (Query) Mode Activated
#cv-share ?cv-share Opens Share Mode (default selection mode)
#cv-share-show ?cv-share-show Opens Share Mode in Show mode
#cv-share-hide ?cv-share-hide Opens Share Mode in Hide mode
#cv-share-highlight ?cv-share-highlight Opens Share Mode in Highlight mode

Example: To create links that trigger share mode:

Highlight Mode (Hash) ([Highlight Mode (Hash)](#cv-share-highlight))

Show Mode (Hash) ([Show Mode (Hash)](#cv-share-show))

Hide Mode (Hash) ([Hide Mode (Hash)](#cv-share-hide))

Highlight Mode (Query + Hash) ([Highlight Mode (Query + Hash)](./share.html?cv-share-highlight#selecting-elements))

Selecting Elements

Hover over any part of the page to see it highlighted.

  • Click to Select: Click any highlighted element to select it. A border will be shown around it.
  • Click to Deselect: Click a selected element again to remove it.
  • Multiple Selection: You can select as many different sections of the page as you need.

If you select a large container, all of its children are automatically selected. You cannot select a child element separately if its parent is already selected.

You can also drag in share mode to select multiple elements at one time.

Helper Tooltip:

  • When hovering over an element, a small helper tooltip appears. Click the "↰" (Up Arrow) button in this tooltip to quickly select the parent container instead of the specific element.
  • The tooltip also has a "✓" (Tick) button to select the current element without clicking it directly.

Once you have selected one or more items, use the floating bar at the bottom:

  • Preview: Click "Preview" to open the generated link in a new tab immediately. This lets you verify exactly what the recipient will see.
  • Generate Link: Click "Generate Link" to copy the unique link to your clipboard.

While the Share Mode UI generates robust, encoded links automatically, you may sometimes want to manually create a readable link for documentation or communication.

CustardUI supports a human-readable format using HTML element IDs:

Parameter format Description
cv-show id1,id2 Shows only the specified elements. All others are hidden.
cv-hide id1,id2 Hides the specified elements. All others are shown.
cv-highlight id1,id2 Highlights the specified elements. Full page remains visible.

Example: To show only the #setup and #config sections: https://yoursite.com/guide.html?cv-show=setup,config

  • For example, one such link could be this: [this](./share.html?cv-highlight=example-share)

Note:

  • IDs are case-sensitive.
  • Use , (comma), or use + (plus sign) to separate multiple IDs.
  • Note that , will be URL-encoded to %2C when used in a URL, after visiting the page.
  • If an ID contains special characters, it should be URL-encoded, but standard alphanumeric IDs work directly.

Exiting Share Mode

To leave Share Mode, click the "Exit" button on the floating bar.

You can also press the Esc key to exit Share Mode.

Focus Mode

When someone opens the link you generated, they enter Focus View. The behavior in each mode is as follows:

  • Show Mode: Only the elements you selected (and their necessary context) are shown. Irrelevant content is hidden.
  • Hide Mode: The selected elements are hidden, while the rest of the page remains visible.
  • Highlight Mode: The selected elements are highlighted in red with an arrow indicator, while the rest of the page remains visible.

For show or hide mode, where content has been hidden, you will see markers like ... 3 sections hidden .... Clicking on these markers reveals the hidden content, allowing the viewer to see more context if needed.

Additionally, a banner at the top of the page reminds the user they are in a focused view. They can click "Show Full Page" to return to the normal website view.

Configurations

Using CustardUI without the Settings Dialog

To use only the focused views feature of CustardUI, we can disable the settings dialog, and only trigger the share mode through links.

To disable the settings dialog, add the following to your custardui.config.json file:

{
  "baseUrl": "/",
  "settings": {
    "enabled": false
  }
}

Customizing Share Behavior ( WIP )

Website authors can customize which elements are excluded from selection (e.g., sidebars, headers) by configuring shareExclusions in their custardui.config.json file.

{
  "shareExclusions": {
    "tags": ["NAV", "FOOTER"],
    "ids": ["my-private-sidebar"]
  }
}