Använd tooltip igen och göra hela tooltip klickbar

bonny · Jul 2, 2024 · c3d6fea · c3d6fea
1 parent 04a756d
commit c3d6fea
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 29 deletions.
diff --git a/app/Http/Controllers/ApiEventsMapController.php b/app/Http/Controllers/ApiEventsMapController.php
@@ -5,16 +5,15 @@
 use App\CrimeEvent;
 use Cache;
 
-class ApiEventsMapController extends Controller
-{
+class ApiEventsMapController extends Controller {
     /**
      * Hämta data för eventsMap-komponenten.
      */
     public function index() {
         $cacheSeconds = 5 * 60;
         $daysBack = 3;
         $cacheKey = __METHOD__ . "_{$daysBack}";
-        
+
         $events = Cache::remember($cacheKey, $cacheSeconds, function () use ($daysBack) {
             return CrimeEvent::orderBy("created_at", "desc")
                 ->where('created_at', '>=', now()->subDays($daysBack))
@@ -26,14 +25,19 @@ public function index() {
             "data" => [],
         ];
 
-        // create array with data is a format more suited for app and web
+        /** 
+         * Create array with data is a format more suited for app and web
+         * @var array<CrimeEvent> $events
+         * @var CrimeEvent $item
+         */
         foreach ($events as $item) {
             $event = [
                 "id" => $item->id,
                 'time' => $item->getParsedDateInFormat('%H:%M'),
                 'time_human' => $item->getParsedDateFormattedForHumans(),
                 'headline' => $item->getHeadline(),
                 "type" => $item->parsed_title,
+                "locations" => $item->getLocationString(includeAdministrativeAreaLevel1Locations: false),
                 "lat" => (float) $item->location_lat,
                 "lng" => (float) $item->location_lng,
                 "image" => $item->getStaticImageSrc(320, 320, 2),

diff --git a/app/View/Components/EventsMap.php b/app/View/Components/EventsMap.php
@@ -23,7 +23,6 @@ public function __construct(
      */
     public function render(): View|Closure|string
     {
-        //dd($this->mapSize);
         return view('components.events-map');
     }
 }
diff --git a/public/css/events-map.css b/public/css/events-map.css
@@ -163,7 +163,8 @@ body.map-is-expanded .SiteHeader {
     flex-direction: column;
     gap: var(--default-margin-third);
     width: 225px;
-    max-width: 90vw;
+    /* Remove leaflet default margins */
+    margin: -14px -26px -13px -21px;
 }
 
 .EventsMap-markerTooltip-image {
@@ -174,19 +175,42 @@ body.map-is-expanded .SiteHeader {
     border-radius: 5px;
 }
 
+.EventsMap-markerTooltip-innerContent {
+    display: flex;
+    flex-direction: column;
+    gap: var(--default-margin-third);
+    margin: var(--default-margin-half);
+}
+
+.EventsMap-markerTooltip-link::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+}
+
 .EventsMap-markerTooltip-headline {
     font-size: var(--font-size-small);
     font-weight: 500;
     margin: 0;
     white-space: normal;
 }
 
+.EventsMap-markerTooltip-locations {
+    font-size: var(--font-size-small);
+    line-height: 1;
+    margin: 0;
+    white-space: normal;
+}
+
 .EventsMap-markerTooltip-text {
     font-size: var(--font-size-small);
     white-space: normal;
 }
 
-.EventsMap-marker-content {
+/* .EventsMap-marker-content {
     display: flex;
     flex-direction: row;
     gap: var(--default-margin);
@@ -206,7 +230,7 @@ body.map-is-expanded .SiteHeader {
 
 .EventsMap-marker-contentText a {
     display: block;
-}
+} */
 
 .EventsMap a {
     color: inherit;

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -27,6 +27,7 @@
     --font-size-medium-2: 1.15rem;
     --font-size-large: 1.5rem;
     --font-size-small: 0.9rem;
+    --font-size-xsmall: 0.75rem;
     --border-radius-normal: 10px;
     /* Breakpoints 667px, 1024px */
     --breakpoint-medium: 667px;

diff --git a/public/js/events-map.js b/public/js/events-map.js
@@ -234,31 +234,27 @@ class EventsMap {
                 L.marker([event.lat, event.lng], {
                     icon: getLayerIcon(null, map, "", ""),
                     crimeEventData: event,
-                })
-                    .bindTooltip(
-                        `
+                }).bindPopup(
+                    `
                         <div class="EventsMap-markerTooltip">
                             <img class="EventsMap-markerTooltip-image" src="${event.image}" alt="">
-                            <h1 class="EventsMap-markerTooltip-headline">${event.headline}</h1>
-                            <div class="EventsMap-markerTooltip-text">${event.time_human} • ${event.type}</div>
+                            <div class="EventsMap-markerTooltip-innerContent">
+                                <div class="EventsMap-markerTooltip-locations">${event.locations}</div>
+                                <h1 class="EventsMap-markerTooltip-headline">
+                                    <a class="EventsMap-markerTooltip-link" href="${event.permalink}" target="_blank">
+                                        ${event.headline}
+                                    </a>
+                                </h1>
+                                <div class="EventsMap-markerTooltip-text">${event.time_human} • ${event.type}</div>
+                            </div>
                         </div>
                     `,
-                        { direction: "bottom", permanent: false }
-                    )
-                    // .bindPopup(
-                    //     `
-                    //     <div class="EventsMap-marker-content">
-                    //         <a target="_blank" href="${event.permalink}?utm_source=brottsplatskartan&utm_medium=maplink" class="EventsMap-marker-contentText EventsMap-marker-contentLink">
-                    //             ${event.time_human} • ${event.type}
-                    //             <strong>${event.headline}</strong>
-                    //             <!-- <div class="EventsMap-marker-contentLinkIcon">Läs mer →</div> -->
-                    //         </a>
-                    //     </div>                `
-                    // )
-                    .on("click", function (evt) {
-                        const link = evt.target.options.crimeEventData.permalink + "?utm_source=brottsplatskartan&utm_medium=maplink";
-                        window.open(link, "_blank");
-                    });
+                    { direction: "bottom", permanent: false }
+                );
+            // .on("click", function (evt) {
+            //     const link = evt.target.options.crimeEventData.permalink + "?utm_source=brottsplatskartan&utm_medium=maplink";
+            //     window.open(link, "_blank");
+            // });
 
             markers.push(oneMarker);
         });