deckgo/deckdeckgo

The web open source editor for presentations

deckdeckgo's Issues

Slim or max mode

@sansan88 cool idea, two starter kit should be offered when creating a project

• slim (current one)
• max (all slides demo)

a bit like the Ionic CLI when you choose between tabs, menu or blank (maybe also blank here)

btw. markdown might be an extra option too

The template Sani Yusuf may like

Known days, author tend to add gifs in their talk, like Sani, which makes his presentation always super funny beside being super interesting

Therefore would be maybe cool, if possible to offer a template where the gif is automatically fetched from, for example, Giphy

Something where you only have to use an url and don't have to use an iframe or even image

In the <deckgo-slide-code/> the code could already be fetched from any Url, like Github, so the idea could be the same

Something like:

<deckgo-slide-gif url="https://media.giphy.com/media/gFE3wHTcpHPy0/giphy.gif>
    <h1 slot>Optional title</h1>
</deckgo-slide-gif>

The template alignment could be the same as <deckgo-slide-title/> aka centered

remote: drawing circle clear the all pane

Description

When I remote control a presentation using the remote app and when I'm drawing over my presentation, if I draw a circle it will clear the all pane.

I didn't found a solution to draw "dragging circle" on touchmove without clearing the all pane.

It should be possible to draw many circles, that would be cooler.

Lazy loaded images should be hidden per default

To lazy load images, instead of the attribute src the attribute data-src is used, therefore the browser will display them as broken images as long as they are not loaded correctly

Therefore they should be set as hidden as long as they are not processed

Moving background between X or Y slides

@sansan88 had the idea to be able to defined a moving background between slide X and Y

For example (deck children):

<img slot="background" start="2" end="3"/>
<img slot="background" start="5" end="7"/>

Something like that...

Code component in any slide

The code template should be split. One part should provide the template which offer the automatic scroll and the other part should allow to insert code in any slide

For example, I just saw a presentation where a split template was used and a small piece of code was displayed on the right pane

On the deckgo-slide-gif, the title slot should only be displayed if not fullscreen

RTL pager position

Right now the pager position is fixed to left: 0 but in case of RTL it should be positioned on the right side

If it took time to load all slides, lazy loading of first slides is by passed

Instead of lazy loading first elements on load wait for all slides being loaded

Lazy loaded images with parent doesn't inherit the right visibility

Lazy loaded images with parent doesn't inherit the right visibility which has a side effect of having them always displayed, once loaded, even if reveal option is use

<p style="visibility: hidden/initial">
<img style="visibility: initial"> <----- should be inherit
</p>

Laser pointer

Even if the UX would be better if that feature would be available when the phone is locked, what's not possible, I think I should implement @nmattia idea of a "gyroscope laser pointer"

Maybe the pointer could be activated or deactivated with a button in the app and if activated no other feature (like swiping slide) should be possible. That should avoid at least a bit some quirk, as you would have to use the feature while the phone is "open"

Also soon yesterday, instead of being a "red dot pointer" maybe the drawing could be an effect like a "torchlight" (would be cool and would need less precision)

Google Fonts

Similar to what I did to fetch the Google maps scrips in my web-google-maps I should add an option to load on the fly Google Fonts which should then be cached by the deck PWA

Aka it should be possible to specify easily a different font

Ps.: Should it be possible to use many fonts?

Add methods to start and pause Youtube video

For the moment I will only add these actions on the Youtube slide aka if the Youtube component would be use in another slide template, there won't be such methods

Password protect a presentation for remote control

Maybe it would be cool to be able to set a password to access a presentation thru the remote control

As every presentation are listed by the signaling server, maybe it would be cool to just add a small password (like four digits) to be a bit more sure to be the only one to be able to get access thru the remote control to his/her presentation

Filter ionicons

Right now all ionicons are shipped in the bundle, no problem as they are lazy loading

But the thing is, the service worker will cache all asset as soon as the network is idle, therefore the client will end up having all ionicons in his/her cache

Maybe there is a way to create a webpack plugins which find the ionicons and only copy these to the bundle/dist folder

Linked with: ionic-team/ionicons#637

Improve code vertical scrolling

The actual behavior on mobile device of the vertical scrolling on the code isn't really cool.

Instead of trying to guess the direction and stuffs, let's add a tap event which block the slider and allow the vertical scrolling. On next tap, back to horizontal scrolling

Slide author, rename imgUrl to imgSrc

I used src as property in other template, for unification reason, rename imgUrl to imgSrc

Also add an option to add a alt for the image for accessibility reason

