Make new behavior overridable; update docs and examples

2018-10-14 12:10:40 +02:00
parent af4e5ca7cf
commit 2768884044
30 changed files with 43 additions and 167 deletions
--- a/changelog/upgrade-notes.md
+++ b/changelog/upgrade-notes.md
@@ -2,6 +2,12 @@

 ### Next version

+#### Attributions are not collapsible for `ol/source/OSM`
+
+When a map contains a layer from a `ol/source/OSM` source, the `ol/control/Attribution` control will be shown with the `collapsible: false` behavior.
+
+To get the previous behavior, configure the `ol/control/Attribution` control with `collapsible: true`. 
+
 ### v5.2.0

 #### Removal of the `snapToPixel` option for `ol/style/Image` subclasses
--- a/examples/accessible.js
+++ b/examples/accessible.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';

@@ -12,11 +11,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [0, 0],
    zoom: 2
--- a/examples/canvas-tiles.js
+++ b/examples/canvas-tiles.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import {OSM, TileDebug} from '../src/ol/source.js';
@@ -20,11 +19,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: fromLonLat([-0.1275, 51.507222]),
    zoom: 10
--- a/examples/center.js
+++ b/examples/center.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
@@ -45,11 +44,6 @@ const map = new Map({
    vectorLayer
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: view
 });

--- a/examples/custom-controls.js
+++ b/examples/custom-controls.js
@@ -48,11 +48,7 @@ class RotateNorthControl extends Control {


 const map = new Map({
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }).extend([
+  controls: defaultControls().extend([
    new RotateNorthControl()
  ]),
  layers: [
--- a/examples/device-orientation.js
+++ b/examples/device-orientation.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {toRadians} from '../src/ol/math.js';
 import OSM from '../src/ol/source/OSM.js';
@@ -16,11 +15,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: view
 });

--- a/examples/export-map.js
+++ b/examples/export-map.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
@@ -18,11 +17,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [0, 0],
    zoom: 2
--- a/examples/export-pdf.js
+++ b/examples/export-pdf.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import WKT from '../src/ol/format/WKT.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
@@ -26,11 +25,6 @@ const vector = new VectorLayer({
 const map = new Map({
  layers: [raster, vector],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [0, 0],
    zoom: 2
--- a/examples/feature-animation.js
+++ b/examples/feature-animation.js
@@ -2,7 +2,6 @@ import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import {unByKey} from '../src/ol/Observable.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {easeOut} from '../src/ol/easing.js';
 import Point from '../src/ol/geom/Point.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -19,11 +18,6 @@ const map = new Map({
      })
    })
  ],
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  target: 'map',
  view: new View({
    center: [0, 0],
--- a/examples/geojson.js
+++ b/examples/geojson.js
@@ -1,7 +1,6 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Circle from '../src/ol/geom/Circle.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -174,11 +173,6 @@ const map = new Map({
    vectorLayer
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [0, 0],
    zoom: 2
--- a/examples/geolocation-orientation.js
+++ b/examples/geolocation-orientation.js
@@ -2,7 +2,6 @@ import Geolocation from '../src/ol/Geolocation.js';
 import Map from '../src/ol/Map.js';
 import Overlay from '../src/ol/Overlay.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import LineString from '../src/ol/geom/LineString.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
@@ -22,11 +21,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: view
 });

--- a/examples/geolocation.js
+++ b/examples/geolocation.js
@@ -2,7 +2,6 @@ import Feature from '../src/ol/Feature.js';
 import Geolocation from '../src/ol/Geolocation.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import Point from '../src/ol/geom/Point.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
@@ -20,11 +19,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: view
 });

--- a/examples/igc.js
+++ b/examples/igc.js
@@ -1,7 +1,6 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import IGC from '../src/ol/format/IGC.js';
 import {LineString, Point} from '../src/ol/geom.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -93,11 +92,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [703365.7089403362, 5714629.865071137],
    zoom: 9
