mmo-app

1 symbol · generated 30 Sep 2026

element

mmo-app

The application shell. One element, three templates, chosen by the host's class: <mmo-app class="admin">, class="landing" or class="blog".

<mmo-app template></mmo-app>

Extends: CustomShadowElement

The `load(config)` contract, the menu, breadcrumb, tab, notification, modal and panel api and the `MMO.app` entry point are the ones projects already use; the shell around them is built on the `.scs` design system, and on three templates instead of one fixed layout. One change, in 3.1.0: a message (`notify`, `alert`, `confirm`, `ask`, `error`, `showModal`, `showNotification`, `showPanel`) is text unless it is a node, where it used to be html -- markup a caller wrote goes through `MMO.core.dom.html()`.

Index

	template	the template to use (`admin`, `landing`, `blog`).
	template accessor	The active template.
	constructor()
	init()
	initPanelResize()	Let the side panel be dragged wider or narrower by its left edge.
	resizePanelByKey(event)	Resize the panel from the keyboard: left and right by 16px, 4px with shift, `Home` back to its default width.
	setPanelWidth(width)
	resetPanelWidth()	Put the panel back to the width the stylesheet gives it.
	updateRegions()	Reflect which optional regions the page filled, as host classes: a hero, a page header or a rail that no slot fills is removed from the layout instead of holding empty space.
	load(config)	Load the application configuration, the object the theme writes into `MMO.config`.
	addBreadcrumb(label, url, index)	Add a breadcrumb, closest to the root first.
	clearTabs()	Remove every page tab.
	getTabs()	Every page tab currently in the strip.
	addTab(label, url, icon, order)	Add a page tab.
	scrollTabs(direction)	Scroll the tab strip.
	updateTabsOverflow()	Show the tab scrollers only when the strip actually overflows.
	getMenu(url)	Find a rail entry by the url it points at.
	setActiveMenu(url)	Mark a menu entry, and every accordion above it, as active.
	revealMenu(node)	Scroll a rail entry into view, in the rail's own scroller.
	addMenu(group, label, url, icon, order)	Add a menu entry, creating the accordion hierarchy its url implies.
	bindAccordionToggle(accordion)	Keep an accordion's open state across pages, and keep its title a link.
	toggleMenu()	Collapse or expand the rail.
	shortcut(event)	Global shortcuts: alt+/ opens the palette, escape closes what is open.
	initCommands()	The commands the shell always has: what its own buttons do, when the template has those buttons.
	addCommand(label, run, icon, keywords)	Add a command to the palette, listed under « Commandes ».
	addSearchSource(source)	Add a remote source to the palette: its results are listed under their own heading, after the pages and the commands.
	openPalette(query)	Open the command palette, on the whole menu or already searching.
	closePalette()	Close the command palette.
	filterPalette(query)	Filter the palette on what has been typed, one group per category: the text of the page itself first (`searchPage`), then the pages of the menu, the commands, and each remote source (`addSea…`
	searchPage(query, limit)	Find a text in the page: accents and case do not count.
	indexPage()	Read the text of the page once, when the palette opens, so a search is a lookup rather than a walk through the whole document at every key.
	pageMatch(entry, at, length)	One match in the page, as a palette item: the words around it, the match marked.
	revealPageMatch(node, at, length)	Scroll to a match in the page, and select it: the selection is the browser's own highlight, and nothing is written into the page.
	fold(text) static	Fold a text for searching: lower case, accents dropped -- one character for one character, so an offset in the folded text is the same offset in the original.
	searchRemote(source, query)	Ask a remote source, and read its answer as palette items.
	appendPaletteGroup(parent, title, items)	Add a group of results to the palette.
	updatePaletteEmpty(query)	Keep one result selected, and say so when there is none left -- once no source is still searching.
	paletteKey(event)	Move through the results, across the groups, and follow the selected one.
	showPanel(title, body)	Open a panel in the side drawer.
	closePanel(value)	Close the panel on top of the stack, resolving its promise.
	closeAllPanels(value)	Close every panel.
	showNotification(css, content)	Show a notification.
	notify(content, title, button, butIcon)	Show a notification with a title and a dismiss button.
	showModal(css, content)	Show a modal dialog.
	answer(node, value)	Wire a dialog's buttons to its result: any `<button value="...">` closes the dialog with that value, and the promise resolves with it -- `false` when the dialog is dismissed (escape, a click outsid…
	ask(title, content)	Ask for a value: one input, and the answer.
	confirm(title, content)	Ask a yes/no question.
	alert(title, content)	Say something, with one button to dismiss it.
	error(title, content)	The same, in the error tone.
	toggleUserCard()	Toggle the account card.
	toggleConsole()	Toggle the developer drawer.
	showConsoleTab(name)	Show one pane of the developer drawer, and open the drawer if it was closed.
	loadServerInfo(reload)	Fill the `server` pane with what the server is made of: php, its extensions and every package the framework included, as `AdminController::routeServerInfo` answers them.
	toggleTOC()	Toggle the table of contents.
	updateConsoleTags(console)	Update the warning and error counters of the status bar.
	gotoTop(event)	Scroll back to the top of whichever container actually scrolls.
	blockScreen(active)	Block the screen while something runs.
	setThemeMode(scheme)	Apply a colour scheme.
	toggleDarkMode()	Switch between the dark and light schemes.
	(default)	the page itself
	logo	the mark at the top of the rail
	menu	rail entries written by hand, next to the ones `MMO.config.menus` adds
	side-foot	the foot of the rail, on the row the scheme switch ends
	user-info	the account line next to the account button, at the end of the top bar
	user-card-body	what the account card shows when it is opened
	brand	the brand in the top bar, for the `landing` and `blog` templates
	nav	links in the top bar
	actions	buttons on the right of the top bar
	header	anything else on the top bar, after the actions
	hero	the band above the page, for a landing
	page-title	the page header's title
	page-actions	the page header's buttons
	navigation	a strip between the header and the content (filters, a sub-navigation)
	aside	the rail on the right of the content, for an article
	footer	the footer, for the `landing` and `blog` templates
	panel-title	the tabs of the side panel, one per open panel
	panel	the body of the side panel
	status	the status bar, left of the log button
	logs	the lines the server log tab of the developer drawer shows
	notifications	the notifications stacked in the corner
	screen-blocker	what covers the page while it is blocked (`blockScreen`)
	.admin	the application shell: rail, breadcrumb, page tabs, side panel, status bar
	.landing	the marketing shell: sticky translucent header, hero, sections, large footer
	.blog	the editorial shell: header, content column, sticky rail, footer
	.menu-collapsed	the rail is reduced to icons
	.menu-open	the rail is open, on a small screen
	.panel-open	the side panel is open
	.console-open	the developer drawer (server log, server information) is open
	.toc-open	the table of contents is open
	.palette-open	the command palette is open, over the page
	.has-hero	the page filled the hero region, so the shell makes room for it
	.has-user-card	the page filled the account card, so it gets a body above the logout link

label	`string`	- html, from the application's config (`load`)
url	`string`
index = 0	`number`	- the depth of this crumb
returns	`HTMLAnchorElement`

group	`string`	- the section of the rail this entry belongs to, html (`load`)
label	`string`	- html, from the application's config (`load`)
url	`string`
icon	`string`
order = 0	`number`

label	`string`	- text
run	`Function`	- called when the command is picked, once the palette is closed
icon = null	`?string`	- an `<mmo-icon>` name
keywords = ''	`string`	- other words the command is found by
returns	`label: string, run: Function, icon: ?string, keywords: string`	} the command

