@elementor/editor-variables 0.10.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/index.js +238 -223
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +240 -228
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +6 -5
  7. package/src/components/color-variable-creation.tsx +12 -15
  8. package/src/components/variables-selection-popover.tsx +20 -14
  9. package/src/hooks/use-prop-variables.ts +15 -19
package/CHANGELOG.md CHANGED
@@ -1,5 +1,37 @@
1
1
  # @elementor/editor-variables
2
2
 
3
+ ## 0.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 80dbf43: Extract popover headers to a standalone component inside the Editor UI package.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [56b4348]
12
+ - Updated dependencies [ea5d3df]
13
+ - Updated dependencies [80dbf43]
14
+ - Updated dependencies [6eeb59e]
15
+ - Updated dependencies [af4e938]
16
+ - Updated dependencies [a0af69a]
17
+ - @elementor/editor-canvas@0.22.3
18
+ - @elementor/editor-editing-panel@1.44.0
19
+ - @elementor/editor-controls@0.36.0
20
+ - @elementor/editor-ui@0.11.0
21
+
22
+ ## 0.11.0
23
+
24
+ ### Minor Changes
25
+
26
+ - 0a89db7: creating a new variable on the server
27
+
28
+ ### Patch Changes
29
+
30
+ - Updated dependencies [f7a59df]
31
+ - Updated dependencies [4b762e0]
32
+ - @elementor/editor-controls@0.35.0
33
+ - @elementor/editor-editing-panel@1.43.1
34
+
3
35
  ## 0.10.0
4
36
 
5
37
  ### Minor Changes
package/dist/index.js CHANGED
@@ -62,9 +62,190 @@ var import_ui3 = require("@elementor/ui");
62
62
  // src/hooks/use-prop-variables.ts
63
63
  var import_react = require("react");
64
64
 
65
+ // src/api.ts
66
+ var import_http_client = require("@elementor/http-client");
67
+ var BASE_PATH = "elementor/v1/variables";
68
+ var apiClient = {
69
+ list: () => {
70
+ return (0, import_http_client.httpService)().get(BASE_PATH + "/list");
71
+ },
72
+ create: (type, label, value) => {
73
+ return (0, import_http_client.httpService)().post(BASE_PATH + "/create", {
74
+ type,
75
+ label,
76
+ value
77
+ });
78
+ },
79
+ update: (id, label, value) => {
80
+ return (0, import_http_client.httpService)().put(BASE_PATH + "/update", {
81
+ id,
82
+ label,
83
+ value
84
+ });
85
+ },
86
+ delete: (id) => {
87
+ return (0, import_http_client.httpService)().post(BASE_PATH + "/delete", { id });
88
+ },
89
+ restore: (id) => {
90
+ return (0, import_http_client.httpService)().post(BASE_PATH + "/restore", { id });
91
+ }
92
+ };
93
+
94
+ // src/storage.ts
95
+ var STORAGE_KEY = "elementor-global-variables";
96
+ var STORAGE_WATERMARK_KEY = "elementor-global-variables-watermark";
97
+ var OP_RW = "RW";
98
+ var OP_RO = "RO";
99
+ var Storage = class {
100
+ state;
101
+ constructor() {
102
+ this.state = {
103
+ watermark: -1,
104
+ variables: {}
105
+ };
106
+ }
107
+ load() {
108
+ this.state.watermark = parseInt(localStorage.getItem(STORAGE_WATERMARK_KEY) || "-1");
109
+ this.state.variables = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
110
+ return this.state.variables;
111
+ }
112
+ fill(variables, watermark) {
113
+ this.state.watermark = watermark;
114
+ this.state.variables = variables;
115
+ localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
116
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
117
+ }
118
+ add(id, variable) {
119
+ this.load();
120
+ this.state.variables[id] = variable;
121
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
122
+ }
123
+ update(id, variable) {
124
+ this.load();
125
+ this.state.variables[id] = variable;
126
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
127
+ }
128
+ watermark(watermark) {
129
+ this.state.watermark = watermark;
130
+ localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
131
+ }
132
+ watermarkDiff(operation, newWatermark) {
133
+ const diff = newWatermark - this.state.watermark;
134
+ if (OP_RW === operation) {
135
+ return 1 !== diff;
136
+ }
137
+ if (OP_RO === operation) {
138
+ return 0 !== diff;
139
+ }
140
+ return false;
141
+ }
142
+ };
143
+
144
+ // src/service.ts
145
+ var storage = new Storage();
146
+ var service = {
147
+ variables: () => {
148
+ return storage.load();
149
+ },
150
+ init: () => {
151
+ service.load();
152
+ },
153
+ load: () => {
154
+ return apiClient.list().then((response) => {
155
+ const { success, data: payload } = response.data;
156
+ if (!success) {
157
+ throw new Error("Unexpected response from server");
158
+ }
159
+ return payload;
160
+ }).then((data) => {
161
+ const { variables, watermark } = data;
162
+ storage.fill(variables, watermark);
163
+ return variables;
164
+ });
165
+ },
166
+ create: ({ type, label, value }) => {
167
+ return apiClient.create(type, label, value).then((response) => {
168
+ const { success, data: payload } = response.data;
169
+ if (!success) {
170
+ throw new Error("Unexpected response from server");
171
+ }
172
+ return payload;
173
+ }).then((data) => {
174
+ const { variable, watermark } = data;
175
+ handleWatermark(OP_RW, watermark);
176
+ const { id: variableId, ...createdVariable } = variable;
177
+ storage.add(variableId, createdVariable);
178
+ return {
179
+ id: variableId,
180
+ variable: createdVariable
181
+ };
182
+ });
183
+ },
184
+ update: (id, { label, value }) => {
185
+ return apiClient.update(id, label, value).then((response) => {
186
+ const { success, data: payload } = response.data;
187
+ if (!success) {
188
+ throw new Error("Unexpected response from server");
189
+ }
190
+ return payload;
191
+ }).then((data) => {
192
+ const { variable, watermark } = data;
193
+ handleWatermark(OP_RW, watermark);
194
+ const { id: variableId, ...updatedVariable } = variable;
195
+ storage.update(variableId, updatedVariable);
196
+ return {
197
+ id: variableId,
198
+ variable: updatedVariable
199
+ };
200
+ });
201
+ },
202
+ delete: (id) => {
203
+ return apiClient.delete(id).then((response) => {
204
+ const { success, data: payload } = response.data;
205
+ if (!success) {
206
+ throw new Error("Unexpected response from server");
207
+ }
208
+ return payload;
209
+ }).then((data) => {
210
+ const { variable, watermark } = data;
211
+ handleWatermark(OP_RW, watermark);
212
+ const { id: variableId, ...deletedVariable } = variable;
213
+ storage.update(variableId, deletedVariable);
214
+ return {
215
+ id: variableId,
216
+ variable: deletedVariable
217
+ };
218
+ });
219
+ },
220
+ restore: (id) => {
221
+ return apiClient.restore(id).then((response) => {
222
+ const { success, data: payload } = response.data;
223
+ if (!success) {
224
+ throw new Error("Unexpected response from server");
225
+ }
226
+ return payload;
227
+ }).then((data) => {
228
+ const { variable, watermark } = data;
229
+ handleWatermark(OP_RW, watermark);
230
+ const { id: variableId, ...restoredVariable } = variable;
231
+ storage.update(variableId, restoredVariable);
232
+ return {
233
+ id: variableId,
234
+ variable: restoredVariable
235
+ };
236
+ });
237
+ }
238
+ };
239
+ var handleWatermark = (operation, newWatermark) => {
240
+ if (storage.watermarkDiff(operation, newWatermark)) {
241
+ setTimeout(() => service.load(), 500);
242
+ }
243
+ storage.watermark(newWatermark);
244
+ };
245
+
65
246
  // src/create-style-variables-repository.ts
66
247
  var createStyleVariablesRepository = () => {
67
- const variables2 = {};
248
+ const variables = {};
68
249
  let subscription;
69
250
  const subscribe = (cb) => {
70
251
  subscription = cb;
@@ -75,17 +256,17 @@ var createStyleVariablesRepository = () => {
75
256
  };
76
257
  const notify = () => {
77
258
  if (typeof subscription === "function") {
78
- subscription({ ...variables2 });
259
+ subscription({ ...variables });
79
260
  }
80
261
  };
81
262
  const shouldUpdate = (key, newValue) => {
82
- return !(key in variables2) || variables2[key] !== newValue;
263
+ return !(key in variables) || variables[key] !== newValue;
83
264
  };
84
265
  const applyUpdates = (updatedVars) => {
85
266
  let hasChanges = false;
86
267
  for (const [key, { value }] of Object.entries(updatedVars)) {
87
268
  if (shouldUpdate(key, value)) {
88
- variables2[key] = value;
269
+ variables[key] = value;
89
270
  hasChanges = true;
90
271
  }
91
272
  }
@@ -110,6 +291,7 @@ var usePropVariables = (propKey) => {
110
291
  return (0, import_react.useMemo)(() => normalizeVariables(propKey), [propKey]);
111
292
  };
112
293
  var useVariable = (key) => {
294
+ const variables = service.variables();
113
295
  if (!variables?.[key]) {
114
296
  return null;
115
297
  }
@@ -119,24 +301,21 @@ var useVariable = (key) => {
119
301
  };
120
302
  };
121
303
  var normalizeVariables = (propKey) => {
304
+ const variables = service.variables();
305
+ styleVariablesRepository.update(variables);
122
306
  return Object.entries(variables).filter(([, { type }]) => type === propKey).map(([key, { label, value }]) => ({
123
307
  key,
124
308
  label,
125
309
  value
126
310
  }));
127
311
  };
128
- var createVariable = (variable) => {
129
- const id = generateId();
130
- variables[id] = variable;
131
- styleVariablesRepository.update({
132
- [id]: variable
312
+ var createVariable = (newVariable) => {
313
+ return service.create(newVariable).then(({ id, variable }) => {
314
+ styleVariablesRepository.update({
315
+ [id]: variable
316
+ });
317
+ return id;
133
318
  });
134
- return id;
135
- };
136
- var variables = window?.ElementorV4Variables || {};
137
- var generateId = (prefix = "e-gv") => {
138
- const randomHex = Math.random().toString(16).slice(2, 9);
139
- return `${prefix}${randomHex}`;
140
319
  };
141
320
 
142
321
  // src/prop-types/color-variable-prop-type.ts
@@ -158,12 +337,12 @@ var StyledMenuItem = (0, import_ui2.styled)(import_ui2.MenuItem)(() => ({
158
337
  // src/components/color-variables-selection.tsx
159
338
  var ColorVariablesSelection = ({ onSelect }) => {
160
339
  const { value: variable, setValue: setVariable } = (0, import_editor_controls.useBoundProp)(colorVariablePropTypeUtil);
161
- const variables2 = usePropVariables(colorVariablePropTypeUtil.key);
340
+ const variables = usePropVariables(colorVariablePropTypeUtil.key);
162
341
  const handleSetColorVariable = (key) => {
163
342
  setVariable(key);
164
343
  onSelect?.();
165
344
  };
166
- return /* @__PURE__ */ React.createElement(import_react2.Fragment, null, /* @__PURE__ */ React.createElement(import_ui3.Divider, null), /* @__PURE__ */ React.createElement(import_ui3.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React.createElement(import_ui3.MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React.createElement(
345
+ return /* @__PURE__ */ React.createElement(import_react2.Fragment, null, /* @__PURE__ */ React.createElement(import_ui3.Divider, null), /* @__PURE__ */ React.createElement(import_ui3.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React.createElement(import_ui3.MenuList, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React.createElement(
167
346
  StyledMenuItem,
168
347
  {
169
348
  key,
@@ -203,6 +382,7 @@ var ColorVariablesSelection = ({ onSelect }) => {
203
382
  // src/components/variables-selection-popover.tsx
204
383
  var React3 = __toESM(require("react"));
205
384
  var import_react4 = require("react");
385
+ var import_editor_ui2 = require("@elementor/editor-ui");
206
386
  var import_icons3 = require("@elementor/icons");
207
387
  var import_ui5 = require("@elementor/ui");
208
388
  var import_i18n2 = require("@wordpress/i18n");
@@ -211,9 +391,11 @@ var import_i18n2 = require("@wordpress/i18n");
211
391
  var React2 = __toESM(require("react"));
212
392
  var import_react3 = require("react");
213
393
  var import_editor_controls2 = require("@elementor/editor-controls");
394
+ var import_editor_ui = require("@elementor/editor-ui");
214
395
  var import_icons2 = require("@elementor/icons");
215
396
  var import_ui4 = require("@elementor/ui");
216
397
  var import_i18n = require("@wordpress/i18n");
398
+ var SIZE = "tiny";
217
399
  var ColorVariableCreation = ({ popupState }) => {
218
400
  const { setValue: setVariable } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
219
401
  const [color, setColor] = (0, import_react3.useState)("");
@@ -228,13 +410,14 @@ var ColorVariableCreation = ({ popupState }) => {
228
410
  popupState.close();
229
411
  };
230
412
  const handleCreate = () => {
231
- const key = createVariable({
413
+ createVariable({
232
414
  value: color,
233
415
  label,
234
416
  type: colorVariablePropTypeUtil.key
417
+ }).then((key) => {
418
+ setVariable(key);
419
+ closePopover();
235
420
  });
236
- setVariable(key);
237
- closePopover();
238
421
  };
239
422
  const isInValidForm = () => {
240
423
  return !color?.trim() || !label?.trim();
@@ -247,14 +430,14 @@ var ColorVariableCreation = ({ popupState }) => {
247
430
  anchorOrigin: { vertical: "bottom", horizontal: "right" },
248
431
  transformOrigin: { vertical: "top", horizontal: "right" }
249
432
  },
250
- /* @__PURE__ */ React2.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(import_icons2.BrushIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(import_ui4.Typography, { variant: "subtitle2" }, (0, import_i18n.__)("Create variable", "elementor")), /* @__PURE__ */ React2.createElement(
251
- import_ui4.CloseButton,
433
+ /* @__PURE__ */ React2.createElement(
434
+ import_editor_ui.PopoverHeader,
252
435
  {
253
- slotProps: { icon: { fontSize: "small" } },
254
- sx: { ml: "auto" },
255
- onClick: closePopover
436
+ title: (0, import_i18n.__)("Create variable", "elementor"),
437
+ onClose: closePopover,
438
+ icon: /* @__PURE__ */ React2.createElement(import_icons2.BrushIcon, { fontSize: SIZE })
256
439
  }
257
- )),
440
+ ),
258
441
  /* @__PURE__ */ React2.createElement(import_ui4.Divider, null),
259
442
  /* @__PURE__ */ React2.createElement(import_ui4.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
260
443
  import_ui4.TextField,
@@ -285,6 +468,7 @@ var ColorVariableCreation = ({ popupState }) => {
285
468
  };
286
469
 
287
470
  // src/components/variables-selection-popover.tsx
471
+ var SIZE2 = "tiny";
288
472
  var VariablesSelectionPopover = ({
289
473
  selectedVariable,
290
474
  unlinkVariable,
@@ -301,6 +485,7 @@ var VariablesSelectionPopover = ({
301
485
  };
302
486
  const anchorRef = (0, import_react4.useRef)(null);
303
487
  const { label } = selectedVariable;
488
+ const colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;
304
489
  return /* @__PURE__ */ React3.createElement(import_ui5.Box, { ref: anchorRef }, /* @__PURE__ */ React3.createElement(
305
490
  import_ui5.UnstableTag,
306
491
  {
@@ -309,7 +494,7 @@ var VariablesSelectionPopover = ({
309
494
  ...(0, import_ui5.bindTrigger)(popupState),
310
495
  startIcon: /* @__PURE__ */ React3.createElement(import_ui5.Stack, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
311
496
  label: /* @__PURE__ */ React3.createElement(import_ui5.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React3.createElement(import_ui5.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
312
- actions: /* @__PURE__ */ React3.createElement(import_ui5.IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": (0, import_i18n2.__)("Unlink", "elementor") }, /* @__PURE__ */ React3.createElement(import_icons3.DetachIcon, { fontSize: "tiny" }))
497
+ actions: /* @__PURE__ */ React3.createElement(import_ui5.IconButton, { size: SIZE2, onClick: unlinkVariable, "aria-label": (0, import_i18n2.__)("Unlink", "elementor") }, /* @__PURE__ */ React3.createElement(import_icons3.DetachIcon, { fontSize: SIZE2 }))
313
498
  }
314
499
  ), /* @__PURE__ */ React3.createElement(
315
500
  import_ui5.Popover,
@@ -320,17 +505,28 @@ var VariablesSelectionPopover = ({
320
505
  anchorOrigin: { vertical: "bottom", horizontal: "right" },
321
506
  transformOrigin: { vertical: "top", horizontal: "right" }
322
507
  },
323
- /* @__PURE__ */ React3.createElement(import_ui5.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React3.createElement(import_ui5.Typography, { variant: "subtitle2" }, (0, import_i18n2.__)("Variables", "elementor")), /* @__PURE__ */ React3.createElement(import_ui5.Stack, { direction: "row", sx: { ml: "auto" } }, /* @__PURE__ */ React3.createElement(
324
- import_ui5.IconButton,
508
+ /* @__PURE__ */ React3.createElement(
509
+ import_editor_ui2.PopoverHeader,
325
510
  {
326
- ...(0, import_ui5.bindTrigger)(creationPopupState),
327
- size: "tiny",
328
- onClick: handleCreateButtonClick
329
- },
330
- /* @__PURE__ */ React3.createElement(import_icons3.PlusIcon, { fontSize: "tiny" })
331
- ), /* @__PURE__ */ React3.createElement(import_ui5.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: closePopover }))),
511
+ title: (0, import_i18n2.__)("Variables", "elementor"),
512
+ onClose: closePopover,
513
+ icon: /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: SIZE2 }),
514
+ actions: [
515
+ /* @__PURE__ */ React3.createElement(
516
+ import_ui5.IconButton,
517
+ {
518
+ key: "createVariable",
519
+ ...(0, import_ui5.bindTrigger)(creationPopupState),
520
+ size: SIZE2,
521
+ onClick: handleCreateButtonClick
522
+ },
523
+ /* @__PURE__ */ React3.createElement(import_icons3.PlusIcon, { fontSize: SIZE2 })
524
+ )
525
+ ]
526
+ }
527
+ ),
332
528
  children?.({ closePopover })
333
- ), /* @__PURE__ */ React3.createElement(ColorVariableCreation, { popupState: creationPopupState }));
529
+ ), colorCreationEnabled && /* @__PURE__ */ React3.createElement(ColorVariableCreation, { popupState: creationPopupState }));
334
530
  };
335
531
 
336
532
  // src/controls/color-variables-selection-control.tsx
@@ -432,12 +628,12 @@ var import_icons5 = require("@elementor/icons");
432
628
  var import_ui6 = require("@elementor/ui");
433
629
  var FontVariablesSelection = ({ onSelect }) => {
434
630
  const { value: variable, setValue: setVariable } = (0, import_editor_controls4.useBoundProp)(fontVariablePropTypeUtil);
435
- const variables2 = usePropVariables(fontVariablePropTypeUtil.key);
631
+ const variables = usePropVariables(fontVariablePropTypeUtil.key);
436
632
  const handleSetVariable = (key) => {
437
633
  setVariable(key);
438
634
  onSelect?.();
439
635
  };
440
- return /* @__PURE__ */ React6.createElement(import_react5.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_ui6.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React6.createElement(import_ui6.MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React6.createElement(
636
+ return /* @__PURE__ */ React6.createElement(import_react5.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_ui6.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React6.createElement(import_ui6.MenuList, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React6.createElement(
441
637
  StyledMenuItem,
442
638
  {
443
639
  key,
@@ -547,200 +743,19 @@ function usePortalContainer() {
547
743
  return (0, import_editor_v1_adapters.__privateUseListenTo)((0, import_editor_v1_adapters.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
548
744
  }
549
745
  function useStyleVariables() {
550
- const [variables2, setVariables] = (0, import_react6.useState)({});
746
+ const [variables, setVariables] = (0, import_react6.useState)({});
551
747
  (0, import_react6.useEffect)(() => {
552
748
  const unsubscribe = styleVariablesRepository.subscribe(setVariables);
553
749
  return () => {
554
750
  unsubscribe();
555
751
  };
556
752
  }, []);
557
- return variables2;
753
+ return variables;
558
754
  }
559
- function convertToCssVariables(variables2) {
560
- return Object.entries(variables2).map(([key, value]) => `--${key}:${value};`).join("");
755
+ function convertToCssVariables(variables) {
756
+ return Object.entries(variables).map(([key, value]) => `--${key}:${value};`).join("");
561
757
  }
562
758
 
563
- // src/api.ts
564
- var import_http_client = require("@elementor/http-client");
565
- var BASE_PATH = "elementor/v1/variables";
566
- var apiClient = {
567
- list: () => {
568
- return (0, import_http_client.httpService)().get(BASE_PATH + "/list");
569
- },
570
- create: (type, label, value) => {
571
- return (0, import_http_client.httpService)().post(BASE_PATH + "/create", {
572
- type,
573
- label,
574
- value
575
- });
576
- },
577
- update: (id, label, value) => {
578
- return (0, import_http_client.httpService)().put(BASE_PATH + "/update", {
579
- id,
580
- label,
581
- value
582
- });
583
- },
584
- delete: (id) => {
585
- return (0, import_http_client.httpService)().post(BASE_PATH + "/delete", { id });
586
- },
587
- restore: (id) => {
588
- return (0, import_http_client.httpService)().post(BASE_PATH + "/restore", { id });
589
- }
590
- };
591
-
592
- // src/storage.ts
593
- var STORAGE_KEY = "elementor-global-variables";
594
- var STORAGE_WATERMARK_KEY = "elementor-global-variables-watermark";
595
- var OP_RW = "RW";
596
- var OP_RO = "RO";
597
- var Storage = class {
598
- state;
599
- constructor() {
600
- this.state = {
601
- watermark: -1,
602
- variables: {}
603
- };
604
- }
605
- load() {
606
- this.state.watermark = parseInt(localStorage.getItem(STORAGE_WATERMARK_KEY) || "-1");
607
- this.state.variables = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
608
- return this.state.variables;
609
- }
610
- fill(variables2, watermark) {
611
- this.state.watermark = watermark;
612
- this.state.variables = variables2;
613
- localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
614
- localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
615
- }
616
- add(id, variable) {
617
- this.load();
618
- this.state.variables[id] = variable;
619
- localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
620
- }
621
- update(id, variable) {
622
- this.load();
623
- this.state.variables[id] = variable;
624
- localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
625
- }
626
- watermark(watermark) {
627
- this.state.watermark = watermark;
628
- localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
629
- }
630
- watermarkDiff(operation, newWatermark) {
631
- const diff = newWatermark - this.state.watermark;
632
- if (OP_RW === operation) {
633
- return 1 !== diff;
634
- }
635
- if (OP_RO === operation) {
636
- return 0 !== diff;
637
- }
638
- return false;
639
- }
640
- };
641
-
642
- // src/service.ts
643
- var storage = new Storage();
644
- var service = {
645
- variables: () => {
646
- return storage.load();
647
- },
648
- init: () => {
649
- service.load();
650
- },
651
- load: () => {
652
- return apiClient.list().then((response) => {
653
- const { success, data: payload } = response.data;
654
- if (!success) {
655
- throw new Error("Unexpected response from server");
656
- }
657
- return payload;
658
- }).then((data) => {
659
- const { variables: variables2, watermark } = data;
660
- storage.fill(variables2, watermark);
661
- return variables2;
662
- });
663
- },
664
- create: ({ type, label, value }) => {
665
- return apiClient.create(type, label, value).then((response) => {
666
- const { success, data: payload } = response.data;
667
- if (!success) {
668
- throw new Error("Unexpected response from server");
669
- }
670
- return payload;
671
- }).then((data) => {
672
- const { variable, watermark } = data;
673
- handleWatermark(OP_RW, watermark);
674
- const { id: variableId, ...createdVariable } = variable;
675
- storage.add(variableId, createdVariable);
676
- return {
677
- id: variableId,
678
- variable: createdVariable
679
- };
680
- });
681
- },
682
- update: (id, { label, value }) => {
683
- return apiClient.update(id, label, value).then((response) => {
684
- const { success, data: payload } = response.data;
685
- if (!success) {
686
- throw new Error("Unexpected response from server");
687
- }
688
- return payload;
689
- }).then((data) => {
690
- const { variable, watermark } = data;
691
- handleWatermark(OP_RW, watermark);
692
- const { id: variableId, ...updatedVariable } = variable;
693
- storage.update(variableId, updatedVariable);
694
- return {
695
- id: variableId,
696
- variable: updatedVariable
697
- };
698
- });
699
- },
700
- delete: (id) => {
701
- return apiClient.delete(id).then((response) => {
702
- const { success, data: payload } = response.data;
703
- if (!success) {
704
- throw new Error("Unexpected response from server");
705
- }
706
- return payload;
707
- }).then((data) => {
708
- const { variable, watermark } = data;
709
- handleWatermark(OP_RW, watermark);
710
- const { id: variableId, ...deletedVariable } = variable;
711
- storage.update(variableId, deletedVariable);
712
- return {
713
- id: variableId,
714
- variable: deletedVariable
715
- };
716
- });
717
- },
718
- restore: (id) => {
719
- return apiClient.restore(id).then((response) => {
720
- const { success, data: payload } = response.data;
721
- if (!success) {
722
- throw new Error("Unexpected response from server");
723
- }
724
- return payload;
725
- }).then((data) => {
726
- const { variable, watermark } = data;
727
- handleWatermark(OP_RW, watermark);
728
- const { id: variableId, ...restoredVariable } = variable;
729
- storage.update(variableId, restoredVariable);
730
- return {
731
- id: variableId,
732
- variable: restoredVariable
733
- };
734
- });
735
- }
736
- };
737
- var handleWatermark = (operation, newWatermark) => {
738
- if (storage.watermarkDiff(operation, newWatermark)) {
739
- setTimeout(() => service.load(), 500);
740
- }
741
- storage.watermark(newWatermark);
742
- };
743
-
744
759
  // src/init.ts
745
760
  function init() {
746
761
  initColorVariables();