Shaking edge on iOS

Seems that the slider, not always but time to time, also react to touch/move vertically on iOS Safari

See video https://www.dropbox.com/s/hyjnjav9y6ybru6/Datei%20von%20iOS.MP4?dl=0

UPDATE

I could reproduce the issue on my iPhone 6 after I try the code template, then it begin to shake

QR code template

As for graph, this new template/slide will need an external new web component

The idea is to be able to add a slide, mostly the last slide of a presentation, which contains a QR code which point to the URL where the talk (as a PWA) is deployed

First QR code lib research:

https://github.com/kazuhikoarase/qrcode-generator#readme
https://github.com/kazuhikoarase/qrcode-generator/tree/master/js
https://davidshimjs.github.io/qrcodejs/

https://github.com/soldair/node-qrcode

https://github.com/cozmo/jsQR

Add the ability to add a moving background for the all deck (across all slides)

Really cool, with that you could inject a really long background which move with your presentation

Not just the first slotted images should be lazy loaded

Not awesome: el.querySelectorAll('[slot] > img')
Awesome: el.querySelectorAll('[slot] img')

On iPhone, the fab buttons (draw) move sometimes even if fixed

For an unknown, for not saying weird, reason the the fab buttons (draw, bottom left) move sometimes even if their position is fixed on iPhone

On Android, no problemo

Slide youtube, video might be not lazy rendered

In case the lazyLoadContent() method of the Youtube slide is called before the initSize() method actually finish respectively before the width and height attributes are calculated, then the video might not be displayed

It isn't a blocker bug, as going forward/backward will display the video but still it need a fix

Also it happens only if the deck doesn't contains that much slides and when everything is too fast ;)

In full screen mode, hide cursor mouse after a while

When full screen mode is active, hide the cursor mouse after a while

mousestop/touchstop -> timeout ->

div.deckgo-deck {
    cursor: none;
}

mousestart/touchstart ->

div.deckgo-deck {
    cursor: initial;
}

Refactor input attributes -> src (breaking change)

I noticed that I use a bit different variable names, srcFile, url and gif for the same purpose

For simplification reason, just use a single property -> src

logo-footer-header of the brand/company

@sansan88 cool input: Add an option to add a logo/footer/header of the brand/company

Add features for the remote controller

