diff --git a/doc/components/components.md b/doc/components/components.md index 3bbc22fe7..7dc296175 100644 --- a/doc/components/components.md +++ b/doc/components/components.md @@ -37,6 +37,19 @@ This component offers the following options which could be set using attributes: | alt | string | | And alt information could be provided for accessibility reason. | | fullscreen | number | false | If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen. | +### Theming + +The following theming options will affect this component if set on its host or parent. + +| CSS4 variable | Default | Note | +| -------------------------- |:-----------------:|:-----------------:| +| --width | | The width of the gif | +| --height | | The height of the gif | +| --background | | The background of the `header` and `footer` over the gif | +| --color | | The color of the `header` and `footer` over the gif| +| --padding | | The padding of the `header` and `footer` over the gif | +| --zIndex | 2 | The z-index of the slide | + ### Note Of course, as other images added to a presentation build with [DeckDeckGo], gifs are lazy loaded too. diff --git a/doc/slides/slides.md b/doc/slides/slides.md index d3b77f2de..0984a74e7 100644 --- a/doc/slides/slides.md +++ b/doc/slides/slides.md @@ -6,16 +6,17 @@ Some templates offer extra features as for example the slide [Code](#slide-code) ## Table of contents -- [Overview](#overview) -- [Slide: Title](#slide-title) -- [Slide: Content](#slide-content) -- [Slide: Split](#slide-split) -- [Slide: Gif](#slide-gif) -- [Slide: Youtube](#slide-youtube) -- [Slide: Code](#slide-code) -- [Slide: Author](#slide-author) - -## Overview +- [Slides](#slides) + - [Slide: Title](#slide-title) + - [Slide: Content](#slide-content) + - [Slide: Split](#slide-split) + - [Slide: Gif](#slide-gif) + - [Slide: Youtube](#slide-youtube) + - [Slide: Code](#slide-code) + - [Slide: Author](#slide-author) +- [Background](#background) + +## Slides [DeckDeckGo] provide the following templates: @@ -49,17 +50,17 @@ Some templates offer extra features as for example the slide [Code](#slide-code) *Note: If you would miss or need further templates, don't hesitate to open an issue and/or submit a PR, it would be my pleasure to add more options* -## Slide: Title +### Slide: Title The "Title" slide is a simple slide which display its title and content center in the middle of the page. This slide could be for example use for the very first and last slide of your presentation. -### Layout +#### Layout -### Usage +#### Usage The "Title" slide's Web Component could be integrated using the tag ``. @@ -74,11 +75,11 @@ The "Title" slide's Web Component could be integrated using the tag ` ``` -#### Slots +##### Slots Both slots `title` and `content` are optional. Without providing one of them, the page will remain empty. -### Attributes +#### Attributes This component offers the following options which could be set using attributes: @@ -87,7 +88,7 @@ This component offers the following options which could be set using attributes: | reveal | boolean | false | Hide the slotted elements `li`, `p` an `img` and display them when navigating using `slideNext()` or `slidePrev()` (see [documention](/doc/features/navigation.md)) | | reveal-show-first | boolean | false | Show the first elements which would be hidden if `reveal` is set to `true` | -#### Example +##### Example ``` @@ -102,7 +103,7 @@ This component offers the following options which could be set using attributes: ``` -### Theming +#### Theming The following theming options will affect this component if set on its host or parent. @@ -114,18 +115,19 @@ The following theming options will affect this component if set on its host or p | --slide-padding-end | 32px | Padding right of the all slide | | --slide-padding-bottom | 16px | Padding bottom of the all slide | | --slide-padding-start | 32px | Padding left of the all slide | +| --zIndex | 1 | The z-index of the slide | -## Slide: Content +### Slide: Content The "Content" slide is a simple slide which display its title and content aligned to the start of the page. This slide could be for example use for the every slides of your presentation where you would like to display content related to your talk. -### Layout +#### Layout -### Usage +#### Usage The "Content" slide's Web Component could be integrated using the tag ``. @@ -140,11 +142,11 @@ The "Content" slide's Web Component could be integrated using the tag ` ``` -#### Slots +##### Slots Both slots `title` and `content` are optional. Without providing one of them, the page will remain empty. -### Attributes +#### Attributes This component offers the following options which could be set using attributes: @@ -153,7 +155,7 @@ This component offers the following options which could be set using attributes: | reveal | boolean | false | Hide the slotted elements `li`, `p` an `img` and display them when navigating using `slideNext()` or `slidePrev()` (see [documention](/doc/features/navigation.md)) | | reveal-show-first | boolean | false | Show the first elements which would be hidden if `reveal` is set to `true` | -#### Example +##### Example ``` @@ -167,7 +169,7 @@ This component offers the following options which could be set using attributes: ``` -### Theming +#### Theming The following theming options will affect this component if set on its host or parent. @@ -179,16 +181,17 @@ The following theming options will affect this component if set on its host or p | --slide-padding-end | 32px | Padding right of the all slide | | --slide-padding-bottom | 16px | Padding bottom of the all slide | | --slide-padding-start | 32px | Padding left of the all slide | +| --zIndex | 1 | The z-index of the slide | -## Slide: Split +### Slide: Split The "Split" slide is a simple slide which display two panes on the page. -### Layout +#### Layout -### Usage +#### Usage The "Split" slide's Web Component could be integrated using the tag ``. @@ -206,13 +209,13 @@ The "Split" slide's Web Component could be integrated using the tag ` ``` -#### Slots +##### Slots Both slots `title` and `content` are optional. Without providing one of them, the page will remain empty. Note: The slot `title` is per default hidden. -### Attributes +#### Attributes This component offers the following options which could be set using attributes: @@ -221,7 +224,7 @@ This component offers the following options which could be set using attributes: | reveal | boolean | false | Hide the slotted elements `li`, `p` an `img` and display them when navigating using `slideNext()` or `slidePrev()` (see [documention](/doc/features/navigation.md)) | | reveal-show-first | boolean | false | Show the first elements which would be hidden if `reveal` is set to `true` | -### Theming +#### Theming The following theming options will affect this component if set on its host or parent. @@ -245,16 +248,17 @@ The following theming options will affect this component if set on its host or p | --slide-split-align | inherit | Modify for example to center if you want to align the content in the middle | | --slide-split-text-align | inherit | Modify for example to center if you want to align the text in the middle | | --slide-split-title-display | none | Modify this attribute if you wish to display a title | +| --zIndex | 1 | The z-index of the slide | -## Slide: Gif +### Slide: Gif The "Gif" slide let you add easily a gif, like those provided by [Giphy](https://giphy.com), to your presentation. -### Layout +#### Layout -### Usage +#### Usage The "Gif" slide's Web Component could be integrated using the tag ``. @@ -274,7 +278,7 @@ The slots `title`, `header` and `footer` are both optional. `header` and `footer The slide "Gif" relies on the component `` which is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md). -### Attributes +#### Attributes This component offers the following options which could be set using attributes: @@ -284,7 +288,7 @@ This component offers the following options which could be set using attributes: | alt | string | | And alt information could be provided for accessibility reason. | | fullscreen | number | false | If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen. | -### Theming +#### Theming The following theming options will affect this component if set on its host or parent. @@ -296,16 +300,17 @@ The following theming options will affect this component if set on its host or p | --slide-padding-end | 32px | Padding right of the all slide | | --slide-padding-bottom | 16px | Padding bottom of the all slide | | --slide-padding-start | 32px | Padding left of the all slide | +| --zIndex | 1 | The z-index of the slide | -## Slide: Youtube +### Slide: Youtube The "Youtube" slide let you add easily a [Youtube](https://youtube.com) video to your presentation. -### Layout +#### Layout -### Usage +#### Usage The "Youtube" slide's Web Component could be integrated using the tag ``. @@ -315,15 +320,15 @@ The "Youtube" slide's Web Component could be integrated using the tag ` ``` -#### Slots +##### Slots The slot `title` is optional. -#### Youtube component +##### Youtube component The slide "Youtube" relies on the component `` which is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md). -### Attributes +#### Attributes This component offers the following options which could be set using attributes: @@ -333,7 +338,7 @@ This component offers the following options which could be set using attributes: | width | number | Per default the video width will be calculated according the content size available. | Using this option you would be able to define your own width. | | height | number | Per default the video height will be calculated according the content size available. | Using this option you would be able to define your own height. | -### Theming +#### Theming The following theming options will affect this component if set on its host or parent. @@ -345,22 +350,23 @@ The following theming options will affect this component if set on its host or p | --slide-padding-end | 32px | Padding right of the all slide | | --slide-padding-bottom | 16px | Padding bottom of the all slide | | --slide-padding-start | 32px | Padding left of the all slide | +| --zIndex | 1 | The z-index of the slide | -## Slide: Code +### Slide: Code The "Code" slide is a the slide to use if you would like to showcase code during your talk. -### Layout +#### Layout -### Usage +#### Usage The "Code" slide's Web Component could be integrated using the tag ``. You could provide a file URI to the code you want to display or provide it with a slotted element. -#### Usage with file URI +##### Usage with file URI ``` @@ -370,7 +376,7 @@ You could provide a file URI to the code you want to display or provide it with ``` -#### Usage with slotted element +##### Usage with slotted element ``` @@ -384,11 +390,11 @@ You could provide a file URI to the code you want to display or provide it with ``` -#### Slots +##### Slots The slots `title` and `code` are optional. -### Attributes +#### Attributes The attribute `src` is for this component mandatory. Other attributes are optional. @@ -400,7 +406,7 @@ The attribute `src` is for this component mandatory. Other attributes are option | hide-anchor | boolean | true | Set this attribute to `false` in case you would like to actually display the anchor value too | | language | string | javascript | Define the language to be used for the syntax highlighting. The list of [supported languages](https://prismjs.com/#languages-list) is defined by [Prism.js](https://prismjs.com/#languages-list) | -#### Example with file URI +##### Example with file URI ``` @@ -410,7 +416,7 @@ The attribute `src` is for this component mandatory. Other attributes are option ``` -#### Example with slotted element +##### Example with slotted element ``` @@ -434,7 +440,7 @@ The attribute `src` is for this component mandatory. Other attributes are option ``` -### Theming +#### Theming The following theming options will affect this component if set on its host or parent. @@ -451,24 +457,25 @@ The following theming options will affect this component if set on its host or p | --slide-padding-start | 32px | Padding left of the all slide | | --code-margin-bottom | 64px | Padding bottom of the code scroller | | --zoom-code | 1 | If you wish to manually zoom the code | +| --zIndex | 1 | The z-index of the slide | -### Syntax highlighting +#### Syntax highlighting The library [Prism.js](https://prismjs.com) from [James DiGioia](https://github.com/mAAdhaTTah) is use for the syntax highlighting. -#### Note regarding highlight extra languages +##### Note regarding highlight extra languages No extra [Prism.js](https://prismjs.com) languages than the default one are bundled in the [DeckDeckGo] Web Component. If you would specify another `language` (see above list of attributes) the component will inject and load the required extra scripts from [unpkg](https://unpkg.com) at runtime. -## Slide: Author +### Slide: Author The "Author" slide let you introduce the author of the presentation. -### Layout +#### Layout -### Usage +#### Usage The "Author" slide's Web Component could be integrated using the tag ``. @@ -485,7 +492,7 @@ The "Author" slide's Web Component could be integrated using the tag ` ``` -#### Slots +##### Slots Both slots `title`, `author` and `social-link` are optional, but of course the slide would looks better with at least the slot `author` would be provided. @@ -495,11 +502,11 @@ Notes: * You could provide up to six `social-link` slots. Each of these could be your custom code or you could use the component `` to easily provide a link to an external URI. -#### Social components +##### Social components The details of the component `` is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md). -### Attributes +#### Attributes This component offers the following options which could be set using attributes: @@ -508,7 +515,7 @@ This component offers the following options which could be set using attributes: | img-src | string | | An image URI, for example a picture of the author. Note: this image will be displayed as a circle. | | img-alt | string | | An optional accessibility alt for the image. | -#### Example +##### Example ``` @@ -524,7 +531,7 @@ This component offers the following options which could be set using attributes: ``` -### Theming +#### Theming The following theming options will affect this component if set on its host or parent. @@ -545,5 +552,43 @@ The following theming options will affect this component if set on its host or p | --slide-author-text-align | inherit | Modify for example to center if you want to align the text in the middle | | --slide-author-img-size | 80% | The size of the image of the left pane | | --slide-author-social-padding-top | 32px | The spacing between the author description and the social links | +| --zIndex | 1 | The z-index of the slide | + +## Background + +Beside slides and templates, a [DeckDeckGo] deck could also contains a customized element `background` which could be injected using a dedicated `slot`. This element inherit the length of the all presentation. This option is handy for example in case you would like to have a background which would evolve while you where presenting your slides. + +### Example + +``` + + +

