Feature 330 Interaction

Full Screen Mode โหมดเต็มหน้าจอ

Show the whole app or a single panel in full screen with the Fullscreen API.

Live demo

Everything here talks to the real Spring Boot + SQL Server back end.

not full screen Shortcut: F · exit with Esc

Stock by category (SUM(stock) GROUP BY category)

Stock by category
Audio	2043
Cameras	1891
Computers	2289
Gaming	1772
Home	1674
Outdoor	1951
Phones	1913
Wearables	1954

What to notice

element.requestFullscreen() must be called from a user click or key press.
fullscreenchange keeps the button icon in sync, even when Esc is used.
:fullscreen CSS restyles the element while it fills the screen.

Try it

Press F or the button in the top bar.
Make just the chart card full screen.

Source code

4 parts, read from the files in this project

src/main/resources/templates/demos/l330.html A card that can go full screen on its own

<div class="panel fs-card" id="chartCard">
  <div class="row" style="margin-bottom:.75rem">
    <h3 style="margin:0">Stock by category <span class="muted small">(SUM(stock) GROUP BY category)</span></h3>
    <span class="spacer"></span>
    <button class="icon-btn" type="button" id="fsChartInline" aria-label="Full screen" data-tip="Full screen"><svg class="i fs-off"><use href="#i-maximize"/></svg><svg class="i fs-on"><use href="#i-minimize"/></svg></button>
  </div>
  <svg class="chart" id="stockChart" viewBox="0 0 800 300" role="img" aria-label="Bar chart of stock by category"></svg>
  <!-- The numbers as a table: screen readers read it, and demos.js draws the bars from it. -->
  <table class="sr-only" id="stockTable">
    <caption>Stock by category</caption>
    <tr th:each="s : ${stats}"><th th:text="${s.category}">c</th><td th:text="${s.stock}">1</td></tr>
  </table>
</div>

src/main/resources/static/css/app.css :fullscreen styles the element while it fills the screen

.fs-card:fullscreen { background: var(--surface); padding: 2rem; overflow: auto; display: flex; flex-direction: column; justify-content: center; }
.fs-card:fullscreen .chart { max-width: 70rem; margin: 0 auto; width: 100%; }
::backdrop { background: var(--bg); }
.chart { width: 100%; height: auto; }
.chart .bar { fill: var(--primary); transition: opacity .2s; }
.chart .bar:hover { opacity: .8; }
.chart text { fill: var(--text-2); font-size: 12px; font-family: var(--font); }
.chart .grid-line { stroke: var(--border); }

src/main/resources/static/js/core.js requestFullscreen / exitFullscreen and keeping the icon in sync

const fullscreen = {
  async toggle(el = root) {
    try {
      if (document.fullscreenElement) await document.exitFullscreen();
      else await el.requestFullscreen({ navigationUI: 'hide' });
    } catch (e) {
      toast({ type: 'warning', title: 'Full screen not available', message: e.message });
    }
  },
  get active() { return !!document.fullscreenElement; }
};
document.addEventListener('fullscreenchange', () => {
  root.classList.toggle('is-fullscreen', !!document.fullscreenElement); // also runs when the user presses Esc
});

src/main/resources/static/js/demos.js Full screen for one element, and a status that follows fullscreenchange

const card = $('#chartCard'), pic = $('#fsPicture');
$('#fsChart').addEventListener('click', () => UI.fullscreen.toggle(card));
$('#fsChartInline').addEventListener('click', () => UI.fullscreen.toggle(card));
$('#fsImage').addEventListener('click', () => UI.fullscreen.toggle(pic));
pic.addEventListener('click', () => UI.fullscreen.toggle(pic));
document.addEventListener('fullscreenchange', () => {
  const el = document.fullscreenElement;
  $('#fsState').textContent = !el ? 'not full screen' : el === document.documentElement ? 'whole app' : el === card ? 'chart only' : 'picture only';
  $('#fsState').className = 'chip' + (el ? ' chip-primary' : '');
});