Skip to content

Latest commit

 

History

History
148 lines (118 loc) · 6.26 KB

Readme.md

File metadata and controls

148 lines (118 loc) · 6.26 KB
Raw

Modules

[AFComponent] : js

The <AFComponent /> utility component wraps other components with themeing and localisation support.

[Icon] : components/common

The <Icon /> component renders an icon (image). This component assumes the various icon spritesheets from https://api.apkallufalls.com have already been stored in localStorage (which happens when the app loads).

[Language] : components/common

The <Language /> component displays language selection controls.

[Panel] : components/common

The <Panel /> component displays a panel (box) on the page for content to sit within.

[Popup] : components/common

The <Popup /> component displays a control to open a popup, which when clicked reveals the popup on the page.

[Progress] : components/common

The <Progress /> component displays a progress bar with caption, value, total and percentage.

[Container] : components/layout

The <Container /> layout component wraps each page.

[Navigation] : components/layout

The <Navigation /> layout component wraps the sidebar.

[Home] : components/pages

The <Home /> page component controls https://apkallufalls.com (route: '/').

[AFComponent] : js

The <AFComponent /> utility component wraps other components with themeing and localisation support.

Properties

Name Type Description
props.style Object Style rules to apply on the wrapped component.

[Icon] : components/common

The <Icon /> component renders an icon (image). This component assumes the various icon spritesheets from https://api.apkallufalls.com have already been stored in localStorage (which happens when the app loads).

Properties

Name Type Description
props.caption String The text to be displayed on hover (used within the rendered component's title attribute and <figcaption> element).
[props.iconId] number An icon ID used to generate the image URL. This is used to fetch the X and Y co-ordinates from the resource's spritesheet JSON. Necessary if props.url is not specified.
[props.resource] String The resource the icon belongs to. Used to fetch the spritesheet JSON for the icon. Can be one of the following: achievements, chocoboBardings, emotes, minions, mounts, orchestrionRolls or titles. Necessary if props.url is not specified.
[props.url] String A qualified image URL to use. Necessary if props.iconId is not specified.

Example

// This renders an icon with a qualified URL.
<Icon caption="Test" url="example.png" />

Example

// This renders an icon from a content spritesheet.
<Icon caption="Test" iconId={4501} resource="minions" />

Example

// This icon ID is invalid and there's no resource specified.
// This will return the Example Self emote as it looks like a generic 'not found' image.
<Icon caption="Test" iconId={9999} />

[Language] : components/common

The <Language /> component displays language selection controls.

Example

<Language />

[Panel] : components/common

The <Panel /> component displays a panel (box) on the page for content to sit within.

Properties

Name Type Description
props.children Component Content to be rendered within the panel.

Example

<Panel>Foobar</Panel>

[Popup] : components/common

The <Popup /> component displays a control to open a popup, which when clicked reveals the popup on the page.

Properties

Name Type Description
props.children Component Content to be rendered within the popup.
props.openerCaption string Clickable text to be displayed for opening the popup. This is also used within accessibility attribute aria-labelledby.
props.openerDescription string Title text to be displayed when hovering over the opener. This is also used within accessibility attribute aria-describedby.

Example

<Popup openerCaption="Open" openerDescription="Opens a popup">Foobar</Popup>

[Progress] : components/common

The <Progress /> component displays a progress bar with caption, value, total and percentage.

Properties

Name Type Description
props.caption string Text to display within the figcaption element and aria-valuetext arribute.
props.total Number The maximum value for the progress bar, also used within aria-valuemax.
props.value Number The current value for the progress bar, also used within aria-valuenow.

Example

<Progress caption="Minions" value="5" total="220" />

[Container] : components/layout

The <Container /> layout component wraps each page.

[Navigation] : components/layout

The <Navigation /> layout component wraps the sidebar.

[Home] : components/pages

The <Home /> page component controls https://apkallufalls.com (route: '/').