@scoova/mgl 1.0.0

package/src/ui/control/attribution_control.ts

@@ -0,0 +1,209 @@
+import {DOM} from '../../util/dom';
+
+import type {Map} from '../map';
+import type {ControlPosition, IControl} from './control';
+import type {MapDataEvent} from '../events';
+import type {StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
+/**
+ * The {@link AttributionControl} options object
+ */
+export type AttributionControlOptions = {
+    /**
+     * If `true`, the attribution control will always collapse when moving the map. If `false`,
+     * force the expanded attribution control. The default is a responsive attribution that collapses when the user moves the map on maps 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 and when the automatic compact resizing for default settings are not sufficient.**
+     */
+    compact?: boolean;
+    /**
+     * Attributions to show in addition to any other attributions.
+     */
+    customAttribution?: string | Array<string>;
+};
+
+export const defaultAttributionControlOptions: AttributionControlOptions = {
+    compact: true,
+    customAttribution: '<a href="https://maplibre.org/" target="_blank">MapLibre</a>'
+};
+
+/**
+ * An `AttributionControl` control presents the map's attribution information. By default, the attribution control is expanded (regardless of map width).
+ * @group Markers and Controls
+ * @example
+ * ```ts
+ * let map = new Map({attributionControl: false})
+ *     .addControl(new AttributionControl({
+ *         compact: true
+ *     }));
+ * ```
+ */
+export class AttributionControl implements IControl {
+    options: AttributionControlOptions;
+    _map: Map;
+    _compact: boolean | undefined;
+    _container: HTMLElement;
+    _innerContainer: HTMLElement;
+    _compactButton: HTMLElement;
+    _editLink: HTMLAnchorElement;
+    _attribHTML: string;
+    styleId: string;
+    styleOwner: string;
+
+    /**
+     * @param options - the attribution options
+     */
+    constructor(options: AttributionControlOptions = defaultAttributionControlOptions) {
+        this.options = options;
+    }
+
+    getDefaultPosition(): ControlPosition {
+        return 'bottom-right';
+    }
+
+    /** {@inheritDoc IControl.onAdd} */
+    onAdd(map: Map) {
+        this._map = map;
+        this._compact = this.options.compact;
+        this._container = DOM.create('details', 'maplibregl-ctrl maplibregl-ctrl-attrib');
+        this._compactButton = DOM.create('summary', 'maplibregl-ctrl-attrib-button', this._container);
+        this._compactButton.addEventListener('click', this._toggleAttribution);
+        this._setElementTitle(this._compactButton, 'ToggleAttribution');
+        this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner', this._container);
+
+        this._updateAttributions();
+        this._updateCompact();
+
+        this._map.on('styledata', this._updateData);
+        this._map.on('sourcedata', this._updateData);
+        this._map.on('terrain', this._updateData);
+        this._map.on('resize', this._updateCompact);
+        this._map.on('drag', this._updateCompactMinimize);
+
+        return this._container;
+    }
+
+    /** {@inheritDoc IControl.onRemove} */
+    onRemove() {
+        DOM.remove(this._container);
+
+        this._map.off('styledata', this._updateData);
+        this._map.off('sourcedata', this._updateData);
+        this._map.off('terrain', this._updateData);
+        this._map.off('resize', this._updateCompact);
+        this._map.off('drag', this._updateCompactMinimize);
+
+        this._map = undefined;
+        this._compact = undefined;
+        this._attribHTML = undefined;
+    }
+
+    _setElementTitle(element: HTMLElement, title: 'ToggleAttribution' | 'MapFeedback') {
+        const str = this._map._getUIString(`AttributionControl.${title}`);
+        element.title = str;
+        element.setAttribute('aria-label', str);
+    }
+
+    _toggleAttribution = () => {
+        if (this._container.classList.contains('maplibregl-compact')) {
+            if (this._container.classList.contains('maplibregl-compact-show')) {
+                this._container.setAttribute('open', '');
+                this._container.classList.remove('maplibregl-compact-show');
+            } else {
+                this._container.classList.add('maplibregl-compact-show');
+                this._container.removeAttribute('open');
+            }
+        }
+    };
+
+    _updateData = (e: MapDataEvent) => {
+        if (e && (e.sourceDataType === 'metadata' || e.sourceDataType === 'visibility' || e.dataType === 'style' || e.type === 'terrain')) {
+            this._updateAttributions();
+        }
+    };
+
+    _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 = this._map.style.stylesheet as StyleSpecification & { owner: string; id: string };
+            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 || sourceCache.usedForTerrain) {
+                const source = sourceCache.getSource();
+                if (source.attribution && attributions.indexOf(source.attribution) < 0) {
+                    attributions.push(source.attribution);
+                }
+            }
+        }
+
+        // remove any entries that are whitespace
+        attributions = attributions.filter(e => String(e).trim());
+
+        // 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('maplibregl-attrib-empty');
+        } else {
+            this._container.classList.add('maplibregl-attrib-empty');
+        }
+        this._updateCompact();
+        // remove old DOM node from _editLink
+        this._editLink = null;
+    }
+
+    _updateCompact = () => {
+        if (this._map.getCanvasContainer().offsetWidth <= 640 || this._compact) {
+            if (this._compact === false) {
+                this._container.setAttribute('open', '');
+            } else if (!this._container.classList.contains('maplibregl-compact') && !this._container.classList.contains('maplibregl-attrib-empty')) {
+                this._container.setAttribute('open', '');
+                this._container.classList.add('maplibregl-compact', 'maplibregl-compact-show');
+            }
+        } else {
+            this._container.setAttribute('open', '');
+            if (this._container.classList.contains('maplibregl-compact')) {
+                this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show');
+            }
+        }
+    };
+
+    _updateCompactMinimize = () => {
+        if (this._container.classList.contains('maplibregl-compact')) {
+            if (this._container.classList.contains('maplibregl-compact-show')) {
+                this._container.classList.remove('maplibregl-compact-show');
+            }
+        }
+    };
+}

