SDK reference

Expanding and fullscreen, swipes and closing confirmation, Lia's header and background colours, and the bottom, back and settings buttons.

#The sheet and fullscreen

See Three looks for sheet, full and fullscreen.

#Lia.expand()

As a sheet: takes the full height of the screen. Resolves with { expanded: true } (also when it already was). Your page hears a "viewport" event with the new height.

#Lia.requestFullscreen()

Edge to edge, with only Lia's floating Close and ⋯ over your page. A sheet expands first. Resolves with { isFullscreen: true }, and your page hears "fullscreenChanged" with the new contentSafeArea. Keep your content below Lia.contentSafeArea.top.

#Lia.exitFullscreen()

Back from fullscreen: to a sheet if your app opened as one, otherwise to the whole screen under Lia's header. Resolves with { isFullscreen: false }.

#Lia.disableExpand()

As a sheet: keeps its height, so pulling it up no longer takes the whole screen. Lia.expand() still can. Resolves with null.

#Lia.enableExpand()

As a sheet: pulling it up takes the whole screen again (the default).

#Lia.disableVerticalSwipes()

As a sheet: a swipe down no longer closes it. Turn this off for games that use swipes. Resolves with null.

#Lia.enableVerticalSwipes()

As a sheet: a swipe down closes it again (the default).

#Closing

#Lia.enableClosingConfirmation()

Asks before closing, for unsaved work or a game under way: when the person closes your app with Close or from the ⋯ menu, Lia asks whether to leave first. A sheet can't be swiped closed while it's on. Resolves with null.

Lia.enableClosingConfirmation(); // when a match starts
Lia.disableClosingConfirmation(); // when it ends

Lia.close() from your own page closes without asking.

#Lia.disableClosingConfirmation()

Closes without asking again (the default).

#Colours

#Lia.setBackgroundColor(color)

The colour behind your page, and behind the bottom buttons. Resolves with null.

Errors: bad_color.

#Lia.setHeaderColor(color)

The colour of Lia's header over your app. Its text and buttons turn light or dark to suit. Resolves with null. Errors: bad_color.

Lia.setHeaderColor("#2F5BFF");

#Bottom buttons

#Lia.mainButton

A wide button under your page, in Lia blue unless you colour it, like Telegram's MainButton. Lia.secondaryButton is a second one beside or above it, white (or Lia's card colour) with blue text. Both are hidden until you show them.

Lia.mainButton.setParams({ text: "Buy for 5 LIA", is_visible: true });
Lia.mainButton.onClick(async function () {
  Lia.mainButton.showProgress();
  try { await buy("extra-lives"); } finally { Lia.mainButton.hideProgress(); }
});

Every method returns the button, so calls chain: Lia.mainButton.setText("Next").show().

setParams takes any of these (Telegram's names or camelCase):

It throws bad_text, bad_color, bad_text_color or bad_position for values that don't fit.

The button's state, to read:

#Lia.secondaryButton

The second bottom button. The same methods and properties as Lia.mainButton; its presses are the "secondaryButtonClicked" event.

Lia.secondaryButton.setParams({ text: "Skip", is_visible: true, position: "left" }).onClick(skip);

#Header buttons

#Lia.backButton

A back button at the start of Lia's header (in fullscreen, Lia's floating Close becomes a back button). Use it for your own screens: show it when the person goes one screen in, and go back when it's pressed. Lia doesn't navigate for you.

function openDetail(item) {
  showDetail(item);
  Lia.backButton.show();
}
Lia.backButton.onClick(function () {
  showList();
  Lia.backButton.hide();
});

While the back button shows in fullscreen, people close your app from the ⋯ menu.

#Lia.settingsButton

Adds Settings to your app's ⋯ menu. Pressing it is the "settingsButtonClicked" event. The same methods as Lia.backButton.

Lia.settingsButton.show().onClick(openSettings);