1 files changed, 81 insertions, 0 deletions
diff --git a/src/edit.js b/src/edit.js
new file mode 100644
index 0000000..fbd4149
--- /dev/null
+++ b/src/edit.js
@@ -0,0 +1,81 @@
+import { Placeholder, TextControl } from '@wordpress/components';
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import MD5 from 'crypto-js/md5';
+
+export default function Edit( {
+	attributes,
+	example,
+	className,
+	isSelected,
+	setAttributes,
+} ) {
+	if ( attributes.size ) {
+		var sizes = attributes.size;
+	} else {
+		var sizes = 200;
+	}
+	if ( attributes.email ) {
+		var mail = attributes.email;
+		var addr = mail.toLowerCase().trim();
+		var hash = MD5( addr ).toString();
+		var url = '//www.gravatar.com/avatar/' + hash + '?s=' + sizes;
+	}
+	var height = sizes + 40;
+	return (
+		<div className={ className }>
+			{ attributes.email && ! isSelected ? (
+				<figure
+					className={ className }
+					style={ { width: sizes + 'px', height: height + 'px' } }
+				>
+					<img
+						src={ url }
+						alt={ addr }
+						width={ sizes }
+						height={ sizes }
+					/>
+					<figcaption>{ attributes.caption }</figcaption>
+				</figure>
+			) : (
+				<Placeholder
+					label={ __( 'Gravatar', 'dnxvatar' ) }
+					instructions={ __(
+						'Insert at least the email address',
+						'dnxvatar'
+					) }
+				>
+					<TextControl
+						placeholder={ 'danix@example.com' }
+						label={ __( 'Email', 'dnxvatar' ) }
+						value={ attributes.email }
+						onChange={ ( val ) => setAttributes( { email: val } ) }
+					/>
+					<TextControl
+						placeholder={ 'my profile photo' }
+						label={ __( 'Alt text', 'dnxvatar' ) }
+						value={ attributes.alt }
+						onChange={ ( val ) => setAttributes( { alt: val } ) }
+					/>
+					<TextControl
+						placeholder={ 'this is me...' }
+						label={ __( 'Caption', 'dnxvatar' ) }
+						value={ attributes.caption }
+						onChange={ ( val ) =>
+							setAttributes( { caption: val } )
+						}
+					/>
+					<NumberControl
+						placeholder={ '200' }
+						label={ __( 'Size', 'dnxvatar' ) }
+						isShiftStepEnabled={ true }
+						labelPosition={ 'top' }
+						onChange={ ( val ) => setAttributes( { size: val } ) }
+						shiftStep={ 10 }
+						value={ sizes }
+					/>
+				</Placeholder>
+			) }
+		</div>
+	);
+}