package/src/ui/control/control.ts

@@ -0,0 +1,67 @@
+import type {Map} from '../map';
+
+/**
+ * A position defintion for the control to be placed, can be in one of the corners of the map.
+ * When two or more controls are places in the same location they are stacked toward the center of the map.
+ */
+export type ControlPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+/**
+ * Interface for interactive controls added to the map. This is a
+ * specification for implementers to model: it is not
+ * an exported method or class.
+ *
+ * Controls must implement `onAdd` and `onRemove`, and must own an
+ * element, which is often a `div` element. To use MapLibre GL JS's
+ * default control styling, add the `maplibregl-ctrl` class to your control's
+ * node.
+ *
+ * @example
+ * ```ts
+ * class HelloWorldControl: IControl {
+ *     onAdd(map) {
+ *         this._map = map;
+ *         this._container = document.createElement('div');
+ *         this._container.className = 'maplibregl-ctrl';
+ *         this._container.textContent = 'Hello, world';
+ *         return this._container;
+ *     }
+ *
+ *     onRemove() {
+ *         this._container.parentNode.removeChild(this._container);
+ *         this._map = undefined;
+ *     }
+ * }
+ * ```
+ */
+export interface IControl {
+    /**
+     * Register a control on the map and give it a chance to register event listeners
+     * and resources. This method is called by {@link Map#addControl}
+     * internally.
+     *
+     * @param map - the Map this control will be added to
+     * @returns The control's container element. This should
+     * be created by the control and returned by onAdd without being attached
+     * to the DOM: the map will insert the control's element into the DOM
+     * as necessary.
+     */
+    onAdd(map: Map): HTMLElement;
+    /**
+     * Unregister a control on the map and give it a chance to detach event listeners
+     * and resources. This method is called by {@link Map#removeControl}
+     * internally.
+     *
+     * @param map - the Map this control will be removed from
+     */
+    onRemove(map: Map): void;
+    /**
+     * Optionally provide a default position for this control. If this method
+     * is implemented and {@link Map#addControl} is called without the `position`
+     * parameter, the value returned by getDefaultPosition will be used as the
+     * control's position.
+     *
+     * @returns a control position, one of the values valid in addControl.
+     */
+    readonly getDefaultPosition?: () => ControlPosition;
+}

package/src/ui/control/fullscreen_control.test.ts