Add features in order to user the deckdecko slider/deck in the remote control progressive web app (https://github.com/fluster/deckdeckgo-app)

Notes: For the editor and for the audience

There are two kinds of notes regarding a presentation:

• For the editor: These notes are useful during a talk as personal notes for the support of what I've got to say
• For the audience: These kinds of notes could be shipped as extra information to the slides. Like for example I do a talk, the audience get the slides and would like to get a bit more context than just a title

In both cases, notes are not displayed on the slides itself, but are extra information

The current idea for the solution is the following

• In both cases, I should be able, using for example a slot='notes', to inject notes to each slide

• For the editor: the idea is to display the notes in the PWA remote control (https://deckdeckgo.app)

• For the audience: the current idea is to add a button "more information" which, if clicked, open an Ionic modal where the extra notes are displayed

Add a template "author"

Would be cool to have a slide to present him/her-self, I guess that's common to have such a slide, at least I always do

Export missing deckdeckgo-slides.scss into the bundle

The comme style file deckdeckgo-slides.scss isn't automatically exported in the bundle as it is not related to a component. Of course it is imported and packages in the css files where it is imported but the scss itself is not part of the bundle which leads to compilation problem if the library is used in another Stencil project

In the meantime, rename the file from deckdeckgo-slides.scss to deckdeckgo-slide.scss (singular)

Improve print support

I've build a feature in order to be able to print but the result isn't that beautiful. Don't think that's the goal of this small project but still, maybe someday, sometimes, would be not that bad to improve it

Remote next and prev. slide not revealing items

Hello @peterpeterparker, trying out today the remote control and the slides which have items that should be revealed they are not when hitting next and prev. slide from the remote control.
It does work on the desktop, however when you just try this in the remote control it just goes directly to the actually next or previous slide, without hiding or showing the items.

Thank you for your nice work!

Charts template

Why not having a template to draw simple diagram

Simple venn diagram for example, or simple curve

RTL

Add the right to left support to the DeckDeckGo deck

• Inherit attribute <html dir="rtl"> to <deckgo-deck/>: done

• Slide the deck from RTL optionally (instead of LTR): done

• Add a css value direction=rtl to <deckgo-deck/>: done

• In templates where the alignment is left, set it to right: done (should be ok automatically)

• handle prev/next actions from buttons and keyboard

• slideTo should handle direction too

Reflect deck content in this PWA

As I use the same Web Component (https://github.com/fluster/deckdeckgo) to build the deck of the presentation (https://deckdeckgo.com) and in the PWA (https://deckdeckgo.app) it would be cool to reflect the content of the presentation in the app.

This would help the user to draw over the presentation more easily

I should pay attention to the ratio (for example if the app is in portrait and the deck in landscape)

[core] the countdown slide template

Description

I thought it would be cool to implement a countdown template. It could be useful when people display a template before all the talks at a meetup, like "it begin at 19:00" or "it begin 00:15 minutes"

For example idea is to create a new type of slide:

<deckgo-slide-countdown until="Friday at 7pm">
     <h1 slot="title">My presentation start at</h1>
</deckgo-slide-countdown>

Which renders a slide with a counter until it begins

My presentation start at
           07:00

or

My presentation start in
           12:14min

Tech info

This feature is something to implement in the core component as a new slide.

Get started

Interested to get involved and to try to implement this new template? Ping me if you have any questions or need help to get started, David (@peterpeterparker or twitter.com/daviddalbusco) 😃

Remote control for presentation

It could be cool to remote control deckdeckgo with your smartphone while having a presentation. One could achieve this for example with WebRTC.

I did not wrap my mind around possible UX and tech issues on creating a WebRTC P2P network ([Presentation] <-> [Remote Control]) but I think this could be a useful and very interesting thing 😄

List items not properly revealed

There was a typing error in the index.html data. All li, not direct descendant, should be considered for the reveal feature

Topics tags

A la GitHub topics tags, it would be cool to enhance the talks with meta tags about their topics (= categories)

For companies or persons doing many talks or if many presentations would be gather together, this would lead to filters and search features

Like "I filter all my talks I did about Web Component" or "I search for presentations about Ionic" etc.

Style display of codes with color highlighting

Would be cool to have the ability to integrate easily code and to style it with color (automatically?)

Swipe slider block on iOS

window.outerWidth doesn't exist on iOS, use window.innerWidth instead

also have a look to the code template

Doc website

Currently DeckDeckGo is documented in Github thru different README between this project and starter kit

It will be soon a bit difficult to follow, therefore I think it would be cool to have a new project/website/doc website to document properly

Therefore the question is what doc tool to use. It should remain easy, without db (really easy) and agnostic (no angular/react/vue etc.)

Also it would be a plus if it's possible to write the documentation with markdown

When all slides loaded, emit an event with their descriptions

When the all deck and all slides are loaded, emit an event containing their descriptions

Vertical swipe

Why not adding an option to be able to "scroll"/swipe vertically the deck?

Animate "reveal" on mobile device

Right now, what's set as "reveal" is automatically revealed (= not hidden) on mobile device. Maybe would be cool to just animate it briefly

Extract component code from template code in a separate project

The goal is to not have to load prism.js if only dekcdekcgo is used

<deckgo-deck> slot="background" -> images to be lazy loaded

Images injected with the slot="background" should also been lazy loaded

Predefined reusable slides layout

I found really cool to be totally free to code in HTML and with components a presentation, on the other side I feel like I'm always using the 3 or 4 same slides structure for each talk

It would be cool to also have to ability to use some predefined "layout" ("slide master" in Powerpoint or "layout" in Google Slides).

Important that using DeckDeckGo remains totally flexible but maybe it would help to have the ability to use predefined "templates", specially for people like me who always use the same layout or want to gain time

For example instead of (rough idea)

<ion-slide>
    <ion-card no-shadow>
        <h1>Hello</h1>
        <p>Content</p>
   </ion-card no-shadow>
</ion-slide>

might be cool to have something like

<deckdeckgo-slide>
     <deckdeckgo-title>Hello</deckdeckgo-title>
     <deckdeckgo-content>Content</deckdeckgo-content>
</deckdeckgo-slide>

or

<deckdeckgo-slide title="Hello" content="Content"></deckdeckgo-slide>

anyhow, just an idea to make the editing of slides with DeckDeckGo faster for people who want to go fast

From a technical perspective maybe these elements could/should be customElements or even web components build for example with StencilJs

But, really important, in any case they should be SEO friendly without any SSR use. It should be still possible to pack everything in an index.html file, put it online and have a SEO friendly talk

Rename toggleFullScreen into toggleFullscreen

Typo, Fullscreen not FullScreen

Split template: the slot title is somehow hidden

If I provide a title to the slot title, the title is somewhere hidden and not displayed