My presentation title

+

+ Hello World 🚀 +

+ + +
+ +``` + +where for example the related `circle` css code could be: + +``` +div.circle { + position: absolute; + left: 50%; + transform: translate(-50%, 0); + + bottom: -10vh; + width: 800vw; + height: 100vh; + + border-radius: 50%; + background: yellow; + opacity: 0.3; +} +``` [DeckDeckGo]: https://deckdeckgo.com \ No newline at end of file diff --git a/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.scss b/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.scss index 9c40cacfe..76698e6fb 100644 --- a/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.scss +++ b/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.scss @@ -24,6 +24,10 @@ div.deckgo-pager { left: 0; } +::slotted([slot="background"]) { + pointer-events: none; +} + @media print { div.deckgo-deck { display: initial; diff --git a/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx b/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx index 5ffb55806..f973f35b6 100644 --- a/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx +++ b/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx @@ -253,12 +253,16 @@ export class DeckdeckgoDeck { } private emitSlidesDidLoad(): Promise { - return new Promise((resolve) => { + return new Promise(async (resolve) => { const definedSlides: HTMLCollection = this.el.children; const loadedSlides: NodeListOf = this.el.querySelectorAll('.deckgo-slide-container'); - if (definedSlides && loadedSlides && loadedSlides.length === definedSlides.length && definedSlides.length === this.length) { - const orderedSlidesTagNames: string[] = Array.from(loadedSlides).map((slide: HTMLElement) => { return slide.tagName}); + const definedSlidesLength: number = await this.countDefinedSlides(definedSlides); + + if (definedSlides && loadedSlides && loadedSlides.length === definedSlidesLength && definedSlidesLength === this.length) { + const orderedSlidesTagNames: string[] = Array.from(loadedSlides).map((slide: HTMLElement) => { + return slide.tagName + }); this.slidesDidLoad.emit(orderedSlidesTagNames); } @@ -266,6 +270,22 @@ export class DeckdeckgoDeck { }); } + // The last child might be a background and note a slides + private countDefinedSlides(definedSlides: HTMLCollection): Promise { + return new Promise((resolve) => { + if (!definedSlides || definedSlides.length <= 0) { + resolve(0); + return; + } + + const slides: Element[] = Array.from(definedSlides).filter((slide: Element) => { + return slide.tagName.toLocaleLowerCase().indexOf('deckgo-slide-') > -1 + }); + + resolve(slides ? slides.length : 0); + }); + } + @Method() isBeginning(): Promise { return new Promise((resolve) => { @@ -443,6 +463,7 @@ export class DeckdeckgoDeck { return [
+
,
{this.pager ? : ''}
diff --git a/src/components/extra/deckdeckgo-gif/deckdeckgo-gif.scss b/src/components/extra/deckdeckgo-gif/deckdeckgo-gif.scss index 4fe9606e7..3aba0f081 100644 --- a/src/components/extra/deckdeckgo-gif/deckdeckgo-gif.scss +++ b/src/components/extra/deckdeckgo-gif/deckdeckgo-gif.scss @@ -45,7 +45,7 @@ div.deckgo-gif { } ::slotted([slot="header"]), ::slotted([slot="footer"]) { - z-index: 1; + z-index: var(--zIndex, 2); } } } diff --git a/src/components/slides/deckdeckgo-slide.scss b/src/components/slides/deckdeckgo-slide.scss index e0fa84968..a580ae0d7 100644 --- a/src/components/slides/deckdeckgo-slide.scss +++ b/src/components/slides/deckdeckgo-slide.scss @@ -2,6 +2,7 @@ background: var(--background); color: var(--color); height: 100%; + z-index: var(--zIndex, 1); } div.deckgo-slide {