svgmap 2.18.1 → 2.18.3

package/src/js/index.js

@@ -0,0 +1,4 @@
+import svgMap from './core/svg-map.js';
+import '../scss/svg-map.scss';
+
+export default svgMap;

package/src/scss/map.scss

@@ -0,0 +1,257 @@
+@use 'variables' as *;
+
+.svgMap-wrapper,
+.svgMap-container {
+  position: relative;
+}
+
+.svgMap-block-zoom-notice {
+  position: absolute;
+  z-index: 2;
+  top: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $blockZoomNoticeBackgroundColor;
+  pointer-events: none;
+  opacity: 0;
+  color: $blockZoomNoticeColor;
+  transition: opacity 250ms;
+
+  .svgMap-block-zoom-notice-active & {
+    pointer-events: all;
+    top: 0;
+    opacity: 1;
+  }
+
+  > div {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    text-align: center;
+    padding: 0 32px;
+    transform: translateY(-50%);
+    font-size: 28px;
+
+    @media (max-width: 900px) {
+      font-size: 22px;
+    }
+  }
+}
+
+.svgMap-map-wrapper {
+  position: relative;
+  width: 100%;
+  padding-top: 50%;
+  overflow: hidden;
+  background: $oceanColor;
+  color: $textColor;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  :focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  .svgMap-map-image {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+
+  // Controls
+
+  .svgMap-map-controls-wrapper {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    overflow: hidden;
+    border-radius: 2px;
+    box-shadow: $mapControlsBoxShadow;
+
+    &.svgMap-controls-position-bottomLeft {
+      bottom: 10px;
+      left: 10px;
+    }
+    &.svgMap-controls-position-bottomRight {
+      bottom: 10px;
+      right: 10px;
+    }
+    &.svgMap-controls-position-topLeft {
+      top: 10px;
+      left: 10px;
+    }
+    &.svgMap-controls-position-topRight {
+      top: 10px;
+      right: 10px;
+    }
+
+    &.svgMap-disabled {
+      display: none;
+    }
+  }
+
+  .svgMap-map-controls-zoom,
+  .svgMap-map-controls-move {
+    display: flex;
+    margin-right: 5px;
+    overflow: hidden;
+    background: $mapControlsBackgroundColor;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .svgMap-control-button {
+    background-color: $mapControlsBackgroundColor;
+    border: none;
+    border-radius: 0;
+    color: $mapControlsColor;
+    font: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    text-transform: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    position: relative;
+
+    &.svgMap-zoom-button {
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: $mapControlsIconColor;
+        transition: background-color 250ms;
+      }
+
+      &::before {
+        width: 11px;
+        height: 3px;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          &::before,
+          &::after {
+            background: $mapControlsIconColorActive;
+          }
+        }
+      }
+
+      &:active {
+        &::before,
+        &::after {
+          background: $mapControlsIconColorActive;
+        }
+      }
+
+      &.svgMap-zoom-reset-button {
+        &::before {
+          width: 11px;
+          height: 11px;
+          background: none;
+          border: 2px solid $mapControlsIconColor;
+          transition: border-color 250ms;
+        }
+
+        @media (hover: hover) {
+          &:hover {
+            &::before {
+              background: none;
+              border-color: $mapControlsIconColorActive;
+            }
+          }
+        }
+
+        &:active {
+          &::before {
+            background: none;
+            border-color: $mapControlsIconColorActive;
+          }
+        }
+      }
+
+      &.svgMap-disabled {
+        &::before,
+        &::after {
+          background: $mapControlsDisabledColor;
+        }
+      }
+
+      &.svgMap-zoom-reset-button {
+        &.svgMap-disabled {
+          cursor: default;
+
+          &::before {
+            border: 2px solid $mapControlsDisabledColor;
+            background: none;
+          }
+        }
+      }
+    }
+
+    &.svgMap-zoom-in-button {
+      &::after {
+        width: 3px;
+        height: 11px;
+      }
+    }
+  }
+
+  // Contient controls
+  .svgMap-map-continent-controls-wrapper {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1;
+    display: flex;
+    border-radius: 2px;
+    box-shadow: $continentControlsBoxShadow;
+  }
+
+  // Countries
+
+  .svgMap-country {
+    fill: var(--svg-map-country-fill, #E2E2E2);
+    stroke: $countryStrokeColor;
+    stroke-width: 1;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+    transition:
+      fill 250ms,
+      stroke 250ms;
+
+    &[data-link] {
+      cursor: pointer;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        stroke: $mapActiveStrokeColor;
+        stroke-width: $mapActiveStrokeWidth;
+      }
+    }
+
+    &.svgMap-active {
+      stroke: $mapActiveStrokeColor;
+      stroke-width: $mapActiveStrokeWidth;
+    }
+  }
+}

