| 1 | import { Placeholder, TextControl } from '@wordpress/components'; |
| 2 | import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; |
| 3 | import { __ } from '@wordpress/i18n'; |
| 4 | import MD5 from 'crypto-js/md5'; |
| 5 | |
| 6 | export default function Edit( { |
| 7 | attributes, |
| 8 | example, |
| 9 | className, |
| 10 | isSelected, |
| 11 | setAttributes, |
| 12 | } ) { |
| 13 | if ( attributes.size ) { |
| 14 | var sizes = attributes.size; |
| 15 | } else { |
| 16 | var sizes = 200; |
| 17 | } |
| 18 | if ( attributes.email ) { |
| 19 | var mail = attributes.email; |
| 20 | var addr = mail.toLowerCase().trim(); |
| 21 | var hash = MD5( addr ).toString(); |
| 22 | var url = '//www.gravatar.com/avatar/' + hash + '?s=' + sizes; |
| 23 | } |
| 24 | var height = sizes + 40; |
| 25 | return ( |
| 26 | <div className={ className }> |
| 27 | { attributes.email && ! isSelected ? ( |
| 28 | <figure |
| 29 | className={ className } |
| 30 | style={ { width: sizes + 'px', height: height + 'px' } } |
| 31 | > |
| 32 | <img |
| 33 | src={ url } |
| 34 | alt={ addr } |
| 35 | width={ sizes } |
| 36 | height={ sizes } |
| 37 | /> |
| 38 | <figcaption>{ attributes.caption }</figcaption> |
| 39 | </figure> |
| 40 | ) : ( |
| 41 | <Placeholder |
| 42 | label={ __( 'Gravatar', 'dnxvatar' ) } |
| 43 | instructions={ __( |
| 44 | 'Insert at least the email address', |
| 45 | 'dnxvatar' |
| 46 | ) } |
| 47 | > |
| 48 | <TextControl |
| 49 | placeholder={ 'danix@example.com' } |
| 50 | label={ __( 'Email', 'dnxvatar' ) } |
| 51 | value={ attributes.email } |
| 52 | onChange={ ( val ) => setAttributes( { email: val } ) } |
| 53 | /> |
| 54 | <TextControl |
| 55 | placeholder={ 'my profile photo' } |
| 56 | label={ __( 'Alt text', 'dnxvatar' ) } |
| 57 | value={ attributes.alt } |
| 58 | onChange={ ( val ) => setAttributes( { alt: val } ) } |
| 59 | /> |
| 60 | <TextControl |
| 61 | placeholder={ 'this is me...' } |
| 62 | label={ __( 'Caption', 'dnxvatar' ) } |
| 63 | value={ attributes.caption } |
| 64 | onChange={ ( val ) => |
| 65 | setAttributes( { caption: val } ) |
| 66 | } |
| 67 | /> |
| 68 | <NumberControl |
| 69 | placeholder={ '200' } |
| 70 | label={ __( 'Size', 'dnxvatar' ) } |
| 71 | isShiftStepEnabled={ true } |
| 72 | labelPosition={ 'top' } |
| 73 | onChange={ ( val ) => setAttributes( { size: val } ) } |
| 74 | shiftStep={ 10 } |
| 75 | value={ sizes } |
| 76 | /> |
| 77 | </Placeholder> |
| 78 | ) } |
| 79 | </div> |
| 80 | ); |
| 81 | } |