Skip to content

Landing page overhaul, improve accessibility, and refactor codebase #245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brunob merged 9 commits into from
Jan 7, 2026
Merged

Landing page overhaul, improve accessibility, and refactor codebase #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4ae754d
refactor: replace DomUtil with native DOM methods for element creation
KristjanESPERANTO Jan 5, 2026
4b83cb5
fix: update TypeScript definitions to reflect async toggleFullScreen
KristjanESPERANTO Jan 5, 2026
55dd269
refactor: remove redundant container listeners for fullscreenchange
KristjanESPERANTO Jan 5, 2026
0648d92
chore: make footer stick to bottom on large screens
KristjanESPERANTO Jan 5, 2026
70a3b8a
feat(a11y): add aria-pressed state to fullscreen button
KristjanESPERANTO Jan 5, 2026
4a917a8
chore: replace dark tile provider with CSS filter approach
KristjanESPERANTO Jan 5, 2026
6cea7ae
chore: update devDependencies
KristjanESPERANTO Jan 5, 2026
bbe92a4
chore: remove periods from name
KristjanESPERANTO Jan 5, 2026
0ba859e
chore: move links from footer to header
KristjanESPERANTO Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Leaflet.Control.FullScreen
# Leaflet Control FullScreen

## What ?

**Leaflet.Control.FullScreen** is a simple plugin for [Leaflet](https://leafletjs.com/) that adds a fullscreen button to your maps using the Fullscreen API.
**Leaflet Control FullScreen** is a simple plugin for [Leaflet](https://leafletjs.com/) that adds a fullscreen button to your maps using the Fullscreen API.

All major browsers support the Fullscreen API. For details about which browsers support this API, see the [CanIuse](https://caniuse.com/fullscreen) website.

Expand Down
31 changes: 6 additions & 25 deletions demo/demo-darkmode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Leaflet.Control.FullScreen Demo (Dark Mode)</title>
<title>Leaflet Control FullScreen Demo (Dark Mode)</title>
<meta charset="utf-8" />
<link
rel="icon"
Expand Down Expand Up @@ -71,22 +71,17 @@ <h3>Theming & Dark Mode Demo</h3>
import { TileLayer, LatLng, Map } from 'leaflet';
import { FullScreen } from '../dist/Control.FullScreen.js';

// Create tile layers for light and dark mode
const lightTiles = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
// Create a single tile layer
const tiles = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

const darkTiles = new TileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd'
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
className: 'map-tiles'
});

const latlng = new LatLng(48.5, -4.5);

const map = new Map('map', {
layers: [darkTiles],
layers: [tiles],
center: latlng,
zoom: 5
});
Expand Down Expand Up @@ -123,25 +118,11 @@ <h3>Theming & Dark Mode Demo</h3>
return prefersDark ? 'dark' : 'light';
}

function updateMapTheme() {
if (getCurrentTheme() === 'dark') {
map.removeLayer(lightTiles);
map.addLayer(darkTiles);
} else {
map.removeLayer(darkTiles);
map.addLayer(lightTiles);
}
}

// Set initial map layer
updateMapTheme();

btn?.addEventListener('click', () => {
const currentTheme = getCurrentTheme();
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
root.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
updateMapTheme();
});
</script>
</body>
Expand Down
9 changes: 7 additions & 2 deletions demo/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,15 +295,20 @@ button.demo-button:hover {
}

.leaflet-control-attribution {
background: var(--leaflet-attribution-bg);
color: var(--leaflet-attribution-color);
background: var(--leaflet-attribution-bg) !important;
color: var(--leaflet-attribution-color) !important;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
color: var(--leaflet-bar-color);
}

/* Tile filter for dark mode */
:root[data-theme='dark'] .map-tiles {
filter: invert(1) hue-rotate(180deg) brightness(0.95) saturate(0.85);
}

