Merge pull request #11 from oddbird/parts

Add slide parts (and mark private methods)

CHANGELOG.md

@@ -6,10 +6,18 @@ until we achieve a stable v1.0 release
 
 ## v0.1.2 - unreleased
 
+- 🚀 NEW: Set `aria-current='true'` on active slide
+- 🚀 NEW: Add support for slide parts – `slide-canvas` & `slide-note`
+- 🚀 NEW: Each slide is labeled with either
+  `slide-item='container'` (if it has nested parts)
+  or `slide-item='canvas' slide-canvas` (if there are no nested parts)
+- 🚀 NEW: The slide-deck has a `--slide-count` property,
+  and each slide has a `--slide-index`
 - 💥 BREAKING: Removed the shadow DOM content wrapper,
   and all shadow DOM styles
-- 💥 BREAKING: Renamed and added control-panel parts,
+- 🚀 NEW / 💥 BREAKING: Renamed and added control-panel parts,
   to allow for more customization of the default panel
+  including pressed buttons with `:part(button pressed)`
 - 🚀 NEW: Default styles are in `slide-deck.css`
   and can be applied from the light DOM
 - 🚀 NEW: The entire control panel can be replaced

README.md

@@ -108,22 +108,25 @@ Make sure you include the `<script>` in your project (choose one of these):
 
 ```html
 <!-- Host yourself -->
+<link rel="stylesheet" href="slide-deck.css">
 <script type="module" src="slide-deck.js"></script>
 ```
 
 ```html
 <!-- 3rd party CDN, not recommended for production use -->
+<link rel="stylesheet" href="https://www.unpkg.com/@oddbird/slide-deck/slide-deck.css">
 <script
   type="module"
-  src="https://www.unpkg.com/@oddbird/slide-deck@0.1.0/slide-deck.js"
+  src="https://www.unpkg.com/@oddbird/slide-deck/slide-deck.js"
 ></script>
 ```
 
 ```html
 <!-- 3rd party CDN, not recommended for production use -->
+<link rel="stylesheet" href="https://esm.sh/@oddbird/slide-deck/slide-deck.css">
 <script
   type="module"
-  src="https://esm.sh/@oddbird/slide-deck@0.1.0"
+  src="https://esm.sh/@oddbird/slide-deck"
 ></script>
 ```
 

custom-panel.html

@@ -14,7 +14,8 @@
       <dialog slot="control-panel">
         <div>
           <button set-view>grid</button>
-          <button set-view>list</button>
+          <button set-view>solo</button>
+          <button set-view>script</button>
           <form method="dialog"><button>close</button></form>
         </div>
       </dialog>

index.html

@@ -18,8 +18,49 @@ <h1>Slide-Deck Web Component</h1>
         </p>
       </header>
       <div><h2>No Dependencies</h2></div>
-      <div><h2>Progressive Enhancement</h2></div>
-      <div><h2>Just HTML</h2></div>
+      <div>
+        <div slide-canvas>
+          <h2>Progressive Enhancement</h2>
+        </div>
+        <div slide-note>
+          <p>
+            Some slide notes are very short. Little reminders.
+          </p>
+        </div>
+      </div>
+      <div>
+        <div slide-canvas>
+          <h2>Just HTML</h2>
+        </div>
+        <div slide-note>
+          <h2>
+            Slide notes are also HTML
+          </h2>
+          <p>
+            In script view the active slide-item will have a larger canvas size
+            and the font-size of an active slides speaker notes is increased
+            for easier readability.
+          </p>
+
+          <h3>
+            This is a heading level 3
+          </h3>
+
+          <p>
+            This paragraph exists to test a <strong>variety of content</strong> 
+            within <em>slide-notes</em>. While some slides may not have any 
+            notes at all, others may have extremely verbose notes and may 
+            contain many details.
+          </p>
+
+          <blockquote>
+            <p>
+              Blockquote example within the slide-notes to test a few different 
+              content types.
+            </p>
+          </blockquote>
+        </div>
+      </div>
       <div><h2>Keyboard Shortcuts</h2></div>
       <div>
         <h3>Always available:</h3>
