split template: add top/bottom orientation

[peterpeterparker]

Description

The "split" template (https://docs.deckdeckgo.com/slides/split), display currently the content in two columns "left/right".

The idea would be to add a new options in order to be able to display the content in two rows "top/bottom"

This enhancement should find place in the related slide web component.

Once implemented, the option could be added our editor ("studio").

Questions

1. About the implementation in the editor, for simplicity reason, should we add the "bottom/top" as an option of the split template (new button for option which link to a right popover with the option) or should we "just" add two different templates style in the list of selectable template ("when user add a new slide")

2. Should we go one step further and add more options to the templates for example to be able to display "left/right" on desktop/projector and for the same content "top/bottom" on mobile/tablet. Maybe, to ease the development, if this is cool, we could do that later in another issue?

[timrodz]

Heya! I'd be happy to take on this issue. Just found about DeckDeckGo today and I must say it looks great! The docs are superb too. 🕺

[peterpeterparker]

Awesome @timrodz and happy to here the docs is cool 👍

It would be super neat if you could give a hand.

You could find the source of the "split slide/template" in https://github.com/deckgo/deckdeckgo/tree/master/webcomponents/slides/split

git clone your-fork-of-deckdeckgo
cd deckdeckgo/webcomponents/slides/split
npm install
npm run start

http://localhost:3333/

Not the most really beautiful test page though ;)

Ping me if you have any questions or let me know how I could help.

[timrodz]

Thank you, @peterpeterparker! I'll have a go at it 😄

[timrodz]

Hi @peterpeterparker, I've had a look at the codebase and had a few questions / thoughts I'd like to verify - I haven't used Stencil before, so I'm quite unfamiliar with the codebase or the way Stencil works.

• According to the docs, every webcomponent works as separate npm packages, correct?
• I notice the use of namespacing for specifying settings such as LocalJSX, which I assume is the code that developers will inject to match their own implementations.
• For adding the top/bottom split, I'm thinking of creating either:
  • A setting so the user can specify 'vertical'/'horizontal' and it'll render different HTML/CSS | Seems like adding the new split code to deckdeckgo-slide-split.scss would be good enough
  • A new interface along HTMLDeckgoSlideSplitElement that will have the changes for the vertical split

[peterpeterparker]

• Yes

• I don't understand your question regarding "namespacing and LocalJSX". Could you point out a line of code you are referencing?

• I think a setting respectively a new @Prop() is the way (your first option, agree with you). Then, according the value, we could apply a class to the container in the render() method and finally implement the different display in the scss file

[timrodz]

Thanks for your answers!

I don't understand your question regarding "namespacing and LocalJSX". Could you point out a line of code you are referencing?

Let me rephrase my question: What's the relationship between components.d.ts and deckdeckgo-slide-split.tsx? Similarly, how do these files talk to each other (assuming they do)

If I take the boolean customBackground from components.d.ts, I can notice it's referenced inside Components::DeckgoSlideAuthor and LocalJSX::DeckgoSlideAuthor of the same script.

It is also referenced as a @Prop() inside deckdeckgo-slide-split.tsx, so I'm assuming to define a new prop I'd have to follow similar steps.

I think a setting respectively a new @Prop() is the way (your first option, agree with you). Then, according the value, we could apply a class to the container in the render() method and finally implement the different display in the scss file

Coming from React, I can see accessing variables inside Render() like so:

Based on Stencil's docs, I can infer that I can simply use JSX to change the class names and then I'll go along and toy around with scss until I get the desired results.

[peterpeterparker]

components.d.ts is the component's definition file, you could safely ignores it as it is automatically generated by Stencil at build time (npm run start or npm run build).

Exactly you could define a new@Prop() as the other. We don't necessary need the reflectToAttr right now, as you wish.

Based on Stencil's docs, I can infer that I can simply use JSX to change the class names and then I'll go along and toy around with scss until I get the desired results.

Exactly, you read my mind 👍

P.S.: Note in Stencil JSX class is class, not className as in React

[timrodz]

Awesome, thank you! I'll have a jam during the weekend - It's almost there! 🕺

[peterpeterparker]

Awesome! Ping me anytime if you've got questions or need help.

[timrodz]

Getting there! Just need to add diff properties to the .scss file

My approach has been to make it so that we touch as little code as possible:

@Prop() isVertical: boolean = false;

render() {
  const verticalAttr = this.isVertical ? '-vertical' : '';
  return <Host class={{'deckgo-slide-container': true}}>
    <div class={`deckgo-slide${verticalAttr}`}>
      <slot name="title"></slot>
      <div class="deckgo-slide-split deckgo-slide-split-start"><slot name="start"></slot></div>
      <div class="deckgo-slide-split deckgo-slide-split-end"><slot name="end"></slot></div>
      <slot name="notes"></slot>
      <slot name="actions"></slot>
      <slot name="background"></slot>
    </div>
  </Host>;
}

Looks like I'll probably have to add verticalAttr to an alternative for deckgo-slide-split so that it can properly calculate the height - What do you think?

[timrodz]

Current implementation:

It's able to split 50/50 vertically - But I need to take the paddings in the formula, so might have to re-calculate height and width accordingly:

div.deckgo-slide-vertical {
  @extend div, .deckgo-slide;
  flex-flow: column wrap;
}

div.deckgo-slide-split-vertical {
  @extend div, .deckgo-slide-split;
  // TODO
}

[timrodz]

Added colours to show the differences between both splits - If you think this is fine, I'll make a Pull Request and we can discuss the code further.

Horizontal (Default)

Vertical

[peterpeterparker]

It looks good 👍 thx!

Furthermore you teach me something, I never used @extend before, thx :)

about size, yes the size is given by the class .deckgo-slide which is defined in the util class @deckdeckgo/slide-utils (

deckdeckgo/webcomponents/slides/utils/styles/deckdeckgo-slide.scss

Line 23 in 26a9fb4

div.deckgo-slide {

)

Super cool, go for the PR 🚀

[peterpeterparker]

Thx you for the neat PR @timrodz 🙏

[peterpeterparker]

• Doc updated
• Feature unleashed in the starter kit
• Not yet implemented in the editor, see studio: add split template vertical #408