asciidoctor-revealjs 4.1.0 → 5.0.0.rc1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) hide show
  1. checksums.yaml +4 -4
  2. data/README.adoc +11 -1350
  3. data/asciidoctor-revealjs.gemspec +0 -2
  4. data/examples/auto-animate-code.adoc +47 -0
  5. data/examples/auto-animate.adoc +351 -0
  6. data/examples/favicon.adoc +13 -0
  7. data/examples/mathjax-cdn.adoc +1 -1
  8. data/examples/mathjax.adoc +1 -1
  9. data/examples/revealjs-custom-theme.adoc +1 -1
  10. data/examples/revealjs-plugin-activation.adoc +3 -2
  11. data/examples/revealjs-plugins/chalkboard/README.md +94 -61
  12. data/examples/revealjs-plugins/chalkboard/img/boardmarker-black.png +0 -0
  13. data/examples/revealjs-plugins/chalkboard/img/boardmarker-blue.png +0 -0
  14. data/examples/revealjs-plugins/chalkboard/img/boardmarker-green.png +0 -0
  15. data/examples/revealjs-plugins/chalkboard/img/boardmarker-orange.png +0 -0
  16. data/examples/revealjs-plugins/chalkboard/img/boardmarker-purple.png +0 -0
  17. data/examples/revealjs-plugins/chalkboard/img/boardmarker-red.png +0 -0
  18. data/examples/revealjs-plugins/chalkboard/img/boardmarker-yellow.png +0 -0
  19. data/examples/revealjs-plugins/chalkboard/img/chalk-blue.png +0 -0
  20. data/examples/revealjs-plugins/chalkboard/img/chalk-green.png +0 -0
  21. data/examples/revealjs-plugins/chalkboard/img/chalk-orange.png +0 -0
  22. data/examples/revealjs-plugins/chalkboard/img/chalk-purple.png +0 -0
  23. data/examples/revealjs-plugins/chalkboard/img/chalk-red.png +0 -0
  24. data/examples/revealjs-plugins/chalkboard/img/{chalk.png → chalk-white.png} +0 -0
  25. data/examples/revealjs-plugins/chalkboard/img/chalk-yellow.png +0 -0
  26. data/examples/revealjs-plugins/chalkboard/plugin.js +1836 -0
  27. data/examples/revealjs-plugins/chalkboard/style.css +38 -0
  28. data/examples/revealjs-plugins/{reveal.js-menu → menu}/LICENSE +1 -1
  29. data/examples/revealjs-plugins/menu/README.md +368 -0
  30. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/LICENSE.txt +0 -0
  31. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/css/all.css +0 -0
  32. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/css/brands.css +0 -0
  33. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/css/fontawesome.css +0 -0
  34. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/css/regular.css +0 -0
  35. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/css/solid.css +0 -0
  36. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/css/svg-with-js.css +0 -0
  37. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/css/v4-shims.css +0 -0
  38. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/css/v4-shims.min.css +0 -0
  39. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-brands-400.eot +0 -0
  40. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-brands-400.svg +0 -0
  41. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-brands-400.ttf +0 -0
  42. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-brands-400.woff +0 -0
  43. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-brands-400.woff2 +0 -0
  44. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-regular-400.eot +0 -0
  45. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-regular-400.svg +0 -0
  46. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-regular-400.ttf +0 -0
  47. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-regular-400.woff +0 -0
  48. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-regular-400.woff2 +0 -0
  49. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-solid-900.eot +0 -0
  50. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-solid-900.svg +0 -0
  51. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-solid-900.ttf +0 -0
  52. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-solid-900.woff +0 -0
  53. data/examples/revealjs-plugins/{reveal.js-menu → menu}/font-awesome/webfonts/fa-solid-900.woff2 +0 -0
  54. data/examples/revealjs-plugins/{reveal.js-menu → menu}/menu.css +116 -115
  55. data/examples/revealjs-plugins/menu/menu.esm.js +1 -0
  56. data/examples/revealjs-plugins/menu/menu.js +1 -0
  57. data/examples/revealjs-plugins/menu/plugin.js +1252 -0
  58. data/examples/revealjs-plugins-docinfo-footer.html +20 -0
  59. data/examples/revealjs-plugins.adoc +2 -3
  60. data/examples/search-plugin.adoc +26 -0
  61. data/examples/source-rouge.adoc +1 -1
  62. data/examples/text-formatting.adoc +34 -0
  63. data/lib/asciidoctor-revealjs/converter.rb +1029 -966
  64. data/lib/asciidoctor-revealjs/highlightjs.rb +155 -14
  65. data/lib/asciidoctor-revealjs/version.rb +1 -1
  66. data/templates/asciidoctor-compatibility.css +26 -1
  67. data/templates/document.html.slim +28 -44
  68. data/templates/helpers.rb +83 -9
  69. data/templates/inline_quoted.html.slim +2 -2
  70. data/templates/listing.html.slim +2 -1
  71. data/templates/section.html.slim +7 -1
  72. data/templates/title_slide.html.slim +1 -2
  73. metadata +57 -69
  74. data/examples/revealjs-plugins/chalkboard/chalkboard.js +0 -1288
  75. data/examples/revealjs-plugins/chalkboard/img/boardmarker.png +0 -0
  76. data/examples/revealjs-plugins/reveal.js-menu/CONTRIBUTING.md +0 -9
  77. data/examples/revealjs-plugins/reveal.js-menu/README.md +0 -334
  78. data/examples/revealjs-plugins/reveal.js-menu/bower.json +0 -21
  79. data/examples/revealjs-plugins/reveal.js-menu/menu.js +0 -949
  80. data/examples/revealjs-plugins/reveal.js-menu/package.json +0 -22
  81. data/examples/revealjs-plugins-conf.js +0 -10
  82. data/examples/revealjs-plugins.js +0 -2
