@perceptimagery/dita-configurator-staging 0.1.5001 → 0.1.5004
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 +78 -67
- 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.5004";
|
|
115
115
|
class APIServiceFactory {
|
|
116
116
|
constructor(fetcher) {
|
|
117
117
|
__publicField(this, "isAuthenticated");
|
|
@@ -39247,8 +39247,8 @@ var __publicField = (obj, key, value) => {
|
|
|
39247
39247
|
this.scene = new Scene();
|
|
39248
39248
|
}
|
|
39249
39249
|
async intialize() {
|
|
39250
|
-
const newWidth = document.querySelector("canvas.webgl").clientWidth;
|
|
39251
|
-
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;
|
|
39252
39252
|
this.camera = new PerspectiveCamera(
|
|
39253
39253
|
12,
|
|
39254
39254
|
newWidth / newHeight,
|
|
@@ -39256,7 +39256,7 @@ var __publicField = (obj, key, value) => {
|
|
|
39256
39256
|
1e4
|
|
39257
39257
|
);
|
|
39258
39258
|
this.camera.lookAt(0, 0, 0);
|
|
39259
|
-
this.canvas = document.querySelector("canvas.webgl");
|
|
39259
|
+
this.canvas = document.querySelector("canvas.sprie-config-webgl");
|
|
39260
39260
|
this.renderer = new WebGLRenderer({
|
|
39261
39261
|
canvas: this.canvas,
|
|
39262
39262
|
alpha: true,
|
|
@@ -39429,7 +39429,7 @@ var __publicField = (obj, key, value) => {
|
|
|
39429
39429
|
const frameElement = document.getElementById("frameName");
|
|
39430
39430
|
frameElement.textContent = response.group.name;
|
|
39431
39431
|
if (Array.isArray(response.variants)) {
|
|
39432
|
-
response.variants.forEach((frame
|
|
39432
|
+
response.variants.forEach((frame) => {
|
|
39433
39433
|
const option = document.createElement("li");
|
|
39434
39434
|
const optionContent = document.createElement("div");
|
|
39435
39435
|
optionContent.id = "FrameDetailsContainer";
|
|
@@ -39491,7 +39491,6 @@ var __publicField = (obj, key, value) => {
|
|
|
39491
39491
|
async setupLensDropdownAndListeners(response) {
|
|
39492
39492
|
const selectDropdown = document.getElementById("Lensdropdown");
|
|
39493
39493
|
const button = document.getElementById("LensdropdownBtn");
|
|
39494
|
-
document.getElementById("LensContainer");
|
|
39495
39494
|
if (Array.isArray(response.data)) {
|
|
39496
39495
|
response.data.forEach((lens) => {
|
|
39497
39496
|
if (lens.name != "CLEAR") {
|
|
@@ -40653,28 +40652,28 @@ var __publicField = (obj, key, value) => {
|
|
|
40653
40652
|
document.removeEventListener("click", handleClickOutside);
|
|
40654
40653
|
};
|
|
40655
40654
|
}, []);
|
|
40656
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className:
|
|
40657
|
-
/* @__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 }),
|
|
40658
40657
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40659
40658
|
"div",
|
|
40660
40659
|
{
|
|
40661
|
-
className: `select-box ${isOpen ? "open" : ""}`,
|
|
40660
|
+
className: `sprie-config-select-box ${isOpen ? "sprie-config-open" : ""}`,
|
|
40662
40661
|
onClick: handleToggleDropdown,
|
|
40663
40662
|
children: [
|
|
40664
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className:
|
|
40665
|
-
/* @__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(
|
|
40666
40665
|
"img",
|
|
40667
40666
|
{
|
|
40668
40667
|
src: selectedFrame && selectedFrame.variantImage,
|
|
40669
40668
|
alt: "variant-img",
|
|
40670
|
-
className:
|
|
40669
|
+
className: `sprie-config-variantImg`,
|
|
40671
40670
|
width: 50,
|
|
40672
40671
|
height: 42
|
|
40673
40672
|
}
|
|
40674
40673
|
) }),
|
|
40675
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className:
|
|
40676
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className:
|
|
40677
|
-
/* @__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 })
|
|
40678
40677
|
] })
|
|
40679
40678
|
] }),
|
|
40680
40679
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
@@ -40682,31 +40681,31 @@ var __publicField = (obj, key, value) => {
|
|
|
40682
40681
|
{
|
|
40683
40682
|
src: dropdownIcon,
|
|
40684
40683
|
alt: "dropdown-icon",
|
|
40685
|
-
className: `arrow ${isOpen ? "up" : ""}`
|
|
40684
|
+
className: `sprie-config-arrow ${isOpen ? "sprie-config-up" : ""}`
|
|
40686
40685
|
}
|
|
40687
40686
|
)
|
|
40688
40687
|
]
|
|
40689
40688
|
}
|
|
40690
40689
|
),
|
|
40691
|
-
/* @__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(
|
|
40692
40691
|
"li",
|
|
40693
40692
|
{
|
|
40694
40693
|
onClick: () => handleSelectOption(option),
|
|
40695
|
-
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" : ""}`,
|
|
40696
40695
|
children: [
|
|
40697
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className:
|
|
40696
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sprie-config-variantImgBox`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40698
40697
|
"img",
|
|
40699
40698
|
{
|
|
40700
40699
|
src: option.variantImage,
|
|
40701
40700
|
alt: "variant-img",
|
|
40702
|
-
className:
|
|
40701
|
+
className: `sprie-config-variantImg`,
|
|
40703
40702
|
width: 50,
|
|
40704
40703
|
height: 42
|
|
40705
40704
|
}
|
|
40706
40705
|
) }),
|
|
40707
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className:
|
|
40708
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className:
|
|
40709
|
-
/* @__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 })
|
|
40710
40709
|
] })
|
|
40711
40710
|
]
|
|
40712
40711
|
},
|
|
@@ -40767,29 +40766,29 @@ var __publicField = (obj, key, value) => {
|
|
|
40767
40766
|
return "left";
|
|
40768
40767
|
}
|
|
40769
40768
|
};
|
|
40770
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "dropdown-wrapper", ref: dropdownRef, children: [
|
|
40771
|
-
/* @__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 }),
|
|
40772
40771
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40773
40772
|
"div",
|
|
40774
40773
|
{
|
|
40775
|
-
className: `select-box ${isMobileView ? "open" : `${isOpen ? "open" : ""}`}`,
|
|
40774
|
+
className: `sprie-config-select-box ${isMobileView ? "sprie-config-open" : `${isOpen ? "sprie-config-open" : ""}`}`,
|
|
40776
40775
|
onClick: handleToggleDropdown,
|
|
40777
40776
|
style: {
|
|
40778
40777
|
background: isMobileView ? "transparent" : "#ffffff",
|
|
40779
40778
|
padding: isMobileView ? "0.2rem 1.25rem .7rem 0.1rem" : "1rem 1.25rem"
|
|
40780
40779
|
},
|
|
40781
40780
|
children: [
|
|
40782
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "selected-lens", children: [
|
|
40783
|
-
/* @__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(
|
|
40784
40783
|
"img",
|
|
40785
40784
|
{
|
|
40786
40785
|
src: selectedLens && selectedLens.thumbnail,
|
|
40787
40786
|
width: 50
|
|
40788
40787
|
}
|
|
40789
40788
|
) }),
|
|
40790
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lens-details", children: [
|
|
40791
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "lensName", children: selectedLens && selectedLens.name }),
|
|
40792
|
-
/* @__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 })
|
|
40793
40792
|
] })
|
|
40794
40793
|
] }),
|
|
40795
40794
|
!isMobileView && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
@@ -40797,7 +40796,7 @@ var __publicField = (obj, key, value) => {
|
|
|
40797
40796
|
{
|
|
40798
40797
|
src: dropdownIcon,
|
|
40799
40798
|
alt: "dropdown-icon",
|
|
40800
|
-
className: `arrow ${isOpen ? "up" : ""}`
|
|
40799
|
+
className: `sprie-config-arrow ${isOpen ? "sprie-config-up" : ""}`
|
|
40801
40800
|
}
|
|
40802
40801
|
)
|
|
40803
40802
|
]
|
|
@@ -40806,14 +40805,14 @@ var __publicField = (obj, key, value) => {
|
|
|
40806
40805
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40807
40806
|
"ul",
|
|
40808
40807
|
{
|
|
40809
|
-
className: `lens-dropdown-options ${isMobileView ? "open" : `${isOpen ? "open" : ""}`}`,
|
|
40808
|
+
className: `sprie-config-lens-dropdown-options ${isMobileView ? "sprie-config-open" : `${isOpen ? "sprie-config-open" : ""}`}`,
|
|
40810
40809
|
style: { marginLeft: isMobileView ? ".1rem" : "0" },
|
|
40811
40810
|
children: lensData && lensData.map((option, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40812
40811
|
"li",
|
|
40813
40812
|
{
|
|
40814
|
-
className: selectedLens && selectedLens.name === option.name ? "selected" : "",
|
|
40813
|
+
className: selectedLens && selectedLens.name === option.name ? "sprie-config-selected" : "",
|
|
40815
40814
|
children: [
|
|
40816
|
-
/* @__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(
|
|
40817
40816
|
"img",
|
|
40818
40817
|
{
|
|
40819
40818
|
src: option.thumbnail,
|
|
@@ -40826,7 +40825,7 @@ var __publicField = (obj, key, value) => {
|
|
|
40826
40825
|
hoveredOption === option && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40827
40826
|
"div",
|
|
40828
40827
|
{
|
|
40829
|
-
className: `tooltip ${calculateTooltipPosition(
|
|
40828
|
+
className: `sprie-config-tooltip ${calculateTooltipPosition(
|
|
40830
40829
|
index
|
|
40831
40830
|
)} ${calculateTooltipAlignment(index)}`,
|
|
40832
40831
|
children: option.metadata[0].value
|
|
@@ -40861,7 +40860,8 @@ var __publicField = (obj, key, value) => {
|
|
|
40861
40860
|
customEvent,
|
|
40862
40861
|
apiService,
|
|
40863
40862
|
frameList,
|
|
40864
|
-
lensList
|
|
40863
|
+
lensList,
|
|
40864
|
+
viewerOnly
|
|
40865
40865
|
}) {
|
|
40866
40866
|
const [selectedFrame, setSelectedFrame] = reactExports.useState();
|
|
40867
40867
|
const [selectedLens, setSelectedLens] = reactExports.useState();
|
|
@@ -40905,17 +40905,17 @@ var __publicField = (obj, key, value) => {
|
|
|
40905
40905
|
frameList && setSelectedFrame(frameList[0]);
|
|
40906
40906
|
lensList && setSelectedLens(lensList[0]);
|
|
40907
40907
|
}, [frameList, lensList]);
|
|
40908
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Main-Container", children: [
|
|
40909
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Checkout-Container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Checkout-box", children: [
|
|
40910
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Checkout-header", children: [
|
|
40911
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "frameName",
|
|
40912
|
-
/* @__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` })
|
|
40913
40913
|
] }),
|
|
40914
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Checkout-body", children: [
|
|
40914
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-body", children: [
|
|
40915
40915
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40916
40916
|
"div",
|
|
40917
40917
|
{
|
|
40918
|
-
id: "Dropdown-Container",
|
|
40918
|
+
id: "Sprie-config-Dropdown-Container",
|
|
40919
40919
|
style: { display: frameList && lensList ? "flex" : "none" },
|
|
40920
40920
|
children: [
|
|
40921
40921
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
@@ -40942,11 +40942,15 @@ var __publicField = (obj, key, value) => {
|
|
|
40942
40942
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
40943
40943
|
"button",
|
|
40944
40944
|
{
|
|
40945
|
-
id: "Checkout-button",
|
|
40945
|
+
id: "Sprie-config-Checkout-button",
|
|
40946
40946
|
onClick: () => {
|
|
40947
40947
|
if (selectedFrame && selectedLens) {
|
|
40948
|
-
const frameVariantId = selectedFrame.metadata.find(
|
|
40949
|
-
|
|
40948
|
+
const frameVariantId = selectedFrame.metadata.find(
|
|
40949
|
+
(item) => item.key == "variantId"
|
|
40950
|
+
);
|
|
40951
|
+
const lensVariantId = selectedLens.metadata.find(
|
|
40952
|
+
(item) => item.key == "variantId"
|
|
40953
|
+
);
|
|
40950
40954
|
const frameId = frameVariantId ? frameVariantId.value : null;
|
|
40951
40955
|
const lensId = lensVariantId ? lensVariantId.value : null;
|
|
40952
40956
|
const eventData = {
|
|
@@ -40955,9 +40959,14 @@ var __publicField = (obj, key, value) => {
|
|
|
40955
40959
|
};
|
|
40956
40960
|
customEvent.emitEvent("onAddToCart", eventData);
|
|
40957
40961
|
if (frameId && lensId) {
|
|
40958
|
-
window.open(
|
|
40962
|
+
window.open(
|
|
40963
|
+
"https://dita.com/cart/" + frameId + ":1," + lensId + ":1",
|
|
40964
|
+
"_self"
|
|
40965
|
+
);
|
|
40959
40966
|
} else {
|
|
40960
|
-
console.log(
|
|
40967
|
+
console.log(
|
|
40968
|
+
"Either the selected frame or the lens has an invalid identifier."
|
|
40969
|
+
);
|
|
40961
40970
|
}
|
|
40962
40971
|
}
|
|
40963
40972
|
},
|
|
@@ -40967,16 +40976,16 @@ var __publicField = (obj, key, value) => {
|
|
|
40967
40976
|
)
|
|
40968
40977
|
] })
|
|
40969
40978
|
] }) }),
|
|
40970
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Viewer-Container", children: [
|
|
40971
|
-
modelLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "loadingFrame", children: [
|
|
40972
|
-
/* @__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" }),
|
|
40973
40982
|
"."
|
|
40974
40983
|
] }),
|
|
40975
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { className: "webgl" })
|
|
40984
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { className: "sprie-config-webgl" })
|
|
40976
40985
|
] })
|
|
40977
40986
|
] });
|
|
40978
40987
|
}
|
|
40979
|
-
function App({ apiService, sku, events: events2 }) {
|
|
40988
|
+
function App({ apiService, sku, events: events2, viewerOnly = false }) {
|
|
40980
40989
|
const [settings, setSettings] = reactExports.useState(null);
|
|
40981
40990
|
const frameList = (settings == null ? void 0 : settings.frameList) || null;
|
|
40982
40991
|
const lensList = (settings == null ? void 0 : settings.lensList) || null;
|
|
@@ -40996,7 +41005,7 @@ var __publicField = (obj, key, value) => {
|
|
|
40996
41005
|
})();
|
|
40997
41006
|
}, [apiService, sku]);
|
|
40998
41007
|
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
40999
|
-
(!frameList || !lensList) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "loadingBox", children: "Loading..." }),
|
|
41008
|
+
(!frameList || !lensList) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-loadingBox", children: "Loading..." }),
|
|
41000
41009
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
41001
41010
|
MainContainer,
|
|
41002
41011
|
{
|
|
@@ -41004,7 +41013,8 @@ var __publicField = (obj, key, value) => {
|
|
|
41004
41013
|
orgName,
|
|
41005
41014
|
apiService,
|
|
41006
41015
|
frameList,
|
|
41007
|
-
lensList
|
|
41016
|
+
lensList,
|
|
41017
|
+
viewerOnly
|
|
41008
41018
|
}
|
|
41009
41019
|
)
|
|
41010
41020
|
] });
|
|
@@ -48263,14 +48273,7 @@ var __publicField = (obj, key, value) => {
|
|
|
48263
48273
|
this.apiService = apiService;
|
|
48264
48274
|
this.events = events2;
|
|
48265
48275
|
}
|
|
48266
|
-
|
|
48267
|
-
* will loads all the ui. elments
|
|
48268
|
-
* dependencies
|
|
48269
|
-
* SKU,apiService,eventEmitter;
|
|
48270
|
-
*
|
|
48271
|
-
*
|
|
48272
|
-
*/
|
|
48273
|
-
loadBySKU(sku) {
|
|
48276
|
+
mount(sku, options) {
|
|
48274
48277
|
if (!this.targetElement) {
|
|
48275
48278
|
const targetDomId = "dita-3dconfig-element";
|
|
48276
48279
|
this.targetElement = client.createRoot(document.getElementById(targetDomId));
|
|
@@ -48278,7 +48281,8 @@ var __publicField = (obj, key, value) => {
|
|
|
48278
48281
|
this.targetElement.render(React.createElement(App, {
|
|
48279
48282
|
apiService: this.apiService,
|
|
48280
48283
|
events: this.events,
|
|
48281
|
-
sku
|
|
48284
|
+
sku,
|
|
48285
|
+
viewerOnly: options.viewerOnly
|
|
48282
48286
|
}));
|
|
48283
48287
|
}
|
|
48284
48288
|
unmount() {
|
|
@@ -48703,7 +48707,14 @@ var __publicField = (obj, key, value) => {
|
|
|
48703
48707
|
this.sdkService.Init();
|
|
48704
48708
|
}
|
|
48705
48709
|
load(sku) {
|
|
48706
|
-
this.uiService.
|
|
48710
|
+
this.uiService.mount(sku, {
|
|
48711
|
+
viewerOnly: false
|
|
48712
|
+
});
|
|
48713
|
+
}
|
|
48714
|
+
loadViewerOnly(sku) {
|
|
48715
|
+
this.uiService.mount(sku, {
|
|
48716
|
+
viewerOnly: true
|
|
48717
|
+
});
|
|
48707
48718
|
}
|
|
48708
48719
|
unload() {
|
|
48709
48720
|
this.uiService.unmount();
|