pds-dev-kit-web-test 0.2.21 → 0.2.23
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/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js +1 -1
- package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.d.ts +3 -1
- package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js +35 -24
- package/dist/src/sub/DynamicLayout/mock_customSection.js +4 -1
- package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts +36 -1134
- package/dist/src/sub/DynamicLayout/pagesPreviewMock.js +53 -2907
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js +7 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Divider/Divider.js +5 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +28 -12
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.js +4 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js +7 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter.js +6 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js +6 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.d.ts +2 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.js +14 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/hooks/useCLINK.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/hooks/useCLINK.js +14 -4
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -28,11 +28,12 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
|
28
28
|
var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
|
|
29
29
|
function Button(props) {
|
|
30
30
|
var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
|
31
|
-
var CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
|
|
31
|
+
var CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
|
|
32
32
|
var _c = (0, useCLINK_1.default)({
|
|
33
33
|
src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
|
|
34
34
|
type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
|
|
35
|
-
openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
|
|
35
|
+
openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
|
|
36
|
+
internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
|
|
36
37
|
}), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
|
|
37
38
|
var _d = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
|
|
38
39
|
var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
|
|
@@ -45,7 +46,10 @@ function Button(props) {
|
|
|
45
46
|
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
46
47
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
47
48
|
var effectCssProperties = isVisible ? effect : {};
|
|
48
|
-
|
|
49
|
+
var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
|
|
50
|
+
props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
|
|
51
|
+
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0) }), void 0)] }, void 0));
|
|
49
53
|
}
|
|
50
54
|
function getBTNStyles(props, device) {
|
|
51
55
|
var availableSpecCodes = [
|
|
@@ -45,6 +45,7 @@ var S_CB_Box_1 = require("../components/S_CB_Box");
|
|
|
45
45
|
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
46
46
|
function Divider(props) {
|
|
47
47
|
var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
|
48
|
+
var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
|
|
48
49
|
var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect;
|
|
49
50
|
var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
|
|
50
51
|
if (mode === 'EDIT') {
|
|
@@ -54,7 +55,10 @@ function Divider(props) {
|
|
|
54
55
|
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
55
56
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
56
57
|
var effectCssProperties = isVisible ? effect : {};
|
|
57
|
-
|
|
58
|
+
var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
|
|
59
|
+
CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
|
|
60
|
+
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
61
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: layoutStyle, hoverStyle: {} }, { children: (0, jsx_runtime_1.jsx)(S_DIVIDER, { className: "cb-divider", normalStyle: __assign(__assign({}, propsStyle), effectCssProperties), hoverStyle: __assign({}, propsHoverStyle) }, void 0) }), void 0) }), void 0)] }, void 0));
|
|
58
62
|
}
|
|
59
63
|
var S_DIVIDER = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n"], ["\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n"])), function (_a) {
|
|
60
64
|
var normalStyle = _a.normalStyle;
|
|
@@ -48,34 +48,50 @@ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
|
48
48
|
var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
|
|
49
49
|
function Image(props) {
|
|
50
50
|
var device = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext).device;
|
|
51
|
-
var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _a = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _a.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _a.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _a.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
|
|
51
|
+
var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _a = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _a.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _a.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _a.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _a.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
|
|
52
52
|
var _b = (0, useCLINK_1.default)({
|
|
53
53
|
src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
|
|
54
54
|
type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
|
|
55
|
-
openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
|
|
55
|
+
openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
|
|
56
|
+
internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
|
|
56
57
|
}), onClickCLINK = _b.onClickCLINK, CLINKCursor = _b.CLINKCursor;
|
|
57
58
|
var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
|
|
58
59
|
var cbRef = (0, react_1.useRef)(null);
|
|
59
60
|
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
60
61
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
61
62
|
var effectCssProperties = isVisible ? effect : {};
|
|
62
|
-
|
|
63
|
+
var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
|
|
64
|
+
CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
|
|
65
|
+
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), effectCssProperties), style), { cursor: CLINKCursor }), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, ref: cbRef, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: {
|
|
67
|
+
borderBottomRightRadius: style.borderBottomRightRadius,
|
|
68
|
+
borderBottomLeftRadius: style.borderBottomRightRadius,
|
|
69
|
+
borderColor: style.borderColor,
|
|
70
|
+
borderStyle: style.borderStyle,
|
|
71
|
+
borderTopLeftRadius: style.borderTopLeftRadius,
|
|
72
|
+
borderTopRightRadius: style.borderTopRightRadius,
|
|
73
|
+
backgroundPosition: style.backgroundPosition,
|
|
74
|
+
backgroundSize: style.backgroundSize
|
|
75
|
+
}, hoverStyle: {
|
|
76
|
+
borderBottomRightRadius: hoverStyle.borderBottomRightRadius,
|
|
77
|
+
borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius,
|
|
78
|
+
borderColor: hoverStyle.borderColor,
|
|
79
|
+
borderStyle: hoverStyle.borderStyle,
|
|
80
|
+
borderTopLeftRadius: hoverStyle.borderTopLeftRadius,
|
|
81
|
+
borderTopRightRadius: hoverStyle.borderTopRightRadius,
|
|
82
|
+
backgroundPosition: hoverStyle.backgroundPosition,
|
|
83
|
+
backgroundSize: hoverStyle.backgroundSize
|
|
84
|
+
} }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0) }), void 0) }), void 0));
|
|
63
85
|
}
|
|
64
86
|
var S_Image = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-image: ", ";\n background-repeat: no-repeat;\n height: 100%;\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n\n & img {\n ", ";\n }\n\n &:hover img {\n ", ";\n }\n"], ["\n background-image: ", ";\n background-repeat: no-repeat;\n height: 100%;\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n\n & img {\n ", ";\n }\n\n &:hover img {\n ", ";\n }\n"])), function (_a) {
|
|
65
87
|
var src = _a.src;
|
|
66
88
|
return "url(" + src + ")";
|
|
67
89
|
}, function (_a) {
|
|
68
90
|
var normalStyle = _a.normalStyle;
|
|
69
|
-
|
|
70
|
-
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { backgroundPosition: isContain ? 'center' : normalStyle.backgroundPosition }));
|
|
91
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
|
|
71
92
|
}, function (_a) {
|
|
72
|
-
var hoverStyle = _a.hoverStyle
|
|
73
|
-
|
|
74
|
-
? hoverStyle.backgroundSize === 'contain'
|
|
75
|
-
: normalStyle.backgroundSize === 'contain';
|
|
76
|
-
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, hoverStyle), { backgroundPosition: isContain
|
|
77
|
-
? 'center'
|
|
78
|
-
: hoverStyle.backgroundPosition || normalStyle.backgroundPosition }));
|
|
93
|
+
var hoverStyle = _a.hoverStyle;
|
|
94
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
|
|
79
95
|
}, function (_a) {
|
|
80
96
|
var normalStyle = _a.normalStyle;
|
|
81
97
|
var isContain = normalStyle.backgroundSize === 'contain';
|
|
@@ -43,7 +43,10 @@ function RichText(props) {
|
|
|
43
43
|
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
44
44
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
45
45
|
var effectCssProperties = isVisible ? effect : {};
|
|
46
|
-
|
|
46
|
+
var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
|
|
47
|
+
props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
|
|
48
|
+
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
49
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(S_RichTextWrapper, { children: (0, jsx_runtime_1.jsx)(RichText_1.RichText, { text: props.CB_CONTENT_PROP_TEXTEDIT.CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR }, void 0) }, void 0) }), void 0) }), void 0)] }, void 0));
|
|
47
50
|
}
|
|
48
51
|
function getBGColorStyles(props, device) {
|
|
49
52
|
var availableSpecCodes = [
|
|
@@ -27,11 +27,12 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
|
27
27
|
var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
|
|
28
28
|
function Text(props) {
|
|
29
29
|
var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
|
30
|
-
var _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB;
|
|
30
|
+
var _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC;
|
|
31
31
|
var _c = (0, useCLINK_1.default)({
|
|
32
32
|
src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
|
|
33
33
|
type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
|
|
34
|
-
openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
|
|
34
|
+
openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
|
|
35
|
+
internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
|
|
35
36
|
}), CLINKCursor = _c.CLINKCursor, onClickCLINK = _c.onClickCLINK;
|
|
36
37
|
var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
|
|
37
38
|
var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
|
|
@@ -43,7 +44,10 @@ function Text(props) {
|
|
|
43
44
|
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
44
45
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
45
46
|
var effectCssProperties = isVisible ? effect : {};
|
|
46
|
-
|
|
47
|
+
var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
|
|
48
|
+
props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
|
|
49
|
+
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
50
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0) }), void 0)] }, void 0));
|
|
47
51
|
}
|
|
48
52
|
function getTextStyles(props, device) {
|
|
49
53
|
var availableSpecCodes = [
|
|
@@ -22,6 +22,7 @@ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
|
22
22
|
function Twitter(props) {
|
|
23
23
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
24
24
|
var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
|
25
|
+
var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
|
|
25
26
|
var CB_CONTENT_PROP_TWITTER_SPEC_SRC = props.CB_CONTENT_PROP_TWITTER.CB_CONTENT_PROP_TWITTER_SPEC_SRC, CB_STYLE_PROP_TWITTER_SPEC_THEME = props.CB_STYLE_PROP_TWITTER.CB_STYLE_PROP_TWITTER_SPEC_THEME, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
|
|
26
27
|
var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect;
|
|
27
28
|
var userId = CB_CONTENT_PROP_TWITTER_SPEC_SRC.replace('https://twitter.com/', '');
|
|
@@ -40,6 +41,10 @@ function Twitter(props) {
|
|
|
40
41
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
41
42
|
var effectCssProperties = isVisible ? effect : {};
|
|
42
43
|
var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
|
|
43
|
-
|
|
44
|
+
var twitterTimelineKey = userId + "-" + theme;
|
|
45
|
+
var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
|
|
46
|
+
CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
|
|
47
|
+
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
48
|
+
return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, twitterTimelineKey) }), void 0) }), void 0));
|
|
44
49
|
}
|
|
45
50
|
exports.default = Twitter;
|
|
@@ -31,7 +31,7 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
|
31
31
|
var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
|
|
32
32
|
function Youtube(props) {
|
|
33
33
|
var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
|
34
|
-
var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
|
|
34
|
+
var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
|
|
35
35
|
var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id;
|
|
36
36
|
var isEditMode = mode === 'EDIT';
|
|
37
37
|
var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
|
|
@@ -44,7 +44,10 @@ function Youtube(props) {
|
|
|
44
44
|
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
45
45
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
46
46
|
var effectCssProperties = isVisible ? effect : {};
|
|
47
|
-
|
|
47
|
+
var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
|
|
48
|
+
CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
|
|
49
|
+
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
50
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}, void 0), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" }, void 0)) }), void 0) }), void 0)] }, void 0));
|
|
48
51
|
}
|
|
49
52
|
function getBGColorStyles(props, device) {
|
|
50
53
|
var availableSpecCodes = [
|
|
@@ -59,7 +62,7 @@ function getBGColorStyles(props, device) {
|
|
|
59
62
|
];
|
|
60
63
|
return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BGCOLOR', device: device });
|
|
61
64
|
}
|
|
62
|
-
var S_ThumbnailBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n
|
|
65
|
+
var S_ThumbnailBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 100%;\n"])));
|
|
63
66
|
var S_Thumbnail = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n object-fit: cover;\n width: 100%;\n"], ["\n height: 100%;\n object-fit: cover;\n width: 100%;\n"])));
|
|
64
67
|
var S_Iframe = styled_components_1.default.iframe(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: none;\n height: 100%;\n width: 100%;\n"], ["\n border: none;\n height: 100%;\n width: 100%;\n"])));
|
|
65
68
|
var S_YoutubeButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 48px;\n margin: auto;\n position: absolute;\n width: 68px;\n"], ["\n height: 48px;\n margin: auto;\n position: absolute;\n width: 68px;\n"])));
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
declare type Props = {
|
|
2
|
-
|
|
3
|
+
effectVisibleStyle: React.CSSProperties;
|
|
3
4
|
};
|
|
4
5
|
export declare const S_CB_AnimationObserverBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Props, never>;
|
|
5
6
|
export {};
|
|
@@ -3,14 +3,25 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
6
17
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
18
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
19
|
};
|
|
9
20
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
21
|
exports.S_CB_AnimationObserverBox = void 0;
|
|
11
22
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.S_CB_AnimationObserverBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n
|
|
13
|
-
var
|
|
14
|
-
return
|
|
23
|
+
exports.S_CB_AnimationObserverBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n\n ", ";\n"], ["\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_a) {
|
|
24
|
+
var effectVisibleStyle = _a.effectVisibleStyle;
|
|
25
|
+
return effectVisibleStyle && __assign({}, effectVisibleStyle);
|
|
15
26
|
});
|
|
16
27
|
var templateObject_1;
|
|
@@ -4,17 +4,27 @@ var react_1 = require("react");
|
|
|
4
4
|
var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
|
|
5
5
|
// NOTE: link기능은 탄력적일 필요가 없음.
|
|
6
6
|
function useCLINK(props) {
|
|
7
|
-
var src = props.src, openNewTab = props.openNewTab, type = props.type;
|
|
7
|
+
var src = props.src, openNewTab = props.openNewTab, type = props.type, internalSrc = props.internalSrc;
|
|
8
8
|
var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), navigationHandler = _a.navigationHandler, mode = _a.mode;
|
|
9
9
|
var navType = type === 'INTERNAL' ? 'INTERNAL_LINK' : 'WEB_LINK';
|
|
10
10
|
var CLINKCursor = mode === 'EDIT' || type === 'DISABLED' ? 'auto' : 'pointer';
|
|
11
11
|
function onClickCLINK() {
|
|
12
|
-
if (
|
|
12
|
+
if (type === 'DISABLED' || mode === 'EDIT') {
|
|
13
13
|
return;
|
|
14
14
|
}
|
|
15
15
|
if (typeof navigationHandler === 'function') {
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
switch (type) {
|
|
17
|
+
case 'INTERNAL':
|
|
18
|
+
if (internalSrc) {
|
|
19
|
+
navigationHandler(navType, internalSrc, { openNewTab: openNewTab });
|
|
20
|
+
}
|
|
21
|
+
return;
|
|
22
|
+
case 'EXTERNAL':
|
|
23
|
+
if (src) {
|
|
24
|
+
navigationHandler(navType, src, { openNewTab: openNewTab });
|
|
25
|
+
}
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
18
28
|
}
|
|
19
29
|
}
|
|
20
30
|
return {
|
|
@@ -10,6 +10,7 @@ export declare type CB_CONTENT_PROP_TEXT = {
|
|
|
10
10
|
export declare type CB_CONTENT_PROP_CLINK = {
|
|
11
11
|
CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'INTERNAL' | 'EXTERNAL' | 'DISABLED';
|
|
12
12
|
CB_CONTENT_PROP_CLINK_SPEC_SRC: STRING_PLAIN;
|
|
13
|
+
CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: STRING_PLAIN;
|
|
13
14
|
CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: boolean;
|
|
14
15
|
};
|
|
15
16
|
export declare type CB_CONTENT_PROP_IMAGE = {
|