drawer

Description

Drawer is a component which provides navigation drawer.

Inside layout_type_holy-grail-asleft drawer expanded and becomes visible side navigation on the screens bigger than var(--screen-l) min-width: 990px, and degrades to the modal navigation on the smaller screens.

Inside layout_type_holy-grail-main drawer is modal drawer navigation by default.

Modal drawer opens when strings.OPEN_EVENT occurs, and closes upon click on the scrim strings.SCRIM_SELECTOR.

Installation

yarn add @moki.codes/mokui-drawer

Styles

@import "@moki.codes/mokui-theme/dist/mokui-theme.css"
@import "@moki.codes/mokui-layout/dist/mokui-layout.css"
@import "@moki.codes/mokui-elevation/dist/mokui-elevation.css"
@import "@moki.codes/mokui-animation/dist/mokui-animation.css"
@import "@moki.codes/mokui-list/dist/mokui-list.css"
@import "@moki.codes/mokui-drawer/dist/mokui-drawer.css"

Basic Usage

<div class="theme
            ...">
	<div class="layout layout_type_holy-grail-asleft">
                <header></header>
                <div class="drawer-scrim" id="drawer-scrim"></div>
                <aside class="layout__aside-left elevation elevation_depth_0 drawer">
                        <!-- optional header -->
                        <div class="drawer__header">?brand</div>
                        <!-- list component -->
                        <div ...>
                                ...
                        </div>
                </aside>
                <main></main>
                <footer></footer>
        </div>
</div>

Modificators

| name | value | description | | ----------------- | ----------------- | ------------------------------------ | | open | | shows drawer | | animation | open | open animation transition: dur, fn | | | close | close animation transition: dur, fn |

Elements

• header
  • optional drawer navigation header

header

optional drawer navigation header

drawer-scrim

scrim which covers content when modal drawer is open.

Modificators

| name | value | description | | ----------------- | ----------------- | ------------------------------------ | | open | | brings scrim over content but before | | | | drawer itself. | | animation | open | open animation transition: dur, fn | | | close | close animation transition: dur, fn |

Javascript

Basic Usage

import { Drawer } from "@moki.codes/mokui-drawer";

const drawerEl = document.querySelector(".drawer");
const drawerComponent = Drawer(drawerEl);
/* when done */
drawerComponent.destroy();

Exports

• Drawer
• DrawerComponent
• DrawerAdapter

Drawer

(e: Element) => DrawerComponent<DrawerAdapter<Emitter<Listener<Component<{}>>>>>

Drawer factory is a composition of the DrawerComponent of DrawerAdapter of Emitter of Listener of Component.

DrawerComponent

<T extends DrawerAdapter<Emitter<Listener<Component<{}>>>>>(o: T) => DrawerComponent<T>

DrawerComponent factory provides core drawer functionality: finds scrim with selector strings.SCRIM_SELECTOR initializes click on it which closes modal drawer, listens to strings.OPEN_EVENT on the top level target element this.target(see adapter), upon strings.OPEN_EVENT occuring opens modal drawer.

Methods

| name | description | | --------------------------- | ---------------------------------------------- | | destroy(): void; | clean up routine to be called upon deleting | | | component | | open | opens drawer | | (this: DrawerComponent): | | | void; | | | close | closes drawer | | (this: DrawerComponent): | | | void; | |

events

| name | Description | | ----------------------- | -------------------------------------------------- | | strings.OPEN_EVENT | listens on this event, when occurs opens drawer |

DrawerAdapter

<T extends Emitter<Listener<Component<{}>>>>(o: T) => DrawerAdapter<T>

DrawerAdapter factory provides default adapter functionality one can override partially or completely, used by DrawerComponent.

Properties

| name | description | | --------------------------- | ---------------------------------------------- | | target: EventTarget | top level target to listen on for | | | strings.OPEN_EVENT |

Methods

| name | description | | --------------------------- | ---------------------------------------------- | | unlistenOn( | stop listening on target target for event | | this: DrawerAdapter, | event with handler handler | | target: EventTarget, | | | event: string | | | handler: EventListene | | | ): void; | | | listenOn( | start listening on target target for event | | this: DrawerAdapter, | event with handler handler | | target: EventTarget, | | | event: string, | | | handler: EventListener | | | ): void; | | | addClassTo( | add class name to the target element target| | this: DrawerAdapter, | | | target: Element, | | | name: string): void; | | | removeClassFrom( | remove class name from target element | | this: DrawerAdapter, | target | | target: Element, | | | name: string | | | ): void; | |

classes

| name | value | | --------------------------- | ---------------------------------------------- | | ELEVATED: | "elevation_depth_16" | | string | | | RESTING: | "elevation_depth_0" | | string | | | DRAWER_ANIMATION_OPEN: | "drawer_animation_open" | | string | | | DRAWER_ANIMATION_CLOSE: | "drawer_animation_close" | | string | | | DRAWER_OPEN: | "drawer_open" | | string | | | SCRIM_ANIMATION_OPEN: | "drawer-scrim_animation_open" | | string | | | SCRIM_ANIMATION_CLOSE: | "drawer-scrim_animation_close" | | string | | | SCRIM_OPEN: | "drawer-scrim_open" | | string | |

strings

| name | value | | ---------------------------------- | --------------------------------------- | | OPEN_EVENT: | "mokui-header:action-primary-clicked" | | string | | | SCRIM_SELECTOR: | "#drawer-scrim" | | string | |