mapbox-gl 1.13.2

package/src/ui/control/attribution_control.js

@@ -0,0 +1,212 @@
+// @flow
+
+import DOM from '../../util/dom';
+import {bindAll} from '../../util/util';
+import config from '../../util/config';
+
+import type Map from '../map';
+
+type Options = {
+    compact?: boolean,
+    customAttribution?: string | Array<string>
+};
+
+/**
+ * An `AttributionControl` control presents the map's [attribution information](https://docs.mapbox.com/help/how-mapbox-works/attribution/).
+ *
+ * @implements {IControl}
+ * @param {Object} [options]
+ * @param {boolean} [options.compact] If `true`, force a compact attribution that shows the full attribution on mouse hover. If `false`, force the full attribution control. The default is a responsive attribution that collapses when the map is less than 640 pixels wide. **Attribution should not be collapsed if it can comfortably fit on the map. `compact` should only be used to modify default attribution when map size makes it impossible to fit [default attribution](https://docs.mapbox.com/help/how-mapbox-works/attribution/) and when the automatic compact resizing for default settings are not sufficient.**
+ * @param {string | Array<string>} [options.customAttribution] String or strings to show in addition to any other attributions.
+ * @example
+ * var map = new mapboxgl.Map({attributionControl: false})
+ *     .addControl(new mapboxgl.AttributionControl({
+ *         compact: true
+ *     }));
+ */
+class AttributionControl {
+    options: Options;
+    _map: Map;
+    _container: HTMLElement;
+    _innerContainer: HTMLElement;
+    _compactButton: HTMLButtonElement;
+    _editLink: ?HTMLAnchorElement;
+    _attribHTML: string;
+    styleId: string;
+    styleOwner: string;
+
+    constructor(options: Options = {}) {
+        this.options = options;
+
+        bindAll([
+            '_toggleAttribution',
+            '_updateEditLink',
+            '_updateData',
+            '_updateCompact'
+        ], this);
+    }
+
+    getDefaultPosition() {
+        return 'bottom-right';
+    }
+
+    onAdd(map: Map) {
+        const compact = this.options && this.options.compact;
+
+        this._map = map;
+        this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-attrib');
+        this._compactButton = DOM.create('button', 'mapboxgl-ctrl-attrib-button', this._container);
+        this._compactButton.addEventListener('click', this._toggleAttribution);
+        this._setElementTitle(this._compactButton, 'ToggleAttribution');
+        this._innerContainer = DOM.create('div', 'mapboxgl-ctrl-attrib-inner', this._container);
+        this._innerContainer.setAttribute('role', 'list');
+
+        if (compact) {
+            this._container.classList.add('mapboxgl-compact');
+        }
+
+        this._updateAttributions();
+        this._updateEditLink();
+
+        this._map.on('styledata', this._updateData);
+        this._map.on('sourcedata', this._updateData);
+        this._map.on('moveend', this._updateEditLink);
+
+        if (compact === undefined) {
+            this._map.on('resize', this._updateCompact);
+            this._updateCompact();
+        }
+
+        return this._container;
+    }
+
+    onRemove() {
+        DOM.remove(this._container);
+
+        this._map.off('styledata', this._updateData);
+        this._map.off('sourcedata', this._updateData);
+        this._map.off('moveend', this._updateEditLink);
+        this._map.off('resize', this._updateCompact);
+
+        this._map = (undefined: any);
+        this._attribHTML = (undefined: any);
+    }
+
+    _setElementTitle(element: HTMLElement, title: string) {
+        const str = this._map._getUIString(`AttributionControl.${title}`);
+        element.title = str;
+        element.setAttribute('aria-label', str);
+    }
+
+    _toggleAttribution() {
+        if (this._container.classList.contains('mapboxgl-compact-show')) {
+            this._container.classList.remove('mapboxgl-compact-show');
+            this._compactButton.setAttribute('aria-pressed', 'false');
+        } else {
+            this._container.classList.add('mapboxgl-compact-show');
+            this._compactButton.setAttribute('aria-pressed', 'true');
+        }
+    }
+
+    _updateEditLink() {
+        let editLink = this._editLink;
+        if (!editLink) {
+            editLink = this._editLink = (this._container.querySelector('.mapbox-improve-map'): any);
+        }
+
+        const params = [
+            {key: 'owner', value: this.styleOwner},
+            {key: 'id', value: this.styleId},
+            {key: 'access_token', value: this._map._requestManager._customAccessToken || config.ACCESS_TOKEN}
+        ];
+
+        if (editLink) {
+            const paramString = params.reduce((acc, next, i) => {
+                if (next.value) {
+                    acc += `${next.key}=${next.value}${i < params.length - 1 ? '&' : ''}`;
+                }
+                return acc;
+            }, `?`);
+            editLink.href = `${config.FEEDBACK_URL}/${paramString}${this._map._hash ? this._map._hash.getHashString(true) : ''}`;
+            editLink.rel = 'noopener nofollow';
+            this._setElementTitle(editLink, 'MapFeedback');
+        }
+    }
+
+    _updateData(e: any) {
+        if (e && (e.sourceDataType === 'metadata' || e.sourceDataType === 'visibility' || e.dataType === 'style')) {
+            this._updateAttributions();
+            this._updateEditLink();
+        }
+    }
+
+    _updateAttributions() {
+        if (!this._map.style) return;
+        let attributions: Array<string> = [];
+        if (this.options.customAttribution) {
+            if (Array.isArray(this.options.customAttribution)) {
+                attributions = attributions.concat(
+                    this.options.customAttribution.map(attribution => {
+                        if (typeof attribution !== 'string') return '';
+                        return attribution;
+                    })
+                );
+            } else if (typeof this.options.customAttribution === 'string') {
+                attributions.push(this.options.customAttribution);
+            }
+        }
+
+        if (this._map.style.stylesheet) {
+            const stylesheet: any = this._map.style.stylesheet;
+            this.styleOwner = stylesheet.owner;
+            this.styleId = stylesheet.id;
+        }
+
+        const sourceCaches = this._map.style.sourceCaches;
+        for (const id in sourceCaches) {
+            const sourceCache = sourceCaches[id];
+            if (sourceCache.used) {
+                const source = sourceCache.getSource();
+                if (source.attribution && attributions.indexOf(source.attribution) < 0) {
+                    attributions.push(source.attribution);
+                }
+            }
+        }
+
+        // remove any entries that are substrings of another entry.
+        // first sort by length so that substrings come first
+        attributions.sort((a, b) => a.length - b.length);
+        attributions = attributions.filter((attrib, i) => {
+            for (let j = i + 1; j < attributions.length; j++) {
+                if (attributions[j].indexOf(attrib) >= 0) { return false; }
+            }
+            return true;
+        });
+
+        // check if attribution string is different to minimize DOM changes
+        const attribHTML = attributions.join(' | ');
+        if (attribHTML === this._attribHTML) return;
+
+        this._attribHTML = attribHTML;
+
+        if (attributions.length) {
+            this._innerContainer.innerHTML = attribHTML;
+            this._container.classList.remove('mapboxgl-attrib-empty');
+        } else {
+            this._container.classList.add('mapboxgl-attrib-empty');
+        }
+        // remove old DOM node from _editLink
+        this._editLink = null;
+    }
+
+    _updateCompact() {
+        if (this._map.getCanvasContainer().offsetWidth <= 640) {
+            this._container.classList.add('mapboxgl-compact');
+        } else {
+            this._container.classList.remove('mapboxgl-compact', 'mapboxgl-compact-show');
+        }
+    }
+
+}
+
+export default AttributionControl;

