mmo-app

the template to use (admin, landing, blog). Defaults to the host's class.

template

The active template.

Type

string

Let the side panel be dragged wider or narrower by its left edge.

Resize the panel from the keyboard: left and right by 16px, 4px with shift, Home back to its default width.

Beside the page or over it: a panel that would leave the page less than 420px (a 640px form on a 1024px screen left 100px to a table, #284) goes over it, with the class panel-over. A small screen's panel always covers the whole screen (the small screens' styles).

Give the panel the width its shown panel asks for (showPanel's width), unless the user chose one by dragging its edge. The panel's own max-width still caps it.

Put the panel back to the width the stylesheet gives it. @return {void}

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 the application configuration, the object the theme writes into MMO.config.

Add a breadcrumb, closest to the root first.

Remove every page tab.

Every page tab currently in the strip.

Add a page tab.

Scroll the tab strip.

Show the tab scrollers only when the strip actually overflows.

Find a rail entry by the url it points at.

Mark a menu entry, and every accordion above it, as active.

Scroll a rail entry into view, in the rail's own scroller.

Add a menu entry, creating the accordion hierarchy its url implies.

Keep the open state a user gave an accordion across pages, and keep its title a link.

Collapse or expand the rail. On a small screen it opens as a drawer instead.

Global shortcuts: alt+/ opens the palette, escape closes what is open.

The commands the shell always has: what its own buttons do, when the template has those buttons.

The display modes the user may choose (MMO.modes): a level, and the layers over it, in the account card and in the palette; the layers on, as chips in the top bar, which turn them off. A user with no choice gets none.

Add a command to the palette, listed under « Commandes ».

Add a remote source to the palette: its results are listed under their own heading, after the pages and the commands. The server is asked url?q=…&limit=… (plus params) and answers {results: [{url, label | shortName | name, kind, hint | namespace, icon}]}, or the same wrapped in data. The server usually declares its sources in MMO.config.searches (load).

Open the command palette, on the whole menu or already searching.

Close the command palette when the click is on the veil around it, not in its box.

Close the command palette.

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 (addSearchSource), which only answers once typing pauses.

Find a text in the page: accents and case do not count. Each match is listed with its context and the heading it sits under; picking it scrolls to it and selects it (revealPageMatch).

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. The page is what the default slot and the page's own regions hold -- never the menu, the panels or the notifications -- open shadow roots included, and only what is visible.

One match in the page, as a palette item: the words around it, the match marked.

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 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.

Ask a remote source, and read its answer as palette items.

Add a group of results to the palette.

Keep one result selected, and say so when there is none left -- once no source is still searching.

Move through the results, across the groups, and follow the selected one.

Open a panel in the side drawer, in a tab of its own.

Voir

selectPanel, updatePanel).

the tab of a panel: its title, which shows it, and a button closing it

Show an open panel.

Change an open panel: the title of its tab, or its key (showPanel).

the tab strip from the keyboard: arrows go from tab to tab, Delete closes one

Close a panel, resolving its promise. The panel shown is the one closed unless another is named: a button inside a panel closes its own (the one shown, since it was clicked).

Close every panel.

Show a notification.

Keep the stack of notifications off the buttons while it holds any: the page scrolls, the window changes size, a click redraws a step (placeNotifications). Set up with the first notification.

Move the stack of notifications off every button under it (#227): from its place in the bottom right corner it goes up, above the buttons in its way; when the column has no room for it, it tries the left of the content the same way, and otherwise keeps its corner -- what stays there is closed by itself (mmo-notification's duration) or by its ✕.

Show a notification with a title and a dismiss button.

Show a modal dialog.

Voir

error, showNotification, notify and showPanel. Markup the caller wrote itself goes through MMO.core.dom.html().

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 outside), so a caller can always tell "no" from "not answered".

Ask for a value: one input, and the answer.

Ask a yes/no question.

Say something, with one button to dismiss it.

The same, in the error tone.

An error as a user reads it: what happened, in French; the server's message when it is meant for a user (the framework's own name what they are about in [brackets], an id or a path is no such thing); the rest -- url, status, message, stack -- folded under « Détail technique ».

Toggle the account card.

Toggle the developer drawer.

Show one pane of the developer drawer, and open the drawer if it was closed. The server pane is fetched the first time it is asked for, not on every page load: it is a tool, not a page region.

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.

Toggle the table of contents.

Update the warning and error counters of the status bar.

Scroll back to the top of whichever container actually scrolls.

Block the screen while something runs.

Apply a colour scheme.

Switch between the dark and light schemes.

the page itself

<slot>

the mark at the top of the rail

<slot name="logo">

rail entries written by hand, next to the ones MMO.config.menus adds

<slot name="menu">

the foot of the rail, on the row the scheme switch ends

<slot name="side-foot">

the account line next to the account button, at the end of the top bar

<slot name="user-info">

what the account card shows when it is opened

<slot name="user-card-body">

the brand in the top bar, for the landing and blog templates

<slot name="brand">

links in the top bar

<slot name="nav">

buttons on the right of the top bar

<slot name="actions">

anything else on the top bar, after the actions

<slot name="header">

the band above the page, for a landing

<slot name="hero">

the page header's title

<slot name="page-title">

the page header's buttons

<slot name="page-actions">

a strip between the header and the content (filters, a sub-navigation)

<slot name="navigation">

the rail on the right of the content, for an article

<slot name="aside">

the footer, for the landing and blog templates

<slot name="footer">

extra content at the end of the side panel's tab strip (its tabs are built by showPanel)

<slot name="panel-title">

the body of the side panel

<slot name="panel">

the status bar, left of the log button

<slot name="status">

the lines the server log tab of the developer drawer shows

<slot name="logs">

the notifications stacked in the corner

<slot name="notifications">

what covers the page while it is blocked (blockScreen)

<slot name="screen-blocker">

the application shell: rail, breadcrumb, page tabs, side panel, status bar

.admin

the marketing shell: sticky translucent header, hero, sections, large footer

.landing

the editorial shell: header, content column, sticky rail, footer

.blog

the rail is reduced to icons

.menu-collapsed

the rail is open, on a small screen

.menu-open

the page has tabs: a small screen gives them a row of their own under the top bar

.has-tabs

the side panel is open

.panel-open

the side panel is over the page rather than beside it: it left the page too little room (placePanel)

.panel-over

the developer drawer (server log, server information) is open

.console-open

the table of contents is open

.toc-open

the command palette is open, over the page

.palette-open

the page filled the hero region, so the shell makes room for it

.has-hero

the page filled the account card, so it gets a body above the logout link

.has-user-card