@@ -0,0 +1,114 @@
+import {createMap, beforeMapTest} from '../../util/test/util';
+import {FullscreenControl} from './fullscreen_control';
+
+beforeEach(() => {
+    beforeMapTest();
+});
+
+describe('FullscreenControl', () => {
+    test('renders control', () => {
+        Object.defineProperty(window.document, 'fullscreenEnabled', {
+            value: true,
+            writable: true,
+        });
+        const map = createMap(undefined, undefined);
+        const fullscreen = new FullscreenControl({});
+        map.addControl(fullscreen);
+
+        expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-fullscreen')).toHaveLength(1);
+    });
+
+    test('makes optional container element full screen', () => {
+        Object.defineProperty(window.document, 'fullscreenEnabled', {
+            value: true,
+            writable: true,
+        });
+
+        const map = createMap(undefined, undefined);
+        const container = window.document.querySelector('body')!;
+        const fullscreen = new FullscreenControl({container});
+        map.addControl(fullscreen);
+        const control = map._controls.find((ctrl) => {
+            return Object.prototype.hasOwnProperty.call(ctrl, '_fullscreen');
+        }) as FullscreenControl;
+        control._onClickFullscreen();
+
+        expect(control._container.tagName).toBe('BODY');
+    });
+
+    test('uses pseudo fullscreen when fullscreen is not supported', () => {
+        const map = createMap(undefined, undefined);
+        const mapContainer = map.getContainer();
+
+        const fullscreen = new FullscreenControl({});
+        map.addControl(fullscreen);
+        const control = map._controls.find((ctrl) => {
+            return Object.prototype.hasOwnProperty.call(ctrl, '_fullscreen');
+        }) as FullscreenControl;
+
+        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        control._onClickFullscreen();
+        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(true);
+        control._onClickFullscreen();
+        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+    });
+
+    test('start and end events fire for fullscreen button clicks', () => {
+        const map = createMap(undefined, undefined);
+        const fullscreen = new FullscreenControl({});
+
+        const fullscreenstart = jest.fn();
+        const fullscreenend   = jest.fn();
+
+        fullscreen.on('fullscreenstart', fullscreenstart);
+        fullscreen.on('fullscreenend', fullscreenend);
+
+        map.addControl(fullscreen);
+
+        const click = new window.Event('click');
+
+        // Simulate a click to the fullscreen button
+        fullscreen._fullscreenButton.dispatchEvent(click);
+        expect(fullscreenstart).toHaveBeenCalled();
+        expect(fullscreenend).not.toHaveBeenCalled();
+
+        // Second simulated click would exit fullscreen mode
+        fullscreen._fullscreenButton.dispatchEvent(click);
+        expect(fullscreenend).toHaveBeenCalled();
+    });
+
+    test('disables cooperative gestures when fullscreen becomes active', () => {
+        const cooperativeGestures = true;
+        const map = createMap({cooperativeGestures});
+        const fullscreen = new FullscreenControl({});
+
+        map.addControl(fullscreen);
+
+        const click = new window.Event('click');
+
+        // Simulate a click to the fullscreen button
+        fullscreen._fullscreenButton.dispatchEvent(click);
+        expect(map.cooperativeGestures.isEnabled()).toBeFalsy();
+
+        // Second simulated click would exit fullscreen mode
+        fullscreen._fullscreenButton.dispatchEvent(click);
+        expect(map.cooperativeGestures.isEnabled()).toBeTruthy();
+    });
+
+    test('if never set, cooperative gestures remain disabled when fullscreen exits', () => {
+        const map = createMap({cooperativeGestures: false});
+        const fullscreen = new FullscreenControl({});
+
+        map.addControl(fullscreen);
+
+        const click = new window.Event('click');
+
+        // Simulate a click to the fullscreen button
+        fullscreen._fullscreenButton.dispatchEvent(click);
+        expect(map.cooperativeGestures.isEnabled()).toBeFalsy();
+
+        // Second simulated click would exit fullscreen mode
+        fullscreen._fullscreenButton.dispatchEvent(click);
+        expect(map.cooperativeGestures.isEnabled()).toBeFalsy();
+    });
+});

package/src/ui/control/fullscreen_control.ts

