Library Controllers for Developers

Table of Contents

1. Direction Controller
2. Screen Size Controller

Direction Controller

File lib/DirController.ts

Description

Discovers and reports the host element's closest dir, even across shadow roots. Does not observe DOM changes. see https://caniuse.com/css-dir-pseudo

Example Usage

File: elements/rh-secondary-nav/rh-secondary-nav.ts

Importing the controller

import { DirController } from '../../lib/DirController.js';

Adding the controller

#dir = new DirController(this);

Using the controller

const navClasses = { rtl: this.#dir.dir === 'rtl' };
...
return html`
    <nav part="nav" class="${classMap(navClasses)}">
    ...

Screen Size Controller

File lib/ScreenSizeController.ts

Description

Used to determine the current size of the screen inside of a component.

Includes the following breakpoints:

1. Mobile
2. Mobile Portrait
3. Mobile Landscape
4. Tablet Portrait
5. Tablet Landscape
6. Desktop Small
7. Desktop Large

These are determined by using the following matchMedia query

screen and (max-width: ${exampleBreakpoint}) where exampleBreakpoint is replaced depending on the breakpoint being used (ex. mobile uses tabletPortraitBreakpoint). These breakpoint values can be found in tokens.js.

Example Usage

rh-secondary-nav-menu.ts

// Importing the controller
import { ScreenSizeController } from '../../lib/ScreenSizeController.js';
. . .
// Creating the private screenSize controller in the element
#screenSize = new ScreenSizeController(this);
. . .
// Creating a private state variable for the component to use for styling / logic.
@observed
@state() private _compact = false;
. . .
// This hooks into the ScreenSizeController to tell the component that when it matches tabletLandscape to change the compact variable.  
protected screenSize = new ScreenSizeController(this, 'tabletLandscape', {
   onChange: matches => {
     this._compact = !matches;
   }
});