Merge pull request #14 from cyclingbyte/main

new release v1.1.0
cyclingbyte · Aug 25, 2024 · 90732d1 · 90732d1
2 parents 40549f6 + a9d388c
commit 90732d1
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 100 deletions.
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ["release"]
     paths:
       - 'examples/**'
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,14 @@
 # Leaflet.SidePanel Changelog
 
+## v1.1.0 (2024-08-25)
+
+- feat: trigger toggle, open, close programmatically with js
+- feat: Add on tab switch event
+- fix: cannot toggle sidebar when hasTabs is false
+- chore: Some change in docu, readme, ...
+
 ## v1.0.1 (2024-08-24)
+
 - fix!: dist directory missing in public npm package
 
 ## v1.0.0 (2024-08-24)

diff --git a/README.md b/README.md
@@ -3,10 +3,10 @@
 ![npm license](https://img.shields.io/npm/l/leaflet.sidepanel)
 ![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) -->
 <!-- ![git stars](https://img.shields.io/github/stars/cyclingbyte/Leaflet.SidePanel) -->
 
-
 # Leaflet.SidePanel
 
 Slide side panel plugin for [Leaflet](https://leafletjs.com/ 'Leaflet Homepage')
@@ -28,9 +28,9 @@ Include the script and css in your html file
 ```html
 <link
   rel="stylesheet"
-  href="https://www.unpkg.com/leaflet.sidepanel@1.0.1/dist/style.css"
+  href="https://www.unpkg.com/leaflet.sidepanel@1.1.0/dist/style.css"
 />
-<script src="https://www.unpkg.com/leaflet.sidepanel@1.0.1/dist/leaflet-sidepanel.umd.js"></script>
+<script src="https://www.unpkg.com/leaflet.sidepanel@1.1.0/dist/leaflet-sidepanel.umd.js"></script>
 ```
 
 ## Requirements

diff --git a/examples/index.html b/examples/index.html
@@ -10,7 +10,7 @@
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""
   />
-  <link rel="stylesheet" href="https://www.unpkg.com/leaflet.sidepanel@1.0.1/dist/style.css">
+  <link rel="stylesheet" href="https://www.unpkg.com/leaflet.sidepanel@1.1.0/dist/style.css">
   <title>Leaflet - Side Panel plugin</title>
   <style>
     html,
@@ -204,97 +204,30 @@ <h4>Content 5</h4>
     <!-- Side Panel right -->
     <div id="mySidepanelRight" class="sidepanel" aria-label="side panel" aria-hidden="false">
       <div class="sidepanel-inner-wrapper">
-        <nav class="sidepanel-tabs-wrapper" aria-label="sidepanel tab navigation">
-          <ul class="sidepanel-tabs">
-            <li class="sidepanel-tab">
-              <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-1">
-                List
-              </a>
-            </li>
-            <li class="sidepanel-tab">
-              <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-2">
-                Pin
-              </a>
-            </li>
-            <li class="sidepanel-tab">
-              <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-3">
-                Mark
-              </a>
-            </li>
-            <li class="sidepanel-tab">
-              <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-4">
-                Bookmarks
-              </a>
-            </li>
-            <li class="sidepanel-tab">
-              <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-5">
-                Settings
-              </a>
-            </li>
-          </ul>
-        </nav>
         <div class="sidepanel-content-wrapper">
           <div class="sidepanel-content">
-            <div class="sidepanel-tab-content" data-tab-content="tab-1">
-              <h4>Content 1</h4>
-              <p>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.</p>
-            </div>
-            <div class="sidepanel-tab-content" data-tab-content="tab-2">
-              <h4>Content 2</h4>
-              <p>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.</p>
-            </div>
-            <div class="sidepanel-tab-content" data-tab-content="tab-3">
-              <h4>Content 3</h4>
-              <p>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.</p>
-            </div>
-            <div class="sidepanel-tab-content" data-tab-content="tab-4">
-              <h4>Content 4</h4>
-              <p>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.</p>
-            </div>
-            <div class="sidepanel-tab-content" data-tab-content="tab-5">
-              <h4>Content 5</h4>
-              <p>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.</p>
-              <p>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.</p>
-            </div>
+            <h4>Content - no tabs</h4>
+            <p>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.</p>
+            <p>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.</p>
+            <p>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.</p>
           </div>
         </div>
       </div>
@@ -310,7 +243,7 @@ <h4>Content 5</h4>
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""
   ></script>
-  <script src="https://www.unpkg.com/leaflet.sidepanel@1.0.1/dist/leaflet-sidepanel.umd.js"></script>
+  <script src="https://www.unpkg.com/leaflet.sidepanel@1.1.0/dist/leaflet-sidepanel.umd.js"></script>
   <script>
     const map = L.map('map', {
       zoomControl: false
@@ -327,11 +260,10 @@ <h4>Content 5</h4>
       startTab: 'tab-5'
     }).addTo(map);
     const sidepanelRight = L.control.sidepanel('mySidepanelRight', {
+      hasTabs: false,
       panelPosition: 'right',
-      tabsPosition: 'top',
       pushControls: true,
       darkMode: true,
-      startTab: 2
     }).addTo(map);
 
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "leaflet.sidepanel",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Slide side panel plugin for Leaflet",
   "author": "cyclingbyte <cyclingbyte@web.de>",
   "license": "MIT",

diff --git a/src/leaflet-sidepanel.js b/src/leaflet-sidepanel.js
@@ -43,9 +43,15 @@ L.Control.SidePanel = L.Control.extend({
     // If there are tabs, start them.
     if (this.options.hasTabs) {
       this._initTabs(map, this.options.tabsPosition);
+    } else {
+      this._initContent(map);
     }
   },
 
+  _initContent: function (map) {
+    this._toggleButton(map);
+  },
+
   _initTabs: function (map, tabsPosition) {
     if (typeof tabsPosition === 'string') {
       L.DomUtil.addClass(this._panel, 'tabs-' + tabsPosition);