@@ -0,0 +1,38 @@
1
+ div.palette, div.boardhandle {
2
+ position: absolute;
3
+ /*
4
+ height: 260px;
5
+ margin: -130px 0 0 0px;
6
+ */
7
+ top: 50%;
8
+ transform: translateY(-50%);
9
+ font-size: 24px;
10
+ border-radius: 10px;
11
+ border-top: 4px solid #222;
12
+ border-right: 4px solid #222;
13
+ border-bottom: 4px solid #222;
14
+ background: black;
15
+ transition: transform 0.3s;
16
+ }
17
+
18
+ div.palette {
19
+ left: -10px;
20
+ padding-left:10px;
21
+ }
22
+
23
+ div.boardhandle {
24
+ right: -10px;
25
+ padding-right:10px;
26
+ }
27
+
28
+ div.palette > ul,
29
+ div.boardhandle > ul {
30
+ list-style-type: none;
31
+ margin: 0;
32
+ padding: 0;
33
+ }
34
+
35
+ div.palette > ul > li,
36
+ div.boardhandle > ul > li {
37
+ margin: 10px;
38
+ }
@@ -1,4 +1,4 @@
1
- Copyright (C) 2015 Greg Denehy
1
+ Copyright (C) 2020 Greg Denehy
2
2
 
3
3
  Permission is hereby granted, free of charge, to any person obtaining a copy
4
4
  of this software and associated documentation files (the "Software"), to deal
