Version 1.1.3

- Autoload the CSS styling. - Added a new `path` option if the user wants to override the autoloading of the included styles. For example, to customise the styling.
Martinomagnifico · Jun 5, 2022 · 5d7fad7 · 5d7fad7
1 parent 44e9cf8
commit 5d7fad7
Show file tree

Hide file tree

Showing 15 changed files with 334 additions and 171 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,16 @@
 # Changelog
 
-## [1.1.1] - 2020-03-07
+## [1.1.3] - 2022-06-04
+### Added
+- Autoload the CSS styling. 
+- Added a new `path` option if the user wants to override the autoloading of the included styles. For example, to customise the styling.
+
+## [1.1.2] - 2022-03-07
+### Changed
+- Bugfix
+
+
+## [1.1.1] - 2022-03-07
 ### Added
 - Added a new `tooltip` option
 - Added a new `scale` option

diff --git a/README.md b/README.md
@@ -72,12 +72,9 @@ If you're using ES modules, you can add it like this:
 
 ### 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.
+Since version 1.1.3, the styling of Verticator is automatically inserted from the included CSS styles, either loaded through NPM or from the plugin folder. If you enable tooltips in the options, the same goes for those styles.
 
-```html
-<link rel="stylesheet" href="plugin/verticator/verticator.css">
-<link rel="stylesheet" href="plugin/verticator/tooltip.css">
-```
+If you want to change the Verticator or tooltip style, you can simply make your own style and use that stylesheet instead. Linking to your custom styles can be managed through the `path` option of Verticator.
 
 
 ### HTML
@@ -102,7 +99,11 @@ Reveal.initialize({
 		offset: '3vmin',
 		autogenerate: true,
 		tooltip: false,
-		scale: 1
+		scale: 1,
+		path: {
+			verticator: '',
+			tooltip: ''
+		}
 	},
 	plugins: [ Verticator ]
 	// ... 
@@ -125,6 +126,7 @@ Reveal.initialize({
     * `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`.
+* **`path`**: Verticator will automatically load the styling for the bullets and (if needed) the tooltips. If you want to customise the styling, you can link to your own CSS files here for each of the styles.
 
 
 ## Like it?

diff --git a/css/demo.css b/css/demo.css
@@ -22,6 +22,40 @@ p code, p kbd {
 p kbd {
   font-family: monospace; }
 
+.centerblock {
+  height: 100%;
+  min-height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin: auto; }
+
+ol.twocol {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  counter-reset: item;
+  -webkit-column-count: 2;
+     -moz-column-count: 2;
+          column-count: 2;
+  -webkit-column-gap: 20px;
+     -moz-column-gap: 20px;
+          column-gap: 20px; }
+  ol.twocol li {
+    counter-increment: item;
+    padding-left: 1.7em; }
+    ol.twocol li:before {
+      content: counter(item) ".";
+      margin-left: -1.7em;
+      margin-right: 0.5em;
+      display: inline-block;
+      width: 1.2em;
+      text-align: right; }
+
 a.github-corner {
   position: absolute;
   z-index: 1;

diff --git a/demo.html b/demo.html
@@ -12,7 +12,6 @@
     <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>
 
@@ -54,121 +53,133 @@ <h4>You can keep it as it is</h4>
                     <h2>Options</h2>
                 </section>
                 <section class="center">
-                    <h3>Options</h3>
-                    <ol>
-                        <li>darktheme</li>
-                        <li>color</li>
-                        <li>oppositecolor</li>
-                        <li>skipuncounted</li>
-                        <li>clickable</li>
-                        <li>position</li>
-                        <li>offset</li>
-                        <li>autogenerate</li>
-                        <li>scale</li>
-                        <li>tooltip</li>
-                    </ol>
+                    <div class="centerblock" style="width: 80%">
+                        <h3>Options</h3>
+                        <ol class="twocol">
+                            <li>darktheme</li>
+                            <li>color</li>
+                            <li>oppositecolor</li>
+                            <li>skipuncounted</li>
+                            <li>clickable</li>
+                            <li>position</li>
+                            <li>offset</li>
+                            <li>autogenerate</li>
+                            <li>scale</li>
+                            <li>tooltip</li>
+                            <li>path</li>
+                        </ol>
+                    </div>
                 </section>
                 <section class="center">
                     <h4>Option 1: darktheme</h4>
                     <p>If your theme is dark, let Verticator know by setting it in the options: </p>
-                    <pre><code>Reveal.initialize({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		darktheme: true
 	},
 	plugins: [ Verticator ]
+})
 </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">
                     <h4>Option 2: color</h4>
                     <p>You can set the main color of the Verticator bullets to a specific color. You can use standard CSS named colors, hex or rgb ones:</p>
-                    <pre><code>Reveal.initialize({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		color: 'red'
 	},
 	plugins: [ Verticator ]
+})
 </code></pre>
                     <p class="small">For a light theme, the Verticator colors will be red on <em>all</em> normal slides and (still) white on slides that are set to a dark background with attributes.</p>
                 </section>
                 <section class="center">
                     <h4>Option 3: oppositecolor</h4>
                     <p>You can set the opposite color of the Verticator bullets to a specific color. These apply if a slide has an opposite color to the main background of the theme.</p>
-                    <pre><code>Reveal.initialize({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		oppositecolor: 'yellow'
 	},
 	plugins: [ Verticator ]
+})
 </code></pre>
                     <p class="small">For a light theme, the Verticator colors will (still) be black on normal slides and yellow on slides that are set to a dark background with attributes.</p>
                 </section>
                 <section class="center" data-visibility="uncounted">
                     <h4>Option 4: skipuncounted</h4>
                     <p>To omit drawing Verticator bullets for certain slides, set a data-attribute <kbd>data-visibility="uncounted"</kbd> to the slide. Then set this option (disabled by default, enabled in this demo) to true:</p>
-                    <pre><code>Reveal.initialize({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		skipuncounted: true
 	},
 	plugins: [ Verticator ]
+})
 </code></pre>
                     <p class="small">The data-attribute is the Reveal way to hide progress and skipping page numbers for certain slides.</p>
                 </section>
                 <section class="center">
                     <h4>Option 5: clickable</h4>
                     <p>Clicking on a a Verticator bullet jumps to to the corresponding page. This behaviour is enabled by default but can be disabled.</p>
-                    <pre><code>Reveal.initialize({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		clickable: false
 	},
 	plugins: [ Verticator ]
+})
 </code></pre>
                 </section>
                 <section class="center">
                     <h4>Option 6: position</h4>
                     <p>By default, Verticator is positioned on the right-hand side of the presentation. It can also be set on the left-hand side like this:</p>
