From ba9c3bc6b163c452d24718547d5777277bab0bb6 Mon Sep 17 00:00:00 2001 From: Malvoz <26493779+Malvoz@users.noreply.github.com> Date: Fri, 25 Jun 2021 18:25:19 +0200 Subject: [PATCH 1/4] native-like styles for interactive features --- src/mapml/layers/FeatureLayer.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/mapml/layers/FeatureLayer.js b/src/mapml/layers/FeatureLayer.js index f91adaaea..7b98f4741 100644 --- a/src/mapml/layers/FeatureLayer.js +++ b/src/mapml/layers/FeatureLayer.js @@ -13,16 +13,21 @@ export var MapMLFeatures = L.FeatureGroup.extend({ // info: https://github.com/Leaflet/Leaflet/pull/4597 L.DomUtil.addClass(this._container, 'leaflet-pane mapml-vector-container'); L.setOptions(this.options.renderer, {pane: this._container}); - let anim = L.DomUtil.create("style", "mapml-feature-animation", this._container); - anim.innerHTML = `@keyframes pathSelect { - 0% {stroke: white;} - 50% {stroke: black;} - } - g:focus > path, - path:focus { - animation-name: pathSelect; - animation-duration: 1s; - stroke-width: 5; + let style = L.DomUtil.create("style", "mapml-feature-style", this._container); + style.innerHTML = ` + .mapml-vector-container g[role="link"]:focus, + .mapml-vector-container g[role="link"]:hover, + .mapml-vector-container g[role="button"]:focus, + .mapml-vector-container g[role="button"]:hover, + .mapml-vector-container g[role="link"] path:focus, + .mapml-vector-container g[role="link"] path:hover, + .mapml-vector-container g[role="button"] path:focus, + .mapml-vector-container g[role="button"] path:hover, + .mapml-vector-container g[role="link"]:focus path, + .mapml-vector-container g[role="link"]:hover path, + .mapml-vector-container g[role="button"]:focus path, + .mapml-vector-container g[role="button"]:hover path { + outline: 0!important; stroke: black; }`; } @@ -310,7 +315,7 @@ export var MapMLFeatures = L.FeatureGroup.extend({ _removeCSS: function(){ let toDelete = this._container.querySelectorAll("link[rel=stylesheet],style"); for(let i = 0; i < toDelete.length;i++){ - if(toDelete[i].classList.contains("mapml-feature-animation")) continue; + if(toDelete[i].classList.contains("mapml-feature-style")) continue; this._container.removeChild(toDelete[i]); } }, From 769e145be944ce3d63ad0180ca5ac7dc4f0616d0 Mon Sep 17 00:00:00 2001 From: Malvoz <26493779+Malvoz@users.noreply.github.com> Date: Sat, 26 Jun 2021 22:11:00 +0200 Subject: [PATCH 2/4] Use `LinkText` system color (if supported) to highlight interactive features --- src/mapml/layers/FeatureLayer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/mapml/layers/FeatureLayer.js b/src/mapml/layers/FeatureLayer.js index 7b98f4741..9e4a794eb 100644 --- a/src/mapml/layers/FeatureLayer.js +++ b/src/mapml/layers/FeatureLayer.js @@ -28,7 +28,8 @@ export var MapMLFeatures = L.FeatureGroup.extend({ .mapml-vector-container g[role="button"]:focus path, .mapml-vector-container g[role="button"]:hover path { outline: 0!important; - stroke: black; + stroke: #000; + stroke: LinkText; }`; } From bc604f014e24ac69b8f9e04e8da947a695daf2e3 Mon Sep 17 00:00:00 2001 From: Malvoz <26493779+Malvoz@users.noreply.github.com> Date: Wed, 30 Jun 2021 14:03:45 +0200 Subject: [PATCH 3/4] Remove `.mapml-vector-container` scope for feature styles Per https://github.com/Maps4HTML/Web-Map-Custom-Element/pull/478#discussion_r661394725. --- src/mapml/layers/FeatureLayer.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/mapml/layers/FeatureLayer.js b/src/mapml/layers/FeatureLayer.js index 9e4a794eb..9da8b1431 100644 --- a/src/mapml/layers/FeatureLayer.js +++ b/src/mapml/layers/FeatureLayer.js @@ -15,18 +15,18 @@ export var MapMLFeatures = L.FeatureGroup.extend({ L.setOptions(this.options.renderer, {pane: this._container}); let style = L.DomUtil.create("style", "mapml-feature-style", this._container); style.innerHTML = ` - .mapml-vector-container g[role="link"]:focus, - .mapml-vector-container g[role="link"]:hover, - .mapml-vector-container g[role="button"]:focus, - .mapml-vector-container g[role="button"]:hover, - .mapml-vector-container g[role="link"] path:focus, - .mapml-vector-container g[role="link"] path:hover, - .mapml-vector-container g[role="button"] path:focus, - .mapml-vector-container g[role="button"] path:hover, - .mapml-vector-container g[role="link"]:focus path, - .mapml-vector-container g[role="link"]:hover path, - .mapml-vector-container g[role="button"]:focus path, - .mapml-vector-container g[role="button"]:hover path { + g[role="link"]:focus, + g[role="link"]:hover, + g[role="button"]:focus, + g[role="button"]:hover, + g[role="link"] path:focus, + g[role="link"] path:hover, + g[role="button"] path:focus, + g[role="button"] path:hover, + g[role="link"]:focus path, + g[role="link"]:hover path, + g[role="button"]:focus path, + g[role="button"]:hover path { outline: 0!important; stroke: #000; stroke: LinkText; From bd668e845050027713fc50438c660fce6d31c11e Mon Sep 17 00:00:00 2001 From: Malvoz <26493779+Malvoz@users.noreply.github.com> Date: Thu, 1 Jul 2021 17:13:23 +0200 Subject: [PATCH 4/4] Use `#0000EE` fallback color for interactive features --- src/mapml/layers/FeatureLayer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mapml/layers/FeatureLayer.js b/src/mapml/layers/FeatureLayer.js index 9da8b1431..cc2969c26 100644 --- a/src/mapml/layers/FeatureLayer.js +++ b/src/mapml/layers/FeatureLayer.js @@ -28,7 +28,7 @@ export var MapMLFeatures = L.FeatureGroup.extend({ g[role="button"]:focus path, g[role="button"]:hover path { outline: 0!important; - stroke: #000; + stroke: #0000EE; stroke: LinkText; }`; }