Update dependencies and handle issues (#39)

* Update dependencies and handle issues * Update also leaflet.css * Format * Load package.json without fs
jalibu · Nov 12, 2023 · 5c8f0db · 5c8f0db
1 parent 6719934
commit 5c8f0db
Show file tree

Hide file tree

Showing 6 changed files with 669 additions and 524 deletions.
diff --git a/MMM-RAIN-MAP.css b/MMM-RAIN-MAP.css
@@ -2,15 +2,17 @@
   --color-history: #003aff;
   --color-now: #000;
   --color-forecast: #ff0074;
+
   position: absolute;
   display: block;
   background: #ccc;
-  padding: 0 10px 0 10px;
+  padding: 0 10px;
   z-index: 999;
   opacity: 0.75;
   color: #000;
   font-size: 1.2rem;
 }
+
 .rain-map-time-wrapper i {
   margin-right: 6px;
 }

diff --git a/MMM-RAIN-MAP.js b/MMM-RAIN-MAP.js
diff --git a/leaflet.css b/leaflet.css
@@ -45,14 +45,24 @@
 }
 /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
 /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
-.leaflet-container .leaflet-overlay-pane svg,
+.leaflet-container .leaflet-overlay-pane svg {
+  max-width: none !important;
+  max-height: none !important;
+}
 .leaflet-container .leaflet-marker-pane img,
 .leaflet-container .leaflet-shadow-pane img,
 .leaflet-container .leaflet-tile-pane img,
 .leaflet-container img.leaflet-image-layer,
 .leaflet-container .leaflet-tile {
   max-width: none !important;
   max-height: none !important;
+  width: auto;
+  padding: 0;
+}
+
+.leaflet-container img.leaflet-tile {
+  /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+  mix-blend-mode: plus-lighter;
 }
 
 .leaflet-container.leaflet-touch-zoom {
@@ -182,9 +192,6 @@
 
 /* zoom and fade animations */
 
-.leaflet-fade-anim .leaflet-tile {
-  will-change: opacity;
-}
 .leaflet-fade-anim .leaflet-popup {
   opacity: 0;
   -webkit-transition: opacity 0.2s linear;
@@ -199,9 +206,10 @@
   -ms-transform-origin: 0 0;
   transform-origin: 0 0;
 }
-.leaflet-zoom-anim .leaflet-zoom-animated {
+svg.leaflet-zoom-animated {
   will-change: transform;
 }
+
 .leaflet-zoom-anim .leaflet-zoom-animated {
   -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
   -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
@@ -266,22 +274,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 .leaflet-container {
   background: #ddd;
-  outline: 0;
+  outline-offset: 1px;
 }
 .leaflet-container a {
   color: #0078a8;
 }
-.leaflet-container a.leaflet-active {
-  outline: 2px solid orange;
-}
 .leaflet-zoom-box {
   border: 2px dotted #38f;
   background: rgba(255, 255, 255, 0.5);
 }
 
 /* general typography */
 .leaflet-container {
-  font: 12px/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  font-size: 0.75rem;
+  line-height: 1.5;
 }
 
 /* general toolbar styles */
@@ -290,8 +298,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
   border-radius: 4px;
 }
-.leaflet-bar a,
-.leaflet-bar a:hover {
+.leaflet-bar a {
   background-color: #fff;
   border-bottom: 1px solid #ccc;
   width: 26px;
@@ -308,7 +315,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
   background-repeat: no-repeat;
   display: block;
 }
-.leaflet-bar a:hover {
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
   background-color: #f4f4f4;
 }
 .leaflet-bar a:first-child {
@@ -398,6 +406,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 .leaflet-control-layers label {
   display: block;
+  font-size: 13px;
+  font-size: 1.08333em;
 }
 .leaflet-control-layers-separator {
   height: 0;
@@ -407,30 +417,35 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 /* Default icon URLs */
 .leaflet-default-icon-path {
+  /* used only in path-guessing heuristic, see L.Icon.Default */
   background-image: url(images/marker-icon.png);
 }
 
 /* attribution and scale controls */
 
 .leaflet-container .leaflet-control-attribution {
   background: #fff;
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.8);
   margin: 0;
 }
 .leaflet-control-attribution,
 .leaflet-control-scale-line {
   padding: 0 5px;
   color: #333;
+  line-height: 1.4;
 }
 .leaflet-control-attribution a {
   text-decoration: none;
 }
-.leaflet-control-attribution a:hover {
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
   text-decoration: underline;
 }
-.leaflet-container .leaflet-control-attribution,
-.leaflet-container .leaflet-control-scale {
-  font-size: 11px;
+.leaflet-attribution-flag {
+  display: inline !important;
+  vertical-align: baseline !important;
+  width: 1em;
+  height: 0.6669em;
 }
 .leaflet-left .leaflet-control-scale {
   margin-left: 5px;
@@ -443,14 +458,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
   border-top: none;
   line-height: 1.1;
   padding: 2px 5px 1px;
-  font-size: 11px;
   white-space: nowrap;
-  overflow: hidden;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-
-  background: #fff;
-  background: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.8);
+  text-shadow: 1px 1px #fff;
 }
 .leaflet-control-scale-line:not(:first-child) {
   border-top: 2px solid #777;
@@ -485,17 +497,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
   border-radius: 12px;
 }
 .leaflet-popup-content {
-  margin: 13px 19px;
-  line-height: 1.4;
+  margin: 13px 24px 13px 20px;
+  line-height: 1.3;
+  font-size: 13px;
+  font-size: 1.08333em;
+  min-height: 1px;
 }
 .leaflet-popup-content p {
-  margin: 18px 0;
+  margin: 17px 0;
+  margin: 1.3em 0;
 }
 .leaflet-popup-tip-container {
   width: 40px;
   height: 20px;
   position: absolute;
   left: 50%;
+  margin-top: -1px;
   margin-left: -20px;
   overflow: hidden;
   pointer-events: none;
@@ -506,6 +523,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   padding: 1px;
 
   margin: -10px auto 0;
+  pointer-events: auto;
 
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
@@ -522,24 +540,21 @@ svg.leaflet-image-layer.leaflet-interactive path {
   position: absolute;
   top: 0;
   right: 0;
-  padding: 4px 4px 0 0;
   border: none;
   text-align: center;
-  width: 18px;
-  height: 14px;
-  font: 16px/14px Tahoma, Verdana, sans-serif;
-  color: #c3c3c3;
+  width: 24px;
+  height: 24px;
+  font: 16px/24px Tahoma, Verdana, sans-serif;
+  color: #757575;
   text-decoration: none;
-  font-weight: bold;
   background: transparent;
 }
-.leaflet-container a.leaflet-popup-close-button:hover {
-  color: #999;
+.leaflet-container a.leaflet-popup-close-button:hover,
+.leaflet-container a.leaflet-popup-close-button:focus {
+  color: #585858;
 }
 .leaflet-popup-scrolled {
   overflow: auto;
-  border-bottom: 1px solid #ddd;
-  border-top: 1px solid #ddd;
 }
 
 .leaflet-oldie .leaflet-popup-content-wrapper {
@@ -552,9 +567,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
   -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)';
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
 }
-.leaflet-oldie .leaflet-popup-tip-container {
-  margin-top: -1px;
-}
 
 .leaflet-oldie .leaflet-control-zoom,
 .leaflet-oldie .leaflet-control-layers,
@@ -587,14 +599,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
   pointer-events: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
-.leaflet-tooltip.leaflet-clickable {
+.leaflet-tooltip.leaflet-interactive {
   cursor: pointer;
   pointer-events: auto;
 }
-.leaflet-tooltip-top::before,
-.leaflet-tooltip-bottom::before,
-.leaflet-tooltip-left::before,
-.leaflet-tooltip-right::before {
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
   position: absolute;
   pointer-events: none;
   border: 6px solid transparent;
@@ -610,17 +622,17 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-tooltip-top {
   margin-top: -6px;
 }
-.leaflet-tooltip-bottom::before,
-.leaflet-tooltip-top::before {
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
   left: 50%;
   margin-left: -6px;
 }
-.leaflet-tooltip-top::before {
+.leaflet-tooltip-top:before {
   bottom: 0;
   margin-bottom: -12px;
   border-top-color: #fff;
 }
-.leaflet-tooltip-bottom::before {
+.leaflet-tooltip-bottom:before {
   top: 0;
   margin-top: -12px;
   margin-left: -6px;
@@ -632,18 +644,28 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-tooltip-right {
   margin-left: 6px;
 }
-.leaflet-tooltip-left::before,
-.leaflet-tooltip-right::before {
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
   top: 50%;
   margin-top: -6px;
 }
-.leaflet-tooltip-left::before {
+.leaflet-tooltip-left:before {
   right: 0;
   margin-right: -12px;
   border-left-color: #fff;
 }
-.leaflet-tooltip-right::before {
+.leaflet-tooltip-right:before {
   left: 0;
   margin-left: -12px;
   border-right-color: #fff;
 }
+
+/* Printing */
+
+@media print {
+  /* Prevent printers from removing background-images of controls. */
+  .leaflet-control {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}