@@ -0,0 +1,189 @@
+import {DOM} from '../../util/dom';
+
+import {warnOnce} from '../../util/util';
+
+import {Event, Evented} from '../../util/evented';
+import type {Map} from '../map';
+import type {IControl} from './control';
+
+/**
+ * The {@link FullscreenControl} options object
+ */
+type FullscreenControlOptions = {
+    /**
+     * `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.
+     */
+    container?: HTMLElement;
+};
+
+/**
+ * A `FullscreenControl` control contains a button for toggling the map in and out of fullscreen mode.
+ * When [requestFullscreen](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen) is not supported, fullscreen is handled via CSS properties.
+ * The map's `cooperativeGestures` option is temporarily disabled while the map
+ * is in fullscreen mode, and is restored when the map exist fullscreen mode.
+ *
+ * @group Markers and Controls
+ * @param options - the full screen control options
+ *
+ * @example
+ * ```ts
+ * map.addControl(new FullscreenControl({container: document.querySelector('body')}));
+ * ```
+ * @see [View a fullscreen map](https://maplibre.org/maplibre-gl-js/docs/examples/fullscreen/)
+ *
+ * ## Events
+ *
+ * **Event** `fullscreenstart` of type {@link Event} will be fired when fullscreen mode has started.
+ *
+ * **Event** `fullscreenend` of type {@link Event} will be fired when fullscreen mode has ended.
+ */
+export class FullscreenControl extends Evented implements IControl {
+    _map: Map;
+    _controlContainer: HTMLElement;
+    _fullscreen: boolean;
+    _fullscreenchange: string;
+    _fullscreenButton: HTMLButtonElement;
+    _container: HTMLElement;
+    _prevCooperativeGesturesEnabled: boolean;
+
+    /**
+     * @param options - the control's options
+     */
+    constructor(options: FullscreenControlOptions = {}) {
+        super();
+        this._fullscreen = false;
+
+        if (options && options.container) {
+            if (options.container instanceof HTMLElement) {
+                this._container = options.container;
+            } else {
+                warnOnce('Full screen control \'container\' must be a DOM element.');
+            }
+        }
+
+        if ('onfullscreenchange' in document) {
+            this._fullscreenchange = 'fullscreenchange';
+        } else if ('onmozfullscreenchange' in document) {
+            this._fullscreenchange = 'mozfullscreenchange';
+        } else if ('onwebkitfullscreenchange' in document) {
+            this._fullscreenchange = 'webkitfullscreenchange';
+        } else if ('onmsfullscreenchange' in document) {
+            this._fullscreenchange = 'MSFullscreenChange';
+        }
+    }
+
+    /** {@inheritDoc IControl.onAdd} */
+    onAdd(map: Map): HTMLElement {
+        this._map = map;
+        if (!this._container) this._container = this._map.getContainer();
+        this._controlContainer = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group');
+        this._setupUI();
+        return this._controlContainer;
+    }
+
+    /** {@inheritDoc IControl.onRemove} */
+    onRemove() {
+        DOM.remove(this._controlContainer);
+        this._map = null;
+        window.document.removeEventListener(this._fullscreenchange, this._onFullscreenChange);
+    }
+
+    _setupUI() {
+        const button = this._fullscreenButton = DOM.create('button', (('maplibregl-ctrl-fullscreen')), this._controlContainer);
+        DOM.create('span', 'maplibregl-ctrl-icon', button).setAttribute('aria-hidden', 'true');
+        button.type = 'button';
+        this._updateTitle();
+        this._fullscreenButton.addEventListener('click', this._onClickFullscreen);
+        window.document.addEventListener(this._fullscreenchange, this._onFullscreenChange);
+    }
+
+    _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;
+    }
+
+    _onFullscreenChange = () => {
+        let fullscreenElement =
+            window.document.fullscreenElement ||
+            (window.document as any).mozFullScreenElement ||
+            (window.document as any).webkitFullscreenElement ||
+            (window.document as any).msFullscreenElement;
+
+        while (fullscreenElement?.shadowRoot?.fullscreenElement) {
+            fullscreenElement = fullscreenElement.shadowRoot.fullscreenElement;
+        }
+
+        if ((fullscreenElement === this._container) !== this._fullscreen) {
+            this._handleFullscreenChange();
+        }
+    };
+
+    _handleFullscreenChange() {
+        this._fullscreen = !this._fullscreen;
+        this._fullscreenButton.classList.toggle('maplibregl-ctrl-shrink');
+        this._fullscreenButton.classList.toggle('maplibregl-ctrl-fullscreen');
+        this._updateTitle();
+
+        if (this._fullscreen) {
+            this.fire(new Event('fullscreenstart'));
+            this._prevCooperativeGesturesEnabled = this._map.cooperativeGestures.isEnabled();
+            this._map.cooperativeGestures.disable();
+        } else {
+            this.fire(new Event('fullscreenend'));
+            if (this._prevCooperativeGesturesEnabled) {
+                this._map.cooperativeGestures.enable();
+            }
+        }
+    }
+
+    _onClickFullscreen = () => {
+        if (this._isFullscreen()) {
+            this._exitFullscreen();
+        } else {
+            this._requestFullscreen();
+        }
+    };
+
+    _exitFullscreen() {
+        if (window.document.exitFullscreen) {
+            (window.document as any).exitFullscreen();
+        } else if ((window.document as any).mozCancelFullScreen) {
+            (window.document as any).mozCancelFullScreen();
+        } else if ((window.document as any).msExitFullscreen) {
+            (window.document as any).msExitFullscreen();
+        } else if ((window.document as any).webkitCancelFullScreen) {
+            (window.document as any).webkitCancelFullScreen();
+        } else {
+            this._togglePseudoFullScreen();
+        }
+    }
+
+    _requestFullscreen() {
+        if (this._container.requestFullscreen) {
+            this._container.requestFullscreen();
+        } else if ((this._container as any).mozRequestFullScreen) {
+            (this._container as any).mozRequestFullScreen();
+        } else if ((this._container as any).msRequestFullscreen) {
+            (this._container as any).msRequestFullscreen();
+        } else if ((this._container as any).webkitRequestFullscreen) {
+            (this._container as any).webkitRequestFullscreen();
+        } else {
+            this._togglePseudoFullScreen();
+        }
+    }
+
+    _togglePseudoFullScreen() {
+        this._container.classList.toggle('maplibregl-pseudo-fullscreen');
+        this._handleFullscreenChange();
+        this._map.resize();
+    }
+}