Merge in changes from #10

oddbird · Jan 4, 2024 · 42a562a · 42a562a
2 parents a82b69b + 23afeca
commit 42a562a
Show file tree

Hide file tree

Showing 5 changed files with 269 additions and 168 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,13 +6,27 @@ until we achieve a stable v1.0 release
 
 ## v0.1.2 - unreleased
 
-- 🚀 NEW: Add support for slide parts – `slide-frame` & `slide-note`
+- 🚀 NEW: Add support for slide parts – `slide-canvas` & `slide-note`
   (these parts require light DOM styles)
 - 🚀 NEW: Slide parts can be hidden
-  with the `hide-parts="note | frame"` attribute
+  with the `hide-parts="note | canvas"` attribute
   (both parts cannot be hidden at the same time)
-- 🚀 NEW: Add support for `hide-part="note | frame"` buttons
-  to toggle hiding the notes and frames
+- 🚀 NEW: Add support for `hide-part="note | canvas"` buttons
+  to toggle hiding the notes and canvass
+- 💥 BREAKING: Removed the shadow DOM content wrapper,
+  and all shadow DOM styles
+- 💥 BREAKING: Renamed and added control-panel parts,
+  to allow for more customization of the default panel
+- 🚀 NEW: Default styles are in `slide-deck.css`
+  and can be applied from the light DOM
+- 🚀 NEW: The entire control panel can be replaced
+  from the light DOM using `slot=control-panel`
+  on a slotted `dialog` element
+- 🐞 FIXED: Slotted controls are no longer treated as slides
+- 🚀 NEW: When `key-control` is activated (including on-load),
+  we target the stored active slide (or the first slide)
+- 🐞 FIXED: When restoring the active slide from memory,
+  we go to the first slide if there's no stored state
 
 ## v0.1.1 - 2023-12-26
 

diff --git a/custom-panel.html b/custom-panel.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" style="color-scheme: light dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Demo of slide-deck Web Component" />
+    <title>Slide-Deck Web Component Demo</title>
+    <link rel="stylesheet" href="slide-deck.css">
+    <style>body { margin: 0; }</style>
+    <script type="module" src="slide-deck.js"></script>
+  </head>
+  <body>
+    <slide-deck id="my-slides" key-control>
+      <dialog slot="control-panel">
+        <div>
+          <button set-view>grid</button>
+          <button set-view>list</button>
+          <form method="dialog"><button>close</button></form>
+        </div>
+      </dialog>
+      <header>
+        <h1>Slide-Deck Web Component</h1>
+        <p>
+          <a href="https://github.com/oddbird/slide-deck/">github.com/oddbird/slide-deck/</a>
+        </p>
+      </header>
+      <div>
+        <h2>Custom Control Panel</h2>
+        <p><strong>command-k</strong> to open</p>
+      </div>
+      <div>
+        <a href="./index.html">Back to demo</a>
+      </div>
+    </slide-deck>
+
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="color-scheme: light dark">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Demo of slide-deck Web Component" />
     <title>Slide-Deck Web Component Demo</title>
-
+    <link rel="stylesheet" href="slide-deck.css">
+    <style>body { margin: 0; }</style>
     <script type="module" src="slide-deck.js"></script>
   </head>
   <body>
@@ -82,6 +83,7 @@ <h2><code>&lt;button slide-event&gt;previous&lt;button&gt;</code></h2>
           <button slide-event>previous</button>
           <button slide-event>next</button>
           <button slide-event="start">restart</button>
+          <button slide-event="toggleView">toggle view</button>
         </div>
       </div>
       <div>
@@ -91,6 +93,10 @@ <h2><code>&lt;button set-view&gt;list&lt;button&gt;</code></h2>
           <button set-view>grid</button>
         </div>
       </div>
+      <div>
+        <h2>Custom Control Panel</h2>
+        <a href="./custom-panel.html">Example</a>
+      </div>
       <div><h2>Speaker View</h2></div>
       <div>
         <h2>Open Source</h2>
@@ -100,37 +106,51 @@ <h2>Open Source</h2>
       </div>
 
       <div>
