btopro commented 3 months ago

Context

I absolutely love the effect as applied to images on the page - https://help.figma.com/hc/en-us/articles/1500004414082-Get-FigJam-templates#01H8JFSYS4NARR301NM76EMD0G

Some times when we're building out a design system, we find gaps that we didn't think of. In DDD currently there isn't anything around the following big questions:

How do we present dialogs?
How do we present image galleries?
How do we present images?

This project will require imagining all three of these, and then applying those ability to produce 3 different elements that work together. This also requires a design pattern known as a "Singleton". You can read more about this pattern here -- https://www.pentalog.com/blog/design-patterns/singleton-design-pattern/

TLDR; A single element who's entire job it is to manage a single process / task

Description

Images within websites, especially documentation or educational material are often related or associated in some way. By clicking on an image, you should get additional details about the image, it should be zoomed in, but you should also be able to browse just between them as they are a different visual layer than the text they are mixed amongst.

Hint

https://github.com/elmsln/lrnwebcomponents/blob/master/elements/simple-modal/src/simple-modal.js#L608-L621


// register globally so we can make sure there is only one
globalThis.SimpleModal = globalThis.SimpleModal || {};
// request if this exists. This helps invoke the element existing in the dom
// as well as that there is only one of them. That way we can ensure everything
// is rendered through the same modal
globalThis.SimpleModal.requestAvailability = () => {
  if (!window.SimpleModal.instance) {
    globalThis.SimpleModal.instance = document.createElement("simple-modal");
    document.body.appendChild(globalThis.SimpleModal.instance);
  }
  return globalThis.SimpleModal.instance;
};

export const SimpleModalStore = globalThis.SimpleModal.requestAvailability();

This is an example of a Singleton implementation in HTML.

when the file is referenced, the exporting of the SimpleModalStore variable forces it to be appended to the page
Anything that wants to access this element can get it without querying by just accessing the variable OR by "requestingAvailability"

Usage pattern

User is browsing textual content that has an unknown number of images on the page
Hover / focus on an image, visually pops it off the UI slightly with ability to know it can be focused (cursor change helps too)
On Click, a dialog opens that does not allow the user to tab / escape it (focus trap)
This dialog presents arrows to navigate back and forth between 'slides' that are the images on the page, with the slide show starting on the image that was selected
There's an X so that the user can close the dialog

Requirements

Web component for the Singleton that manages the content in the body and listens for media-image tags in the content (this could be a querySelectorAll; ideally it's a MutationObserver but that is not required)
media-image tag which is an image that looks like it does in the figma with the following options
- DDD based color for a "primary" color. This is the color of the thick border (green / purple in figma docs)
- DDD based color for a "secondary" color. This is used for the border / pop out color (black in the figma docs)
- source for source of the image
- caption - small bit of text describing the image (example: Painting by Mona) this is visible when in content
- description - slightly longer text (The artist envisioned that Mona would help inspire a world of artists to flourish) this is only visible when in the play list
- a property for primary and secondary should allow a few options that can then be demonstrated in the content (at least 2 secondary colors and 4 primary colors)
play-list tag which helps manage the slide show
- starting position of which slide to show
- slot can be used to know how many slides there are (or an Array of data, your choice)
- Arrows to go back and forth
- Number or visual indicator of slide / count (example: 5 of 7 and/or circles to imply which is active / how many)
- The media-image elements are shown in this with the description shown below
dialog can be managed via an actual dialog tag. The singleton is in charge of rendering it and passing data into it
The singleton should be placed on the page automatically (a pattern for how this is possible will be shown) when the file for it is referenced in the demo
The dialog needs to ensure once open, the user only works within it (a good article about approaches to doing this -- https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/ )

Example data

Because this is a singleton, it's only able to have 1 instance on a page / demo. As such. I want you to write an article about a topic that your group agrees upon (if this is via ChatGPT I don't care, it just has to be a context that you can then add images to for flavor / realistic feeling content). I'd like to see at least 6 images in the content (can also be GPT / fake generated, don't care).

Pick a topic that you enjoy or want to build the content around, everyone in the pod agree on this sample data for the topic and start building from there.