Merge pull request #8 from oddbird/shortcuts

Add shortcuts and other fixes, start changelog
oddbird · Dec 26, 2023 · f9830c7 · f9830c7
2 parents 6e40a91 + e21e131
commit f9830c7
Show file tree

Hide file tree

Showing 4 changed files with 312 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,29 @@
+# Changes
+
+**⚠️ This is a pre-release**:
+Breaking changes will be allowed in minor versions
+until we achieve a stable v1.0 release
+
+## v0.1.1 - unreleased
+
+- 💥 BREAKING: Updated keyboard shortcuts
+  to match [PowerPoint](https://support.microsoft.com/en-us/office/use-keyboard-shortcuts-to-deliver-powerpoint-presentations-1524ffce-bd2a-45f4-9a7f-f18b992b93a0#bkmk_frequent_macos),
+  including `command-.` as 'end presentation'
+  rather than 'toggle full-screen' (now `command-shift-f`)
+- 🚀 NEW: Support for blank-screen shortcuts
+  (inspired by [Curtis Wilcox](https://codepen.io/ccwilcox/details/NWJWwOE))
+- 🚀 NEW: Both start/resume events target active slides
+- 🚀 NEW: Control panel includes toggle for keyboard controls
+- 🚀 NEW: Control panel buttons have `aria-pressed` styles
+- 🚀 NEW: All slide-event buttons that toggle a boolean state
+  get `aria-pressed` values that update with the state
+- 🐞 FIXED: Scroll to the active slide when changing views
+- 🐞 FIXED: Control panel view toggles were broken
+- 🐞 FIXED: Control panel prevents propagation of keyboard shortcuts
+- 👀 INTERNAL: The current slide is stored in an `activeSlide` property
+
+## v0.1.0 - 2023-12-22
+
+Initial draft
+based on
+[Miriam's Proof of Concept](https://codepen.io/miriamsuzanne/pen/eYXOLjE?editors=1010).
diff --git a/README.md b/README.md
@@ -4,6 +4,10 @@ A Web Component for web presentations.
 
 **[Demo](https://slide-deck.netlify.app)**
 
+**⚠️ This is a pre-release**:
+Breaking changes will be allowed in minor versions
+until we achieve a stable v1.0 release
+
 ## Examples
 
 General usage example:
@@ -67,6 +71,29 @@ This Web Component allows you to:
 - Follow along in a second tab (speaker view)
 - Toggle full-screen mode
 
+## Keyboard Shortcuts
+
+Always available:
+
+- `command-k`: Toggle control panel
+- `command-shift-enter`: Start presentation (from first slide)
+- `command-enter`: Resume presentation (from active slide)
+- `command-.`: End presentation
+- `command-shift-f`: Toggle full-screen mode
+
+When presenting (key-control is active):
+
+- `N`/`rightArrow`/`downArrow`/`pageDown`: Next slide
+- `P`/`leftArrow`/`upArrow`/`pageUp`: Previous slide
+- `home`: First slide
+- `end`: Last slide
+- `W`/`,`: Toggle white screen
+- `B`/`.`: Toggle black screen
+- `escape`: Blur focused element, close control panel, or end presentation
+
+These are based on
+the [PowerPoint shortcuts](https://support.microsoft.com/en-us/office/use-keyboard-shortcuts-to-deliver-powerpoint-presentations-1524ffce-bd2a-45f4-9a7f-f18b992b93a0#bkmk_frequent_macos).
+
 ## Installation
 
 You have a few options (choose one of these):

diff --git a/index.html b/index.html
@@ -10,28 +10,67 @@
   </head>
   <body>
     <slide-deck id="my-slides" key-control>
-      <header><h1>Slide-Deck Web Component</h1></header>
+      <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>No Dependencies</h2></div>
       <div><h2>Progressive Enhancement</h2></div>
       <div><h2>Just HTML</h2></div>
       <div><h2>Keyboard Shortcuts</h2></div>
       <div>
         <h3>Always available:</h3>
         <ul>
-          <li><strong>command-k</strong>: control panel</li>
-          <li><strong>command-period</strong>: fullscreen</li>
+          <li><strong>command-k</strong>: Toggle control panel</li>
+          <li><strong>command-shift-enter</strong>: Start presentation (from first slide)</li>
+          <li><strong>command-enter</strong>: Resume presentation (from active slide)</li>
+          <li><strong>command-shift-f</strong>: Toggle full-screen mode</li>
+          <li>
+            <strong>command-.</strong>:
+            End presentation
+          </li>
         </ul>
       </div>
       <div>
         <h3>Active Presentation:</h3>
         <ul>
           <li>
-            <strong>right-arrow</strong>/<strong>page-down</strong>:
-            next slide
+            <strong>N</strong>
+            / <strong>right-arrow</strong>
+            / <strong>down-arrow</strong>
+            / <strong>page-down</strong>:
+            Next slide
+          </li>
+          <li>
+            <strong>P</strong>
+            / <strong>left-arrow</strong>
+            / <strong>up-arrow</strong>
+            / <strong>page-up</strong>:
+            Previous slide
+          </li>
+          <li>
+            <strong>home</strong>:
+            First slide
+          </li>
+          <li>
+            <strong>end</strong>:
+            Last slide
+          </li>
+          <li>
+            <strong>W</strong>
+            / <strong>,</strong>:
+            Toggle white screen
+          </li>
+          <li>
+            <strong>B</strong>
+            / <strong>.</strong>:
+            Toggle black screen
           </li>
           <li>
-            <strong>left-arrow</strong>/<strong>page-up</strong>:
-            previous slide
+            <strong>escape</strong>:
+            Blur focused element, close control panel, or end presentation
           </li>
         </ul>
       </div>
@@ -53,18 +92,17 @@ <h2><code>&lt;button set-view&gt;list&lt;button&gt;</code></h2>
         </div>
       </div>
       <div><h2>Speaker View</h2></div>
-      <div><h2>Open Source</h2></div>
       <div>
-        <h3>ToDo: Github Repo</h3>
-        <p>(and NPM package??)</p>
+        <h2>Open Source</h2>
+        <p>
+          <a href="https://github.com/oddbird/slide-deck/">github.com/oddbird/slide-deck/</a>
+        </p>
       </div>
-      <div><h3>ToDo: Full Documentation</h3></div>
-      <div><h3>ToDo: Improved</h3></div>
-      <div><h3>ToDo: Speaker Notes</h3></div>
-      <div><h3>ToDo: Slide Templates</h3></div>
-      <div><h3>ToDo: CSS Themes</h3></div>
-      <div><h3>ToDo: More Shortcuts</h3></div>
-      <div><h3>ToDo: More Better Good Stuff</h3></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>