diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 7e965f7..6e2f1ad 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -34,20 +34,6 @@ body: placeholder: 'Instead, the following should happen: ...' validations: required: false - - type: dropdown - id: browser - attributes: - label: Browser - options: - - Firefox - - Chrome - - Opera - - Safari - - Edge - - Other (please specify in additional context) - multiple: true - validations: - required: true - type: input id: version attributes: diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index f4c8b08..07a4c20 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -17,10 +17,10 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@v2 + uses: actions/checkout@v4 - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: '21' diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml index 1e44f9b..aff10a6 100644 --- a/.github/workflows/static.yml +++ b/.github/workflows/static.yml @@ -1,30 +1,21 @@ -# Simple workflow for deploying static content to GitHub Pages -name: Deploy static content to Pages +name: Deploy to Pages on: - # Runs on pushes targeting the default branch - push: - branches: ['release'] - paths: - - 'examples/**' + release: + types: [created] - # Allows you to run this workflow manually from the Actions tab workflow_dispatch: -# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write -# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. -# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: group: 'pages' cancel-in-progress: false jobs: - # Single deploy job since we're just deploying deploy: environment: name: github-pages @@ -33,13 +24,15 @@ jobs: steps: - name: Checkout uses: actions/checkout@v4 + - name: Setup Pages uses: actions/configure-pages@v5 - - name: Upload artifact + + - name: Upload artifacts uses: actions/upload-pages-artifact@v3 with: - # Upload entire repository path: './examples' + - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 diff --git a/.prettierrc.json b/.prettierrc.json index d7a01a6..db516ae 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -3,5 +3,13 @@ "tabWidth": 2, "singleQuote": true, "printWidth": 80, - "trailingComma": "es5" + "trailingComma": "es5", + "overrides": [ + { + "files": "*.html", + "options": { + "printWidth": 120 + } + } + ] } diff --git a/CHANGELOG.md b/CHANGELOG.md index f19a9e5..de47c3d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,19 @@ # Leaflet.SidePanel Changelog +## v1.2.0 (2024-08-29) + +- feat: add typescript support +- feat: new option `onToggle` +- chore: improve docu +- chore: change prettier scope +- chore: ⚠️ BREAKING ⚠️ save map instance in panel
+ To update your code you have remove the map from `toggle`, `open` and `close` calls +- chore: ⚠️ BREAKING ⚠️ rename startTab to defaultTab + ## v1.1.0 (2024-08-25) - feat: trigger toggle, open, close programmatically with js -- feat: Add on tab switch event +- feat: new option `onTabClick` - fix: cannot toggle sidebar when hasTabs is false - chore: Some change in docu, readme, ... diff --git a/README.md b/README.md index 0efd615..2e3c85c 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,11 @@ -![npm version](https://img.shields.io/npm/v/leaflet.sidepanel) -![npm downloads](https://img.shields.io/npm/dt/leaflet.sidepanel) -![npm license](https://img.shields.io/npm/l/leaflet.sidepanel) +[![npm version](https://img.shields.io/npm/v/leaflet.sidepanel)](https://www.npmjs.com/package/leaflet.sidepanel) +[![npm downloads](https://img.shields.io/npm/dt/leaflet.sidepanel)](https://www.npmjs.com/package/leaflet.sidepanel) +[![npm license](https://img.shields.io/npm/l/leaflet.sidepanel)](https://github.com/cyclingbyte/leaflet.sidepanel?tab=MIT-1-ov-file#readme) ![last commit](https://img.shields.io/github/last-commit/cyclingbyte/Leaflet.SidePanel) -![issues open](https://img.shields.io/github/issues/cyclingbyte/Leaflet.SidePanel)![issues closed](https://img.shields.io/github/issues-closed/cyclingbyte/Leaflet.SidePanel?label=) +[![npm dependents](https://img.shields.io/librariesio/dependents/npm/leaflet.sidepanel)](https://www.npmjs.com/package/leaflet.sidepanel?activeTab=dependents) + - + # Leaflet.SidePanel @@ -13,47 +14,51 @@ Slide side panel plugin for [Leaflet](https://leafletjs.com/ 'Leaflet Homepage') This repository is a copy of [maxwell-ilai/Leaflet.SidePanel](https://github.com/maxwell-ilai/Leaflet.SidePanel 'Leaflet.SidePanel by maxwell-ilai') -## Installation +## Demo + +You can find a demo [here](https://cyclingbyte.github.io/Leaflet.SidePanel/ 'Demo for Leaflet.SidePanel') -### NPM +## Prerequirements + +- [leaflet](https://github.com/Leaflet/Leaflet) (v1.0.0 or higher) + (Tested with 1.8.0) + +## Installation ```sh -npm i Leaflet.SidePanel -``` +# NPM +npm i leaflet.sidepanel + +# yarn +yarn add leaflet.sidepanel -### Browser | HTML +# pnpm +pnpm i leaflet.sidepanel +``` -Include the script and css in your html file +Or include the script and css in your html file ```html - + ``` -## Requirements - -- [leaflet](https://github.com/Leaflet/Leaflet) (v1.0.0 or higher) - (Tested with 1.8.0) - ## Options - panelPosition: _'left' (default)_ | 'right' [string] - hasTabs: _true (default)_ | false [boolean] - tabsPosition: _'top' (default)_ | 'right' | 'bottom' | 'left' [string] - darkMode: true | _false (default)_ [boolean] -- pushControls: true | _false (default)_ [boolean] -- startTab: _1 (default)_ [number | string] +- pushControls: true | _false (default)_ [boolean]
+ Shifts the map controls (like zoom) when the side panels open, to keep them visible and usabe +- defaultTab: _1 (default)_ [number | string] -## Demo +## Usage -You can find a demo [here](https://cyclingbyte.github.io/Leaflet.SidePanel/ 'Demo for Leaflet.SidePanel') - -## Example - -**_Javascript_** +### Javascript ```javascript import L from 'leaflet'; @@ -67,12 +72,12 @@ const panelRight = L.control tabsPosition: 'top', pushControls: true, darkMode: true, - startTab: 'tab-5', + defaultTab: 'tab-5', }) .addTo(map); ``` -**_Html_** +### Html ```html
@@ -81,14 +86,8 @@ const panelRight = L.control
``` -## Special Thanks +### Vue + +There is a Vue wrapper available on [vue-leaflet-sidepanel](https://github.com/cyclingbyte/vue-leaflet-sidepanel)
+This wrapper was build for Vue 3, there were no tests with Vue 2 + +## Credits Special thanks to **[maxwell-ilai](https://github.com/maxwell-ilai 'Maxwell Ilai')** for the original project [maxwell-ilai/Leaflet.SidePanel](https://github.com/maxwell-ilai/Leaflet.SidePanel 'Leaflet.SidePanel by maxwell-ilai') ## Visitors -Flag Counter +[![Flag Counter](https://s01.flagcounter.com/count2/Qvel/bg_FFFFFF/txt_000000/border_CCCCCC/columns_6/maxflags_18/viewers_0/labels_0/pageviews_1/flags_0/percent_0/)](https://info.flagcounter.com/Qvel) diff --git a/dev/index.html b/dev/index.html index 69ff6c5..318566b 100644 --- a/dev/index.html +++ b/dev/index.html @@ -5,229 +5,41 @@ + Leaflet - Side Panel plugin - -
-

- Leaflet Sidepanel - - - Github - -

-
-
-
+
-
- +
-
+
-
-
-

Content 1

-

- Nam nec lacinia purus, in accumsan arcu. Aenean at maximus - tortor, eget porttitor leo. Fusce justo lorem, dictum nec - rutrum sed, mattis faucibus diam. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. Phasellus ullamcorper ex sagittis - lacus gravida interdum quis sit amet justo. Nunc posuere massa - et feugiat efficitur. Donec est magna, lobortis sit amet - ligula ut, vehicula posuere diam. Suspendisse aliquet blandit - velit, consectetur scelerisque libero porttitor eu. Praesent - faucibus dignissim maximus. Vestibulum porta eu tellus sit - amet ultricies. Integer aliquet vestibulum massa, in interdum - arcu commodo ac. Curabitur sit amet cursus ipsum. Donec ut - diam orci. Fusce odio diam, laoreet non elit sed, suscipit - mollis leo. Fusce non turpis faucibus, placerat sapien quis, - varius ligula. Praesent ac magna id tortor ultricies ultricies - quis nec quam. -

-
-
-

Content 2

-

- Etiam varius in neque a tristique. Maecenas euismod pharetra - scelerisque. Nam in pretium nulla, vel blandit risus. Duis - posuere egestas nisi, vitae iaculis tortor varius eget. Morbi - molestie sem in varius vulputate. Cras enim sapien, malesuada - id nisi eu, volutpat congue leo. Praesent aliquet ipsum id - lectus consequat rutrum. In vitae dolor pellentesque dolor - scelerisque condimentum eget at ligula. Integer vel turpis - eros. Cras at hendrerit mauris. Aliquam erat volutpat. Quisque - vehicula pharetra mauris, nec finibus augue posuere ut. Etiam - condimentum lacus at purus luctus finibus. -

-
-
-

Content 3

-

- Nam nec lacinia purus, in accumsan arcu. Aenean at maximus - tortor, eget porttitor leo. Fusce justo lorem, dictum nec - rutrum sed, mattis faucibus diam. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. Phasellus ullamcorper ex sagittis - lacus gravida interdum quis sit amet justo. Nunc posuere massa - et feugiat efficitur. Donec est magna, lobortis sit amet - ligula ut, vehicula posuere diam. Suspendisse aliquet blandit - velit, consectetur scelerisque libero porttitor eu. Praesent - faucibus dignissim maximus. Vestibulum porta eu tellus sit - amet ultricies. Integer aliquet vestibulum massa, in interdum - arcu commodo ac. Curabitur sit amet cursus ipsum. Donec ut - diam orci. Fusce odio diam, laoreet non elit sed, suscipit - mollis leo. Fusce non turpis faucibus, placerat sapien quis, - varius ligula. Praesent ac magna id tortor ultricies ultricies - quis nec quam. -

-
-
-

Content 4

-

- Etiam varius in neque a tristique. Maecenas euismod pharetra - scelerisque. Nam in pretium nulla, vel blandit risus. Duis - posuere egestas nisi, vitae iaculis tortor varius eget. Morbi - molestie sem in varius vulputate. Cras enim sapien, malesuada - id nisi eu, volutpat congue leo. Praesent aliquet ipsum id - lectus consequat rutrum. In vitae dolor pellentesque dolor - scelerisque condimentum eget at ligula. Integer vel turpis - eros. Cras at hendrerit mauris. Aliquam erat volutpat. Quisque - vehicula pharetra mauris, nec finibus augue posuere ut. Etiam - condimentum lacus at purus luctus finibus. -

-
-
-

Content 5

-

- Nam nec lacinia purus, in accumsan arcu. Aenean at maximus - tortor, eget porttitor leo. Fusce justo lorem, dictum nec - rutrum sed, mattis faucibus diam. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. Phasellus ullamcorper ex sagittis - lacus gravida interdum quis sit amet justo. Nunc posuere massa - et feugiat efficitur. Donec est magna, lobortis sit amet - ligula ut, vehicula posuere diam. Suspendisse aliquet blandit - velit, consectetur scelerisque libero porttitor eu. Praesent - faucibus dignissim maximus. Vestibulum porta eu tellus sit - amet ultricies. Integer aliquet vestibulum massa, in interdum - arcu commodo ac. Curabitur sit amet cursus ipsum. Donec ut - diam orci. Fusce odio diam, laoreet non elit sed, suscipit - mollis leo. Fusce non turpis faucibus, placerat sapien quis, - varius ligula. Praesent ac magna id tortor ultricies ultricies - quis nec quam. -

-

- Etiam varius in neque a tristique. Maecenas euismod pharetra - scelerisque. Nam in pretium nulla, vel blandit risus. Duis - posuere egestas nisi, vitae iaculis tortor varius eget. Morbi - molestie sem in varius vulputate. Cras enim sapien, malesuada - id nisi eu, volutpat congue leo. Praesent aliquet ipsum id - lectus consequat rutrum. In vitae dolor pellentesque dolor - scelerisque condimentum eget at ligula. Integer vel turpis - eros. Cras at hendrerit mauris. Aliquam erat volutpat. Quisque - vehicula pharetra mauris, nec finibus augue posuere ut. Etiam - condimentum lacus at purus luctus finibus. -

-
+

Content - no tabs

+

+ Nam nec lacinia purus, in accumsan arcu. Aenean at maximus tortor, eget porttitor leo. Fusce justo + lorem, dictum nec rutrum sed, mattis faucibus diam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Phasellus ullamcorper ex sagittis lacus gravida interdum quis sit amet justo. Nunc posuere massa + et feugiat efficitur. Donec est magna, lobortis sit amet ligula ut, vehicula posuere diam. Suspendisse + aliquet blandit velit, consectetur scelerisque libero porttitor eu. Praesent faucibus dignissim maximus. + Vestibulum porta eu tellus sit amet ultricies. Integer aliquet vestibulum massa, in interdum arcu + commodo ac. Curabitur sit amet cursus ipsum. Donec ut diam orci. Fusce odio diam, laoreet non elit sed, + suscipit mollis leo. Fusce non turpis faucibus, placerat sapien quis, varius ligula. Praesent ac magna + id tortor ultricies ultricies quis nec quam. +

+

+ Etiam varius in neque a tristique. Maecenas euismod pharetra scelerisque. Nam in pretium nulla, vel + blandit risus. Duis posuere egestas nisi, vitae iaculis tortor varius eget. Morbi molestie sem in varius + vulputate. Cras enim sapien, malesuada id nisi eu, volutpat congue leo. Praesent aliquet ipsum id lectus + consequat rutrum. In vitae dolor pellentesque dolor scelerisque condimentum eget at ligula. Integer vel + turpis eros. Cras at hendrerit mauris. Aliquam erat volutpat. Quisque vehicula pharetra mauris, nec + finibus augue posuere ut. Etiam condimentum lacus at purus luctus finibus. +

- +
- + diff --git a/dev/main.js b/dev/main.js new file mode 100644 index 0000000..8bb090f --- /dev/null +++ b/dev/main.js @@ -0,0 +1,26 @@ +const map = L.map('map', { + zoomControl: false, +}).setView([51.505, -0.09], 13); +L.control.scale({ position: 'bottomleft' }).addTo(map); +L.control.zoom({ position: 'topleft' }).addTo(map); + +const sidepanelLeft = L.control.sidepanel('mySidepanelLeft', { + tabsPosition: 'left', + defaultTab: 'tab-4', + pushControls: true, +}); +sidepanelLeft.addTo(map); + +const sidepanelRight = L.control.sidepanel('mySidepanelRight', { + panelPosition: 'right', + tabsPosition: 'top', + pushControls: true, + darkMode: true, + defaultTab: 2, +}); +sidepanelRight.addTo(map); + +L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: + '© OpenStreetMap contributors', +}).addTo(map); diff --git a/dev/style.css b/dev/style.css new file mode 100644 index 0000000..3f89311 --- /dev/null +++ b/dev/style.css @@ -0,0 +1,8 @@ +body { + margin: 0; +} + +#map { + width: 100vw; + height: 100vh; +} diff --git a/examples/assets/gear.svg b/examples/assets/gear.svg new file mode 100644 index 0000000..fcd474b --- /dev/null +++ b/examples/assets/gear.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/assets/geo-alt.svg b/examples/assets/geo-alt.svg new file mode 100644 index 0000000..a0d31a9 --- /dev/null +++ b/examples/assets/geo-alt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/assets/geo.svg b/examples/assets/geo.svg new file mode 100644 index 0000000..f753fe2 --- /dev/null +++ b/examples/assets/geo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/assets/github.svg b/examples/assets/github.svg new file mode 100644 index 0000000..7261e87 --- /dev/null +++ b/examples/assets/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/assets/language-typescript.svg b/examples/assets/language-typescript.svg new file mode 100644 index 0000000..c19d4c3 --- /dev/null +++ b/examples/assets/language-typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/assets/list.svg b/examples/assets/list.svg new file mode 100644 index 0000000..8ebc811 --- /dev/null +++ b/examples/assets/list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/assets/npm.svg b/examples/assets/npm.svg new file mode 100644 index 0000000..3438a9d --- /dev/null +++ b/examples/assets/npm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/assets/vuejs.svg b/examples/assets/vuejs.svg new file mode 100644 index 0000000..eedaee4 --- /dev/null +++ b/examples/assets/vuejs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 934817d..1e53c2a 100644 --- a/examples/index.html +++ b/examples/index.html @@ -5,231 +5,58 @@ - + + Leaflet - Side Panel plugin -
-

- Leaflet Sidepanel +

Leaflet Sidepanel

+
- - Github + + GitHub + + + + npmjs - +
+ + + Plugin for Vue 3 +
-
+
-
- +
-
+

Content - no tabs

- Nam nec lacinia purus, in accumsan arcu. Aenean at maximus - tortor, eget porttitor leo. Fusce justo lorem, dictum nec rutrum - sed, mattis faucibus diam. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. Phasellus ullamcorper ex sagittis - lacus gravida interdum quis sit amet justo. Nunc posuere massa - et feugiat efficitur. Donec est magna, lobortis sit amet ligula - ut, vehicula posuere diam. Suspendisse aliquet blandit velit, - consectetur scelerisque libero porttitor eu. Praesent faucibus - dignissim maximus. Vestibulum porta eu tellus sit amet - ultricies. Integer aliquet vestibulum massa, in interdum arcu - commodo ac. Curabitur sit amet cursus ipsum. Donec ut diam orci. - Fusce odio diam, laoreet non elit sed, suscipit mollis leo. - Fusce non turpis faucibus, placerat sapien quis, varius ligula. - Praesent ac magna id tortor ultricies ultricies quis nec quam. -

-

- Etiam varius in neque a tristique. Maecenas euismod pharetra - scelerisque. Nam in pretium nulla, vel blandit risus. Duis - posuere egestas nisi, vitae iaculis tortor varius eget. Morbi - molestie sem in varius vulputate. Cras enim sapien, malesuada id - nisi eu, volutpat congue leo. Praesent aliquet ipsum id lectus - consequat rutrum. In vitae dolor pellentesque dolor scelerisque - condimentum eget at ligula. Integer vel turpis eros. Cras at - hendrerit mauris. Aliquam erat volutpat. Quisque vehicula - pharetra mauris, nec finibus augue posuere ut. Etiam condimentum - lacus at purus luctus finibus. + Nam nec lacinia purus, in accumsan arcu. Aenean at maximus tortor, eget porttitor leo. Fusce justo + lorem, dictum nec rutrum sed, mattis faucibus diam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Phasellus ullamcorper ex sagittis lacus gravida interdum quis sit amet justo. Nunc posuere massa + et feugiat efficitur. Donec est magna, lobortis sit amet ligula ut, vehicula posuere diam. Suspendisse + aliquet blandit velit, consectetur scelerisque libero porttitor eu. Praesent faucibus dignissim maximus. + Vestibulum porta eu tellus sit amet ultricies. Integer aliquet vestibulum massa, in interdum arcu + commodo ac. Curabitur sit amet cursus ipsum. Donec ut diam orci. Fusce odio diam, laoreet non elit sed, + suscipit mollis leo. Fusce non turpis faucibus, placerat sapien quis, varius ligula. Praesent ac magna + id tortor ultricies ultricies quis nec quam.

- Etiam varius in neque a tristique. Maecenas euismod pharetra - scelerisque. Nam in pretium nulla, vel blandit risus. Duis - posuere egestas nisi, vitae iaculis tortor varius eget. Morbi - molestie sem in varius vulputate. Cras enim sapien, malesuada id - nisi eu, volutpat congue leo. Praesent aliquet ipsum id lectus - consequat rutrum. In vitae dolor pellentesque dolor scelerisque - condimentum eget at ligula. Integer vel turpis eros. Cras at - hendrerit mauris. Aliquam erat volutpat. Quisque vehicula - pharetra mauris, nec finibus augue posuere ut. Etiam condimentum - lacus at purus luctus finibus. + Etiam varius in neque a tristique. Maecenas euismod pharetra scelerisque. Nam in pretium nulla, vel + blandit risus. Duis posuere egestas nisi, vitae iaculis tortor varius eget. Morbi molestie sem in varius + vulputate. Cras enim sapien, malesuada id nisi eu, volutpat congue leo. Praesent aliquet ipsum id lectus + consequat rutrum. In vitae dolor pellentesque dolor scelerisque condimentum eget at ligula. Integer vel + turpis eros. Cras at hendrerit mauris. Aliquam erat volutpat. Quisque vehicula pharetra mauris, nec + finibus augue posuere ut. Etiam condimentum lacus at purus luctus finibus.

- +
- - + + diff --git a/examples/main.js b/examples/main.js new file mode 100644 index 0000000..8649351 --- /dev/null +++ b/examples/main.js @@ -0,0 +1,26 @@ +const map = L.map('map', { + zoomControl: false, +}).setView([51.505, -0.09], 13); + +L.control.scale({ position: 'bottomleft' }).addTo(map); +L.control.zoom({ position: 'topleft' }).addTo(map); + +const sidepanelLeft = L.control.sidepanel('mySidepanelLeft', { + tabsPosition: 'left', + pushControls: true, +}); +sidepanelLeft.addTo(map); + +const sidepanelRight = L.control.sidepanel('mySidepanelRight', { + hasTabs: false, + panelPosition: 'right', + pushControls: true, + darkMode: true, +}); +sidepanelRight.addTo(map); +sidepanelRight.open(map); + +L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: + '© OpenStreetMap contributors', +}).addTo(map); diff --git a/examples/style.css b/examples/style.css new file mode 100644 index 0000000..25e0e26 --- /dev/null +++ b/examples/style.css @@ -0,0 +1,69 @@ +html, +body { + margin: 0; + font-family: Roboto, sans-serif; + font-size: 1rem; + height: 100%; + color: #1f1412; +} + +body { + display: flex; + flex-direction: column; + align-items: center; +} + +.header :is(h1, div, a) { + display: flex; + justify-content: center; + align-items: center; +} + +.header h1 { + font-size: 1.5rem; + margin: 0.5rem 0 0 0; +} + +.header a { + color: #199900; + text-decoration: none; + margin-left: 0.5em; +} +.header a:hover { + color: #116600; + text-decoration: underline; +} +.header a::after { + content: '|'; + margin-left: 0.5em; + color: #1f1412; +} +.header a:last-child::after { + content: ''; +} + +.header a span { + margin-left: 4px; +} + +.header a object { + height: 1.5em; + vertical-align: middle; +} + +.header > a { + margin-bottom: 0.5rem; +} + +#map { + width: 100%; + height: 100vh; + border: 1px solid #1f1412; +} + +@media all and (min-width: 1024px) { + #map { + height: 768px; + width: 1024px; + } +} diff --git a/package-lock.json b/package-lock.json index b314bb4..ee3e84f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "leaflet.sidepanel", - "version": "1.1.0", + "version": "1.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "leaflet.sidepanel", - "version": "1.1.0", + "version": "1.2.0", "license": "MIT", "devDependencies": { "@types/leaflet": "^1.9.12", diff --git a/package.json b/package.json index 3e0ba87..4ae7b16 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "leaflet.sidepanel", - "version": "1.1.0", + "version": "1.2.0", "description": "Slide side panel plugin for Leaflet", "author": "cyclingbyte ", "license": "MIT", @@ -8,13 +8,21 @@ "homepage": "https://cyclingbyte.github.io/Leaflet.SidePanel/", "type": "module", "main": "dist/leaflet-sidepanel.cjs.js", - "unpkg": "dist/leaflet-sidepanel.umd.js", + "browser": "dist/leaflet-sidepanel.umd.js", "module": "dist/leaflet-sidepanel.es.js", "style": "dist/style.css", "types": "dist/types/leaflet-sidepanel.d.ts", + "files": [ + "dist/", + "CHANGELOG.md" + ], "directories": { "example": "examples" }, + "repository": { + "type": "git", + "url": "https://github.com/cyclingbyte/Leaflet.SidePanel.git" + }, "scripts": { "build": "vite build", "type-check": "tsc --noEmit", @@ -24,17 +32,6 @@ "format": "prettier --write .", "format:check": "prettier --check . || (echo 'Code is not formatted' && exit 1)" }, - "repository": { - "type": "git", - "url": "https://github.com/cyclingbyte/Leaflet.SidePanel.git" - }, - "keywords": [ - "leaflet", - "leafletjs", - "leaflet-plugin", - "leaflet-sidebar", - "leaflet-sidepanel" - ], "bugs": { "url": "https://github.com/cyclingbyte/Leaflet.SidePanel/issues" }, @@ -51,8 +48,11 @@ "vite": "^5.4.2", "vite-plugin-dts": "^4.0.3" }, - "files": [ - "dist/", - "CHANGELOG.md" + "keywords": [ + "leaflet", + "leafletjs", + "leaflet-plugin", + "leaflet-sidebar", + "leaflet-sidepanel" ] } diff --git a/src/leaflet-sidepanel.scss b/src/leaflet-sidepanel.scss index e0dd175..87dee54 100644 --- a/src/leaflet-sidepanel.scss +++ b/src/leaflet-sidepanel.scss @@ -645,7 +645,7 @@ $toggle-button-arrow-opacity: 1; } // Animate control -.leaflet-anim-control-container { +.leaflet-animate-control-container { &.left-opened .leaflet-left { left: $panel-width; transition: left 0.5s ease; diff --git a/src/leaflet-sidepanel.ts b/src/leaflet-sidepanel.ts index 4ec72e0..304bbc3 100644 --- a/src/leaflet-sidepanel.ts +++ b/src/leaflet-sidepanel.ts @@ -14,7 +14,7 @@ class SidePanel extends L.Control { tabsPosition: 'top', darkMode: false, pushControls: false, - startTab: 1, + defaultTab: 1, onTabClick: () => {}, onToggle: () => {}, ...options, // Merge with default options @@ -68,29 +68,29 @@ class SidePanel extends L.Control { ) as NodeListOf; tabsLinks.forEach((tabLink, tabIndex) => { - let startTab: HTMLElement | undefined; + let defaultTab: HTMLElement | undefined; let startContent: HTMLElement | undefined; if ( - typeof this.options.startTab === 'number' && - this.options.startTab - 1 === tabIndex + typeof this.options.defaultTab === 'number' && + this.options.defaultTab - 1 === tabIndex ) { - startTab = tabLink; + defaultTab = tabLink; startContent = tabsContents[tabIndex]; } if ( - typeof this.options.startTab === 'string' && - this.options.startTab === tabLink.dataset.tabLink + typeof this.options.defaultTab === 'string' && + this.options.defaultTab === tabLink.dataset.tabLink ) { - startTab = tabLink; + defaultTab = tabLink; startContent = this._panel.querySelector( - `.sidepanel-tab-content[data-tab-content="${this.options.startTab}"]` + `.sidepanel-tab-content[data-tab-content="${this.options.defaultTab}"]` ) as HTMLElement; } - if (startTab && !L.DomUtil.hasClass(startTab, 'active')) { - L.DomUtil.addClass(startTab, 'active'); + if (defaultTab && !L.DomUtil.hasClass(defaultTab, 'active')) { + L.DomUtil.addClass(defaultTab, 'active'); L.DomUtil.addClass(startContent!, 'active'); } @@ -149,7 +149,10 @@ class SidePanel extends L.Control { '.leaflet-control-container' ) as HTMLElement; - L.DomUtil.addClass(controlsContainer, 'leaflet-anim-control-container'); + L.DomUtil.addClass( + controlsContainer, + 'leaflet-animate-control-container' + ); if (IS_OPENED) { L.DomUtil.removeClass( diff --git a/src/types/leaflet-sidepanel.ts b/src/types/leaflet-sidepanel.ts index 4556f70..4ee26bf 100644 --- a/src/types/leaflet-sidepanel.ts +++ b/src/types/leaflet-sidepanel.ts @@ -10,7 +10,7 @@ declare module 'leaflet' { tabsPosition?: SidePanelTabsPosition; darkMode?: boolean; pushControls?: boolean; - startTab?: number | string; + defaultTab?: number | string; onTabClick?: (tabLink: HTMLElement) => void; onToggle?: (opened: boolean) => void; }