https://www.tromso.kommune.no/modules/contrib/gutenberg/js/components/drupal-media-entity.js?tlu16d

1/**
2 * Generated by a build script. Do not modify.
3 * Check orginal .jsx file.
4 */
5/* eslint-disable */
6
7(function(wp2, Drupal2) {
8  const { element, blockEditor, components, data } = wp2;
9  const {
10    Placeholder,
11    Button,
12    FormFileUpload,
13    SelectControl,
14    PanelBody,
15    Toolbar
16  } = components;
17  const {
18    BlockIcon,
19    MediaUpload,
20    BlockControls,
21    InspectorControls,
22    URLInput
23  } = blockEditor;
24  const { Component, Fragment } = element;
25  const __ = Drupal2.t;
26  const { withSelect } = data;
27  class DrupalMediaEntity extends Component {
28    constructor(args) {
29      super(args);
30      this.state = {
31        value: "",
32        loading: false
33      };
34      this.insertMedia = this.insertMedia.bind(this);
35      this.openMediaEdit = this.openMediaEdit.bind(this);
36      this.onUpload = this.onUpload.bind(this);
37      this.changeViewMode = this.changeViewMode.bind(this);
38    }
39    onUpload(event) {
40      const { attributes, mediaUpload, onError } = this.props;
41      const { allowedTypes } = attributes;
42      mediaUpload({
43        allowedTypes,
44        filesList: event.target.files,
45        onError,
46        onFileChange: (fileData) => {
47          if (fileData && fileData[0] && fileData[0].media_entity && fileData[0].media_entity.id) {
48            this.insertMedia(fileData[0].media_entity.id);
49          }
50        }
51      });
52    }
53    changeViewMode(viewMode) {
54      const { setAttributes } = this.props;
55      setAttributes({
56        viewMode
57      });
58    }
59    insertMedia(mediaEntityId) {
60      const { setAttributes } = this.props;
61      if (Number.isNaN(mediaEntityId)) {
62        const regex = /\((\d*)\)$/;
63        const match = regex.exec(mediaEntityId);
64        [mediaEntityId] = match;
65      }
66      setAttributes({
67        mediaEntityIds: [mediaEntityId]
68      });
69      this.setState({ value: "" });
70    }
71    openMediaEdit(mediaEntityIds, clientId) {
72      this.setState({ loading: true });
73      const elementSettings = {
74        progress: { type: "throbber" },
75        dialogType: "modal",
76        dialog: { width: 800 },
77        dialogRenderer: null,
78        url: Drupal2.url(`media/${mediaEntityIds[0]}/edit?gutenberg`),
79        base: clientId
80      };
81      Drupal2.ajax(elementSettings).execute().done(() => {
82        this.setState({ loading: false });
83      });
84    }
85    render() {
86      const {
87        className,
88        isMediaLibraryEnabled,
89        mediaContent,
90        mediaViewModes,
91        attributes,
92        setAttributes,
93        isSelected,
94        clientId,
95        title = __("Media"),
96        icon = /* @__PURE__ */ React.createElement(BlockIcon, { icon: "admin-media" }),
97        isReadOnly,
98        readOnlyInstructions = __(
99          "Cannot edit this block. Probably mapped to a non-translatable field."
100        )
101      } = this.props;
102      const { value, loading } = this.state;
103      const { mediaEntityIds } = attributes;
104      const { view_modes: viewModes } = mediaContent;
105      const instructions = __(
106        "Upload a media file or pick one from your media library."
107      );
108      const placeholderClassName = [
109        "block-editor-media-placeholder",
110        "editor-media-placeholder",
111        className
112      ].join(" ");
113      if (Array.isArray(mediaViewModes) && mediaViewModes.length) {
114        const inspectorControls = /* @__PURE__ */ React.createElement(InspectorControls, null, !attributes.lockViewMode && /* @__PURE__ */ React.createElement(PanelBody, { title: __("Media entity settings") }, /* @__PURE__ */ React.createElement(
115          SelectControl,
116          {
117            label: __("View mode"),
118            value: attributes.viewMode,
119            options: mediaViewModes,
120            onChange: this.changeViewMode
121          }
122        )));
123        let html = viewModes.default.processedHtml;
124        if (viewModes[attributes.viewMode]) {
125          html = viewModes[attributes.viewMode].processedHtml;
126        }
127        return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: html } }

127), inspectorControls, /* @__PURE__ */ React.createElement(BlockControls, null, !isReadOnly && /* @__PURE__ */ React.createElement(
128          Toolbar,
129          {
130            controls: [
131              {
132                icon: "edit",
133                title: __("Edit media"),
134                onClick: () => this.openMediaEdit(mediaEntityIds, clientId)
135              },
136              {
137                icon: "no",
138                title: __("Clear media"),
139                onClick: () => setAttributes({ mediaEntityIds: [] })
140              }
141            ]
142          },
143          loading && /* @__PURE__ */ React.createElement("div", { className: "ajax-progress ajax-progress-throbber" }, /* @__PURE__ */ React.createElement("div", { className: "throbber" }, "\xA0"))
144        ), isReadOnly && /* @__PURE__ */ React.createElement(
145          Toolbar,
146          {
147            controls: [
148              {
149                icon: "edit",
150                title: __("Edit media"),
151                onClick: () => this.openMediaEdit(mediaEntityIds, clientId)
152              }
153            ]
154          },
155          loading && /* @__PURE__ */ React.createElement("div", { className: "ajax-progress ajax-progress-throbber" }, /* @__PURE__ */ React.createElement("div", { className: "throbber" }, "\xA0"))
156        )));
157      }
158      const fetchMedia = (search) => new Promise((resolve) => {
159        fetch(
160          Drupal2.url(
161            `editor/media/autocomplete?search=${encodeURIComponent(search)}`
162          )
163        ).then((response) => response.json()).then((json) => {
164          resolve(json);
165        });
166      });
167      const processMediaResult = (url) => {
168        this.setState({ value: url });
169      };
170      const linkId = "search_media_0001";
171      const content = isMediaLibraryEnabled ? /* @__PURE__ */ React.createElement(
172        MediaUpload,
173        {
174          onSelect: this.insertMedia,
175          allowedTypes: attributes.allowedTypes,
176          multiple: false,
177          handlesMediaEntity: true
178        }
179      ) : /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(
180        URLInput,
181        {
182          className: "media-entity-search-input",
183          value,
184          placeholder: __("Type media ID or text to search media"),
185          autoFocus: false,
186          onChange: processMediaResult,
187          disableSuggestions: !isSelected,
188          id: linkId,
189          hasBorder: true,
190          __experimentalFetchLinkSuggestions: fetchMedia
191        }
192      ), /* @__PURE__ */ React.createElement(
193        Button,
194        {
195          isLarge: true,
196          isPrimary: true,
197          title: __("Insert"),
198          onClick: () => this.insertMedia(value)
199        },
200        __("Insert")
201      ));
202      return /* @__PURE__ */ React.createElement(Fragment, null, !isReadOnly && /* @__PURE__ */ React.createElement(
203        Placeholder,
204        {
205          icon,
206          label: title,
207          instructions,
208          className: placeholderClassName
209        },

210        /* @__PURE__ */ React.createElement(
211          FormFileUpload,
212          {
213            onChange: this.onUpload,
214            accept: "image/*,video/*,audio/*,application/*",
215            multiple: false,
216            render: ({ openFileDialog }) => /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(
217              Button,
218              {
219                isLarge: true,
220                onClick: openFileDialog,
221                className: [
222                  "block-editor-media-placeholder__button",
223                  "editor-media-placeholder__button",
224                  "block-editor-media-placeholder__upload-button"
225                ].join(" "),
226                icon: "upload"
227              },
228              __("Upload")
229            ))
230          }
231        ),
232        content
233      ), isReadOnly && /* @__PURE__ */ React.createElement(
234        Placeholder,
235        {
236          icon,
237          label: title,
238          instructions: readOnlyInstructions,
239          className: placeholderClassName
240        }
241      ));
242    }
243  }
244  const createClass = withSelect((select, props) => {
245    const { getSettings } = select("core/block-editor");
246    const { getMediaEntity } = select("drupal");
247    const { attributes } = props;
248    const mediaEntityIds = attributes.mediaEntityIds || [];
249    const defaultData = {
250      mediaContent: {},
251      mediaViewModes: [],
252      mediaUpload: getSettings().mediaUpload
253    };
254    if (!mediaEntityIds.length) {
255      return defaultData;
256    }
257    const mediaEntity = getMediaEntity(mediaEntityIds[0]);
258    if (!mediaEntity) {
259      return defaultData;
260    }
261    const { view_modes: viewModes } = mediaEntity;
262    const mediaViewModes = [];
263    if (Object.keys(viewModes).length) {
264      for (const viewMode in viewModes) {
265        if (!viewModes.hasOwnProperty(viewMode)) {
266          continue;
267        }
268        mediaViewModes.push({
269          value: viewModes[viewMode].view_mode,
270          label: viewModes[viewMode].view_mode_name
271        });
272        const node = document.createElement("div");
273        node.innerHTML = viewModes[viewMode].html;
274        const formElements = node.querySelectorAll(
275          "input, select, button, textarea, a"
276        );
277        formElements.forEach((el) => {
278          el.setAttribute("readonly", true);
279          el.setAttribute("required", false);
280          if (el.tagName === "A") {
281            el.removeAttribute("href");
282          }
283        });
284        viewModes[viewMode].processedHtml = node.innerHTML;
285      }
286    }
287    return {
288      mediaContent: mediaEntity,
289      mediaViewModes,
290      mediaUpload: getSettings().mediaUpload
291    };
292  })(DrupalMediaEntity);
293  window.DrupalGutenberg = window.DrupalGutenberg || {};
294  window.DrupalGutenberg.Components = window.DrupalGutenberg.Components || {};
295  window.DrupalGutenberg.Components.DrupalMediaEntity = createClass;
296})(wp, Drupal);