Version 1.2.1

- Tooltip styling is not a separate stylesheet anymore - As there is only 1 CSS file, the option `csspath` is no longer an object of multiple paths, but just the path to the verticator.css file. - Some small fixes
Martinomagnifico · Nov 17, 2022 · 9c9a6c4 · 9c9a6c4
1 parent caf12ce
commit 9c9a6c4
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 128 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [1.2.1] - 2022-11-17
+### Changed
+- Tooltip styling is not a separate stylesheet anymore
+- As there is only 1 CSS file, the option `csspath` is no longer an object of multiple paths, but just the path to the verticator.css file.
+- Some small fixes
+
 
 ## [1.2.0] - 2022-11-11
 ### Changed

diff --git a/README.md b/README.md
@@ -89,9 +89,9 @@ If you're using ES modules, you can add it like this:
 
 ### Styling
 
-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.
+The styling of Verticator is automatically inserted from the included CSS styles, either loaded through NPM or from the plugin folder.
 
-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 `csspath` option of Verticator.
+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 style can be managed through the `csspath` option of Verticator.
 
 
 ### HTML
@@ -117,9 +117,7 @@ Reveal.initialize({
 		autogenerate: true,
 		tooltip: false,
 		scale: 1,
-		csspath: {
-			verticator: '',
-			tooltip: ''
+		csspath: ''
 		}
 	},
 	plugins: [ Verticator ]
@@ -140,7 +138,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 scale according to the scale factor of the main slides, 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`.
-* **`csspath`**: 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.
+* **`csspath`**: Verticator will automatically load the styling for the bullets and the tooltips. If you want to customise the styling, you can link to your own CSS file here.
 
 
 ## Like it?

diff --git a/demotooltip.html b/demotooltip.html
@@ -108,8 +108,7 @@ <h3>No tooltip at all</h3>
             width: 1024,
             margin: 0.07,
             verticator: {
-                tooltip: "auto",
-                scale: 1
+                tooltip: "auto"
             },
             plugins: [
                 Verticator,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "reveal.js-verticator",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "A plugin for Reveal.js that adds indicators to show the amount of slides in a vertical stack",
     "keywords": "reveal, reveal.js, vertical bullets, reveal-plugin, plugin, fullPage.js",
     "homepage": "https://github.com/Martinomagnifico/reveal.js-verticator",

diff --git a/plugin/verticator/plugin-src.js b/plugin/verticator/plugin-src.js
@@ -80,6 +80,8 @@ const Plugin = () => {
 		let revealScale = deck.getScale();
 		let totalScale = revealScale > 1 ? revealScale * userScale : userScale;
 		theVerticator.style.setProperty('--verticator-scale', totalScale.toFixed(2));
+		let tooltipScaleDamper = ( 1 / Math.sqrt(totalScale));
+		theVerticator.style.setProperty('--verticator-tooltip-scale', tooltipScaleDamper.toFixed(2));
 
 		const colors = {};
 		const themeColors = findThemeColors(revealElement, options.themetag ? options.themetag : 'section');
@@ -337,10 +339,7 @@ const Plugin = () => {
 			autogenerate: true,
 			tooltip: false,
 			scale: 1,
-			csspath: {
-				verticator: '',
-				tooltip: ''
-			},
+			csspath: '',
 			debug: false
 		};
 
@@ -370,20 +369,14 @@ const Plugin = () => {
 			}
 			return path;
 		}
-		let VerticatorStylePath = options.csspath.verticator ? options.csspath.verticator : null || `${pluginPath()}verticator.css` || 'plugin/verticator/verticator.css'
-		let TooltipStylePath = options.csspath.tooltip ? options.csspath.tooltip : null  || `${pluginPath()}tooltip.css`  || 'plugin/verticator/tooltip.css'
+
+		let VerticatorStylePath = options.csspath.verticator ? options.csspath.verticator : options.csspath ? options.csspath : null  || `${pluginPath()}verticator.css` || 'plugin/verticator/verticator.css'
 
 		if (options.debug) {
 			console.log(`Plugin path = ${pluginPath()}`);
 			console.log(`Verticator CSS path = ${VerticatorStylePath}`);
-			console.log(`Tooltip CSS path = ${TooltipStylePath}`);
 		}
-		loadStyle(VerticatorStylePath, 'stylesheet', function () {
-			if (options.tooltip) {
-				loadStyle(TooltipStylePath, 'stylesheet');
-			}
-		});
-
+		loadStyle(VerticatorStylePath, 'stylesheet');
 		verticate(deck, options);
 	};
 

diff --git a/plugin/verticator/tooltip.css b/plugin/verticator/tooltip.css
diff --git a/plugin/verticator/verticator.css b/plugin/verticator/verticator.css
@@ -105,4 +105,79 @@ ul.verticator.visible li {
 .print-pdf .verticator,
 .overview .verticator {
   display: none;
+}
+
+.verticator {
+  --verticator-tooltip-scale: 1;
+}
+
+.verticator .tooltip {
+  position: absolute;
+  top: 9px;
+  right: 30px;
+  top: calc(9px * var(--verticator-scale));
+  right: calc(30px * var(--verticator-scale) + 1.5px * var(--verticator-tooltip-scale) * var(--verticator-tooltip-scale));
+  -webkit-transform: translate3d(0, -50%, 1px);
+          transform: translate3d(0, -50%, 1px);
+  -webkit-box-shadow: calc(4px * var(--verticator-scale)) calc(6px * var(--verticator-scale)) calc(16px * var(--verticator-scale)) rgba(0, 0, 0, 0.25);
+          box-shadow: calc(4px * var(--verticator-scale)) calc(6px * var(--verticator-scale)) calc(16px * var(--verticator-scale)) rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+  background: white;
+  font-size: calc(1.25rem * var(--verticator-tooltip-scale) * var(--verticator-scale));
+  padding: 0.4em 0.6em;
+  border-radius: 0.2em;
+  min-width: 30px;
+  max-width: 15em;
+  display: block;
+  -webkit-font-smoothing: antialiased;
+  color: black;
+}
+.verticator .tooltip span {
+  white-space: nowrap;
+  display: block;
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+     text-overflow: ellipsis;
+  line-height: 1.25;
+}
+.verticator .tooltip::after {
+  content: "";
+  display: block;
+  width: 0.66em;
+  height: 0.66em;
+  background: white;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  -webkit-transform: translate3d(45%, -50%, -1px) rotate(45deg);
+          transform: translate3d(45%, -50%, -1px) rotate(45deg);
+}
+
+.verticator.left .tooltip {
+  right: auto;
+  left: calc(30px * var(--verticator-scale) + 1.5px * var(--verticator-tooltip-scale) * var(--verticator-tooltip-scale));
+  -webkit-box-shadow: calc(-4px * var(--verticator-scale)) calc(6px * var(--verticator-scale)) calc(16px * var(--verticator-scale)) rgba(0, 0, 0, 0.25);
+          box-shadow: calc(-4px * var(--verticator-scale)) calc(6px * var(--verticator-scale)) calc(16px * var(--verticator-scale)) rgba(0, 0, 0, 0.25);
+}
+.verticator.left .tooltip::after {
+  right: auto;
+  left: 0;
+  -webkit-transform: translate3d(-45%, -50%, -1px) rotate(45deg);
+          transform: translate3d(-45%, -50%, -1px) rotate(45deg);
+}
+
+.verticator li a + .tooltip {
+  pointer-events: none;
+  display: block;
+  opacity: 0;
+  -webkit-transition: opacity 0.125s ease-in-out;
+  -o-transition: opacity 0.125s ease-in-out;
+  transition: opacity 0.125s ease-in-out;
+  -webkit-transition-delay: 0.0625s;
+       -o-transition-delay: 0.0625s;
+          transition-delay: 0.0625s;
+}
+
+.verticator li a:hover + .tooltip {
+  opacity: 1;
 }
diff --git a/plugin/verticator/verticator.esm.js b/plugin/verticator/verticator.esm.js
@@ -4,7 +4,7 @@
  * https://github.com/Martinomagnifico
  *
  * Verticator.js for Reveal.js 
- * Version 1.2.0
+ * Version 1.2.1
  * 
  * @license 
  * MIT licensed
@@ -110,6 +110,8 @@ var Plugin = function Plugin() {
     var revealScale = deck.getScale();
     var totalScale = revealScale > 1 ? revealScale * userScale : userScale;
     theVerticator.style.setProperty('--verticator-scale', totalScale.toFixed(2));
+    var tooltipScaleDamper = 1 / Math.sqrt(totalScale);
+    theVerticator.style.setProperty('--verticator-tooltip-scale', tooltipScaleDamper.toFixed(2));
     var colors = {};
     var themeColors = findThemeColors(revealElement, options.themetag ? options.themetag : 'section');
     colors.theme = themeColors.theme;
@@ -371,10 +373,7 @@ var Plugin = function Plugin() {
       autogenerate: true,
       tooltip: false,
       scale: 1,
-      csspath: {
-        verticator: '',
-        tooltip: ''
-      },
+      csspath: '',
       debug: false
     };
 
@@ -403,20 +402,14 @@ var Plugin = function Plugin() {
       return path;
     }
 
-    var VerticatorStylePath = options.csspath.verticator ? options.csspath.verticator : "".concat(pluginPath(), "verticator.css") || 'plugin/verticator/verticator.css';
-    var TooltipStylePath = options.csspath.tooltip ? options.csspath.tooltip : "".concat(pluginPath(), "tooltip.css") || 'plugin/verticator/tooltip.css';
+    var VerticatorStylePath = options.csspath.verticator ? options.csspath.verticator : options.csspath ? options.csspath : "".concat(pluginPath(), "verticator.css") || 'plugin/verticator/verticator.css';
 
     if (options.debug) {
       console.log("Plugin path = ".concat(pluginPath()));
       console.log("Verticator CSS path = ".concat(VerticatorStylePath));
-      console.log("Tooltip CSS path = ".concat(TooltipStylePath));
     }
 
-    loadStyle(VerticatorStylePath, 'stylesheet', function () {
-      if (options.tooltip) {
-        loadStyle(TooltipStylePath, 'stylesheet');
-      }
-    });
+    loadStyle(VerticatorStylePath);
     verticate(deck, options);
   };
 

diff --git a/plugin/verticator/verticator.js b/plugin/verticator/verticator.js
@@ -4,7 +4,7 @@
  * https://github.com/Martinomagnifico
  *
  * Verticator.js for Reveal.js 
- * Version 1.2.0
+ * Version 1.2.1
  * 
  * @license 
  * MIT licensed
@@ -116,6 +116,8 @@
 	    var revealScale = deck.getScale();
 	    var totalScale = revealScale > 1 ? revealScale * userScale : userScale;
 	    theVerticator.style.setProperty('--verticator-scale', totalScale.toFixed(2));
+	    var tooltipScaleDamper = 1 / Math.sqrt(totalScale);
+	    theVerticator.style.setProperty('--verticator-tooltip-scale', tooltipScaleDamper.toFixed(2));
 	    var colors = {};
 	    var themeColors = findThemeColors(revealElement, options.themetag ? options.themetag : 'section');
 	    colors.theme = themeColors.theme;
@@ -377,10 +379,7 @@
 	      autogenerate: true,
 	      tooltip: false,
 	      scale: 1,
-	      csspath: {
-	        verticator: '',
-	        tooltip: ''
-	      },
+	      csspath: '',
 	      debug: false
 	    };
 
@@ -409,20 +408,14 @@
 	      return path;
 	    }
 
-	    var VerticatorStylePath = options.csspath.verticator ? options.csspath.verticator : "".concat(pluginPath(), "verticator.css") || 'plugin/verticator/verticator.css';
-	    var TooltipStylePath = options.csspath.tooltip ? options.csspath.tooltip : "".concat(pluginPath(), "tooltip.css") || 'plugin/verticator/tooltip.css';
+	    var VerticatorStylePath = options.csspath.verticator ? options.csspath.verticator : options.csspath ? options.csspath : "".concat(pluginPath(), "verticator.css") || 'plugin/verticator/verticator.css';
 
 	    if (options.debug) {
 	      console.log("Plugin path = ".concat(pluginPath()));
 	      console.log("Verticator CSS path = ".concat(VerticatorStylePath));
-	      console.log("Tooltip CSS path = ".concat(TooltipStylePath));
 	    }
 
-	    loadStyle(VerticatorStylePath, 'stylesheet', function () {
-	      if (options.tooltip) {
-	        loadStyle(TooltipStylePath, 'stylesheet');
-	      }
-	    });
+	    loadStyle(VerticatorStylePath);
 	    verticate(deck, options);
 	  };