Release 1.4.12

Author: richterb

CHANGELOG.md

@@ -2,6 +2,28 @@
 All notable changes to this project will be documented in this file.
 This log tries to follow the good principles of [Keep a CHANGELOG](http://keepachangelog.com/).
 
+## 1.4.12 - 2020-10-23
+### Added
+- `odsAdvAnalysis`: A new widget that can be used to query an 
+[API v2 `aggregates` endpoint](https://help.opendatasoft.com/apis/ods-search-v2/#aggregating-records) and expose the
+results in a variable, which can then be used by other widgets.
+- `odsAdvTable`: A new widget to display as a table the content of a variable (typically taken from the `odsAdvAnalysis`
+variable).
+- `odsSelect`: New `isLoading` parameter to trigger in advance the loading spinner. For example, it can be used to start
+the spinner at the very beginning of an `odsResults` query that will populate the `odsSelect` options, so that users
+get an explicit loading message the entire time.
+
+### Changed
+- `odsMap`: The Mapbox basemap support has been updated to remove deprecated "Studio Classic styles", and add support
+for Mapbox Styles and Tilesets.
+- `odsMap`: The Jawg basemaps are now displayed in Retina on displays that support it (e.g. smartphones, tablets, 
+high-density screens). 
+
+### Fixed
+- Fixed on issue on our minified build (`ods-widgets.min.js`) where several widgets were unusable.
+- `odsMap`, `odsSearchbox`: Fixed a number of accessibility issues
+- `odsSelect`: Various performance improvements when dealing with a large set of options.
+
 ## 1.4.11 - 2020-08-07
 ### Fixed
 - `odsColorGradient`: Replaced `odsColorGradientLogarithmicScaleFactor` parameter with a new `odsColorGradientPowExponent`

dist/libs/ods-map/ods-map.js

@@ -51,6 +51,14 @@ L.ODSMap = L.Map.extend({
             }
             layer.basemapLabel = basemap.label;
             layer.basemapId = basemap.id;
+
+            // Re-implement the accessibility changes present in modern Leaflet versions
+            // https://github.com/Leaflet/Leaflet/blob/v1.7.0/src/layer/tile/TileLayer.js#L146-L156
+            layer.on('tileload', function(e) {
+                e.tile.alt = "";
+                e.tile.setAttribute('role', 'presentation');
+            });
+
             layers.push(layer);
         }
 
@@ -79,4 +87,4 @@ L.ODSMap = L.Map.extend({
         }
 
     }
-});
+});

dist/libs/ods-map/ods-tilelayer.js

@@ -28,15 +28,26 @@ L.ODSTileLayer = L.TileLayer.extend({
             this.options.prependAttribution,
             this.options.appendAttribution);
     },