--- a/examples/layer-clipping-webgl.js
+++ b/examples/layer-clipping-webgl.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {WEBGL} from '../src/ol/has.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
@@ -20,11 +19,6 @@ if (!WEBGL) {
  const map = new Map({
    layers: [osm],
    target: 'map',
-    controls: defaultControls({
-      attributionOptions: {
-        collapsible: false
-      }
-    }),
    view: new View({
      center: [0, 0],
      zoom: 2
--- a/examples/layer-clipping.js
+++ b/examples/layer-clipping.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';

@@ -11,11 +10,6 @@ const osm = new TileLayer({
 const map = new Map({
  layers: [osm],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [0, 0],
    zoom: 2
--- a/examples/layer-swipe.js
+++ b/examples/layer-swipe.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import BingMaps from '../src/ol/source/BingMaps.js';
 import OSM from '../src/ol/source/OSM.js';
@@ -18,11 +17,6 @@ const bing = new TileLayer({
 const map = new Map({
  layers: [osm, bing],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [0, 0],
    zoom: 2
--- a/examples/localized-openstreetmap.js
+++ b/examples/localized-openstreetmap.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM, {ATTRIBUTION} from '../src/ol/source/OSM.js';

@@ -34,11 +33,6 @@ const map = new Map({
    openSeaMapLayer
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    maxZoom: 18,
    center: [-244780.24508882355, 5986452.183179816],
--- a/examples/min-max-resolution.js
+++ b/examples/min-max-resolution.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
@@ -26,11 +25,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [653600, 5723680],
    zoom: 5
--- a/examples/mouse-position.js
+++ b/examples/mouse-position.js
@@ -17,11 +17,7 @@ const mousePositionControl = new MousePosition({
 });

 const map = new Map({
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }).extend([mousePositionControl]),
+  controls: defaultControls().extend([mousePositionControl]),
  layers: [
    new TileLayer({
      source: new OSM()
--- a/examples/moveend.js
+++ b/examples/moveend.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {getBottomLeft, getTopRight} from '../src/ol/extent.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {toLonLat} from '../src/ol/proj.js';
@@ -14,11 +13,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [0, 0],
    zoom: 2
--- a/examples/navigation-controls.js
+++ b/examples/navigation-controls.js
@@ -6,11 +6,7 @@ import OSM from '../src/ol/source/OSM.js';


 const map = new Map({
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }).extend([
+  controls: defaultControls().extend([
    new ZoomToExtent({
      extent: [
        813079.7791264898, 5929220.284081122,
--- a/examples/permalink.js
+++ b/examples/permalink.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';

@@ -29,11 +28,6 @@ const map = new Map({
      source: new OSM()
    })
  ],
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  target: 'map',
  view: new View({
    center: center,
--- a/examples/rotation.js
+++ b/examples/rotation.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';

@@ -12,11 +11,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [14200000, 4130000],
    rotation: Math.PI / 6,
--- a/examples/scale-line.js
+++ b/examples/scale-line.js
@@ -8,11 +8,7 @@ import OSM from '../src/ol/source/OSM.js';
 const scaleLineControl = new ScaleLine();

 const map = new Map({
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }).extend([
+  controls: defaultControls().extend([
    scaleLineControl
  ]),
  layers: [
--- a/examples/teleport.js
+++ b/examples/teleport.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';

@@ -11,11 +10,6 @@ const map = new Map({
      source: new OSM()
    })
  ],
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [0, 0],
    zoom: 2
--- a/examples/vector-osm.js
+++ b/examples/vector-osm.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import OSMXML from '../src/ol/format/OSMXML.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {bbox as bboxStrategy} from '../src/ol/loadingstrategy.js';
@@ -121,11 +120,6 @@ const raster = new TileLayer({
 map = new Map({
  layers: [raster, vector],
  target: document.getElementById('map'),
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [739218, 5906096],
    maxZoom: 19,
--- a/examples/wmts-ign.js
+++ b/examples/wmts-ign.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {getWidth} from '../src/ol/extent.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat, get as getProjection} from '../src/ol/proj.js';
@@ -10,11 +9,6 @@ import WMTSTileGrid from '../src/ol/tilegrid/WMTS.js';

 const map = new Map({
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    zoom: 5,
    center: fromLonLat([5, 45])
--- a/examples/wmts.js
+++ b/examples/wmts.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {getWidth, getTopLeft} from '../src/ol/extent.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {get as getProjection} from '../src/ol/proj.js';
@@ -48,11 +47,6 @@ const map = new Map({
    })
  ],
  target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
  view: new View({
    center: [-11158582, 4813697],
    zoom: 4
--- a/src/ol/control/Attribution.js
+++ b/src/ol/control/Attribution.js
@@ -16,9 +16,9 @@ import {visibleAtResolution} from '../layer/Layer.js';
 * @property {HTMLElement|string} [target] Specify a target if you
 * want the control to be rendered outside of the map's
 * viewport.
- * @property {boolean} [collapsible=true] Specify if attributions can
- * be collapsed. If you use an OSM source, should be set to `false` — see
- * {@link https://www.openstreetmap.org/copyright OSM Copyright} —
+ * @property {boolean} [collapsible] Specify if attributions can
+ * be collapsed. If not specified, sources control this behavior with their
+ * `attributionsCollapsible` setting.
 * @property {boolean} [collapsed=true] Specify if attributions should
 * be collapsed at startup.
 * @property {string} [tipLabel='Attributions'] Text label to use for the button tip.
@@ -70,6 +70,12 @@ class Attribution extends Control {
     */
    this.collapsed_ = options.collapsed !== undefined ? options.collapsed : true;

+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.overrideCollapsible_ = options.collapsible !== undefined;
+
    /**
     * @private
     * @type {boolean}
@@ -145,12 +151,12 @@ class Attribution extends Control {
  }

  /**
-   * Get a list of visible attributions.
+   * Collect a list of visible attributions and set the collapsible state.
   * @param {import("../PluggableMap.js").FrameState} frameState Frame state.
   * @return {Array<string>} Attributions.
   * @private
   */
-  getSourceAttributions_(frameState) {
+  collectSourceAttributions_(frameState) {
    /**
     * Used to determine if an attribution already exists.
     * @type {!Object<string, boolean>}
@@ -186,9 +192,8 @@ class Attribution extends Control {
        continue;
      }

-      const collapsible = source.getAttributionsCollapsible();
-      if (collapsible !== undefined && !collapsible) {
-        this.setCollapsible(collapsible);
+      if (!this.overrideCollapsible_ && source.getAttributionsCollapsible() === false) {
+        this.setCollapsible(false);
      }

      if (Array.isArray(attributions)) {
@@ -221,7 +226,7 @@ class Attribution extends Control {
      return;
    }

-    const attributions = this.getSourceAttributions_(frameState);
+    const attributions = this.collectSourceAttributions_(frameState);

    const visible = attributions.length > 0;
    if (this.renderedVisible_ != visible) {
--- a/test/spec/ol/control/attribution.test.js
+++ b/test/spec/ol/control/attribution.test.js
@@ -95,4 +95,23 @@ describe('ol.control.Attribution', function() {
    expect(attribution.length).to.be(1);
  });

+  it('renders attributions as collapsible if configured with collapsible set to true', function() {
+    map.getControls().clear();
+    map.addControl(new Attribution({collapsible: true}));
+    const source = new TileSource({
+      projection: 'EPSG:3857',
+      tileGrid: createXYZ(),
+      attributions: 'foo',
+      attributionsCollapsible: false
+    });
+    source.getTile = tileLoadFunction;
+    map.addLayer(new TileLayer({
+      source: source
+    }));
+    map.renderSync();
+
+    const attribution = map.getTarget().querySelectorAll('.ol-attribution.ol-uncollapsible');
+    expect(attribution.length).to.be(0);
+  });
+
 });