ruphin / slidem

Web Component based Presentation Library
https://slidem.ruph.in
MIT License
18 stars 3 forks source link

Replace progress dots with `<sl-progress-bar>` #51

Open bennypowers opened 1 year ago

bennypowers commented 1 year ago

https://shoelace.style/components/progress-bar

see https://bennypowers.dev/decks/devconf-brno-2023 for an example

ruphin commented 1 year ago

That's a great feature, I love it. I'm not sure if it should be composeable (i.e. something you slot into the deck) or if it should be embedded inside the deck. I wouldn't mind either way I think.

I think the minimum requirements would be being able to configure the height and colour (with opacity) at the deck level, and have a way to hide the progress bar as an option on individual slides. And obviously it should be an opt-in feature that's set at the deck level.

On Tue, Jun 20, 2023, 12:09 Benny Powers @.***> wrote:

https://shoelace.style/components/progress-bar

see https://bennypowers.dev/decks/devconf-brno-2023 for an example

— Reply to this email directly, view it on GitHub https://github.com/ruphin/slidem/issues/51, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAQJSRSY2NMVVMQLDBJ4KDXMFZHHANCNFSM6AAAAAAZNBM2S4 . You are receiving this because you are subscribed to this thread.Message ID: @.***>

bennypowers commented 1 year ago

height, color, opacity, etc are all configurable with css html composability is easy with slot default content, the js apis are a little trickier, so users that slot in their own progress would need to write their own event listener

hiding on individual slides could likewise be with some javascript, or perhaps by reflecting the slide number/name to the deck element

ruphin commented 1 year ago

I think the deck can handle most of these things. It can know the total number of steps and the current step. It can also check the active slide if the progress bar should be hidden. If it's composed, it can control the slotted progress bar and feed it the right state.

The difficult part is that we have to align on a single interface for the slotted progress bar. I.e. it needs some standard method to set the total number of steps, and the current step. So not all custom progress bars will work by default, they would have to adhere to this interface. But it would probably be trivial to write a wrapper for any progress bar that does that

On Tue, Jun 20, 2023, 12:35 Benny Powers @.***> wrote:

height, color, opacity, etc are all configurable with css html composability is easy with slot default content, the js apis are a little trickier, so users that slot in their own progress would need to write their own event listener

hiding on individual slides could likewise be with some javascript, or perhaps by reflecting the slide number/name to the deck element

— Reply to this email directly, view it on GitHub https://github.com/ruphin/slidem/issues/51#issuecomment-1598526204, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAQJSVETHZODUPCA65SMMLXMF4FZANCNFSM6AAAAAAZNBM2S4 . You are receiving this because you commented.Message ID: @.***>