Gustavo Luigi 2023-08-01 18:28:23 -03:00
parent d400c768c5
commit 1507505ddf
3 changed files with 25 additions and 38 deletions

View File

@ -52,9 +52,9 @@ $(function () {
function initMap() { function initMap() {
function createInfowindowElement(item) { function createInfowindowElement(item) {
let infowindowElement = $("#marker-window").clone(); let infowindowElement = $("#marker-window").clone();
infowindowElement.html(infowindowElement.html().replace('$title', item.title)); infowindowElement.find(".js-title").text(item.title);
infowindowElement.html(infowindowElement.html().replace('$description', item.description ?? '')); infowindowElement.find(".js-description").text(item.description ?? '');
infowindowElement.find(".path").attr("href", item.path); infowindowElement.find(".js-path").attr("href", item.path);
infowindowElement.removeClass('d-none'); infowindowElement.removeClass('d-none');
return infowindowElement[0].outerHTML; return infowindowElement[0].outerHTML;
} }
@ -141,18 +141,18 @@ function initMap() {
$("#contents").empty(); $("#contents").empty();
showedItems.forEach(function (item) { showedItems.forEach(function (item) {
let locationElement = locationElementTemplate.clone(); let locationElement = locationElementTemplate.clone();
locationElement.html(locationElement.html().replace('$title', item.title)); locationElement.find(".js-title").text(item.title);
locationElement.html(locationElement.html().replace('data-src="$image"', 'src="' + item.image + '"')); locationElement.find(".js-image").attr("src", item.image);
locationElement.find(".path").attr("href", item.path); locationElement.find(".js-path").attr("href", item.path);


let location = item[textToSlug(locationField)]; let location = item[textToSlug(locationField)];
if (location && location.postalCode) locationElement.html(locationElement.html().replace('$postalCode', (location.postalCode + " " + (location.addressLocality ?? "")).trim())); if (location && location.postalCode) locationElement.find(".js-postal-code").text((location.postalCode + " " + (location.addressLocality ?? "")).trim());
else locationElement.find(".postal-code").hide(); else locationElement.find(".js-postal-code").hide();


locationElement.removeClass('d-none'); locationElement.removeClass('d-none');


if (item[textToSlug(tagField)] && Array.isArray(item[textToSlug(tagField)])) item[textToSlug(tagField)].slice(0, 2).forEach(function (besonderheitenItem) { if (item[textToSlug(tagField)] && Array.isArray(item[textToSlug(tagField)])) item[textToSlug(tagField)].slice(0, 2).forEach(function (besonderheitenItem) {
locationElement.find(".tags").append(`<span class="badge text-bg-secondary">${besonderheitenItem}</span>`); locationElement.find(".js-tags").append(`<span class="badge text-bg-secondary">${besonderheitenItem}</span>`);
}); });


locationElement.on('click', function () { locationElement.on('click', function () {

View File

@ -1,7 +1,6 @@
@extends('template.'.config('settings.template').'.content.master') @extends('template.'.config('settings.template').'.content.master')
@section('head') @section('head')
<title>{{$content->title}} | {{config('settings.name')}}</title> <title>{{$content->title}} | {{config('settings.name')}}</title>

@stop @stop
@section('content') @section('content')
<div class="container"> <div class="container">
@ -9,44 +8,29 @@
<div class="col-12 mt-4"> <div class="col-12 mt-4">
<a href="{{url('/')}}"> ← Back</a> <a href="{{url('/')}}"> ← Back</a>
</div> </div>

<div class="col-12 mt-4 mb-4"> <div class="col-12 mt-4 mb-4">

<h1>{{$content->title}}</h1> <h1>{{$content->title}}</h1>


</div> </div>

<div class="col-12 col-md-4"> <div class="col-12 col-md-4">
<img src="{{$content->image()}}" class="img-fluid rounded" alt="Bild {{$content->title}}"> <img src="{{$content->image()}}" class="img-fluid rounded" alt="Bild {{$content->title}}">

</div> </div>

<div class="col-12 col-md-7 offset-md-1 fs-4"> <div class="col-12 col-md-7 offset-md-1 fs-4">

{!!$content->{$_description_fielda??''}!!}
{!!$content->beschreibung!!}


</div> </div>

</div> </div>

@if(isset($_images_field) && $content->{$_images_field})
@if($content->bilder)
<div class="row"> <div class="row">
<div class="col-12 mt-4 mb-2"> <div class="col-12 mt-4 mb-2">
<h2>Bilder</h2> <h2>Bilder</h2>
</div> </div>
@foreach($content->{$_images_field} as $bild)
@foreach($content->bilder as $bild)
<div class="col-12 col-md-3 mb-4"> <div class="col-12 col-md-3 mb-4">
<img src="{{$bild}}" class="img-fluid rounded"> <x-img src="{{$bild}}" class="img-fluid rounded"/>
</div> </div>
@endforeach @endforeach
<div class="col-3"></div> <div class="col-3"></div>
</div> </div>
@endif @endif

</div> </div>
<script> <script>
const contentUrl = "{{url('/api/contents/'.$content->id)}}"; const contentUrl = "{{url('/api/contents/'.$content->id)}}";

View File

@ -109,11 +109,11 @@
<div class="col-12 col-md-8 g-0 ps-md-3 order-md-last"> <div class="col-12 col-md-8 g-0 ps-md-3 order-md-last">
<div id="map"></div> <div id="map"></div>
<div id="marker-window" class="d-none"> <div id="marker-window" class="d-none">
<h6 id="firstHeading" class="firstHeading">$title</h6> <h6 class="js-title"></h6>
<div id="bodyContent"> <div>
<img class="img-fluid rounded" data-src="$image" alt=""> <img class="img-fluid rounded js-image" src="" alt="">
<p>$description</p> <p class="js-description"></p>
<a href="" class="path" style="outline: none;">Details</a> <a href="" class="js-path" style="outline: none;">Details</a>
</div> </div>
</div> </div>
</div> </div>
@ -122,12 +122,15 @@
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<div class="col-12 col-md-5"> <div class="col-12 col-md-5">
<img class="img-fluid rounded" data-src="$image" alt=""> <img class="img-fluid rounded js-image" src="" alt="">
</div> </div>
<div class="col-12 col-md-7"> <div class="col-12 col-md-7">
<h4 class="fs-6 mt-2 fw-bolder">$title</h4> <h4 class="fs-6 mt-2 fw-bolder js-title"></h4>
<p class="mt-2 text-muted small postal-code"> <svg style="fill: #ea4335; width: 10px; margin-right: 4px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192z"/></svg>$postalCode</p> <p class="mt-2 text-muted small">
<div style="gap: .25rem;" class="d-flex tags"></div> <svg style="fill: #ea4335; width: 10px; margin-right: 4px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192z"/></svg>
<span class="js-postal-code"></span>
</p>
<div class="js-tags"></div>
</div> </div>
</div> </div>
</div> </div>