-                    <pre><code>Reveal.initialize({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		position: 'left'
 	},
 	plugins: [ Verticator ]
+})
 </code></pre>
                 </section>
                 <section class="center">
                     <h4>Option 7: offset</h4>
                     <p>By default, Verticator is positioned '3vmin' off the edge of the presentation. It can be set to any other valid CSS size and unit:</p>
-                    <pre><code>Reveal.initialize({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		offset: '40px'
 	},
 	plugins: [ Verticator ]
+})
 </code></pre>
                 </section>
                 <section class="center">
                     <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({
+                    <pre><code class="javascript">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({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		tooltip: 'data-name'
 	},
-	plugins: [ Verticator ]</code></pre>
+	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>
@@ -179,13 +190,28 @@ <h4>Option 9: tooltip</h4>
                 <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({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		scale: 1.2
 	},
 	plugins: [ Verticator ]
+})
 </code></pre>
+                </section>
+                <section class="center">
+                    <h4>Option 11: path</h4>
+                    <p>Verticator will automatically load the styling for the bullets and (if needed) the tooltips. If you want to change the styling, you can link to your own CSS files:</p>
+                    <pre><code class="javascript">Reveal.initialize({
+	...
+	verticator: {
+		path: {
+			verticator:  'path-to/my-css-files/customverticator.css',
+			tooltip: 'path-to/my-css-files/customtooltip.css'
+		}
+	},
+	plugins: [ Verticator ]
+})</code></pre>
                 </section>
                 <section class="center">
                     <h4>Option demos</h4>

diff --git a/democolor.html b/democolor.html
@@ -11,7 +11,6 @@
     <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/verticator/verticator.css">
     <link rel="stylesheet" href="css/demo.css">
 </head>
 
@@ -31,13 +30,14 @@ <h4>Light theme with color options</h4>
                     <h3>This theme has a light background</h3>
                     <p>No need to set the option for 'darktheme'.</p>
                     <p>Replace the colors to your liking.</p>
-                    <pre><code>Reveal.initialize({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		color: 'green',
 		oppositecolor: 'orange'
 	},
 	plugins: [ Verticator ]
+})
 </code></pre>
                 </section>
                 <section class="center" data-background="#fff">

diff --git a/demodark.html b/demodark.html
@@ -11,7 +11,6 @@
     <link rel="stylesheet" href="../dist/reset.css">
     <link rel="stylesheet" href="../dist/reveal.css">
     <link rel="stylesheet" href="../dist/theme/black.css">
-    <link rel="stylesheet" href="plugin/verticator/verticator.css">
     <link rel="stylesheet" href="css/demo.css">
     <style>
         .backgrounds {
@@ -35,12 +34,13 @@ <h4>Dark theme</h4>
                 <section class="center">
                     <h3>This theme has a dark background</h3>
                     <p>Let Verticator know this by setting 'darktheme' to true.</p>
-                    <pre><code>Reveal.initialize({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		darktheme: true
 	},
 	plugins: [ Verticator ]
+})
 </code></pre>
                 </section>
                 <section class="center" data-background="#fff">

diff --git a/demodarkcolor.html b/demodarkcolor.html
@@ -11,7 +11,6 @@
     <link rel="stylesheet" href="../dist/reset.css">
     <link rel="stylesheet" href="../dist/reveal.css">
     <link rel="stylesheet" href="../dist/theme/black.css">
-    <link rel="stylesheet" href="plugin/verticator/verticator.css">
     <link rel="stylesheet" href="css/demo.css">
     <style>
         .backgrounds {
@@ -36,14 +35,15 @@ <h4>Dark theme with color options</h4>
                     <h3>This theme has a dark background</h3>
                     <p>Let Verticator know this by setting 'darktheme' to true.</p>
                     <p>Replace the colors to your liking.</p>
-                    <pre><code>Reveal.initialize({
+                    <pre><code class="javascript">Reveal.initialize({
 	...
 	verticator: {
 		darktheme: true,
 		color: 'yellow',
 		oppositecolor: 'red'
 	},
 	plugins: [ Verticator ]
+})
 </code></pre>
                 </section>
                 <section class="center" data-background="#fff">