@threekit-tools/treble 0.0.24 → 0.0.25
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/components/Player/index.js +12 -32
- package/dist/components/Player/player.styles.js +10 -9
- package/dist/components/TrebleApp/index.d.ts +7 -0
- package/dist/components/{ProductLoader → TrebleApp}/index.js +4 -10
- package/dist/hooks/usePlayerPortal/index.d.ts +2 -0
- package/dist/hooks/usePlayerPortal/index.js +22 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +5 -3
- package/package.json +1 -1
- package/tailwind-presets.js +55 -0
- package/dist/components/ProductLoader/index.d.ts +0 -7
|
@@ -18,51 +18,31 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
18
18
|
__setModuleDefault(result, mod);
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
22
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
|
+
};
|
|
21
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
25
|
exports.PLAYER_DIV_ID = void 0;
|
|
23
26
|
var react_1 = __importStar(require("react"));
|
|
24
|
-
var react_redux_1 = require("react-redux");
|
|
25
27
|
var player_styles_1 = require("./player.styles");
|
|
26
|
-
var threekit_1 = require("../../store/threekit");
|
|
27
28
|
var constants_1 = require("../../constants");
|
|
29
|
+
var usePlayerPortal_1 = __importDefault(require("../../hooks/usePlayerPortal"));
|
|
28
30
|
exports.PLAYER_DIV_ID = 'tk-player-component';
|
|
29
31
|
var className = "".concat(constants_1.DEFAULT_CLASS_NAME, " ").concat(constants_1.CLASS_NAME_PREFIX, "-player");
|
|
30
32
|
var Player = function (props) {
|
|
31
33
|
var _a = Object.assign({
|
|
32
|
-
height: '
|
|
34
|
+
height: '100%',
|
|
33
35
|
minHeight: '600px',
|
|
34
36
|
width: '100%',
|
|
35
37
|
}, props), height = _a.height, width = _a.width, minHeight = _a.minHeight, children = _a.children;
|
|
36
|
-
var
|
|
38
|
+
var hasMoved = (0, react_1.useRef)(false);
|
|
39
|
+
var portalPlayerTo = (0, usePlayerPortal_1.default)();
|
|
37
40
|
(0, react_1.useEffect)(function () {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
var playerEl;
|
|
44
|
-
var playerWrapperEl;
|
|
45
|
-
if (playerElementId) {
|
|
46
|
-
playerEl = document.getElementById(playerElementId);
|
|
47
|
-
playerWrapperEl = document.getElementById(moveToElementId);
|
|
48
|
-
}
|
|
49
|
-
if (!playerEl || !playerWrapperEl) {
|
|
50
|
-
setTimeout(function () {
|
|
51
|
-
addPlayer(tryCount + 1);
|
|
52
|
-
}, 0.05 * 1000);
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
if (!playerEl)
|
|
56
|
-
throw new Error('Initial Player element not found');
|
|
57
|
-
if (!playerWrapperEl)
|
|
58
|
-
throw new Error('Move To element not found');
|
|
59
|
-
playerWrapperEl.appendChild(playerEl);
|
|
60
|
-
};
|
|
61
|
-
addPlayer();
|
|
62
|
-
};
|
|
63
|
-
attachPlayerToComponent(exports.PLAYER_DIV_ID);
|
|
64
|
-
return;
|
|
65
|
-
}, [playerElementId]);
|
|
41
|
+
if (portalPlayerTo && !hasMoved.current) {
|
|
42
|
+
portalPlayerTo(exports.PLAYER_DIV_ID);
|
|
43
|
+
hasMoved.current = true;
|
|
44
|
+
}
|
|
45
|
+
});
|
|
66
46
|
return (react_1.default.createElement(player_styles_1.Wrapper, { height: height, width: width, minHeight: minHeight, className: className },
|
|
67
47
|
react_1.default.createElement("div", { id: exports.PLAYER_DIV_ID }),
|
|
68
48
|
children));
|
|
@@ -10,12 +10,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BottomRightWidgetsWrapper = exports.BottomCenterWidgetsWrapper = exports.BottomLeftWidgetsWrapper = exports.MiddleRightWidgetsWrapper = exports.MiddleLeftWidgetsWrapper = exports.TopRightWidgetsWrapper = exports.TopCenterWidgetsWrapper = exports.TopLeftWidgetsWrapper = exports.Wrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n min-height: ", ";\n width: ", ";\n position: relative;\n\n user-select: none;\n\n & > div:nth-child(1) {\n height: ", ";\n min-height: ", ";\n width: ", ";\n position: absolute;\n top: 0;\n left: 0;\n }\n"], ["\n height: ", ";\n min-height: ", ";\n width: ", ";\n position: relative;\n\n user-select: none;\n\n & > div:nth-child(1) {\n height: ", ";\n min-height: ", ";\n width: ", ";\n position: absolute;\n top: 0;\n left: 0;\n }\n"])), function (props) { return props.height; }, function (props) { return props.minHeight; }, function (props) { return props.width; }, function (props) { return props.height; }, function (props) { return props.minHeight; }, function (props) { return props.width; });
|
|
13
|
-
|
|
14
|
-
exports.
|
|
15
|
-
exports.
|
|
16
|
-
exports.
|
|
17
|
-
exports.
|
|
18
|
-
exports.
|
|
19
|
-
exports.
|
|
20
|
-
exports.
|
|
21
|
-
|
|
13
|
+
var WidgetWrapperBase = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n position: absolute;\n\n & > div {\n margin-right: 8px;\n }\n\n & > div:last-child {\n margin-right: 0px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n position: absolute;\n\n & > div {\n margin-right: 8px;\n }\n\n & > div:last-child {\n margin-right: 0px;\n }\n"])));
|
|
14
|
+
exports.TopLeftWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n top: 20px;\n left: 20px;\n"], ["\n top: 20px;\n left: 20px;\n"])));
|
|
15
|
+
exports.TopCenterWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n"], ["\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n"])));
|
|
16
|
+
exports.TopRightWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n top: 20px;\n right: 20px;\n"], ["\n top: 20px;\n right: 20px;\n"])));
|
|
17
|
+
exports.MiddleLeftWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n top: 50%;\n left: 20px;\n transform: translateY(-50%);\n"], ["\n top: 50%;\n left: 20px;\n transform: translateY(-50%);\n"])));
|
|
18
|
+
exports.MiddleRightWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n top: 50%;\n right: 20px;\n transform: translateY(-50%);\n"], ["\n top: 50%;\n right: 20px;\n transform: translateY(-50%);\n"])));
|
|
19
|
+
exports.BottomLeftWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n bottom: 20px;\n left: 20px;\n"], ["\n bottom: 20px;\n left: 20px;\n"])));
|
|
20
|
+
exports.BottomCenterWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n"], ["\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n"])));
|
|
21
|
+
exports.BottomRightWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n bottom: 20px;\n right: 20px;\n"], ["\n bottom: 20px;\n right: 20px;\n"])));
|
|
22
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ThreekitProviderProps } from '../ThreekitProvider';
|
|
3
|
+
interface TrebleAppProps extends Omit<ThreekitProviderProps, 'children'> {
|
|
4
|
+
productId?: string;
|
|
5
|
+
}
|
|
6
|
+
export default function TrebleApp(props: TrebleAppProps): JSX.Element | null;
|
|
7
|
+
export {};
|
|
@@ -29,7 +29,7 @@ var constants_1 = require("../../constants");
|
|
|
29
29
|
var productsMap = {};
|
|
30
30
|
var productComponents = [];
|
|
31
31
|
var productToComponentMap = {};
|
|
32
|
-
function
|
|
32
|
+
function TrebleApp(props) {
|
|
33
33
|
var _a;
|
|
34
34
|
var project = props.project, productId = props.productId, playerConfig = props.playerConfig, threekitEnv = props.threekitEnv, locale = props.locale, theme = props.theme;
|
|
35
35
|
var config = (0, utils_1.loadTrebleConfig)();
|
|
@@ -64,23 +64,17 @@ function ProductLoader(props) {
|
|
|
64
64
|
if (!id && params[constants_1.TK_PRODUCT_ID_PARAM_KEY]) {
|
|
65
65
|
id = Object.keys(productToComponentMap).find(function (el) { return params[constants_1.TK_PRODUCT_ID_PARAM_KEY] === el; });
|
|
66
66
|
}
|
|
67
|
+
else
|
|
68
|
+
id = Object.keys(productToComponentMap)[0];
|
|
67
69
|
if (!id)
|
|
68
70
|
return null;
|
|
69
71
|
var Product = productComponents[productToComponentMap[id]];
|
|
70
72
|
if (!Product)
|
|
71
73
|
return null;
|
|
72
|
-
// const assetId =
|
|
73
|
-
// typeof productAssetId[id] === 'string'
|
|
74
|
-
// ? productAssetId[id]
|
|
75
|
-
// : productAssetId[env][id];
|
|
76
|
-
// const preppedCredentials = Object.assign({}, project?.credentials);
|
|
77
|
-
// preppedCredentials[env] = Object.assign(preppedCredentials[env], {
|
|
78
|
-
// assetId,
|
|
79
|
-
// });
|
|
80
74
|
var preppedProject = Object.assign({}, project, {
|
|
81
75
|
products: productsMap[id],
|
|
82
76
|
});
|
|
83
77
|
return (react_1.default.createElement(ThreekitProvider_1.default, { project: preppedProject, locale: locale, playerConfig: playerConfig, theme: theme, threekitEnv: threekitEnv },
|
|
84
78
|
react_1.default.createElement(Product, null)));
|
|
85
79
|
}
|
|
86
|
-
exports.default =
|
|
80
|
+
exports.default = TrebleApp;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var react_redux_1 = require("react-redux");
|
|
4
|
+
var threekit_1 = require("../../store/threekit");
|
|
5
|
+
var usePlayerPortal = function () {
|
|
6
|
+
var playerElementId = (0, react_redux_1.useSelector)(threekit_1.getPlayerElementId);
|
|
7
|
+
if (!playerElementId)
|
|
8
|
+
return undefined;
|
|
9
|
+
var portalPlayerTo = function (toEl) {
|
|
10
|
+
if (!toEl)
|
|
11
|
+
return;
|
|
12
|
+
var playerEl = document.getElementById(playerElementId);
|
|
13
|
+
var playerWrapperEl = document.getElementById(toEl);
|
|
14
|
+
if (!playerEl)
|
|
15
|
+
throw new Error('Move from element not found');
|
|
16
|
+
if (!playerWrapperEl)
|
|
17
|
+
throw new Error('Move To element not found');
|
|
18
|
+
playerWrapperEl.appendChild(playerEl);
|
|
19
|
+
};
|
|
20
|
+
return portalPlayerTo;
|
|
21
|
+
};
|
|
22
|
+
exports.default = usePlayerPortal;
|
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ import useZoom from './hooks/useZoom';
|
|
|
9
9
|
import useSnapshot from './hooks/useSnapshot';
|
|
10
10
|
import useWishlist from './hooks/useWishlist';
|
|
11
11
|
import useShare from './hooks/useShare';
|
|
12
|
+
import usePlayerPortal from './hooks/usePlayerPortal';
|
|
12
13
|
import ThreekitProvider from './components/ThreekitProvider';
|
|
13
14
|
import Player from './components/Player';
|
|
14
15
|
import Button from './components/Button';
|
|
@@ -37,6 +38,6 @@ import Wishlist from './components/Wishlist';
|
|
|
37
38
|
import Share from './components/Share';
|
|
38
39
|
import icons from './icons';
|
|
39
40
|
export * from './icons';
|
|
40
|
-
import
|
|
41
|
+
import TrebleApp from './components/TrebleApp';
|
|
41
42
|
import ProductLayout from './components/ProductLayout';
|
|
42
|
-
export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons,
|
|
43
|
+
export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };
|
package/dist/index.js
CHANGED
|
@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
13
13
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
14
14
|
};
|
|
15
15
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
16
|
-
exports.ProductLayout = exports.
|
|
16
|
+
exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
|
|
17
17
|
// Hooks
|
|
18
18
|
var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
|
|
19
19
|
exports.useAttribute = useAttribute_1.default;
|
|
@@ -37,6 +37,8 @@ var useWishlist_1 = __importDefault(require("./hooks/useWishlist"));
|
|
|
37
37
|
exports.useWishlist = useWishlist_1.default;
|
|
38
38
|
var useShare_1 = __importDefault(require("./hooks/useShare"));
|
|
39
39
|
exports.useShare = useShare_1.default;
|
|
40
|
+
var usePlayerPortal_1 = __importDefault(require("./hooks/usePlayerPortal"));
|
|
41
|
+
exports.usePlayerPortal = usePlayerPortal_1.default;
|
|
40
42
|
// Components
|
|
41
43
|
var ThreekitProvider_1 = __importDefault(require("./components/ThreekitProvider"));
|
|
42
44
|
exports.ThreekitProvider = ThreekitProvider_1.default;
|
|
@@ -102,7 +104,7 @@ var icons_1 = __importDefault(require("./icons"));
|
|
|
102
104
|
exports.icons = icons_1.default;
|
|
103
105
|
__exportStar(require("./icons"), exports);
|
|
104
106
|
// Products - Multi-configurtors
|
|
105
|
-
var
|
|
106
|
-
exports.
|
|
107
|
+
var TrebleApp_1 = __importDefault(require("./components/TrebleApp"));
|
|
108
|
+
exports.TrebleApp = TrebleApp_1.default;
|
|
107
109
|
var ProductLayout_1 = __importDefault(require("./components/ProductLayout"));
|
|
108
110
|
exports.ProductLayout = ProductLayout_1.default;
|
package/package.json
CHANGED
package/tailwind-presets.js
CHANGED
|
@@ -78,5 +78,60 @@ module.exports = {
|
|
|
78
78
|
|
|
79
79
|
addComponents(widgetBtn);
|
|
80
80
|
}),
|
|
81
|
+
plugin(function ({ addComponents }) {
|
|
82
|
+
const playerWidgets = {
|
|
83
|
+
'.player-wgts': {
|
|
84
|
+
position: 'absolute',
|
|
85
|
+
display: 'flex',
|
|
86
|
+
flexDirection: 'row',
|
|
87
|
+
},
|
|
88
|
+
|
|
89
|
+
'.wgt-top-left': {
|
|
90
|
+
top: '20px',
|
|
91
|
+
left: '20px',
|
|
92
|
+
},
|
|
93
|
+
|
|
94
|
+
'.wgt-top-center': {
|
|
95
|
+
top: '20px',
|
|
96
|
+
left: '50%',
|
|
97
|
+
transform: 'translateX(-50%)',
|
|
98
|
+
},
|
|
99
|
+
|
|
100
|
+
'.wgt-top-right': {
|
|
101
|
+
top: '20px',
|
|
102
|
+
right: '20px',
|
|
103
|
+
},
|
|
104
|
+
|
|
105
|
+
'.wgt-middle-left': {
|
|
106
|
+
top: '50%',
|
|
107
|
+
left: '20px',
|
|
108
|
+
transform: 'translateX(-50%, -50%)',
|
|
109
|
+
},
|
|
110
|
+
|
|
111
|
+
'.wgt-middle-right': {
|
|
112
|
+
top: '50%',
|
|
113
|
+
right: '20px',
|
|
114
|
+
transform: 'translateX(-50%, -50%)',
|
|
115
|
+
},
|
|
116
|
+
|
|
117
|
+
'.wgt-bottom-left': {
|
|
118
|
+
bottom: '20px',
|
|
119
|
+
left: '20px',
|
|
120
|
+
},
|
|
121
|
+
|
|
122
|
+
'.wgt-bottom-center': {
|
|
123
|
+
bottom: '20px',
|
|
124
|
+
left: '50%',
|
|
125
|
+
transform: 'translateX(-50%)',
|
|
126
|
+
},
|
|
127
|
+
|
|
128
|
+
'.wgt-bottom-right': {
|
|
129
|
+
bottom: '20px',
|
|
130
|
+
right: '20px',
|
|
131
|
+
},
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
addComponents(playerWidgets);
|
|
135
|
+
}),
|
|
81
136
|
],
|
|
82
137
|
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ThreekitProviderProps } from '../ThreekitProvider';
|
|
3
|
-
interface ProductLoaderProps extends Omit<ThreekitProviderProps, 'children'> {
|
|
4
|
-
productId?: string;
|
|
5
|
-
}
|
|
6
|
-
export default function ProductLoader(props: ProductLoaderProps): JSX.Element | null;
|
|
7
|
-
export {};
|