diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..dce2e68c --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +**/* +js/**/*.js +plugin/**/*.js \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..df657d98 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "useTabs": false, + "tabWidth": 2, + "trailingComma": "es5", + "printWidth": 100, + "singleQuote": true, + "bracketSameLine": false +} diff --git a/index.html b/index.html index a28e268f..45c63070 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,12 @@ reveal.js - - - + + + - +
diff --git a/js/config.ts b/js/config.ts index 9f417ce8..73cb718c 100644 --- a/js/config.ts +++ b/js/config.ts @@ -1,505 +1,694 @@ -// TODO convert all line to blocks + add comments for each prop -type RevealConfig = { - // The "normal" size of the presentation, aspect ratio will be preserved - // when the presentation is scaled to fit different resolutions - width: number | string; - height: number | string; - - // Factor of the display size that should remain empty around the content - margin: number; - - // Bounds for smallest/largest possible scale to apply to content - minScale: number; - maxScale: number; - - // Display presentation control arrows - // - true: Display controls on all screens - // - false: Hide controls on all screens - // - "speaker-only": Only display controls in the speaker view - controls: boolean | 'speaker-only'; - - // Help the user learn the controls by providing hints, for example by - // bouncing the down arrow when they first encounter a vertical slide - controlsTutorial: boolean; - - // Determines where controls appear, "edges" or "bottom-right" - controlsLayout: 'edges' | 'bottom-right'; - - // Visibility rule for backwards navigation arrows; "faded", "hidden" - // or "visible" - controlsBackArrows: 'faded' | 'hidden' | 'visible'; - - // Display a presentation progress bar - progress: boolean; - - // Display the page number of the current slide - // - true: Show slide number - // - false: Hide slide number - // - // Can optionally be set as a string that specifies the number formatting: - // - "h.v": Horizontal . vertical slide number (default) - // - "h/v": Horizontal / vertical slide number - // - "c": Flattened slide number - // - "c/t": Flattened slide number / total slides - // - // Alternatively, you can provide a function that returns the slide - // number for the current slide. The function should take in a slide - // object and return an array with one string [slideNumber] or - // three strings [n1,delimiter,n2]. See #formatSlideNumber(). - slideNumber: boolean | 'h.v' | 'h/v' | 'c' | 'c/t' | ((slide: any) => string | [string, string, string]); - - // Can be used to limit the contexts in which the slide number appears - // - "all": Always show the slide number - // - "print": Only when printing to PDF - // - "speaker": Only in the speaker view - showSlideNumber: 'all' | 'print' | 'speaker'; - - // Use 1 based indexing for # links to match slide number (default is zero - // based) - hashOneBasedIndex: boolean; - - // Add the current slide number to the URL hash so that reloading the - // page/copying the URL will return you to the same slide - hash: boolean; - - // Flags if we should monitor the hash and change slides accordingly - respondToHashChanges: boolean; - - // Enable support for jump-to-slide navigation shortcuts - jumpToSlide: boolean; - - // Push each slide change to the browser history. Implies `hash: true` - history: boolean; - - // Enable keyboard shortcuts for navigation - keyboard: boolean; - - // Optional function that blocks keyboard events when retuning false - // - // If you set this to 'focused', we will only capture keyboard events - // for embedded decks when they are in focus - keyboardCondition: null | 'focused' | ((event: KeyboardEvent) => boolean); - - // Disables the default reveal.js slide layout (scaling and centering) - // so that you can use custom CSS layout - disableLayout: boolean; - - // Enable the slide overview mode - overview: boolean; - - // Vertical centering of slides - center: boolean; - - // Enables touch navigation on devices with touch input - touch: boolean; - - // Loop the presentation - loop: boolean; - - // Change the presentation direction to be RTL - rtl: boolean; - - // Changes the behavior of our navigation directions. - // - // "default" - // Left/right arrow keys step between horizontal slides, up/down - // arrow keys step between vertical slides. Space key steps through - // all slides (both horizontal and vertical). - // - // "linear" - // Removes the up/down arrows. Left/right arrows step through all - // slides (both horizontal and vertical). - // - // "grid" - // When this is enabled, stepping left/right from a vertical stack - // to an adjacent vertical stack will land you at the same vertical - // index. - // - // Consider a deck with six slides ordered in two vertical stacks: - // 1.1 2.1 - // 1.2 2.2 - // 1.3 2.3 - // - // If you're on slide 1.3 and navigate right, you will normally move - // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you - // from 1.3 -> 2.3. - navigationMode: 'default' | 'linear' | 'grid'; - - // Randomizes the order of slides each time the presentation loads - shuffle: boolean; - - // Turns fragments on and off globally - fragments: boolean; - - // Flags whether to include the current fragment in the URL, - // so that reloading brings you to the same fragment position - fragmentInURL: boolean; - - // Flags if the presentation is running in an embedded mode, - // i.e. contained within a limited portion of the screen - embedded: boolean; - - // Flags if we should show a help overlay when the question-mark - // key is pressed - help: boolean; - - // Flags if it should be possible to pause the presentation (blackout) - pause: boolean; - - // Flags if speaker notes should be visible to all viewers - showNotes: boolean; - - // Flags if slides with data-visibility="hidden" should be kep visible - showHiddenSlides: boolean; - - // Global override for autoplaying embedded media (video/audio/iframe) - // - null: Media will only autoplay if data-autoplay is present - // - true: All media will autoplay, regardless of individual setting - // - false: No media will autoplay, regardless of individual setting - autoPlayMedia: null | boolean; - - // Global override for preloading lazy-loaded iframes - // - null: Iframes with data-src AND data-preload will be loaded when within - // the viewDistance, iframes with only data-src will be loaded when visible - // - true: All iframes with data-src will be loaded when within the viewDistance - // - false: All iframes with data-src will be loaded only when visible - preloadIframes: null | boolean; - - // Can be used to globally disable auto-animation - autoAnimate: boolean; - - // Optionally provide a custom element matcher that will be - // used to dictate which elements we can animate between. - autoAnimateMatcher: null | Function; - - // Default settings for our auto-animate transitions, can be - // overridden per-slide or per-element via data arguments - autoAnimateEasing: 'ease' | string; - autoAnimateDuration: number - autoAnimateUnmatched: boolean; - - // CSS properties that can be auto-animated. Position & scale - // is matched separately so there's no need to include styles - // like top/right/bottom/left, width/height or margin. - autoAnimateStyles: string[]; - - // Controls automatic progression to the next slide - // - 0: Auto-sliding only happens if the data-autoslide HTML attribute - // is present on the current slide or fragment - // - 1+: All slides will progress automatically at the given interval - // - false: No auto-sliding, even if data-autoslide is present - autoSlide: number | false; - - // Stop auto-sliding after user input - autoSlideStoppable: boolean; - - // Use this method for navigation when auto-sliding (defaults to navigateNext) - autoSlideMethod: null | Function; - - // Specify the average time in seconds that you think you will spend - // presenting each slide. This is used to show a pacing timer in the - // speaker view - defaultTiming: null, - - // Enable slide navigation via mouse wheel - mouseWheel: boolean; - - // Opens links in an iframe preview overlay - // Add `data-preview-link` and `data-preview-link="false"` to customise each link - // individually - previewLinks: boolean; - - // Exposes the reveal.js API through window.postMessage - postMessage: boolean; - - // Dispatches all reveal.js events to the parent window through postMessage - postMessageEvents: boolean; - - // Focuses body when page changes visibility to ensure keyboard shortcuts work - focusBodyOnPageVisibilityChange: boolean; - - // Transition style - transition: 'none' | 'fade' | 'slide' | 'convex' | 'concave' | 'zoom'; - - // Transition speed - transitionSpeed: 'default' | 'fast' | 'slow'; - - // Transition style for full page slide backgrounds - backgroundTransition: 'fade' | 'none' | 'slide' | 'convex' | 'concave' | 'zoom'; - - // Parallax background image - parallaxBackgroundImage: null | string; // CSS syntax, e.g. "a.jpg" - - // Parallax background size - parallaxBackgroundSize: null | string; // CSS syntax, e.g. "3000px 2000px" - - // Parallax background repeat - parallaxBackgroundRepeat: null | string; // repeat/repeat-x/repeat-y/no-repeat/initial/inherit - - // Parallax background position - parallaxBackgroundPosition: null | string; // CSS syntax, e.g. "top left" - - // Amount of pixels to move the parallax background per slide step - parallaxBackgroundHorizontal: null | number; - parallaxBackgroundVertical: null | number; - - // Can be used to initialize reveal.js in one of the following views: - // - print: Render the presentation so that it can be printed to PDF - // - scroll: Show the presentation as a tall scrollable page with scroll - // triggered animations - view: null | 'print' | 'scroll'; - - // Adjusts the height of each slide in the scroll view. - // - full: Each slide is as tall as the viewport - // - compact: Slides are as small as possible, allowing multiple slides - // to be visible in parallel on tall devices - scrollLayout: 'full' | 'compact'; - - // Control how scroll snapping works in the scroll view. - // - false: No snapping, scrolling is continuous - // - proximity: Snap when close to a slide - // - mandatory: Always snap to the closest slide - // - // Only applies to presentations in scroll view. - scrollSnap: false | 'proximity' | 'mandatory'; - - // Enables and configure the scroll view progress bar. - // - 'auto': Show the scrollbar while scrolling, hide while idle - // - true: Always show the scrollbar - // - false: Never show the scrollbar - scrollProgress: 'auto' | boolean; - - // Automatically activate the scroll view when we the viewport falls - // below the given width. - scrollActivationWidth: number; - - // The maximum number of pages a single slide can expand onto when printing - // to PDF, unlimited by default - pdfMaxPagesPerSlide: number, - - // Prints each fragment on a separate slide - pdfSeparateFragments: boolean; - - // Offset used to reduce the height of content within exported PDF pages. - // This exists to account for environment differences based on how you - // print to PDF. CLI printing options, like phantomjs and wkpdf, can end - // on precisely the total height of the document whereas in-browser - // printing has to end one pixel before. - pdfPageHeightOffset: number - - // Number of slides away from the current that are visible - viewDistance: number; - - // Number of slides away from the current that are visible on mobile - // devices. It is advisable to set this to a lower number than - // viewDistance in order to save resources. - mobileViewDistance: number; - - // The display mode that will be used to show slides - display: string; - - // Hide cursor if inactive - hideInactiveCursor: boolean; - - // Time before the cursor is hidden (in ms) - hideCursorTime: number; - - // Should we automatically sort and set indices for fragments - // at each sync? (See Reveal.sync) - sortFragmentsOnSync: boolean; - - // Script dependencies to load - dependencies: any[], - - // Plugin objects to register and use for this presentation - plugins: any[] -} - -export type PartialRevealConfig = Partial; +interface Config { + /** + * The "normal" size of the presentation, aspect ratio will be preserved + * when the presentation is scaled to fit different resolutions + * + * @defaultValue 960 + */ + width?: number | string; + + /** + * The "normal" size of the presentation, aspect ratio will be preserved + * when the presentation is scaled to fit different resolutions + * + * @defaultValue 700 + */ + height?: number | string; + + /** + * Factor of the display size that should remain empty around the content + * + * @defaultValue 0.04 + */ + margin?: number; + + /** + * Bounds for smallest/largest possible scale to apply to content + * + * @defaultValue 0.2 + */ + minScale?: number; + + /** + * + * @defaultValue 2.0 + */ + maxScale?: number; + + /** + * Display presentation control arrows + * - true: Display controls on all screens + * - false: Hide controls on all screens + * - "speaker-only": Only display controls in the speaker view + * + * @defaultValue true + */ + controls?: boolean | 'speaker-only'; + + /** + * Help the user learn the controls by providing hints, for example by + * bouncing the down arrow when they first encounter a vertical slide + * + * @defaultValue true + */ + controlsTutorial?: boolean; + + /** + * Determines where controls appear, "edges" or "bottom-right" + * + * @defaultValue 'bottom-right' + */ + controlsLayout?: 'edges' | 'bottom-right'; + + /** + * Visibility rule for backwards navigation arrows; "faded", "hidden" + * or "visible" + * + * @defaultValue 'faded' + */ + controlsBackArrows?: 'faded' | 'hidden' | 'visible'; + + /** + * Display a presentation progress bar + * + * @defaultValue true + */ + progress?: boolean; + + /** + * Display the page number of the current slide + * - true: Show slide number + * - false: Hide slide number + * + * Can optionally be set as a string that specifies the number formatting: + * - "h.v": Horizontal . vertical slide number (default) + * - "h/v": Horizontal / vertical slide number + * - "c": Flattened slide number + * - "c/t": Flattened slide number / total slides + * + * Alternatively, you can provide a function that returns the slide + * number for the current slide. The function should take in a slide + * object and return an array with one string [slideNumber] or + * three strings [n1,delimiter,n2]. See #formatSlideNumber(). + * + * @defaultValue false + */ + slideNumber?: + | boolean + | 'h.v' + | 'h/v' + | 'c' + | 'c/t' + | ((slide: any) => string | [string, string, string]); + + /** + * Can be used to limit the contexts in which the slide number appears + * - "all": Always show the slide number + * - "print": Only when printing to PDF + * - "speaker": Only in the speaker view + * + * @defaultValue 'all' + */ + showSlideNumber?: 'all' | 'print' | 'speaker'; + + /** + * Use 1 based indexing for # links to match slide number (default is zero + * based) + * + * @defaultValue false + */ + hashOneBasedIndex?: boolean; + + /** + * Add the current slide number to the URL hash so that reloading the + * page/copying the URL will return you to the same slide + * + * @defaultValue false + */ + hash?: boolean; + + /** + * Flags if we should monitor the hash and change slides accordingly + * + * @defaultValue true + */ + respondToHashChanges?: boolean; + + /** + * Enable support for jump-to-slide navigation shortcuts + * + * @defaultValue true + */ + jumpToSlide?: boolean; + + /** + * Push each slide change to the browser history. Implies `hash: true` + * + * @defaultValue false + */ + history?: boolean; + + /** + * Enable keyboard shortcuts for navigation + * + * @defaultValue true + */ + keyboard?: boolean; + + /** + * Optional function that blocks keyboard events when returning false + * + * If you set this to 'focused', we will only capture keyboard events + * for embedded decks when they are in focus + * + * @defaultValue null + */ + keyboardCondition?: null | 'focused' | ((event: KeyboardEvent) => boolean); + + /** + * Disables the default reveal.js slide layout (scaling and centering) + * so that you can use custom CSS layout + * + * @defaultValue false + */ + disableLayout?: boolean; + + /** + * Enable the slide overview mode + * + * @defaultValue true + */ + overview?: boolean; + + /** + * Vertical centering of slides + * + * @defaultValue true + */ + center?: boolean; + + /** + * Enables touch navigation on devices with touch input + * + * @defaultValue true + */ + touch?: boolean; + + /** + * Loop the presentation + * + * @defaultValue false + */ + loop?: boolean; + + /** + * Change the presentation direction to be RTL + * + * @defaultValue false + */ + rtl?: boolean; + + /** + * Changes the behavior of our navigation directions. + * + * "default" + * Left/right arrow keys step between horizontal slides, up/down + * arrow keys step between vertical slides. Space key steps through + * all slides (both horizontal and vertical). + * + * "linear" + * Removes the up/down arrows. Left/right arrows step through all + * slides (both horizontal and vertical). + * + * "grid" + * When this is enabled, stepping left/right from a vertical stack + * to an adjacent vertical stack will land you at the same vertical + * index. + * + * Consider a deck with six slides ordered in two vertical stacks: + * 1.1 2.1 + * 1.2 2.2 + * 1.3 2.3 + * + * If you're on slide 1.3 and navigate right, you will normally move + * from 1.3 -> 2.1. If "grid" is used, the same navigation takes you + * from 1.3 -> 2.3. + * + * @defaultValue 'default' + */ + navigationMode?: 'default' | 'linear' | 'grid'; + + /** + * Randomizes the order of slides each time the presentation loads + * + * @defaultValue false + */ + shuffle?: boolean; + + /** + * Turns fragments on and off globally + * + * @defaultValue true + */ + fragments?: boolean; + + /** + * Flags whether to include the current fragment in the URL, + * so that reloading brings you to the same fragment position + * + * @defaultValue true + */ + fragmentInURL?: boolean; + + /** + * Flags if the presentation is running in an embedded mode, + * i.e. contained within a limited portion of the screen + * + * @defaultValue false + */ + embedded?: boolean; + + /** + * Flags if we should show a help overlay when the question-mark + * key is pressed + * + * @defaultValue true + */ + help?: boolean; + + /** + * Flags if it should be possible to pause the presentation (blackout) + * + * @defaultValue true + */ + pause?: boolean; + + /** + * Flags if speaker notes should be visible to all viewers + * + * @defaultValue false + */ + showNotes?: boolean; + + /** + * Flags if slides with data-visibility="hidden" should be kept visible + * + * @defaultValue false + */ + showHiddenSlides?: boolean; + + /** + * Global override for autoplaying embedded media (video/audio/iframe) + * - null: Media will only autoplay if data-autoplay is present + * - true: All media will autoplay, regardless of individual setting + * - false: No media will autoplay, regardless of individual setting + * + * @defaultValue null + */ + autoPlayMedia?: null | boolean; + + /** + * Global override for preloading lazy-loaded iframes + * - null: Iframes with data-src AND data-preload will be loaded when within + * the viewDistance, iframes with only data-src will be loaded when visible + * - true: All iframes with data-src will be loaded when within the viewDistance + * - false: All iframes with data-src will be loaded only when visible + * + * @defaultValue null + */ + preloadIframes?: null | boolean; + + /** + * Can be used to globally disable auto-animation + * + * @defaultValue true + */ + autoAnimate?: boolean; + + /** + * Optionally provide a custom element matcher that will be + * used to dictate which elements we can animate between. + * + * @defaultValue null + */ + autoAnimateMatcher?: null | Function; + + /** + * Default settings for our auto-animate transitions, can be + * overridden per-slide or per-element via data arguments + * + * @defaultValue 'ease' + */ + autoAnimateEasing?: 'ease' | string; + + /** + * Number of seconds to animate each element. + * + * @defaultValue 1.0 + */ + autoAnimateDuration?: number; + + /** + * Should unmatched elements be faded in? + * + * @defaultValue true + */ + autoAnimateUnmatched?: boolean; + + /** + * CSS properties that can be auto-animated. Position & scale + * is matched separately so there's no need to include styles + * like top/right/bottom/left, width/height or margin. + * + * @defaultValue ['opacity', 'color', 'background-color', 'padding', 'font-size', 'line-height', 'letter-spacing', 'border-width', 'border-color', 'border-radius', 'outline', 'outline-offset'] + */ + autoAnimateStyles?: string[]; + + /** + * Controls automatic progression to the next slide + * - 0: Auto-sliding only happens if the data-autoslide HTML attribute + * is present on the current slide or fragment + * - 1+: All slides will progress automatically at the given interval + * - false: No auto-sliding, even if data-autoslide is present + * + * @defaultValue 0 + */ + autoSlide?: number | false; + + /** + * Stop auto-sliding after user input + * + * @defaultValue true + */ + autoSlideStoppable?: boolean; + + /** + * Use this method for navigation when auto-sliding (defaults to navigateNext) + * + * @defaultValue null + */ + autoSlideMethod?: null | Function; + + /** + * Specify the average time in seconds that you think you will spend + * presenting each slide. This is used to show a pacing timer in the + * speaker view + * + * @defaultValue null + */ + defaultTiming?: null; + + /** + * Enable slide navigation via mouse wheel + * + * @defaultValue false + */ + mouseWheel?: boolean; + + /** + * Opens links in an iframe preview overlay + * Add `data-preview-link` and `data-preview-link="false"` to customize each link + * individually + * + * @defaultValue false + */ + previewLinks?: boolean; + + /** + * Exposes the reveal.js API through window.postMessage + * + * @defaultValue true + */ + postMessage?: boolean; + + /** + * Dispatches all reveal.js events to the parent window through postMessage + * + * @defaultValue false + */ + postMessageEvents?: boolean; + + /** + * Focuses body when page changes visibility to ensure keyboard shortcuts work + * + * @defaultValue true + */ + focusBodyOnPageVisibilityChange?: boolean; + + /** + * Transition style + * + * @defaultValue 'slide' + */ + transition?: 'none' | 'fade' | 'slide' | 'convex' | 'concave' | 'zoom'; + + /** + * Transition speed + * + * @defaultValue 'default' + */ + transitionSpeed?: 'default' | 'fast' | 'slow'; + + /** + * Transition style for full page slide backgrounds + * + * @defaultValue 'fade' + */ + backgroundTransition?: 'fade' | 'none' | 'slide' | 'convex' | 'concave' | 'zoom'; + + /** + * Parallax background image + * + * @defaultValue '' + */ + parallaxBackgroundImage?: null | string; // CSS syntax, e.g. "a.jpg" + + /** + * Parallax background size + * + * @defaultValue '' + */ + parallaxBackgroundSize?: null | string; // CSS syntax, e.g. "3000px 2000px" + + /** + * Parallax background repeat + * + * @defaultValue '' + */ + parallaxBackgroundRepeat?: null | string; // repeat/repeat-x/repeat-y/no-repeat/initial/inherit + + /** + * Parallax background position + * + * @defaultValue '' + */ + parallaxBackgroundPosition?: null | string; // CSS syntax, e.g. "top left" + + /** + * Amount of pixels to move the parallax background per slide step + * + * @defaultValue null + */ + parallaxBackgroundHorizontal?: null | number; + /** + * + * @defaultValue null + */ + parallaxBackgroundVertical?: null | number; + + /** + * Can be used to initialize reveal.js in one of the following views: + * - print: Render the presentation so that it can be printed to PDF + * - scroll: Show the presentation as a tall scrollable page with scroll + * triggered animations + * + * @defaultValue null + */ + view?: null | 'print' | 'scroll'; + + /** + * Adjusts the height of each slide in the scroll view. + * - full: Each slide is as tall as the viewport + * - compact: Slides are as small as possible, allowing multiple slides + * to be visible in parallel on tall devices + * + * @defaultValue 'full' + */ + scrollLayout?: 'full' | 'compact'; + + /** + * Control how scroll snapping works in the scroll view. + * - false: No snapping, scrolling is continuous + * - proximity: Snap when close to a slide + * - mandatory: Always snap to the closest slide + * + * Only applies to presentations in scroll view. + * + * @defaultValue 'mandatory' + */ + scrollSnap?: false | 'proximity' | 'mandatory'; + + /** + * Enables and configures the scroll view progress bar. + * - 'auto': Show the scrollbar while scrolling, hide while idle + * - true: Always show the scrollbar + * - false: Never show the scrollbar + * + * @defaultValue 'auto' + */ + scrollProgress?: 'auto' | boolean; + + /** + * Automatically activate the scroll view when we the viewport falls + * below the given width. + * + * @defaultValue 435 + */ + scrollActivationWidth?: number; + + /** + * The maximum number of pages a single slide can expand onto when printing + * to PDF, unlimited by default + * + * @defaultValue Number.POSITIVE_INFINITY + */ + pdfMaxPagesPerSlide?: number; + + /** + * Prints each fragment on a separate slide + * + * @defaultValue true + */ + pdfSeparateFragments?: boolean; + + /** + * Offset used to reduce the height of content within exported PDF pages. + * This exists to account for environment differences based on how you + * print to PDF. CLI printing options, like phantomjs and wkpdf, can end + * on precisely the total height of the document whereas in-browser + * printing has to end one pixel before. + * + * @defaultValue -1 + */ + pdfPageHeightOffset?: number; + + /** + * Number of slides away from the current that are visible + * + * @defaultValue 3 + */ + viewDistance?: number; + + /** + * Number of slides away from the current that are visible on mobile + * devices. It is advisable to set this to a lower number than + * viewDistance in order to save resources. + * + * @defaultValue 2 + */ + mobileViewDistance?: number; + + /** + * The display mode that will be used to show slides + * + * @defaultValue 'block' + */ + display?: string; + + /** + * Hide cursor if inactive + * + * @defaultValue true + */ + hideInactiveCursor?: boolean; + + /** + * Time before the cursor is hidden (in ms) + * + * @defaultValue 5000 + */ + hideCursorTime?: number; + + /** + * Should we automatically sort and set indices for fragments + * at each sync? (See Reveal.sync) + * + * @defaultValue true + */ + sortFragmentsOnSync?: boolean; + + /** + * Script dependencies to load + * + * @defaultValue [] + */ + dependencies?: any[]; + + /** + * Plugin objects to register and use for this presentation + * + * @defaultValue [] + */ + plugins?: any[]; +}; /** * The default reveal.js config object. */ -const config : RevealConfig = { - - // The "normal" size of the presentation, aspect ratio will be preserved - // when the presentation is scaled to fit different resolutions +const defaultConfig: Config = { width: 960, height: 700, - - // Factor of the display size that should remain empty around the content margin: 0.04, - - // Bounds for smallest/largest possible scale to apply to content minScale: 0.2, maxScale: 2.0, - // Display presentation control arrows controls: true, - - // Help the user learn the controls by providing hints, for example by - // bouncing the down arrow when they first encounter a vertical slide controlsTutorial: true, - - // Determines where controls appear, "edges" or "bottom-right" controlsLayout: 'bottom-right', - - // Visibility rule for backwards navigation arrows; "faded", "hidden" - // or "visible" controlsBackArrows: 'faded', - - // Display a presentation progress bar progress: true, - // Display the page number of the current slide - // - true: Show slide number - // - false: Hide slide number - // - // Can optionally be set as a string that specifies the number formatting: - // - "h.v": Horizontal . vertical slide number (default) - // - "h/v": Horizontal / vertical slide number - // - "c": Flattened slide number - // - "c/t": Flattened slide number / total slides - // - // Alternatively, you can provide a function that returns the slide - // number for the current slide. The function should take in a slide - // object and return an array with one string [slideNumber] or - // three strings [n1,delimiter,n2]. See #formatSlideNumber(). slideNumber: false, - - // Can be used to limit the contexts in which the slide number appears - // - "all": Always show the slide number - // - "print": Only when printing to PDF - // - "speaker": Only in the speaker view showSlideNumber: 'all', - - // Use 1 based indexing for # links to match slide number (default is zero - // based) hashOneBasedIndex: false, - - // Add the current slide number to the URL hash so that reloading the - // page/copying the URL will return you to the same slide hash: false, - - // Flags if we should monitor the hash and change slides accordingly respondToHashChanges: true, - - // Enable support for jump-to-slide navigation shortcuts jumpToSlide: true, - - // Push each slide change to the browser history. Implies `hash: true` history: false, - - // Enable keyboard shortcuts for navigation keyboard: true, - - // Optional function that blocks keyboard events when retuning false - // - // If you set this to 'focused', we will only capture keyboard events - // for embedded decks when they are in focus keyboardCondition: null, - - // Disables the default reveal.js slide layout (scaling and centering) - // so that you can use custom CSS layout disableLayout: false, - - // Enable the slide overview mode overview: true, - - // Vertical centering of slides center: true, - - // Enables touch navigation on devices with touch input touch: true, - - // Loop the presentation loop: false, - - // Change the presentation direction to be RTL rtl: false, - - // Changes the behavior of our navigation directions. - // - // "default" - // Left/right arrow keys step between horizontal slides, up/down - // arrow keys step between vertical slides. Space key steps through - // all slides (both horizontal and vertical). - // - // "linear" - // Removes the up/down arrows. Left/right arrows step through all - // slides (both horizontal and vertical). - // - // "grid" - // When this is enabled, stepping left/right from a vertical stack - // to an adjacent vertical stack will land you at the same vertical - // index. - // - // Consider a deck with six slides ordered in two vertical stacks: - // 1.1 2.1 - // 1.2 2.2 - // 1.3 2.3 - // - // If you're on slide 1.3 and navigate right, you will normally move - // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you - // from 1.3 -> 2.3. navigationMode: 'default', - - // Randomizes the order of slides each time the presentation loads shuffle: false, - - // Turns fragments on and off globally fragments: true, - - // Flags whether to include the current fragment in the URL, - // so that reloading brings you to the same fragment position fragmentInURL: true, - - // Flags if the presentation is running in an embedded mode, - // i.e. contained within a limited portion of the screen embedded: false, - - // Flags if we should show a help overlay when the question-mark - // key is pressed help: true, - - // Flags if it should be possible to pause the presentation (blackout) pause: true, - - // Flags if speaker notes should be visible to all viewers showNotes: false, - - // Flags if slides with data-visibility="hidden" should be kep visible showHiddenSlides: false, - - // Global override for autoplaying embedded media (video/audio/iframe) - // - null: Media will only autoplay if data-autoplay is present - // - true: All media will autoplay, regardless of individual setting - // - false: No media will autoplay, regardless of individual setting autoPlayMedia: null, - - // Global override for preloading lazy-loaded iframes - // - null: Iframes with data-src AND data-preload will be loaded when within - // the viewDistance, iframes with only data-src will be loaded when visible - // - true: All iframes with data-src will be loaded when within the viewDistance - // - false: All iframes with data-src will be loaded only when visible preloadIframes: null, + mouseWheel: false, + previewLinks: false, + viewDistance: 3, + mobileViewDistance: 2, + display: 'block', + hideInactiveCursor: true, + hideCursorTime: 5000, + sortFragmentsOnSync: true, - // Can be used to globally disable auto-animation autoAnimate: true, - - // Optionally provide a custom element matcher that will be - // used to dictate which elements we can animate between. autoAnimateMatcher: null, - - // Default settings for our auto-animate transitions, can be - // overridden per-slide or per-element via data arguments autoAnimateEasing: 'ease', autoAnimateDuration: 1.0, autoAnimateUnmatched: true, - // CSS properties that can be auto-animated. Position & scale - // is matched separately so there's no need to include styles - // like top/right/bottom/left, width/height or margin. autoAnimateStyles: [ 'opacity', 'color', @@ -512,140 +701,45 @@ const config : RevealConfig = { 'border-color', 'border-radius', 'outline', - 'outline-offset' + 'outline-offset', ], - // Controls automatic progression to the next slide - // - 0: Auto-sliding only happens if the data-autoslide HTML attribute - // is present on the current slide or fragment - // - 1+: All slides will progress automatically at the given interval - // - false: No auto-sliding, even if data-autoslide is present autoSlide: 0, - - // Stop auto-sliding after user input autoSlideStoppable: true, - - // Use this method for navigation when auto-sliding (defaults to navigateNext) autoSlideMethod: null, - - // Specify the average time in seconds that you think you will spend - // presenting each slide. This is used to show a pacing timer in the - // speaker view defaultTiming: null, - // Enable slide navigation via mouse wheel - mouseWheel: false, - - // Opens links in an iframe preview overlay - // Add `data-preview-link` and `data-preview-link="false"` to customise each link - // individually - previewLinks: false, - - // Exposes the reveal.js API through window.postMessage postMessage: true, - - // Dispatches all reveal.js events to the parent window through postMessage postMessageEvents: false, - // Focuses body when page changes visibility to ensure keyboard shortcuts work focusBodyOnPageVisibilityChange: true, - // Transition style - transition: 'slide', // none/fade/slide/convex/concave/zoom + transition: 'slide', + transitionSpeed: 'default', + backgroundTransition: 'fade', - // Transition speed - transitionSpeed: 'default', // default/fast/slow - - // Transition style for full page slide backgrounds - backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom - - // Parallax background image - parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg" - - // Parallax background size - parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" - - // Parallax background repeat - parallaxBackgroundRepeat: '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit - - // Parallax background position - parallaxBackgroundPosition: '', // CSS syntax, e.g. "top left" - - // Amount of pixels to move the parallax background per slide step + parallaxBackgroundImage: '', + parallaxBackgroundSize: '', + parallaxBackgroundRepeat: '', + parallaxBackgroundPosition: '', parallaxBackgroundHorizontal: null, parallaxBackgroundVertical: null, - // Can be used to initialize reveal.js in one of the following views: - // - print: Render the presentation so that it can be printed to PDF - // - scroll: Show the presentation as a tall scrollable page with scroll - // triggered animations view: null, - // Adjusts the height of each slide in the scroll view. - // - full: Each slide is as tall as the viewport - // - compact: Slides are as small as possible, allowing multiple slides - // to be visible in parallel on tall devices scrollLayout: 'full', - - // Control how scroll snapping works in the scroll view. - // - false: No snapping, scrolling is continuous - // - proximity: Snap when close to a slide - // - mandatory: Always snap to the closest slide - // - // Only applies to presentations in scroll view. scrollSnap: 'mandatory', - - // Enables and configure the scroll view progress bar. - // - 'auto': Show the scrollbar while scrolling, hide while idle - // - true: Always show the scrollbar - // - false: Never show the scrollbar scrollProgress: 'auto', - - // Automatically activate the scroll view when we the viewport falls - // below the given width. scrollActivationWidth: 435, - // The maximum number of pages a single slide can expand onto when printing - // to PDF, unlimited by default pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY, - - // Prints each fragment on a separate slide pdfSeparateFragments: true, - - // Offset used to reduce the height of content within exported PDF pages. - // This exists to account for environment differences based on how you - // print to PDF. CLI printing options, like phantomjs and wkpdf, can end - // on precisely the total height of the document whereas in-browser - // printing has to end one pixel before. pdfPageHeightOffset: -1, - // Number of slides away from the current that are visible - viewDistance: 3, - - // Number of slides away from the current that are visible on mobile - // devices. It is advisable to set this to a lower number than - // viewDistance in order to save resources. - mobileViewDistance: 2, - - // The display mode that will be used to show slides - display: 'block', - - // Hide cursor if inactive - hideInactiveCursor: true, - - // Time before the cursor is hidden (in ms) - hideCursorTime: 5000, - - // Should we automatically sort and set indices for fragments - // at each sync? (See Reveal.sync) - sortFragmentsOnSync: true, - - // Script dependencies to load dependencies: [], + plugins: [], +}; - // Plugin objects to register and use for this presentation - plugins: [] +export type { Config }; -} - -export default config; \ No newline at end of file +export { defaultConfig }; diff --git a/js/index.ts b/js/index.ts index 4ed29e98..e78fca25 100644 --- a/js/index.ts +++ b/js/index.ts @@ -1,7 +1,7 @@ -import { PartialRevealConfig } from './config.js'; +import { Config } from './config.ts'; //@ts-ignore -import Deck, { VERSION } from './reveal.js' +import Deck, { VERSION } from './reveal.js'; /** * Expose the Reveal class to the window. To create a @@ -13,8 +13,10 @@ import Deck, { VERSION } from './reveal.js' * // reveal.js is ready * }); */ -let Reveal = Deck; - +let Reveal: { + initialize: (options?: Config) => Promise; + [key: string]: any; +} = Deck; /** * The below is a thin shell that mimics the pre 4.0 @@ -32,17 +34,15 @@ type RevealApiFunction = (...args: any[]) => any; let enqueuedAPICalls: RevealApiFunction[] = []; -Reveal.initialize = ( options: PartialRevealConfig ) => { - +Reveal.initialize = (options?: Config) => { // Create our singleton reveal.js instance - Object.assign( Reveal, new Deck( document.querySelector( '.reveal' ), options ) ); + Object.assign(Reveal, new Deck(document.querySelector('.reveal'), options)); // Invoke any enqueued API calls - enqueuedAPICalls.map( method => method( Reveal ) ); + enqueuedAPICalls.map((method) => method(Reveal)); return Reveal.initialize(); - -} +}; /** * The pre 4.0 API let you add event listener before @@ -50,14 +50,16 @@ Reveal.initialize = ( options: PartialRevealConfig ) => { * queuing up premature API calls and invoking all * of them when Reveal.initialize is called. */ -[ 'configure', 'on', 'off', 'addEventListener', 'removeEventListener', 'registerPlugin' ].forEach( method => { - Reveal[method] = ( ...args: any ) => { - enqueuedAPICalls.push( deck => deck[method].call( null, ...args ) ); +['configure', 'on', 'off', 'addEventListener', 'removeEventListener', 'registerPlugin'].forEach( + (method) => { + Reveal[method] = (...args: any) => { + enqueuedAPICalls.push((deck) => deck[method].call(null, ...args)); + }; } -} ); +); Reveal.isReady = () => false; Reveal.VERSION = VERSION; -export default Reveal; \ No newline at end of file +export default Reveal; diff --git a/js/reveal.js b/js/reveal.js index 1110add5..df1df6bb 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -18,7 +18,7 @@ import Touch from './controllers/touch.js' import Focus from './controllers/focus.js' import Notes from './controllers/notes.js' import Playback from './components/playback.js' -import defaultConfig from './config.ts' +import { defaultConfig } from './config.ts' import * as Util from './utils/util.js' import * as Device from './utils/device.js' import { diff --git a/package.json b/package.json index e5511adc..57e5d1f2 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,9 @@ "require": "./dist/reveal.js", "default": "./dist/reveal.js" }, - "./reveal.css": "./dist/reveal.css", "./reset.css": "./dist/reset.css", - "./theme/*": "./dist/theme/*", - "./plugin/highlight": { "import": "./dist/plugin/highlight.mjs", "require": "./dist/plugin/highlight.js", diff --git a/test.js b/test.js index e9303c59..beec2b5e 100644 --- a/test.js +++ b/test.js @@ -1,7 +1,7 @@ import { fileURLToPath } from 'url'; import { dirname } from 'path'; -import { glob } from "glob"; -import { runQunitPuppeteer, printFailedTests } from "node-qunit-puppeteer"; +import { glob } from 'glob'; +import { runQunitPuppeteer, printFailedTests } from 'node-qunit-puppeteer'; import { createServer } from 'vite'; const __filename = fileURLToPath(import.meta.url); @@ -25,34 +25,45 @@ const startServer = async () => { // Run tests const runTests = async (server) => { - await Promise.all(testFiles.map(async (file) => { - const qunitArgs = { - targetUrl: `http://localhost:8009/${file}`, - timeout: 30000, - redirectConsole: false, - puppeteerArgs: ['--allow-file-access-from-files'] - }; + await Promise.all( + testFiles.map(async (file) => { + const qunitArgs = { + targetUrl: `http://localhost:8009/${file}`, + timeout: 30000, + redirectConsole: false, + puppeteerArgs: ['--allow-file-access-from-files'], + }; - try { - const result = await runQunitPuppeteer(qunitArgs); - combinedResults.passed += result.stats.passed; - combinedResults.failed += result.stats.failed; - combinedResults.total += result.stats.total; - combinedResults.runtime += result.stats.runtime; + try { + const result = await runQunitPuppeteer(qunitArgs); + combinedResults.passed += result.stats.passed; + combinedResults.failed += result.stats.failed; + combinedResults.total += result.stats.total; + combinedResults.runtime += result.stats.runtime; - if (result.stats.failed > 0) { - console.log(`${'!'} ${file} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.red); - printFailedTests(result, console); + if (result.stats.failed > 0) { + console.log( + `${'!'} ${file} [${result.stats.passed}/${result.stats.total}] in ${ + result.stats.runtime + }ms`.red + ); + printFailedTests(result, console); + } else { + console.log( + `${'✔'} ${file} [${result.stats.passed}/${result.stats.total}] in ${ + result.stats.runtime + }ms`.green + ); + } + } catch (error) { + console.error(`Error running tests for ${file}:`, error); } - else { - console.log(`${'✔'} ${file} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.green); - } - } catch (error) { - console.error(`Error running tests for ${file}:`, error); - } - })); + }) + ); - console.log(`\n${combinedResults.passed}/${combinedResults.total} tests passed, ${combinedResults.failed} failed, ${combinedResults.runtime}ms runtime`); + console.log( + `\n${combinedResults.passed}/${combinedResults.total} tests passed, ${combinedResults.failed} failed, ${combinedResults.runtime}ms runtime` + ); // Exit with status code 1 if any tests failed, otherwise exit with 0 process.exit(combinedResults.failed > 0 ? 1 : 0); diff --git a/vite.config.styles.ts b/vite.config.styles.ts index 0b100648..b2d2fe8b 100644 --- a/vite.config.styles.ts +++ b/vite.config.styles.ts @@ -1,9 +1,11 @@ -import { resolve } from 'path' -import { defineConfig } from 'vite' +import { resolve } from 'path'; +import { defineConfig } from 'vite'; import fs from 'fs'; // List all theme files in the css/theme directory -const themeFiles = fs.readdirSync(resolve(__dirname, 'css/theme')).filter(file => file.endsWith('.scss')); +const themeFiles = fs + .readdirSync(resolve(__dirname, 'css/theme')) + .filter((file) => file.endsWith('.scss')); const themeEntries = themeFiles.reduce((acc, file) => { acc[`theme/${file.replace('.scss', '')}`] = resolve(__dirname, `css/theme/${file}`); return acc; @@ -17,12 +19,12 @@ export default defineConfig({ lib: { formats: ['es'], entry: { - 'reveal': resolve(__dirname, 'css/reveal.scss'), - 'reset': resolve(__dirname, 'css/reset.css'), + reveal: resolve(__dirname, 'css/reveal.scss'), + reset: resolve(__dirname, 'css/reset.css'), ...themeEntries, }, - } + }, }, plugins: [], -}) +}); diff --git a/vite.config.ts b/vite.config.ts index 5df8531d..1a3d5c9a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,31 +1,30 @@ -import { resolve } from 'path' +import { resolve } from 'path'; import { ModuleFormat } from 'rollup'; -import { defineConfig } from 'vite' +import { defineConfig } from 'vite'; import dts from 'vite-plugin-dts'; -export const appendExtension = (format:ModuleFormat, name:String) : string => { - if( format === 'es' ) { +export const appendExtension = (format: ModuleFormat, name: String): string => { + if (format === 'es') { return `${name}.mjs`; - } - else { + } else { return `${name}.js`; } -} +}; export default defineConfig({ build: { emptyOutDir: true, lib: { formats: ['es', 'umd'], - entry: resolve(__dirname, 'js/index.ts'), + entry: resolve(__dirname, 'js/index.ts'), name: 'Reveal', fileName: (format, entryName) => { return appendExtension(format, 'reveal'); - } + }, }, rollupOptions: { output: { - assetFileNames: "reveal.[ext]", + assetFileNames: 'reveal.[ext]', }, }, }, @@ -36,7 +35,5 @@ export default defineConfig({ 'reveal.js': '/js', }, }, - plugins: [ - dts({ insertTypesEntry: true }), - ], -}) + plugins: [dts({ insertTypesEntry: true, rollupTypes: true })], +});