package/src/scss/svg-map.scss

@@ -0,0 +1,2 @@
+@use 'map';
+@use 'tooltip';

package/src/scss/tooltip.scss

@@ -0,0 +1,128 @@
+@use 'variables' as *;
+
+.svgMap-tooltip {
+  box-shadow: 0 0 3px $mapTooltipBoxShadowColor;
+  position: absolute;
+  z-index: 2;
+  border-radius: 2px;
+  background: $mapTooltipBackgroundColor;
+  transform: translate(-50%, -100%);
+  border-bottom: 1px solid $mapTooltipColor;
+  display: none;
+  pointer-events: none;
+  min-width: 60px;
+
+  &.svgMap-tooltip-flipped {
+    transform: translate(-50%, 0);
+    border-bottom: 0;
+    border-top: 1px solid $mapTooltipColor;
+  }
+
+  &.svgMap-active {
+    display: block;
+  }
+
+  .svgMap-tooltip-content-container {
+    position: relative;
+    padding: 10px 20px;
+
+    .svgMap-tooltip-flag-container {
+      text-align: center;
+      margin: 2px 0 5px;
+
+      &.svgMap-tooltip-flag-container-emoji {
+        font-size: 50px;
+        line-height: 0;
+        padding: 25px 0 15px;
+      }
+
+      .svgMap-tooltip-flag {
+        display: block;
+        margin: auto;
+        width: auto;
+        height: 32px;
+        padding: 2px;
+        background: $mapTooltipFlagBackgroundColor;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .svgMap-tooltip-title {
+    white-space: nowrap;
+    font-size: 18px;
+    line-height: 28px;
+    padding: 0 0 8px;
+    text-align: center;
+  }
+
+  .svgMap-tooltip-content {
+    white-space: nowrap;
+    text-align: center;
+    font-size: 14px;
+    color: $textColorLight;
+    margin: -5px 0 0;
+
+    table {
+      padding: 0;
+      border-spacing: 0px;
+      margin: auto;
+
+      td {
+        padding: 2px 0;
+        text-align: left;
+
+        span {
+          color: $textColor;
+        }
+
+        &:first-child {
+          padding-right: 10px;
+          text-align: right;
+        }
+
+        sup {
+          vertical-align: baseline;
+          position: relative;
+          top: -5px;
+        }
+      }
+    }
+
+    .svgMap-tooltip-no-data {
+      padding: 2px 0;
+      color: $textColorLight;
+      font-style: italic;
+    }
+  }
+
+  .svgMap-tooltip-pointer {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+    height: 10px;
+    width: 30px;
+
+    &::after {
+      content: '';
+      width: 20px;
+      height: 20px;
+      background: $mapTooltipBackgroundColor;
+      border: 1px solid $mapTooltipColor;
+      position: absolute;
+      bottom: 6px;
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+  }
+
+  &.svgMap-tooltip-flipped {
+    .svgMap-tooltip-pointer {
+      bottom: auto;
+      top: -10px;
+      transform: translateX(-50%) scaleY(-1);
+    }
+  }
+}

package/src/scss/variables.scss

@@ -0,0 +1,31 @@
+// General
+$textColor: #111 !default;
+$textColorLight: #777 !default;
+
+// Map
+$colorNoData: #E2E2E2 !default;
+$oceanColor: #d9ecff !default;
+$mapActiveStrokeColor: #333 !default;
+$mapActiveStrokeWidth: 1.5 !default;
+$blockZoomNoticeColor: #fff !default;
+$blockZoomNoticeBackgroundColor: rgba(0, 0, 0, 0.8) !default;
+
+// Map Controls
+$mapControlsColor: #fff !default;
+$mapControlsBackgroundColor: #fff !default;
+$mapControlsIconColor: #ccc !default;
+$mapControlsIconColorActive: #000 !default;
+$mapControlsDisabledColor: #eee !default;
+$mapControlsBoxShadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !default;
+
+// Map Tooltip
+$mapTooltipColor: #111 !default;
+$mapTooltipBackgroundColor: #fff !default;
+$mapTooltipFlagBackgroundColor: rgba(0, 0, 0, 0.15) !default;
+$mapTooltipBoxShadowColor: rgba(0, 0, 0, 0.2) !default;
+
+// Continent Controls
+$continentControlsBoxShadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !default;
+
+// Country
+$countryStrokeColor: #fff !default;