refactor mod profile_photo

4 files changed, 90 insertions, 86 deletions

diff --git a/view/tpl/profile_advanced.tpl b/view/tpl/profile_advanced.tpl
index a4f6c9525..dab2db4ac 100644
--- a/view/tpl/profile_advanced.tpl
+++ b/view/tpl/profile_advanced.tpl
@@ -21,9 +21,8 @@
 				<a class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" href="#" ><i class="fa fa-pencil"></i>&nbsp;{{$editmenu.edit.3}}</a>
 				<div class="dropdown-menu dropdown-menu-end">
 					{{foreach $editmenu.menu.entries as $e}}
-					<a class="dropdown-item" href="profiles/{{$e.id}}"><img class="dropdown-menu-img-xs" src='{{$e.photo}}'> {{$e.profile_name}}</a>
+					<a class="dropdown-item" href="profiles/{{$e.id}}"><img class="menu-img-1" src='{{$e.photo}}'> {{$e.profile_name}}</a>
 					{{/foreach}}
-					<a class="dropdown-item" href="profile_photo" >{{$editmenu.menu.chg_photo}}</a>
 					{{if $editmenu.menu.cr_new}}
 					<a class="dropdown-item" href="profiles/new" id="profile-listing-new-link">{{$editmenu.menu.cr_new}}</a>
 					{{/if}}
diff --git a/view/tpl/profile_edit.tpl b/view/tpl/profile_edit.tpl
index 3f5814c4a..7361411b9 100644
--- a/view/tpl/profile_edit.tpl
+++ b/view/tpl/profile_edit.tpl
@@ -5,7 +5,7 @@
 				<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 			</button>
 			<div class="dropdown-menu dropdown-menu-end">
-				<a class="dropdown-item" href="profile_photo" id="profile-photo_upload-link" title="{{$profpic}}"><i class="fa fa-fw fa-user"></i>&nbsp;{{$profpic}}</a>
+				<a class="dropdown-item" href="profile_photo/{{$profile_id}}" id="profile-photo_upload-link" title="{{$profpic}}"><i class="fa fa-fw fa-user"></i>&nbsp;{{$profpic}}</a>
 				{{if $is_default}}
 				<a class="dropdown-item" href="cover_photo" id="cover-photo_upload-link" title="{{$coverpic}}"><i class="fa fa-fw fa-picture-o"></i>&nbsp;{{$coverpic}}</a>
 				{{/if}}
