1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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>
);
}
|
