pds-dev-kit-web 2.1.17 → 2.1.19
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/YouTubeIframe/YouTubeIframe.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +22 -19
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay.js +1 -1
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -215,7 +215,7 @@ function YouTubeIframe(_a) {
|
|
|
215
215
|
youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
|
|
216
216
|
};
|
|
217
217
|
}, []);
|
|
218
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isYoutubeLoading && (0, jsx_runtime_1.jsx)(BlackScreen, {}, void 0), (0, jsx_runtime_1.jsx)(S_IframeWrapper, { children: (0, jsx_runtime_1.jsx)("div", { id: PLAYER_ID },
|
|
218
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isYoutubeLoading && (0, jsx_runtime_1.jsx)(BlackScreen, {}, void 0), (0, jsx_runtime_1.jsx)(S_IframeWrapper, { children: (0, jsx_runtime_1.jsx)("div", { id: PLAYER_ID }, void 0) }, void 0)] }, void 0));
|
|
219
219
|
}
|
|
220
220
|
var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n background-color: ", ";\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n"])), function (_a) {
|
|
221
221
|
var theme = _a.theme;
|
|
@@ -45,18 +45,20 @@ var hooks_1 = require("../../../../hooks");
|
|
|
45
45
|
var util_1 = require("../../../../util");
|
|
46
46
|
var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
|
|
47
47
|
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
48
|
+
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
48
49
|
var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
|
|
49
50
|
function Image(props) {
|
|
50
|
-
var
|
|
51
|
-
var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE,
|
|
52
|
-
var
|
|
51
|
+
var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
|
52
|
+
var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _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, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
|
|
53
|
+
var _c = (0, useCLINK_1.default)({
|
|
53
54
|
src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
|
|
54
55
|
type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
|
|
55
56
|
openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
|
|
56
57
|
internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
|
|
57
|
-
}), onClickCLINK =
|
|
58
|
-
var
|
|
59
|
-
var
|
|
58
|
+
}), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
|
|
59
|
+
var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
|
|
60
|
+
var _e = parseImageCBStyle(style, hoverStyle, mode), boxStyle = _e.boxStyle, imgStyle = _e.imgStyle;
|
|
61
|
+
var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
|
|
60
62
|
var cbRef = (0, react_1.useRef)(null);
|
|
61
63
|
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
62
64
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
@@ -64,20 +66,20 @@ function Image(props) {
|
|
|
64
66
|
var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
|
|
65
67
|
CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
|
|
66
68
|
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
67
|
-
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),
|
|
69
|
+
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_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), 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: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }, { 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) }), void 0)] }, void 0));
|
|
68
70
|
}
|
|
69
|
-
function parseImageCBStyle(style, hoverStyle) {
|
|
71
|
+
function parseImageCBStyle(style, hoverStyle, mode) {
|
|
70
72
|
var boxStyle = {
|
|
71
73
|
normal: {
|
|
72
74
|
borderBottomRightRadius: style.borderBottomRightRadius,
|
|
73
|
-
borderBottomLeftRadius: style.
|
|
75
|
+
borderBottomLeftRadius: style.borderBottomLeftRadius,
|
|
74
76
|
borderTopLeftRadius: style.borderTopLeftRadius,
|
|
75
77
|
borderTopRightRadius: style.borderTopRightRadius,
|
|
76
78
|
borderColor: style.borderColor,
|
|
77
79
|
borderStyle: style.borderStyle,
|
|
78
80
|
borderWidth: style.borderWidth,
|
|
79
|
-
visibility: style.visibility,
|
|
80
|
-
opacity: style.
|
|
81
|
+
visibility: mode === 'EDIT' ? 'visible' : style.visibility,
|
|
82
|
+
opacity: style.opacity,
|
|
81
83
|
boxShadow: style.boxShadow
|
|
82
84
|
},
|
|
83
85
|
hover: {
|
|
@@ -88,8 +90,8 @@ function parseImageCBStyle(style, hoverStyle) {
|
|
|
88
90
|
borderColor: hoverStyle.borderColor,
|
|
89
91
|
borderStyle: hoverStyle.borderStyle,
|
|
90
92
|
borderWidth: hoverStyle.borderWidth,
|
|
91
|
-
visibility: hoverStyle.visibility,
|
|
92
|
-
opacity: hoverStyle.
|
|
93
|
+
visibility: mode === 'EDIT' ? 'visible' : hoverStyle.visibility,
|
|
94
|
+
opacity: hoverStyle.opacity,
|
|
93
95
|
boxShadow: hoverStyle.boxShadow
|
|
94
96
|
}
|
|
95
97
|
};
|
|
@@ -105,25 +107,26 @@ function parseImageCBStyle(style, hoverStyle) {
|
|
|
105
107
|
};
|
|
106
108
|
return { boxStyle: boxStyle, imgStyle: imgStyle };
|
|
107
109
|
}
|
|
108
|
-
var
|
|
110
|
+
var S_ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n"], ["\n height: 100%;\n width: 100%;\n"])));
|
|
111
|
+
var S_Image = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __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) {
|
|
109
112
|
var src = _a.src;
|
|
110
113
|
return "url(" + src + ")";
|
|
111
114
|
}, function (_a) {
|
|
112
115
|
var normalStyle = _a.normalStyle;
|
|
113
|
-
return (0, styled_components_1.css)(
|
|
116
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
|
|
114
117
|
}, function (_a) {
|
|
115
118
|
var hoverStyle = _a.hoverStyle;
|
|
116
|
-
return (0, styled_components_1.css)(
|
|
119
|
+
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
|
|
117
120
|
}, function (_a) {
|
|
118
121
|
var normalStyle = _a.normalStyle;
|
|
119
122
|
var isContain = normalStyle.backgroundSize === 'contain';
|
|
120
|
-
return (0, styled_components_1.css)(
|
|
123
|
+
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
|
|
121
124
|
}, function (_a) {
|
|
122
125
|
var hoverStyle = _a.hoverStyle, normalStyle = _a.normalStyle;
|
|
123
126
|
var isContain = hoverStyle.backgroundSize
|
|
124
127
|
? hoverStyle.backgroundSize === 'contain'
|
|
125
128
|
: normalStyle.backgroundSize === 'contain';
|
|
126
|
-
return (0, styled_components_1.css)(
|
|
129
|
+
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
|
|
127
130
|
});
|
|
128
131
|
exports.default = Image;
|
|
129
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
132
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -84,7 +84,7 @@ function valueGenerator(valueSet, device) {
|
|
|
84
84
|
return gradientType + "(" + gradientDegree + " " + gradientStartColor + " " + gradientStartPosition + "%, " + gradientEndColor + " " + gradientEndPosition + "%)";
|
|
85
85
|
}
|
|
86
86
|
case 'SOLID':
|
|
87
|
-
return "" + valueSet
|
|
87
|
+
return "" + valueSet['CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE'];
|
|
88
88
|
case 'NONE':
|
|
89
89
|
return 'transparent';
|
|
90
90
|
default:
|
package/package.json
CHANGED