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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
7 | import { createElement } from "@wordpress/element";
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | import { isFromWordPress, createUpgradedEmbedBlock, getClassNames, fallback as _fallback } from './util';
|
13 | import EmbedControls from './embed-controls';
|
14 | import EmbedLoading from './embed-loading';
|
15 | import EmbedPlaceholder from './embed-placeholder';
|
16 | import EmbedPreview from './embed-preview';
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | import { kebabCase, toLower } from 'lodash';
|
22 |
|
23 |
|
24 |
|
25 |
|
26 | import { __, sprintf } from '@wordpress/i18n';
|
27 | import { Component, Fragment } from '@wordpress/element';
|
28 | export function getEmbedEditComponent(title, icon) {
|
29 | var responsive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
30 | return (
|
31 |
|
32 | function (_Component) {
|
33 | _inherits(_class, _Component);
|
34 |
|
35 | function _class() {
|
36 | var _this;
|
37 |
|
38 | _classCallCheck(this, _class);
|
39 |
|
40 | _this = _possibleConstructorReturn(this, _getPrototypeOf(_class).apply(this, arguments));
|
41 | _this.switchBackToURLInput = _this.switchBackToURLInput.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
42 | _this.setUrl = _this.setUrl.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
43 | _this.getAttributesFromPreview = _this.getAttributesFromPreview.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
44 | _this.setAttributesFromPreview = _this.setAttributesFromPreview.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
45 | _this.getResponsiveHelp = _this.getResponsiveHelp.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
46 | _this.toggleResponsive = _this.toggleResponsive.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
47 | _this.handleIncomingPreview = _this.handleIncomingPreview.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
48 | _this.state = {
|
49 | editingURL: false,
|
50 | url: _this.props.attributes.url
|
51 | };
|
52 |
|
53 | if (_this.props.preview) {
|
54 | _this.handleIncomingPreview();
|
55 | }
|
56 |
|
57 | return _this;
|
58 | }
|
59 |
|
60 | _createClass(_class, [{
|
61 | key: "handleIncomingPreview",
|
62 | value: function handleIncomingPreview() {
|
63 | var allowResponsive = this.props.attributes.allowResponsive;
|
64 | this.setAttributesFromPreview();
|
65 | var upgradedBlock = createUpgradedEmbedBlock(this.props, this.getAttributesFromPreview(this.props.preview, allowResponsive));
|
66 |
|
67 | if (upgradedBlock) {
|
68 | this.props.onReplace(upgradedBlock);
|
69 | }
|
70 | }
|
71 | }, {
|
72 | key: "componentDidUpdate",
|
73 | value: function componentDidUpdate(prevProps) {
|
74 | var hasPreview = undefined !== this.props.preview;
|
75 | var hadPreview = undefined !== prevProps.preview;
|
76 | var previewChanged = prevProps.preview && this.props.preview && this.props.preview.html !== prevProps.preview.html;
|
77 | var switchedPreview = previewChanged || hasPreview && !hadPreview;
|
78 | var switchedURL = this.props.attributes.url !== prevProps.attributes.url;
|
79 |
|
80 | if (switchedPreview || switchedURL) {
|
81 | if (this.props.cannotEmbed) {
|
82 |
|
83 | if (!this.props.fetching) {
|
84 |
|
85 |
|
86 | this.resubmitWithoutTrailingSlash();
|
87 | }
|
88 |
|
89 | return;
|
90 | }
|
91 |
|
92 | this.handleIncomingPreview();
|
93 | }
|
94 | }
|
95 | }, {
|
96 | key: "resubmitWithoutTrailingSlash",
|
97 | value: function resubmitWithoutTrailingSlash() {
|
98 | this.setState(function (prevState) {
|
99 | return {
|
100 | url: prevState.url.replace(/\/$/, '')
|
101 | };
|
102 | }, this.setUrl);
|
103 | }
|
104 | }, {
|
105 | key: "setUrl",
|
106 | value: function setUrl(event) {
|
107 | if (event) {
|
108 | event.preventDefault();
|
109 | }
|
110 |
|
111 | var url = this.state.url;
|
112 | var setAttributes = this.props.setAttributes;
|
113 | this.setState({
|
114 | editingURL: false
|
115 | });
|
116 | setAttributes({
|
117 | url: url
|
118 | });
|
119 | }
|
120 | |
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 | }, {
|
129 | key: "getAttributesFromPreview",
|
130 | value: function getAttributesFromPreview(preview) {
|
131 | var allowResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
132 | var attributes = {};
|
133 |
|
134 | var _preview$type = preview.type,
|
135 | type = _preview$type === void 0 ? 'rich' : _preview$type;
|
136 |
|
137 |
|
138 | var html = preview.html,
|
139 | providerName = preview.provider_name;
|
140 | var providerNameSlug = kebabCase(toLower('' !== providerName ? providerName : title));
|
141 |
|
142 | if (isFromWordPress(html)) {
|
143 | type = 'wp-embed';
|
144 | }
|
145 |
|
146 | if (html || 'photo' === type) {
|
147 | attributes.type = type;
|
148 | attributes.providerNameSlug = providerNameSlug;
|
149 | }
|
150 |
|
151 | attributes.className = getClassNames(html, this.props.attributes.className, responsive && allowResponsive);
|
152 | return attributes;
|
153 | }
|
154 | |
155 |
|
156 |
|
157 |
|
158 | }, {
|
159 | key: "setAttributesFromPreview",
|
160 | value: function setAttributesFromPreview() {
|
161 | var _this$props = this.props,
|
162 | setAttributes = _this$props.setAttributes,
|
163 | preview = _this$props.preview;
|
164 | var allowResponsive = this.props.attributes.allowResponsive;
|
165 | setAttributes(this.getAttributesFromPreview(preview, allowResponsive));
|
166 | }
|
167 | }, {
|
168 | key: "switchBackToURLInput",
|
169 | value: function switchBackToURLInput() {
|
170 | this.setState({
|
171 | editingURL: true
|
172 | });
|
173 | }
|
174 | }, {
|
175 | key: "getResponsiveHelp",
|
176 | value: function getResponsiveHelp(checked) {
|
177 | return checked ? __('This embed will preserve its aspect ratio when the browser is resized.') : __('This embed may not preserve its aspect ratio when the browser is resized.');
|
178 | }
|
179 | }, {
|
180 | key: "toggleResponsive",
|
181 | value: function toggleResponsive() {
|
182 | var _this$props$attribute = this.props.attributes,
|
183 | allowResponsive = _this$props$attribute.allowResponsive,
|
184 | className = _this$props$attribute.className;
|
185 | var html = this.props.preview.html;
|
186 | var newAllowResponsive = !allowResponsive;
|
187 | this.props.setAttributes({
|
188 | allowResponsive: newAllowResponsive,
|
189 | className: getClassNames(html, className, responsive && newAllowResponsive)
|
190 | });
|
191 | }
|
192 | }, {
|
193 | key: "render",
|
194 | value: function render() {
|
195 | var _this2 = this;
|
196 |
|
197 | var _this$state = this.state,
|
198 | url = _this$state.url,
|
199 | editingURL = _this$state.editingURL;
|
200 | var _this$props$attribute2 = this.props.attributes,
|
201 | caption = _this$props$attribute2.caption,
|
202 | type = _this$props$attribute2.type,
|
203 | allowResponsive = _this$props$attribute2.allowResponsive;
|
204 | var _this$props2 = this.props,
|
205 | fetching = _this$props2.fetching,
|
206 | setAttributes = _this$props2.setAttributes,
|
207 | isSelected = _this$props2.isSelected,
|
208 | className = _this$props2.className,
|
209 | preview = _this$props2.preview,
|
210 | cannotEmbed = _this$props2.cannotEmbed,
|
211 | themeSupportsResponsive = _this$props2.themeSupportsResponsive,
|
212 | tryAgain = _this$props2.tryAgain;
|
213 |
|
214 | if (fetching) {
|
215 | return createElement(EmbedLoading, null);
|
216 | }
|
217 |
|
218 |
|
219 | var label = sprintf(__('%s URL'), title);
|
220 |
|
221 | if (!preview || cannotEmbed || editingURL) {
|
222 | return createElement(EmbedPlaceholder, {
|
223 | icon: icon,
|
224 | label: label,
|
225 | onSubmit: this.setUrl,
|
226 | value: url,
|
227 | cannotEmbed: cannotEmbed,
|
228 | onChange: function onChange(event) {
|
229 | return _this2.setState({
|
230 | url: event.target.value
|
231 | });
|
232 | },
|
233 | fallback: function fallback() {
|
234 | return _fallback(url, _this2.props.onReplace);
|
235 | },
|
236 | tryAgain: tryAgain
|
237 | });
|
238 | }
|
239 |
|
240 | return createElement(Fragment, null, createElement(EmbedControls, {
|
241 | showEditButton: preview && !cannotEmbed,
|
242 | themeSupportsResponsive: themeSupportsResponsive,
|
243 | blockSupportsResponsive: responsive,
|
244 | allowResponsive: allowResponsive,
|
245 | getResponsiveHelp: this.getResponsiveHelp,
|
246 | toggleResponsive: this.toggleResponsive,
|
247 | switchBackToURLInput: this.switchBackToURLInput
|
248 | }), createElement(EmbedPreview, {
|
249 | preview: preview,
|
250 | className: className,
|
251 | url: url,
|
252 | type: type,
|
253 | caption: caption,
|
254 | onCaptionChange: function onCaptionChange(value) {
|
255 | return setAttributes({
|
256 | caption: value
|
257 | });
|
258 | },
|
259 | isSelected: isSelected,
|
260 | icon: icon,
|
261 | label: label
|
262 | }));
|
263 | }
|
264 | }]);
|
265 |
|
266 | return _class;
|
267 | }(Component)
|
268 | );
|
269 | }
|
270 |
|
\ | No newline at end of file |