70bd62ad |
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 | } |