Действия

Widget

Страны-эксплуатанты: различия между версиями

Материал из ВикиВоины

Строка 503: Строка 503:
 
     const popup = document.getElementById('popup');
 
     const popup = document.getElementById('popup');
 
     const countriesPaths = document.querySelectorAll('path.land');
 
     const countriesPaths = document.querySelectorAll('path.land');
 +
 +
    let selectedCountryData = null; // Данные выбранной страны
  
 
     function showCountryInfo(event) {
 
     function showCountryInfo(event) {
Строка 516: Строка 518:
  
 
     function hideCountryInfo() {
 
     function hideCountryInfo() {
         let selectedCountry = document.querySelector('.selected-patch-country');
+
         tooltips.forEach(tooltip => {
        if (!selectedCountry) {
+
            if (selectedCountryData) {
            tooltips.forEach(tooltip => {
+
                tooltip.innerHTML = selectedCountryData;
 +
            } else {
 
                 tooltip.innerHTML = 'Выберите страну';
 
                 tooltip.innerHTML = 'Выберите страну';
             });
+
             }
         }
+
         });
 
     }
 
     }
  
Строка 531: Строка 534:
 
     function updateTooltip() {
 
     function updateTooltip() {
 
         let selectedCountry = document.querySelector('.selected-patch-country');
 
         let selectedCountry = document.querySelector('.selected-patch-country');
         if (!selectedCountry) {
+
         if (selectedCountry) {
             hideCountryInfo();
+
             selectedCountryData = selectedCountry.getAttribute('title');
 +
        } else {
 +
            selectedCountryData = null;
 
         }
 
         }
 
     }
 
     }
Строка 541: Строка 546:
 
     updateTooltip();
 
     updateTooltip();
 
});
 
});
 +
  
  

Версия 17:51, 5 мая 2024

<style>

.wrap {
 position: relative;
 float: right;
 margin-left: 15px;
 background-color: #abc6d9;

}

.countries ul {

 max-height: 400px;
 min-width: 200px;
 overflow-y: auto;
 overflow-x: clip;
 padding-left: 20px;
 margin: 10px;

}

svg#map {

   outline: none;
   cursor: move;
   }
  1. popup {
 position: absolute;
 display: none;
 background-color: #fff;
 padding: 2px 2px 2px 7px;
 border: 1px solid #ccc;
 z-index: 2;
 font-size: small;

}

.map-tooltip {

height: 45px;
text-align: center;
background: #2786c285;
padding: 10px;
margin-top: -8px;
position: relative;

}

.fa-question-circle-map {

   position: absolute;
   top: 240px;
   left: 5px;
   color: #2d7bb0;

}

.controls {

  display: inline-grid;
  position: absolute;
  top: 10px;
  right: 10px;

}

.controls button {

  font-size: x-large;
  padding: 2px;
  margin: 2px;
  opacity: 0.9;

}

.controls button:focus {

  background-color: #2786c2;

}

  1. reset {
   font-size: medium;

}

path {

 fill: #fff;
 cursor: pointer;

} path:hover {

 fill: #2786c285;

}

.mobile { display: none; }

.desktop { display: block; }

.land-out {

  fill-opacity: 0;
  fill-rule: evenodd;
  stroke: #ffffff;
  stroke-width: 1;
  stroke-dasharray: 0 1 0;
  stroke-opacity: 0.5;

}

.land-out:hover {

  fill-opacity: 1;
  fill: #2786c285;

}

@media only screen and (max-width:640px) {

.wrap {

 margin-left: 0;    
 margin-bottom: 10px;

}

.countries ul {

margin-left: 0;

}

.fa-question-circle-map {

   top: inherit;
   bottom: 30px;

}

.controls {

   top: 2px;
   right: 5px;

}

.controls button {

   padding: 0 5px;
   margin: 2px;

}

  1. reset {
  font-size: x-small;

}

.mobile { display: block; }

.desktop { display: none; }

.selected {

   fill: #c14e48!important;

}

.land-out.selected {

   fill-opacity: 1;
   fill: #2786c285!important;

}

.map-tooltip {

   padding: 0;
   font-size: 15px;
   height: 25px;
   margin-top: -9px;

}

.map-tooltip img {

   height: 18px;

}

} </style>