svgmap 2.11.1 → 2.12.2

package/gulpfile.js

@@ -22,8 +22,6 @@ var scripts = [{
   name: 'svgMap',
   src: [
     './src/js/svgMap.js',
-    './src/js/data/**/*.js',
-    './src/js/svgMap/**/*.js',
     './src/js/umd.js'
   ],
   dest: './dist/'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svgmap",
   "description": "svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.",
-  "version": "2.11.1",
+  "version": "2.12.2",
   "private": false,
   "license": "MIT",
   "main": "dist/svgMap.min.js",
@@ -20,14 +20,14 @@
     "gulp-concat": "^2.6.1",
     "gulp-header": "^2.0.9",
     "gulp-rename": "^2.0.0",
-    "gulp-sass": "^5.1.0",
+    "gulp-sass": "^6.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-uglify": "^3.0.2",
-    "jest": "^28.1.1",
-    "sass": "^1.53.0"
+    "jest": "^29.7.0",
+    "sass": "^1.83.1"
   },
   "dependencies": {
-    "svg-pan-zoom": "^3.6.1"
+    "svg-pan-zoom": "^3.6.2"
   },
   "scripts": {
     "watch": "gulp watch",

package/src/js/svgMap.js

@@ -412,7 +412,7 @@ function svgMapWrapper(svgPanZoom) {
           return;
         }
         if (!data.values[countryID]) {
-          element.setAttribute('fill', this.options.colorNoData);
+          element.setAttribute('fill', this.toHex(this.options.colorNoData));
           return;
         }
         if (typeof data.values[countryID].color != 'undefined') {
@@ -425,8 +425,8 @@ function svgMapWrapper(svgPanZoom) {
         );
         var ratio = Math.max(0, Math.min(1, (value - min) / (max - min)));
         var color = this.getColor(
-          this.options.colorMax,
-          this.options.colorMin,
+          this.toHex(this.options.colorMax),
+          this.toHex(this.options.colorMin),
           ratio || ratio === 0 ? ratio : 1
         );
         element.setAttribute('fill', color);
@@ -2126,6 +2126,33 @@ function svgMapWrapper(svgPanZoom) {
     return '#' + this.getHex(r) + this.getHex(g) + this.getHex(b);
   };
 
+  /**
+   * convert color to hex to allow users of the map to pass in
+   * colors in formats other than full hex value.
+   * @param color
+   * @param element
+   * @returns {string}
+   */
+  svgMap.prototype.toHex = function (color, element = document.documentElement) {
+
+    // Resolve CSS variables
+    if (color.startsWith('var(')) {
+      const cssVar = color.slice(4, -1).trim().replaceAll(/["']+/g, '');
+      color = getComputedStyle(element).getPropertyValue(cssVar).trim();
+    }
+
+    // Create an offscreen canvas
+    const canvas = new OffscreenCanvas(1, 1);
+    const ctx = canvas.getContext('2d');
+
+    // Use canvas to parse the color
+    ctx.fillStyle = color;
+
+    // computed color is full hex code in the case of one color only
+    return ctx.fillStyle
+  }
+
+
   // Get a hex value
 
   svgMap.prototype.getHex = function (value) {

package/src/scss/main.scss

@@ -1,3 +1,2 @@
-@import 'variables.scss';
-@import 'map.scss';
-@import 'tooltip.scss';
+@use 'map';
+@use 'tooltip';

package/src/scss/map.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 .svgMap-wrapper,
 .svgMap-container {
   position: relative;

package/src/scss/tooltip.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 .svgMap-tooltip {
   box-shadow: 0 0 3px $mapTooltipBoxShadowColor;
   position: absolute;