p-slides
Version:
Presentations made simple with Web Components
655 lines (654 loc) • 23.2 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "build-docs.js",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "index.js",
"declarations": [
{
"kind": "function",
"name": "registerElements",
"description": "Register the library's custom elements, i.e. calls `customElements.define` on each of them, and returns a promise\nthat resolves when the registration is complete (should be immediate)."
}
],
"exports": [
{
"kind": "js",
"name": "PresentationDeckElement",
"declaration": {
"name": "PresentationDeckElement",
"module": "index.js"
}
},
{
"kind": "js",
"name": "PresentationSlideElement",
"declaration": {
"name": "PresentationSlideElement",
"module": "index.js"
}
},
{
"kind": "js",
"name": "setStyleRoot",
"declaration": {
"name": "setStyleRoot",
"module": "index.js"
}
},
{
"kind": "js",
"name": "registerElements",
"declaration": {
"name": "registerElements",
"module": "index.js"
}
},
{
"kind": "custom-element-definition",
"name": "p-deck",
"declaration": {
"name": "PresentationDeckElement",
"module": "/components/deck.js"
}
},
{
"kind": "custom-element-definition",
"name": "p-slide",
"declaration": {
"name": "PresentationSlideElement",
"module": "/components/slide.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "utils.js",
"declarations": [
{
"kind": "function",
"name": "setStyleRoot",
"parameters": [
{
"name": "root",
"type": {
"text": "string"
}
}
],
"description": "The `<p-deck>` element will start loading its stylesheet at the default location of `css/`, if nothing has been set\non `PresentationDeckElement.styles`. You can change that _before defining or instantiating_ a `<p-deck>` element.\n\nDon't forget the final slash! Or do, if you want to provide a prefix for the file names."
}
],
"exports": [
{
"kind": "js",
"name": "setStyleRoot",
"declaration": {
"name": "setStyleRoot",
"module": "utils.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "components/deck.js",
"declarations": [
{
"kind": "class",
"description": "The class corresponding to the `<p-deck>` element wrapper. You'll mostly have to interact with this to manage the\npresentation.",
"name": "PresentationDeckElement",
"cssProperties": [
{
"type": {
"text": "<time>"
},
"description": "Time for a fragment's transition",
"name": "--fragment-duration",
"default": "300ms"
},
{
"type": {
"text": "<integer>"
},
"description": "Number of columns in grid mode",
"name": "--grid-columns",
"default": "4"
},
{
"type": {
"text": "<length>"
},
"description": "Gap and external padding in grid mode",
"name": "--grid-gap",
"default": "0.25em"
},
{
"description": "Color for the outline of the highlighted slide in grid mode",
"name": "--grid-highlight-color",
"default": "color-mix(in srgb, LinkText, transparent)"
},
{
"type": {
"text": "<number>"
},
"description": "Aspect ratio of the slides",
"name": "--slide-aspect-ratio",
"default": "calc(16 / 9)"
},
{
"description": "Size of the base presentation font in virtual units. Slides will be 100/(this value) `em`s large",
"name": "--slide-font-size",
"default": "5"
},
{
"type": {
"text": "<time>"
},
"description": "Time for the transition between two slides: 0.5s if the user doesn't prefer reduced motion",
"name": "--sliding-duration",
"default": "0s/0.5s"
},
{
"type": {
"text": "<number>"
},
"description": "Scale for the next slide compared to the whole area in speaker mode.",
"name": "--speaker-next-scale",
"default": "calc(2 / 3)"
}
],
"cssParts": [
{
"type": {
"text": "<aside>"
},
"description": "Spearker mode's sidebar",
"name": "sidebar"
},
{
"type": {
"text": "<header>"
},
"description": "Spearker mode's toolbar inside the sidenav",
"name": "toolbar"
},
{
"type": {
"text": "<ul>"
},
"description": "Container for the speaker notes",
"name": "notelist"
},
{
"type": {
"text": "<button>"
},
"description": "Play, pause and clock reset button",
"name": "control-button"
}
],
"slots": [
{
"description": "Expected to contain `<p-slide>` elements only",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "styles",
"type": {
"text": "string | string[] | null"
},
"static": true,
"default": "null",
"description": "Allows to define the location of one or more stylesheet, either as an URL (absolute or relative), or as raw CSS\ncode. You can mix URLs and CSS code as you wish. The logic for telling them apart is simple: if the\n[`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet) generated by the given string has\nat least one rule, or if the string contains a newline character, it's considered a valid stylesheet; otherwise, it\nattempts to load the stylesheet treating the given string as a URL.\n\nSet this property _before defining or instantiating_ a `<p-deck>` element."
},
{
"kind": "field",
"name": "#clockElapsed",
"privacy": "private",
"type": {
"text": "number"
},
"default": "0"
},
{
"kind": "field",
"name": "#clockStart",
"privacy": "private",
"type": {
"text": "null"
},
"default": "null"
},
{
"kind": "field",
"name": "#clockInterval",
"privacy": "private",
"type": {
"text": "null"
},
"default": "null"
},
{
"kind": "field",
"name": "#channel",
"privacy": "private",
"default": "new BroadcastChannel('p-slides')"
},
{
"kind": "field",
"name": "keyCommands",
"type": {
"text": "Record<KeyCommand, Array<Partial<KeyboardEvent>>>"
},
"default": "{ next: [{ key: 'ArrowRight' }, { key: 'ArrowDown' }], previous: [{ key: 'ArrowLeft' }, { key: 'ArrowUp' }], nextslide: [{ key: 'PageDown' }], previousslide: [{ key: 'PageUp' }], gotostart: [{ key: 'Home' }], gotoend: [{ key: 'End' }], toggleclock: [{ key: 'P' }, { key: 'p' }], resetclock: [{ key: '0', altKey: true }], togglemode: [ { key: 'M', altKey: true, shiftKey: false }, { key: 'm', altKey: true, shiftKey: false } ], previousmode: [ { key: 'M', altKey: true, shiftKey: true }, { key: 'm', altKey: true, shiftKey: true } ] }",
"description": "Deck commands mapped to their key bindings."
},
{
"kind": "field",
"name": "labels",
"type": {
"text": "Record<PresentationDeckLabelName, PresentationLabel<PresentationDeckElement>>"
},
"default": "{ ELAPSED_TIME: 'Elapsed time', TIMER_START: 'Start the timer', TIMER_PAUSE: 'Pause the timer', TIMER_RESET: 'Reset the timer', /** @param {PresentationDeckElement} deck */ SLIDE_COUNTER: deck => `Slide ${deck.currentIndex + 1} of ${deck.slides.length}` }",
"description": "Labels used in speaker mode for accessibility."
},
{
"kind": "method",
"name": "#muteAction",
"privacy": "private",
"parameters": [
{
"name": "fn"
}
]
},
{
"kind": "field",
"name": "#previousMode",
"privacy": "private",
"type": {
"text": "PresentationMode"
},
"default": "'presentation'"
},
{
"kind": "field",
"name": "mode",
"description": "Getter/setter of current deck mode. It reflects the same named attribute value _if_ it's either `'presentation'` or\n`'speaker'` (defaults to the former). Also sets it when assigning.\n\nOperatively speaking, changing the deck mode does _nothing_. Its only purpose is to apply a different style to the\npresentation, i.e. either the 'normal' or the 'speaker' mode. If you provide your own stylesheet without a specific\nstyle for the speaker mode then eh, you're on your own.",
"type": {
"text": "PresentationMode"
}
},
{
"kind": "method",
"name": "#resetCurrentSlide",
"privacy": "private"
},
{
"kind": "field",
"name": "slideSizes",
"readonly": true
},
{
"kind": "field",
"name": "#currentSlide",
"privacy": "private",
"type": {
"text": "PresentationSlideElement | null"
},
"default": "null"
},
{
"kind": "field",
"name": "currentSlide",
"description": "Getter/setter for the slide element marked as 'current'. When setting, it _must_ be a `<p-slide>` elements descendant\nof the deck."
},
{
"kind": "field",
"name": "currentIndex",
"description": "Getter/setter of index of the current slide."
},
{
"kind": "field",
"name": "slides",
"description": "At the moment, it's just a `querySelectorAll('p-slide')` executed on the deck's host element.",
"readonly": true
},
{
"kind": "field",
"name": "atStart",
"description": "It's `true` if and only if the presentation is at the start.",
"readonly": true
},
{
"kind": "field",
"name": "atEnd",
"description": "It's `true` if and only if the presentation is at the end.",
"readonly": true
},
{
"kind": "field",
"name": "#gridLink",
"privacy": "private",
"type": {
"text": "HTMLAnchorElement"
}
},
{
"kind": "field",
"name": "#highlightedSlideIndex",
"privacy": "private"
},
{
"kind": "field",
"name": "#hoveredSlideIndex",
"privacy": "private"
},
{
"kind": "field",
"name": "#keyHandler",
"privacy": "private"
},
{
"kind": "field",
"name": "#handleGridPointer",
"privacy": "private"
},
{
"kind": "method",
"name": "#updateCounter",
"privacy": "private"
},
{
"kind": "method",
"name": "next",
"description": "Advances the presentation, either by showing a new fragment on the current slide, or switching to the next slide."
},
{
"kind": "method",
"name": "previous",
"description": "Brings the presentation back, either by hiding the last shown fragment on the current slide, or switching to the\nprevious slide."
},
{
"kind": "method",
"name": "nextSlide",
"description": "Advances the presentation to the next slide, if possible."
},
{
"kind": "method",
"name": "previousSlide",
"description": "Brings the presentation back to the previous slide, if possible."
},
{
"kind": "method",
"name": "#checkNotes",
"privacy": "private"
},
{
"kind": "method",
"name": "startClock",
"description": "Starts the timer."
},
{
"kind": "method",
"name": "stopClock",
"description": "Stops the timer."
},
{
"kind": "method",
"name": "toggleClock",
"description": "Toggles the timer."
},
{
"kind": "method",
"name": "#updateClock",
"privacy": "private"
},
{
"kind": "field",
"name": "clock",
"description": "The amount of milliseconds on the timer."
},
{
"kind": "field",
"name": "isClockRunning",
"description": "It's `true` if and only if the timer is not paused.",
"readonly": true
},
{
"kind": "field",
"name": "state",
"description": "An object that represents the presentation's state. Although exposed, handle it with caution, as changes may not be\nreflected on the view or a second window. Use the method `broadcastState()` to send an updated state to a second\nview.",
"type": {
"text": "PresentationState"
}
},
{
"kind": "field",
"name": "#preventBroadcast",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "method",
"name": "broadcastState",
"description": "Sends the current presentation's state to other windows/tabs open on the presentation."
},
{
"kind": "method",
"name": "requestState",
"description": "Retrieves the presentation's state from other windows/tabs open on the presentation."
}
],
"events": [
{
"type": {
"text": "PresentationFinishEvent"
},
"description": "When reaching the end of the presentation",
"name": "p-slides.finish"
},
{
"type": {
"text": "PresentationSlideChangeEvent"
},
"description": "When the current slide changes",
"name": "p-slides.slidechange"
},
{
"type": {
"text": "PresentationClockStartEvent"
},
"description": "When the timer starts",
"name": "p-slides.clockstart"
},
{
"type": {
"text": "PresentationClockStopEvent"
},
"description": "When the timer stops",
"name": "p-slides.clockstop"
},
{
"type": {
"text": "PresentationClockSetEvent"
},
"description": "When the timer has been explicitly set",
"name": "p-slides.clockset"
}
],
"attributes": [
{
"type": {
"text": "PresentationMode"
},
"description": "Presentation mode",
"name": "mode"
}
],
"superclass": {
"name": "HTMLElement"
},
"tagName": "p-deck",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PresentationDeckElement",
"declaration": {
"name": "PresentationDeckElement",
"module": "components/deck.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "components/slide.js",
"declarations": [
{
"kind": "class",
"description": "The class corresponding to the `<p-slide>` element.",
"name": "PresentationSlideElement",
"members": [
{
"kind": "field",
"name": "#mutations",
"privacy": "private",
"default": "new MutationObserver(() => { this.#fragmentSequence = null; this.#notes = null; })"
},
{
"kind": "field",
"name": "deck",
"description": "The parent presentation deck.",
"readonly": true
},
{
"kind": "field",
"name": "isActive",
"description": "Whether the slide is the current one in the presentation. This will set the `aria-current` attribute to either\n`'page'` or `'false'`.\n\nIt's discouraged to set it manually."
},
{
"kind": "field",
"name": "isPrevious",
"description": "Whether the slide is past the current one in the presentation. This will set a `previous` attribute on the\n`<p-slide>` element, that can be used for styling purposes. A slide can be the current one _and_ marked as\n\"previous\" when going backward in the presentation.\n\nIt's discouraged to set it manually."
},
{
"kind": "field",
"name": "fragments",
"description": "The list of the fragment elements as they appear in the slide's markup.",
"readonly": true
},
{
"kind": "field",
"name": "#fragmentSequence",
"privacy": "private"
},
{
"kind": "field",
"name": "fragmentSequence",
"description": "The fragments grouped using their indexes.",
"type": {
"text": "Element[][]"
},
"readonly": true
},
{
"kind": "field",
"name": "nextHiddenFragments",
"description": "The next group of fragments that will be shown when advancing the presentation, if any.",
"readonly": true
},
{
"kind": "field",
"name": "lastVisibleFragments",
"description": "The last group of fragments that has been shown when advancing the presentation, if any.",
"readonly": true
},
{
"kind": "field",
"name": "#notes",
"privacy": "private"
},
{
"kind": "field",
"name": "notes",
"description": "The list of the speaker notes as they appear in the slide's fragment sequence.",
"type": {
"text": "Array<Element | Comment>"
},
"readonly": true
},
{
"kind": "method",
"name": "next",
"description": "Attempts to advance the presentation by showing a new block of fragments on the current slide. It returns `true` if\nno fragments are left to show in the current slide (the deck will advance to the next slide)."
},
{
"kind": "method",
"name": "previous",
"description": "Attempts to bring the presentation back by hiding the last shown block of fragments on the current slide. It\nreturns `true` if no fragments are left to hide in the current slide (the deck will go back to the previous slide)."
}
],
"events": [
{
"type": {
"text": "PresentationFragmentToggleEvent"
},
"description": "When a fragment has been shown or hidden",
"name": "p-slides.fragmenttoggle"
}
],
"attributes": [
{
"name": "aria-current",
"type": {
"text": "string"
},
"description": "When set to `'page'`, the slide is the current one in the presentation. It's discouraged to set it manually"
},
{
"type": {
"text": "string"
},
"description": "Effect name for entering the slide from, or exiting to, the previous slide",
"name": "effect"
}
],
"superclass": {
"name": "HTMLElement"
},
"tagName": "p-slide",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PresentationSlideElement",
"declaration": {
"name": "PresentationSlideElement",
"module": "components/slide.js"
}
}
]
}
]
}