refactor mod profile_photo

1 files changed, 84 insertions, 72 deletions

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>