@crystaldesign/content-item 25.7.0-beta.2 → 25.7.0-beta.20
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.
- package/build/esm/index.js +434 -49
- package/build/types/content-item/src/Components/ContentItemNavigator/index.d.ts +11 -0
- package/build/types/content-item/src/Components/ContentItemNavigator/index.d.ts.map +1 -0
- package/build/types/content-item/src/Components/ContentItemNavigator/useContentItemNavigator.d.ts +7 -0
- package/build/types/content-item/src/Components/ContentItemNavigator/useContentItemNavigator.d.ts.map +1 -0
- package/build/types/content-item/src/Components/ContentItems/index.d.ts +4 -5
- package/build/types/content-item/src/Components/ContentItems/index.d.ts.map +1 -1
- package/build/types/content-item/src/Components/ContentItems/useContentItem.d.ts +12 -0
- package/build/types/content-item/src/Components/ContentItems/useContentItem.d.ts.map +1 -0
- package/build/types/content-item/src/Components/ErrorBox/index.d.ts +5 -0
- package/build/types/content-item/src/Components/ErrorBox/index.d.ts.map +1 -0
- package/build/types/content-item/src/Components/Loader/index.d.ts +3 -0
- package/build/types/content-item/src/Components/Loader/index.d.ts.map +1 -0
- package/build/types/content-item/src/Components/RichText/index.d.ts.map +1 -1
- package/build/types/content-item/src/Components/Title/index.d.ts.map +1 -1
- package/build/types/content-item/src/Components/Video/index.d.ts.map +1 -1
- package/build/types/content-item/src/index.d.ts +8 -10
- package/build/types/content-item/src/index.d.ts.map +1 -1
- package/build/types/content-item/src/stories/basicItem.stories.d.ts +3 -3
- package/build/types/content-item/src/stories/basicItem.stories.d.ts.map +1 -1
- package/build/types/content-item/src/types.d.ts +15 -0
- package/build/types/content-item/src/types.d.ts.map +1 -1
- package/build/types/content-item/src/utils/contentItemLinkProcessor.d.ts +23 -0
- package/build/types/content-item/src/utils/contentItemLinkProcessor.d.ts.map +1 -0
- package/build/types/content-item/src/utils/index.d.ts +2 -0
- package/build/types/content-item/src/utils/index.d.ts.map +1 -0
- package/package.json +2 -2
package/build/esm/index.js
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useState } from 'react';
|
|
1
|
+
import { useState, useEffect, useCallback, useMemo, createContext, useContext, useRef, useDeferredValue, useTransition } from 'react';
|
|
3
2
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
import
|
|
3
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
4
|
+
import { useDivaCore, useTranslation, DivaError } from '@crystaldesign/diva-core';
|
|
5
|
+
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
5
6
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
6
7
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
7
8
|
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
|
|
9
|
+
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
|
|
10
|
+
import _regeneratorRuntime from '@babel/runtime/regenerator';
|
|
11
|
+
import axios from 'axios';
|
|
12
|
+
import classnames from 'classnames';
|
|
8
13
|
|
|
9
14
|
(function() {
|
|
10
15
|
const env = {"STAGE":"production"};
|
|
@@ -18,6 +23,81 @@ import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
|
|
|
18
23
|
globalThis.process = { env:env };
|
|
19
24
|
})();
|
|
20
25
|
|
|
26
|
+
/**
|
|
27
|
+
* Processes text content to handle content item links.
|
|
28
|
+
* For plain text, converts @[type:identifier](text) pattern to React elements.
|
|
29
|
+
* For HTML content, ensures proper attributes and structure for content item links.
|
|
30
|
+
*
|
|
31
|
+
* Examples:
|
|
32
|
+
* - @[id:123](Click here)
|
|
33
|
+
* - @[codex:ABC]
|
|
34
|
+
* - @[id:456](Custom text)
|
|
35
|
+
*/
|
|
36
|
+
function processContentItemLinks(content, onContentItemClick) {
|
|
37
|
+
// If content contains HTML, process as HTML
|
|
38
|
+
if (content.includes('<')) {
|
|
39
|
+
return {
|
|
40
|
+
type: 'html',
|
|
41
|
+
content: processHtmlContent(content)
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Process as plain text
|
|
46
|
+
return {
|
|
47
|
+
type: 'react',
|
|
48
|
+
content: processPlainTextContent(content, onContentItemClick)
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
function processHtmlContent(html, onContentItemClick) {
|
|
52
|
+
// First, convert any @[type:identifier](text) patterns to proper HTML
|
|
53
|
+
var pattern = /@\[(id|codex):([\w-]+)\](?:\((.*?)\))?/g;
|
|
54
|
+
var processedHtml = html.replace(pattern, function (match, type, identifier, displayText) {
|
|
55
|
+
var text = displayText || identifier;
|
|
56
|
+
return "<a class=\"content-item-link\" data-content-item-".concat(type, "=\"").concat(identifier, "\">").concat(text, "</a>");
|
|
57
|
+
});
|
|
58
|
+
return processedHtml;
|
|
59
|
+
}
|
|
60
|
+
function processPlainTextContent(text, onContentItemClick) {
|
|
61
|
+
var pattern = /@\[(id|codex):([\w-]+)\](?:\((.*?)\))?/g;
|
|
62
|
+
var parts = [];
|
|
63
|
+
var lastIndex = 0;
|
|
64
|
+
var match;
|
|
65
|
+
var _loop = function _loop() {
|
|
66
|
+
// Add text before the match
|
|
67
|
+
if (match.index > lastIndex) {
|
|
68
|
+
parts.push(text.substring(lastIndex, match.index));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Add the link
|
|
72
|
+
var identifierType = match[1];
|
|
73
|
+
var identifier = match[2];
|
|
74
|
+
var displayText = match[3] || identifier;
|
|
75
|
+
parts.push(/*#__PURE__*/jsx("a", {
|
|
76
|
+
className: "content-item-link",
|
|
77
|
+
"data-content-item-id": identifierType === 'id' ? identifier : undefined,
|
|
78
|
+
"data-content-item-codex": identifierType === 'codex' ? identifier : undefined,
|
|
79
|
+
onClick: function onClick(e) {
|
|
80
|
+
e.preventDefault();
|
|
81
|
+
onContentItemClick({
|
|
82
|
+
id: identifierType === 'id' ? identifier : undefined,
|
|
83
|
+
codex: identifierType === 'codex' ? identifier : undefined
|
|
84
|
+
});
|
|
85
|
+
},
|
|
86
|
+
children: displayText
|
|
87
|
+
}, match.index));
|
|
88
|
+
lastIndex = pattern.lastIndex;
|
|
89
|
+
};
|
|
90
|
+
while ((match = pattern.exec(text)) !== null) {
|
|
91
|
+
_loop();
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Add remaining text
|
|
95
|
+
if (lastIndex < text.length) {
|
|
96
|
+
parts.push(text.substring(lastIndex));
|
|
97
|
+
}
|
|
98
|
+
return parts;
|
|
99
|
+
}
|
|
100
|
+
|
|
21
101
|
function styleInject(css, ref) {
|
|
22
102
|
if ( ref === void 0 ) ref = {};
|
|
23
103
|
var insertAt = ref.insertAt;
|
|
@@ -46,8 +126,8 @@ function styleInject(css, ref) {
|
|
|
46
126
|
}
|
|
47
127
|
|
|
48
128
|
var urlText = "url-text-yHwAC";
|
|
49
|
-
var css_248z$
|
|
50
|
-
styleInject(css_248z$
|
|
129
|
+
var css_248z$9 = ".url-text-yHwAC {\n margin-top: 12px;\n margin-bottom: 12px;\n text-align: right;\n position: relative;\n display: block;\n width: 100%;\n}\n";
|
|
130
|
+
styleInject(css_248z$9);
|
|
51
131
|
|
|
52
132
|
var URL$1 = function URL(_ref) {
|
|
53
133
|
var _ref$item = _ref.item,
|
|
@@ -69,8 +149,8 @@ var text = "text-Da-D1";
|
|
|
69
149
|
var fullscreenButtonWrapper = "fullscreen-button-wrapper-Botqq";
|
|
70
150
|
var fullscreenButton$1 = "fullscreen-button-A4b3x";
|
|
71
151
|
var fullscreenWrapper$1 = "fullscreen-wrapper-GByIA";
|
|
72
|
-
var css_248z$
|
|
73
|
-
styleInject(css_248z$
|
|
152
|
+
var css_248z$8 = ".image-and-text-wrapper-c1RTN {\n display: flex;\n flex-direction: column;\n gap: 6px;\n justify-content: center;\n position: relative;\n}\n\n.text-Da-D1 {\n overflow: auto;\n text-align: center;\n font-size: 14px;\n}\n\n.fullscreen-button-wrapper-Botqq {\n position: relative;\n}\n\n.fullscreen-button-A4b3x {\n cursor: pointer;\n position: absolute;\n width: 20px;\n height: 20px;\n top: 16px;\n right: 8px;\n border-radius: 3px;\n z-index: 1000;\n background: center / 75% no-repeat rgba(255,255,255,0.53333) url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1H2C1.44772 1 1 1.44772 1 2V22C1 22.5523 1.44772 23 2 23H21.9999C22.5522 23 22.9999 22.5523 22.9999 22V12M16.0078 1H21.9989C22.5512 1 22.9989 1.44772 22.9989 2V7.99114M22.5002 1.5L13.3195 10.68%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.fullscreen-wrapper-GByIA {\n display: flex;\n justify-content: center;\n align-items: center;\n background: #fff;\n position: relative;\n height: 100%;\n width: 100%;\n z-index: 2000005;\n}\n";
|
|
153
|
+
styleInject(css_248z$8);
|
|
74
154
|
|
|
75
155
|
function ownKeys$2(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; }
|
|
76
156
|
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -152,8 +232,8 @@ var _Image = function Image(_ref) {
|
|
|
152
232
|
|
|
153
233
|
var videoClass = "videoClass-jg-N2";
|
|
154
234
|
var youtubeThumb = "youtube-thumb-XJDvt";
|
|
155
|
-
var css_248z$
|
|
156
|
-
styleInject(css_248z$
|
|
235
|
+
var css_248z$7 = ".videoClass-jg-N2 {\n width: 100%;\n max-height: 100%;\n}\n\n.youtube-thumb-XJDvt {\n background: center / 75% no-repeat url(\"data:image/svg+xml,%3Csvg fill%3D%22%23000000%22 height%3D%22800px%22 width%3D%22800px%22 version%3D%221.1%22 id%3D%22Capa_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 %09 viewBox%3D%220 0 49 49%22 xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%09%3Cg%3E%09%09%3Cpath d%3D%22M39.256%2C6.5H9.744C4.371%2C6.5%2C0%2C10.885%2C0%2C16.274v16.451c0%2C5.39%2C4.371%2C9.774%2C9.744%2C9.774h29.512%09%09%09c5.373%2C0%2C9.744-4.385%2C9.744-9.774V16.274C49%2C10.885%2C44.629%2C6.5%2C39.256%2C6.5z M47%2C32.726c0%2C4.287-3.474%2C7.774-7.744%2C7.774H9.744%09%09%09C5.474%2C40.5%2C2%2C37.012%2C2%2C32.726V16.274C2%2C11.988%2C5.474%2C8.5%2C9.744%2C8.5h29.512c4.27%2C0%2C7.744%2C3.488%2C7.744%2C7.774V32.726z%22%2F%3E%09%09%3Cpath d%3D%22M33.36%2C24.138l-13.855-8.115c-0.308-0.18-0.691-0.183-1.002-0.005S18%2C16.527%2C18%2C16.886v16.229%09%09%09c0%2C0.358%2C0.192%2C0.69%2C0.502%2C0.868c0.154%2C0.088%2C0.326%2C0.132%2C0.498%2C0.132c0.175%2C0%2C0.349-0.046%2C0.505-0.137l13.855-8.113%09%09%09c0.306-0.179%2C0.495-0.508%2C0.495-0.863S33.667%2C24.317%2C33.36%2C24.138z M20%2C31.37V18.63l10.876%2C6.371L20%2C31.37z%22%2F%3E%09%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n width: 100%;\n height: 100%;\n}\n";
|
|
236
|
+
styleInject(css_248z$7);
|
|
157
237
|
|
|
158
238
|
var Video = function Video(_ref) {
|
|
159
239
|
var _ref$item = _ref.item,
|
|
@@ -181,7 +261,7 @@ var Video = function Video(_ref) {
|
|
|
181
261
|
src: urlObject.toString(),
|
|
182
262
|
referrerPolicy: "strict-origin-when-cross-origin",
|
|
183
263
|
allow: "autoplay; gyroscope; picture-in-picture"
|
|
184
|
-
});
|
|
264
|
+
}, video);
|
|
185
265
|
}
|
|
186
266
|
return /*#__PURE__*/jsx("video", {
|
|
187
267
|
className: videoClass,
|
|
@@ -194,37 +274,152 @@ var Video = function Video(_ref) {
|
|
|
194
274
|
src: video + (thumb ? '#t=2' : ''),
|
|
195
275
|
type: video.includes('.mp4') ? 'video/mp4' : 'video/webm'
|
|
196
276
|
})
|
|
197
|
-
});
|
|
277
|
+
}, video);
|
|
198
278
|
};
|
|
199
279
|
|
|
200
280
|
var title = "title-0S918";
|
|
201
|
-
var css_248z$
|
|
202
|
-
styleInject(css_248z$
|
|
281
|
+
var css_248z$6 = ".title-0S918 {\n font-size: 18px;\n font-weight: 500;\n}\n";
|
|
282
|
+
styleInject(css_248z$6);
|
|
283
|
+
|
|
284
|
+
function ownKeys$1(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; }
|
|
285
|
+
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
286
|
+
var useContentItemNavigator = function useContentItemNavigator(_ref) {
|
|
287
|
+
var initialItemId = _ref.initialItemId,
|
|
288
|
+
initialItemCodex = _ref.initialItemCodex,
|
|
289
|
+
initialItemConfiguration = _ref.initialItemConfiguration;
|
|
290
|
+
var _useState = useState({
|
|
291
|
+
current: {
|
|
292
|
+
id: initialItemId,
|
|
293
|
+
codex: initialItemCodex,
|
|
294
|
+
configuration: initialItemConfiguration
|
|
295
|
+
},
|
|
296
|
+
history: []
|
|
297
|
+
}),
|
|
298
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
299
|
+
navigationState = _useState2[0],
|
|
300
|
+
setNavigationState = _useState2[1];
|
|
301
|
+
useEffect(function () {
|
|
302
|
+
setNavigationState({
|
|
303
|
+
current: {
|
|
304
|
+
id: initialItemId,
|
|
305
|
+
codex: initialItemCodex,
|
|
306
|
+
configuration: initialItemConfiguration
|
|
307
|
+
},
|
|
308
|
+
history: []
|
|
309
|
+
});
|
|
310
|
+
}, [initialItemId, initialItemCodex, initialItemConfiguration]);
|
|
311
|
+
var navigateTo = useCallback(function (props) {
|
|
312
|
+
if (props.id || props.codex) {
|
|
313
|
+
setNavigationState(function (prev) {
|
|
314
|
+
return {
|
|
315
|
+
current: props,
|
|
316
|
+
history: [].concat(_toConsumableArray(prev.history), [prev.current])
|
|
317
|
+
};
|
|
318
|
+
});
|
|
319
|
+
}
|
|
320
|
+
}, []);
|
|
321
|
+
var navigateBack = useCallback(function () {
|
|
322
|
+
setNavigationState(function (prev) {
|
|
323
|
+
if (prev.history.length === 0) return prev;
|
|
324
|
+
var previous = prev.history[prev.history.length - 1];
|
|
325
|
+
return {
|
|
326
|
+
current: previous,
|
|
327
|
+
history: prev.history.slice(0, -1)
|
|
328
|
+
};
|
|
329
|
+
});
|
|
330
|
+
}, []);
|
|
331
|
+
var onContentItemLoaded = useCallback(function (title) {
|
|
332
|
+
setNavigationState(function (prev) {
|
|
333
|
+
return _objectSpread$1(_objectSpread$1({}, prev), {}, {
|
|
334
|
+
current: _objectSpread$1(_objectSpread$1({}, prev.current), {}, {
|
|
335
|
+
title: title
|
|
336
|
+
})
|
|
337
|
+
});
|
|
338
|
+
});
|
|
339
|
+
}, []);
|
|
340
|
+
|
|
341
|
+
// Create context value
|
|
342
|
+
var contextValue = useMemo(function () {
|
|
343
|
+
return {
|
|
344
|
+
navigateTo: navigateTo,
|
|
345
|
+
onContentItemLoaded: onContentItemLoaded,
|
|
346
|
+
canGoBack: navigationState.history.length > 0,
|
|
347
|
+
currentContentItem: navigationState.current
|
|
348
|
+
};
|
|
349
|
+
}, [navigationState.current, navigationState.history.length]);
|
|
350
|
+
return {
|
|
351
|
+
contextValue: contextValue,
|
|
352
|
+
navigateBack: navigateBack
|
|
353
|
+
};
|
|
354
|
+
};
|
|
355
|
+
|
|
356
|
+
var navigator = "navigator-C8xIR";
|
|
357
|
+
var backButton = "back-button-JNU6b";
|
|
358
|
+
var css_248z$5 = ".navigator-C8xIR {\n position: relative;\n width: 100%;\n}\n\n.back-button-JNU6b {\n position: absolute;\n top: 12px;\n left: 8px;\n z-index: 2;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 20px;\n color: #666;\n transition: color 0.2s ease;\n border-radius: 50%;\n width: 34px;\n height: 34px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-bottom: 4px;\n}\n.back-button-JNU6b:after {\n content: '←';\n display: block;\n text-align: center;\n}\n\n.back-button-JNU6b:hover {\n color: #333;\n background-color: rgba(0, 0, 0, 0.05);\n}\n";
|
|
359
|
+
styleInject(css_248z$5);
|
|
360
|
+
|
|
361
|
+
var ContentItemNavigationContext = /*#__PURE__*/createContext(undefined);
|
|
362
|
+
function useContentItemNavigation() {
|
|
363
|
+
var context = useContext(ContentItemNavigationContext);
|
|
364
|
+
if (!context) {
|
|
365
|
+
throw new Error('useContentItemNavigation must be used within a ContentItemNavigator');
|
|
366
|
+
}
|
|
367
|
+
return context;
|
|
368
|
+
}
|
|
369
|
+
function ContentItemNavigator(_ref) {
|
|
370
|
+
var initialItemId = _ref.initialItemId,
|
|
371
|
+
initialItemCodex = _ref.initialItemCodex,
|
|
372
|
+
initialItemConfiguration = _ref.initialItemConfiguration,
|
|
373
|
+
children = _ref.children;
|
|
374
|
+
var _useContentItemNaviga = useContentItemNavigator({
|
|
375
|
+
initialItemId: initialItemId,
|
|
376
|
+
initialItemCodex: initialItemCodex,
|
|
377
|
+
initialItemConfiguration: initialItemConfiguration
|
|
378
|
+
}),
|
|
379
|
+
contextValue = _useContentItemNaviga.contextValue,
|
|
380
|
+
navigateBack = _useContentItemNaviga.navigateBack;
|
|
381
|
+
return /*#__PURE__*/jsx(ContentItemNavigationContext.Provider, {
|
|
382
|
+
value: contextValue,
|
|
383
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
384
|
+
className: navigator,
|
|
385
|
+
id: "diva-content-item-navigator",
|
|
386
|
+
children: [contextValue.canGoBack && /*#__PURE__*/jsx("button", {
|
|
387
|
+
className: backButton,
|
|
388
|
+
onClick: navigateBack,
|
|
389
|
+
id: "diva-content-item-back-button",
|
|
390
|
+
"aria-label": "Go back"
|
|
391
|
+
}), children]
|
|
392
|
+
})
|
|
393
|
+
});
|
|
394
|
+
}
|
|
203
395
|
|
|
204
396
|
var Title = function Title(_ref) {
|
|
205
397
|
var _ref$item = _ref.item,
|
|
206
398
|
text = _ref$item.text,
|
|
207
399
|
style = _ref$item.style;
|
|
400
|
+
var _useContentItemNaviga = useContentItemNavigation(),
|
|
401
|
+
navigateTo = _useContentItemNaviga.navigateTo;
|
|
208
402
|
if (!text) return /*#__PURE__*/jsx(Fragment, {});
|
|
403
|
+
var processedContent = processContentItemLinks(text, navigateTo);
|
|
209
404
|
return /*#__PURE__*/jsx("h4", {
|
|
210
405
|
className: title,
|
|
211
406
|
style: style,
|
|
212
|
-
children:
|
|
407
|
+
children: processedContent.content
|
|
213
408
|
});
|
|
214
409
|
};
|
|
215
410
|
|
|
216
|
-
var css_248z$
|
|
217
|
-
styleInject(css_248z$
|
|
411
|
+
var css_248z$4 = "/*Free mode*/\n#diva-content-item .swiper-free-mode > .swiper-wrapper {\n transition-timing-function: ease-out;\n margin: 0 auto;\n}\n/*navigation*/\n:root {\n --swiper-navigation-size: 44px;\n}\n#diva-content-item .swiper-button-next,\n#diva-content-item .swiper-button-prev {\n position: absolute;\n top: 50%;\n width: calc(44px / 44 * 27);\n width: calc(var(--swiper-navigation-size) / 44 * 27);\n height: 44px;\n height: var(--swiper-navigation-size);\n margin-top: calc(0px - (44px / 2));\n margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n z-index: 10;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #007aff;\n color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n#diva-content-item .swiper-button-next.swiper-button-disabled,\n#diva-content-item .swiper-button-prev.swiper-button-disabled {\n opacity: 0.35;\n cursor: auto;\n pointer-events: none;\n}\n#diva-content-item .swiper-button-next.swiper-button-hidden,\n#diva-content-item .swiper-button-prev.swiper-button-hidden {\n opacity: 0;\n cursor: auto;\n pointer-events: none;\n}\n#diva-content-item .swiper-navigation-disabled .swiper-button-next,\n#diva-content-item .swiper-navigation-disabled .swiper-button-prev {\n display: none !important;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-button-prev:after {\n text-transform: none !important;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-button-prev:after {\n font-family: swiper-icons;\n font-size: 44px;\n font-size: var(--swiper-navigation-size);\n letter-spacing: 0;\n font-feature-settings: ;\n font-variant: normal;\n font-variant: initial;\n line-height: 1;\n}\n#diva-content-item .swiper-button-prev,\n#diva-content-item .swiper-rtl .swiper-button-next {\n left: 10px;\n right: auto;\n}\n#diva-content-item .swiper-button-prev:after,\n#diva-content-item .swiper-rtl .swiper-button-next:after {\n content: 'prev';\n}\n#diva-content-item .swiper-button-next,\n#diva-content-item .swiper-rtl .swiper-button-prev {\n right: 10px;\n left: auto;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-rtl .swiper-button-prev:after {\n content: 'next';\n}\n#diva-content-item .swiper-button-lock {\n display: none;\n}\n\n/*swiper min css*/\n\n@font-face {\n font-family: swiper-icons;\n src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');\n font-weight: 400;\n font-style: normal;\n}\n:root {\n --swiper-theme-color: #007aff;\n}\n#diva-content-item .swiper {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n overflow: hidden;\n list-style: none;\n padding: 0;\n z-index: 1;\n}\n#diva-content-item .swiper-vertical > .swiper-wrapper {\n flex-direction: column;\n}\n#diva-content-item .swiper-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1;\n display: flex;\n transition-property: transform;\n box-sizing: content-box;\n}\n#diva-content-item .swiper-android .swiper-slide,\n#diva-content-item .swiper-wrapper {\n transform: translate3d(0px, 0, 0);\n}\n#diva-content-item .swiper-pointer-events {\n touch-action: pan-y;\n}\n#diva-content-item .swiper-pointer-events.swiper-vertical {\n touch-action: pan-x;\n}\n#diva-content-item .swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n}\n#diva-content-item .swiper-slide-invisible-blank {\n visibility: hidden;\n}\n#diva-content-item .swiper-autoheight,\n#diva-content-item .swiper-autoheight .swiper-slide {\n height: auto;\n}\n#diva-content-item .swiper-autoheight .swiper-wrapper {\n align-items: flex-start;\n transition-property: transform, height;\n}\n#diva-content-item .swiper-backface-hidden .swiper-slide {\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n#diva-content-item .swiper-3d,\n#diva-content-item .swiper-3d.swiper-css-mode .swiper-wrapper {\n perspective: 1200px;\n}\n#diva-content-item .swiper-3d .swiper-cube-shadow,\n#diva-content-item .swiper-3d .swiper-slide,\n#diva-content-item .swiper-3d .swiper-slide-shadow,\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom,\n#diva-content-item .swiper-3d .swiper-slide-shadow-left,\n#diva-content-item .swiper-3d .swiper-slide-shadow-right,\n#diva-content-item .swiper-3d .swiper-slide-shadow-top,\n#diva-content-item .swiper-3d .swiper-wrapper {\n transform-style: preserve-3d;\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow,\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom,\n#diva-content-item .swiper-3d .swiper-slide-shadow-left,\n#diva-content-item .swiper-3d .swiper-slide-shadow-right,\n#diva-content-item .swiper-3d .swiper-slide-shadow-top {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 10;\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow {\n background: rgba(0, 0, 0, 0.15);\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-left {\n background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-right {\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-top {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom {\n background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper {\n overflow: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n display: none;\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: start start;\n}\n#diva-content-item .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n scroll-snap-type: x mandatory;\n}\n#diva-content-item .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n scroll-snap-type: y mandatory;\n}\n#diva-content-item .swiper-centered > .swiper-wrapper::before {\n content: '';\n flex-shrink: 0;\n order: 9999;\n}\n[dir=\"ltr\"] #diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] #diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n margin-right: var(--swiper-centered-offset-before);\n}\n#diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n height: 100%;\n min-height: 1px;\n width: var(--swiper-centered-offset-after);\n}\n#diva-content-item .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n margin-top: var(--swiper-centered-offset-before);\n}\n#diva-content-item .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n width: 100%;\n min-width: 1px;\n height: var(--swiper-centered-offset-after);\n}\n#diva-content-item .swiper-centered > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: center center;\n}\n";
|
|
412
|
+
styleInject(css_248z$4);
|
|
218
413
|
|
|
219
414
|
var fullscreenWrapper = "fullscreen-wrapper-TiWjP";
|
|
220
415
|
var fullscreenButton = "fullscreen-button-unFbw";
|
|
221
416
|
var mySwiper2 = "mySwiper2-mfrK1";
|
|
222
417
|
var mySwiper = "mySwiper-urn8y";
|
|
223
|
-
var css_248z = "#diva-content-item .swiper {\n width: 100%;\n height: 100%;\n}\n#diva-content-item .swiper-slide {\n text-align: center;\n font-size: 18px;\n background: #fff;\n\n /* Center slide text vertically */\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.fullscreen-wrapper-TiWjP {\n display: flex;\n justify-content: center;\n align-items: center;\n background: #fff;\n position: relative;\n height: 100%;\n width: 100%;\n z-index: 2000005;\n}\n\n.fullscreen-button-unFbw {\n cursor: pointer;\n position: absolute;\n width: 20px;\n height: 20px;\n top: 16px;\n right: 8px;\n border-radius: 3px;\n z-index: 1000;\n background: center / 75% no-repeat rgba(255,255,255,0.53333) url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1H2C1.44772 1 1 1.44772 1 2V22C1 22.5523 1.44772 23 2 23H21.9999C22.5522 23 22.9999 22.5523 22.9999 22V12M16.0078 1H21.9989C22.5512 1 22.9989 1.44772 22.9989 2V7.99114M22.5002 1.5L13.3195 10.68%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.mobile #diva-content-item .swiper-slide {\n background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n background: initial;\n}\n\n#diva-content-item .swiper {\n width: 100%;\n height: 350px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.diva-fullscreen #DivaContentItemGallery {\n height: 90% !important;\n width: 90% !important;\n}\n\n.diva-fullscreen #diva-content-item .mySwiper2-mfrK1 {\n height: 100%;\n}\n\n#diva-content-item .swiper-slide {\n background-size: cover;\n background-position: center;\n}\n#diva-content-item .mySwiper2-mfrK1 {\n height: 80%;\n width: 100%;\n}\n#diva-content-item .mySwiper-urn8y {\n height: 20%;\n box-sizing: border-box;\n padding: 10px 0;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide {\n width: 25%;\n height: 100%;\n opacity: 0.4;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide-thumb-active {\n opacity: 1;\n}\n";
|
|
224
|
-
styleInject(css_248z);
|
|
418
|
+
var css_248z$3 = "#diva-content-item .swiper {\n width: 100%;\n height: 100%;\n}\n#diva-content-item .swiper-slide {\n text-align: center;\n font-size: 18px;\n background: #fff;\n\n /* Center slide text vertically */\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.fullscreen-wrapper-TiWjP {\n display: flex;\n justify-content: center;\n align-items: center;\n background: #fff;\n position: relative;\n height: 100%;\n width: 100%;\n z-index: 2000005;\n}\n\n.fullscreen-button-unFbw {\n cursor: pointer;\n position: absolute;\n width: 20px;\n height: 20px;\n top: 16px;\n right: 8px;\n border-radius: 3px;\n z-index: 1000;\n background: center / 75% no-repeat rgba(255,255,255,0.53333) url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1H2C1.44772 1 1 1.44772 1 2V22C1 22.5523 1.44772 23 2 23H21.9999C22.5522 23 22.9999 22.5523 22.9999 22V12M16.0078 1H21.9989C22.5512 1 22.9989 1.44772 22.9989 2V7.99114M22.5002 1.5L13.3195 10.68%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.mobile #diva-content-item .swiper-slide {\n background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n background: initial;\n}\n\n#diva-content-item .swiper {\n width: 100%;\n height: 350px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.diva-fullscreen #DivaContentItemGallery {\n height: 90% !important;\n width: 90% !important;\n}\n\n.diva-fullscreen #diva-content-item .mySwiper2-mfrK1 {\n height: 100%;\n}\n\n#diva-content-item .swiper-slide {\n background-size: cover;\n background-position: center;\n}\n#diva-content-item .mySwiper2-mfrK1 {\n height: 80%;\n width: 100%;\n}\n#diva-content-item .mySwiper-urn8y {\n height: 20%;\n box-sizing: border-box;\n padding: 10px 0;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide {\n width: 25%;\n height: 100%;\n opacity: 0.4;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide-thumb-active {\n opacity: 1;\n}\n";
|
|
419
|
+
styleInject(css_248z$3);
|
|
225
420
|
|
|
226
|
-
function ownKeys
|
|
227
|
-
function _objectSpread
|
|
421
|
+
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; }
|
|
422
|
+
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; }
|
|
228
423
|
var _Gallery = function Gallery(_ref) {
|
|
229
424
|
var _ref$item = _ref.item,
|
|
230
425
|
content = _ref$item.content,
|
|
@@ -244,7 +439,7 @@ var _Gallery = function Gallery(_ref) {
|
|
|
244
439
|
openFullscreen = _useDivaCore.actions.openFullscreen;
|
|
245
440
|
if (content.length == 0) return /*#__PURE__*/jsx(Fragment, {});
|
|
246
441
|
if (content.length == 1) return /*#__PURE__*/jsx(ContentItem, {
|
|
247
|
-
item: _objectSpread
|
|
442
|
+
item: _objectSpread(_objectSpread({}, content[0]), {
|
|
248
443
|
disableFullscreen: disableFullscreen
|
|
249
444
|
})
|
|
250
445
|
});
|
|
@@ -269,7 +464,7 @@ var _Gallery = function Gallery(_ref) {
|
|
|
269
464
|
};
|
|
270
465
|
return /*#__PURE__*/jsxs("div", {
|
|
271
466
|
id: 'DivaContentItemGallery',
|
|
272
|
-
style: _objectSpread
|
|
467
|
+
style: _objectSpread(_objectSpread({}, wrappingStyle), {}, {
|
|
273
468
|
position: 'relative'
|
|
274
469
|
}),
|
|
275
470
|
className: "diva-stop-swipe-detection",
|
|
@@ -293,7 +488,7 @@ var _Gallery = function Gallery(_ref) {
|
|
|
293
488
|
children: content.map(function (item, i) {
|
|
294
489
|
return /*#__PURE__*/jsx(SwiperSlide, {
|
|
295
490
|
children: /*#__PURE__*/jsx(ContentItem, {
|
|
296
|
-
item: _objectSpread
|
|
491
|
+
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
297
492
|
inGallery: true
|
|
298
493
|
})
|
|
299
494
|
})
|
|
@@ -310,7 +505,7 @@ var _Gallery = function Gallery(_ref) {
|
|
|
310
505
|
children: content.map(function (item, i) {
|
|
311
506
|
return /*#__PURE__*/jsx(SwiperSlide, {
|
|
312
507
|
children: /*#__PURE__*/jsx(ContentItem, {
|
|
313
|
-
item: _objectSpread
|
|
508
|
+
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
314
509
|
thumb: true
|
|
315
510
|
})
|
|
316
511
|
})
|
|
@@ -324,10 +519,39 @@ var RichText = function RichText(_ref) {
|
|
|
324
519
|
var _ref$item = _ref.item,
|
|
325
520
|
text = _ref$item.text,
|
|
326
521
|
style = _ref$item.style;
|
|
522
|
+
var containerRef = useRef(null);
|
|
523
|
+
var _useContentItemNaviga = useContentItemNavigation(),
|
|
524
|
+
navigateTo = _useContentItemNaviga.navigateTo;
|
|
525
|
+
var processedContent = processContentItemLinks(text, navigateTo);
|
|
526
|
+
useEffect(function () {
|
|
527
|
+
if (!containerRef.current) return;
|
|
528
|
+
var links = containerRef.current.querySelectorAll('.content-item-link');
|
|
529
|
+
var events = new Map();
|
|
530
|
+
links.forEach(function (link) {
|
|
531
|
+
var event = function event(e) {
|
|
532
|
+
var _link$getAttribute, _link$getAttribute2;
|
|
533
|
+
e.preventDefault();
|
|
534
|
+
var contentId = (_link$getAttribute = link.getAttribute('data-content-item-id')) !== null && _link$getAttribute !== void 0 ? _link$getAttribute : undefined;
|
|
535
|
+
var contentCodex = (_link$getAttribute2 = link.getAttribute('data-content-item-codex')) !== null && _link$getAttribute2 !== void 0 ? _link$getAttribute2 : undefined;
|
|
536
|
+
if (contentCodex || contentId) navigateTo({
|
|
537
|
+
id: contentId,
|
|
538
|
+
codex: contentCodex
|
|
539
|
+
});
|
|
540
|
+
};
|
|
541
|
+
events.set(link, event);
|
|
542
|
+
link.addEventListener('click', event);
|
|
543
|
+
});
|
|
544
|
+
return function () {
|
|
545
|
+
events.forEach(function (event, link) {
|
|
546
|
+
link.removeEventListener('click', event);
|
|
547
|
+
});
|
|
548
|
+
};
|
|
549
|
+
}, [processedContent.content, navigateTo]);
|
|
327
550
|
return /*#__PURE__*/jsx("div", {
|
|
551
|
+
ref: containerRef,
|
|
328
552
|
style: style,
|
|
329
553
|
dangerouslySetInnerHTML: {
|
|
330
|
-
__html:
|
|
554
|
+
__html: processedContent.content
|
|
331
555
|
}
|
|
332
556
|
});
|
|
333
557
|
};
|
|
@@ -381,36 +605,197 @@ var ContentItem = function ContentItem(_ref) {
|
|
|
381
605
|
throw new Error('unkonwn type: ' + item.type);
|
|
382
606
|
};
|
|
383
607
|
|
|
384
|
-
var
|
|
385
|
-
var
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
608
|
+
var useContentItem = function useContentItem(_ref) {
|
|
609
|
+
var onContentItemLoaded = _ref.onContentItemLoaded;
|
|
610
|
+
var _useDivaCore = useDivaCore(),
|
|
611
|
+
_useDivaCore$state = _useDivaCore.state,
|
|
612
|
+
apiConfig = _useDivaCore$state.apiConfig,
|
|
613
|
+
jwt = _useDivaCore$state.jwt;
|
|
614
|
+
var _useTranslation = useTranslation(),
|
|
615
|
+
i18n = _useTranslation.i18n;
|
|
616
|
+
var _useContentItemNaviga = useContentItemNavigation(),
|
|
617
|
+
_useContentItemNaviga2 = _useContentItemNaviga.currentContentItem,
|
|
618
|
+
contentItemId = _useContentItemNaviga2.id,
|
|
619
|
+
contentItemCodex = _useContentItemNaviga2.codex,
|
|
620
|
+
externalConfiguration = _useContentItemNaviga2.configuration,
|
|
621
|
+
onContentItemLoadedFromNavigation = _useContentItemNaviga.onContentItemLoaded;
|
|
622
|
+
var _useState = useState(externalConfiguration !== null && externalConfiguration !== void 0 ? externalConfiguration : {
|
|
623
|
+
content: []
|
|
624
|
+
}),
|
|
625
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
626
|
+
configuration = _useState2[0],
|
|
627
|
+
setConfiguration = _useState2[1];
|
|
628
|
+
var deferredConfiguration = useDeferredValue(configuration);
|
|
629
|
+
var _useTransition = useTransition(),
|
|
630
|
+
_useTransition2 = _slicedToArray(_useTransition, 2),
|
|
631
|
+
isPending = _useTransition2[0],
|
|
632
|
+
startTransition = _useTransition2[1];
|
|
633
|
+
var _useState3 = useState(true),
|
|
634
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
635
|
+
loading = _useState4[0],
|
|
636
|
+
setLoading = _useState4[1];
|
|
637
|
+
var _useState5 = useState(null),
|
|
638
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
639
|
+
error = _useState6[0],
|
|
640
|
+
setError = _useState6[1];
|
|
641
|
+
useEffect(function () {
|
|
642
|
+
if (contentItemId || contentItemCodex) {
|
|
643
|
+
setLoading(true);
|
|
644
|
+
setError(null);
|
|
645
|
+
getContentItem(apiConfig.catalogService, jwt, contentItemId !== null && contentItemId !== void 0 ? contentItemId : contentItemCodex, i18n.language).then(function (newConfiguration) {
|
|
646
|
+
startTransition(function () {
|
|
647
|
+
setConfiguration(newConfiguration);
|
|
648
|
+
var infoBoxTitle = newConfiguration.content.filter(function (item) {
|
|
649
|
+
return item.type === 'Title' && item.text;
|
|
650
|
+
}).map(function (item) {
|
|
651
|
+
return item.text;
|
|
652
|
+
});
|
|
653
|
+
onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(infoBoxTitle[0]);
|
|
654
|
+
onContentItemLoadedFromNavigation(infoBoxTitle[0]);
|
|
655
|
+
});
|
|
656
|
+
})["catch"](function (error) {
|
|
657
|
+
setError(error);
|
|
658
|
+
})["finally"](function () {
|
|
659
|
+
setLoading(false);
|
|
660
|
+
});
|
|
661
|
+
}
|
|
662
|
+
}, [contentItemId, contentItemCodex]);
|
|
663
|
+
useEffect(function () {
|
|
664
|
+
if (externalConfiguration) {
|
|
665
|
+
startTransition(function () {
|
|
666
|
+
setConfiguration(externalConfiguration);
|
|
667
|
+
var infoBoxTitle = externalConfiguration.content.filter(function (item) {
|
|
668
|
+
return item.type === 'Title' && item.text;
|
|
669
|
+
}).map(function (item) {
|
|
670
|
+
return item.text;
|
|
671
|
+
});
|
|
672
|
+
onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(infoBoxTitle[0]);
|
|
673
|
+
onContentItemLoadedFromNavigation(infoBoxTitle[0]);
|
|
674
|
+
});
|
|
675
|
+
setError(null);
|
|
676
|
+
setLoading(false);
|
|
677
|
+
}
|
|
678
|
+
}, [externalConfiguration]);
|
|
679
|
+
return {
|
|
680
|
+
configuration: configuration,
|
|
681
|
+
deferredConfiguration: deferredConfiguration,
|
|
682
|
+
loading: loading || isPending,
|
|
683
|
+
error: error
|
|
684
|
+
};
|
|
685
|
+
};
|
|
686
|
+
function getContentItem(_x, _x2, _x3, _x4) {
|
|
687
|
+
return _getContentItem.apply(this, arguments);
|
|
688
|
+
}
|
|
689
|
+
function _getContentItem() {
|
|
690
|
+
_getContentItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(catalogService, jwt, idOrCodex, lang) {
|
|
691
|
+
var fullUrl, res, resData, _e$response;
|
|
692
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
693
|
+
while (1) switch (_context.prev = _context.next) {
|
|
694
|
+
case 0:
|
|
695
|
+
fullUrl = catalogService + '/contentItems/' + idOrCodex + '?language=' + lang;
|
|
696
|
+
_context.prev = 1;
|
|
697
|
+
_context.next = 4;
|
|
698
|
+
return axios.get(fullUrl, {
|
|
699
|
+
headers: {
|
|
700
|
+
Authorization: 'Bearer ' + jwt
|
|
701
|
+
}
|
|
702
|
+
});
|
|
703
|
+
case 4:
|
|
704
|
+
res = _context.sent;
|
|
705
|
+
resData = res.data;
|
|
706
|
+
if (!(res.status !== 200)) {
|
|
707
|
+
_context.next = 8;
|
|
708
|
+
break;
|
|
709
|
+
}
|
|
710
|
+
throw new DivaError(resData.error || 'Failed to get content item');
|
|
711
|
+
case 8:
|
|
712
|
+
return _context.abrupt("return", resData);
|
|
713
|
+
case 11:
|
|
714
|
+
_context.prev = 11;
|
|
715
|
+
_context.t0 = _context["catch"](1);
|
|
716
|
+
if (!axios.isAxiosError(_context.t0)) {
|
|
717
|
+
_context.next = 15;
|
|
718
|
+
break;
|
|
719
|
+
}
|
|
720
|
+
throw new DivaError(((_e$response = _context.t0.response) === null || _e$response === void 0 || (_e$response = _e$response.data) === null || _e$response === void 0 ? void 0 : _e$response.error) || 'Could not get content item', {
|
|
721
|
+
cause: _context.t0
|
|
722
|
+
});
|
|
723
|
+
case 15:
|
|
724
|
+
throw new DivaError('Could not get content item', {
|
|
725
|
+
cause: _context.t0
|
|
726
|
+
});
|
|
727
|
+
case 16:
|
|
728
|
+
case "end":
|
|
729
|
+
return _context.stop();
|
|
730
|
+
}
|
|
731
|
+
}, _callee, null, [[1, 11]]);
|
|
732
|
+
}));
|
|
733
|
+
return _getContentItem.apply(this, arguments);
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
var errorBox = "error-box-coPDD";
|
|
737
|
+
var css_248z$2 = ".error-box-coPDD {\n color: red;\n text-align: center;\n padding: 20px;\n border: 1px solid red;\n background-color: #ffeeee;\n border-radius: 4px;\n}\n";
|
|
738
|
+
styleInject(css_248z$2);
|
|
739
|
+
|
|
740
|
+
function ErrorBox(_ref) {
|
|
741
|
+
var error = _ref.error;
|
|
742
|
+
return /*#__PURE__*/jsxs("div", {
|
|
743
|
+
className: errorBox,
|
|
744
|
+
id: "diva-content-item-error-box",
|
|
745
|
+
children: ["Error: ", error.message || 'An error occurred']
|
|
746
|
+
});
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
var loader = "loader-BiprF";
|
|
750
|
+
var css_248z$1 = ".loader-BiprF {\n width: 100%;\n height: 4px;\n background-color: #f3f3f3;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 1;\n}\n\n.loader-BiprF div {\n position: absolute;\n width: 50%;\n height: 100%;\n background-color: #3498db;\n animation: loading-zVyub 1s infinite ease-in-out;\n}\n\n@keyframes loading-zVyub {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(200%);\n }\n}\n";
|
|
751
|
+
styleInject(css_248z$1);
|
|
752
|
+
|
|
753
|
+
function Loader() {
|
|
754
|
+
return /*#__PURE__*/jsx("div", {
|
|
755
|
+
className: loader,
|
|
756
|
+
id: "diva-content-item-loader",
|
|
757
|
+
children: /*#__PURE__*/jsx("div", {})
|
|
758
|
+
});
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
var rootWrapper = "root-wrapper-WNprt";
|
|
762
|
+
var contentWrapper = "content-wrapper-K5XIs";
|
|
763
|
+
var loading = "loading-089Ib";
|
|
764
|
+
var css_248z = ".root-wrapper-WNprt {\n min-height: 60px;\n position: relative;\n width: 100%;\n padding-left: 40px;\n}\n\n.content-wrapper-K5XIs {\n transition: opacity 0.2s ease-in-out;\n}\n.content-wrapper-K5XIs.loading-089Ib {\n opacity: 0.5;\n}\n";
|
|
765
|
+
styleInject(css_248z);
|
|
766
|
+
|
|
767
|
+
var ContentItems = function ContentItems(props) {
|
|
768
|
+
var _deferredConfiguratio;
|
|
769
|
+
var _useContentItem = useContentItem(props),
|
|
770
|
+
deferredConfiguration = _useContentItem.deferredConfiguration,
|
|
771
|
+
loading$1 = _useContentItem.loading,
|
|
772
|
+
error = _useContentItem.error;
|
|
773
|
+
return /*#__PURE__*/jsxs("div", {
|
|
774
|
+
className: rootWrapper,
|
|
775
|
+
id: 'diva-content-item',
|
|
776
|
+
children: [loading$1 && /*#__PURE__*/jsx(Loader, {}), /*#__PURE__*/jsxs("div", {
|
|
777
|
+
className: classnames(contentWrapper, _defineProperty({}, loading, loading$1)),
|
|
778
|
+
children: [error && /*#__PURE__*/jsx(ErrorBox, {
|
|
779
|
+
error: error
|
|
780
|
+
}), (_deferredConfiguratio = deferredConfiguration.content) === null || _deferredConfiguratio === void 0 ? void 0 : _deferredConfiguratio.map(function (item, i) {
|
|
392
781
|
return /*#__PURE__*/jsx(ContentItem, {
|
|
393
782
|
item: item
|
|
394
783
|
}, i);
|
|
395
|
-
})
|
|
396
|
-
})
|
|
784
|
+
})]
|
|
785
|
+
})]
|
|
397
786
|
});
|
|
398
787
|
};
|
|
399
788
|
|
|
400
|
-
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; }
|
|
401
|
-
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; }
|
|
402
|
-
var Main = function Main(_ref) {
|
|
403
|
-
var settings = _ref.settings;
|
|
404
|
-
_ref.parameters;
|
|
405
|
-
_ref.internal;
|
|
406
|
-
return /*#__PURE__*/jsx(ContentItems, _objectSpread({}, settings));
|
|
407
|
-
};
|
|
408
789
|
var ContentItemComponent = function ContentItemComponent(props) {
|
|
409
|
-
return /*#__PURE__*/jsx(
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
790
|
+
return /*#__PURE__*/jsx(ContentItemNavigator, {
|
|
791
|
+
initialItemId: props.contentItemId,
|
|
792
|
+
initialItemCodex: props.contentItemCodex,
|
|
793
|
+
initialItemConfiguration: props.configuration,
|
|
794
|
+
children: /*#__PURE__*/jsx(ContentItems, {
|
|
795
|
+
onContentItemLoaded: props.onContentItemLoaded,
|
|
796
|
+
wrapperStyle: props.wrapperStyle
|
|
797
|
+
})
|
|
798
|
+
});
|
|
414
799
|
};
|
|
415
800
|
|
|
416
|
-
export { ContentItemComponent,
|
|
801
|
+
export { ContentItemComponent, processContentItemLinks };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { Configuration, ContentItemNavigationContextType } from '../../types';
|
|
3
|
+
export interface ContentItemNavigatorProps {
|
|
4
|
+
initialItemId?: string;
|
|
5
|
+
initialItemCodex?: string;
|
|
6
|
+
initialItemConfiguration?: Configuration;
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare function useContentItemNavigation(): ContentItemNavigationContextType;
|
|
10
|
+
export declare function ContentItemNavigator({ initialItemId, initialItemCodex, initialItemConfiguration, children }: ContentItemNavigatorProps): React.JSX.Element;
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemNavigator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,gCAAgC,EAAE,MAAM,aAAa,CAAC;AAI9E,MAAM,WAAW,yBAAyB;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB,CAAC,EAAE,aAAa,CAAC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAID,wBAAgB,wBAAwB,qCAMvC;AAED,wBAAgB,oBAAoB,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,QAAQ,EAAE,EAAE,yBAAyB,qBAWtI"}
|
package/build/types/content-item/src/Components/ContentItemNavigator/useContentItemNavigator.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ContentItemNavigationContextType } from '../../types';
|
|
2
|
+
import { ContentItemNavigatorProps } from './index';
|
|
3
|
+
export declare const useContentItemNavigator: ({ initialItemId, initialItemCodex, initialItemConfiguration }: ContentItemNavigatorProps) => {
|
|
4
|
+
contextValue: ContentItemNavigationContextType;
|
|
5
|
+
navigateBack: () => void;
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=useContentItemNavigator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useContentItemNavigator.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemNavigator/useContentItemNavigator.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gCAAgC,EAAoB,MAAM,aAAa,CAAC;AACjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,uBAAuB,kEAAmE,yBAAyB;;;CA+D/H,CAAC"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
contentItems: ContentItemType[];
|
|
2
|
+
import { UseContentItemProps } from './useContentItem';
|
|
3
|
+
interface ContentItemsProps extends UseContentItemProps {
|
|
5
4
|
wrapperStyle?: React.CSSProperties;
|
|
6
|
-
}
|
|
7
|
-
declare const ContentItems: (
|
|
5
|
+
}
|
|
6
|
+
declare const ContentItems: (props: ContentItemsProps) => React.JSX.Element;
|
|
8
7
|
export default ContentItems;
|
|
9
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvE,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED,QAAA,MAAM,YAAY,UAAW,iBAAiB,sBAY7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Configuration } from '../../types';
|
|
2
|
+
export interface UseContentItemProps {
|
|
3
|
+
onContentItemLoaded?: (title: string) => void;
|
|
4
|
+
}
|
|
5
|
+
export declare const useContentItem: ({ onContentItemLoaded, }: UseContentItemProps) => {
|
|
6
|
+
configuration: Configuration;
|
|
7
|
+
deferredConfiguration: Configuration;
|
|
8
|
+
loading: boolean;
|
|
9
|
+
error: Error | null;
|
|
10
|
+
};
|
|
11
|
+
export default useContentItem;
|
|
12
|
+
//# sourceMappingURL=useContentItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useContentItem.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/useContentItem.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAK5C,MAAM,WAAW,mBAAmB;IAClC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,cAAc,6BAExB,mBAAmB,KAAG;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,qBAAqB,EAAE,aAAa,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CAyDrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ErrorBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,qBAM3D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Loader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,OAAO,UAAU,MAAM,sBAM7B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/RichText/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/RichText/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,CAAC;AAEpC,QAAA,MAAM,QAAQ,8BAA+B,KAAK,sBA+BjD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKxC,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEjC,QAAA,MAAM,KAAK,8BAA+B,KAAK,sBAU9C,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEjC,QAAA,MAAM,KAAK,+BAAgC,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEjC,QAAA,MAAM,KAAK,+BAAgC,KAAK,sBA4B/C,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
3
|
export * from './types';
|
|
4
|
+
export * from './utils';
|
|
4
5
|
import React from 'react';
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
interface Configuration {
|
|
11
|
-
contentItems: ContentItemType[];
|
|
6
|
+
import { Configuration } from './types';
|
|
7
|
+
export interface ContentItemProps {
|
|
8
|
+
configuration?: Configuration;
|
|
9
|
+
contentItemId?: string;
|
|
10
|
+
contentItemCodex?: string;
|
|
12
11
|
wrapperStyle?: React.CSSProperties;
|
|
12
|
+
onContentItemLoaded?: (title: string) => void;
|
|
13
13
|
}
|
|
14
|
-
export declare const ContentItemComponent: React.FC<
|
|
15
|
-
declare const ContentBox: ComponentDefinition<Configuration>;
|
|
16
|
-
export default ContentBox;
|
|
14
|
+
export declare const ContentItemComponent: React.FC<ContentItemProps>;
|
|
17
15
|
//# sourceMappingURL=index.d.ts.map
|
|
18
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAgB;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAU3D,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ContentItemComponent } from '../index';
|
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
-
declare const meta: Meta<typeof
|
|
3
|
+
declare const meta: Meta<typeof ContentItemComponent>;
|
|
4
4
|
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof
|
|
5
|
+
type Story = StoryObj<typeof ContentItemComponent>;
|
|
6
6
|
export declare const PriPlannermary: Story;
|
|
7
7
|
//# sourceMappingURL=basicItem.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"basicItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/basicItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"basicItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/basicItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAW3C,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAEnD,eAAO,MAAM,cAAc,EAAE,KAgC5B,CAAC"}
|
|
@@ -1,4 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
export interface ContentItemState {
|
|
3
|
+
id?: string;
|
|
4
|
+
codex?: string;
|
|
5
|
+
configuration?: Configuration;
|
|
6
|
+
title?: string;
|
|
7
|
+
}
|
|
8
|
+
export interface ContentItemNavigationContextType {
|
|
9
|
+
navigateTo: (props: ContentItemState) => void;
|
|
10
|
+
onContentItemLoaded: (title: string) => void;
|
|
11
|
+
canGoBack: boolean;
|
|
12
|
+
currentContentItem: ContentItemState;
|
|
13
|
+
}
|
|
14
|
+
export interface Configuration {
|
|
15
|
+
content: ContentItemType[];
|
|
16
|
+
}
|
|
2
17
|
export type ContentItemType = TitleType | RichTextType | ImageType | GalleryType | VideoType | URLType | WrapperType;
|
|
3
18
|
export interface TitleType {
|
|
4
19
|
type: 'Title';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;AAErH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AACD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gCAAgC;IAC/C,UAAU,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,gBAAgB,CAAC;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;AAErH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AACD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ContentItemState } from '../types';
|
|
3
|
+
export interface ContentItemLink {
|
|
4
|
+
identifier: string;
|
|
5
|
+
identifierType: 'id' | 'codex';
|
|
6
|
+
displayText: string;
|
|
7
|
+
}
|
|
8
|
+
export interface ProcessedContent {
|
|
9
|
+
type: 'html' | 'react';
|
|
10
|
+
content: string | React.ReactNode[];
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Processes text content to handle content item links.
|
|
14
|
+
* For plain text, converts @[type:identifier](text) pattern to React elements.
|
|
15
|
+
* For HTML content, ensures proper attributes and structure for content item links.
|
|
16
|
+
*
|
|
17
|
+
* Examples:
|
|
18
|
+
* - @[id:123](Click here)
|
|
19
|
+
* - @[codex:ABC]
|
|
20
|
+
* - @[id:456](Custom text)
|
|
21
|
+
*/
|
|
22
|
+
export declare function processContentItemLinks(content: string, onContentItemClick: (state: ContentItemState) => void): ProcessedContent;
|
|
23
|
+
//# sourceMappingURL=contentItemLinkProcessor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"contentItemLinkProcessor.d.ts","sourceRoot":"","sources":["../../../../../src/utils/contentItemLinkProcessor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,IAAI,GAAG,OAAO,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;CACrC;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,GAAG,gBAAgB,CAchI"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crystaldesign/content-item",
|
|
3
|
-
"version": "25.7.0-beta.
|
|
3
|
+
"version": "25.7.0-beta.20",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"storybook": "storybook dev -p 6006",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
},
|
|
35
35
|
"module": "build/esm/index.js",
|
|
36
36
|
"types": "./build/types/content-item/src/index.d.ts",
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "840fed496a02c2cdde726fa0c87f52b7875e98ee"
|
|
38
38
|
}
|