@oddbird/slide-deck - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

CHANGELOG.md

@@ -7,2 +7,19 @@ # Changes
 
+## v0.1.3 - 2024-02-13
+
+- 💥 BREAKING: All events and `slide-event` controls use
+  lowercase hyphenated names, for consistency with html conventions
+  (`toggleControl` -> `toggle-control`,
+  `toggleFollow` -> `toggle-follow`,
+  `toggleFullscreen` -> `toggle-fullscreen`)
+- 🚀 NEW: Use the `to-slide` attribute on buttons in the slide deck
+  to move focus to any slide -- either the parent slide of the button,
+  or the slide index given as a value of the attribute
+- 🚀 NEW: Custom `goToSlide` event accepts an integer value
+  in the `event.detail` property
+- 🚀 NEW: `--slide-count-string` and `--slide-index-string`
+  can be used for CSS generated content
+- 🐞 FIXED: Less nesting for lower specificity in the `slide-deck.css` theme
+- 🐞 FIXED: Provide shadow-DOM control-panel styles
+
 ## v0.1.2 - 2024-01-16
@@ -9,0 +26,0 @@

package.json

 {
   "name": "@oddbird/slide-deck",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A Web Component for web presentations",
@@ -5,0 +5,0 @@ "main": "slide-deck.js",

slide-deck.js

@@ -16,3 +16,3 @@ class slideDeck extends HTMLElement {
           <div part="controls">
-            <button part="button" slide-event='toggleControl'>
+            <button part="button" slide-event='toggle-control'>
               keyboard navigation
@@ -28,7 +28,7 @@ </button>
             <button part="button event" slide-event>
+              resume
+            </button>
+            <button part="button event" slide-event>
               reset
             </button>
-            <button part="button event" slide-event="joinWithNotes">
-              speaker view
-            </button>
 
@@ -68,2 +68,37 @@ <hr>
     shadowStyle.replaceSync(`
+      [part=control-panel] {
+        --sd-panel-gap: clamp(8px, 0.25em + 1vw, 24px);
+        min-width: min(50ch, 100%);
+        padding: 0;
+      }
+
+      [part=panel-header] {
+        align-items: center;
+        border-block-end: thin solid gray;
+        display: grid;
+        gap: var(--sd-panel-gap);
+        grid-template-columns: 1fr auto;
+        padding: var(--sd-panel-gap);
+      }
+
+      [part=controls] {
+        padding: var(--sd-panel-gap);
+      }
+
+      hr {
+        border-block-start: thin dotted gray;
+        border-block-end: none;
+        margin-block: 1lh;
+      }
+
+      [part~=button] {
+        border: medium solid transparent;
+        font: inherit;
+        padding-inline: var(--sd-panel-gap);
+
+        &[aria-pressed=true] {
+          border-color: currentColor;
+        }
+      }
+
       [part=blank-slide],
@@ -170,2 +205,3 @@ ::slotted([slot=blank-slide]) {
   #viewButtons;
+  #goToButtons;
   #body;
@@ -182,3 +218,2 @@
         this.#followActiveChange();
-        this.#updateEventButtons();
         break;
@@ -218,2 +253,3 @@ case 'slide-view':
     this.#setupViewButtons();
+    this.#setupGoToButtons();
 
@@ -238,16 +274,17 @@ // shadow DOM event listeners
     // custom events
-    this.addEventListener('toggleControl', (e) => this.toggleAttribute('key-control'));
-    this.addEventListener('toggleFollow', (e) => this.toggleAttribute('follow-active'));
-    this.addEventListener('toggleFullscreen', (e) => this.fullScreenEvent());
+    this.addEventListener('toggle-control', (e) => this.toggleAttribute('key-control'));
+    this.addEventListener('toggle-follow', (e) => this.toggleAttribute('follow-active'));
+    this.addEventListener('toggle-fullscreen', (e) => this.fullScreenEvent());
 
     this.addEventListener('join', (e) => this.joinEvent());
-    this.addEventListener('joinWithNotes', (e) => this.joinWithNotesEvent());
     this.addEventListener('start', (e) => this.startEvent());
     this.addEventListener('resume', (e) => this.resumeEvent());
     this.addEventListener('reset', (e) => this.resetEvent());
-    this.addEventListener('blankSlide', (e) => this.blankSlideEvent());
+    this.addEventListener('blank-slide', (e) => this.blankSlideEvent());
+    this.addEventListener('join-with-notes', (e) => this.joinWithNotesEvent());
 
     this.addEventListener('next', (e) => this.move(1));
-    this.addEventListener('savedSlide', (e) => this.goToSaved());
+    this.addEventListener('saved-slide', (e) => this.goToSaved());
     this.addEventListener('previous', (e) => this.move(-1));
+    this.addEventListener('to-slide', (e) => this.goTo(e.detail));
   };
@@ -264,2 +301,4 @@
   // setup methods
+  #cleanString = (str) => str.trim().toLowerCase();
+
   #newDeckId = (from, count) => {
@@ -291,2 +330,3 @@ const base = from || window.location.pathname.split('.')[0];
     this.style.setProperty('--slide-count', this.slideCount);
+    this.style.setProperty('--slide-count-string', `'${this.slideCount}'`);
 
@@ -297,2 +337,3 @@ this.slides.forEach((slide, index) => {
       slide.style.setProperty('--slide-index', slideIndex);
+      slide.style.setProperty('--slide-index-string', `'${slideIndex}'`);
 
@@ -334,3 +375,5 @@ if (slide.querySelector(':scope [slide-canvas]')) {
 
-  #getButtonValue = (btn, attr) => btn.getAttribute(attr) || btn.innerText;
+  #getButtonValue = (btn, attr, lower=true) => this.#cleanString(
+    btn.getAttribute(attr) || btn.innerText
+  );
 
@@ -361,2 +404,19 @@ #setButtonPressed = (btn, isPressed) => {
 
+  #setupGoToButtons = () => {
+    this.#goToButtons = this.#findButtons('to-slide');
+
+    this.#goToButtons.forEach((btn) => {
+      const btnValue = btn.getAttribute('to-slide');
+      const btnSlide = btn.closest("[slide-item]");
+
+      const toSlide = btnValue
+        ? this.#asSlideInt(btnValue)
+        : this.#indexFromId(btnSlide.id);
+
+      btn.addEventListener('click', (e) => {
+        this.goTo(toSlide);
+      });
+    });
+  }
+
   #setupViewButtons = () => {
@@ -405,5 +465,5 @@ this.#viewButtons = this.#findButtons('set-view');
       let isActive = {
-        'toggleControl': this.keyControl,
-        'toggleFollow': this.followActive,
-        'toggleFullscreen': this.fullScreen,
+        'toggle-control': this.keyControl,
+        'toggle-follow': this.followActive,
+        'toggle-fullscreen': this.fullScreen,
       }
@@ -434,2 +494,6 @@
 
+  resetEvent = () => {
+    this.goTo(1);
+  }
+
   joinWithNotesEvent = () => {
@@ -446,6 +510,2 @@ this.setAttribute('slide-view', 'script');
 
-  resetEvent = () => {
-    this.goTo(1);
-  }
-
   blankSlideEvent = (color) => {
@@ -452,0 +512,0 @@ if (this.#blankSlide.open) {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78503

increased by2.52%

Lines of code

650

increased by4.5%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes