PluginProbe
Image Hub – Free Images from Unsplash, Pixabay, Pexels, Openverse & Giphy / trunk
Image Hub – Free Images from Unsplash, Pixabay, Pexels, Openverse & Giphy vtrunk
1.2.0 trunk 1.0.11 1.0.8 1.0.9 1.1.0
image-hub / build / settings.js

settings.js in Image Hub – Free Images from Unsplash, Pixabay, Pexels, Openverse & Giphy trunk, at build/settings.js

1,327 lines 70.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /******/ (() => { // webpackBootstrap
2 /******/ "use strict";
3 /******/ var __webpack_modules__ = ({
4
5 /***/ 338:
6 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
7
8 var __webpack_unused_export__;
9
10
11 var m = __webpack_require__(795);
12 if (true) {
13 exports.H = m.createRoot;
14 __webpack_unused_export__ = m.hydrateRoot;
15 } else { var i; }
16
17
18 /***/ }),
19
20 /***/ 795:
21 /***/ ((module) => {
22
23 module.exports = window["ReactDOM"];
24
25 /***/ })
26
27 /******/ });
28 /************************************************************************/
29 /******/ // The module cache
30 /******/ var __webpack_module_cache__ = {};
31 /******/
32 /******/ // The require function
33 /******/ function __webpack_require__(moduleId) {
34 /******/ // Check if module is in cache
35 /******/ var cachedModule = __webpack_module_cache__[moduleId];
36 /******/ if (cachedModule !== undefined) {
37 /******/ return cachedModule.exports;
38 /******/ }
39 /******/ // Create a new module (and put it into the cache)
40 /******/ var module = __webpack_module_cache__[moduleId] = {
41 /******/ // no module.id needed
42 /******/ // no module.loaded needed
43 /******/ exports: {}
44 /******/ };
45 /******/
46 /******/ // Execute the module function
47 /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
48 /******/
49 /******/ // Return the exports of the module
50 /******/ return module.exports;
51 /******/ }
52 /******/
53 /************************************************************************/
54 /******/ /* webpack/runtime/compat get default export */
55 /******/ (() => {
56 /******/ // getDefaultExport function for compatibility with non-harmony modules
57 /******/ __webpack_require__.n = (module) => {
58 /******/ var getter = module && module.__esModule ?
59 /******/ () => (module['default']) :
60 /******/ () => (module);
61 /******/ __webpack_require__.d(getter, { a: getter });
62 /******/ return getter;
63 /******/ };
64 /******/ })();
65 /******/
66 /******/ /* webpack/runtime/define property getters */
67 /******/ (() => {
68 /******/ // define getter functions for harmony exports
69 /******/ __webpack_require__.d = (exports, definition) => {
70 /******/ for(var key in definition) {
71 /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
72 /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
73 /******/ }
74 /******/ }
75 /******/ };
76 /******/ })();
77 /******/
78 /******/ /* webpack/runtime/hasOwnProperty shorthand */
79 /******/ (() => {
80 /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
81 /******/ })();
82 /******/
83 /************************************************************************/
84 var __webpack_exports__ = {};
85
86 ;// external "React"
87 const external_React_namespaceObject = window["React"];
88 var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_namespaceObject);
89 // EXTERNAL MODULE: ./node_modules/react-dom/client.js
90 var client = __webpack_require__(338);
91 ;// external ["wp","primitives"]
92 const external_wp_primitives_namespaceObject = window["wp"]["primitives"];
93 ;// external "ReactJSXRuntime"
94 const external_ReactJSXRuntime_namespaceObject = window["ReactJSXRuntime"];
95 ;// ./node_modules/@wordpress/icons/build-module/library/chevron-right.js
96 /**
97 * WordPress dependencies
98 */
99
100
101 const chevronRight = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
102 xmlns: "http://www.w3.org/2000/svg",
103 viewBox: "0 0 24 24",
104 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
105 d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"
106 })
107 });
108 /* harmony default export */ const chevron_right = (chevronRight);
109 //# sourceMappingURL=chevron-right.js.map
110 ;// external ["wp","components"]
111 const external_wp_components_namespaceObject = window["wp"]["components"];
112 ;// ./node_modules/@wordpress/icons/build-module/library/cog.js
113 /**
114 * WordPress dependencies
115 */
116
117
118 const cog = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
119 xmlns: "http://www.w3.org/2000/svg",
120 viewBox: "0 0 24 24",
121 children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
122 fillRule: "evenodd",
123 d: "M10.289 4.836A1 1 0 0111.275 4h1.306a1 1 0 01.987.836l.244 1.466c.787.26 1.503.679 2.108 1.218l1.393-.522a1 1 0 011.216.437l.653 1.13a1 1 0 01-.23 1.273l-1.148.944a6.025 6.025 0 010 2.435l1.149.946a1 1 0 01.23 1.272l-.653 1.13a1 1 0 01-1.216.437l-1.394-.522c-.605.54-1.32.958-2.108 1.218l-.244 1.466a1 1 0 01-.987.836h-1.306a1 1 0 01-.986-.836l-.244-1.466a5.995 5.995 0 01-2.108-1.218l-1.394.522a1 1 0 01-1.217-.436l-.653-1.131a1 1 0 01.23-1.272l1.149-.946a6.026 6.026 0 010-2.435l-1.148-.944a1 1 0 01-.23-1.272l.653-1.131a1 1 0 011.217-.437l1.393.522a5.994 5.994 0 012.108-1.218l.244-1.466zM14.929 12a3 3 0 11-6 0 3 3 0 016 0z",
124 clipRule: "evenodd"
125 })
126 });
127 /* harmony default export */ const library_cog = (cog);
128 //# sourceMappingURL=cog.js.map
129 ;// ./src/components/Logo.js
130 var _image_hub_data, _image_hub_data2;
131
132
133 var logoUrl = (_image_hub_data = image_hub_data) === null || _image_hub_data === void 0 ? void 0 : _image_hub_data.imageUrl;
134 var version = (_image_hub_data2 = image_hub_data) === null || _image_hub_data2 === void 0 ? void 0 : _image_hub_data2.version;
135 var Logo = function Logo() {
136 var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
137 _ref$enableBrowseButt = _ref.enableBrowseButton,
138 enableBrowseButton = _ref$enableBrowseButt === void 0 ? false : _ref$enableBrowseButt,
139 _ref$enableSettingsBu = _ref.enableSettingsButton,
140 enableSettingsButton = _ref$enableSettingsBu === void 0 ? false : _ref$enableSettingsBu;
141 var handleRedirect = function handleRedirect() {
142 var _image_hub_data3;
143 var adminUrl = ((_image_hub_data3 = image_hub_data) === null || _image_hub_data3 === void 0 ? void 0 : _image_hub_data3.adminUrl) || "/wp-admin/";
144 window.location.assign("".concat(adminUrl, "upload.php?page=image-hub-media-tab"));
145 };
146 var handleRedirectSettings = function handleRedirectSettings() {
147 var _image_hub_data4;
148 var adminUrl = ((_image_hub_data4 = image_hub_data) === null || _image_hub_data4 === void 0 ? void 0 : _image_hub_data4.adminUrl) || "/wp-admin/";
149 window.location.assign("".concat(adminUrl, "options-general.php?page=image-hub-settings-page"));
150 };
151 return /*#__PURE__*/React.createElement("div", {
152 style: {
153 display: "flex",
154 justifyContent: "space-between",
155 paddingRight: "20px"
156 }
157 }, /*#__PURE__*/React.createElement("div", {
158 className: "image-hub-logo-container"
159 }, /*#__PURE__*/React.createElement("div", {
160 className: "image-hub-logo"
161 }, /*#__PURE__*/React.createElement("img", {
162 src: logoUrl,
163 alt: "Plugin Logo"
164 })), /*#__PURE__*/React.createElement("div", {
165 className: "image-hub-logo-text"
166 }, /*#__PURE__*/React.createElement("h1", null, "Image Hub"))), !!enableBrowseButton && /*#__PURE__*/React.createElement(external_wp_components_namespaceObject.Button, {
167 variant: "primary",
168 onClick: handleRedirect
169 }, "Browse Images"), !!enableSettingsButton && /*#__PURE__*/React.createElement(external_wp_components_namespaceObject.Button, {
170 icon: library_cog,
171 style: {
172 background: "white"
173 },
174 variant: "secondary",
175 onClick: handleRedirectSettings
176 }, "Settings"));
177 };
178 /* harmony default export */ const components_Logo = (Logo);
179 ;// external ["wp","i18n"]
180 const external_wp_i18n_namespaceObject = window["wp"]["i18n"];
181 ;// ./src/components/AppHeader.js
182 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
183 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
184 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
185 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
186 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
187 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
188
189
190 var AppHeader = function AppHeader() {
191 var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
192 _ref$enableBrowseButt = _ref.enableBrowseButton,
193 enableBrowseButton = _ref$enableBrowseButt === void 0 ? false : _ref$enableBrowseButt,
194 _ref$enableSettingsBu = _ref.enableSettingsButton,
195 enableSettingsButton = _ref$enableSettingsBu === void 0 ? false : _ref$enableSettingsBu,
196 _ref$style = _ref.style,
197 style = _ref$style === void 0 ? {} : _ref$style;
198 return /*#__PURE__*/React.createElement("div", {
199 style: _objectSpread({
200 paddingTop: "20px",
201 paddingLeft: "20px"
202 }, style)
203 }, /*#__PURE__*/React.createElement(components_Logo, {
204 enableBrowseButton: enableBrowseButton,
205 enableSettingsButton: enableSettingsButton
206 }), /*#__PURE__*/React.createElement("p", {
207 style: {
208 marginBottom: 0
209 },
210 className: "image-hub-text-under-logo"
211 }, (0,external_wp_i18n_namespaceObject.__)("Search and insert images from", "image-hub"), " ", /*#__PURE__*/React.createElement("a", {
212 href: "https://unsplash.com",
213 target: "_blank",
214 className: "provider"
215 }, "Unsplash"), ",", " ", /*#__PURE__*/React.createElement("a", {
216 href: "https://openverse.org",
217 target: "_blank",
218 className: "provider"
219 }, "Openverse"), ",", " ", /*#__PURE__*/React.createElement("a", {
220 href: "https://pixabay.com",
221 target: "_blank",
222 className: "provider"
223 }, "Pixabay"), ",", " ", /*#__PURE__*/React.createElement("a", {
224 href: "https://giphy.com",
225 target: "_blank",
226 className: "provider"
227 }, "Giphy"), ",", " ", /*#__PURE__*/React.createElement("a", {
228 href: "https://pexels.com",
229 target: "_blank",
230 className: "provider"
231 }, "Pexels"), " ", (0,external_wp_i18n_namespaceObject.__)(" directly in WordPress. No need to visit external websites—find, preview, and")), /*#__PURE__*/React.createElement("p", {
232 style: {
233 marginTop: 0
234 },
235 className: "image-hub-text-under-logo"
236 }, (0,external_wp_i18n_namespaceObject.__)("download images straight from the media library or editor.")));
237 };
238 ;// ./src/context/useSettings.js
239
240 var __settings = image_hub_settings;
241 var getImageHubSettings = function getImageHubSettings() {
242 var imageHubSettings = (0,external_React_namespaceObject.useMemo)(function () {
243 return {
244 image_hub_api_keys_giphy_api_key: __settings.image_hub_api_keys_giphy_api_key,
245 image_hub_api_keys_openverse_client_id: __settings.image_hub_api_keys_openverse_client_id,
246 image_hub_api_keys_openverse_client_secret: __settings.image_hub_api_keys_openverse_client_secret,
247 image_hub_api_keys_pexels_api_key: __settings.image_hub_api_keys_pexels_api_key,
248 image_hub_api_keys_pixabay_api_key: __settings.image_hub_api_keys_pixabay_api_key,
249 image_hub_api_keys_unsplash_access_key: __settings.image_hub_api_keys_unsplash_access_key,
250 image_hub_enable_giphy: __settings.image_hub_enable_giphy === "1",
251 image_hub_enable_image_attribution: __settings.image_hub_enable_image_attribution === "1",
252 image_hub_enable_media_modal: __settings.image_hub_enable_media_modal === "1",
253 image_hub_enable_openverse: __settings.image_hub_enable_openverse === "1",
254 image_hub_enable_pexels: __settings.image_hub_enable_pexels === "1",
255 image_hub_enable_pixabay: __settings.image_hub_enable_pixabay === "1",
256 image_hub_enable_unsplash: __settings.image_hub_enable_unsplash === "1",
257 image_hub_use_default_keys: __settings.image_hub_use_default_keys === "1",
258 image_hub_max_image_height: parseInt(__settings.image_hub_max_image_height, 10),
259 image_hub_max_image_width: parseInt(__settings.image_hub_max_image_width, 10)
260 };
261 }, [__settings]);
262 var apiKeys = (0,external_React_namespaceObject.useMemo)(function () {
263 return {
264 giphy_api_key: __settings.image_hub_api_keys_giphy_api_key,
265 openverse_client_id: __settings.image_hub_api_keys_openverse_client_id,
266 openverse_client_secret: __settings.image_hub_api_keys_openverse_client_secret,
267 pexels_api_key: __settings.image_hub_api_keys_pexels_api_key,
268 pixabay_api_key: __settings.image_hub_api_keys_pixabay_api_key,
269 unsplash_access_key: __settings.image_hub_api_keys_unsplash_access_key,
270 image_hub_use_default_keys: __settings.image_hub_use_default_keys === "1"
271 };
272 }, [__settings]);
273 return {
274 imageHubSettings: imageHubSettings,
275 apiKeys: apiKeys,
276 isLoading: false
277 };
278 };
279 ;// ./src/components/settings/General.js
280 function General_typeof(o) { "@babel/helpers - typeof"; return General_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, General_typeof(o); }
281 function General_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
282 function General_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? General_ownKeys(Object(t), !0).forEach(function (r) { General_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : General_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
283 function General_defineProperty(e, r, t) { return (r = General_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
284 function General_toPropertyKey(t) { var i = General_toPrimitive(t, "string"); return "symbol" == General_typeof(i) ? i : i + ""; }
285 function General_toPrimitive(t, r) { if ("object" != General_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != General_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
286 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
287 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
288 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
289 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
290 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
291 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
292
293
294
295
296 var ajaxUrl = image_hub_data.ajaxurl;
297 var nonce = image_hub_data.nonce;
298 var DEFAULT_STATE = {
299 image_hub_enable_unsplash: true,
300 image_hub_enable_openverse: true,
301 image_hub_enable_pixabay: true,
302 image_hub_enable_pexels: true,
303 image_hub_enable_giphy: true,
304 image_hub_enable_image_attribution: true,
305 image_hub_enable_media_modal: true
306 };
307 var UnforwardedGeneral = function UnforwardedGeneral(props, ref) {
308 // Single settings state object with all settings
309 var _useState = (0,external_React_namespaceObject.useState)(DEFAULT_STATE),
310 _useState2 = _slicedToArray(_useState, 2),
311 settings = _useState2[0],
312 setSettings = _useState2[1];
313 var _useState3 = (0,external_React_namespaceObject.useState)(DEFAULT_STATE),
314 _useState4 = _slicedToArray(_useState3, 2),
315 originalSettings = _useState4[0],
316 setOriginalSettings = _useState4[1];
317 var hasSettingsChanged = function hasSettingsChanged() {
318 return Object.keys(DEFAULT_STATE).some(function (key) {
319 return settings[key] !== originalSettings[key];
320 });
321 };
322 var _useState5 = (0,external_React_namespaceObject.useState)(false),
323 _useState6 = _slicedToArray(_useState5, 2),
324 isSaving = _useState6[0],
325 setIsSaving = _useState6[1];
326 var _useState7 = (0,external_React_namespaceObject.useState)(""),
327 _useState8 = _slicedToArray(_useState7, 2),
328 saveMessage = _useState8[0],
329 setSaveMessage = _useState8[1];
330 var _useState9 = (0,external_React_namespaceObject.useState)(""),
331 _useState10 = _slicedToArray(_useState9, 2),
332 saveStatus = _useState10[0],
333 setSaveStatus = _useState10[1];
334 function countTrueExcludingImageAndMedia(obj) {
335 return Object.entries(obj).reduce(function (count, _ref) {
336 var _ref2 = _slicedToArray(_ref, 2),
337 key = _ref2[0],
338 value = _ref2[1];
339 if (value === true && !key.includes("attribution") && !key.includes("media")) {
340 count++;
341 }
342 return count;
343 }, 0);
344 }
345
346 // Provider metadata
347 var providers = [{
348 id: "image_hub_enable_unsplash",
349 label: "Unsplash.com",
350 description: (0,external_wp_i18n_namespaceObject.__)("High-quality stock images from professional photographers.")
351 }, {
352 id: "image_hub_enable_openverse",
353 label: "Openverse",
354 description: (0,external_wp_i18n_namespaceObject.__)("A large library of openly licensed images from various sources.")
355 }, {
356 id: "image_hub_enable_pixabay",
357 label: "Pixabay.com",
358 description: (0,external_wp_i18n_namespaceObject.__)("Free images, videos, and graphics for commercial use.")
359 }, {
360 id: "image_hub_enable_pexels",
361 label: "Pexels.com",
362 description: (0,external_wp_i18n_namespaceObject.__)("Curated free stock photos and videos from creators.")
363 }, {
364 id: "image_hub_enable_giphy",
365 label: "Giphy",
366 description: (0,external_wp_i18n_namespaceObject.__)("Search and insert GIFs directly into your media library.")
367 }];
368 var _getImageHubSettings = getImageHubSettings(),
369 imageHubSettings = _getImageHubSettings.imageHubSettings,
370 isLoading = _getImageHubSettings.isLoading;
371 (0,external_React_namespaceObject.useEffect)(function () {
372 var updatedSettings = General_objectSpread({}, settings);
373 Object.keys(updatedSettings).forEach(function (key) {
374 updatedSettings[key] = !!imageHubSettings[key];
375 });
376 setOriginalSettings(updatedSettings);
377 setSettings(updatedSettings);
378 }, [imageHubSettings]);
379
380 // Generic handler for any setting change
381 var handleSettingChange = function handleSettingChange(key, value) {
382 setSettings(function (prev) {
383 return General_objectSpread(General_objectSpread({}, prev), {}, General_defineProperty({}, key, value));
384 });
385 };
386
387 // Save settings to WordPress
388 var saveSettings = function saveSettings() {
389 var activeProvidersCount = providers.filter(function (provider) {
390 return settings[provider.id];
391 }).length;
392 var isAtLeastTwoEnabled = activeProvidersCount >= 1;
393 if (!isAtLeastTwoEnabled) {
394 setSaveMessage((0,external_wp_i18n_namespaceObject.__)("At least one provider must be selected!", "image-hub"));
395 setSaveStatus("error");
396
397 // Clear success message after 3 seconds
398 setTimeout(function () {
399 setSaveMessage("");
400 setSaveStatus("");
401 }, 3000);
402 return;
403 }
404 setIsSaving(true);
405 fetch(ajaxUrl, {
406 method: "POST",
407 body: new URLSearchParams({
408 action: "image_hub_update_settings",
409 nonce: nonce,
410 data: JSON.stringify(settings)
411 })
412 }).then(function (response) {
413 setIsSaving(false);
414 setSaveMessage((0,external_wp_i18n_namespaceObject.__)("Settings saved successfully!", "image-hub"));
415 setSaveStatus("success");
416 setOriginalSettings(settings);
417
418 // Clear success message after 3 seconds
419 setTimeout(function () {
420 setSaveMessage("");
421 setSaveStatus("");
422 }, 3000);
423 })["catch"](function (error) {
424 console.error("Error saving settings:", error);
425 setIsSaving(false);
426 setSaveMessage((0,external_wp_i18n_namespaceObject.__)("Failed to save settings.", "image-hub"));
427 setSaveStatus("error");
428 });
429 };
430
431 // Show loading spinner while loading
432 if (isLoading) {
433 return /*#__PURE__*/external_React_default().createElement("div", {
434 className: "image-hub-settings-loading"
435 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Spinner, null), /*#__PURE__*/external_React_default().createElement("p", null, (0,external_wp_i18n_namespaceObject.__)("Loading settings...", "image-hub")));
436 }
437 return /*#__PURE__*/external_React_default().createElement("div", {
438 ref: ref,
439 className: "image-hub-settings-general-container"
440 }, /*#__PURE__*/external_React_default().createElement("h1", null, (0,external_wp_i18n_namespaceObject.__)("Image Providers", "image-hub")), /*#__PURE__*/external_React_default().createElement("h4", null, (0,external_wp_i18n_namespaceObject.__)("Select one or more sources for image search and downloads.")), providers.map(function (provider) {
441 return /*#__PURE__*/external_React_default().createElement("div", {
442 key: provider.id,
443 style: {
444 marginBottom: "10px"
445 }
446 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.CheckboxControl, {
447 __nextHasNoMarginBottom: true,
448 className: "image-hub-settings-general-checkbox " + (settings[provider.id] && countTrueExcludingImageAndMedia(settings) <= 1 ? "image-hub-settings-general-checkbox-disabled" : ""),
449 label: provider.label,
450 checked: settings[provider.id],
451 disabled: settings[provider.id] && countTrueExcludingImageAndMedia(settings) <= 1,
452 onChange: function onChange() {
453 handleSettingChange(provider.id, !settings[provider.id]);
454 }
455 }), /*#__PURE__*/external_React_default().createElement("p", {
456 style: {
457 marginLeft: "25px",
458 fontSize: "0.9em",
459 color: "#555"
460 }
461 }, provider.description));
462 }), /*#__PURE__*/external_React_default().createElement("br", null), " ", /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.ToggleControl, {
463 __nextHasNoMarginBottom: true,
464 label: (0,external_wp_i18n_namespaceObject.__)("Image Attribution", "image-hub"),
465 help: (0,external_wp_i18n_namespaceObject.__)("Automatically add image attribution as captions.", "image-hub"),
466 checked: settings.image_hub_enable_image_attribution,
467 onChange: function onChange() {
468 return handleSettingChange("image_hub_enable_image_attribution", !settings.image_hub_enable_image_attribution);
469 }
470 }), /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.ToggleControl, {
471 __nextHasNoMarginBottom: true,
472 label: (0,external_wp_i18n_namespaceObject.__)('Enable "Image Hub" tab in the media modal', "image-hub"),
473 help: (0,external_wp_i18n_namespaceObject.__)("Adds a tab in the media uploader for quick image search and insertion."),
474 checked: settings.image_hub_enable_media_modal,
475 onChange: function onChange() {
476 return handleSettingChange("image_hub_enable_media_modal", !settings.image_hub_enable_media_modal);
477 }
478 }), /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement("div", {
479 style: {
480 display: "flex",
481 gap: "10px",
482 alignItems: "baseline",
483 justifyContent: "space-between"
484 }
485 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Button, {
486 style: {
487 marginTop: "16px"
488 },
489 variant: "primary",
490 onClick: saveSettings,
491 isBusy: isSaving,
492 disabled: isSaving || !hasSettingsChanged()
493 }, isSaving ? (0,external_wp_i18n_namespaceObject.__)("Saving...", "image-hub") : (0,external_wp_i18n_namespaceObject.__)("Save Settings", "image-hub")), /*#__PURE__*/external_React_default().createElement("div", {
494 style: {
495 width: "90%"
496 }
497 }, saveMessage && /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Notice, {
498 status: saveStatus,
499 isDismissible: false
500 }, saveMessage))), /*#__PURE__*/external_React_default().createElement("br", null), " ", /*#__PURE__*/external_React_default().createElement("br", null));
501 };
502 var General = /*#__PURE__*/(0,external_React_namespaceObject.forwardRef)(UnforwardedGeneral);
503 ;// ./src/components/settings/Updates.js
504
505
506 var UnforwardedUpdates = function UnforwardedUpdates(props, ref) {
507 return /*#__PURE__*/external_React_default().createElement("div", {
508 ref: ref,
509 style: {
510 minHeight: "50vh"
511 },
512 className: "image-hub-settings-updates-container"
513 }, /*#__PURE__*/external_React_default().createElement("h1", null, (0,external_wp_i18n_namespaceObject.__)("Updates & Changelog", "image-hub")), /*#__PURE__*/external_React_default().createElement("h4", null, (0,external_wp_i18n_namespaceObject.__)("Stay up to date with the latest improvements, fixes, and new features.", "image-hub")));
514 };
515 var Updates = /*#__PURE__*/(0,external_React_namespaceObject.forwardRef)(UnforwardedUpdates);
516 ;// external ["wp","element"]
517 const external_wp_element_namespaceObject = window["wp"]["element"];
518 ;// ./src/components/ApiKeysComponent.js
519 function ApiKeysComponent_typeof(o) { "@babel/helpers - typeof"; return ApiKeysComponent_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, ApiKeysComponent_typeof(o); }
520 function ApiKeysComponent_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
521 function ApiKeysComponent_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ApiKeysComponent_ownKeys(Object(t), !0).forEach(function (r) { ApiKeysComponent_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ApiKeysComponent_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
522 function ApiKeysComponent_defineProperty(e, r, t) { return (r = ApiKeysComponent_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
523 function ApiKeysComponent_toPropertyKey(t) { var i = ApiKeysComponent_toPrimitive(t, "string"); return "symbol" == ApiKeysComponent_typeof(i) ? i : i + ""; }
524 function ApiKeysComponent_toPrimitive(t, r) { if ("object" != ApiKeysComponent_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != ApiKeysComponent_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
525 function ApiKeysComponent_slicedToArray(r, e) { return ApiKeysComponent_arrayWithHoles(r) || ApiKeysComponent_iterableToArrayLimit(r, e) || ApiKeysComponent_unsupportedIterableToArray(r, e) || ApiKeysComponent_nonIterableRest(); }
526 function ApiKeysComponent_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
527 function ApiKeysComponent_unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return ApiKeysComponent_arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? ApiKeysComponent_arrayLikeToArray(r, a) : void 0; } }
528 function ApiKeysComponent_arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
529 function ApiKeysComponent_iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
530 function ApiKeysComponent_arrayWithHoles(r) { if (Array.isArray(r)) return r; }
531
532
533
534
535
536 var ApiKeysComponent_ajaxUrl = image_hub_data.ajaxurl;
537 var ApiKeysComponent_nonce = image_hub_data.nonce;
538 var ApiKeysComponent_DEFAULT_STATE = {
539 unsplash_access_key: "",
540 pexels_api_key: "",
541 giphy_api_key: "",
542 pixabay_api_key: "",
543 openverse_client_id: "",
544 openverse_client_secret: "",
545 image_hub_use_default_keys: false
546 };
547 var ApiKeysMgr = function ApiKeysMgr() {
548 // Initial state setup
549 var _useState = (0,external_wp_element_namespaceObject.useState)(ApiKeysComponent_DEFAULT_STATE),
550 _useState2 = ApiKeysComponent_slicedToArray(_useState, 2),
551 apiKeys = _useState2[0],
552 setApiKeys = _useState2[1];
553 var _useState3 = (0,external_wp_element_namespaceObject.useState)(ApiKeysComponent_DEFAULT_STATE),
554 _useState4 = ApiKeysComponent_slicedToArray(_useState3, 2),
555 originalApikeys = _useState4[0],
556 setOAK = _useState4[1];
557 var _useState5 = (0,external_wp_element_namespaceObject.useState)(false),
558 _useState6 = ApiKeysComponent_slicedToArray(_useState5, 2),
559 initiated = _useState6[0],
560 setInitiated = _useState6[1];
561 var hasApiKeysChanged = function hasApiKeysChanged() {
562 return Object.keys(ApiKeysComponent_DEFAULT_STATE).some(function (key) {
563 return apiKeys[key] !== originalApikeys[key];
564 });
565 };
566 var _useState7 = (0,external_wp_element_namespaceObject.useState)({
567 unsplash_access_key: false,
568 pexels_api_key: false,
569 giphy_api_key: false,
570 pixabay_api_key: false,
571 openverse_client_id: false,
572 openverse_client_secret: false
573 }),
574 _useState8 = ApiKeysComponent_slicedToArray(_useState7, 2),
575 visibleFields = _useState8[0],
576 setVisibleFields = _useState8[1];
577 var _useState9 = (0,external_wp_element_namespaceObject.useState)(true),
578 _useState10 = ApiKeysComponent_slicedToArray(_useState9, 2),
579 isLoading = _useState10[0],
580 setIsLoading = _useState10[1];
581 var _useState11 = (0,external_wp_element_namespaceObject.useState)(false),
582 _useState12 = ApiKeysComponent_slicedToArray(_useState11, 2),
583 isSaving = _useState12[0],
584 setIsSaving = _useState12[1];
585 var _useState13 = (0,external_wp_element_namespaceObject.useState)(""),
586 _useState14 = ApiKeysComponent_slicedToArray(_useState13, 2),
587 saveMessage = _useState14[0],
588 setSaveMessage = _useState14[1];
589 var _useState15 = (0,external_wp_element_namespaceObject.useState)(""),
590 _useState16 = ApiKeysComponent_slicedToArray(_useState15, 2),
591 saveStatus = _useState16[0],
592 setSaveStatus = _useState16[1];
593 var settings = getImageHubSettings();
594 window.originalApikeys = originalApikeys;
595 window.apiKeys = apiKeys;
596 (0,external_wp_element_namespaceObject.useEffect)(function () {
597 if (!initiated) {
598 setInitiated(true);
599 setIsLoading(settings.isLoading);
600 setOAK(settings.apiKeys);
601 setApiKeys(settings.apiKeys);
602 }
603 }, [settings]);
604
605 // Function to fetch existing API keys from WordPress
606
607 // Handle input field changes
608 var handleChange = function handleChange(key, value) {
609 setApiKeys(function (prevState) {
610 return ApiKeysComponent_objectSpread(ApiKeysComponent_objectSpread({}, prevState), {}, ApiKeysComponent_defineProperty({}, key, value));
611 });
612 };
613
614 // Save API keys to WordPress
615 var saveAPIKeys = function saveAPIKeys() {
616 setIsSaving(true);
617
618 // Prepare data for the WordPress REST API
619 var data = {};
620 Object.entries(apiKeys).forEach(function (_ref) {
621 var _ref2 = ApiKeysComponent_slicedToArray(_ref, 2),
622 key = _ref2[0],
623 value = _ref2[1];
624 if (key.includes('default')) {
625 data[key] = value;
626 } else {
627 data["image_hub_api_keys_".concat(key)] = value;
628 }
629 });
630 fetch(ApiKeysComponent_ajaxUrl, {
631 method: "POST",
632 body: new URLSearchParams({
633 action: "image_hub_update_settings",
634 nonce: ApiKeysComponent_nonce,
635 data: JSON.stringify(data)
636 })
637 }).then(function (response) {
638 setIsSaving(false);
639 setSaveMessage((0,external_wp_i18n_namespaceObject.__)("API keys saved successfully!", "image-hub"));
640 setSaveStatus("success");
641 setOAK(apiKeys);
642 // Clear success message after 3 seconds
643 setTimeout(function () {
644 setSaveMessage("");
645 setSaveStatus("");
646 }, 3000);
647 })["catch"](function (error) {
648 console.error("Error saving API keys:", error);
649 setIsSaving(false);
650 setSaveMessage((0,external_wp_i18n_namespaceObject.__)("Failed to save API keys.", "image-hub"));
651 setSaveStatus("error");
652 });
653 };
654 var toggleFieldVisibility = function toggleFieldVisibility(key) {
655 setVisibleFields(function (prevState) {
656 return ApiKeysComponent_objectSpread(ApiKeysComponent_objectSpread({}, prevState), {}, ApiKeysComponent_defineProperty({}, key, !prevState[key]));
657 });
658 };
659
660 // Show loading spinner while loading
661 if (isLoading) {
662 return /*#__PURE__*/external_React_default().createElement("div", {
663 className: "image-hub-api-keys-manager-loading"
664 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Spinner, null), /*#__PURE__*/external_React_default().createElement("p", null, (0,external_wp_i18n_namespaceObject.__)("Loading API keys...", "image-hub")));
665 }
666 return /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("div", {
667 className: "image-hub-image-hub-api-key-field-container"
668 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.ToggleControl, {
669 __nextHasNoMarginBottom: true,
670 label: (0,external_wp_i18n_namespaceObject.__)('Use default API keys provided by the plugin', "image-hub"),
671 help: function help() {
672 return /*#__PURE__*/external_React_default().createElement("div", null, (0,external_wp_i18n_namespaceObject.__)('The plugin includes built-in API keys, but you can replace them with your own.'), /*#__PURE__*/external_React_default().createElement("br", null), (0,external_wp_i18n_namespaceObject.__)('(Some API\'s don\'t use api key for fetching without search param)'));
673 },
674 checked: apiKeys.image_hub_use_default_keys,
675 onChange: function onChange() {
676 return handleChange('image_hub_use_default_keys', !apiKeys.image_hub_use_default_keys);
677 }
678 })), /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement("div", {
679 className: "image-hub-image-hub-api-key-field-container"
680 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.TextControl, {
681 __nextHasNoMarginBottom: true,
682 __next40pxDefaultSize: true,
683 label: (0,external_wp_i18n_namespaceObject.__)("Unsplash Access Key", "image-hub"),
684 value: apiKeys.unsplash_access_key,
685 onChange: function onChange(value) {
686 return handleChange("unsplash_access_key", value);
687 },
688 autoComplete: "new-password",
689 className: "image-hub-api-key-field",
690 type: visibleFields.unsplash_access_key ? "text" : "password"
691 }), /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Button, {
692 __next40pxDefaultSize: true,
693 variant: "secondary",
694 onClick: function onClick() {
695 return toggleFieldVisibility("unsplash_access_key");
696 },
697 style: {
698 color: "#3858e9"
699 },
700 icon: visibleFields.unsplash_access_key ? "visibility" : "hidden",
701 label: visibleFields.unsplash_access_key ? (0,external_wp_i18n_namespaceObject.__)("Hide", "image-hub") : (0,external_wp_i18n_namespaceObject.__)("Show", "image-hub")
702 })), /*#__PURE__*/external_React_default().createElement("a", {
703 target: "_blank",
704 href: "https://unsplash.com/developers"
705 }, "Get API Key"), /*#__PURE__*/external_React_default().createElement("div", {
706 className: "image-hub-image-hub-api-key-field-container"
707 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.TextControl, {
708 __nextHasNoMarginBottom: true,
709 __next40pxDefaultSize: true,
710 label: (0,external_wp_i18n_namespaceObject.__)("Pexels API Key", "image-hub"),
711 value: apiKeys.pexels_api_key,
712 onChange: function onChange(value) {
713 return handleChange("pexels_api_key", value);
714 },
715 className: "image-hub-api-key-field",
716 type: visibleFields.pexels_api_key ? "text" : "password",
717 autoComplete: "new-password"
718 }), /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Button, {
719 __next40pxDefaultSize: true,
720 variant: "secondary",
721 style: {
722 color: "#3858e9"
723 },
724 onClick: function onClick() {
725 return toggleFieldVisibility("pexels_api_key");
726 },
727 icon: visibleFields.pexels_api_key ? "visibility" : "hidden",
728 label: visibleFields.pexels_api_key ? (0,external_wp_i18n_namespaceObject.__)("Hide", "image-hub") : (0,external_wp_i18n_namespaceObject.__)("Show", "image-hub")
729 })), /*#__PURE__*/external_React_default().createElement("a", {
730 target: "_blank",
731 href: "https://help.pexels.com/hc/en-us/articles/900004904026-How-do-I-get-an-API-key"
732 }, "Get API Key"), /*#__PURE__*/external_React_default().createElement("div", {
733 className: "image-hub-image-hub-api-key-field-container"
734 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.TextControl, {
735 __nextHasNoMarginBottom: true,
736 __next40pxDefaultSize: true,
737 label: (0,external_wp_i18n_namespaceObject.__)("Giphy API Key", "image-hub"),
738 value: apiKeys.giphy_api_key,
739 onChange: function onChange(value) {
740 return handleChange("giphy_api_key", value);
741 },
742 className: "image-hub-api-key-field",
743 type: visibleFields.giphy_api_key ? "text" : "password",
744 autoComplete: "new-password"
745 }), /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Button, {
746 __next40pxDefaultSize: true,
747 variant: "secondary",
748 style: {
749 color: "#3858e9"
750 },
751 onClick: function onClick() {
752 return toggleFieldVisibility("giphy_api_key");
753 },
754 icon: visibleFields.giphy_api_key ? "visibility" : "hidden",
755 label: visibleFields.giphy_api_key ? (0,external_wp_i18n_namespaceObject.__)("Hide", "image-hub") : (0,external_wp_i18n_namespaceObject.__)("Show", "image-hub")
756 })), /*#__PURE__*/external_React_default().createElement("a", {
757 target: "_blank",
758 href: "https://developers.giphy.com/docs/api/"
759 }, "Get API Key"), /*#__PURE__*/external_React_default().createElement("div", {
760 className: "image-hub-image-hub-api-key-field-container"
761 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.TextControl, {
762 __nextHasNoMarginBottom: true,
763 __next40pxDefaultSize: true,
764 label: (0,external_wp_i18n_namespaceObject.__)("Pixabay API Key", "image-hub"),
765 value: apiKeys.pixabay_api_key,
766 onChange: function onChange(value) {
767 return handleChange("pixabay_api_key", value);
768 },
769 className: "image-hub-api-key-field",
770 type: visibleFields.pixabay_api_key ? "text" : "password",
771 autoComplete: "new-password"
772 }), /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Button, {
773 __next40pxDefaultSize: true,
774 variant: "secondary",
775 style: {
776 color: "#3858e9"
777 },
778 onClick: function onClick() {
779 return toggleFieldVisibility("pixabay_api_key");
780 },
781 icon: visibleFields.pixabay_api_key ? "visibility" : "hidden",
782 label: visibleFields.pixabay_api_key ? (0,external_wp_i18n_namespaceObject.__)("Hide", "image-hub") : (0,external_wp_i18n_namespaceObject.__)("Show", "image-hub")
783 })), /*#__PURE__*/external_React_default().createElement("a", {
784 target: "_blank",
785 href: "https://pixabay.com/service/about/api/"
786 }, "Get API Key"), /*#__PURE__*/external_React_default().createElement("div", {
787 className: "image-hub-image-hub-api-key-field-container"
788 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.TextControl, {
789 __nextHasNoMarginBottom: true,
790 __next40pxDefaultSize: true,
791 label: (0,external_wp_i18n_namespaceObject.__)("Openverse Client ID", "image-hub"),
792 value: apiKeys.openverse_client_id,
793 onChange: function onChange(value) {
794 return handleChange("openverse_client_id", value);
795 },
796 className: "image-hub-api-key-field",
797 type: visibleFields.openverse_client_id ? "text" : "password",
798 autoComplete: "new-password"
799 }), /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Button, {
800 __next40pxDefaultSize: true,
801 variant: "secondary",
802 style: {
803 color: "#3858e9"
804 },
805 onClick: function onClick() {
806 return toggleFieldVisibility("openverse_client_id");
807 },
808 icon: visibleFields.openverse_client_id ? "visibility" : "hidden",
809 label: visibleFields.openverse_client_id ? (0,external_wp_i18n_namespaceObject.__)("Hide", "image-hub") : (0,external_wp_i18n_namespaceObject.__)("Show", "image-hub")
810 })), /*#__PURE__*/external_React_default().createElement("div", {
811 className: "image-hub-image-hub-api-key-field-container"
812 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.TextControl, {
813 __nextHasNoMarginBottom: true,
814 __next40pxDefaultSize: true,
815 label: (0,external_wp_i18n_namespaceObject.__)("Openverse Client Secret", "image-hub"),
816 value: apiKeys.openverse_client_secret,
817 onChange: function onChange(value) {
818 return handleChange("openverse_client_secret", value);
819 },
820 className: "image-hub-api-key-field",
821 type: visibleFields.openverse_client_secret ? "text" : "password",
822 autoComplete: "new-password"
823 }), /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Button, {
824 __next40pxDefaultSize: true,
825 variant: "secondary",
826 style: {
827 color: "#3858e9"
828 },
829 onClick: function onClick() {
830 return toggleFieldVisibility("openverse_client_secret");
831 },
832 icon: visibleFields.openverse_client_secret ? "visibility" : "hidden",
833 label: visibleFields.openverse_client_secret ? (0,external_wp_i18n_namespaceObject.__)("Hide", "image-hub") : (0,external_wp_i18n_namespaceObject.__)("Show", "image-hub")
834 })), /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("a", {
835 target: "_blank",
836 href: "https://api.openverse.org/v1/#tag/auth/operation/register"
837 }, "Get API Key")), /*#__PURE__*/external_React_default().createElement("div", {
838 style: {
839 display: "flex",
840 gap: "10px",
841 alignItems: "baseline",
842 justifyContent: "space-between"
843 }
844 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Button, {
845 style: {
846 marginTop: "16px",
847 flex: "0"
848 },
849 variant: "primary",
850 onClick: saveAPIKeys,
851 isBusy: isSaving,
852 disabled: isSaving || !hasApiKeysChanged()
853 }, isSaving ? (0,external_wp_i18n_namespaceObject.__)("Saving...", "image-hub") : (0,external_wp_i18n_namespaceObject.__)("Save API Keys", "image-hub")), /*#__PURE__*/external_React_default().createElement("div", {
854 style: {
855 width: "90%"
856 }
857 }, saveMessage && /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Notice, {
858 status: saveStatus,
859 isDismissible: false
860 }, saveMessage))));
861 };
862 ;// ./src/components/settings/ApiKeys.js
863 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
864
865
866
867 var UnforwardedApiKeys = function UnforwardedApiKeys(props, ref) {
868 return /*#__PURE__*/external_React_default().createElement("div", _extends({}, props, {
869 ref: ref,
870 style: {
871 minHeight: "50vh"
872 },
873 className: "image-hub-settings-apikeys-container"
874 }), /*#__PURE__*/external_React_default().createElement("h1", null, (0,external_wp_i18n_namespaceObject.__)("API Keys & Authentication", "image-hub")), /*#__PURE__*/external_React_default().createElement("h4", null, (0,external_wp_i18n_namespaceObject.__)("Manage provider API keys and authentication settings.", "image-hub")), /*#__PURE__*/external_React_default().createElement(ApiKeysMgr, null), /*#__PURE__*/external_React_default().createElement("br", null), " ", /*#__PURE__*/external_React_default().createElement("br", null));
875 };
876 var ApiKeys = /*#__PURE__*/(0,external_React_namespaceObject.forwardRef)(UnforwardedApiKeys);
877 ;// ./src/components/CustomNumberInput.js
878 function CustomNumberInput_typeof(o) { "@babel/helpers - typeof"; return CustomNumberInput_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, CustomNumberInput_typeof(o); }
879 var _excluded = ["value", "setValue", "label"];
880 function CustomNumberInput_extends() { return CustomNumberInput_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, CustomNumberInput_extends.apply(null, arguments); }
881 function CustomNumberInput_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
882 function CustomNumberInput_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? CustomNumberInput_ownKeys(Object(t), !0).forEach(function (r) { CustomNumberInput_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : CustomNumberInput_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
883 function CustomNumberInput_defineProperty(e, r, t) { return (r = CustomNumberInput_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
884 function CustomNumberInput_toPropertyKey(t) { var i = CustomNumberInput_toPrimitive(t, "string"); return "symbol" == CustomNumberInput_typeof(i) ? i : i + ""; }
885 function CustomNumberInput_toPrimitive(t, r) { if ("object" != CustomNumberInput_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != CustomNumberInput_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
886 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
887 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
888
889
890
891 var ENABLE_CLEAR_BTN = false;
892 var CustomNumberControl = function CustomNumberControl(_ref) {
893 var value = _ref.value,
894 setValue = _ref.setValue,
895 label = _ref.label,
896 props = _objectWithoutProperties(_ref, _excluded);
897 var handleClear = function handleClear(e) {
898 e.stopPropagation();
899 setValue(0);
900 };
901 return /*#__PURE__*/external_React_default().createElement("div", {
902 style: {
903 position: "relative"
904 }
905 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.__experimentalNumberControl, CustomNumberInput_extends({
906 value: value == 0 ? null : value,
907 __next40pxDefaultSize: true,
908 __nextHasNoMarginBottom: true,
909 label: label,
910 onChange: setValue,
911 showArrows: false,
912 adornment: /*#__PURE__*/external_React_default().createElement("span", {
913 style: {
914 color: "blue"
915 }
916 }, "PX"),
917 isShiftStepEnabled: true,
918 shiftStep: 10,
919 style: CustomNumberInput_objectSpread({
920 background: "transparent"
921 }, props === null || props === void 0 ? void 0 : props.style),
922 suffix: /*#__PURE__*/external_React_default().createElement("div", {
923 style: {
924 display: "flex",
925 alignItems: "center",
926 position: "relative",
927 width: ENABLE_CLEAR_BTN ? "43px" : "23px"
928 }
929 }, value > 0 && ENABLE_CLEAR_BTN && /*#__PURE__*/external_React_default().createElement("button", {
930 onClick: handleClear,
931 style: {
932 border: "none",
933 background: "transparent",
934 cursor: "pointer",
935 padding: "0",
936 display: "flex",
937 alignItems: "center",
938 justifyContent: "center",
939 color: "#757575",
940 width: "16px",
941 height: "16px",
942 position: "absolute",
943 left: "0"
944 },
945 "aria-label": "Clear value"
946 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Icon, {
947 icon: "dismiss",
948 size: 16
949 })), /*#__PURE__*/external_React_default().createElement("div", {
950 style: {
951 marginRight: "10px",
952 color: "#3858E9",
953 fontSize: "16px!important",
954 position: "absolute",
955 right: "0",
956 paddingBottom: ".3em"
957 }
958 }, "px"))
959 }, props)));
960 };
961 ;// ./src/components/settings/Sizes.js
962 function Sizes_typeof(o) { "@babel/helpers - typeof"; return Sizes_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, Sizes_typeof(o); }
963 function Sizes_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
964 function Sizes_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? Sizes_ownKeys(Object(t), !0).forEach(function (r) { Sizes_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Sizes_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
965 function Sizes_defineProperty(e, r, t) { return (r = Sizes_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
966 function Sizes_toPropertyKey(t) { var i = Sizes_toPrimitive(t, "string"); return "symbol" == Sizes_typeof(i) ? i : i + ""; }
967 function Sizes_toPrimitive(t, r) { if ("object" != Sizes_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != Sizes_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
968 function Sizes_slicedToArray(r, e) { return Sizes_arrayWithHoles(r) || Sizes_iterableToArrayLimit(r, e) || Sizes_unsupportedIterableToArray(r, e) || Sizes_nonIterableRest(); }
969 function Sizes_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
970 function Sizes_unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return Sizes_arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? Sizes_arrayLikeToArray(r, a) : void 0; } }
971 function Sizes_arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
972 function Sizes_iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
973 function Sizes_arrayWithHoles(r) { if (Array.isArray(r)) return r; }
974
975
976
977
978
979 var Sizes_ajaxUrl = image_hub_data.ajaxurl;
980 var Sizes_nonce = image_hub_data.nonce;
981 var UnforwardedSizes = function UnforwardedSizes(props, ref) {
982 var _useState = (0,external_React_namespaceObject.useState)({
983 image_hub_max_image_width: 0,
984 image_hub_max_image_height: 0
985 }),
986 _useState2 = Sizes_slicedToArray(_useState, 2),
987 settings = _useState2[0],
988 setSettings = _useState2[1];
989 var _useState3 = (0,external_React_namespaceObject.useState)({
990 image_hub_max_image_width: 0,
991 image_hub_max_image_height: 0
992 }),
993 _useState4 = Sizes_slicedToArray(_useState3, 2),
994 originalSettings = _useState4[0],
995 setOriginalSettings = _useState4[1];
996 var hasSettingsChanged = function hasSettingsChanged() {
997 return settings.image_hub_max_image_width !== originalSettings.image_hub_max_image_width || settings.image_hub_max_image_height !== originalSettings.image_hub_max_image_height;
998 };
999 var _useState5 = (0,external_React_namespaceObject.useState)(false),
1000 _useState6 = Sizes_slicedToArray(_useState5, 2),
1001 isSaving = _useState6[0],
1002 setIsSaving = _useState6[1];
1003 var _useState7 = (0,external_React_namespaceObject.useState)(""),
1004 _useState8 = Sizes_slicedToArray(_useState7, 2),
1005 saveMessage = _useState8[0],
1006 setSaveMessage = _useState8[1];
1007 var _useState9 = (0,external_React_namespaceObject.useState)(""),
1008 _useState10 = Sizes_slicedToArray(_useState9, 2),
1009 saveStatus = _useState10[0],
1010 setSaveStatus = _useState10[1];
1011 var _getImageHubSettings = getImageHubSettings(),
1012 imageHubSettings = _getImageHubSettings.imageHubSettings,
1013 isLoading = _getImageHubSettings.isLoading;
1014 (0,external_React_namespaceObject.useEffect)(function () {
1015 setSettings({
1016 image_hub_max_image_width: imageHubSettings.image_hub_max_image_width || 0,
1017 image_hub_max_image_height: imageHubSettings.image_hub_max_image_height || 0
1018 });
1019 setOriginalSettings({
1020 image_hub_max_image_width: imageHubSettings.image_hub_max_image_width || 0,
1021 image_hub_max_image_height: imageHubSettings.image_hub_max_image_height || 0
1022 });
1023 }, [imageHubSettings]);
1024 var handleSettingChange = function handleSettingChange(key, value) {
1025 setSettings(function (prev) {
1026 return Sizes_objectSpread(Sizes_objectSpread({}, prev), {}, Sizes_defineProperty({}, key, +value));
1027 });
1028 };
1029 var saveSettings = function saveSettings() {
1030 setIsSaving(true);
1031 fetch(Sizes_ajaxUrl, {
1032 method: "POST",
1033 body: new URLSearchParams({
1034 action: "image_hub_update_settings",
1035 nonce: Sizes_nonce,
1036 data: JSON.stringify(settings)
1037 })
1038 }).then(function () {
1039 setIsSaving(false);
1040 setSaveMessage((0,external_wp_i18n_namespaceObject.__)("Settings saved successfully!", "image-hub"));
1041 setSaveStatus("success");
1042 setOriginalSettings(settings);
1043 setTimeout(function () {
1044 setSaveMessage("");
1045 setSaveStatus("");
1046 }, 3000);
1047 })["catch"](function (error) {
1048 console.error("Error saving settings:", error);
1049 setIsSaving(false);
1050 setSaveMessage((0,external_wp_i18n_namespaceObject.__)("Failed to save settings.", "image-hub"));
1051 setSaveStatus("error");
1052 });
1053 };
1054 if (isLoading) {
1055 return /*#__PURE__*/external_React_default().createElement("div", {
1056 className: "image-hub-settings-loading"
1057 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Spinner, null), /*#__PURE__*/external_React_default().createElement("p", null, (0,external_wp_i18n_namespaceObject.__)("Loading settings...", "image-hub")));
1058 }
1059 return /*#__PURE__*/external_React_default().createElement("div", {
1060 ref: ref,
1061 className: "image-hub-settings-sizes-container"
1062 }, /*#__PURE__*/external_React_default().createElement("h1", null, (0,external_wp_i18n_namespaceObject.__)("Max Upload Dimensions", "image-hub")), /*#__PURE__*/external_React_default().createElement("h4", null, (0,external_wp_i18n_namespaceObject.__)("Set a maximum width and height for downloaded images to control file size.")), /*#__PURE__*/external_React_default().createElement("div", {
1063 style: {
1064 width: "fit-content",
1065 gap: "1em",
1066 display: "flex",
1067 flexDirection: "column"
1068 }
1069 }, /*#__PURE__*/external_React_default().createElement(CustomNumberControl, {
1070 value: settings.image_hub_max_image_width,
1071 setValue: function setValue(value) {
1072 return handleSettingChange("image_hub_max_image_width", value);
1073 },
1074 label: (0,external_wp_i18n_namespaceObject.__)("Max. Width", "image-hub")
1075 }), /*#__PURE__*/external_React_default().createElement(CustomNumberControl, {
1076 value: settings.image_hub_max_image_height,
1077 setValue: function setValue(value) {
1078 return handleSettingChange("image_hub_max_image_height", value);
1079 },
1080 label: (0,external_wp_i18n_namespaceObject.__)("Max. Height", "image-hub")
1081 })), /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement("div", {
1082 style: {
1083 display: "flex",
1084 gap: "10px",
1085 alignItems: "baseline",
1086 justifyContent: "space-between"
1087 }
1088 }, /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Button, {
1089 style: {
1090 marginTop: "16px"
1091 },
1092 variant: "primary",
1093 onClick: saveSettings,
1094 isBusy: isSaving,
1095 disabled: isSaving || !hasSettingsChanged()
1096 }, isSaving ? (0,external_wp_i18n_namespaceObject.__)("Saving...", "image-hub") : (0,external_wp_i18n_namespaceObject.__)("Save Settings", "image-hub")), /*#__PURE__*/external_React_default().createElement("div", {
1097 style: {
1098 width: "90%"
1099 }
1100 }, saveMessage && /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Notice, {
1101 status: saveStatus,
1102 isDismissible: false
1103 }, saveMessage))));
1104 };
1105 var Sizes = /*#__PURE__*/(0,external_React_namespaceObject.forwardRef)(UnforwardedSizes);
1106 ;// ./src/components/settings/index.js
1107
1108
1109
1110
1111 ;// ./src/components/DevComponent.js
1112 function DevComponent_slicedToArray(r, e) { return DevComponent_arrayWithHoles(r) || DevComponent_iterableToArrayLimit(r, e) || DevComponent_unsupportedIterableToArray(r, e) || DevComponent_nonIterableRest(); }
1113 function DevComponent_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
1114 function DevComponent_unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return DevComponent_arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? DevComponent_arrayLikeToArray(r, a) : void 0; } }
1115 function DevComponent_arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
1116 function DevComponent_iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
1117 function DevComponent_arrayWithHoles(r) { if (Array.isArray(r)) return r; }
1118
1119 var DevToggleWrapper = function DevToggleWrapper(_ref) {
1120 var children = _ref.children;
1121 var _useState = (0,external_React_namespaceObject.useState)(function () {
1122 var storedMode = localStorage.getItem('imageHubDevMode');
1123 return storedMode === 'true';
1124 }),
1125 _useState2 = DevComponent_slicedToArray(_useState, 2),
1126 devMode = _useState2[0],
1127 setDevMode = _useState2[1];
1128 var clickCountRef = (0,external_React_namespaceObject.useRef)(0);
1129 var lastClickTimeRef = (0,external_React_namespaceObject.useRef)(Date.now());
1130 var handleClick = function handleClick() {
1131 var now = Date.now();
1132 var timeSinceLastClick = now - lastClickTimeRef.current;
1133 if (timeSinceLastClick < 500) {
1134 clickCountRef.current += 1;
1135 } else {
1136 clickCountRef.current = 1;
1137 }
1138 lastClickTimeRef.current = now;
1139 if (clickCountRef.current >= 10) {
1140 var newMode = !devMode;
1141 setDevMode(newMode);
1142 localStorage.setItem('imageHubDevMode', newMode);
1143 clickCountRef.current = 0;
1144 }
1145 };
1146 var badgeStyle = {
1147 position: 'absolute',
1148 top: '16px',
1149 right: '16px',
1150 backgroundColor: '#f87171',
1151 color: '#ffffff',
1152 borderRadius: '16px',
1153 padding: '8px 16px',
1154 fontWeight: 'bold',
1155 boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
1156 opacity: devMode ? 1 : 0,
1157 transition: 'opacity 300ms ease-in-out',
1158 pointerEvents: 'none'
1159 };
1160 return /*#__PURE__*/external_React_default().createElement("div", {
1161 onClick: handleClick,
1162 style: {
1163 position: 'relative',
1164 width: '100%',
1165 height: '100%'
1166 }
1167 }, children, devMode && /*#__PURE__*/external_React_default().createElement("div", {
1168 style: badgeStyle
1169 }, "DEV"));
1170 };
1171 /* harmony default export */ const DevComponent = (DevToggleWrapper);
1172 ;// ./src/SettingsApp.js
1173 function SettingsApp_slicedToArray(r, e) { return SettingsApp_arrayWithHoles(r) || SettingsApp_iterableToArrayLimit(r, e) || SettingsApp_unsupportedIterableToArray(r, e) || SettingsApp_nonIterableRest(); }
1174 function SettingsApp_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
1175 function SettingsApp_unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return SettingsApp_arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? SettingsApp_arrayLikeToArray(r, a) : void 0; } }
1176 function SettingsApp_arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
1177 function SettingsApp_iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
1178 function SettingsApp_arrayWithHoles(r) { if (Array.isArray(r)) return r; }
1179
1180
1181
1182
1183
1184 var __ = wp.i18n.__;
1185
1186
1187
1188 var ScrollableMenu = function ScrollableMenu() {
1189 var sectionsRef = (0,external_React_namespaceObject.useRef)([]);
1190 var _useState = (0,external_React_namespaceObject.useState)(null),
1191 _useState2 = SettingsApp_slicedToArray(_useState, 2),
1192 visibleSection = _useState2[0],
1193 setVisibleSection = _useState2[1];
1194
1195 // Scroll to the section when a button is clicked
1196 var scrollToSection = function scrollToSection(index) {
1197 if (sectionsRef.current[index]) {
1198 sectionsRef.current[index].scrollIntoView({
1199 behavior: "smooth",
1200 block: "start",
1201 inline: "start"
1202 });
1203 }
1204 };
1205
1206 // Set up IntersectionObserver to detect which section is visible
1207 (0,external_React_namespaceObject.useEffect)(function () {
1208 var options = {
1209 threshold: 0.8,
1210 rootMargin: "-100px 0px 0px 0px"
1211 };
1212 var observer = new IntersectionObserver(function (entries) {
1213 entries.forEach(function (entry) {
1214 var index = sectionsRef.current.findIndex(function (el) {
1215 return el === entry.target;
1216 });
1217 if (entry.isIntersecting) {
1218 setVisibleSection(index);
1219 }
1220 });
1221 }, options);
1222
1223 // Observe each section
1224 sectionsRef.current.forEach(function (section) {
1225 if (section) {
1226 observer.observe(section);
1227 }
1228 });
1229
1230 // Clean up observer on component unmount
1231 return function () {
1232 observer.disconnect();
1233 };
1234 }, []);
1235 var sectionTitles = ["General", "Image Sizes", "Api Keys", "Updates & Changelog"];
1236 return /*#__PURE__*/external_React_default().createElement(DevComponent, null, /*#__PURE__*/external_React_default().createElement("div", {
1237 className: "image-hub-scroll-container",
1238 style: {
1239 display: "flex",
1240 minHeight: "calc(100vh - 190.14px)",
1241 background: "white"
1242 }
1243 }, /*#__PURE__*/external_React_default().createElement("div", {
1244 style: {
1245 display: "flex",
1246 padding: "15px",
1247 background: "white",
1248 flexDirection: "column",
1249 boxShadow: "2px 0px 5px 0px rgba(0,0,0,0.37) !important",
1250 position: "sticky",
1251 top: "calc( 118px + 32px )",
1252 height: "100%"
1253 }
1254 }, sectionTitles.map(function (title, index) {
1255 return /*#__PURE__*/external_React_default().createElement(external_wp_components_namespaceObject.Button, {
1256 key: index,
1257 className: "image-hub-settings-swipable-menu-button ".concat(visibleSection === index ? "active" : ""),
1258 __next40pxDefaultSize: true,
1259 icon: chevron_right,
1260 iconPosition: "right",
1261 variant: "primary",
1262 onClick: function onClick() {
1263 return scrollToSection(index);
1264 },
1265 style: {
1266 margin: "0 15px"
1267 }
1268 }, title);
1269 })), /*#__PURE__*/external_React_default().createElement("div", {
1270 style: {
1271 flex: 1,
1272 padding: "0 20px",
1273 background: "white"
1274 }
1275 }, /*#__PURE__*/external_React_default().createElement(General, {
1276 key: 0,
1277 ref: function ref(el) {
1278 return sectionsRef.current[0] = el;
1279 }
1280 }), /*#__PURE__*/external_React_default().createElement("hr", null), /*#__PURE__*/external_React_default().createElement(Sizes, {
1281 key: 1,
1282 ref: function ref(el) {
1283 return sectionsRef.current[1] = el;
1284 }
1285 }), /*#__PURE__*/external_React_default().createElement("hr", null), /*#__PURE__*/external_React_default().createElement(ApiKeys, {
1286 key: 2,
1287 ref: function ref(el) {
1288 return sectionsRef.current[2] = el;
1289 }
1290 }), /*#__PURE__*/external_React_default().createElement("hr", null), /*#__PURE__*/external_React_default().createElement(Updates, {
1291 key: 3,
1292 ref: function ref(el) {
1293 return sectionsRef.current[3] = el;
1294 }
1295 }))));
1296 };
1297 var SettingsApp = function SettingsApp() {
1298 return /*#__PURE__*/external_React_default().createElement("div", {
1299 style: {
1300 display: "flex",
1301 flexDirection: "column"
1302 }
1303 }, /*#__PURE__*/external_React_default().createElement(AppHeader, {
1304 enableBrowseButton: true,
1305 style: {
1306 position: "sticky",
1307 top: "32px",
1308 background: "#F0F0F0",
1309 zIndex: "999"
1310 }
1311 }), /*#__PURE__*/external_React_default().createElement(ScrollableMenu, null));
1312 };
1313 ;// ./src/settings.js
1314
1315
1316
1317 document.addEventListener("DOMContentLoaded", function () {
1318 var container = document.getElementById("image-hub-settings-root");
1319 if (container) {
1320 var root = (0,client/* createRoot */.H)(container);
1321 root.render(/*#__PURE__*/external_React_default().createElement((external_React_default()).StrictMode, null, /*#__PURE__*/external_React_default().createElement(SettingsApp, null)));
1322 }
1323 });
1324 /******/ })()
1325 ;
1326 //# sourceMappingURL=settings.js.map
1327