@perceptimagery/dita-configurator-staging 0.3.1 → 0.3.2
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/index.js +48 -27
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
try {
|
|
5
5
|
if (typeof document != "undefined") {
|
|
6
6
|
var elementStyle = document.createElement("style");
|
|
7
|
-
elementStyle.appendChild(document.createTextNode("@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap');\n\n#Sprie-config-html,\n#Sprie-config-body {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font-family: 'Work Sans', sans-serif;\n box-sizing: border-box;\n}\n
|
|
7
|
+
elementStyle.appendChild(document.createTextNode("@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap');\n#Sprie-config-html {\n font-size: 87.5%; /* 1rem = 14px (same on dita-website) */ \n}\n#Sprie-config-html,\n#Sprie-config-body {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font-family: 'Work Sans', sans-serif;\n box-sizing: border-box;\n}\n#Sprie-config-body * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n.sprie-config-loadingBox {\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 24px;\n font-weight: 500;\n z-index: 10000;\n background: #f2f2f2;\n}\n/*== MAIN_CONTAINER ==*/\n#Sprie-config-Main-Container {\n width: 100%;\n height: 100%;\n}\n\n/*== HEADER ==*/\n#Sprie-config-Header {\n height: 5rem; /* 70px */\n border-bottom: 1.5px solid #aeaeae;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n .sprie-config-Header-groupName {\n color: #373737;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5275rem;\n letter-spacing: -0.05rem;\n text-transform: uppercase;\n }\n}\n\n/*== 3D_VIEWER ==*/\n#Sprie-config-Viewer-Container {\n position: relative;\n width: 100%;\n\n img {\n position: absolute;\n top: 2rem;\n left: 2rem;\n }\n}\n\n/*= 3D_VIEWER-LOADER =*/\n.sprie-config-loadingFrame {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 24px;\n font-weight: 500;\n z-index: 1000;\n background: #fafafa;\n opacity: 0.7;\n}\n\n.sprie-config-loader {\n border: 8px solid #222222;\n width: 60px;\n padding: 8px;\n aspect-ratio: 1;\n border-radius: 50%;\n background: #222222;\n --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;\n -webkit-mask: var(--_m);\n mask: var(--_m);\n -webkit-mask-composite: source-out;\n mask-composite: subtract;\n animation: spin 1s infinite linear;\n}\n\n@keyframes spin {\n to {\n transform: rotate(1turn);\n }\n}\n\n/*== CUSTOMISATION_BLOCK ==*/\n#Sprie-config-Customisation-block {\n height: 15.42rem; /* 216px */\n background-color: #f2f2f2;\n border-top: 1px solid #91847e;\n position: relative;\n flex-grow: 1;\n}\n\n.sprie-config-price-block {\n position: absolute;\n right: 0;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n align-items: end;\n gap: 0.4rem;\n p {\n font-size: 1.25rem;\n font-weight: 500;\n color: #121212;\n }\n}\n\n.frameName {\n color: #4d4d4d;\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.5275rem;\n letter-spacing: -0.05rem;\n text-transform: uppercase;\n}\n\n.price-tag {\n color: #222;\n font-size: 1.3125rem;\n font-weight: 400;\n line-height: 2.275rem; \n}\n\n/*=== Mobile_View ===*/\n@media (max-width: 576px) {\n /* HEADER */\n #Sprie-config-Header {\n height: 5.25rem; /* 73.5px */\n }\n\n #Sprie-config-Viewer-Container {\n img {\n position: absolute;\n top: 1.2rem;\n left: 1.2rem;\n }\n }\n}\n.sprie-config-palette {\n display: flex;\n gap: 1.5rem;\n justify-content: flex-start;\n overflow-x: auto;\n}\n\n.sprie-config-palette-img-box {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n .sprie-config-image {\n width: 60px;\n height: 60px;\n }\n\n .sprie-config-image.mobile-view {\n width: 45px;\n height: 45px;\n }\n}\n\n.sprie-config-palette-img-box > button {\n background-color: transparent;\n}\n\n.sprie-config-palette-img-text {\n position: absolute;\n z-index: 100;\n bottom: -1rem;\n\n .sprie-config-palette-imgName {\n white-space: nowrap;\n z-index: 100;\n }\n}\n.sprie-config-engraving-block {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.8rem;\n}\n\n.sprie-config-engraving-checkbox[type='checkbox'] {\n width: 1rem;\n height: 1rem;\n accent-color: #000;\n border: 0.25rem solid #000;\n border-radius: 0.5rem;\n background-color: transparent;\n}\n\n.sprie-config-engraving-inputField-block {\n width: 25rem;\n position: relative;\n}\n\n.sprie-config-engraving-inputField {\n width: 100%;\n font-size: 0.8rem;\n font-weight: 500;\n background: transparent;\n border-width: 1px;\n}\n\n.sprie-config-engraving-inputInfo {\n position: absolute;\n white-space: nowrap;\n font-size: 0.6rem;\n bottom: 0.2rem;\n right: 0.4rem;\n color: #686868;\n}\n\n.sprie-config-engraving-link {\n position: absolute;\n white-space: nowrap;\n font-size: 0.7rem;\n bottom: -1.2rem;\n right: 0;\n color: #686868;\n text-decoration: underline;\n}\n\n@media (max-width: 576px) {\n .sprie-config-engraving-inputField-block {\n width: 70%;\n }\n}\n.carousel {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.carousel-container {\n width: 80%;\n display: flex;\n position: relative;\n overflow: hidden;\n}\n\n.carousel-item {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 100%;\n transition-property: transform;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-duration: 500ms;\n}\n\n.carousel-header {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 2rem;\n\n .step-syntax {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.5rem;\n color: #4d4d4d;\n }\n\n .select-syntax {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem;\n color: #91847e;\n }\n}\n\n/* Arrow-btns */\n.carousel-btn {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n background-color: transparent;\n}\n.arrow {\n border: solid #91847e;\n border-width: 0 3px 3px 0;\n display: inline-block;\n}\n\n.right-arrow {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n}\n\n.left-arrow {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n}\n\n/* Step-tracker */\n\n.step-tracker-block {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-bottom: 1px solid #aeaeae;\n width: 26.25rem;\n}\n\n.step-tracker {\n display: flex;\n gap: 1rem;\n}\n\n.step-circle {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: 1px solid #7d7d7d;\n background-color: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 10px;\n font-size: 14px;\n}\n\n.step-circle.active {\n background-color: #000; /* Change color for active step */\n border-color: #000;\n}\n\n@media (max-width: 576px) {\n .carousel-container {\n width: 100%;\n }\n\n .step-tracker-block {\n width: 80%;\n }\n}\n.sprie-config-add-to-cart-block {\n width: 14.5rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n}\n.sprie-config-add-to-cart-btn {\n width: 100%;\n height: 2.75rem; /* 44px */\n background-color: #000000;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: 0;\n\n font-size: 0.875rem;\n letter-spacing: 0.1rem;\n font-weight: 500;\n color: #ffffff;\n}\n\n#Sprie-Config-return-policy-label {\n display: flex;\n justify-content: center;\n width: 13.5rem;\n\n p {\n font-size: 0.7rem;\n text-align: end;\n margin-top: 0.05rem;\n }\n}\n#Sprie-Config-return-policy-checkbox[type='checkbox'] {\n width: 1rem;\n height: 1rem;\n accent-color: #000;\n border: 0.25rem solid #000;\n border-radius: 0.5rem;\n background-color: transparent;\n}\n\n.sprie-config-add-to-cart-btn:disabled,\n.sprie-config-add-to-cart-btn [disabled] {\n /* border: 1px solid #999999; */\n background-color: rgb(80, 79, 79);\n cursor: default;\n}\n@media (max-width: 576px) {\n .sprie-config-add-to-cart-block {\n width: 100%;\n }\n\n .sprie-config-add-to-cart-btn {\n width: 100%;\n height: 4rem; /* 64px */\n }\n\n #Sprie-Config-return-policy-label {\n width: 100%;\n gap : .5rem;\n }\n}"));
|
|
8
8
|
document.head.appendChild(elementStyle);
|
|
9
9
|
}
|
|
10
10
|
} catch (e) {
|
|
@@ -112,7 +112,7 @@ var __publicField = (obj, key, value) => {
|
|
|
112
112
|
host: "https://api.sprie.io"
|
|
113
113
|
};
|
|
114
114
|
const config$1 = Object.freeze(Config$2);
|
|
115
|
-
const version$1 = "0.3.
|
|
115
|
+
const version$1 = "0.3.2";
|
|
116
116
|
function modifyLensArr$1(arr, element) {
|
|
117
117
|
const index2 = arr.findIndex((e) => e["sku"] === element["sku"]);
|
|
118
118
|
if (index2 !== -1) {
|
|
@@ -43375,8 +43375,7 @@ bool bvhIntersectFirstHit(
|
|
|
43375
43375
|
{
|
|
43376
43376
|
src: e.thumbnail,
|
|
43377
43377
|
alt: e.name + "image",
|
|
43378
|
-
|
|
43379
|
-
height: isMobileView ? 45 : 60,
|
|
43378
|
+
className: `sprie-config-image ${isMobileView ? "mobile-view" : ""}`,
|
|
43380
43379
|
style: {
|
|
43381
43380
|
border: (selectedLens == null ? void 0 : selectedLens._id) === e._id ? "1px solid #9d9b9c" : "0",
|
|
43382
43381
|
borderRadius: "50%",
|
|
@@ -43642,8 +43641,7 @@ bool bvhIntersectFirstHit(
|
|
|
43642
43641
|
{
|
|
43643
43642
|
src: e.thumbnail,
|
|
43644
43643
|
alt: e.name + "image",
|
|
43645
|
-
|
|
43646
|
-
height: isMobileView ? 45 : 60,
|
|
43644
|
+
className: `sprie-config-image ${isMobileView ? "mobile-view" : ""}`,
|
|
43647
43645
|
style: {
|
|
43648
43646
|
border: (selectedOrbital == null ? void 0 : selectedOrbital._id) === e._id ? "1px solid #9d9b9c" : "0",
|
|
43649
43647
|
borderRadius: "50%",
|
|
@@ -43679,16 +43677,18 @@ bool bvhIntersectFirstHit(
|
|
|
43679
43677
|
domService,
|
|
43680
43678
|
ThreeDConfigurator: ThreeDConfigurator2
|
|
43681
43679
|
}) {
|
|
43680
|
+
var _a2;
|
|
43682
43681
|
const [selectedFrame, setSelectedFrame] = reactExports.useState();
|
|
43683
43682
|
const [selectedLens, setSelectedLens] = reactExports.useState();
|
|
43684
43683
|
const [selectedOrbital, setSelectedOrbital] = reactExports.useState();
|
|
43685
43684
|
const [modelLoading, setModelLoading] = reactExports.useState(false);
|
|
43686
43685
|
const [showAddToCart, setShowAddToCart] = reactExports.useState(false);
|
|
43686
|
+
const [viewerHeight, setViewerHeight] = reactExports.useState();
|
|
43687
|
+
const mainContainerRef = reactExports.useRef(null);
|
|
43688
|
+
const mainHeight = (_a2 = mainContainerRef.current) == null ? void 0 : _a2.clientHeight;
|
|
43687
43689
|
const domInstance = reactExports.useRef();
|
|
43688
43690
|
domInstance.current = domService;
|
|
43689
43691
|
const isMobileView = window.innerWidth <= 576;
|
|
43690
|
-
const windowHeight = window.innerHeight / 16;
|
|
43691
|
-
const occupiedHeight = isMobileView ? showAddToCart ? (336 + 84) / 16 : (280 + 84) / 16 : (240 + 88) / 16;
|
|
43692
43692
|
const onChangeFrame = async (frame, reload) => {
|
|
43693
43693
|
if (frame._id === (selectedFrame == null ? void 0 : selectedFrame._id) && !reload) {
|
|
43694
43694
|
return;
|
|
@@ -43707,7 +43707,9 @@ bool bvhIntersectFirstHit(
|
|
|
43707
43707
|
return includedLens;
|
|
43708
43708
|
};
|
|
43709
43709
|
const getOrbitalInfo = (frame) => {
|
|
43710
|
-
const includedOrbital = frame == null ? void 0 : frame.customisation.find(
|
|
43710
|
+
const includedOrbital = frame == null ? void 0 : frame.customisation.find(
|
|
43711
|
+
(x2) => x2.type == "Orbital"
|
|
43712
|
+
);
|
|
43711
43713
|
return includedOrbital;
|
|
43712
43714
|
};
|
|
43713
43715
|
const onChangeLens = async (requestedLens) => {
|
|
@@ -43731,12 +43733,24 @@ bool bvhIntersectFirstHit(
|
|
|
43731
43733
|
setModelLoading(false);
|
|
43732
43734
|
});
|
|
43733
43735
|
} else {
|
|
43734
|
-
domInstance.current.changeLens(
|
|
43736
|
+
domInstance.current.changeLens(
|
|
43737
|
+
[requestedLens, selectedOrbital],
|
|
43738
|
+
false,
|
|
43739
|
+
selectedFrame
|
|
43740
|
+
);
|
|
43735
43741
|
}
|
|
43736
43742
|
} else if (frameDefaultLens && isDefaultRequested) {
|
|
43737
|
-
domInstance.current.changeLens(
|
|
43743
|
+
domInstance.current.changeLens(
|
|
43744
|
+
[frameDefaultLens, selectedOrbital],
|
|
43745
|
+
false,
|
|
43746
|
+
selectedFrame
|
|
43747
|
+
);
|
|
43738
43748
|
} else {
|
|
43739
|
-
domInstance.current.changeLens(
|
|
43749
|
+
domInstance.current.changeLens(
|
|
43750
|
+
[requestedLens, selectedOrbital],
|
|
43751
|
+
false,
|
|
43752
|
+
selectedFrame
|
|
43753
|
+
);
|
|
43740
43754
|
}
|
|
43741
43755
|
setSelectedLens(requestedLens);
|
|
43742
43756
|
};
|
|
@@ -43767,52 +43781,59 @@ bool bvhIntersectFirstHit(
|
|
|
43767
43781
|
const onEngravingTextAdded = (text) => {
|
|
43768
43782
|
console.log(text);
|
|
43769
43783
|
};
|
|
43784
|
+
reactExports.useEffect(() => {
|
|
43785
|
+
if (mainContainerRef.current) {
|
|
43786
|
+
const occupiedHeight = isMobileView ? showAddToCart ? 294 + 73.5 : 245 + 73.5 : 216 + 70;
|
|
43787
|
+
setViewerHeight(
|
|
43788
|
+
(mainContainerRef.current.clientHeight - (occupiedHeight + 1)) / 14
|
|
43789
|
+
// in rem
|
|
43790
|
+
);
|
|
43791
|
+
}
|
|
43792
|
+
}, [isMobileView, mainContainerRef, showAddToCart]);
|
|
43770
43793
|
reactExports.useEffect(() => {
|
|
43771
43794
|
frameList && setSelectedFrame(frameList[0]);
|
|
43772
43795
|
lensList && setSelectedLens(lensList[0]);
|
|
43773
43796
|
orbitalList && setSelectedOrbital(orbitalList[0]);
|
|
43774
43797
|
}, [frameList, lensList, orbitalList]);
|
|
43775
|
-
|
|
43798
|
+
console.log(mainHeight);
|
|
43799
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { id: "Sprie-config-Main-Container", ref: mainContainerRef, children: [
|
|
43776
43800
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("header", { id: "Sprie-config-Header", children: [
|
|
43777
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
43778
|
-
"img",
|
|
43779
|
-
{
|
|
43780
|
-
src: ditaLogo,
|
|
43781
|
-
alt: "dita-logo",
|
|
43782
|
-
height: 20
|
|
43783
|
-
}
|
|
43784
|
-
),
|
|
43801
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: ditaLogo, alt: "dita-logo", width: 97, height: 20 }),
|
|
43785
43802
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "sprie-config-Header-groupName", children: [
|
|
43786
43803
|
orgName,
|
|
43787
43804
|
" CUSTOMIZER"
|
|
43788
43805
|
] })
|
|
43789
43806
|
] }),
|
|
43790
43807
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
43791
|
-
"
|
|
43808
|
+
"section",
|
|
43792
43809
|
{
|
|
43793
43810
|
id: "Sprie-config-Viewer-Container",
|
|
43794
|
-
style: {
|
|
43811
|
+
style: {
|
|
43812
|
+
height: `${viewerHeight}rem`
|
|
43813
|
+
},
|
|
43795
43814
|
children: [
|
|
43796
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: deg360_Icon, alt: "360deg-logo", height: 34 }),
|
|
43815
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: deg360_Icon, alt: "360deg-logo", width: 44, height: 34 }),
|
|
43797
43816
|
modelLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-loadingFrame", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-loader" }) }),
|
|
43798
43817
|
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, id: "holder-canvas" })
|
|
43799
43818
|
]
|
|
43800
43819
|
}
|
|
43801
43820
|
),
|
|
43802
43821
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
43803
|
-
"
|
|
43822
|
+
"section",
|
|
43804
43823
|
{
|
|
43805
43824
|
id: "Sprie-config-Customisation-block",
|
|
43806
43825
|
style: {
|
|
43807
43826
|
paddingTop: "1.5rem",
|
|
43808
|
-
height: isMobileView ? showAddToCart ? "21rem" : "17.5rem" : "
|
|
43827
|
+
height: isMobileView ? showAddToCart ? "21rem" : "17.5rem" : "15.42rem"
|
|
43809
43828
|
},
|
|
43810
43829
|
children: [
|
|
43811
43830
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
43812
43831
|
"div",
|
|
43813
43832
|
{
|
|
43814
43833
|
className: "sprie-config-price-block",
|
|
43815
|
-
style: {
|
|
43834
|
+
style: {
|
|
43835
|
+
top: isMobileView || !showAddToCart ? "-3rem" : "-8.5rem"
|
|
43836
|
+
},
|
|
43816
43837
|
children: [
|
|
43817
43838
|
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: { marginRight: ".8rem" }, children: "$925.00 USD" }),
|
|
43818
43839
|
!isMobileView && showAddToCart && /* @__PURE__ */ jsxRuntimeExports.jsx(AddToCartBtn, {}),
|