query	`string`
limit = 20	`number`
returns	`Array<Object>`	palette items

entry
at	`number`	- where the match starts in the text node
length	`number`
returns	`Object`

title	`string`	- text
body	`?(Node` \| `string` \| `MMO.core.dom.Html)`	- a node, or text; markup you wrote goes through `MMO.core.dom.html()`
returns	`Promise`	resolved with the value the panel is closed with. `promise.node` is the panel's body element, for a caller that has to reach into it.

css	`string`	- a tone class: `success`, `warning`, `error`, `info`
...content	`...*`	- its children (`MMO.core.dom.appendChildren`); one with a `slot` goes to that part of the card, `title` or `footer` (`mmo-notification`)
returns	`HTMLElement`

content	`*`	- the body: text, a node, or `MMO.core.dom.html()` (`showNotification`)
title	`string`	- text
button = 'ok'	`string`	- the dismiss label, text
butIcon = 'eye'	`string`	- the dismiss icon
returns	`HTMLElement`

node	`HTMLDialogElement`
value	`function(HTMLDialogElement, string):*`	- what to resolve with, from the button's value
returns	`Promise`

title	`string` \| `Error`	- text: an Error reads as `Error: its message`
...content	`...*`	- text unless it is a node (`showModal`)
returns	`Promise<boolean>`

event	`KeyboardEvent`
returns	`void`

reload = false	`boolean`	- fetch again even if the pane was already filled
returns	`Promise`

Index

Attributes1

Properties1

Methods57

Slots22

CSS hooks11