@moki.codes/mokui-header

header

Description

header block provides header component inside the holygrail layout

Installation

yarn add @moki.codes/mokui-header

Styles

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

Basic Usage

<head>
        <style>
                width: calc(var(--msp-1) * 4);
                height: var(--msp-1);
                line-height: var(--msp-1);

                background-color: var(--color-on-background);
        </style>
</head>
...
<body>
<div class="theme
            theme_msp_perfect-fifth
            theme_color_light
            layout
            layout_type_holy-grail
            elevation
            animation">
        <header class="layout__header header header_fixed elevation_depth_4">
                <div class="layout__container layout__container-fluid header__container">
                        <div class="header__action header__action_primary">
                                <svg class="header__icon">
                                        ...
                                </svg>
                        </div>
                        <div class="header__action header__brand">
                                <div class="placeholder-brand elevation elevation_depth_8"></div>
                        </div>
                        <div class="header__navigation">
                                <div class="header__action header__navigation-item">
                                        item
                                </div>
                                <div class="header__action header__navigation-item">
                                        item
                                </div>
                        </div>
                        <div class="header__action header__action_secondary">
                                <svg class="header__icon" ...>
                                        ...
                                </svg>
                        </div>
                </div>
        </header>
</div>
</body>

Modificators

name	value	description
fixed		makes header fixed

Variables

header defines various variables which shapes its behavior:

--header-height
- defined as --layout-header-height at layout level, override --layout-header-height to change appearance
--header-brand-size
- defines brand height, override to change appearance
--header-action-size
- defines action height and icon width and height, override to change appearance
--header-navigation-size
- defines navigation height, override to change appearance

Elements

container
action
icon
brand
navigation
navigation-item

container

container for all header elements, centers child elements vertically

action

actionable item

Modificators

name	value	description
primary		headers primary action leftmost item after
		brand hidden on --screen-l or above, visible
		otherwise
secondary		headers secondary action rightmost item

icon

header action's icon

brand

headers brand leftmost item

navigation

headers navigation floats left, visible on --screen-l(as defined at the theme level) or above and hidden otherwise

navigation-item

headers navigation menu item(s) floats left

Javascript

Basic Usage

import { Header } from "@moki.codes/mokui-header";

const headerElement = document.querySelector("header");
const header = Header(headerElement);

/* when done */
header.destroy();

Exports

Header
HeaderComponent
HeaderAdapter
classes
strings

Header

(element: Elements): HeaderComponent<HeaderAdapter<Emitter<Component<{}>>>>

Header factory is a composition of the HeaderComponent, HeaderAdapter, Emitter, Component.

HeaderComponent

<T extends HeaderAdapter<Emitter<Component>>>( o: T = {} as T ): HeaderComponent<T>

Header Component factory provides core header functionality

Methods

name	description
setScrollTarget	set scroll target to the provided EventTarget
(target: EventTarget): void	`target`
destroy():	clean up routine to be called upon deleting
HeaderComponent;	component

HeaderAdapter

<T extends Emitter<Component>>( o: T ): HeaderAdapter<T>

Header Adapter factory provides default adapter functionality, one can override partially or completely used by HeaderComponent.

events

name	Description
mokui-header:action-primary-clicked	header action primary clicked
mokui-header:action-secondary-clicked	header action secondary clicked

Methods

name	description
handleActionPrimaryClick()	handler for the header__action_primary click
: void	event, fires ACTION_PRIMARY_CLICK_EVENT event
handleActionSecondaryClick()	handler for the header__action_secondary click
: void	event, fires ACTION_SECONDARY_CLICK_EVENT event
getViewportScrollY(	returns number of pixels scrolled on scroll
targetSelector: symbol	`targetSelector` target from top of the page
): number
getHeaderHeight(): number	returns height of the root(), (header)
): number
hasClass(name: string)	returns if root(), (header) has class `name`
: boolean
addClass(name: string)	adds class `name` to the element root(),
: void	(header)
removeClass(name: string)	removes class `name` to the element root(),
: void	(header)

classes

name	value
HEADER_HIDDEN: "string"	"header_hidden"

strings

name	value
ACTION_PRIMARY_SELECTOR	".header__action_primary"
: "string"
ACTION_PRIMARY_CLICKED_EVENT	"mokui-header:action-primary-clicked"
: "string"
ACTION_SECONDARY_CLICKED_EVENT	"mokui-header:action-secondary-clicked"
: "string"