@perceptimagery/dita-configurator-staging 0.1.5000 → 0.1.5003
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.html +1 -1
- package/dist/index.js +86 -74
- package/package.json +1 -1
package/dist/index.html
CHANGED
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* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#dita-3dconfig-element {\n width: 100%;\n height: 100%;\n font-family: 'Work Sans', sans-serif;\n}\n\n.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 fontsize: 24px;\n font-weight: 500;\n z-index: 1000;\n background: #f2f2f2;\n}\n.my-btn {\n border: 1px solid gray;\n border-radius: 5px;\n padding: 5px 10px;\n cursor: pointer;\n transition: all 300ms ease-in;\n}\n\n.my-btn:hover {\n box-shadow: 0 0 2px 3px gray;\n}\n.my-panel {\n border: 1px solid gray;\n padding: 10px 20px;\n border-radius: 10px;\n margin: 10px auto;\n}\n\n.my-panel h3 {\n font-family: sans-serif;\n}\n#Main-Container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column-reverse;\n background: #ffffff;\n}\n\n#Viewer-Container {\n width: 100%;\n /* height: 100%; */\n position: relative;\n}\n\n#Viewer-Container .webgl {\n width: 100%;\n height: 99%;\n}\n\n#Checkout-Container {\n width: 100%;\n padding: 0.75rem;\n height: min(70%, 45rem);\n}\n\n#Checkout-box {\n width: 100%;\n background: #efefef;\n padding: 1rem;\n min-height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n#Checkout-header {\n right: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n padding-bottom: 0.9rem;\n border-bottom: 1px solid #ccc;\n margin-bottom: 2.5rem;\n}\n\n#Checkout-header .name {\n font-size: 1.375rem;\n font-weight: 400;\n line-height: 1.5275rem; /* 111.091% */\n letter-spacing: -0.05rem;\n text-transform: uppercase;\n}\n\n#Checkout-header .price {\n color: #222;\n font-size: 1.3125rem;\n font-weight: 400;\n line-height: 2.275rem; /* 173.333% */\n}\n\n#Checkout-body {\n display: flex;\n flex-direction: column;\n}\n\n#Dropdown-Container {\n flex-direction: column;\n gap: 1.5rem;\n}\n\n#Checkout-button {\n display: flex;\n padding: 0rem 1.25rem;\n align-items: center;\n justify-content: center;\n width: 100%;\n background: #222;\n color: #fff;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 3.5rem; /* 400% */\n letter-spacing: 0.125rem;\n text-transform: uppercase;\n cursor: pointer;\n margin-top: 6rem;\n}\n\n.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 fontsize: 24px;\n font-weight: 500;\n z-index: 1000;\n background: #f2f2f2;\n opacity: 0.8\n}\n\n.loader {\n border: 8px solid #f3f3f3; /* Light grey */\n border-top: 8px solid #222222; /* Blue */\n border-radius: 50%;\n width: 60px;\n height: 60px;\n animation: spin 1.5s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* Breakpoints */\n\n@media (min-width: 800px) {\n #Main-Container {\n flex-direction: row-reverse;\n }\n\n #Checkout-Container {\n width: auto;\n padding: 2.5rem;\n height: 100%;\n }\n\n #Checkout-box {\n width: 350px;\n padding: 1.5rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n #Dropdown-Container {\n gap: 2.5rem;\n }\n}\n\n@media (min-width: 992px) {\n #Checkout-box {\n width: 450px;\n padding: 2.5rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n}\n/* Dropdown.css */\n\n.label {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.75rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n margin-left: 0.1rem;\n}\n\n.dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.select-box {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n /* border: 1px solid #ccc; */\n border-radius: 5px;\n position: relative;\n user-select: none;\n width: 100%;\n box-sizing: border-box;\n transition: border-radius 0.3s ease;\n padding: 1rem 1.25rem;\n background-color: #ffffff;\n max-height: 17rem; /* Set the fixed height for the dropdown */\n overflow-y: auto;\n}\n\n.select-box.open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.selected-option {\n flex: 1;\n}\n\n.arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.arrow.up {\n transform: rotate(180deg);\n}\n\n.dropdown-options {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n z-index: 1;\n background-color: #fff;\n border-top: 1px solid #ccc;\n border-radius: 0 0 5px 5px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n opacity: 0;\n visibility: hidden;\n overflow: hidden;\n transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;\n max-height: 17rem; /* Set the fixed height for the dropdown */\n overflow-y: auto;\n}\n\n.dropdown-options.open {\n opacity: 1;\n visibility: visible;\n height: auto;\n z-index : 1000;\n}\n\n.dropdown-options li {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.dropdown-options li:hover {\n background-color: #f0f0f0;\n}\n\n.dropdown-options li.selected {\n background-color: #f2f2f2; /* Highlight color for selected option */\n}\n\n.selected-option {\n width: 90%;\n}\n\n.frame-details-wrapper {\n display: flex;\n gap: 1rem;\n height: auto;\n overflow: hidden;\n}\n\n.variantImgBox {\n width: 3.4rem;\n height: 100%;\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n background: #fff;\n}\n\n.details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n overflow: hidden;\n}\n\n.details .frameName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.details .skuName {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 0.96125rem; /* 109.857% */\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n}\n/* LensDropdown.css */\n\n.label {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.75rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n margin-left: 0.1rem;\n}\n\n.dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.select-box {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n /* padding: 1rem 1.25rem; */\n border-radius: 0.125rem;\n position: relative;\n user-select: none;\n width: 100%;\n box-sizing: border-box;\n transition: border-radius 0.3s ease;\n background-color: #ffffff;\n}\n\n.select-box.open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.selected-lens {\n flex: 1;\n display: flex;\n gap: 1rem;\n height: auto;\n}\n\n.selected-lens .lens-details {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: auto;\n padding-bottom: 0.2rem\n}\n\n.colorBox {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.lensName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n}\n\n.lensColor {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 0.96125rem; /* 109.857% */\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n}\n\n.arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.arrow.up {\n transform: rotate(180deg);\n}\n\n.lens-dropdown-options {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n z-index: 100; /* Adjust z-index to ensure dropdown options are above other elements */\n background-color: transparent;\n border-radius: 0 0 0.125rem 0.125rem;\n border: 0;\n box-shadow: none;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n max-height: 4rem; /* Set the fixed height for the dropdown */\n overflow-x: auto;\n overflow-y: hidden;\n display: flex;\n flex-direction: row;\n flex-wrap: no-wrap;\n padding: 0;\n}\n\n.lens-dropdown-options.open {\n opacity: 1;\n visibility: visible;\n}\n\n.lens-dropdown-options li {\n padding: 1rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n padding: 0.25rem;\n}\n\n.lens-dropdown-options li .li-element {\n width: 100%;\n height: 100%;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.lens-dropdown-options li .tooltip {\n display: none;\n}\n\n@media (min-width: 768px) {\n .lens-dropdown-options {\n max-height: 9.2rem;\n overflow-x: hidden;\n overflow-y: auto;\n display: grid;\n grid-template-columns: repeat(5, auto);\n padding: 0.5rem;\n border-top: 1px solid #ccc;\n background-color: #fff;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .lens-dropdown-options li {\n min-width: auto;\n }\n\n .lens-dropdown-options li .tooltip {\n position: absolute;\n width: auto;\n height: 2rem;\n flex-shrink: 0;\n border-radius: 0.125rem;\n background: #fff;\n box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);\n text-align: center;\n line-height: 2rem;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n display: block;\n\n /* Font style properties */\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n white-space: nowrap; /* Ensure text is in one line */\n z-index: 200;\n }\n\n .tooltip.top {\n bottom: 12%;\n }\n\n .tooltip.right {\n right: 2%;\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\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\n#Sprie-config-body * {\n box-sizing: border-box;\n}\n\n#dita-3dconfig-element {\n width: 100%;\n height: 100%;\n}\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 fontsize: 24px;\n font-weight: 500;\n z-index: 1000;\n background: #f2f2f2;\n}\n.my-btn {\n border: 1px solid gray;\n border-radius: 5px;\n padding: 5px 10px;\n cursor: pointer;\n transition: all 300ms ease-in;\n}\n\n.my-btn:hover {\n box-shadow: 0 0 2px 3px gray;\n}\n.my-panel {\n border: 1px solid gray;\n padding: 10px 20px;\n border-radius: 10px;\n margin: 10px auto;\n}\n\n.my-panel h3 {\n font-family: sans-serif;\n}\n#Sprie-config-Main-Container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column-reverse;\n background: #ffffff;\n}\n\n#Sprie-config-Viewer-Container {\n width: 100%;\n position: relative;\n height: 100%;\n}\n\n#Sprie-config-Viewer-Container .sprie-config-webgl {\n width: 100%;\n height: 100%;\n}\n\n#Sprie-config-Checkout-Container {\n width: 100%;\n padding: 0.75rem;\n height: min(70%, 45rem);\n}\n\n#Sprie-config-Checkout-box {\n width: 100%;\n background: #efefef;\n padding: 1rem;\n min-height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n#Sprie-config-Checkout-header {\n right: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n padding-bottom: 0.9rem;\n border-bottom: 1px solid #ccc;\n margin-bottom: 2.5rem;\n}\n\n#Sprie-config-Checkout-header #Sprie-config-frameName {\n color: #222;\n font-size: 1.375rem;\n font-weight: 400;\n line-height: 1.5275rem; /* 111.091% */\n letter-spacing: -0.05rem;\n text-transform: uppercase;\n}\n\n#Sprie-config-Checkout-header #Sprie-config-lensPrice {\n color: #222;\n font-size: 1.3125rem;\n font-weight: 400;\n line-height: 2.275rem; /* 173.333% */\n}\n\n#Sprie-config-Checkout-body {\n display: flex;\n flex-direction: column;\n}\n\n#Sprie-config-Dropdown-Container {\n flex-direction: column;\n gap: 1.5rem;\n}\n\n#Sprie-config-Checkout-button {\n display: flex;\n padding: 0rem 1.25rem;\n align-items: center;\n justify-content: center;\n width: 100%;\n background: #222;\n color: #fff;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 3.5rem; /* 400% */\n letter-spacing: 0.125rem;\n text-transform: uppercase;\n cursor: pointer;\n margin-top: 6rem;\n}\n\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 fontsize: 24px;\n font-weight: 500;\n z-index: 1000;\n background: #f2f2f2;\n opacity: 0.8;\n}\n\n.sprie-config-loader {\n border: 8px solid #f3f3f3; /* Light grey */\n border-top: 8px solid #222222; /* Blue */\n border-radius: 50%;\n width: 60px;\n height: 60px;\n animation: spin 1.5s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* Breakpoints */\n\n@media (min-width: 800px) {\n #Sprie-config-Main-Container {\n flex-direction: row-reverse;\n }\n\n #Sprie-config-Checkout-Container {\n width: auto;\n padding: 2.5rem;\n height: 100%;\n }\n\n #Sprie-config-Checkout-box {\n width: 350px;\n padding: 1.5rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n #Sprie-config-Dropdown-Container {\n gap: 2.5rem;\n }\n\n #Sprie-config-Viewer-Container .sprie-config-webgl {\n height: 99%;\n }\n}\n\n@media (min-width: 992px) {\n #Sprie-config-Checkout-box {\n width: 450px;\n padding: 2.5rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n}\n/* Dropdown.css */\n\n.sprie-config-label {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.75rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n margin-left: 0.1rem;\n}\n\n.sprie-config-dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.sprie-config-select-box {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n /* border: 1px solid #ccc; */\n border-radius: 5px;\n position: relative;\n user-select: none;\n width: 100%;\n box-sizing: border-box;\n transition: border-radius 0.3s ease;\n padding: 1rem 1.25rem;\n background-color: #ffffff;\n max-height: 17rem; /* Set the fixed height for the dropdown */\n overflow-y: auto;\n}\n\n.sprie-config-select-box.sprie-config-open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.sprie-config-selected-option {\n flex: 1;\n}\n\n.sprie-config-arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.sprie-config-arrow.sprie-config-up {\n transform: rotate(180deg);\n}\n\n.sprie-config-dropdown-options {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n z-index: 1;\n background-color: #fff;\n border-top: 1px solid #ccc;\n border-radius: 0 0 5px 5px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n opacity: 0;\n visibility: hidden;\n overflow: hidden;\n transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;\n max-height: 17rem; /* Set the fixed height for the dropdown */\n overflow-y: auto;\n}\n\n.sprie-config-dropdown-options.sprie-config-open {\n opacity: 1;\n visibility: visible;\n height: auto;\n z-index: 1000;\n}\n\n.sprie-config-dropdown-options li {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.sprie-config-dropdown-options li:hover {\n background-color: #f0f0f0;\n}\n\n.sprie-config-dropdown-options li.sprie-config-selected {\n background-color: #f2f2f2; /* Highlight color for selected option */\n}\n\n.sprie-config-selected-option {\n width: 90%;\n}\n\n.sprie-config-frame-details-wrapper {\n display: flex;\n gap: 1rem;\n height: auto;\n overflow: hidden;\n}\n\n.sprie-config-variantImgBox {\n width: 3.4rem;\n height: 100%;\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n background: #fff;\n}\n\n.sprie-config-details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n overflow: hidden;\n}\n\n.sprie-config-details .sprie-config-frameName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin : 0\n}\n\n.sprie-config-details .sprie-config-skuName {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 0.96125rem; /* 109.857% */\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n margin : 0\n}\n/* LensDropdown.css */\n\n.sprie-config-label {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.75rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n margin-left: 0.1rem;\n}\n\n.sprie-config-dropdown-wrapper {\n position: relative;\n width: 100%;\n}\n\n.sprie-config-select-box {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 0.125rem;\n position: relative;\n user-select: none;\n width: 100%;\n box-sizing: border-box;\n transition: border-radius 0.3s ease;\n background-color: #ffffff;\n}\n\n.sprie-config-select-box.sprie-config-open {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.sprie-config-selected-lens {\n flex: 1;\n display: flex;\n gap: 1rem;\n height: auto;\n}\n\n.sprie-config-selected-lens .sprie-config-lens-details {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: auto;\n padding-bottom: 0.2rem;\n}\n\n.sprie-config-colorBox {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sprie-config-lensName {\n color: #4d4d4d;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem; /* 150% */\n margin: 0;\n}\n\n.sprie-config-lensColor {\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 0.96125rem; /* 109.857% */\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n margin: 0;\n}\n\n.sprie-config-arrow {\n margin-left: 10px;\n transition: transform 0.3s ease;\n}\n\n.sprie-config-arrow.sprie-config-up {\n transform: rotate(180deg);\n}\n\n.sprie-config-lens-dropdown-options {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n z-index: 100; /* Adjust z-index to ensure dropdown options are above other elements */\n background-color: transparent;\n border-radius: 0 0 0.125rem 0.125rem;\n border: 0;\n box-shadow: none;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n max-height: 4rem; /* Set the fixed height for the dropdown */\n overflow-x: auto;\n overflow-y: hidden;\n display: flex;\n flex-direction: row;\n flex-wrap: no-wrap;\n padding: 0;\n}\n\n.sprie-config-lens-dropdown-options.sprie-config-open {\n opacity: 1;\n visibility: visible;\n}\n\n.sprie-config-lens-dropdown-options li {\n padding: 1rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n padding: 0.25rem;\n}\n\n.sprie-config-lens-dropdown-options li .sprie-config-li-element {\n width: 100%;\n height: 100%;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sprie-config-lens-dropdown-options li .sprie-config-tooltip {\n display: none;\n}\n\n@media (min-width: 768px) {\n .sprie-config-lens-dropdown-options {\n max-height: 9.2rem;\n overflow-x: hidden;\n overflow-y: auto;\n display: grid;\n grid-template-columns: repeat(5, auto);\n padding: 0.5rem;\n border-top: 1px solid #ccc;\n background-color: #fff;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .sprie-config-lens-dropdown-options li {\n min-width: auto;\n }\n\n .sprie-config-lens-dropdown-options li .sprie-config-tooltip {\n position: absolute;\n width: auto;\n height: 2rem;\n flex-shrink: 0;\n border-radius: 0.125rem;\n background: #fff;\n box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);\n text-align: center;\n line-height: 2rem;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n display: block;\n\n /* Font style properties */\n color: rgba(34, 34, 34, 0.7);\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02813rem;\n text-transform: uppercase;\n white-space: nowrap; /* Ensure text is in one line */\n z-index: 200;\n }\n\n .sprie-config-tooltip.sprie-config-top {\n bottom: 12%;\n }\n\n .sprie-config-tooltip.sprie-config-right {\n right: 2%;\n }\n}"));
|
|
8
8
|
document.head.appendChild(elementStyle);
|
|
9
9
|
}
|
|
10
10
|
} catch (e) {
|
|
@@ -111,7 +111,7 @@ var __publicField = (obj, key, value) => {
|
|
|
111
111
|
host: "https://api.sprie.io"
|
|
112
112
|
};
|
|
113
113
|
const config = Object.freeze(Config$1);
|
|
114
|
-
const version = "0.1.
|
|
114
|
+
const version = "0.1.5003";
|
|
115
115
|
class APIServiceFactory {
|
|
116
116
|
constructor(fetcher) {
|
|
117
117
|
__publicField(this, "isAuthenticated");
|
|
@@ -127,7 +127,6 @@ var __publicField = (obj, key, value) => {
|
|
|
127
127
|
*/
|
|
128
128
|
async Authenticate(apiKey) {
|
|
129
129
|
this.fetcher.LoadConfig();
|
|
130
|
-
console.log(this.fetcher.LoadConfig());
|
|
131
130
|
if (this.fetcher.IsTokenExpired() || this.fetcher.IsConfigExpired()) {
|
|
132
131
|
await this.AuthServiceApi(apiKey);
|
|
133
132
|
}
|
|
@@ -39248,8 +39247,8 @@ var __publicField = (obj, key, value) => {
|
|
|
39248
39247
|
this.scene = new Scene();
|
|
39249
39248
|
}
|
|
39250
39249
|
async intialize() {
|
|
39251
|
-
const newWidth = document.querySelector("canvas.webgl").clientWidth;
|
|
39252
|
-
const newHeight = document.querySelector("canvas.webgl").clientHeight;
|
|
39250
|
+
const newWidth = document.querySelector("canvas.sprie-config-webgl").clientWidth;
|
|
39251
|
+
const newHeight = document.querySelector("canvas.sprie-config-webgl").clientHeight;
|
|
39253
39252
|
this.camera = new PerspectiveCamera(
|
|
39254
39253
|
12,
|
|
39255
39254
|
newWidth / newHeight,
|
|
@@ -39257,7 +39256,7 @@ var __publicField = (obj, key, value) => {
|
|
|
39257
39256
|
1e4
|
|
39258
39257
|
);
|
|
39259
39258
|
this.camera.lookAt(0, 0, 0);
|
|
39260
|
-
this.canvas = document.querySelector("canvas.webgl");
|
|
39259
|
+
this.canvas = document.querySelector("canvas.sprie-config-webgl");
|
|
39261
39260
|
this.renderer = new WebGLRenderer({
|
|
39262
39261
|
canvas: this.canvas,
|
|
39263
39262
|
alpha: true,
|
|
@@ -39395,7 +39394,6 @@ var __publicField = (obj, key, value) => {
|
|
|
39395
39394
|
|
|
39396
39395
|
`
|
|
39397
39396
|
);
|
|
39398
|
-
console.log("MinXis ", shader.uniforms.minX, "\n", "maxXis ", shader.uniforms.maxX, "\n", "MinYis ", shader.uniforms.minY, "\n", "MaxYis", shader.uniforms.maxY);
|
|
39399
39397
|
};
|
|
39400
39398
|
node.matrixAutoUpdate = true;
|
|
39401
39399
|
lensMaterial.matrixAutoUpdate = true;
|
|
@@ -39431,7 +39429,7 @@ var __publicField = (obj, key, value) => {
|
|
|
39431
39429
|
const frameElement = document.getElementById("frameName");
|
|
39432
39430
|
frameElement.textContent = response.group.name;
|
|
39433
39431
|
if (Array.isArray(response.variants)) {
|
|
39434
|
-
response.variants.forEach((frame
|
|
39432
|
+
response.variants.forEach((frame) => {
|
|
39435
39433
|
const option = document.createElement("li");
|
|
39436
39434
|
const optionContent = document.createElement("div");
|
|
39437
39435
|
optionContent.id = "FrameDetailsContainer";
|
|
@@ -39493,7 +39491,6 @@ var __publicField = (obj, key, value) => {
|
|
|
39493
39491
|
async setupLensDropdownAndListeners(response) {
|
|
39494
39492
|
const selectDropdown = document.getElementById("Lensdropdown");
|
|
39495
39493
|
const button = document.getElementById("LensdropdownBtn");
|
|
39496
|
-
document.getElementById("LensContainer");
|
|
39497
39494
|
if (Array.isArray(response.data)) {
|
|
39498
39495
|
response.data.forEach((lens) => {
|
|
39499
39496
|
if (lens.name != "CLEAR") {
|
|
@@ -40266,7 +40263,6 @@ var __publicField = (obj, key, value) => {
|
|
|
40266
40263
|
* @returns {boolean} true if success, false if error
|
|
40267
40264
|
*/
|
|
40268
40265
|
async Init() {
|
|
40269
|
-
this.loadMesage();
|
|
40270
40266
|
try {
|
|
40271
40267
|
this.scanApiKeyFromCurrentScriptTag();
|
|
40272
40268
|
await this.authenticate();
|
|
@@ -40277,7 +40273,6 @@ var __publicField = (obj, key, value) => {
|
|
|
40277
40273
|
await this.mountElement();
|
|
40278
40274
|
this.status = ESDKStatus.Done;
|
|
40279
40275
|
this.isLoaded = true;
|
|
40280
|
-
this.log(`SprieEmbed Loaded ${this.loadCount} embeds on this page`);
|
|
40281
40276
|
if (this.isLoaded) {
|
|
40282
40277
|
setTimeout(() => {
|
|
40283
40278
|
this.hideLoader();
|
|
@@ -40657,28 +40652,28 @@ var __publicField = (obj, key, value) => {
|
|
|
40657
40652
|
document.removeEventListener("click", handleClickOutside);
|
|
40658
40653
|
};
|
|
40659
40654
|
}, []);
|
|
40660
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className:
|
|
40661
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className:
|
|
40655
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sprie-config-dropdown-wrapper`, ref: dropdownRef, children: [
|
|
40656
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `sprie-config-label`, children: label }),
|
|
40662
40657
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40663
40658
|
"div",
|
|
40664
40659
|
{
|
|
40665
|
-
className: `select-box ${isOpen ? "open" : ""}`,
|
|
40660
|
+
className: `sprie-config-select-box ${isOpen ? "sprie-config-open" : ""}`,
|
|
40666
40661
|
onClick: handleToggleDropdown,
|
|
40667
40662
|
children: [
|
|
40668
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className:
|
|
40669
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className:
|
|
40663
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sprie-config-selected-option sprie-config-frame-details-wrapper`, children: [
|
|
40664
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sprie-config-variantImgBox`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40670
40665
|
"img",
|
|
40671
40666
|
{
|
|
40672
40667
|
src: selectedFrame && selectedFrame.variantImage,
|
|
40673
40668
|
alt: "variant-img",
|
|
40674
|
-
className:
|
|
40669
|
+
className: `sprie-config-variantImg`,
|
|
40675
40670
|
width: 50,
|
|
40676
40671
|
height: 42
|
|
40677
40672
|
}
|
|
40678
40673
|
) }),
|
|
40679
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className:
|
|
40680
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className:
|
|
40681
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className:
|
|
40674
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sprie-config-details`, children: [
|
|
40675
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `sprie-config-frameName`, children: selectedFrame && selectedFrame.name }),
|
|
40676
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `sprie-config-skuName`, children: selectedFrame && selectedFrame.sku })
|
|
40682
40677
|
] })
|
|
40683
40678
|
] }),
|
|
40684
40679
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
@@ -40686,31 +40681,31 @@ var __publicField = (obj, key, value) => {
|
|
|
40686
40681
|
{
|
|
40687
40682
|
src: dropdownIcon,
|
|
40688
40683
|
alt: "dropdown-icon",
|
|
40689
|
-
className: `arrow ${isOpen ? "up" : ""}`
|
|
40684
|
+
className: `sprie-config-arrow ${isOpen ? "sprie-config-up" : ""}`
|
|
40690
40685
|
}
|
|
40691
40686
|
)
|
|
40692
40687
|
]
|
|
40693
40688
|
}
|
|
40694
40689
|
),
|
|
40695
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: `dropdown-options ${isOpen ? "open" : ""}`, children: options && options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40690
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: `sprie-config-dropdown-options ${isOpen ? "sprie-config-open" : ""}`, children: options && options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40696
40691
|
"li",
|
|
40697
40692
|
{
|
|
40698
40693
|
onClick: () => handleSelectOption(option),
|
|
40699
|
-
className: `frame-details-wrapper ${selectedFrame && selectedFrame.name === option.name ? "selected" : ""}`,
|
|
40694
|
+
className: `sprie-config-frame-details-wrapper ${selectedFrame && selectedFrame.name === option.name ? "sprie-config-selected" : ""}`,
|
|
40700
40695
|
children: [
|
|
40701
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className:
|
|
40696
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sprie-config-variantImgBox`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40702
40697
|
"img",
|
|
40703
40698
|
{
|
|
40704
40699
|
src: option.variantImage,
|
|
40705
40700
|
alt: "variant-img",
|
|
40706
|
-
className:
|
|
40701
|
+
className: `sprie-config-variantImg`,
|
|
40707
40702
|
width: 50,
|
|
40708
40703
|
height: 42
|
|
40709
40704
|
}
|
|
40710
40705
|
) }),
|
|
40711
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className:
|
|
40712
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className:
|
|
40713
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className:
|
|
40706
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sprie-config-details`, children: [
|
|
40707
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `sprie-config-frameName`, children: option.name }),
|
|
40708
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `sprie-config-skuName`, children: option.sku })
|
|
40714
40709
|
] })
|
|
40715
40710
|
]
|
|
40716
40711
|
},
|
|
@@ -40771,29 +40766,29 @@ var __publicField = (obj, key, value) => {
|
|
|
40771
40766
|
return "left";
|
|
40772
40767
|
}
|
|
40773
40768
|
};
|
|
40774
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "dropdown-wrapper", ref: dropdownRef, children: [
|
|
40775
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "label", children: label }),
|
|
40769
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-dropdown-wrapper", ref: dropdownRef, children: [
|
|
40770
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sprie-config-label", children: label }),
|
|
40776
40771
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40777
40772
|
"div",
|
|
40778
40773
|
{
|
|
40779
|
-
className: `select-box ${isMobileView ? "open" : `${isOpen ? "open" : ""}`}`,
|
|
40774
|
+
className: `sprie-config-select-box ${isMobileView ? "sprie-config-open" : `${isOpen ? "sprie-config-open" : ""}`}`,
|
|
40780
40775
|
onClick: handleToggleDropdown,
|
|
40781
40776
|
style: {
|
|
40782
40777
|
background: isMobileView ? "transparent" : "#ffffff",
|
|
40783
40778
|
padding: isMobileView ? "0.2rem 1.25rem .7rem 0.1rem" : "1rem 1.25rem"
|
|
40784
40779
|
},
|
|
40785
40780
|
children: [
|
|
40786
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "selected-lens", children: [
|
|
40787
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "colorBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40781
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-selected-lens", children: [
|
|
40782
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-colorBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40788
40783
|
"img",
|
|
40789
40784
|
{
|
|
40790
40785
|
src: selectedLens && selectedLens.thumbnail,
|
|
40791
40786
|
width: 50
|
|
40792
40787
|
}
|
|
40793
40788
|
) }),
|
|
40794
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lens-details", children: [
|
|
40795
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "lensName", children: selectedLens && selectedLens.name }),
|
|
40796
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "lensColor", children: selectedLens && selectedLens.metadata[0].value })
|
|
40789
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-lens-details", children: [
|
|
40790
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sprie-config-lensName", children: selectedLens && selectedLens.name }),
|
|
40791
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sprie-config-lensColor", children: selectedLens && selectedLens.metadata[0].value })
|
|
40797
40792
|
] })
|
|
40798
40793
|
] }),
|
|
40799
40794
|
!isMobileView && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
@@ -40801,7 +40796,7 @@ var __publicField = (obj, key, value) => {
|
|
|
40801
40796
|
{
|
|
40802
40797
|
src: dropdownIcon,
|
|
40803
40798
|
alt: "dropdown-icon",
|
|
40804
|
-
className: `arrow ${isOpen ? "up" : ""}`
|
|
40799
|
+
className: `sprie-config-arrow ${isOpen ? "sprie-config-up" : ""}`
|
|
40805
40800
|
}
|
|
40806
40801
|
)
|
|
40807
40802
|
]
|
|
@@ -40810,14 +40805,14 @@ var __publicField = (obj, key, value) => {
|
|
|
40810
40805
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40811
40806
|
"ul",
|
|
40812
40807
|
{
|
|
40813
|
-
className: `lens-dropdown-options ${isMobileView ? "open" : `${isOpen ? "open" : ""}`}`,
|
|
40808
|
+
className: `sprie-config-lens-dropdown-options ${isMobileView ? "sprie-config-open" : `${isOpen ? "sprie-config-open" : ""}`}`,
|
|
40814
40809
|
style: { marginLeft: isMobileView ? ".1rem" : "0" },
|
|
40815
40810
|
children: lensData && lensData.map((option, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40816
40811
|
"li",
|
|
40817
40812
|
{
|
|
40818
|
-
className: selectedLens && selectedLens.name === option.name ? "selected" : "",
|
|
40813
|
+
className: selectedLens && selectedLens.name === option.name ? "sprie-config-selected" : "",
|
|
40819
40814
|
children: [
|
|
40820
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "li-element", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40815
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-li-element", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40821
40816
|
"img",
|
|
40822
40817
|
{
|
|
40823
40818
|
src: option.thumbnail,
|
|
@@ -40830,7 +40825,7 @@ var __publicField = (obj, key, value) => {
|
|
|
40830
40825
|
hoveredOption === option && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40831
40826
|
"div",
|
|
40832
40827
|
{
|
|
40833
|
-
className: `tooltip ${calculateTooltipPosition(
|
|
40828
|
+
className: `sprie-config-tooltip ${calculateTooltipPosition(
|
|
40834
40829
|
index
|
|
40835
40830
|
)} ${calculateTooltipAlignment(index)}`,
|
|
40836
40831
|
children: option.metadata[0].value
|
|
@@ -40865,7 +40860,8 @@ var __publicField = (obj, key, value) => {
|
|
|
40865
40860
|
customEvent,
|
|
40866
40861
|
apiService,
|
|
40867
40862
|
frameList,
|
|
40868
|
-
lensList
|
|
40863
|
+
lensList,
|
|
40864
|
+
viewerOnly
|
|
40869
40865
|
}) {
|
|
40870
40866
|
const [selectedFrame, setSelectedFrame] = reactExports.useState();
|
|
40871
40867
|
const [selectedLens, setSelectedLens] = reactExports.useState();
|
|
@@ -40909,17 +40905,17 @@ var __publicField = (obj, key, value) => {
|
|
|
40909
40905
|
frameList && setSelectedFrame(frameList[0]);
|
|
40910
40906
|
lensList && setSelectedLens(lensList[0]);
|
|
40911
40907
|
}, [frameList, lensList]);
|
|
40912
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Main-Container", children: [
|
|
40913
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Checkout-Container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Checkout-box", children: [
|
|
40914
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Checkout-header", children: [
|
|
40915
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "frameName",
|
|
40916
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "lensPrice",
|
|
40908
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Main-Container", children: [
|
|
40909
|
+
!viewerOnly && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-Checkout-Container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-box", children: [
|
|
40910
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-header", children: [
|
|
40911
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-frameName", children: orgName }),
|
|
40912
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-lensPrice", children: `+ $${selectedLens == null ? void 0 : selectedLens.price}.00 USD` })
|
|
40917
40913
|
] }),
|
|
40918
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Checkout-body", children: [
|
|
40914
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-body", children: [
|
|
40919
40915
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40920
40916
|
"div",
|
|
40921
40917
|
{
|
|
40922
|
-
id: "Dropdown-Container",
|
|
40918
|
+
id: "Sprie-config-Dropdown-Container",
|
|
40923
40919
|
style: { display: frameList && lensList ? "flex" : "none" },
|
|
40924
40920
|
children: [
|
|
40925
40921
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
@@ -40946,34 +40942,50 @@ var __publicField = (obj, key, value) => {
|
|
|
40946
40942
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40947
40943
|
"button",
|
|
40948
40944
|
{
|
|
40949
|
-
id: "Checkout-button",
|
|
40945
|
+
id: "Sprie-config-Checkout-button",
|
|
40950
40946
|
onClick: () => {
|
|
40951
40947
|
if (selectedFrame && selectedLens) {
|
|
40952
|
-
const
|
|
40953
|
-
|
|
40948
|
+
const frameVariantId = selectedFrame.metadata.find(
|
|
40949
|
+
(item) => item.key == "variantId"
|
|
40950
|
+
);
|
|
40951
|
+
const lensVariantId = selectedLens.metadata.find(
|
|
40952
|
+
(item) => item.key == "variantId"
|
|
40953
|
+
);
|
|
40954
|
+
const frameId = frameVariantId ? frameVariantId.value : null;
|
|
40955
|
+
const lensId = lensVariantId ? lensVariantId.value : null;
|
|
40954
40956
|
const eventData = {
|
|
40955
|
-
|
|
40956
|
-
|
|
40957
|
+
frameIdentifier: frameId,
|
|
40958
|
+
lensIdentifier: lensId
|
|
40957
40959
|
};
|
|
40958
40960
|
customEvent.emitEvent("onAddToCart", eventData);
|
|
40961
|
+
if (frameId && lensId) {
|
|
40962
|
+
window.open(
|
|
40963
|
+
"https://dita.com/cart/" + frameId + ":1," + lensId + ":1",
|
|
40964
|
+
"_blank"
|
|
40965
|
+
);
|
|
40966
|
+
} else {
|
|
40967
|
+
console.log(
|
|
40968
|
+
"Either the selected frame or the lens has an invalid identifier."
|
|
40969
|
+
);
|
|
40970
|
+
}
|
|
40959
40971
|
}
|
|
40960
40972
|
},
|
|
40961
40973
|
type: "button",
|
|
40962
|
-
children: "
|
|
40974
|
+
children: "Add to cart"
|
|
40963
40975
|
}
|
|
40964
40976
|
)
|
|
40965
40977
|
] })
|
|
40966
40978
|
] }) }),
|
|
40967
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Viewer-Container", children: [
|
|
40968
|
-
modelLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "loadingFrame", children: [
|
|
40969
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "loader" }),
|
|
40979
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Viewer-Container", children: [
|
|
40980
|
+
modelLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-loadingFrame", children: [
|
|
40981
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-loader" }),
|
|
40970
40982
|
"."
|
|
40971
40983
|
] }),
|
|
40972
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { className: "webgl" })
|
|
40984
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { className: "sprie-config-webgl" })
|
|
40973
40985
|
] })
|
|
40974
40986
|
] });
|
|
40975
40987
|
}
|
|
40976
|
-
function App({ apiService, sku, events: events2 }) {
|
|
40988
|
+
function App({ apiService, sku, events: events2, viewerOnly = false }) {
|
|
40977
40989
|
const [settings, setSettings] = reactExports.useState(null);
|
|
40978
40990
|
const frameList = (settings == null ? void 0 : settings.frameList) || null;
|
|
40979
40991
|
const lensList = (settings == null ? void 0 : settings.lensList) || null;
|
|
@@ -40993,7 +41005,7 @@ var __publicField = (obj, key, value) => {
|
|
|
40993
41005
|
})();
|
|
40994
41006
|
}, [apiService, sku]);
|
|
40995
41007
|
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
40996
|
-
(!frameList || !lensList) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "loadingBox", children: "Loading..." }),
|
|
41008
|
+
(!frameList || !lensList) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-loadingBox", children: "Loading..." }),
|
|
40997
41009
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40998
41010
|
MainContainer,
|
|
40999
41011
|
{
|
|
@@ -41001,7 +41013,8 @@ var __publicField = (obj, key, value) => {
|
|
|
41001
41013
|
orgName,
|
|
41002
41014
|
apiService,
|
|
41003
41015
|
frameList,
|
|
41004
|
-
lensList
|
|
41016
|
+
lensList,
|
|
41017
|
+
viewerOnly
|
|
41005
41018
|
}
|
|
41006
41019
|
)
|
|
41007
41020
|
] });
|
|
@@ -48260,14 +48273,7 @@ var __publicField = (obj, key, value) => {
|
|
|
48260
48273
|
this.apiService = apiService;
|
|
48261
48274
|
this.events = events2;
|
|
48262
48275
|
}
|
|
48263
|
-
|
|
48264
|
-
* will loads all the ui. elments
|
|
48265
|
-
* dependencies
|
|
48266
|
-
* SKU,apiService,eventEmitter;
|
|
48267
|
-
*
|
|
48268
|
-
*
|
|
48269
|
-
*/
|
|
48270
|
-
loadBySKU(sku) {
|
|
48276
|
+
mount(sku, options) {
|
|
48271
48277
|
if (!this.targetElement) {
|
|
48272
48278
|
const targetDomId = "dita-3dconfig-element";
|
|
48273
48279
|
this.targetElement = client.createRoot(document.getElementById(targetDomId));
|
|
@@ -48275,7 +48281,8 @@ var __publicField = (obj, key, value) => {
|
|
|
48275
48281
|
this.targetElement.render(React.createElement(App, {
|
|
48276
48282
|
apiService: this.apiService,
|
|
48277
48283
|
events: this.events,
|
|
48278
|
-
sku
|
|
48284
|
+
sku,
|
|
48285
|
+
viewerOnly: options.viewerOnly
|
|
48279
48286
|
}));
|
|
48280
48287
|
}
|
|
48281
48288
|
unmount() {
|
|
@@ -48698,11 +48705,16 @@ var __publicField = (obj, key, value) => {
|
|
|
48698
48705
|
};
|
|
48699
48706
|
this.sdkService = new SDKServiceFactory(sdkProps);
|
|
48700
48707
|
this.sdkService.Init();
|
|
48701
|
-
console.log("SDK succesfully intialized:");
|
|
48702
|
-
console.log("Hi from https://sprie.io/");
|
|
48703
48708
|
}
|
|
48704
48709
|
load(sku) {
|
|
48705
|
-
this.uiService.
|
|
48710
|
+
this.uiService.mount(sku, {
|
|
48711
|
+
viewerOnly: false
|
|
48712
|
+
});
|
|
48713
|
+
}
|
|
48714
|
+
loadViewerOnly(sku) {
|
|
48715
|
+
this.uiService.mount(sku, {
|
|
48716
|
+
viewerOnly: true
|
|
48717
|
+
});
|
|
48706
48718
|
}
|
|
48707
48719
|
unload() {
|
|
48708
48720
|
this.uiService.unmount();
|