-    _mapboxUrl: function(mapId, accessToken) {
-        var url = '//{s}.tiles.mapbox.com/v4/' + mapId + '/{z}/{x}/{y}';
+    _mapboxTilesetUrl: function(mapId, accessToken) {
+        // Tiles served by the Raster Tiles API, from Tilesets
+        var url = '//api.mapbox.com/v4/' + mapId + '/{z}/{x}/{y}';
         if (L.Browser.retina) {
             url += '@2x';
         }
         url += '.png';
         url += '?access_token=' + accessToken;
         return url;
     },
+    _mapboxStylesUrl: function(mapId, accessToken) {
+        // Tiles served by the Static Tiles API, from Mapbox styles
+        var url = '//api.mapbox.com/styles/v1/' + mapId + '/tiles/{z}/{x}/{y}';
+        if (L.Browser.retina) {
+            url += '@2x';
+        }
+        url += '?access_token=' + accessToken;
+
+        return url;
+    },
     _initLayer: function(basemap, disableAttribution, prependAttribution, appendAttribution) {
         var layerOptions = {};
         var attrib = this._addAttributionPart('', prependAttribution);
@@ -68,16 +79,39 @@ L.ODSTileLayer = L.TileLayer.extend({
                     attribution: !disableAttribution ? attrib : '',
                     subdomains: "abc"
                 });
-        } else if (basemap.provider.indexOf('mapbox.') === 0) {
+        } else if (basemap.provider === 'mapbox_style' || basemap.provider.indexOf('mapbox.') === 0) {
+            var mapId;
+            if (basemap.provider.indexOf('mapbox.') === 0) {
+                // Standard mapbox styles, with the former dot-based notation
+
+                // Mapping short style names to the full ones (https://docs.mapbox.com/api/maps/#mapbox-styles)
+                var fullStyles = {
+                    'streets': 'streets-v11',
+                    'outdoors': 'outdoors-v11',
+                    'light': 'light-v10',
+                    'dark': 'dark-v10',
+                    'satellite': 'satellite-v9',
+                    'streets-satellite': 'satellite-streets-v11'
+                };
+
+                var mapStyle = basemap.provider.substring(7);
+                mapId = 'mapbox/' + fullStyles[mapStyle];
+            } else {
+                // Custom style
+                mapId = basemap.mapid
+            }
+
             attrib = this._addAttributionPart(attrib, 'Map data © <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors');
             attrib = this._addAttributionPart(attrib, appendAttribution);
             layerOptions = {
                 minZoom: 2,
                 maxZoom: 21,
                 attribution: !disableAttribution ? attrib : '',
-                subdomains: "abcd"
+                subdomains: "abcd",
+                tileSize: 512,
+                zoomOffset: -1
             };
-            L.TileLayer.prototype.initialize.call(this, this._mapboxUrl(basemap.provider, basemap.mapbox_access_token), layerOptions);
+            L.TileLayer.prototype.initialize.call(this, this._mapboxStylesUrl(mapId, basemap.mapbox_access_token), layerOptions);
         } else if (basemap.provider === 'mapbox') {
             attrib = this._addAttributionPart(attrib, 'Map data © <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors');
             attrib = this._addAttributionPart(attrib, appendAttribution);
@@ -93,7 +127,7 @@ L.ODSTileLayer = L.TileLayer.extend({
             if (basemap.maxZoom) {
                 layerOptions.maxZoom = basemap.maxZoom;
             }
-            L.TileLayer.prototype.initialize.call(this, this._mapboxUrl(basemap.mapid, basemap.mapbox_access_token), layerOptions);
+            L.TileLayer.prototype.initialize.call(this, this._mapboxTilesetUrl(basemap.mapid, basemap.mapbox_access_token), layerOptions);
         } else if (basemap.provider.indexOf('stamen.') === 0) {
             var stamenMap = basemap.provider.substring(7);
             var stamenUrl = '//stamen-tiles-{s}.a.ssl.fastly.net/' + stamenMap + '/{z}/{x}/{y}.png';
@@ -120,7 +154,7 @@ L.ODSTileLayer = L.TileLayer.extend({
                 'sunny': 'd4246bc4-e98a-4976-b621-681f3f3f4230',
                 'matrix': '26e378b1-bfeb-48b2-8b32-69f484522bb8',
                 'transports': 'jawg-transports'
-            }
+            };
             var jawgUrl = 'https://tiles.jawg.io/';
             var jawgMap;
 
@@ -133,9 +167,9 @@ L.ODSTileLayer = L.TileLayer.extend({
             jawgUrl += jawgMap + '/';
 
             jawgUrl += '{z}/{x}/{y}';
-            //if (L.Browser.retina) {
-            //    jawgUrl += '@2x';
-            //}
+            if (L.Browser.retina) {
+               jawgUrl += '@2x';
+            }
             jawgUrl += '.png';
             if (basemap.jawg_apikey) {
                jawgUrl += '?api-key=' + basemap.jawg_apikey;
@@ -145,9 +179,9 @@ L.ODSTileLayer = L.TileLayer.extend({
             }
 
             if (basemap.shortAttribution) {
-                attrib = this._addAttributionPart(attrib, '<a href="https://www.jawg.io" target="_blank">jawg</a> <img src="https://www.jawg.io/images/favicon.png" width="16" height="16"> - Map data © <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>');
+                attrib = this._addAttributionPart(attrib, '<a href="https://www.jawg.io" target="_blank">jawg</a> <img src="https://www.jawg.io/images/favicon.png" width="16" height="16" alt="Jawg"> - Map data © <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>');
             } else {
-                attrib = this._addAttributionPart(attrib, 'Tiles Courtesy of <a href="https://www.jawg.io" target="_blank">jawg</a> <img src="https://www.jawg.io/images/favicon.png" width="16" height="16"> - Map data © <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors');
+                attrib = this._addAttributionPart(attrib, 'Tiles Courtesy of <a href="https://www.jawg.io" target="_blank">jawg</a> <img src="https://www.jawg.io/images/favicon.png" width="16" height="16" alt="Jawg"> - Map data © <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors');
             }
             attrib = this._addAttributionPart(attrib, appendAttribution);
 

dist/ods-widgets.css

@@ -54,6 +54,10 @@
   height: 1px;
   overflow: hidden;
 }
+html[dir=rtl] .ods-aria-instructions {
+  right: -10000px;
+  left: auto;
+}
 [dir=rtl] .fa-wheelchair,
 [dir=rtl] .fa-wheelchair-alt,
 [dir=rtl] .fa-random,
@@ -3606,9 +3610,11 @@ html[dir=rtl] .odswidget-geo-navigation__choice {
   border-radius: 4px;
 }
 .odswidget-select .odswidget-select-dropdown .odswidget-select-input-container .odswidget-select-input {
+  box-sizing: border-box;
   padding: 5px 9px;
   margin: 0;
   width: 100%;
+  height: 100%;
   border: 1px solid #33629C;
   border-radius: 4px;
   background-color: #ffffff;
@@ -3630,12 +3636,12 @@ html[dir=rtl] .odswidget-geo-navigation__choice {
 }
 .odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu {
   position: absolute;
-  z-index: 1;
+  z-index: 1000;
   border: 1px solid #cccccc;
   border-radius: 4px;
   background-color: #ffffff;
   background-size: cover;
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.13);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   max-height: 0;
   width: 100%;
   opacity: 0;
@@ -3685,23 +3691,38 @@ html[dir=rtl] .odswidget-geo-navigation__choice {
   margin: 0 13px;
   border-bottom: 1px solid #cccccc;
 }
-.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i {
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-square-o,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-check-square,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-minus-square,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-times-circle {
   width: 16px;
   height: 16px;
   text-align: center;
   font-size: 18px;
   position: absolute;
 }
-.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-square-o {
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-square-o.fa-square-o,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-check-square.fa-square-o,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-minus-square.fa-square-o,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-times-circle.fa-square-o {
   color: #cccccc;
 }
-.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-check-square {
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-square-o.fa-check-square,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-check-square.fa-check-square,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-minus-square.fa-check-square,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-times-circle.fa-check-square {
   color: #00C7B1;
 }
-.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-minus-square {
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-square-o.fa-minus-square,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-check-square.fa-minus-square,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-minus-square.fa-minus-square,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-times-circle.fa-minus-square {
   color: #00C7B1;
 }
-.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-times-circle {
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-square-o.fa-times-circle,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-check-square.fa-times-circle,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-minus-square.fa-times-circle,
+.odswidget-select .odswidget-select-dropdown .odswidget-select-dropdown-menu .odswidget-select-dropdown-menu-list > li i.fa-times-circle.fa-times-circle {
   right: 10px;
   width: 14px;
   height: 14px;
@@ -3797,94 +3818,92 @@ html[dir=rtl] .odswidget-geo-navigation__choice {
   color: #0088cc;
   border-bottom-color: #0088cc;
 }
-div.odswidget-adv-table-container {
+div.odswidget-adv-table__container {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-flow: column;
       flex-flow: column;
   padding: 5px;
   border-radius: 4px;
   background-color: #ffffff;
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 }
-div.odswidget-adv-table-container table {
+div.odswidget-adv-table__container table {
   table-layout: auto;
   width: 100%;
   border-collapse: collapse;
-  z-index: 2;
 }
-div.odswidget-adv-table-container table.odswidget-adv-table-sticky {
-  position: relative;
+div.odswidget-adv-table__container table.odswidget-adv-table__table__sticky-header,
+div.odswidget-adv-table__container table.odswidget-adv-table__table__sticky-first-column,
+div.odswidget-adv-table__container table.odswidget-adv-table__table__sticky-first-header-column {
+  position: absolute;
+  width: auto;
 }
-div.odswidget-adv-table-container table.odswidget-adv-table-sticky.horizontally-scrolled tbody tr td:first-child,
-div.odswidget-adv-table-container table.odswidget-adv-table-sticky.horizontally-scrolled thead tr th:first-child {
+div.odswidget-adv-table__container table.odswidget-adv-table__table__sticky-header.horizontally-scrolled,
+div.odswidget-adv-table__container table.odswidget-adv-table__table__sticky-first-column.horizontally-scrolled,
+div.odswidget-adv-table__container table.odswidget-adv-table__table__sticky-first-header-column.horizontally-scrolled {
   box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.07);
   transition: box-shadow 0.3s ease-in-out;
 }
-div.odswidget-adv-table-container table.odswidget-adv-table-sticky tr {
-  z-index: 1;
+div.odswidget-adv-table__container table.odswidget-adv-table__table__sticky-header {
+  width: 100%;
+}
+div.odswidget-adv-table__container table.odswidget-adv-table__table__sticky-header thead {
   display: -ms-flexbox;
   display: flex;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  overflow-y: visible;
 }
-div.odswidget-adv-table-container table.odswidget-adv-table-sticky tbody tr td:first-child {
-  z-index: 0;
-  background-color: #ffffff;
+div.odswidget-adv-table__container table.odswidget-adv-table__table__sticky-header thead tr {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
-div.odswidget-adv-table-container table tr:last-child td {
+div.odswidget-adv-table__container table tr:last-child td {
   border-bottom: none;
 }
-div.odswidget-adv-table-container table tr td,
-div.odswidget-adv-table-container table tr th {
+div.odswidget-adv-table__container table tr td,
+div.odswidget-adv-table__container table tr th {
   padding: 10px;
-  border-bottom: 1px solid #dee5ef;
-  color: #565656;
+  border-bottom: 1px solid #e5e5e5;
+  color: #666666;
   vertical-align: top;
   text-align: left;
   white-space: nowrap;
 }
-div.odswidget-adv-table-container table tr th {
+div.odswidget-adv-table__container table tr th {
   padding: 7px 10px;
-  background-color: #f6f8fb;
-  color: #142e7b;
+  background-color: #F6F8FB;
+  color: #0088cc;
   font-weight: normal;
 }
-div.odswidget-adv-table-container table tr th:first-child {
+div.odswidget-adv-table__container table tr th:first-child {
   border-top-left-radius: 4px;
 }
-div.odswidget-adv-table-container table tr th:last-child {
+div.odswidget-adv-table__container table tr th:last-child {
   border-top-right-radius: 4px;
 }
-div.odswidget-adv-table-container table tr th i.fa {
+div.odswidget-adv-table__container table tr th i.fa {
   padding-left: 5px;
   font-size: 0.8rem;
 }
-.odswidget-adv-table-totals td {
-  border-top: 1px solid #dee5ef;
+div.odswidget-adv-table__container table tr td {
+  background-color: #ffffff;
+}
+.odswidget-adv-table__totals td {
+  border-top: 2px solid #e5e5e5;
   font-weight: 600;
 }
-span.odswidget-adv-table-total-legend {
-  color: #142e7b;
+span.odswidget-adv-table__total__legend {
+  color: #666666;
   font-size: 0.8rem;
   vertical-align: text-bottom;
   text-transform: uppercase;
 }
-.odswidget-adv-table-wrapper {
+.odswidget-adv-table__wrapper {
+  position: relative;
   overflow: auto;
 }
-.odswidget-adv-table-clear-styles table {
-  position: static !important;
-  table-layout: auto !important;
-  width: 100% !important;
-}
-.odswidget-adv-table-clear-styles table tr {
-  position: static !important;
-  display: table-row !important;
-}
-.odswidget-adv-table-clear-styles table tr td,
-.odswidget-adv-table-clear-styles table tr th {
-  position: static !important;
-  display: table-cell !important;
-}
 .odswidget.odswidget-imagified {
   max-width: 100% !important;
 }