-        <style>
-          style ~ [slide-frame] {
-            aspect-ratio: 16/9;
-            border: thin dotted maroon;
-            padding: 1em;
-          }
-          style ~ [slide-note] {
-            padding-block: 0.5lh;
-          }
-        </style>
-        <div slide-frame>
+        <div slide-canvas>
           <h2>Speaker Notes</h2>
-          <pre><code>&lt;div slide-frame&gt;
-  This slide has both a frame
-&lt;/div&gt;
-&lt;div slide-note&gt;
-  And a section for notes
+          <pre><code>&lt;div&gt;
+  &lt;div slide-canvas&gt;
+    This slide has both a canvas
+  &lt;/div&gt;
+  &lt;div slide-note&gt;
+    And a section for notes
+  &lt;/div&gt;
 &lt;/div&gt;</code></pre>
         </div>
         <div slide-note>
-          We can also add notes to slides.
-          But the frame can't be styled
-          by shadow DOM CSS,
-          so this format is
-          <em>bring-your-own-styles</em>.
-          That also means we can use the
-          parent element as a container!
+          <p>
+            Within a slide element,
+            we can provide both a 'canvas' and a 'note'!
+            For styling purposes:
+          </p>
+          <ul>
+            <li>
+              A slide without nested parts
+              will be labeled
+              with the <code>slide-canvas</code> attribute
+            </li>
+            <li>
+              A slide with internal parts
+              will be labeled
+              as a <code>slide-container</code> instead
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div>
+        <div slide-canvas>
+          <h3>Hiding parts</h3>
+          <button hide-part="note">hide notes</button>
+          <button hide-part="canvas">hide canvas</button>
+        </div>
+        <div slide-note>
+          <p>
+            These parts can be shown or hidden separately,
+            but you can never hide both at once.
+          </p>
         </div>
       </div>
       <div><h2>To Do…</h2></div>
-      <div><h3>… Speaker Notes</h3></div>
       <div><h3>… Slide Templates</h3></div>
       <div><h3>… CSS Themes</h3></div>
       <div><h3>… More Better Good Stuff</h3></div>

diff --git a/slide-deck.css b/slide-deck.css
@@ -0,0 +1,77 @@
+slide-deck {
+  --gap: clamp(8px, 0.25em + 1vw, 16px);
+  container: slide-deck / inline-size;
+  display: grid;
+
+  &[slide-view=grid] {
+    --slide-ratio: 16/9;
+    --target-outline: medium dotted;
+    --target-margin: var(--gap);
+    gap: var(--gap);
+    grid-template-columns: repeat(auto-fill, minmax(min(50ch, 100%), 1fr));
+    padding: var(--gap);
+  }
+
+  &[slide-view=list] {
+    --slide-height: 100svh;
+  }
+
+  &[blank-slide]::after {
+    content: '';
+    background-color: var(--blank-color, black);
+    position: absolute;
+    inset: 0;
+  }
+
+  &[blank-slide=white] {
+    --blank-color: white;
+  }
+
+  [slide-canvas] {
+    aspect-ratio: var(--slide-ratio);
+    border: thin solid;
+    box-sizing: border-box;
+    container: slide-item / inline-size;
+    min-height: var(--slide-height);
+    padding: var(--gap);
+    scroll-margin-block: var(--target-margin);
+
+    &:target {
+      outline: var(--target-outline);
+      outline-offset: calc(var(--gap) * 0.5);
+    }
+  }
+
+  [slide-note] {
+    margin-block: var(--gap);
+  }
+
+  &::part(control-panel) {
+    min-width: min(50ch, 100%);
+    padding: 0;
+  }
+
+  &::part(panel-header) {
+    border-block-end: thin solid;
+    display: grid;
+    gap: var(--gap);
+    grid-template-columns: 1fr auto;
+    padding: var(--gap);
+  }
+
+  &::part(controls) {
+    padding: var(--gap);
+  }
+
+  button,
+  &::part(button) {
+    font: inherit;
+    padding-inline: var(--gap);
+    border: medium solid transparent;
+  }
+
+  [aria-pressed=true],
+  &::part(pressed) {
+    border-color: currentColor;
+  }
+}