1 | import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
2 | import _createClass from "@babel/runtime/helpers/esm/createClass";
|
3 | import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
4 | import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
5 | import _inherits from "@babel/runtime/helpers/esm/inherits";
|
6 | import { createElement } from "@wordpress/element";
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | import { IconButton, ResizableBox, Toolbar } from '@wordpress/components';
|
12 | import { BlockControls, BlockIcon, MediaPlaceholder, MediaUpload } from '@wordpress/block-editor';
|
13 | import { Component, Fragment } from '@wordpress/element';
|
14 | import { __ } from '@wordpress/i18n';
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | import icon from './media-container-icon';
|
20 |
|
21 |
|
22 |
|
23 |
|
24 | var ALLOWED_MEDIA_TYPES = ['image', 'video'];
|
25 |
|
26 | var MediaContainer =
|
27 |
|
28 | function (_Component) {
|
29 | _inherits(MediaContainer, _Component);
|
30 |
|
31 | function MediaContainer() {
|
32 | _classCallCheck(this, MediaContainer);
|
33 |
|
34 | return _possibleConstructorReturn(this, _getPrototypeOf(MediaContainer).apply(this, arguments));
|
35 | }
|
36 |
|
37 | _createClass(MediaContainer, [{
|
38 | key: "renderToolbarEditButton",
|
39 | value: function renderToolbarEditButton() {
|
40 | var _this$props = this.props,
|
41 | mediaId = _this$props.mediaId,
|
42 | onSelectMedia = _this$props.onSelectMedia;
|
43 | return createElement(BlockControls, null, createElement(Toolbar, null, createElement(MediaUpload, {
|
44 | onSelect: onSelectMedia,
|
45 | allowedTypes: ALLOWED_MEDIA_TYPES,
|
46 | value: mediaId,
|
47 | render: function render(_ref) {
|
48 | var open = _ref.open;
|
49 | return createElement(IconButton, {
|
50 | className: "components-toolbar__control",
|
51 | label: __('Edit media'),
|
52 | icon: "edit",
|
53 | onClick: open
|
54 | });
|
55 | }
|
56 | })));
|
57 | }
|
58 | }, {
|
59 | key: "renderImage",
|
60 | value: function renderImage() {
|
61 | var _this$props2 = this.props,
|
62 | mediaAlt = _this$props2.mediaAlt,
|
63 | mediaUrl = _this$props2.mediaUrl,
|
64 | className = _this$props2.className;
|
65 | return createElement(Fragment, null, this.renderToolbarEditButton(), createElement("figure", {
|
66 | className: className
|
67 | }, createElement("img", {
|
68 | src: mediaUrl,
|
69 | alt: mediaAlt
|
70 | })));
|
71 | }
|
72 | }, {
|
73 | key: "renderVideo",
|
74 | value: function renderVideo() {
|
75 | var _this$props3 = this.props,
|
76 | mediaUrl = _this$props3.mediaUrl,
|
77 | className = _this$props3.className;
|
78 | return createElement(Fragment, null, this.renderToolbarEditButton(), createElement("figure", {
|
79 | className: className
|
80 | }, createElement("video", {
|
81 | controls: true,
|
82 | src: mediaUrl
|
83 | })));
|
84 | }
|
85 | }, {
|
86 | key: "renderPlaceholder",
|
87 | value: function renderPlaceholder() {
|
88 | var _this$props4 = this.props,
|
89 | onSelectMedia = _this$props4.onSelectMedia,
|
90 | className = _this$props4.className;
|
91 | return createElement(MediaPlaceholder, {
|
92 | icon: createElement(BlockIcon, {
|
93 | icon: icon
|
94 | }),
|
95 | labels: {
|
96 | title: __('Media area')
|
97 | },
|
98 | className: className,
|
99 | onSelect: onSelectMedia,
|
100 | accept: "image/*,video/*",
|
101 | allowedTypes: ALLOWED_MEDIA_TYPES
|
102 | });
|
103 | }
|
104 | }, {
|
105 | key: "render",
|
106 | value: function render() {
|
107 | var _this$props5 = this.props,
|
108 | mediaPosition = _this$props5.mediaPosition,
|
109 | mediaUrl = _this$props5.mediaUrl,
|
110 | mediaType = _this$props5.mediaType,
|
111 | mediaWidth = _this$props5.mediaWidth,
|
112 | commitWidthChange = _this$props5.commitWidthChange,
|
113 | onWidthChange = _this$props5.onWidthChange;
|
114 |
|
115 | if (mediaType && mediaUrl) {
|
116 | var onResize = function onResize(event, direction, elt) {
|
117 | onWidthChange(parseInt(elt.style.width));
|
118 | };
|
119 |
|
120 | var onResizeStop = function onResizeStop(event, direction, elt) {
|
121 | commitWidthChange(parseInt(elt.style.width));
|
122 | };
|
123 |
|
124 | var enablePositions = {
|
125 | right: mediaPosition === 'left',
|
126 | left: mediaPosition === 'right'
|
127 | };
|
128 | var mediaElement = null;
|
129 |
|
130 | switch (mediaType) {
|
131 | case 'image':
|
132 | mediaElement = this.renderImage();
|
133 | break;
|
134 |
|
135 | case 'video':
|
136 | mediaElement = this.renderVideo();
|
137 | break;
|
138 | }
|
139 |
|
140 | return createElement(ResizableBox, {
|
141 | className: "editor-media-container__resizer",
|
142 | size: {
|
143 | width: mediaWidth + '%'
|
144 | },
|
145 | minWidth: "10%",
|
146 | maxWidth: "100%",
|
147 | enable: enablePositions,
|
148 | onResize: onResize,
|
149 | onResizeStop: onResizeStop,
|
150 | axis: "x"
|
151 | }, mediaElement);
|
152 | }
|
153 |
|
154 | return this.renderPlaceholder();
|
155 | }
|
156 | }]);
|
157 |
|
158 | return MediaContainer;
|
159 | }(Component);
|
160 |
|
161 | export default MediaContainer;
|
162 |
|
\ | No newline at end of file |