pds-dev-kit-web-test 0.2.20 → 0.2.21
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/sections/CustomSection/CustomSection.js +1 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js +3 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Divider/Divider.js +3 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +3 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.js +3 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js +3 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter.js +3 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js +3 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.d.ts +5 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.js +16 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_Box.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_BoxWithShadow.js +14 -7
- package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js +1 -1
- package/package.json +1 -1
|
@@ -181,8 +181,7 @@ function CustomSection(props) {
|
|
|
181
181
|
minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX
|
|
182
182
|
}, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: (componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
|
183
183
|
width: '100%',
|
|
184
|
-
height: '100%'
|
|
185
|
-
overflow: 'hidden'
|
|
184
|
+
height: '100%'
|
|
186
185
|
}, onClick: function (e) {
|
|
187
186
|
e.stopPropagation();
|
|
188
187
|
onClickCB(each.id);
|
|
@@ -22,6 +22,7 @@ var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
|
|
|
22
22
|
var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
|
|
23
23
|
var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
|
|
24
24
|
var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
|
|
25
|
+
var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
|
|
25
26
|
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
26
27
|
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
27
28
|
var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
|
|
@@ -41,10 +42,10 @@ function Button(props) {
|
|
|
41
42
|
propsStyle.visibility = 'visible';
|
|
42
43
|
}
|
|
43
44
|
var cbRef = (0, react_1.useRef)(null);
|
|
44
|
-
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold:
|
|
45
|
+
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
45
46
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
46
47
|
var effectCssProperties = isVisible ? effect : {};
|
|
47
|
-
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_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK
|
|
48
|
+
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: cbRef, isVisible: isVisible }, { 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));
|
|
48
49
|
}
|
|
49
50
|
function getBTNStyles(props, device) {
|
|
50
51
|
var availableSpecCodes = [
|
|
@@ -40,6 +40,7 @@ var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
|
|
|
40
40
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
41
41
|
var hooks_1 = require("../../../../hooks");
|
|
42
42
|
var util_1 = require("../../../../util");
|
|
43
|
+
var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
|
|
43
44
|
var S_CB_Box_1 = require("../components/S_CB_Box");
|
|
44
45
|
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
45
46
|
function Divider(props) {
|
|
@@ -50,10 +51,10 @@ function Divider(props) {
|
|
|
50
51
|
propsStyle.visibility = 'visible';
|
|
51
52
|
}
|
|
52
53
|
var cbRef = (0, react_1.useRef)(null);
|
|
53
|
-
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold:
|
|
54
|
+
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
54
55
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
55
56
|
var effectCssProperties = isVisible ? effect : {};
|
|
56
|
-
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_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: layoutStyle, hoverStyle: {}
|
|
57
|
+
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: cbRef, isVisible: isVisible }, { 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));
|
|
57
58
|
}
|
|
58
59
|
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) {
|
|
59
60
|
var normalStyle = _a.normalStyle;
|
|
@@ -43,6 +43,7 @@ var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
|
|
|
43
43
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
44
44
|
var hooks_1 = require("../../../../hooks");
|
|
45
45
|
var util_1 = require("../../../../util");
|
|
46
|
+
var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
|
|
46
47
|
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
47
48
|
var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
|
|
48
49
|
function Image(props) {
|
|
@@ -55,10 +56,10 @@ function Image(props) {
|
|
|
55
56
|
}), onClickCLINK = _b.onClickCLINK, CLINKCursor = _b.CLINKCursor;
|
|
56
57
|
var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
|
|
57
58
|
var cbRef = (0, react_1.useRef)(null);
|
|
58
|
-
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold:
|
|
59
|
+
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
59
60
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
60
61
|
var effectCssProperties = isVisible ? effect : {};
|
|
61
|
-
return ((0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign({}, layout), effectCssProperties), { cursor: CLINKCursor }), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device,
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: cbRef, isVisible: isVisible }, { 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, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: style, hoverStyle: hoverStyle }, { 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));
|
|
62
63
|
}
|
|
63
64
|
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) {
|
|
64
65
|
var src = _a.src;
|
|
@@ -27,6 +27,7 @@ var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
|
|
|
27
27
|
var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
|
|
28
28
|
var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
|
|
29
29
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
30
|
+
var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
|
|
30
31
|
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
31
32
|
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
32
33
|
function RichText(props) {
|
|
@@ -39,10 +40,10 @@ function RichText(props) {
|
|
|
39
40
|
propsStyle.visibility = 'visible';
|
|
40
41
|
}
|
|
41
42
|
var cbRef = (0, react_1.useRef)(null);
|
|
42
|
-
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold:
|
|
43
|
+
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
43
44
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
44
45
|
var effectCssProperties = isVisible ? effect : {};
|
|
45
|
-
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_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
|
|
46
|
+
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: cbRef, isVisible: isVisible }, { 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));
|
|
46
47
|
}
|
|
47
48
|
function getBGColorStyles(props, device) {
|
|
48
49
|
var availableSpecCodes = [
|
|
@@ -21,6 +21,7 @@ var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
|
|
|
21
21
|
var hooks_1 = require("../../../../hooks");
|
|
22
22
|
var textUtil_1 = require("../../../../newUtils/textUtil");
|
|
23
23
|
var util_1 = require("../../../../util");
|
|
24
|
+
var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
|
|
24
25
|
var S_CB_Box_1 = require("../components/S_CB_Box");
|
|
25
26
|
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
26
27
|
var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
|
|
@@ -39,10 +40,10 @@ function Text(props) {
|
|
|
39
40
|
propsStyle.visibility = 'visible';
|
|
40
41
|
}
|
|
41
42
|
var cbRef = (0, react_1.useRef)(null);
|
|
42
|
-
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold:
|
|
43
|
+
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
43
44
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
44
45
|
var effectCssProperties = isVisible ? effect : {};
|
|
45
|
-
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_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre', wordBreak: '
|
|
46
|
+
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: cbRef, isVisible: isVisible }, { 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));
|
|
46
47
|
}
|
|
47
48
|
function getTextStyles(props, device) {
|
|
48
49
|
var availableSpecCodes = [
|
|
@@ -17,6 +17,7 @@ var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
|
|
|
17
17
|
var ComponentBlocks_1 = require("../../../../../../../DynamicLayout/components/ComponentBlocks");
|
|
18
18
|
var hooks_1 = require("../../../../hooks");
|
|
19
19
|
var util_1 = require("../../../../util");
|
|
20
|
+
var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
|
|
20
21
|
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
21
22
|
function Twitter(props) {
|
|
22
23
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -35,10 +36,10 @@ function Twitter(props) {
|
|
|
35
36
|
delete layout.justifyContent;
|
|
36
37
|
}
|
|
37
38
|
var cbRef = (0, react_1.useRef)(null);
|
|
38
|
-
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold:
|
|
39
|
+
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
|
|
39
40
|
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
40
41
|
var effectCssProperties = isVisible ? effect : {};
|
|
41
42
|
var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
|
|
42
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: cbRef, isVisible: isVisible }, { 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 }, void 0) }), void 0) }), void 0));
|
|
43
44
|
}
|
|
44
45
|
exports.default = Twitter;
|
|
@@ -25,6 +25,7 @@ var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
|
|
|
25
25
|
var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
|
|
26
26
|
var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
|
|
27
27
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
28
|
+
var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
|
|
28
29
|
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
29
30
|
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
30
31
|
var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
|
|
@@ -40,10 +41,10 @@ function Youtube(props) {
|
|
|
40
41
|
propsStyle.visibility = 'visible';
|
|
41
42
|
}
|
|
42
43
|
var cbRef = (0, react_1.useRef)(null);
|
|
43
|
-
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold:
|
|
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
|
-
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_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
|
|
47
|
+
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: cbRef, isVisible: isVisible }, { 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));
|
|
47
48
|
}
|
|
48
49
|
function getBGColorStyles(props, device) {
|
|
49
50
|
var availableSpecCodes = [
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.S_CB_AnimationObserverBox = void 0;
|
|
11
|
+
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 opacity: ", ";\n width: 100%;\n"], ["\n height: 100%;\n opacity: ", ";\n width: 100%;\n"])), function (_a) {
|
|
13
|
+
var isVisible = _a.isVisible;
|
|
14
|
+
return (isVisible ? 1 : 0);
|
|
15
|
+
});
|
|
16
|
+
var templateObject_1;
|
|
@@ -36,7 +36,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
exports.S_CB_Box = void 0;
|
|
38
38
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
39
|
-
exports.S_CB_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /*\n Introduced in IE 10.\n See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n */\n\n height: 100%;\n
|
|
39
|
+
exports.S_CB_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /*\n Introduced in IE 10.\n See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n */\n\n height: 100%;\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n"], ["\n /*\n Introduced in IE 10.\n See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n */\n\n height: 100%;\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n"])), function (_a) {
|
|
40
40
|
var normalStyle = _a.normalStyle;
|
|
41
41
|
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { boxShadow: '' }));
|
|
42
42
|
}, function (_a) {
|
|
@@ -33,10 +33,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
33
33
|
__setModuleDefault(result, mod);
|
|
34
34
|
return result;
|
|
35
35
|
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
36
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
40
|
exports.S_CB_BoxWithShadow = void 0;
|
|
41
|
+
var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
|
|
38
42
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
39
|
-
exports.S_CB_BoxWithShadow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /*\n Introduced in IE 10.\n See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n */\n\n height: 100%;\n
|
|
43
|
+
exports.S_CB_BoxWithShadow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /*\n Introduced in IE 10.\n See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n */\n\n height: 100%;\n width: 100%;\n\n ", ";\n\n &:before {\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n border-top-left-radius: ", "px;\n border-top-right-radius: ", "px;\n box-shadow: ", ";\n content: '';\n height: 100%;\n left: 0;\n opacity: ", ";\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n &:hover {\n ", ";\n\n &:before {\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n border-top-left-radius: ", "px;\n border-top-right-radius: ", "px;\n box-shadow: ", ";\n content: '';\n height: 100%;\n left: 0;\n opacity: ", ";\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\n }\n }\n"], ["\n /*\n Introduced in IE 10.\n See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n */\n\n height: 100%;\n width: 100%;\n\n ", ";\n\n &:before {\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n border-top-left-radius: ", "px;\n border-top-right-radius: ", "px;\n box-shadow: ", ";\n content: '';\n height: 100%;\n left: 0;\n opacity: ", ";\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n &:hover {\n ", ";\n\n &:before {\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n border-top-left-radius: ", "px;\n border-top-right-radius: ", "px;\n box-shadow: ", ";\n content: '';\n height: 100%;\n left: 0;\n opacity: ", ";\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\n }\n }\n"])), function (_a) {
|
|
40
44
|
var normalStyle = _a.normalStyle;
|
|
41
45
|
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { boxShadow: '' }));
|
|
42
46
|
}, function (_a) {
|
|
@@ -60,7 +64,9 @@ exports.S_CB_BoxWithShadow = styled_components_1.default.div(templateObject_3 ||
|
|
|
60
64
|
case 'DESKTOP':
|
|
61
65
|
return Number(cbStylePropsShadowSpecs.CB_STYLE_PROP_SHADOW_SPEC_OPACITY) / 100;
|
|
62
66
|
case 'MOBILE':
|
|
63
|
-
return
|
|
67
|
+
return (0, isNullOrUndefined_1.default)(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE'])
|
|
68
|
+
? Number(cbStylePropsShadowSpecs.CB_STYLE_PROP_SHADOW_SPEC_OPACITY) / 100
|
|
69
|
+
: Number(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE']) / 100;
|
|
64
70
|
}
|
|
65
71
|
}, function (_a) {
|
|
66
72
|
var hoverStyle = _a.hoverStyle;
|
|
@@ -84,12 +90,13 @@ exports.S_CB_BoxWithShadow = styled_components_1.default.div(templateObject_3 ||
|
|
|
84
90
|
var cbStylePropsShadowSpecs = _a.cbStylePropsShadowSpecs, device = _a.device;
|
|
85
91
|
switch (device) {
|
|
86
92
|
case 'DESKTOP':
|
|
87
|
-
return cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER']
|
|
88
|
-
? cbStylePropsShadowSpecs
|
|
89
|
-
: cbStylePropsShadowSpecs
|
|
93
|
+
return (0, isNullOrUndefined_1.default)(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER'])
|
|
94
|
+
? Number(cbStylePropsShadowSpecs.CB_STYLE_PROP_SHADOW_SPEC_OPACITY) / 100
|
|
95
|
+
: Number(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER']) / 100;
|
|
90
96
|
case 'MOBILE':
|
|
91
|
-
return (
|
|
92
|
-
100
|
|
97
|
+
return (0, isNullOrUndefined_1.default)(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE'])
|
|
98
|
+
? Number(cbStylePropsShadowSpecs.CB_STYLE_PROP_SHADOW_SPEC_OPACITY) / 100
|
|
99
|
+
: Number(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE']) / 100;
|
|
93
100
|
}
|
|
94
101
|
});
|
|
95
102
|
var templateObject_1, templateObject_2, templateObject_3;
|