Close button

art-solopov · Oct 30, 2023 · 314f20e · 314f20e
1 parent d6f32dd
commit 314f20e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/assets/css/_trip-show.scss b/assets/css/_trip-show.scss
@@ -29,6 +29,12 @@
           transform: translateY(100%);
         }
 
+        .btn-close {
+          float: right;
+          margin-right: 0.25rem;
+          margin-top: 0.25rem;
+        }
+
         h4 {
             font-size: 1rem;
             text-align: center;

diff --git a/assets/js/components/map/controllers.js b/assets/js/components/map/controllers.js
@@ -75,15 +75,15 @@ export class MapController extends BaseController {
 
     activateMarker(_ev) {
         this.buttonRowTarget.classList.remove('active')
-        // ev.preventDefault()
-        // this.buttonRowTarget.attributes['hx-get'] = ev.params.buttonsRowUrl
-        // this.buttonRowTarget.setAttribute('hx-get', ev.params.buttonsRowUrl)
-        // this.buttonRowTarget.dispatchEvent(new CustomEvent('reload-data'))
     }
 
     postActivateMarker() {
         this.buttonRowTarget.classList.add('active')
     }
+
+    dismissButtonRow() {
+        this.buttonRowTarget.classList.remove('active')
+    }
 }
 
 export class MapPointerController extends BaseController {

diff --git a/assets/js/components/map/lib/index.js b/assets/js/components/map/lib/index.js
@@ -74,6 +74,8 @@ function loadMap(options) {
             const glc = new mapboxgl.GeolocateControl();
             map.addControl(glc);
 
+            map.on('click', (ev) => console.log(ev))
+
             resolve(map)
         })
     })
@@ -85,11 +87,9 @@ function addPointsMarkers(map, points) {
         el.className = `${styles.marker} ${styles[point.category]}`
         el.dataset.mapTarget = 'marker'
         el.dataset.action = 'click->map#activateMarker'
-        // el.dataset.mapButtonsRowUrlParam = point.links.buttonsRow
         el.setAttribute('role', 'button')
         el.setAttribute('hx-get', point.links.buttonsRow)
         el.setAttribute('hx-target', '#buttons_row')
-        // el.setAttribute('hx-trigget', 'click delay:1s')
         const icon = ICONS[point.category]
 
         el.innerHTML = `

diff --git a/trip_planner/templates/points/button_row.html b/trip_planner/templates/points/button_row.html
@@ -1,6 +1,7 @@
 {% from "macros/icon.html" import icon %}
 {% from "macros/buttons.html" import hx_dialog_attrs %}
 
+<button class="btn-close float-end" type="button" aria-label="Close" data-action="map#dismissButtonRow"></button>
 <h4>{{ point.name }}</h4>
 
 <ul>