diff --git a/view/tpl/profile_photo.tpl b/view/tpl/profile_photo.tpl
index c608806ca..ce9cf510e 100644
--- a/view/tpl/profile_photo.tpl
+++ b/view/tpl/profile_photo.tpl
@@ -1,3 +1,68 @@
+<input id="invisible-photos-file-upload" type="file" name="files" style="visibility:hidden;position:absolute;top:-50;left:-50;width:0;height:0;" >
+
+<div id="profile-photo-content" class="generic-content-wrapper">
+    <div class="section-title-wrapper">
+    <h2>{{$title}}: {{$profile.name}}</h2>
+    </div>
+    <div class="section-content-wrapper">
+
+		<form enctype="multipart/form-data" id="profile-photo-form" action="profile_photo" method="post">
+			<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+
+			<div id="profile-photo-upload-wrapper">
+				{{if $info}}
+				<div class="section-content-warning-wrapper">{{$info}}</div>
+				{{/if}}
+				{{if $importfile}}
+				<input type="hidden" name="importfile" value="{{$importfile}}">
+				{{else}}
+				<!--label id="profile-photo-upload-label" class="" for="profile-photo-upload">{{$lbl_upfile}}</label>
+				<input name="userfile" class="form-control" type="file" id="profile-photo-upload" /-->
+				{{/if}}
+				<div class="clear mb-3"></div>
+
+				<input type="hidden" name="profile" value="{{$profile_id}}" />
+
+				<div id="profile-photo-upload-spinner" class="spinner-wrapper">
+					<div class="spinner m"></div>
+				</div>
+				<div id="profile-photo-submit-wrapper">
+					<button type="submit" class="btn btn-primary float-end" name="submit" id="profile-photo-submit">
+						{{$submit}}
+					</button>
+					<button id="embed-photo-wrapper" type="button" class="btn btn-default btn-outline-success float-end me-1" title="{{$embedPhotos}}" onclick="initializeEmbedPhotoDialog();">
+						<i id="embed-photo" class="fa fa-file-image-o"></i> {{$select}}
+					</button>
+					<button type="submit" class="btn btn-outline-danger" name="remove" id="profile-photo-remove">
+						{{$remove}}
+					</button>
+				</div>
+			</div>
+
+		</form>
+	</div>
+</div>
+
+<div class="modal" id="embedPhotoModal" tabindex="-1" role="dialog" aria-labelledby="embedPhotoLabel" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h4 class="modal-title" id="embedPhotoModalLabel">{{$embedPhotosModalTitle}}</h4>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+			</div>
+			<div class="modal-body" id="embedPhotoModalBody" >
+				<div id="embedPhotoModalBodyAlbumListDialog" class="d-none">
+					<div id="embedPhotoModalBodyAlbumList"></div>
+				</div>
+				<div id="embedPhotoModalBodyAlbumDialog" class="d-none"></div>
+			</div>
+		</div><!-- /.modal-content -->
+	</div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
+<script src="vendor/blueimp/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
+<script src="vendor/blueimp/jquery-file-upload/js/jquery.iframe-transport.js"></script>
+<script src="vendor/blueimp/jquery-file-upload/js/jquery.fileupload.js"></script>
 <script>
     var initializeEmbedPhotoDialog = function () {
         $('.embed-photo-selected-photo').each(function (index) {
@@ -32,9 +97,7 @@
                             $.post("embedphotos/photolink", {href: href},
                                 function(ddata) {
                                     if (ddata['status']) {
-										var pf = $('#profile-photo-profiles').val();
-										var prof = ((typeof pf !== 'undefined') ? '?f=&pf=' + pf : '');
-                                        window.location.href = 'profile_photo/use/' + ddata['resource_id'] + prof;
+                                        window.location.href = 'profile_photo/use/' + ddata['resource_id'] + '?f=&profile={{$profile_id}}';
                                     } else {
                                         window.console.log("{{$modalerrorlink}}" + ':' + ddata['errormsg']);
                                     }
@@ -81,77 +144,26 @@
             },
         'json');
     };
-</script>
 
 
-<div id="profile-photo-content" class="generic-content-wrapper">
-    <div class="section-title-wrapper">
-    <h2>{{$title}}</h2>
-    </div>
-    <div class="section-content-wrapper">
+   $('#invisible-photos-file-upload').fileupload({
+          url: 'profile_photo',
+            dataType: 'json',
+			// dropZone: filedrag,
+            maxChunkSize: 2 * 1024 * 1024,
 
-		<form enctype="multipart/form-data" action="profile_photo" method="post">
-		<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
-
-		<div id="profile-photo-upload-wrapper">
-			{{if $info}}
-			<div class="section-content-warning-wrapper">{{$info}}</div>
-			{{/if}}
-			{{if $importfile}}
-			<input type="hidden" name="importfile" value="{{$importfile}}">
-			{{else}}
-			<label id="profile-photo-upload-label" class="form-label" for="profile-photo-upload">{{$lbl_upfile}}</label>
-			<input name="userfile" class="form-input" type="file" id="profile-photo-upload" size="48" />
-			{{/if}}
-			<div class="clear"></div>
-
-
-			{{if $single}}
-			<input type="hidden" name="profile" value="{{$profile0.id}}" />
-			{{else}}
-
-
-
-			<label id="profile-photo-profiles-label" class="form-label" for="profile-photo-profiles">{{$lbl_profiles}}</label>
-			<select name="profile" id="profile-photo-profiles" class="form-control" >
-			{{foreach $profiles as $p}}
-				<option value="{{$p.id}}" {{if $p.selected}}selected="selected"{{/if}}>{{$p.name}}</option>
-			{{/foreach}}
-			</select>
-			<div class="clear"></div>
-			<br />
-			<br />
-			{{/if}}
-
-			<div id="profile-photo-submit-wrapper">
-			    <button type="submit" class="btn btn-outline-primary" name="submit" id="profile-photo-submit">{{$submit}}</button>
-				<button type="submit" class="btn btn-outline-danger" name="remove" id="profile-photo-remove">{{$remove}}</button>
-			</div>
-		</div>
+            add: function(e,data) {
+                data.formData = $('#profile-photo-form').serializeArray();
+                data.submit();
+				$('#profile-photo-upload-spinner').show();
+            },
 
-		</form>
-		<br />
-		<div id="profile-photo-link-select-wrapper">
-			<button id="embed-photo-wrapper" class="btn btn-default btn-primary" title="{{$embedPhotos}}" onclick="initializeEmbedPhotoDialog();return false;">
-			<i id="embed-photo" class="fa fa-file-image-o"></i> {{$select}}
-		</button>
-		</div>
-	</div>
-</div>
+            done: function(e,data) {
+				$('#profile-photo-upload-spinner').hide();
+                window.location.href = 'profile_photo/use/' + data.result.message + '?profile={{$profile_id}}';
+            }
 
-<div class="modal" id="embedPhotoModal" tabindex="-1" role="dialog" aria-labelledby="embedPhotoLabel" aria-hidden="true">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title" id="embedPhotoModalLabel">{{$embedPhotosModalTitle}}</h4>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
-			</div>
-			<div class="modal-body" id="embedPhotoModalBody" >
-				<div id="embedPhotoModalBodyAlbumListDialog" class="d-none">
-					<div id="embedPhotoModalBodyAlbumList"></div>
-				</div>
-				<div id="embedPhotoModalBodyAlbumDialog" class="d-none"></div>
-			</div>
-		</div><!-- /.modal-content -->
-	</div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
+        });
+
+        $('#profile-photo-submit').click(function(event) { event.preventDefault(); $('#invisible-photos-file-upload').trigger('click'); return false;});
+</script>
diff --git a/view/tpl/profile_vcard.tpl b/view/tpl/profile_vcard.tpl
index 9002d3742..3da580f60 100644
--- a/view/tpl/profile_vcard.tpl
+++ b/view/tpl/profile_vcard.tpl
@@ -1,16 +1,10 @@
 <div class="rounded mb-3 vcard-card h-card">
 	<div class="card mb-2">
 		<div class="row">
-			<div class="col-4" style="width: 7rem;">
-				{{if $editmenu}}
-				<a href="profile_photo" title="{{$change_photo}}">
-				{{/if}}
-					<div id="profile-photo-wrapper">
-						<img class="rounded-start u-photo" src="{{$profile.photo}}?rev={{$profile.picdate}}" alt="{{$profile.fullname}}" style="width: 6rem; height:6rem;">
-					</div>
-				{{if $editmenu}}
-				</a>
-				{{/if}}
+			<div class="col-4" style="width: fit-content;">
+				<div id="profile-photo-wrapper">
+					<img class="rounded-start u-photo" src="{{$profile.photo}}?rev={{$profile.picdate}}" alt="{{$profile.fullname}}" style="width: 6rem; height:6rem;">
+				</div>
 			</div>
 			<div class="col-7 m-1 p-0">
 				{{if $editmenu.multi}}
@@ -20,7 +14,6 @@
 						{{foreach $editmenu.menu.entries as $e}}
 						<a href="profiles/{{$e.id}}" class="dropdown-item"><img class="menu-img-1" src='{{$e.photo}}'> {{$e.profile_name}}</a>
 						{{/foreach}}
-						<a href="profile_photo" class="dropdown-item">{{$editmenu.menu.chg_photo}}</a>
 						{{if $editmenu.menu.cr_new}}
 						<a href="profiles/new" id="profile-listing-new-link" class="dropdown-item">{{$editmenu.menu.cr_new}}</a>
 						{{/if}}