@@ -83,14 +124,14 @@ <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>
-        <h2><code>&lt;button set-view&gt;list&lt;button&gt;</code></h2>
+        <h2><code>&lt;button set-view&gt;solo&lt;button&gt;</code></h2>
         <div>
-          <button set-view>list</button>
+          <button set-view>solo</button>
           <button set-view>grid</button>
+          <button set-view>script</button>
         </div>
       </div>
       <div>
@@ -104,12 +145,43 @@ <h2>Open Source</h2>
           <a href="https://github.com/oddbird/slide-deck/">github.com/oddbird/slide-deck/</a>
         </p>
       </div>
+
+      <div>
+        <div slide-canvas>
+          <h2>Speaker Notes</h2>
+          <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>
+          <p>
+            Within a slide element,
+            we can provide both a 'canvas' and a 'note'!
+            For styling purposes:
+          </p>
+          <ul>
+            <li>
+              A slide with internal parts
+              will be labeled
+              as a <code>slide-item="container"</code>
+            </li>
+            <li>
+              A slide without nested parts
+              will get both <code>slide-item="canvas"</code>
+              and also the <code>slide-canvas</code> attribute
+            </li>
+          </ul>
+        </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>
     </slide-deck>
-
   </body>
 </html>

slide-deck.css

@@ -3,43 +3,98 @@ slide-deck {
   container: slide-deck / inline-size;
   display: grid;
 
-  &[slide-view=grid] {
+  &[slide-view=grid],
+  &[slide-view=script] {
     --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));
+    --target-outline: medium dotted;
+    --target-outline-offset: calc(var(--gap) * 0.5);
+    gap: var(--row-gap, var(--gap)) var(--column-gap, var(--gap));
     padding: var(--gap);
   }
 
-  &[slide-view=list] {
-    --slide-height: 100svh;
+  &[slide-view=grid] {
+    --slide-note-margin-block: var(--gap);
+    grid-template-columns: repeat(auto-fill, minmax(min(50ch, 100%), 1fr));
+  }
+
+  &[slide-view=solo] {
+    grid-auto-rows: 100svh;
+
+    [slide-item='container'] {
+      display: grid;
+    }
+
+    [slide-note] {
+      display: none;
+    }
+  }
+
+  &[slide-view=script] {
+    --column-gap: calc(1.25em + 2vw);
+    --row-gap: 5em;
+    display: grid;
+
+    @media (width >= 60em) {
+      grid-template-columns: minmax(30vw, auto) minmax(65vw, 1fr);
+    }
+
+    [slide-item='container'] {
+      align-items: center;
+      display: grid;
+      grid-column: 1 / -1;
+      grid-template-columns: subgrid;
+    }
+
+    [slide-canvas] {
+      grid-column: 1;
+      scale: var(--scaled-slide, 0.80);
+    }
+
+    [slide-note] {
+      font-size: var(--note-font-size, 120%);
+      grid-column: 2;
+      max-width: 75ch;
+      padding-inline: var(--gap);
+    }
+
+    [slide-item]:target {
+      --note-font-size: 160%;
+      --scaled-slide: 1;
+    }
   }
 
   &[blank-slide]::after {
-    content: '';
     background-color: var(--blank-color, black);
-    position: absolute;
+    content: '';
     inset: 0;
+    position: absolute;
   }
 
   &[blank-slide=white] {
     --blank-color: white;
   }
 
-  [id^=slide_] {
+  [slide-item] {
+    scroll-margin-block: var(--target-margin);
+  }
+
+  [aria-current='true'][slide-canvas],
+  [aria-current='true'] [slide-canvas] {
+    outline: var(--target-outline);
+    outline-offset: var(--target-outline-offset);
+  }
+
+  [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(--slide-note-margin-block);
   }
 
   &::part(control-panel) {
@@ -61,13 +116,13 @@ slide-deck {
 
   button,
   &::part(button) {
+    border: medium solid transparent;
     font: inherit;
     padding-inline: var(--gap);
-    border: medium solid transparent;
   }
 
   [aria-pressed=true],
-  &::part(button pressed) {
+  &::part(pressed) {
     border-color: currentColor;
   }
 }