Rumperuu/Where-in-the-World-is-Ben
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

Fix details toggling

Browse source
This commit is contained in:
Ben Goldsworthy 2022-08-24 10:41:23 +00:00
parent 838dda07c4
commit 08beeced35
1 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
resources/views/tracker.blade.php
View file

@ -12,10 +12,10 @@
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script> crossorigin=""></script>
<link rel="stylesheet" href="{{ url('/css/app.css') }}" /> <link rel="stylesheet" href="/css/app.css" />
</head> </head>
<body class="antialiased"> <body>
<header> <header>
<h1>Where in the World is Ben?</h1> <h1>Where in the World is Ben?</h1>
@ -32,8 +32,8 @@
<section id="checkinList"> <section id="checkinList">
<ol> <ol>
@foreach($trip->checkins as $checkin) @foreach($trip->checkins as $checkin)
<li id="{{ $checkin->id }}" onClick="openCheckin(this.id)"> <li>
<details> <details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
<summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ $checkin->date }}</span></summary> <summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ $checkin->date }}</span></summary>
{{ $checkin->note ?? "[No note]" }} {{ $checkin->note ?? "[No note]" }}
</details> </details>
@ -71,8 +71,18 @@
checkinMarkers[{{ $checkin->id }}] = marker; checkinMarkers[{{ $checkin->id }}] = marker;
@endforeach @endforeach
function openCheckin(checkinId) { function toggleCheckin(isOpen, checkinId) {
checkinMarkers[checkinId].openPopup(); if (isOpen) {
var checkins = document.querySelectorAll('details');
checkinMarkers[checkinId].openPopup();
checkins.forEach(checkin => {
if (checkin.id != checkinId && checkin.open) checkin.open = false;
});
} else {
checkinMarkers[checkinId].closePopup();
}
} }
</script> </script>
</footer> </footer>