Working on multiple files in a media object

7 files changed, 190 insertions, 75 deletions

diff --git a/resources/views/modals/add-media-file.php b/resources/views/modals/add-media-file.php
new file mode 100644
index 0000000000..b6db8458f4
--- /dev/null
+++ b/resources/views/modals/add-media-file.php
@@ -0,0 +1,14 @@
+<?php use Fisharebest\Webtrees\I18N; ?>
+<?php use Fisharebest\Webtrees\View; ?>
+
+<form action="<?= e(Route('add-media-file', ['xref' => $media->getXref(), 'ged' => $media->getTree()->getName()])) ?>" enctype="multipart/form-data" method="POST">
+	<?= csrf_field() ?>
+
+	<?= View::make('modals/header', ['title' => I18N::translate('Add a media file')]) ?>
+
+	<div class="modal-body">
+		<?= View::make('modals/media-file-fields', ['max_upload_size' => $max_upload_size]) ?>
+	</div>
+
+	<?= View::make('modals/footer-save-cancel') ?>
+</form>
diff --git a/resources/views/modals/ajax.php b/resources/views/modals/ajax.php
new file mode 100644
index 0000000000..c019984e8e
--- /dev/null
+++ b/resources/views/modals/ajax.php
@@ -0,0 +1,16 @@
+<!-- A dynamic modal, with content loaded using AJAX. -->
+<div class="modal fade" id="wt-ajax-modal" tabindex="-1" role="dialog" aria-labelledBy="wt-ajax-modal-title" aria-hidden="true">
+	<div class="modal-dialog modal-lg" role="document">
+		<div class="modal-content wt-ajax-load" id="wt-ajax-modal-content"></div>
+	</div>
+</div>
+
+<script>
+	document.addEventListener("DOMContentLoaded", function() {
+		$('#wt-ajax-modal').on('show.bs.modal', function (event) {
+			$('#wt-ajax-modal-content')
+				.empty()
+				.load(event.relatedTarget.dataset.href);
+		});
+	});
+</script>
diff --git a/resources/views/modals/create-media.php b/resources/views/modals/create-media.php
index 42f6dbb33b..64272b8479 100644
--- a/resources/views/modals/create-media.php
+++ b/resources/views/modals/create-media.php
@@ -1,72 +1,20 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\Filter; ?>
-<?php use Fisharebest\Webtrees\FontAwesome; ?>
-<?php use Fisharebest\Webtrees\GedcomTag; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
+<?php use Fisharebest\Webtrees\View; ?>
+
 <div class="modal wt-modal-create-record" id="modal-create-media-object">
-	<form id="form-create-media-object"><!-- This form is posted using jQuery -->
-		<?= Filter::getCsrf() ?>
-		<input type="hidden" name="action" value="create-media-object">
-		<input type="hidden" name="ged" value="<?= $tree->getNameHtml() ?>">
 		<div class="modal-dialog modal-lg" role="document">
 			<div class="modal-content">
-				<div class="modal-header">
-					<h3 class="modal-title"><?= I18N::translate('Create a media object') ?></h3>
-					<button type="button" class="close" data-dismiss="modal" aria-label="<?= I18N::translate('close') ?>">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
+				<form id="form-create-media-object"><!-- This form is posted using jQuery -->
+					<?= Filter::getCsrf() ?>
+					<input type="hidden" name="action" value="create-media-object">
+					<input type="hidden" name="ged" value="<?= $tree->getNameHtml() ?>">
+
+					<?= View::make('modals/header', ['title' => I18N::translate('Create a media object')]) ?>
+
 				<div class="modal-body">
