Ensure avatar uploads are resized

assets/css/vendor/filepond/filepond-preview.css

@@ -0,0 +1,163 @@
+/*!
+ * FilePondPluginImagePreview 4.6.5
+ * Licensed under MIT, https://opensource.org/licenses/MIT/
+ * Please visit https://pqina.nl/filepond/ for details.
+ */
+
+/* eslint-disable */
+.filepond--image-preview-markup {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.filepond--image-preview-wrapper {
+  z-index: 2;
+}
+.filepond--image-preview-overlay {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  min-height: 5rem;
+  max-height: 7rem;
+  margin: 0;
+  opacity: 0;
+  z-index: 2;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.filepond--image-preview-overlay svg {
+  width: 100%;
+  height: auto;
+  color: inherit;
+  max-height: inherit;
+}
+.filepond--image-preview-overlay-idle {
+  mix-blend-mode: multiply;
+  color: rgba(40, 40, 40, 0.85);
+}
+.filepond--image-preview-overlay-success {
+  mix-blend-mode: normal;
+  color: rgb(0, 0, 255);
+}
+.filepond--image-preview-overlay-failure {
+  mix-blend-mode: normal;
+  color: rgba(196, 78, 71, 1);
+}
+/* disable for Safari as mix-blend-mode causes the overflow:hidden of the parent container to not work */
+@supports (-webkit-marquee-repetition: infinite) and
+  ((-o-object-fit: fill) or (object-fit: fill)) {
+  .filepond--image-preview-overlay-idle {
+    mix-blend-mode: normal;
+  }
+}
+.filepond--image-preview-wrapper {
+  /* no interaction */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  /* have preview fill up all available space */
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 100%;
+  margin: 0;
+
+  /* radius is .05em less to prevent the panel background color from shining through */
+  border-radius: 0.45em;
+  overflow: hidden;
+
+  /* this seems to prevent Chrome from redrawing this layer constantly */
+  background: rgba(0, 0, 0, 0.01);
+}
+.filepond--image-preview {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  display: flex; /* this aligns the graphic vertically if the panel is higher than the image */
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+  background: #222;
+
+  /* will be animated */
+  will-change: transform, opacity;
+}
+.filepond--image-clip {
+  position: relative;
+  overflow: hidden;
+  margin: 0 auto;
+
+  /* transparency indicator (currently only supports grid or basic color) */
+}
+.filepond--image-clip[data-transparency-indicator='grid'] img,
+.filepond--image-clip[data-transparency-indicator='grid'] canvas {
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M0 0 H50 V50 H0'/%3E%3Cpath d='M50 50 H100 V100 H50'/%3E%3C/svg%3E");
+  background-size: 1.25em 1.25em;
+}
+.filepond--image-bitmap,
+.filepond--image-vector {
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
+}
+.filepond--root[data-style-panel-layout~='integrated']
+  .filepond--image-preview-wrapper {
+  border-radius: 0;
+}
+.filepond--root[data-style-panel-layout~='integrated']
+  .filepond--image-preview {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.filepond--root[data-style-panel-layout~='circle']
+  .filepond--image-preview-wrapper {
+  border-radius: 99999rem;
+}
+.filepond--root[data-style-panel-layout~='circle']
+  .filepond--image-preview-overlay {
+  top: auto;
+  bottom: 0;
+  -webkit-transform: scaleY(-1);
+  transform: scaleY(-1);
+}
+.filepond--root[data-style-panel-layout~='circle']
+  .filepond--file
+  .filepond--file-action-button[data-align*='bottom']:not([data-align*='center']) {
+  margin-bottom: 0.325em;
+}
+.filepond--root[data-style-panel-layout~='circle']
+  .filepond--file
+  [data-align*='left'] {
+  left: calc(50% - 3em);
+}
+.filepond--root[data-style-panel-layout~='circle']
+  .filepond--file
+  [data-align*='right'] {
+  right: calc(50% - 3em);
+}
+.filepond--root[data-style-panel-layout~='circle']
+  .filepond--progress-indicator[data-align*='bottom'][data-align*='left'],
+.filepond--root[data-style-panel-layout~='circle']
+  .filepond--progress-indicator[data-align*='bottom'][data-align*='right'] {
+  margin-bottom: calc(0.325em + 0.1875em);
+}
+.filepond--root[data-style-panel-layout~='circle']
+  .filepond--progress-indicator[data-align*='bottom'][data-align*='center'] {
+  margin-top: 0;
+  margin-bottom: 0.1875em;
+  margin-left: 0.1875em;
+}

assets/js/src/wp-user-manager.js

@@ -1,3 +1,5 @@
+window.loadResources=function(e){return new Promise(function(t,n){var o=0,r=function(){++o===e.length&&t()};e.forEach(function(e){var t=e.split("?")[0];/\.css/.test(t)?function(e,t){var n=document.createElement("link");n.rel="stylesheet",n.href=e,n.onload=t,document.head.appendChild(n)}(e,r):/\.js/.test(t)&&function(e,t){var n=document.createElement("script");n.src=e,n.onload=t,document.head.appendChild(n)}(e,r)})})}
+
 jQuery( function( $ ) {
 	function initFields() {
 		$( '.wpum-multiselect:not(.wpum-clone-field)' ).each( function() {
@@ -170,4 +172,108 @@ jQuery( function( $ ) {
 		initFields();
 	} );
 
+	function removeFiles( field ) {
+		$.ajax({
+			type: 'POST',
+			url: wpumFrontend.ajaxurl,
+			data: {
+				key: $( field ).data( 'file-key' ),
+				path_key: $( field ).data( 'file-key' ),
+				nonce: $( field ).data( 'file-nonce' ),
+				action: 'wpum_delete_image',
+			},
+			success: function (d) {
+				$( '#' + $( field ).data( 'file-key' ) ).closest( '.field' ).find( '.wpum-uploaded-files' ).html( '' );
+			},
+		});
+	}
+	// load FilePond resources
+	var resources = [
+		'assets/css/vendor/filepond/filepond-preview.css',
+		'assets/css/vendor/filepond/filepond.min.css',
+		'assets/js/vendor/filepond/plugin/filepond-encode.min.js',
+		'assets/js/vendor/filepond/plugin/filepond-preview.min.js',
+		'assets/js/vendor/filepond/plugin/filepond-crop.min.js',
+		'assets/js/vendor/filepond/plugin/filepond-resize.min.js',
+		'assets/js/vendor/filepond/filepond.min.js',
+	].map(function(resource) { return wpumFrontend.pluginurl + resource });
+
+	loadResources(resources).then(function() {
+
+		// register plugins
+		FilePond.registerPlugin(
+			FilePondPluginFileEncode,
+			FilePondPluginImagePreview,
+			FilePondPluginImageCrop,
+			FilePondPluginImageResize,
+		);
+
+		var fields = [].slice.call(document.querySelectorAll('input[data-input-type="image"], #user_cover, #user_avatar'));
+		var ponds = fields.map(function(field, index) {
+
+			var files = [];
+
+			if ( $( field ).data( 'file-poster' ) !== '' ) {
+				files = [ {
+					source: $( field ).data( 'file-poster' ),
+					options: {
+						type: 'local',
+					}
+				} ];
+			}
+
+			var filetypes = $( field ).data( 'file_types' ).toString().split( '|' );
+			var acceptedtypes = filetypes.map( function( type ) {
+				return type.includes( '/') ? type : 'image/' + type;
+			});
+
+			return FilePond.create( field, {
+				credits: false,
+				allowFilePoster: true,
+				allowFileMetadata: true,
+				acceptedFileTypes: acceptedtypes,
+				fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
+					resolve(type);
+				}),
+				imageResizeTargetWidth: $( field ).data( 'file-width' ) ? $( field ).data( 'file-width' ) : $( field ).data( 'file-key' ) == 'user_avatar' ? 200  : null,
+				imageResizeTargetHeight: $( field ).data( 'file-height' ) ? $( field ).data( 'file-height' ) : $( field ).data( 'file-key' ) == 'user_avatar' ? 200  : null,
+				styleLoadIndicatorPosition: 'center bottom',
+				styleProgressIndicatorPosition: 'center bottom',
+				styleButtonRemoveItemPosition: 'center bottom',
+				styleButtonProcessItemPosition: 'center bottom',
+				stylePanelLayout: $( field ).data( 'file-key' ) == 'user_avatar' ? 'compact circle' : '',
+				server: {
+					url: wpumFrontend.ajaxurl,
+					process: {
+						method: 'POST',
+						ondata: ( formData ) => {
+							formData.append( 'action', 'wpum_upload_image' );
+							formData.append( 'key', $( field ).data( 'file-key' ) );
+							formData.append( 'nonce', $( field ).data( 'file-nonce' ) );
+							return formData;
+						},
+						onload: ( data ) => {
+							const resp = JSON.parse( data );
+							if ( resp ) {
+								var uploaded = resp.data.is_loggedin == 0 ? '<input type="hidden" class="input-text" name="current_'+ $( field ).data( 'file-key' ) +'[url]" value="'+ resp.data.url +'" /><input type="hidden" class="input-text" name="current_'+ $( field ).data( 'file-key' ) +'[path]" value="'+ resp.data.file +'" />' : '<input type="hidden" class="input-text" name="current_'+ $( field ).data( 'file-key' ) +'" value="'+ resp.data.url +'" />';
+								$( '#' + $( field ).data( 'file-key' ) ).closest( '.field' ).find( '.wpum-uploaded-files' ).html(`<div class="wpum-uploaded-file">${uploaded}</div>`);
+							}
+						},
+					},
+					load: '?action=wpum_load_image&key='+ $( field ).data( 'file-key' ) + '&',
+					remove: ( source, load, error ) => {
+						load();
+						removeFiles( field );
+					},
+					revert: '?action=wpum_delete_image&key='+$( field ).data( 'file-key' )+'&nonce='+ $( field ).data( 'file-nonce' ),
+					revert: (uniqueFileId, load, error) => {
+						load();
+						removeFiles( field );
+					}
+				},
+				files: files,
+			} );
+		} );
+	} );
+
 } );