Skip to content

Commit 2288ad5

Browse files
KristjanESPERANTOKristjanESPERANTO
committed
feat: restructure project with ES module build system
BREAKING CHANGE: Source files moved to src/ directory, built files in dist/ - Restructure project: source in src/, distribution files in dist/ - Add Rollup build system to generate ES module and IIFE distributions - Use named imports from Leaflet (Control, DomUtil, DomEvent, Map) - Configure dual package exports in package.json (ESM + IIFE) - Add Leaflet as peerDependency (^1.7.0 || >=2.0.0-alpha.1) - Add demo pages for both ESM and IIFE usage patterns with Import Maps - Create landing page with feature overview and demo links - Update README with build command documentation
1 parent e0a34ee commit 2288ad5

16 files changed

+1666
-102
lines changed

‎README.md‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,19 +67,49 @@ map.toggleFullscreen();
6767
- Downloads: <https://github.com/brunob/leaflet.fullscreen/releases>
6868
- Demo: <https://brunob.github.io/leaflet.fullscreen/>
6969

70-
## Use as ESM module
70+
## Use as ES module
7171

72-
To use this plugin in the code of a project (based on e.g. React or Angular) follow these steps:
72+
To use this plugin with a bundler (Webpack, Vite, etc.):
7373

74-
1. install leaflet.fullscreen with your package manager (e.g. `npm install leaflet.fullscreen`).
74+
1. Install leaflet.fullscreen with your package manager:
7575

76-
2. Update your code
76+
```bash
77+
npm install leaflet.fullscreen
78+
```
79+
80+
2. Import the module in your code:
81+
82+
```js
83+
import { FullScreen } from 'leaflet.fullscreen';
84+
85+
// Add control to your map
86+
map.addControl(
87+
new FullScreen({
88+
position: 'topleft'
89+
})
90+
);
91+
```
92+
93+
3. Import the CSS (if your bundler supports it):
94+
95+
```js
96+
import 'leaflet.fullscreen/dist/Control.FullScreen.css';
97+
```
98+
99+
Or add it manually to your HTML:
100+
101+
```html
102+
<link rel="stylesheet" href="node_modules/leaflet.fullscreen/dist/Control.FullScreen.css" />
103+
```
104+
105+
Alternatively, you can use the classic approach with side effects:
77106

