9 |
10 | 
11 |
12 | 
13 |
14 | With markdown looking like:
15 |
16 | ````md
17 | index.md using a set of ---s to split between slides. You can find out more about the syntax here. If you want to demo the slides, click here to try an existing deck.`)
18 |
19 | const startButton = document.createElement("input")
20 |
21 | const gistForm = createGistInputForm(startButton)
22 | container.appendChild(gistForm)
23 |
24 | p(`Then when you're ready, hit start below. This will start the slides and scroll you to the top of the page. You can scroll (down with the mouse, or press escape) to get back to the code below it.`)
25 |
26 | startButton.type = "button"
27 | startButton.value = "Start slideshow"
28 | container.appendChild(startButton)
29 |
30 | const firstRunSetup = () => {
31 | const re = window.require as any
32 | const isDev = document.location.host.includes("localhost")
33 |
34 | // https://unpkg.com/browse/typescript-playground-presentation-mode@0.0.1/dist/x.js => unpkg/browse/typescript-playground-presentation-mode@0.0.1/dist/x
35 | const prefix = isDev ? "local" : "unpkg/typescript-playground-presentation-mode/dist"
36 |
37 | re([prefix + "/slideshow"], (slides: typeof import("./slideshow/slideshow")) => {
38 | // @ts-ignore sets the window.Reveal for the upcoming plugins
39 | window.Reveal = slides.revealJS
40 |
41 | re([prefix + "/markdown"], ( ) => {
42 | slides.startSlides(localStorage.getItem("playground-slides-gist-href"))
43 | // p.textContent = "In slideshow, scroll up to get back to your slides."
44 | startButton.disabled = true
45 | })
46 | })
47 | }
48 |
49 | startButton.onclick = () => {
50 | firstRunSetup()
51 | }
52 | }
53 | }
54 |
55 | const createGistInputForm = (startButton: HTMLInputElement) => {
56 | const form = document.createElement("form")
57 |
58 | const gistHref = document.createElement("input")
59 | gistHref.type = "url"
60 | gistHref.id = "gist-input"
61 | gistHref.placeholder = "https://gist.github.com/.../..."
62 | const storedGistHref = localStorage.getItem("playground-slides-gist-href")
63 | gistHref.value = storedGistHref
64 |
65 | const updateState = ({ enable }) => {
66 | if (enable) {
67 | gistHref.classList.add("good")
68 | startButton.disabled = false
69 |
70 | } else {
71 | gistHref.classList.remove("good")
72 | startButton.disabled = true
73 | }
74 | }
75 |
76 | const textUpdate = (e) => {
77 | const href = e.target.value.toLowerCase().trim()
78 | localStorage.setItem("playground-slides-gist-href", href)
79 | updateState({ enable: isGist(href) })
80 | }
81 |
82 | gistHref.onkeyup = textUpdate
83 | gistHref.onpaste = textUpdate
84 | gistHref.onchange = textUpdate
85 | gistHref.onblur = textUpdate
86 | gistHref.oninput = textUpdate
87 | form.appendChild(gistHref)
88 |
89 | updateState({ enable: isGist(storedGistHref) })
90 | return form
91 | }
92 |
93 | const isGist = (str: string) => {
94 | return str && str.startsWith("https://gist.github.com/") && str.split("/").length === 5
95 | }
96 |
97 | export default slidePlugin
98 |
99 |
--------------------------------------------------------------------------------
/src/slideshow/ambient.d.ts:
--------------------------------------------------------------------------------
1 | declare module "reveal.js"
2 |
--------------------------------------------------------------------------------
/src/slideshow/markdown.js:
--------------------------------------------------------------------------------
1 | // This is a modified version of https://github.com/hakimel/reveal.js/blob/master/plugin/markdown/markdown.js
2 | // which is MIT licensed
3 |
4 | // Modified to:
5 | // - Work well as an AMD module
6 | // - Work under strict mode JS
7 |
8 | import marked from "./marked"
9 |
10 | /**
11 | * The reveal.js markdown plugin. Handles parsing of
12 | * markdown inside of presentations as well as loading
13 | * of external markdown documents.
14 | */
15 |
16 |
17 | var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
18 | DEFAULT_NOTES_SEPARATOR = 'notes?:',
19 | DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
20 | DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
21 |
22 | var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
23 |
24 |
25 | /**
26 | * Retrieves the markdown contents of a slide section
27 | * element. Normalizes leading tabs/whitespace.
28 | */
29 | function getMarkdownFromSlide( section ) {
30 |
31 | // look for a ' );
39 |
40 | var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
41 | leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
42 |
43 | if( leadingTabs > 0 ) {
44 | text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
45 | }
46 | else if( leadingWs > 1 ) {
47 | text = text.replace( new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n' );
48 | }
49 |
50 | return text;
51 |
52 | }
53 |
54 | /**
55 | * Given a markdown slide section element, this will
56 | * return all arguments that aren't related to markdown
57 | * parsing. Used to forward any other user-defined arguments
58 | * to the output markdown slide.
59 | */
60 | function getForwardedAttributes( section ) {
61 |
62 | var attributes = section.attributes;
63 | var result = [];
64 |
65 | for( var i = 0, len = attributes.length; i < len; i++ ) {
66 | var name = attributes[i].name,
67 | value = attributes[i].value;
68 |
69 | // disregard attributes that are used for markdown loading/parsing
70 | if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
71 |
72 | if( value ) {
73 | result.push( name + '="' + value + '"' );
74 | }
75 | else {
76 | result.push( name );
77 | }
78 | }
79 |
80 | return result.join( ' ' );
81 |
82 | }
83 |
84 | /**
85 | * Inspects the given options and fills out default
86 | * values for what's not defined.
87 | */
88 | function getSlidifyOptions( options ) {
89 |
90 | options = options || {};
91 | options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
92 | options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
93 | options.attributes = options.attributes || '';
94 |
95 | return options;
96 |
97 | }
98 |
99 | /**
100 | * Helper function for constructing a markdown slide.
101 | */
102 | function createMarkdownSlide( content, options ) {
103 |
104 | options = getSlidifyOptions( options );
105 |
106 | var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
107 |
108 | if( notesMatch.length === 2 ) {
109 | content = notesMatch[0] + '';
110 | }
111 |
112 | // prevent script end tags in the content from interfering
113 | // with parsing
114 | content = content.replace( /<\/script>/g, SCRIPT_END_PLACEHOLDER );
115 |
116 | return '';
117 |
118 | }
119 |
120 | /**
121 | * Parses a data string into multiple slides based
122 | * on the passed in separator arguments.
123 | */
124 | function slidify( markdown, options ) {
125 |
126 | options = getSlidifyOptions( options );
127 |
128 | var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
129 | horizontalSeparatorRegex = new RegExp( options.separator );
130 |
131 | var matches,
132 | lastIndex = 0,
133 | isHorizontal,
134 | wasHorizontal = true,
135 | content,
136 | sectionStack = [];
137 |
138 | // iterate until all blocks between separators are stacked up
139 | while( matches = separatorRegex.exec( markdown ) ) {
140 | let notes = null;
141 |
142 | // determine direction (horizontal by default)
143 | isHorizontal = horizontalSeparatorRegex.test( matches[0] );
144 |
145 | if( !isHorizontal && wasHorizontal ) {
146 | // create vertical stack
147 | sectionStack.push( [] );
148 | }
149 |
150 | // pluck slide content from markdown input
151 | content = markdown.substring( lastIndex, matches.index );
152 |
153 | if( isHorizontal && wasHorizontal ) {
154 | // add to horizontal stack
155 | sectionStack.push( content );
156 | }
157 | else {
158 | // add to vertical stack
159 | sectionStack[sectionStack.length-1].push( content );
160 | }
161 |
162 | lastIndex = separatorRegex.lastIndex;
163 | wasHorizontal = isHorizontal;
164 | }
165 |
166 | // add the remaining slide
167 | ( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
168 |
169 | var markdownSections = '';
170 |
171 | // flatten the hierarchical stack, and insert Remember that you need to serve the presentation HTML from a HTTP server.
' + 226 | ''+(n?e:u(e,!0))+"\n":""+(n?e:u(e,!0))+"\n"+e+"\n"},r.prototype.html=function(e){return e},r.prototype.heading=function(e,t,n,r){return this.options.headerIds?"
\n":"
\n"},r.prototype.list=function(e,t,n){var r=t?"ol":"ul";return"<"+r+(t&&1!==n?' start="'+n+'"':"")+">\n"+e+"\n"},r.prototype.listitem=function(e){return"
"+e+"
\n"},r.prototype.table=function(e,t){return t&&(t=""+t+""),""+e+""},r.prototype.br=function(){return this.options.xhtml?"":"
"},r.prototype.del=function(e){return"
"+u(e.message+"",!0)+"";throw e}}f.exec=f,m.options=m.setOptions=function(e){return d(m.defaults,e),m},m.getDefaults=function(){return{baseUrl:null,breaks:!1,gfm:!0,headerIds:!0,headerPrefix:"",highlight:null,langPrefix:"language-",mangle:!0,pedantic:!1,renderer:new r,sanitize:!1,sanitizer:null,silent:!1,smartLists:!1,smartypants:!1,tables:!0,xhtml:!1}},m.defaults=m.getDefaults(),m.Parser=p,m.parser=p.parse,m.Renderer=r,m.TextRenderer=s,m.Lexer=a,m.lexer=a.lex,m.InlineLexer=h,m.inlineLexer=h.output,m.Slugger=t,m.parse=m,"undefined"!=typeof module&&"object"==typeof exports?module.exports=m:"function"==typeof define&&define.amd?define(function(){return m}):e.marked=m}(this||("undefined"!=typeof window?window:global)); -------------------------------------------------------------------------------- /src/slideshow/reveal.d.ts: -------------------------------------------------------------------------------- 1 | export interface RevealStatic { 2 | /** 3 | * The reveal.js version 4 | */ 5 | VERSION: string; 6 | 7 | /** 8 | * Starts up the presentation if the client is capable. 9 | */ 10 | initialize: (config?: RevealOptions) => void; 11 | /** 12 | * Applies the configuration settings from the config 13 | * object. May be called multiple times. 14 | */ 15 | configure: (diff: RevealOptions) => void; 16 | 17 | /** 18 | * Steps from the current point in the presentation to the 19 | * slide which matches the specified horizontal and vertical 20 | * indices. 21 | * 22 | * @param {number} [h=indexh] Horizontal index of the target slide 23 | * @param {number} [v=indexv] Vertical index of the target slide 24 | * @param {number} [f] Index of a fragment within the 25 | * target slide to activate 26 | * @param {number} [o] Origin for use in multimaster environments 27 | */ 28 | slide(indexh: number, indexv?: number, f?: number, o?: number): void; 29 | /** 30 | * Navigation methods 31 | */ 32 | left(): void; 33 | /** 34 | * Navigation methods 35 | */ 36 | right(): void; 37 | /** 38 | * Navigation methods 39 | */ 40 | up(): void; 41 | /** 42 | * Navigation methods 43 | */ 44 | down(): void; 45 | /** 46 | * Navigates backwards, prioritized in the following order: 47 | * 1) Previous fragment 48 | * 2) Previous vertical slide 49 | * 3) Previous horizontal slide 50 | */ 51 | prev(): void; 52 | /** 53 | * The reverse of #navigatePrev(). 54 | */ 55 | next(): void; 56 | 57 | /** 58 | * Navigate to the specified slide fragment. 59 | * 60 | * @param {?number} index The index of the fragment that 61 | * should be shown, -1 means all are invisible 62 | * @param {number} offset Integer offset to apply to the 63 | * fragment index 64 | * 65 | * @return {boolean} true if a change was made in any 66 | * fragments visibility as part of this call 67 | */ 68 | navigateFragment(index: number | null, offset: number): boolean; 69 | /** 70 | * Navigate to the previous slide fragment. 71 | * 72 | * @return {boolean} true if there was a previous fragment, 73 | * false otherwise 74 | */ 75 | prevFragment(): boolean; 76 | /** 77 | * Navigate to the next slide fragment. 78 | * 79 | * @return {boolean} true if there was a next fragment, 80 | * false otherwise 81 | */ 82 | nextFragment(): boolean; 83 | 84 | /** 85 | * Randomize the order of slides 86 | */ 87 | shuffle(): void; 88 | 89 | /** 90 | * Toggles the overview mode on/off 91 | * @param override 92 | */ 93 | toggleOverview(override?: boolean): void; 94 | /** 95 | * Toggles the "black screen" mode on/off 96 | * @param override 97 | */ 98 | togglePause(override?: boolean): void; 99 | /** 100 | * Toggles the auto slide mode on/off 101 | * @param override 102 | */ 103 | toggleAutoSlide(override?: boolean): void; 104 | /** 105 | * Open or close help overlay window. 106 | * 107 | * @param {Boolean} [override] Flag which overrides the 108 | * toggle logic and forcibly sets the desired state. True means 109 | * help is open, false means it's closed. 110 | */ 111 | toggleHelp(override?: boolean): void; 112 | 113 | /** 114 | * Returns the previous slide element, may be null 115 | */ 116 | getPreviousSlide(): Element | null; 117 | /** 118 | * Returns the current slide element 119 | */ 120 | getCurrentSlide(): Element; 121 | 122 | /** 123 | * Returns the indices of the current, or specified, slide 124 | * @param slide 125 | */ 126 | getIndices(slide?: Element): { h: number; v: number }; 127 | /** 128 | * Presentation progress on range of 0-1 129 | */ 130 | getProgress(): number; 131 | /** 132 | * Returns the total number of slides 133 | */ 134 | getTotalSlides(): number; 135 | 136 | /** 137 | * Returns the speaker notes string for a slide, or null 138 | * @param slide 139 | */ 140 | getSlideNotes(slide?: Element): string | null; 141 | 142 | /** 143 | * Forward event binding to the reveal DOM element 144 | * @param type 145 | * @param listener 146 | * @param useCapture 147 | */ 148 | addEventListener(type: string, listener: (event: any) => void, useCapture?: boolean): void; 149 | /** 150 | * Forward event binding to the reveal DOM element 151 | * @param type 152 | * @param listener 153 | * @param useCapture 154 | */ 155 | removeEventListener(type: string, listener: (event: any) => void, useCapture?: boolean): void; 156 | 157 | /** 158 | * Returns true if we're currently on the first slide 159 | */ 160 | isFirstSlide(): boolean; 161 | /** 162 | * Returns true if we're currently on the last slide 163 | */ 164 | isLastSlide(): boolean; 165 | /** 166 | * Returns true if we're on the last slide in the current vertical stack 167 | */ 168 | isLastVerticalSlide(): boolean; 169 | /** 170 | * Checks if we are currently in the paused mode. 171 | */ 172 | isPaused(): boolean; 173 | /** 174 | * Checks if the overview is currently active. 175 | * 176 | * @return {Boolean} true if the overview is active, 177 | * false otherwise 178 | */ 179 | isOverview(): boolean; 180 | /** 181 | * Checks if the auto slide mode is currently on. 182 | */ 183 | isAutoSliding(): boolean; 184 | 185 | /** 186 | * Forces an update in slide layout 187 | */ 188 | layout(): void; 189 | /** 190 | * Adds all internal event listeners (such as keyboard) 191 | */ 192 | addEventListeners(): void; 193 | /** 194 | * Removes all internal event listeners (such as keyboard) 195 | */ 196 | removeEventListeners(): void; 197 | /** 198 | * Returns the slide element at the specified index 199 | * @param x 200 | * @param y 201 | */ 202 | getSlide(x: number, y?: number): Element; 203 | /** 204 | * Returns the current scale of the presentation content 205 | */ 206 | getScale(): number; 207 | /** 208 | * Returns the current configuration object 209 | */ 210 | getConfig(): RevealOptions; 211 | /** 212 | * Helper method, retrieves query string as a key/value hash 213 | */ 214 | getQueryHash(): Record