Version 1.1.1

- Added a new `tooltip` option - Added a new `scale` option - Verticator will now scale according to the scale factor of the main slides - Started keeping the changelog.
Martinomagnifico · Mar 9, 2022 · 7cd5fb1 · 7cd5fb1
1 parent 8e139db
commit 7cd5fb1
Show file tree

Hide file tree

Showing 16 changed files with 1,144 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,71 @@
+# Changelog
+
+## [1.1.1] - 2020-03-07
+### Added
+- Added a new `tooltip` option
+- Added a new `scale` option
+- Started keeping the changelog.
+
+### Changed
+- Verticator will scale according to the scale factor of the main slides
+
+
+
+## [1.1.0] - 2021-02-15
+### Added
+- Added the option to turn of the autogeneration of Verticator bullets.
+
+
+
+## [1.0.9] - 2021-09-04
+### Added
+- Support for Verticator bullets on the left-hand side.
+- An option to set the Verticator bullets offset off the edge of the presentation.
+
+
+
+## [1.0.8] - 2020-10-23
+### Changed
+- Fixed an issue when "hashOneBasedIndex" is set to true. 
+- Fixed an issue with Safari where the color of the bullets would not update.
+
+
+
+## [1.0.7] - 2020-07-10
+### Changed
+- Verticator 1.0.7 now works with multiple Reveal.js instances. Verticator no longer wites a style block, but the colors are injected in the HTML. This way each Reveal instance can have its own colors.
+
+
+
+## [1.0.6] - 2020-06-18
+### Added
+- Added auto-insert of ul.verticator if it does not exist. 
+- Added npm install option.
+
+
+
+## [1.0.5] - 2020-06-07
+### Changed
+- Bug fix of demo file of 1.0.4.
+- Documentation changes by Salim B.
+
+
+
+## [1.0.4] - 2020-06-07
+### Added
+- Configuration options (by Jochen Wierum) added
+### Changed
+- Changes of some formatting.
+- Verticator now references the Reveal files by CDN.
+
+
+
+## [1.0.3] - 2020-05-25
+### Added
+- Added compatibility with the new Reveal.js 4 that changes the way plugins work.
+
+
+
+## [1.0.2] - 2020-05-22
+### Added
+- The 1.0.2 release is compatible with Reveal.js 3. The next release will only be compatible with Reveal.js 4.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![Version](https://img.shields.io/npm/v/reveal.js-verticator)]() [![Downloads](https://img.shields.io/npm/dt/reveal.js-verticator)]()
 
-A plugin for [Reveal.js](https://revealjs.com) 4 that adds indicators to show the amount of slides in a vertical stack. 
+A plugin for [Reveal.js](https://revealjs.com) that adds indicators to show the amount of slides in a vertical stack. 
 
 [![Screenshot](https://martinomagnifico.github.io/reveal.js-verticator/screenshot.png)](https://martinomagnifico.github.io/reveal.js-verticator/demo.html)
 
@@ -39,10 +39,6 @@ The Verticator plugin folder can then be referenced from `node_modules/reveal.js
 
 ### JavaScript
 
-The Verticator plugin has been rewritten for Reveal.js version 4. Verticator also works in setups with multiple Reveal instances.
-
-If you want to use Verticator with an older version of Reveal, use the [1.0.2 version](https://github.com/Martinomagnifico/reveal.js-verticator/releases).
-
 There are two JavaScript files for Verticator, a regular one, `verticator.js`, and a module one, `verticator.esm.js`. You only need one of them:
 
 #### Regular 
@@ -73,6 +69,17 @@ If you're using ES modules, you can add it like this:
 </script>
 ```
 
+
+### Styling
+
+You now need to add the Verticator stylesheet to your presentation. If you want to show tooltips as well, also add the tooltip stylesheet (and make sure to enable tooltips in the options). If you want to change the tooltip style, you can simply make your own style and use that stylesheet instead.
+
+```html
+<link rel="stylesheet" href="plugin/verticator/verticator.css">
+<link rel="stylesheet" href="plugin/verticator/tooltip.css">
+```
+
+
 ### HTML
 
 Verticator needs a UL with the class 'verticator' to insert the indicators. If there is not one already in the HTML, Verticator will generate it automatically for you. This can be disabled by setting the option `autogenerate` to `false`.
@@ -93,7 +100,9 @@ Reveal.initialize({
 		clickable: true,
 		position: 'right',
 		offset: '3vmin',
-        autogenerate: true
+		autogenerate: true,
+		tooltip: false,
+		scale: 1
 	},
 	plugins: [ Verticator ]
 	// ... 
@@ -112,11 +121,15 @@ Reveal.initialize({
 * **`position`**: Sets the position of Verticator in the presentation. Set to `right` by default, it can also be set to `left`.
 * **`offset`**: Sets the offset of Verticator from the edge (right or left, see 'position') of the screen. Set to `3vmin` by default, it can be set to any other valid CSS size and unit. 
 * **`autogenerate`**: Autogenerate a UL element with the class `verticator` if none is found. Set to `true` by default.
+* **`tooltip`**: Shows tooltips next to the Verticator bullets. Set to `false` by default, it can be enabled in two ways:
+    * `tooltip: 'data-name'`: When you use `tooltip: 'data-name'` or `tooltip: 'title'` or any other attribute with a string value, the tooltip will show that value. 
+    * `tooltip: 'auto'`: When you use `tooltip: 'auto'`, Verticator will check titles of each slide in the order: `data-verticator-tooltip`, `data-name`, `title`, and if none found, headings inside each slide in the order: `h1`, `h2`, `h3`, `h4`. Auto-mode is convenient for Verticator tooltips in Markdown slides. Set `data-verticator-tooltip="none"` or a class of `no-verticator-tooltip` on specific slides if you don't want the attribute- or auto-tooltip to show at all.
+* **`scale`**: While Verticator will now scale according to the scale factor of the main slides (since version 1.1.1), the option `scale` will resize it manually on top of that. Set to `1` by default, it can be set to a minimum of `0.5` and a maximum of `2`.
 
 
 ## Like it?
 
-If you like it, please star this repo.
+If you like it, please star this repo. 
 
 
 ## License

diff --git a/css/demo.css b/css/demo.css
@@ -10,6 +10,7 @@
   margin: 0 auto;
   -webkit-box-shadow: none;
           box-shadow: none;
+  border-radius: 4px;
   background: rgba(180, 180, 180, 0.5); }
 
 p code, p kbd {
@@ -47,3 +48,38 @@ a.github-corner:hover {
     color: white; }
   .has-light-background a.github-corner:hover {
     color: black; }
+
+.reveal pre {
+  font-size: 18px;
+  width: 100%;
+  margin: 0;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  cursor: default; }
+  .reveal pre:focus {
+    outline: none; }
+  .reveal pre code {
+    border-radius: 4px;
+    padding: 10px 15px;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    line-height: 30px; }
+    .reveal pre code:focus {
+      outline: none; }
+  .reveal pre + pre {
+    margin-top: 20px; }
+
+li code {
+  padding: 0.05em 0.3em;
+  font-size: 0.8em;
+  border-radius: 4px;
+  background-color: rgba(39, 40, 34, 0.2); }
diff --git a/demo.html b/demo.html
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="../dist/reset.css">
     <link rel="stylesheet" href="../dist/reveal.css">
     <link rel="stylesheet" href="../dist/theme/white.css">
+    <link rel="stylesheet" href="plugin/highlight/monokai.css">
     <link rel="stylesheet" href="plugin/verticator/verticator.css">
     <link rel="stylesheet" href="css/demo.css">
 </head>
@@ -47,9 +48,6 @@ <h4>You can keep it as it is</h4>
                 <section class="center" data-background="#1a1626">
                     <p>If a dark background (a hex color) is set through an attribute of data-background or data-background-color on a slide (a section), the Verticator bullet will be white.</p>
                 </section>
-                <section class="center" data-background="#1a1626">
-                    <p class="smallitalic">Keep in mind that not all themes will also change the color of regular text to an opposite color by changing this attribute! The themes 'simple', 'black' and 'white' work allright though. If needed, the code can be found in the beginning of those CSS files.</p>
-                </section>
             </section>
             <section class="center">
                 <section class="center">
@@ -66,6 +64,8 @@ <h3>Options</h3>
                         <li>position</li>
                         <li>offset</li>
                         <li>autogenerate</li>
+                        <li>scale</li>
+                        <li>tooltip</li>
                     </ol>
                 </section>
                 <section class="center">
@@ -77,7 +77,7 @@ <h4>Option 1: darktheme</h4>
 		darktheme: true
 	},
 	plugins: [ Verticator ]
-	</code></pre>
+</code></pre>
                     <p class="small">Now the Verticator colors will be white on <em>all</em> normal slides and black on slides that are set to a light background with attributes.</p>
                 </section>
                 <section class="center">
@@ -146,17 +146,46 @@ <h4>Option 7: offset</h4>
 	verticator: {
 		offset: '40px'
 	},
-	plugins: [ Verticator ]</code></pre>
+	plugins: [ Verticator ]
+</code></pre>
                 </section>
                 <section class="center">
-                    <h4>Option 7: autogenerate</h4>
+                    <h4>Option 8: autogenerate</h4>
                     <p>Verticator will autogenerate bullets. In presentations with huge vertical stacks, this can result in an unsightly column of bullets. The user can then disable the autogeneration like this:</p>
                     <pre><code>Reveal.initialize({
 	...
 	verticator: {
 		autogenerate: false
 	},
+	plugins: [ Verticator ]
+</code></pre>
+                </section>
+                <section class="center">
+                    <h4>Option 9: tooltip</h4>
+                    <p>Verticator can show tooltips of page titles, like this:</p>
+                    <pre><code>Reveal.initialize({
+	...
+	verticator: {
+		tooltip: 'data-name'
+	},
 	plugins: [ Verticator ]</code></pre>
+                    <p class="small">It is turned off by default but can be enabled with these options:
+                    <ul class="small">
+                        <li><code>tooltip: 'data-name'</code> or any other attribute of the vertical slide. </li>
+                        <li><code>tooltip: 'auto'</code>. This will check titles of each slide in the order: <code>data-verticator-tooltip</code>, <code>data-name</code>, <code>title</code>, and if none found, headings inside each slide in the order: <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>.</li>
+                    </ul>
+                    </p>
+                </section>
+                <section class="center">
+                    <h4>Option 10: scale</h4>
+                    <p>Verticator will scale with the same ratio as the Reveal slides (since v1.1.1), but only up. To make the Verticator even bigger, you can manually set a scale. It is set to 1 by default, but can be changed like this:</p>
+                    <pre><code>Reveal.initialize({
+	...
+	verticator: {
+		scale: 1.2
+	},
+	plugins: [ Verticator ]
+</code></pre>
                 </section>
                 <section class="center">
                     <h4>Option demos</h4>
@@ -165,6 +194,7 @@ <h4>Option demos</h4>
                         <li><a href="demodark.html">Dark theme with no color options</a></li>
                         <li><a href="democolor.html">Light theme with color options</a></li>
                         <li><a href="demodarkcolor.html">Dark theme with color options</a></li>
+                        <li><a href="demotooltip.html">Tooltip demo</a></li>
                     </ul>
                 </section>
             </section>
@@ -180,14 +210,16 @@ <h4>Option demos</h4>
     </div>
     <script src="../dist/reveal.js"></script>
     <script src="plugin/verticator/verticator.js"></script>
+    <script src="plugin/highlight/highlight.js"></script>
     <script>
         Reveal.initialize({
             transition: "convex",
             verticator: {
                 skipuncounted: true
             },
             plugins: [
-                Verticator
+                Verticator,
+                RevealHighlight
             ]
         });
     </script>