-
Notifications
You must be signed in to change notification settings - Fork 4k
/
shared.js
108 lines (98 loc) · 3.16 KB
/
shared.js
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/**
* WordPress dependencies
*/
import { getBlobTypeByURL, isBlobURL } from '@wordpress/blob';
const POSITION_CLASSNAMES = {
'top left': 'is-position-top-left',
'top center': 'is-position-top-center',
'top right': 'is-position-top-right',
'center left': 'is-position-center-left',
'center center': 'is-position-center-center',
center: 'is-position-center-center',
'center right': 'is-position-center-right',
'bottom left': 'is-position-bottom-left',
'bottom center': 'is-position-bottom-center',
'bottom right': 'is-position-bottom-right',
};
export const IMAGE_BACKGROUND_TYPE = 'image';
export const VIDEO_BACKGROUND_TYPE = 'video';
export const COVER_MIN_HEIGHT = 50;
export const COVER_MAX_HEIGHT = 1000;
export const COVER_DEFAULT_HEIGHT = 300;
export function backgroundImageStyles( url ) {
return url ? { backgroundImage: `url(${ url })` } : {};
}
export const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
export function dimRatioToClass( ratio ) {
return ratio === 50 || ! ratio === undefined
? null
: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
}
export function attributesFromMedia( setAttributes, dimRatio ) {
return ( media ) => {
if ( ! media || ! media.url ) {
setAttributes( { url: undefined, id: undefined } );
return;
}
if ( isBlobURL( media.url ) ) {
media.type = getBlobTypeByURL( media.url );
}
let mediaType;
// for media selections originated from a file upload.
if ( media.media_type ) {
if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
mediaType = IMAGE_BACKGROUND_TYPE;
} else {
// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
// Videos contain the media type of 'file' in the object returned from the rest api.
mediaType = VIDEO_BACKGROUND_TYPE;
}
} else {
// for media selections originated from existing files in the media library.
if (
media.type !== IMAGE_BACKGROUND_TYPE &&
media.type !== VIDEO_BACKGROUND_TYPE
) {
return;
}
mediaType = media.type;
}
setAttributes( {
dimRatio: dimRatio === 100 ? 50 : dimRatio,
url: media.url,
id: media.id,
alt: media?.alt,
backgroundType: mediaType,
...( mediaType === VIDEO_BACKGROUND_TYPE
? { focalPoint: undefined, hasParallax: undefined }
: {} ),
} );
};
}
/**
* Checks of the contentPosition is the center (default) position.
*
* @param {string} contentPosition The current content position.
* @return {boolean} Whether the contentPosition is center.
*/
export function isContentPositionCenter( contentPosition ) {
return (
! contentPosition ||
contentPosition === 'center center' ||
contentPosition === 'center'
);
}
/**
* Retrieves the className for the current contentPosition.
* The default position (center) will not have a className.
*
* @param {string} contentPosition The current content position.
* @return {string} The className assigned to the contentPosition.
*/
export function getPositionClassName( contentPosition ) {
/*
* Only render a className if the contentPosition is not center (the default).
*/
if ( isContentPositionCenter( contentPosition ) ) return '';
return POSITION_CLASSNAMES[ contentPosition ];
}