-					<div class="form-group row">
-						<label class="col-form-label col-sm-2" for="file">
-							<?= I18N::translate('Media file to upload') ?>
-						</label>
-						<div class="col-sm-10">
-							<input type="file" class="form-control" id="file" name="file">
-						</div>
-					</div>
-					<div class="form-group row">
-						<label class="col-form-label col-sm-2" for="type">
-							<?= I18N::translate('Filename on server') ?>
-						</label>
-						<div class="col-sm-10">
-							<div class="form-check">
-								<label class="form-check-label">
-									<input class="form-check-input" type="radio" name="auto" value="0" checked>
-									<span class="input-group">
-												<input class="form-control" type="text" placeholder="<?= I18N::translate('Folder') ?>" data-autocomplete-type="folder">
-												<span class="input-group-addon">/</span>
-												<input class="form-control" type="text" placeholder="<?= I18N::translate('Same as uploaded file') ?>">
-											</span>
-								</label>
-							</div>
-							<p class="small text-muted">
-								<?= I18N::translate('If you have a large number of media files, you can organize them into folders and subfolders.') ?>
-							</p>
-							<div class="form-check">
-								<label class="form-check-label">
-									<input class="form-check-input" type="radio" name="auto" value="1">
-									<?= I18N::translate('Create a unique filename') ?>
-								</label>
-							</div>
-						</div>
-					</div>
-					<div class="form-group row">
-						<label class="col-form-label col-sm-2" for="title">
-							<?= I18N::translate('Title') ?>
-						</label>
-						<div class="col-sm-10">
-							<input type="text" class="form-control" name="title" id="title">
-						</div>
-					</div>
-					<div class="form-group row">
-						<label class="col-form-label col-sm-2" for="type">
-							<?= I18N::translate('Media type') ?>
-						</label>
-						<div class="col-sm-10">
-							<?= Bootstrap4::select(['' => ''] + GedcomTag::getFileFormTypes(), '') ?>
-						</div>
-					</div>
+					<?= View::make('modals/media-file-fields', ['max_upload_size' => $max_upload_size]) ?>
+
 					<div class="form-group row">
 						<label class="col-form-label col-sm-2" for="note">
 							<?= I18N::translate('Note') ?>
@@ -76,17 +24,9 @@
 						</div>
 					</div>
 				</div>
-				<div class="modal-footer">
-					<button type="submit" class="btn btn-primary">
-						<?= FontAwesome::decorativeIcon('save') ?>
-						<?= I18N::translate('save') ?>
-					</button>
-					<button type="button" class="btn btn-text" data-dismiss="modal">
-						<?= FontAwesome::decorativeIcon('cancel') ?>
-						<?= I18N::translate('cancel') ?>
-					</button>
-				</div>
-			</div>
+
+				<?= View::make('modals/footer-save-cancel') ?>
+			</form>
 		</div>
-	</form>
+	</div>
 </div>