78107
```js
79108
import L from 'leaflet';
80109
import 'leaflet.fullscreen';
110+
import 'leaflet.fullscreen/dist/Control.FullScreen.css';
81111

82-
const let map = new L.Map('map', {
112+
const map = new L.Map('map', {
83113
fullscreenControl: true,
84114
fullscreenControlOptions: {
85115
position: 'topleft'
@@ -124,6 +154,7 @@ BREAKING CHANGE: <description of what is broken by this commit>
124154

125155
### Developer commands
126156

157+
- `npm run build` - Build the distribution files from source.
127158
- `npm run lint` - Run linting and formatter checks.
128159
- `npm run lint:fix` - Fix linting and formatter issues.
129160

‎commitlint.config.mjs‎ renamed to ‎commitlint.config.js‎

File renamed without changes.

‎demo/demo.css‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
/* Base styles */
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
6+
display: flex;
7+
height: 100vh;
8+
overflow: hidden;
9+
}
10+
11+
#map {
12+
flex: 1;
13+
height: 100vh;
14+
}
15+
16+
#description {
17+
width: 400px;
18+
height: 100vh;
19+
overflow-y: auto;
20+
background: #f8f9fa;
21+
border-left: 1px solid #dee2e6;
22+
padding: 24px;
23+
box-sizing: border-box;
24+
}
25+
26+
.nav-buttons {
27+
display: flex;
28+
gap: 8px;
29+
margin-bottom: 20px;
30+
flex-wrap: wrap;
31+
}
32+
33+
.back-button,
34+
.view-source-button {
35+
display: inline-block;
36+
padding: 8px 16px;
37+
background: #007bff;
38+
color: white;
39+
text-decoration: none;
40+
border-radius: 4px;
41+
font-size: 14px;
42+
transition: background-color 0.2s;
43+
border: none;
44+
cursor: pointer;
45+
}
46+
47+
.back-button:hover,
48+
.view-source-button:hover {
49+
background: #0056b3;
50+
}
51+
52+
.description-content {
53+
margin-top: 8px;
54+
}
55+
56+
h3 {
57+
margin: 0 0 16px;
58+
font-size: 20px;
59+
color: #212529;
60+
}
61+
62+
p {
63+
margin: 12px 0;
64+
font-size: 14px;
65+
line-height: 1.6;
66+
color: #495057;
67+
}
68+
69+
ul {
70+
margin: 12px 0;
71+
padding-left: 24px;
72+
font-size: 14px;
73+
line-height: 1.6;
74+
color: #495057;
75+
}
76+
77+
li {
78+
margin: 6px 0;
79+
}
80+
81+
code {
82+
background: #e9ecef;
83+
padding: 2px 6px;
84+
border-radius: 3px;
85+
font-family: 'Courier New', Monaco, monospace;
86+
font-size: 13px;
87+
color: #d63384;
88+
}
89+
90+
button.demo-button {
91+
width: 100%;
92+
padding: 12px 16px;
93+
background: #28a745;
94+
color: white;
95+
border: none;
96+
border-radius: 4px;
97+
cursor: pointer;
98+
font-size: 15px;
99+
margin-top: 16px;
100+
font-weight: 500;
101+
transition: background-color 0.2s;
102+
}
103+
104+
button.demo-button:hover {
105+
background: #218838;
106+
}
107+
108+
/* Responsive layout */
109+
@media (width <= 900px) {
110+
body {
111+
flex-direction: column;
112+
}
113+
114+
#map {
115+
height: 50vh;
116+
}
117+
118+
#description {
119+
width: 100%;
120+
height: 50vh;
121+
border-left: none;
122+
border-top: 1px solid #dee2e6;
123+
}
124+
}
125+
126+
/* Dark mode support */
127+
@media (prefers-color-scheme: dark) {
128+
:root {
129+
color-scheme: dark;
130+
}
131+
132+
body {
133+
background: #1a1a1a;
134+
}
135+
136+
#description {
137+
background: #2d2d2d;
138+
border-left-color: #404040;
139+
color: #e0e0e0;
140+
}
141+
142+
h3 {
143+
color: #f0f0f0;
144+
}
145+
146+
p,
147+
ul {
148+
color: #c0c0c0;
149+
}
150+
151+
code {
152+
background: #404040;
153+
color: #ff79c6;
154+
}
155+
156+
.description-content {
157+
border-top-color: #404040;
158+
}
159+
160+
@media (width <= 900px) {
161+
#description {
162+
border-top-color: #404040;
163+
}
164+
}
165+
}

‎demo/demo.esm.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Leaflet.Control.FullScreen Demo (ESM)</title>
5+
<link rel="icon" type="image/svg+xml" href="../icon-fullscreen.svg" />
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
9+
<link rel="stylesheet" href="../dist/Control.FullScreen.css" />
10+
<link rel="stylesheet" href="demo.css" />
11+
12+
<script type="importmap">
13+
{
14+
"imports": {
15+
"leaflet": "https://unpkg.com/leaflet@latest/dist/leaflet-src.esm.js"
16+
}
17+
}
18+
</script>
19+
</head>
20+
<body>
21+
<div id="map"></div>
22+
<div id="description">
23+
<div class="nav-buttons">
24+
<a href="../index.html" class="back-button">← Back to Home</a>
25+
<a href="https://github.com/brunob/leaflet.fullscreen/blob/master/demo/demo.esm.html" target="_blank" class="view-source-button">📄 View Source</a>
26+
</div>
27+
28+
<div class="description-content">
29+
<h3>ES Module Demo</h3>
30+
<p>This example demonstrates modern ES6 module usage with Import Maps for native browser support.</p>
31+
32+
<p><strong>Features:</strong></p>
33+
<ul>
34+
<li>Uses native <code>import</code> statements</li>
35+
<li>Import Map resolves bare specifiers</li>
36+
<li>Named exports (<code>FullScreen</code>)</li>
37+
<li>No global namespace pollution</li>
38+
<li>Tree-shakeable for bundlers</li>
39+
</ul>
40+
41+
<p><strong>Try it:</strong> Use the fullscreen button (top-left of the map) to enter/exit fullscreen mode.</p>
42+
43+
<p style="margin-top: 20px; padding-top: 16px; border-top: 1px solid #dee2e6"><strong>Programmatic API:</strong></p>
44+
<p style="font-size: 13px; color: #6c757d">You can also control fullscreen via JavaScript using <code>map.fullscreenControl.toggleFullScreen()</code></p>
45+
<button type="button" class="demo-button" onclick="toggleFullscreen()" style="background: #6c757d; font-size: 13px; padding: 8px 12px">Test API Toggle</button>
46+
</div>
47+
</div>
48+
<script type="module">
49+
import { TileLayer, LatLng, Map } from 'leaflet';
50+
import { FullScreen } from '../dist/Control.FullScreen.js';
51+
52+
const tiles = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
53+
maxZoom: 18,
54+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
55+
});
56+
57+
const latlng = new LatLng(48.5, -4.5);
58+
59+
const map = new Map('map', {
60+
layers: [tiles],
61+
center: latlng,
62+
zoom: 5
63+
});
64+
65+
// Add fullscreen control
66+
map.addControl(
67+
new FullScreen({
68+
position: 'topleft',
69+
title: 'Show me the fullscreen!',
70+
titleCancel: 'Exit fullscreen mode'
71+
})
72+
);
73+
74+
// Detect fullscreen toggling
75+
map.on('enterFullscreen', () => console.log('enterFullscreen'));
76+
map.on('exitFullscreen', () => console.log('exitFullscreen'));
77+
78+
// Programmatic toggle function
79+
window.toggleFullscreen = function () {
80+
map.fullscreenControl.toggleFullScreen();
81+
};
82+
</script>
83+
</body>
84+
</html>

‎demo/demo.iife.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Leaflet.Control.FullScreen Demo (Script Tags)</title>
5+
<link rel="icon" type="image/svg+xml" href="../icon-fullscreen.svg" />
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
9+
<link rel="stylesheet" href="../dist/Control.FullScreen.css" />
10+
<link rel="stylesheet" href="demo.css" />
11+
12+
<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
13+
<script src="../dist/Control.FullScreen.iife.js"></script>
14+
</head>
15+
<body>
16+
<div id="map"></div>
17+
<div id="description">
18+
<div class="nav-buttons">
19+
<a href="../index.html" class="back-button">← Back to Home</a>
20+
<a href="https://github.com/brunob/leaflet.fullscreen/blob/master/demo/demo.umd.html" target="_blank" class="view-source-button">📄 View Source</a>
21+
</div>
22+
23+
<div class="description-content">
24+
<h3>Script Tags Demo</h3>
25+
<p>This example demonstrates traditional script tag usage with the IIFE build for direct browser use.</p>
26+
27+
<p><strong>Features:</strong></p>
28+
<ul>
29+
<li>Uses global <code>L</code> object</li>
30+
<li>Works without build tools</li>
31+
<li>CDN-ready for quick prototyping</li>
32+
<li>Programmatic control API</li>
33+
</ul>
34+
35+
<p><strong>Try it:</strong> Use the fullscreen button (top-left of the map) to enter/exit fullscreen mode.</p>
36+
37+
<p style="margin-top: 20px; padding-top: 16px; border-top: 1px solid #dee2e6"><strong>Programmatic API:</strong></p>
38+
<p style="font-size: 13px; color: #6c757d">You can also control fullscreen via JavaScript using <code>map.fullscreenControl.toggleFullScreen()</code></p>
39+
<button type="button" class="demo-button" onclick="toggleFullscreen();" style="background: #6c757d; font-size: 13px; padding: 8px 12px">Test API Toggle</button>
40+
</div>
41+
</div>
42+
<script>
43+
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
44+
maxZoom: 18,
45+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
46+
});
47+
48+
const map = L.map('map', {
49+
layers: [tiles],
50+
center: new L.LatLng(48.5, -4.5),
51+
zoom: 5
52+
});
53+
54+
// Add fullscreen control
55+
map.addControl(
56+
new L.Control.FullScreen.FullScreen({
57+
position: 'topleft',
58+
title: 'Show me the fullscreen!',
59+
titleCancel: 'Exit fullscreen mode'
60+
})
61+
);
62+
63+
// Detect fullscreen toggling
64+
map.on('enterFullscreen', () => console.log('enterFullscreen'));
65+
map.on('exitFullscreen', () => console.log('exitFullscreen'));
66+
67+
// Programmatic toggle function
68+
function toggleFullscreen() {
69+
map.fullscreenControl.toggleFullScreen();
70+
}
71+
</script>
72+
</body>
73+
</html>

‎Control.FullScreen.css‎ renamed to ‎dist/Control.FullScreen.css‎

File renamed without changes.

0 commit comments

Comments
 (0)