Check layout on initial load, doc

sass · Sep 27, 2024 · cddf61d · cddf61d
1 parent 8757e2f
commit cddf61d
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/source/assets/js/playground/split-view.ts b/source/assets/js/playground/split-view.ts
@@ -1,10 +1,17 @@
 import {SplitView} from '@spectrum-web-components/split-view';
 import '@spectrum-web-components/split-view/sp-split-view.js';
 
-export default function setup(): void {
+/**
+ * Make split views responsive and stack vertically on narrow screens.
+ */
+export default function setupSplitView(): void {
+  // 60em = --sl-breakpoint--large
   const mql = window.matchMedia('(max-width: 60em');
-  mql.addEventListener('change', event => {
-    const topSplit = document.querySelector('.sl-c-playground') as SplitView;
+  const topSplit = document.querySelector('.sl-c-playground') as SplitView;
+
+  function updateLayout(event: MediaQueryListEvent | MediaQueryList): void {
     if (topSplit) topSplit.vertical = event.matches;
-  });
+  }
+  updateLayout(mql);
+  mql.addEventListener('change', updateLayout);
 }