@@ -0,0 +1,368 @@
1
+ # reveal.js-menu
2
+
3
+ A slideout menu plugin for [Reveal.js](https://github.com/hakimel/reveal.js) to quickly jump to any slide by title. Also optionally change the theme and set the default transition. [Check out the live demo](https://denehyg.github.io/reveal.js-menu)
4
+
5
+ ## Installation
6
+
7
+ ### Bower
8
+
9
+ Download and install the package in your project:
10
+
11
+ `bower install reveal.js-menu`
12
+
13
+ Add the plugin to your presentation, as below.
14
+
15
+ ```javascript
16
+ <script src="bower_components/reveal.js-menu/menu.js"></script>
17
+ <script>
18
+ Reveal.initialize({
19
+ plugins: [ RevealMenu ]
20
+ });
21
+ </script>
22
+ ```
23
+
24
+ ### npm
25
+
26
+ Download and install the package in your project:
27
+
28
+ `npm install --save reveal.js-menu`
29
+
30
+ Add the plugin to your presentation, as below.
31
+
32
+ ```javascript
33
+ <script src="node_modules/reveal.js-menu/menu.js"></script>
34
+ <script>
35
+ Reveal.initialize({
36
+ plugins: [ RevealMenu ]
37
+ });
38
+ </script>
39
+ ```
40
+
41
+ ### Manual
42
+
43
+ Copy this repository into the plugins folder of your reveal.js presentation, ie `plugins/menu`.
44
+
45
+ Add the plugin to the dependencies in your presentation, as below.
46
+
47
+ ```javascript
48
+ <script src="plugin/menu/menu.js"></script>
49
+ <script>
50
+ Reveal.initialize({
51
+ plugins: [ RevealMenu ]
52
+ });
53
+ </script>
54
+ ```
55
+
56
+ ## Configuration
57
+
58
+ You can configure the menu for your presentation by providing a `menu` option in the reveal.js initialization options. Note that all config values are optional and will default as specified below.
59
+
60
+ ```javascript
61
+ Reveal.initialize({
62
+ // ...
63
+
64
+ menu: {
65
+ // Specifies which side of the presentation the menu will
66
+ // be shown. Use 'left' or 'right'.
67
+ side: 'left',
68
+
69
+ // Specifies the width of the menu.
70
+ // Can be one of the following:
71
+ // 'normal', 'wide', 'third', 'half', 'full', or
72
+ // any valid css length value
73
+ width: 'normal',
74
+
75
+ // Add slide numbers to the titles in the slide list.
76
+ // Use 'true' or format string (same as reveal.js slide numbers)
77
+ numbers: false,
78
+
79
+ // Specifies which slide elements will be used for generating
80
+ // the slide titles in the menu. The default selects the first
81
+ // heading element found in the slide, but you can specify any
82
+ // valid css selector and the text from the first matching
83
+ // element will be used.
84
+ // Note: that a section data-menu-title attribute or an element
85
+ // with a menu-title class will take precedence over this option
86
+ titleSelector: 'h1, h2, h3, h4, h5, h6',
87
+
88
+ // If slides do not have a matching title, attempt to use the
89
+ // start of the text content as the title instead
90
+ useTextContentForMissingTitles: false,
91
+
92
+ // Hide slides from the menu that do not have a title.
93
+ // Set to 'true' to only list slides with titles.
94
+ hideMissingTitles: false,
95
+
96
+ // Adds markers to the slide titles to indicate the
97
+ // progress through the presentation. Set to 'false'
98
+ // to hide the markers.
99
+ markers: true,
100
+
101
+ // Specify custom panels to be included in the menu, by
102
+ // providing an array of objects with 'title', 'icon'
103
+ // properties, and either a 'src' or 'content' property.
104
+ custom: false,
105
+
106
+ // Specifies the themes that will be available in the themes
107
+ // menu panel. Set to 'true' to show the themes menu panel
108
+ // with the default themes list. Alternatively, provide an
109
+ // array to specify the themes to make available in the
110
+ // themes menu panel, for example...
111
+ //
112
+ // [
113
+ // { name: 'Black', theme: 'dist/theme/black.css' },
114
+ // { name: 'White', theme: 'dist/theme/white.css' },
115
+ // { name: 'League', theme: 'dist/theme/league.css' },
116
+ // {
117
+ // name: 'Dark',
118
+ // theme: 'lib/reveal.js/dist/theme/black.css',
119
+ // highlightTheme: 'lib/reveal.js/plugin/highlight/monokai.css'
120
+ // },
121
+ // {
122
+ // name: 'Code: Zenburn',
123
+ // highlightTheme: 'lib/reveal.js/plugin/highlight/zenburn.css'
124
+ // }
125
+ // ]
126
+ //
127
+ // Note: specifying highlightTheme without a theme will
128
+ // change the code highlight theme while leaving the
129
+ // presentation theme unchanged.
130
+ themes: false,
131
+
132
+ // Specifies the path to the default theme files. If your
133
+ // presentation uses a different path to the standard reveal
134
+ // layout then you need to provide this option, but only
135
+ // when 'themes' is set to 'true'. If you provide your own
136
+ // list of themes or 'themes' is set to 'false' the
137
+ // 'themesPath' option is ignored.
138
+ themesPath: 'dist/theme/',
139
+
140
+ // Specifies if the transitions menu panel will be shown.
141
+ // Set to 'true' to show the transitions menu panel with
142
+ // the default transitions list. Alternatively, provide an
143
+ // array to specify the transitions to make available in
144
+ // the transitions panel, for example...
145
+ // ['None', 'Fade', 'Slide']
146
+ transitions: false,
147
+
148
+ // Adds a menu button to the slides to open the menu panel.
149
+ // Set to 'false' to hide the button.
150
+ openButton: true,
151
+
152
+ // If 'true' allows the slide number in the presentation to
153
+ // open the menu panel. The reveal.js slideNumber option must
154
+ // be displayed for this to take effect
155
+ openSlideNumber: false,
156
+
157
+ // If true allows the user to open and navigate the menu using
158
+ // the keyboard. Standard keyboard interaction with reveal
159
+ // will be disabled while the menu is open.
160
+ keyboard: true,
161
+
162
+ // Normally the menu will close on user actions such as
163
+ // selecting a menu item, or clicking the presentation area.
164
+ // If 'true', the sticky option will leave the menu open
165
+ // until it is explicitly closed, that is, using the close
166
+ // button or pressing the ESC or m key (when the keyboard
167
+ // interaction option is enabled).
168
+ sticky: false,
169
+
170
+ // If 'true' standard menu items will be automatically opened
171
+ // when navigating using the keyboard. Note: this only takes
172
+ // effect when both the 'keyboard' and 'sticky' options are enabled.
173
+ autoOpen: true,
174
+
175
+ // If 'true' the menu will not be created until it is explicitly
176
+ // requested by calling RevealMenu.init(). Note this will delay
177
+ // the creation of all menu panels, including custom panels, and
178
+ // the menu button.
179
+ delayInit: false,
180
+
181
+ // If 'true' the menu will be shown when the menu is initialised.
182
+ openOnInit: false,
183
+
184
+ // By default the menu will load it's own font-awesome library
185
+ // icons. If your presentation needs to load a different
186
+ // font-awesome library the 'loadIcons' option can be set to false
187
+ // and the menu will not attempt to load the font-awesome library.
188
+ loadIcons: true
189
+ }
190
+ });
191
+ ```
192
+
193
+ ### Themes Stylesheet
194
+
195
+ If you are using the themes panel you need to ensure the theme stylesheet in the presentation uses the `id="theme"` attribute. For example...
196
+
197
+ ```html
198
+ <link rel="stylesheet" href="css/theme/black.css" id="theme" />
199
+ ```
200
+
201
+ If your themes configuration includes code highlight themes you need to ensure the highlights theme stylesheet in the presentation uses the `id="highlight-theme"` attribute. For example...
202
+
203
+ ```html
204
+ <link
205
+ rel="stylesheet"
206
+ href="plugin/highlight/zenburn.css"
207
+ id="highlight-theme"
208
+ />
209
+ ```
210
+
211
+ ## Slide Titles
212
+
213
+ The slide titles used in the menu can be supplied explicitly or are taken directly from the presentation, using the following rules...
214
+
215
+ ###### 1. The section's `data-menu-title` attribute.
216
+
217
+ If the slide's section element contains a `data-menu-title` attribute this will be used for the slide title in the menu. For example...
218
+
219
+ ```html
220
+ <section data-menu-title="Custom Menu Title">
221
+ <h1>Title</h1>
222
+ <p>...</p>
223
+ </section>
224
+ ```
225
+
226
+ ###### 2. Any element with the class `menu-title`.
227
+
228
+ If the slide's section contains an element with the class `menu-title` then the element's text will be used for the title. The first such element found will be used if there are more than one. Note the element need not be displayed to be used. For example...
229
+
230
+ ```html
231
+ <section>
232
+ <h1>Title</h1>
233
+ <span class="menu-title" style="display: none">Custom Menu Title</span>
234
+ <p>...</p>
235
+ </section>
236
+ ```
237
+
238
+ ###### 3. The first heading found or a custom element selector
239
+
240
+ The `titleSelector` option can be used to customise the elements that will be used to generate the slide titles in the menu. The default option selects the first heading element found in the slide. For example...
241
+
242
+ ```html
243
+ <section>
244
+ <h3>This will be the slide title in the menu</h3>
245
+ <h1>Title</h1>
246
+ <p>...</p>
247
+ </section>
248
+ ```
249
+
250
+ Any valid CSS selector should work but note the selector will only be applied to elements contained within the slide section. You could use the `'h1'` selector to only use level 1 headings or `'p'` to use the first paragraph element. For example, `titleSelector: 'p.lead'` would be used like this...
251
+
252
+ ```html
253
+ <section>
254
+ <h1>Title</h1>
255
+ <p class="lead">This will be the slide title in the menu</p>
256
+ <p>...</p>
257
+ </section>
258
+ ```
259
+
260
+ Using `titleSelector: ''` will ignore all elements and no title will be provided, unless the slide section contains a `data-menu-title` attribute or an element with the `menu-title` class.
261
+
262
+ ###### 4. No title is provided
263
+
264
+ If no title can be found using the above methods, a default title incorporating the slide number will be used. For example, the following would result in a slide title in the format of 'Slide 12'...
265
+
266
+ ```html
267
+ <section>
268
+ <p>...</p>
269
+ </section>
270
+ ```
271
+
272
+ If the `hideMissingTitles` option is set to `true`, however, the slide will not be listed in the menu.
273
+
274
+ ## Custom Menu Panels
275
+
276
+ Additional custom panels can be added the menu using the `custom` option.
277
+
278
+ ```javascript
279
+ Reveal.initialize({
280
+ // ...
281
+
282
+ menu: {
283
+ // ...
284
+
285
+ custom: [
286
+ {
287
+ title: 'Links',
288
+ icon: '<i class="fa fa-external-link">',
289
+ src: 'links.html'
290
+ },
291
+ {
292
+ title: 'About',
293
+ icon: '<i class="fa fa-info">',
294
+ content: '<p>This slidedeck is created with reveal.js</p>'
295
+ }
296
+ ]
297
+ }
298
+ });
299
+ ```
300
+
301
+ `title` and `icon` are used for the toolbar buttons at the top of the menu. There are two approaches you can use to provide content for the panels...
302
+
303
+ - You can provide a URL in `src` to load html from another file.
304
+ - Alternatively, you can provide html in `content` and this will be added to the custom panel.
305
+
306
+ ###### Custom slide menu items
307
+
308
+ You can provide menu items in your custom panels using the following format. This allows you to define your own navigation links for your presentation.
309
+
310
+ ```html
311
+ <h1>Links</h1>
312
+ <ul class="slide-menu-items">
313
+ <li class="slide-menu-item"><a href="#/transitions">Transitions</a></li>
314
+ <li class="slide-menu-item"><a href="#/13">Code highlighting</a></li>
315
+ </ul>
316
+ ```
317
+
318
+ You are not limited to linking to presentation slides. You can provide any link you wish.
319
+
320
+ ```html
321
+ <h1>External Links</h1>
322
+ <ul class="slide-menu-items">
323
+ <li class="slide-menu-item">
324
+ <a href="https://github.com/denehyg/reveal.js-menu">Reveal.js-menu</a>
325
+ </li>
326
+ <li class="slide-menu-item">
327
+ <a href="https://github.com/hakimel/reveal.js">Reveal.js</a>
328
+ </li>
329
+ </ul>
330
+ ```
331
+
332
+ Using menu items enables keyboard navigation of your links as with the other panels. However, you don't have to use menu items for your links. You can simply provide standard links and unordered lists in your html. Notice you can provide your custom menu items mixed with other html if you wish.
333
+
334
+ ## Ready Event
335
+
336
+ A 'menu-ready' event is fired when reveal.js-menu has loaded all non-async dependencies and is ready to start navigating.
337
+
338
+ ```javascript
339
+ Reveal.addEventListener('menu-ready', function (event) {
340
+ // your code
341
+ });
342
+ ```
343
+
344
+ ## API
345
+
346
+ The `RevealMenu` object exposes a JavaScript API for controlling the menu:
347
+
348
+ | Function | Description |
349
+ | ----------------------- | ------------------------------------------------------------------------------------------------------------ |
350
+ | toggle(event) | Toggles the open state of the menu, ie open if it is closed, and close if it is open |
351
+ | openMenu(event) | Opens the menu |
352
+ | closeMenu(event, force) | Closes the menu. To force the menu to close (ie when `sticky` option is `true`) call `closeMenu(null, true)` |
353
+ | openPanel(event, ref) | Opens the menu to a specific panel, passing the name of the panel or the panel element itself |
354
+ | isOpen() | Returns true if the menu is open |
355
+ | initialiseMenu() | Initialises the menu if it has not already been initialised. Used in conjunction with the `delayInit` option |
356
+ | isMenuInitialised() | Returns true if the menu has been initialised |
357
+
358
+ ## Compatibility
359
+
360
+ reveal.js-menu v2.0 is built for reveal.js v4. It will not work with reveal.js v3. If you require a menu for reveal.js v3 you will need to install reveal.js-menu v1.2.0.
361
+
362
+ v2.0 also introduces API changes that are not backwards compatible. `init()` has been renamed to `initMenu()` to deconflict with the reveal.js v4 plugin API. `isInit()` has also been changed to `isMenuInitialised()`.
363
+
364
+ ## License
365
+
366
+ MIT licensed
367
+
368
+ Copyright (C) 2020 Greg Denehy