Skip to content

Commit

Permalink
Make attribution control responsive. (#3783)
Browse files Browse the repository at this point in the history 
* Make attribution control responsive.

* Add tests for the attribution control compact mode.

* Add documentation for new attribution control compact option.
  • Loading branch information
@lennerd @lucaswoj
lennerd authored and lucaswoj committed Dec 15, 2016
1 parent 7e63446 commit cefab08
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 8 deletions.
37 changes: 32 additions & 5 deletions dist/mapbox-gl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,16 +70,16 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
.mapboxgl-ctrl-icon {
padding: 5px;
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
padding: 5px;
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate {
padding: 5px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%23333%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.watching {
Expand All @@ -97,9 +97,36 @@

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
padding: 0 5px;
background-color: rgba(255,255,255,0.5);
background-color: rgba(255, 255, 255, .5);
margin: 0;
}
.mapboxgl-ctrl-attrib.compact {
padding-top: 2px;
padding-bottom: 2px;
margin: 0 10px 10px 10px;
position: relative;
padding-right: 24px;
background-color: #fff;
border-radius: 3px 12px 12px 3px;
visibility: hidden;
}
.mapboxgl-ctrl-attrib.compact:hover {
visibility: visible;
}
.mapboxgl-ctrl-attrib.compact:after {
content: '';
cursor: pointer;
position: absolute;
bottom: 0;
right: 0;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%09%3Cpath%20fill%3D%27%23333333%27%20fill-rule%3D%27evenodd%27%20d%3D%27M4%2C10a6%2C6%200%201%2C0%2012%2C0a6%2C6%200%201%2C0%20-12%2C0%20M9%2C7a1%2C1%200%201%2C0%202%2C0a1%2C1%200%201%2C0%20-2%2C0%20M9%2C10a1%2C1%200%201%2C1%202%2C0l0%2C3a1%2C1%200%201%2C1%20-2%2C0%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
background-color: rgba(255, 255, 255, .5);
width: 24px;
height: 24px;
box-sizing: border-box;
visibility: visible;
border-radius: 12px;
}
.mapboxgl-ctrl-attrib a {
color: rgba(0,0,0,0.75);
text-decoration: none;
Expand Down
3 changes: 3 additions & 0 deletions dist/svg/mapboxgl-ctrl-attrib.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 27 additions & 3 deletions js/ui/control/attribution_control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,23 @@ const util = require('../../util/util');
* An `AttributionControl` control presents the map's [attribution information](https://www.mapbox.com/help/attribution/).
*
* @implements {IControl}
* @param {Object} [options]
* @param {boolean} [options.compact] If `true` force a compact attribution that shows the full attribution on mouse hover, or if `false` force the full attribution control. The default is a responsive attribution that collapses when the map is less than 640 pixels wide.
* @example
* var map = new mapboxgl.Map({attributionControl: false})
* .addControl(new mapboxgl.AttributionControl());
* .addControl(new mapboxgl.AttributionControl({
* compact: true
* }));
*/
class AttributionControl {

constructor() {
constructor(options) {
this.options = options;

util.bindAll([
'_updateEditLink',
'_updateData'
'_updateData',
'_updateCompact'
], this);
}

Expand All @@ -25,16 +32,26 @@ class AttributionControl {
}

onAdd(map) {
const compact = this.options && this.options.compact;

this._map = map;
this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-attrib');

if (compact) {
this._container.classList.add('compact');
}

this._updateAttributions();
this._updateEditLink();

this._map.on('data', this._updateData);
this._map.on('moveend', this._updateEditLink);

if (compact === undefined) {
this._map.on('resize', this._updateCompact);
this._updateCompact();
}

return this._container;
}

Expand All @@ -43,6 +60,7 @@ class AttributionControl {

this._map.off('data', this._updateData);
this._map.off('moveend', this._updateEditLink);
this._map.off('resize', this._updateCompact);

this._map = undefined;
}
Expand Down Expand Up @@ -90,6 +108,12 @@ class AttributionControl {
this._editLink = null;
}

_updateCompact() {
const compact = this._map.getCanvasContainer().offsetWidth <= 640;

this._container.classList[compact ? 'add' : 'remove']('compact');
}

}

module.exports = AttributionControl;
40 changes: 40 additions & 0 deletions test/js/ui/control/attribution.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,46 @@ test('AttributionControl appears in the position specified by the position optio
t.end();
});

test('AttributionControl appears in compact mode if compact option is used', (t) => {
const map = createMap();
map.getCanvasContainer().offsetWidth = 700;

let attributionControl = new AttributionControl({
compact: true
});
map.addControl(attributionControl);

const container = map.getContainer();

t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib.compact').length, 1);
map.removeControl(attributionControl);

map.getCanvasContainer().offsetWidth = 600;
attributionControl = new AttributionControl({
compact: false
});

map.addControl(attributionControl);
t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib:not(.compact)').length, 1);
t.end();
});

test('AttributionControl appears in compact mode if container is less then 640 pixel wide', (t) => {
const map = createMap();
map.getCanvasContainer().offsetWidth = 700;
map.addControl(new AttributionControl());

const container = map.getContainer();

t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib:not(.compact)').length, 1);

map.getCanvasContainer().offsetWidth = 600;
map.resize();

t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib.compact').length, 1);
t.end();
});

test('AttributionControl dedupes attributions that are substrings of others', (t) => {
const map = createMap();
const attribution = new AttributionControl();
Expand Down

0 comments on commit cefab08

Please sign in to comment.