diff --git a/resources/views/modals/error.php b/resources/views/modals/error.php
new file mode 100644
index 0000000000..010b23b870
--- /dev/null
+++ b/resources/views/modals/error.php
@@ -0,0 +1,22 @@
+<?php use Fisharebest\Webtrees\FontAwesome; ?>
+<?php use Fisharebest\Webtrees\I18N; ?>
+
+<div class="modal-header">
+	<h3 class="modal-title" id="wt-ajax-modal-title">
+		<?= $title ?>
+	</h3>
+	<button type="button" class="close" data-dismiss="modal" aria-label="<?= I18N::translate('close') ?>">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+<div class="modal-body">
+	<div class="alert alert-danger">
+		<?= $error ?>
+	</div>
+</div>
+<div class="modal-footer">
+	<button type="button" class="btn btn-secondary" data-dismiss="modal">
+		<?= FontAwesome::decorativeIcon('cancel') ?>
+		<?= I18N::translate('cancel') ?>
+	</button>
+</div>
diff --git a/resources/views/modals/footer-save-cancel.php b/resources/views/modals/footer-save-cancel.php
new file mode 100644
index 0000000000..a7c1bd6332
--- /dev/null
+++ b/resources/views/modals/footer-save-cancel.php
@@ -0,0 +1,13 @@
+<?php use Fisharebest\Webtrees\FontAwesome; ?>
+<?php use Fisharebest\Webtrees\I18N; ?>
+
+<div class="modal-footer">
+	<button type="submit" class="btn btn-primary">
+		<?= FontAwesome::decorativeIcon('save') ?>
+		<?= I18N::translate('save') ?>
+	</button>
+	<button type="button" class="btn btn-secondary" data-dismiss="modal">
+		<?= FontAwesome::decorativeIcon('cancel') ?>
+		<?= I18N::translate('cancel') ?>
+	</button>
+</div>
diff --git a/resources/views/modals/header.php b/resources/views/modals/header.php
new file mode 100644
index 0000000000..26b5ab2551
--- /dev/null
+++ b/resources/views/modals/header.php
@@ -0,0 +1,10 @@
+<?php use Fisharebest\Webtrees\I18N; ?>
+
+<div class="modal-header">
+	<h3 class="modal-title" id="wt-ajax-modal-title">
+		<?= $title ?>
+	</h3>
+	<button type="button" class="close" data-dismiss="modal" aria-label="<?= I18N::translate('close') ?>">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
diff --git a/resources/views/modals/media-file-fields.php b/resources/views/modals/media-file-fields.php
new file mode 100644
index 0000000000..4909df9686
--- /dev/null
+++ b/resources/views/modals/media-file-fields.php
@@ -0,0 +1,100 @@
+<?php use Fisharebest\Webtrees\Bootstrap4;
+use Fisharebest\Webtrees\GedcomTag;
+use Fisharebest\Webtrees\I18N; ?>
+<?php ?>
+<?php ?>
+
+<div class="form-group row">
+	<label class="col-form-label col-sm-2" for="file-location">
+		<?= I18N::translate('Media file') ?>
+	</label>
+	<div class="col-sm-10">
+		<select class="form-control" id="file-location" name="file_location">
+			<option value="upload">
+				<?= I18N::translate('A file on your computer') ?>
+			</option>
+			<option value="url">
+				<?= I18N::translate('A URL') ?>
+			</option>
+		</select>
+	</div>
+</div>
+
+<div class="form-group row file-location file-location-upload">
+	<label class="col-form-label col-sm-2" for="file">
+		<?= I18N::translate('A file on your computer') ?>
+	</label>
+	<div class="col-sm-10">
+		<input class="form-control" id="file" name="file" type="file">
+		<small class="text-muted">
+			<?= I18N::translate('Maximum upload size: ') ?>
+			<?= $max_upload_size ?>
+		</small>
+	</div>
+</div>
+
+<div class="form-group row file-location file-location-upload">
+	<label class="col-form-label col-sm-2" for="type">
+		<?= I18N::translate('Filename on server') ?>
+	</label>
+	<div class="col-sm-10">
+		<div class="form-check">
+			<label class="form-check-label">
+				<input class="form-check-input" type="radio" name="auto" value="0" checked>
+				<span class="input-group">
+					<input class="form-control" name="folder" placeholder="<?= I18N::translate('Folder') ?>" data-autocomplete-type="folder" type="text">
+					<span class="input-group-addon">/</span>
+					<input class="form-control" type="text" placeholder="<?= I18N::translate('Same as uploaded file') ?>">
+				</span>
+			</label>
+		</div>
+		<p class="small text-muted">
+			<?= I18N::translate('If you have a large number of media files, you can organize them into folders and subfolders.') ?>
+		</p>
+		<div class="form-check">
+			<label class="form-check-label">
+				<input class="form-check-input" type="radio" name="auto" value="1">
+				<?= I18N::translate('Create a unique filename') ?>
+			</label>
+		</div>
+	</div>
+</div>
+
+<div class="form-group row file-location file-location-url d-none">
+	<label class="col-form-label col-sm-2" for="remote">
+		<?= I18N::translate('URL') ?>
+	</label>
+	<div class="col-sm-10">
+		<input class="form-control" type="url" id="remote" name="remote" placeholder="https://www.example.com/photo.jpeg">
+		<small class="text-muted">
+			<?= \Fisharebest\Webtrees\FontAwesome::semanticIcon('warning', I18N::translate('Cuation!')) ?>
+			<?= I18N::translate('The GEDCOM standard does not allow URLs in media objects.') ?>
+			<?= I18N::translate('Other genealogy applications might not recognize this data.') ?>
+		</small>
+	</div>
+</div>
+
+<div class="form-group row">
+	<label class="col-form-label col-sm-2" for="title">
+		<?= I18N::translate('Title') ?>
+	</label>
+	<div class="col-sm-10">
+		<input class="form-control" id="title" name="title" type="text">
+	</div>
+</div>
+
+<div class="form-group row">
+	<label class="col-form-label col-sm-2" for="type">
+		<?= I18N::translate('Media type') ?>
+	</label>
+	<div class="col-sm-10">
+		<?= Bootstrap4::select(['' => ''] + GedcomTag::getFileFormTypes(), '', ['id'   => 'type', 'name' => 'type']) ?>
+	</div>
+</div>
+
+<script>
+	document.getElementById('file-location').addEventListener('change', function () {
+    $('.file-location').addClass('d-none');
+    $('.file-location-' + $(this).val()).removeClass('d-none');
+  });
+</script>