References

The routes initializer defines the forum app's routes.

The EditGroupModal component shows a modal dialog which allows the user to create or edit a group.

The HeaderPrimary component displays primary header controls.

The HeaderSecondary component displays secondary header controls.

The SessionDropdown component shows a button with the current user's avatar/name, with a dropdown of session controls.

Admin page which displays a paginated list of all users on the forum.

A custom route resolver for ExtensionPage that generates handles routes to default extension pages or a page provided by an extension.

The App class provides a container for an application, as well as various utilities for the rest of the app to use.

The Component class defines a user interface 'building block'.

The Fragment class represents a chunk of DOM that is rendered once with Mithril and then takes over control of its own DOM and lifecycle.

The Model class represents a local data resource.

The Session class defines the current user session.

The Store class defines a local data store, and provides methods to retrieve data from the API.

Extend an object's method by running its output through a mutating callback every time it is called.

The callback accepts the method's return value and should perform any mutations directly on this value.

Override an object's method by replacing it with a new function, so that the new function will be run every time the object's method is called.

The Alert component represents an alert box, which contains a message, some controls, and may be dismissible.

The AlertManager component provides an area in which Alert components can be shown and dismissed.

The Badge component represents a user/discussion badge, indicating some status (e.g.

The Button component defines an element which, when clicked, performs an action.

The Checkbox component defines a checkbox input.

The ConfirmDocumentUnload component can be used to register a global event handler that prevents closing the browser window/tab based on the return value of a given callback prop.

The Dropdown component displays a button which, when clicked, shows a dropdown menu beneath it.

The EditUserModal component displays a modal dialog with a login form.

The FieldSet component defines a collection of fields, displayed in a list underneath a title.

The link component enables both internal and external links.

The LinkButton component defines a Button which links to a route.

The LoadingIndicator component displays a simple CSS-based loading spinner.

The Modal component displays a modal dialog, wrapped in a form.

The ModalManager component manages a modal dialog.

The Navigation component displays a set of navigation buttons.

The Page component

The Placeholder component displays a muted text with some call to action, usually used as an empty state.

The Select component displays a <select> input, surrounded with some extra elements for styling.

The SelectDropdown component is the same as a Dropdown, except the toggle button's label is set as the label of the first child which has a truthy active prop.

Attrs

• caretIcon
• defaultLabel

The Separator component defines a menu separator item.

The SplitDropdown component is similar to Dropdown, but the first child is displayed as its own button prior to the toggle button.

The Switch component is a Checkbox, but with a switch display instead of a tick/cross one.

The TextEditor component displays a textarea with controls, including a submit button.

The TextEditorButton component displays a button suitable for the text editor toolbar.

The Tooltip component is used to create a tooltip for an element.

The avatar helper displays a user's avatar.

The fullTime helper displays a formatted time string wrapped in a <time> tag.

The highlight helper searches for a word phrase in a string, and wraps matches with the <mark> tag.

The humanTime helper displays a time in a human-friendly time-ago format (e.g.

The icon helper displays an icon.

The listItems helper wraps a collection of components in

The punctuateSeries helper formats a list of strings (e.g.

The useronline helper displays a green circle if the user is online

The username helper displays a user's username in a tag. If the user doesn't exist, the username will be displayed as [deleted].

Generates a route resolver for a given component.

Returned by AlertManagerState.show.

The Drawer class controls the page's drawer. The drawer is the area the slides out from the left on mobile devices; it contains the header and the footer.

The ItemList class collects items and then arranges them into an array by priority.

The ScrollListener class sets up a listener that handles window scroll events.

The SubtreeRetainer class keeps track of a number of pieces of data, comparing the values of these pieces at every iteration.

The abbreviateNumber utility converts a number to a shorter localized form.

The anchorScroll utility saves the scroll position relative to an element, and then restores it after a callback has been run.

The computed utility creates a function that will cache its output until any of the dependent values are dirty.

Escapes the RegExp special characters in input.

The extract utility deletes a property from an object and returns its value.

Extract the text nodes from a virtual element.

The formatNumber utility localizes a number into a string with the appropriate punctuation.

The humanTime utility converts a date to a localized, human-readable time- ago string.

The liveHumanTimes initializer sets up a loop every 1 second to update timestamps rendered with the humanTime helper.

The mapRoutes utility converts a map of named application routes into a format that can be understood by Mithril, and wraps them in route resolvers to provide each route with the current route name.

The mixin utility assigns the properties of a set of 'mixin' objects to the prototype of a parent object.

Mithril 2 does not completely rerender the page if a route change leads to the same route (or the same component handling a different route).

Strip HTML tags and quotes out of the given string, replacing them with meaningful punctuation.

Create a slug out of the given string.

Truncate a string to the given length, appending ellipses if necessary.

Make a string's first character uppercase.

Convert the given string to a unique color.

Check if class A is the same as or a subclass of class B.

An event handler factory that makes it simpler to implement data binding for component event listeners.

This util exposes clsx to core and extensions as a re-usable utility.

The routes initializer defines the forum app's routes.

The AffixedSidebar component uses Bootstrap's "affix" plugin to keep a sidebar navigation at the top of the viewport when scrolling.

Children

The component must wrap an element that itself wraps an

element, which will be "affixed".

The AvatarEditor component displays a user's avatar along with a dropdown menu which allows the user to upload/remove the avatar.

Attrs

• className
• user

The ChangeEmailModal component shows a modal dialog which allows the user to change their email address.

The ChangePasswordModal component shows a modal dialog which allows the user to send themself a password reset email.

The CommentPost component displays a standard comment-typed post.

The Composer component displays the composer.

The ComposerBody component handles the body, or the content, of the composer.

The ComposerButton component displays a button suitable for the composer controls.

The ComposerPostPreview component renders Markdown as HTML using the TextFormatter library, polling a data source for changes every 50ms.

The DiscussionComposer component displays the composer content for starting a new discussion.

The DiscussionHero component displays the hero on a discussion page.

The DiscussionList component displays a list of discussions.

The DiscussionListItem component shows a single discussion in the discussion list.

The DiscussionListPane component displays the list of previously viewed discussions in a panel that can be displayed by moving the mouse to the left edge of the screen, where it can also be pinned in place.

The DiscussionPage component displays a whole discussion page, including the discussion list pane, the hero, the posts, and the sidebar.

The DiscussionRenamedNotification component displays a notification which indicates that a discussion has had its title changed.

The DiscussionRenamedPost component displays a discussion event post indicating that the discussion has been renamed.

The DiscussionsSearchSource finds and displays discussion search results in the search dropdown.

The DiscussionsUserPage component shows a discussion list inside of a user page.

The EditPostComposer component displays the composer content for editing a post.

The EventPost component displays a post which indicating a discussion event, like a discussion being renamed or stickied.

The ForgotPasswordModal component displays a modal which allows the user to enter their email address and request a link to reset their password.

The HeaderPrimary component displays primary header controls.

The HeaderSecondary component displays secondary header controls, such as the search box and the user menu.

The IndexPage component displays the index page, including the welcome hero, the sidebar, and the discussion list.

The LoadingPost component shows a placeholder that looks like a post, indicating that the post is loading.

The LogInButton component displays a social login button which will open a popup window containing the specified path.

The LogInButtons component displays a collection of social login buttons.

The LogInModal component displays a modal dialog with a login form.

The Notification component abstract displays a single notification.

The NotificationGrid component displays a table of notification types and methods, allowing the user to toggle each combination.

The NotificationList component displays a list of the logged-in user's notifications, grouped by discussion.

The NotificationsPage component shows the notifications list.

The Post component displays a single post.

The PostEdited component displays information about when and by whom a post was edited.

The PostMeta component displays the time of a post, and when clicked, shows a dropdown containing more information about the post (number, full time, permalink).

The PostPreview component shows a link to a post containing the avatar and username of the author, and a short excerpt of the post's content.

Attrs

• post

The PostStream component displays an infinitely-scrollable wall of posts in a discussion.

The PostStreamScrubber component displays a scrubber which can be used to navigate/scrub through a post stream.

The PostUser component shows the avatar and username of a post's author.

Attrs

• post

The PostsUserPage component shows a user's activity feed inside of their profile.

The 'RenameDiscussionModal' displays a modal dialog with an input to rename a discussion

The ReplyComposer component displays the composer content for replying to a discussion.

The ReplyPlaceholder component displays a placeholder for a reply, which, when clicked, opens the reply composer.

The Search component displays a menu of as-you-type results from a variety of sources.

The SessionDropdown component shows a button with the current user's avatar/name, with a dropdown of session controls.

The SettingsPage component displays the user's settings control panel, in the context of their user profile.

The SignUpModal component displays a modal dialog with a singup form.

Displays information about a the first or last post in a discussion.

The UserCard component displays a user's profile card. This is used both on the UserPage (in the hero) and in discussions, shown when hovering over a post author.

Attrs

• user
• className
• editable
• controlsButtonClassName

The UserPage component shows a user's profile. It can be extended to show content inside of the content area. See ActivityPage and SettingsPage for examples.

The UsersSearchSource finds and displays user search results in the search dropdown.

The WelcomeHero component displays a hero that welcomes the user to the forum.

A custom route resolver for DiscussionPage that generates the same key to all posts on the same discussion.

The History class keeps track and manages a stack of routes that the user has navigated to in their session.

The KeyboardNavigatable class manages lists that can be navigated with the keyboard, calling callbacks for each actions.

The Pane class manages the page's discussion list sidepane. The pane is a part of the content view (DiscussionPage component), but its visibility is determined by CSS classes applied to the outer page element. This class manages the application of those CSS classes.

Shows an alert if the user has not yet confirmed their email address.

The slidable utility adds touch gestures to an element so that it can be slid away to reveal controls underneath, and then released to activate those controls.