@micromag/element-background 0.2.286

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -0
  2. package/es/index.js +130 -0
  3. package/lib/index.js +141 -0
  4. package/package.json +63 -0
package/assets/css/styles.css ADDED
@@ -0,0 +1 @@
1
+ .micromag-element-background-container,.micromag-element-background-container .micromag-element-background-video,.micromag-element-background-container .micromag-element-background-videoContainer{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-background-container{z-index:0;overflow:hidden;background-color:rgba(0,0,0,.25)}
package/es/index.js ADDED
@@ -0,0 +1,130 @@
1
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
+ import React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import classNames from 'classnames';
6
+ import { PropTypes as PropTypes$1 } from '@micromag/core';
7
+ import { getStyleFromColor, getOptimalImageUrl } from '@micromag/core/utils';
8
+ import Video from '@micromag/element-video';
9
+ import { getSizeWithinBounds } from '@folklore/size';
10
+
11
+ var styles = {"container":"micromag-element-background-container","video":"micromag-element-background-video","videoContainer":"micromag-element-background-videoContainer"};
12
+
13
+ var propTypes = {
14
+ width: PropTypes.number,
15
+ height: PropTypes.number,
16
+ fit: PropTypes.oneOf(['contain', 'cover']),
17
+ horizontalAlign: PropTypes.string,
18
+ verticalAlign: PropTypes.string,
19
+ repeat: PropTypes.bool,
20
+ color: PropTypes$1.color,
21
+ image: PropTypes$1.imageMedia,
22
+ video: PropTypes$1.videoMedia,
23
+ className: PropTypes.string,
24
+ playing: PropTypes.bool,
25
+ children: PropTypes.node
26
+ };
27
+ var defaultProps = {
28
+ width: null,
29
+ height: null,
30
+ fit: null,
31
+ horizontalAlign: 'center',
32
+ verticalAlign: 'center',
33
+ repeat: false,
34
+ color: null,
35
+ image: null,
36
+ video: null,
37
+ className: null,
38
+ playing: false,
39
+ children: null
40
+ };
41
+
42
+ var Background = function Background(_ref) {
43
+ var width = _ref.width,
44
+ height = _ref.height,
45
+ fit = _ref.fit,
46
+ horizontalAlign = _ref.horizontalAlign,
47
+ verticalAlign = _ref.verticalAlign,
48
+ repeat = _ref.repeat,
49
+ color = _ref.color,
50
+ image = _ref.image,
51
+ video = _ref.video,
52
+ className = _ref.className,
53
+ playing = _ref.playing,
54
+ children = _ref.children;
55
+ var hasSize = width > 0 && height > 0;
56
+ var sizeStyle = hasSize ? {
57
+ width: width,
58
+ height: height
59
+ } : null; // color
60
+
61
+ var finalStyle = _objectSpread(_objectSpread({}, sizeStyle), getStyleFromColor(color)); // image
62
+
63
+
64
+ if (image !== null) {
65
+ var finalUrl = getOptimalImageUrl(image, width, height);
66
+ finalStyle.backgroundImage = "url(\"".concat(finalUrl, "\")");
67
+ finalStyle.backgroundRepeat = repeat ? 'repeat' : 'no-repeat';
68
+ finalStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
69
+
70
+ if (fit !== null) {
71
+ finalStyle.backgroundSize = fit;
72
+ }
73
+ } // video
74
+
75
+
76
+ var hasVideo = video !== null;
77
+ var videoContainerStyle = {};
78
+
79
+ if (hasVideo) {
80
+ if (hasSize) {
81
+ var _ref2 = video || {},
82
+ _ref2$metadata = _ref2.metadata,
83
+ videoMetadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
84
+
85
+ var _ref3 = videoMetadata || {},
86
+ _ref3$width = _ref3.width,
87
+ videoWidth = _ref3$width === void 0 ? 0 : _ref3$width,
88
+ _ref3$height = _ref3.height,
89
+ videoHeight = _ref3$height === void 0 ? 0 : _ref3$height;
90
+
91
+ var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
92
+ cover: fit === 'cover' || fit === null
93
+ }),
94
+ _getSizeWithinBounds$ = _getSizeWithinBounds.width,
95
+ resizedVideoWidth = _getSizeWithinBounds$ === void 0 ? 0 : _getSizeWithinBounds$,
96
+ _getSizeWithinBounds$2 = _getSizeWithinBounds.height,
97
+ resizedVideoHeight = _getSizeWithinBounds$2 === void 0 ? 0 : _getSizeWithinBounds$2;
98
+
99
+ var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
100
+ var resizedVideoTop = -(resizedVideoHeight - height) / 2;
101
+ videoContainerStyle.width = resizedVideoWidth;
102
+ videoContainerStyle.height = resizedVideoHeight;
103
+ videoContainerStyle.left = resizedVideoLeft;
104
+ videoContainerStyle.top = resizedVideoTop;
105
+ } else {
106
+ videoContainerStyle.objectFit = 'cover';
107
+ }
108
+ }
109
+
110
+ return /*#__PURE__*/React.createElement("div", {
111
+ className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
112
+ style: finalStyle
113
+ }, hasVideo ? /*#__PURE__*/React.createElement("div", {
114
+ className: styles.videoContainer,
115
+ style: videoContainerStyle
116
+ }, /*#__PURE__*/React.createElement(Video, {
117
+ className: styles.video,
118
+ media: video,
119
+ autoPlay: playing,
120
+ initialMuted: true,
121
+ loop: true
122
+ })) : null, /*#__PURE__*/React.createElement("div", {
123
+ className: styles.content
124
+ }, children));
125
+ };
126
+
127
+ Background.propTypes = propTypes;
128
+ Background.defaultProps = defaultProps;
129
+
130
+ export default Background;
package/lib/index.js ADDED
@@ -0,0 +1,141 @@
1
+ 'use strict';
2
+
3
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
5
+ var React = require('react');
6
+ var PropTypes = require('prop-types');
7
+ var classNames = require('classnames');
8
+ var core = require('@micromag/core');
9
+ var utils = require('@micromag/core/utils');
10
+ var Video = require('@micromag/element-video');
11
+ var size = require('@folklore/size');
12
+
13
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+
15
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
16
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
17
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
19
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
20
+ var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
21
+
22
+ var styles = {"container":"micromag-element-background-container","video":"micromag-element-background-video","videoContainer":"micromag-element-background-videoContainer"};
23
+
24
+ var propTypes = {
25
+ width: PropTypes__default['default'].number,
26
+ height: PropTypes__default['default'].number,
27
+ fit: PropTypes__default['default'].oneOf(['contain', 'cover']),
28
+ horizontalAlign: PropTypes__default['default'].string,
29
+ verticalAlign: PropTypes__default['default'].string,
30
+ repeat: PropTypes__default['default'].bool,
31
+ color: core.PropTypes.color,
32
+ image: core.PropTypes.imageMedia,
33
+ video: core.PropTypes.videoMedia,
34
+ className: PropTypes__default['default'].string,
35
+ playing: PropTypes__default['default'].bool,
36
+ children: PropTypes__default['default'].node
37
+ };
38
+ var defaultProps = {
39
+ width: null,
40
+ height: null,
41
+ fit: null,
42
+ horizontalAlign: 'center',
43
+ verticalAlign: 'center',
44
+ repeat: false,
45
+ color: null,
46
+ image: null,
47
+ video: null,
48
+ className: null,
49
+ playing: false,
50
+ children: null
51
+ };
52
+
53
+ var Background = function Background(_ref) {
54
+ var width = _ref.width,
55
+ height = _ref.height,
56
+ fit = _ref.fit,
57
+ horizontalAlign = _ref.horizontalAlign,
58
+ verticalAlign = _ref.verticalAlign,
59
+ repeat = _ref.repeat,
60
+ color = _ref.color,
61
+ image = _ref.image,
62
+ video = _ref.video,
63
+ className = _ref.className,
64
+ playing = _ref.playing,
65
+ children = _ref.children;
66
+ var hasSize = width > 0 && height > 0;
67
+ var sizeStyle = hasSize ? {
68
+ width: width,
69
+ height: height
70
+ } : null; // color
71
+
72
+ var finalStyle = _objectSpread__default['default'](_objectSpread__default['default']({}, sizeStyle), utils.getStyleFromColor(color)); // image
73
+
74
+
75
+ if (image !== null) {
76
+ var finalUrl = utils.getOptimalImageUrl(image, width, height);
77
+ finalStyle.backgroundImage = "url(\"".concat(finalUrl, "\")");
78
+ finalStyle.backgroundRepeat = repeat ? 'repeat' : 'no-repeat';
79
+ finalStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
80
+
81
+ if (fit !== null) {
82
+ finalStyle.backgroundSize = fit;
83
+ }
84
+ } // video
85
+
86
+
87
+ var hasVideo = video !== null;
88
+ var videoContainerStyle = {};
89
+
90
+ if (hasVideo) {
91
+ if (hasSize) {
92
+ var _ref2 = video || {},
93
+ _ref2$metadata = _ref2.metadata,
94
+ videoMetadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
95
+
96
+ var _ref3 = videoMetadata || {},
97
+ _ref3$width = _ref3.width,
98
+ videoWidth = _ref3$width === void 0 ? 0 : _ref3$width,
99
+ _ref3$height = _ref3.height,
100
+ videoHeight = _ref3$height === void 0 ? 0 : _ref3$height;
101
+
102
+ var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
103
+ cover: fit === 'cover' || fit === null
104
+ }),
105
+ _getSizeWithinBounds$ = _getSizeWithinBounds.width,
106
+ resizedVideoWidth = _getSizeWithinBounds$ === void 0 ? 0 : _getSizeWithinBounds$,
107
+ _getSizeWithinBounds$2 = _getSizeWithinBounds.height,
108
+ resizedVideoHeight = _getSizeWithinBounds$2 === void 0 ? 0 : _getSizeWithinBounds$2;
109
+
110
+ var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
111
+ var resizedVideoTop = -(resizedVideoHeight - height) / 2;
112
+ videoContainerStyle.width = resizedVideoWidth;
113
+ videoContainerStyle.height = resizedVideoHeight;
114
+ videoContainerStyle.left = resizedVideoLeft;
115
+ videoContainerStyle.top = resizedVideoTop;
116
+ } else {
117
+ videoContainerStyle.objectFit = 'cover';
118
+ }
119
+ }
120
+
121
+ return /*#__PURE__*/React__default['default'].createElement("div", {
122
+ className: classNames__default['default']([styles.container, _defineProperty__default['default']({}, className, className !== null)]),
123
+ style: finalStyle
124
+ }, hasVideo ? /*#__PURE__*/React__default['default'].createElement("div", {
125
+ className: styles.videoContainer,
126
+ style: videoContainerStyle
127
+ }, /*#__PURE__*/React__default['default'].createElement(Video__default['default'], {
128
+ className: styles.video,
129
+ media: video,
130
+ autoPlay: playing,
131
+ initialMuted: true,
132
+ loop: true
133
+ })) : null, /*#__PURE__*/React__default['default'].createElement("div", {
134
+ className: styles.content
135
+ }, children));
136
+ };
137
+
138
+ Background.propTypes = propTypes;
139
+ Background.defaultProps = defaultProps;
140
+
141
+ module.exports = Background;
package/package.json ADDED
@@ -0,0 +1,63 @@
1
+ {
2
+ "name": "@micromag/element-background",
3
+ "version": "0.2.286",
4
+ "description": "",
5
+ "keywords": [
6
+ "javascript"
7
+ ],
8
+ "homepage": "https://github.com/urbania-media/micromag-js",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "git+https://github.com/urbania-media/micromag-js.git"
12
+ },
13
+ "author": {
14
+ "name": "Folklore",
15
+ "email": "info@folklore.email"
16
+ },
17
+ "contributors": [
18
+ {
19
+ "name": "David Mongeau-Petitpas",
20
+ "email": "dmp@folklore.email"
21
+ },
22
+ {
23
+ "name": "Nicolas Roy-Bourdages",
24
+ "email": "nrb@folklore.email"
25
+ },
26
+ {
27
+ "name": "Julien Carignan",
28
+ "email": "jc@folklore.email"
29
+ }
30
+ ],
31
+ "license": "ISC",
32
+ "main": "lib/index.js",
33
+ "module": "es/index.js",
34
+ "files": [
35
+ "lib",
36
+ "es",
37
+ "assets"
38
+ ],
39
+ "scripts": {
40
+ "prepare": "../../scripts/prepare-package.sh"
41
+ },
42
+ "devDependencies": {
43
+ "react": "^16.8.0"
44
+ },
45
+ "peerDependencies": {
46
+ "react": "^16.8.0"
47
+ },
48
+ "dependencies": {
49
+ "@babel/runtime": "^7.13.10",
50
+ "@folklore/size": "^0.1.14",
51
+ "@micromag/core": "^0.2.286",
52
+ "@micromag/element-video": "^0.2.286",
53
+ "classnames": "^2.2.6",
54
+ "lodash": "^4.17.20",
55
+ "prop-types": "^15.7.2",
56
+ "react-intl": "^5.12.1",
57
+ "uuid": "^8.3.2"
58
+ },
59
+ "publishConfig": {
60
+ "access": "public"
61
+ },
62
+ "gitHead": "380a52b4b3f57dc2535014af6241032f09055d40"
63
+ }