WebDev Bites: ImageViewer Component Interface

resize-able image viewer

About Components Introduction Demo Design Interface
ImageViewer is a lightweight Web Component that displays an image with clickable body and title, rendered inside a Shadow DOM. It exposes a small set of attributes for source, sizing, and colors, and uses slots so you can provide optional heading/auxiliary content. An image or title click toggles its size (±1.2x step) for quick emphasis. Fonts are imported for consistent code/content presentation. Internal structure uses a wrapper and component region; styles are encapsulated.

1.0 - Use in Application

Figure 1. Execution Model W3C web components are used like any of the standard elements. The code below appears in a web page wherever the designer wants an image to appear. The attributes are all optional, as the image-viewer component provides fallback values. 
  <image-viewer 
    img-src="pictures/JavaScriptExecution.png" 
    bg-color="var(--light)" 
    title-bg-color="#ccc" 
    img-width="500" 
    style="float:right; margin-right:-1rem;"
  >
    Figure 1. Execution Model
  </image-viewer>
The only additional requirement is to include the component script: 

      <script src="Components/ImageViewerComponent/js/ImageViewer.js" defer></script>
This provides the resize-able, titled image shown above.

2.0 - Image Viewer Interface

Interface surface What it does Example
img-src (attribute) Sets the image URL displayed by the viewer. 
<image-viewer img-src="imgs/sunrise.jpg"></image-viewer>
img-width (attribute) Controls rendered width of the image (e.g., 600, 75%, 32rem). Overflow-x defaults to auto; you can constrain the host. 
<image-viewer img-src="imgs/map.png" img-width="720"></image-viewer>
bg-color (attribute) Background color of the viewer’s main area. 
<image-viewer img-src="imgs/diagram.svg" bg-color="#111"></image-viewer>
title-bg-color (attribute) Background color for the title/header bar. 
<image-viewer img-src="imgs/photo.jpg" title-bg-color="gold"></image-viewer>
.imgSrc (property) Programmatic getter/setter for img-src. Updates the image when set. 
const iv = document.querySelector('image-viewer');
iv.imgSrc = 'imgs/updated.jpg';
.imgWidth (property) Getter/setter for img-width. Accepts number (px), percent, or CSS length. 
iv.imgWidth = '80%'; // or 800, '36rem'
.bgColor (property) Getter/setter for bg-color. Repaints container background. 
iv.bgColor = '#222';
.titleBgColor (property) Getter/setter for title-bg-color. Repaints header background. 
iv.titleBgColor = 'steelblue';
Slots: (default), wrapper, component Project custom content (e.g., captions/notes). Your build uses wrapper/component structure to organize layout. 
<image-viewer img-src="imgs/plan.png">
  <div slot="wrapper">Figure 1 — Floor Plan</div>
  <em>Scaled view</em> <!-- default slot -->
</image-viewer>
Clickable title (behavior) Clicking the title toggles its font-size by ~±1.2× steps for emphasis. 
<image-viewer img-src="imgs/chart.png"> 
  <span slot="wrapper">Sales Q3</span>
</image-viewer>
<!-- Click the title bar to zoom the title text -->
Events No custom events specified in current build. (If later emit e.g. image-load or title-toggle, document them here.) 
// future:
// iv.addEventListener('image-load', e => console.log(e.detail));
Host styling & theming Use attributes above or host CSS to size/position the component. Encapsulated styles live in Shadow DOM; expose parts/vars if needed. 
image-viewer {
  display:block; max-width: 60rem; margin-inline:auto;
}