package/src/ui/control/fullscreen_control.js

@@ -0,0 +1,147 @@
+// @flow
+
+import DOM from '../../util/dom';
+
+import {bindAll, warnOnce} from '../../util/util';
+import window from '../../util/window';
+
+import type Map from '../map';
+
+type Options = {
+    container?: HTMLElement
+};
+
+/**
+ * A `FullscreenControl` control contains a button for toggling the map in and out of fullscreen mode.
+ *
+ * @implements {IControl}
+ * @param {Object} [options]
+ * @param {HTMLElement} [options.container] `container` is the [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen. By default, the map container element will be made full screen.
+ *
+ * @example
+ * map.addControl(new mapboxgl.FullscreenControl({container: document.querySelector('body')}));
+ * @see [View a fullscreen map](https://www.mapbox.com/mapbox-gl-js/example/fullscreen/)
+ */
+
+class FullscreenControl {
+    _map: Map;
+    _controlContainer: HTMLElement;
+    _fullscreen: boolean;
+    _fullscreenchange: string;
+    _fullscreenButton: HTMLElement;
+    _container: HTMLElement;
+
+    constructor(options: Options) {
+        this._fullscreen = false;
+        if (options && options.container) {
+            if (options.container instanceof window.HTMLElement) {
+                this._container = options.container;
+            } else {
+                warnOnce('Full screen control \'container\' must be a DOM element.');
+            }
+        }
+        bindAll([
+            '_onClickFullscreen',
+            '_changeIcon'
+        ], this);
+        if ('onfullscreenchange' in window.document) {
+            this._fullscreenchange = 'fullscreenchange';
+        } else if ('onmozfullscreenchange' in window.document) {
+            this._fullscreenchange = 'mozfullscreenchange';
+        } else if ('onwebkitfullscreenchange' in window.document) {
+            this._fullscreenchange = 'webkitfullscreenchange';
+        } else if ('onmsfullscreenchange' in window.document) {
+            this._fullscreenchange = 'MSFullscreenChange';
+        }
+    }
+
+    onAdd(map: Map) {
+        this._map = map;
+        if (!this._container) this._container = this._map.getContainer();
+        this._controlContainer = DOM.create('div', `mapboxgl-ctrl mapboxgl-ctrl-group`);
+        if (this._checkFullscreenSupport()) {
+            this._setupUI();
+        } else {
+            this._controlContainer.style.display = 'none';
+            warnOnce('This device does not support fullscreen mode.');
+        }
+        return this._controlContainer;
+    }
+
+    onRemove() {
+        DOM.remove(this._controlContainer);
+        this._map = (null: any);
+        window.document.removeEventListener(this._fullscreenchange, this._changeIcon);
+    }
+
+    _checkFullscreenSupport() {
+        return !!(
+            window.document.fullscreenEnabled ||
+            (window.document: any).mozFullScreenEnabled ||
+            (window.document: any).msFullscreenEnabled ||
+            (window.document: any).webkitFullscreenEnabled
+        );
+    }
+
+    _setupUI() {
+        const button = this._fullscreenButton = DOM.create('button', (`mapboxgl-ctrl-fullscreen`), this._controlContainer);
+        DOM.create('span', `mapboxgl-ctrl-icon`, button).setAttribute('aria-hidden', true);
+        button.type = 'button';
+        this._updateTitle();
+        this._fullscreenButton.addEventListener('click', this._onClickFullscreen);
+        window.document.addEventListener(this._fullscreenchange, this._changeIcon);
+    }
+
+    _updateTitle() {
+        const title = this._getTitle();
+        this._fullscreenButton.setAttribute("aria-label", title);
+        this._fullscreenButton.title = title;
+    }
+
+    _getTitle() {
+        return this._map._getUIString(this._isFullscreen() ? 'FullscreenControl.Exit' : 'FullscreenControl.Enter');
+    }
+
+    _isFullscreen() {
+        return this._fullscreen;
+    }
+
+    _changeIcon() {
+        const fullscreenElement =
+            window.document.fullscreenElement ||
+            (window.document: any).mozFullScreenElement ||
+            (window.document: any).webkitFullscreenElement ||
+            (window.document: any).msFullscreenElement;
+
+        if ((fullscreenElement === this._container) !== this._fullscreen) {
+            this._fullscreen = !this._fullscreen;
+            this._fullscreenButton.classList.toggle(`mapboxgl-ctrl-shrink`);
+            this._fullscreenButton.classList.toggle(`mapboxgl-ctrl-fullscreen`);
+            this._updateTitle();
+        }
+    }
+
+    _onClickFullscreen() {
+        if (this._isFullscreen()) {
+            if (window.document.exitFullscreen) {
+                (window.document: any).exitFullscreen();
+            } else if (window.document.mozCancelFullScreen) {
+                (window.document: any).mozCancelFullScreen();
+            } else if (window.document.msExitFullscreen) {
+                (window.document: any).msExitFullscreen();
+            } else if (window.document.webkitCancelFullScreen) {
+                (window.document: any).webkitCancelFullScreen();
+            }
+        } else if (this._container.requestFullscreen) {
+            this._container.requestFullscreen();
+        } else if ((this._container: any).mozRequestFullScreen) {
+            (this._container: any).mozRequestFullScreen();
+        } else if ((this._container: any).msRequestFullscreen) {
+            (this._container: any).msRequestFullscreen();
+        } else if ((this._container: any).webkitRequestFullscreen) {
+            (this._container: any).webkitRequestFullscreen();
+        }
+    }
+}
+
+export default FullscreenControl;