Aanmeldingsformulier kennismakingsbijeenkomst

resources/views/imageslist.blade.php

@@ -0,0 +1,74 @@
+@extends('layouts/full')
+
+@section('title') 
+  @if($title) {{$title}} - Beelden @else Beelden @endif
+@endsection
+
+
+@section('breadcrumb')
+	@if($title)
+	<ul class="bread_crumb" style="margin-top: -10px; margin-bottom: 4px; ">
+		<li><a title="Beelden" href="{{route('beelden')}}">Beelden</a></li>
+		<li class="separator icon_small_arrow right_gray">&nbsp;</li>
+		<li>{{$title}}</li>
+	</ul>
+	@endif
+@endsection
+
+@section('content')
+        <p class='bouwmee'>Ook jouw foto op deze pagina? <a href="mailto:beelden@nhgooi.nl">Mail naar beelden@nhgooi.nl!</a></p>
+
+	<div id="items">
+		@include('partial/imageslist_small', ['images' => $images])
+	</div>
+
+	@if(count($images) >= 15)
+	<div>
+		<button class="more page_margin_top" type="button" id='meer-beelden'>
+			<span class="fa-2x fas fa-spinner fa-spin" id="loading"></span>
+			LAAD MEER BEELDEN
+		</button>
+	</div>
+	@endif
+
+@endsection
+
+@push('scripts')
+<script>
+	var nextPage = 2;
+	var isLoading = 0;
+	var $isLoading = $('#loading').hide();
+
+	$('#meer-beelden').click(function(e) {
+		e.preventDefault();
+		if(!isLoading) {
+			// Set flag and update UI
+			isLoading = 1;
+			$isLoading.show();
+			var $button = $(this).attr("disabled", "disabled");
+	
+			// Fire request for the next page
+			$.ajax({ url: document.location.pathname + '?pagina=' + nextPage })
+				.always(function() { 
+					// Whether success or failure, update the UI again
+					isLoading = 0; 
+					$isLoading.hide(); 
+					$button.removeAttr("disabled");
+				})
+				.done(function(data) { 
+					if(!data) { 
+						// When no data was returned, disable the button permanently
+						page = -1;
+                				$('#items').append("<hr /><p>Er zijn geen beelden (meer).</p>"); 
+						$button.remove();
+						return;
+					}
+
+					$('#items').append(data); 
+					++nextPage;
+				});
+		}
+	});
+</script>
+@endpush
+