/* Helper classes for inline styles replacement */
.api-section {
margin-top: 20px;
Expand Down
2 changes: 1 addition & 1 deletion demo/demo.esm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Leaflet.Control.FullScreen Demo (ESM)</title>
<title>Leaflet Control FullScreen Demo (ESM)</title>
<meta charset="utf-8" />
<link
rel="icon"
Expand Down
2 changes: 1 addition & 1 deletion demo/demo.fullscreenElement.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Leaflet.Control.FullScreen Demo (fullscreenElement)</title>
<title>Leaflet Control FullScreen Demo (fullscreenElement)</title>
<meta charset="utf-8" />
<link
rel="icon"
Expand Down
2 changes: 1 addition & 1 deletion demo/demo.umd.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Leaflet.Control.FullScreen Demo (Script Tags)</title>
<title>Leaflet Control FullScreen Demo (Script Tags)</title>
<meta charset="utf-8" />
<link
rel="icon"
Expand Down
18 changes: 7 additions & 11 deletions dist/Control.FullScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* https://github.com/brunob/leaflet.fullscreen
*/
/*! GENERATED FILE - DO NOT EDIT DIRECTLY. Edit files in src/ and run 'npm run build' */
import { Control, DomUtil, DomEvent, Map } from 'leaflet';
import { Control, DomEvent, Map } from 'leaflet';

if (typeof document === 'undefined') {
console.warn('"window.document" is undefined; leaflet.fullscreen requires this object to access the DOM');
Expand Down Expand Up @@ -144,7 +144,8 @@ const FullScreen = Control.extend({
if (map.zoomControl && !this.options.forceSeparateButton) {
container = map.zoomControl._container;
} else {
container = DomUtil.create('div', 'leaflet-bar');
container = document.createElement('div');
container.className = 'leaflet-bar';
}

if (this.options.content) {
Expand All @@ -167,18 +168,16 @@ const FullScreen = Control.extend({
.off(this.link, 'click', this.toggleFullScreen, this);

if (this._screenfull.isEnabled) {
DomEvent
.off(this._container, this._screenfull.nativeAPI.fullscreenchange, DomEvent.stop)
.off(this._container, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, this);

DomEvent
.off(document, this._screenfull.nativeAPI.fullscreenchange, DomEvent.stop)
.off(document, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, this);
}
},

_createButton(title, className, content, container, fn, context) {
this.link = DomUtil.create('a', className, container);
this.link = document.createElement('a');
this.link.className = className;
container.appendChild(this.link);
this.link.href = '#';
this.link.title = title;
this.link.innerHTML = content;
Expand All @@ -193,10 +192,6 @@ const FullScreen = Control.extend({
.on(this.link, 'click', fn, context);

if (this._screenfull.isEnabled) {
DomEvent
.on(container, this._screenfull.nativeAPI.fullscreenchange, DomEvent.stop)
.on(container, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, context);

DomEvent
.on(document, this._screenfull.nativeAPI.fullscreenchange, DomEvent.stop)
.on(document, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, context);
Expand Down Expand Up @@ -254,6 +249,7 @@ const FullScreen = Control.extend({
// Update Title & Aria Label
this.link.title = isFullscreen ? titleCancel : title;
this.link.setAttribute('aria-label', this.link.title);
this.link.setAttribute('aria-pressed', isFullscreen.toString());

// Update Icon Class
this.link.classList.toggle('leaflet-fullscreen-on', isFullscreen);
Expand Down
16 changes: 6 additions & 10 deletions dist/Control.FullScreen.umd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,8 @@
if (map.zoomControl && !this.options.forceSeparateButton) {
container = map.zoomControl._container;
} else {
container = leaflet.DomUtil.create('div', 'leaflet-bar');
container = document.createElement('div');
container.className = 'leaflet-bar';
}

if (this.options.content) {
Expand All @@ -171,18 +172,16 @@
.off(this.link, 'click', this.toggleFullScreen, this);

if (this._screenfull.isEnabled) {
leaflet.DomEvent
.off(this._container, this._screenfull.nativeAPI.fullscreenchange, leaflet.DomEvent.stop)
.off(this._container, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, this);

leaflet.DomEvent
.off(document, this._screenfull.nativeAPI.fullscreenchange, leaflet.DomEvent.stop)
.off(document, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, this);
}
},

_createButton(title, className, content, container, fn, context) {
this.link = leaflet.DomUtil.create('a', className, container);
this.link = document.createElement('a');
this.link.className = className;
container.appendChild(this.link);
this.link.href = '#';
this.link.title = title;
this.link.innerHTML = content;
Expand All @@ -197,10 +196,6 @@
.on(this.link, 'click', fn, context);

if (this._screenfull.isEnabled) {
leaflet.DomEvent
.on(container, this._screenfull.nativeAPI.fullscreenchange, leaflet.DomEvent.stop)
.on(container, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, context);

leaflet.DomEvent
.on(document, this._screenfull.nativeAPI.fullscreenchange, leaflet.DomEvent.stop)
.on(document, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, context);
Expand Down Expand Up @@ -258,6 +253,7 @@
// Update Title & Aria Label
this.link.title = isFullscreen ? titleCancel : title;
this.link.setAttribute('aria-label', this.link.title);
this.link.setAttribute('aria-pressed', isFullscreen.toString());

// Update Icon Class
this.link.classList.toggle('leaflet-fullscreen-on', isFullscreen);
Expand Down
Loading