@perceptimagery/dita-configurator-staging 0.1.5004 → 0.1.6001
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 +114 -31
- 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\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}"));
|
|
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.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: 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,14 @@ 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.6001";
|
|
115
|
+
function modifyLensArr(arr, element) {
|
|
116
|
+
const index = arr.findIndex((e) => e["sku"] === element["sku"]);
|
|
117
|
+
if (index !== -1) {
|
|
118
|
+
return [element, ...arr.slice(0, index), ...arr.slice(index + 1)];
|
|
119
|
+
}
|
|
120
|
+
return arr;
|
|
121
|
+
}
|
|
115
122
|
class APIServiceFactory {
|
|
116
123
|
constructor(fetcher) {
|
|
117
124
|
__publicField(this, "isAuthenticated");
|
|
@@ -171,7 +178,12 @@ var __publicField = (obj, key, value) => {
|
|
|
171
178
|
async FetchCustomisationList() {
|
|
172
179
|
const url = `/v1/widget/list-customisation?search=type:Lens,usage:customizer&limit=50`;
|
|
173
180
|
const response = await this.fetcher.Get(url);
|
|
174
|
-
|
|
181
|
+
const defaultLensData = response.data.find((e) => e.sku === "lens-default");
|
|
182
|
+
const modifiedRes = {
|
|
183
|
+
...response,
|
|
184
|
+
data: modifyLensArr(response.data, defaultLensData)
|
|
185
|
+
};
|
|
186
|
+
return modifiedRes;
|
|
175
187
|
}
|
|
176
188
|
async DownloadMA(Avals) {
|
|
177
189
|
try {
|
|
@@ -39280,17 +39292,22 @@ var __publicField = (obj, key, value) => {
|
|
|
39280
39292
|
});
|
|
39281
39293
|
});
|
|
39282
39294
|
}
|
|
39283
|
-
async renderModel(modelContent, decryptionKey) {
|
|
39295
|
+
async renderModel(modelContent, renderAsIs, decryptionKey) {
|
|
39284
39296
|
const loader = new GLTFLoader();
|
|
39285
39297
|
if (modelContent) {
|
|
39286
39298
|
await this.loadEyewearFromGLTF(
|
|
39287
39299
|
loader,
|
|
39288
39300
|
modelContent,
|
|
39289
39301
|
this.renderer,
|
|
39302
|
+
renderAsIs,
|
|
39290
39303
|
decryptionKey
|
|
39291
39304
|
);
|
|
39292
39305
|
}
|
|
39293
39306
|
}
|
|
39307
|
+
updateScene(gltf) {
|
|
39308
|
+
gltf.scene.scale.set(7, 7, 7);
|
|
39309
|
+
gltf.scene.position.y -= 0.08;
|
|
39310
|
+
}
|
|
39294
39311
|
updateMaterials(gltf) {
|
|
39295
39312
|
gltf.scene.scale.set(7, 7, 7);
|
|
39296
39313
|
gltf.scene.position.y -= 0.08;
|
|
@@ -39403,7 +39420,7 @@ var __publicField = (obj, key, value) => {
|
|
|
39403
39420
|
}
|
|
39404
39421
|
});
|
|
39405
39422
|
}
|
|
39406
|
-
async loadEyewearFromGLTF(loader, modelFileUrl, renderer, decryptionKey) {
|
|
39423
|
+
async loadEyewearFromGLTF(loader, modelFileUrl, renderer, renderAsIs, decryptionKey) {
|
|
39407
39424
|
const manager = new LoadingManager();
|
|
39408
39425
|
const ktx2Loader = new KTX2Loader(manager).setTranscoderPath(
|
|
39409
39426
|
"https://unpkg.com/three@0.146.0/examples/js/libs/basis/"
|
|
@@ -39416,7 +39433,11 @@ var __publicField = (obj, key, value) => {
|
|
|
39416
39433
|
result2 = await loader.loadAsync(modelFileUrl);
|
|
39417
39434
|
} else {
|
|
39418
39435
|
result2 = await this.LoadEncryptedGlb(loader, modelFileUrl, password).then((finalRes) => {
|
|
39419
|
-
|
|
39436
|
+
if (renderAsIs) {
|
|
39437
|
+
this.updateScene(finalRes.result);
|
|
39438
|
+
} else {
|
|
39439
|
+
this.updateMaterials(finalRes.result);
|
|
39440
|
+
}
|
|
39420
39441
|
this.setupAndRenderScene(finalRes.result.scene);
|
|
39421
39442
|
});
|
|
39422
39443
|
}
|
|
@@ -39472,6 +39493,7 @@ var __publicField = (obj, key, value) => {
|
|
|
39472
39493
|
});
|
|
39473
39494
|
this.renderModel(
|
|
39474
39495
|
modelAsset.asset.cloudfrontUrl,
|
|
39496
|
+
true,
|
|
39475
39497
|
modelAsset.decryptionKey
|
|
39476
39498
|
);
|
|
39477
39499
|
frameContainer.innerHTML = selectedOption.innerHTML;
|
|
@@ -39609,6 +39631,7 @@ var __publicField = (obj, key, value) => {
|
|
|
39609
39631
|
}
|
|
39610
39632
|
setupLensMaterial(selectedLens) {
|
|
39611
39633
|
if (lensMaterial) {
|
|
39634
|
+
console.log(selectedLens);
|
|
39612
39635
|
if (selectedLens.direction == "u") {
|
|
39613
39636
|
lensMaterial.color = new Color(selectedLens.color);
|
|
39614
39637
|
lensMaterial.opacity = selectedLens.opacity;
|
|
@@ -39774,7 +39797,7 @@ var __publicField = (obj, key, value) => {
|
|
|
39774
39797
|
controls.update();
|
|
39775
39798
|
controls.enableDamping = true;
|
|
39776
39799
|
this.renderer.toneMapping = ACESFilmicToneMapping;
|
|
39777
|
-
this.renderer.toneMappingExposure = 1.
|
|
39800
|
+
this.renderer.toneMappingExposure = 1.2;
|
|
39778
39801
|
this.renderer.useLegacyLights = true;
|
|
39779
39802
|
const PLANE_WIDTH = 2.5;
|
|
39780
39803
|
const PLANE_HEIGHT = 2.5;
|
|
@@ -40044,7 +40067,7 @@ var __publicField = (obj, key, value) => {
|
|
|
40044
40067
|
});
|
|
40045
40068
|
const customRenderer2 = new CustomRenderer(this.apiService);
|
|
40046
40069
|
if (modelAsset) {
|
|
40047
|
-
customRenderer2.renderModel(modelAsset.asset.cloudfrontUrl, modelAsset.decryptionKey);
|
|
40070
|
+
customRenderer2.renderModel(modelAsset.asset.cloudfrontUrl, false, modelAsset.decryptionKey);
|
|
40048
40071
|
customRenderer2.setupDropdownAndListeners(assetResult);
|
|
40049
40072
|
customRenderer2.setupLensDefault(assetResult);
|
|
40050
40073
|
const list = await this.apiService.FetchCustomisationList();
|
|
@@ -40840,6 +40863,7 @@ var __publicField = (obj, key, value) => {
|
|
|
40840
40863
|
] });
|
|
40841
40864
|
}
|
|
40842
40865
|
let customRenderer = null;
|
|
40866
|
+
let currentFrame = null;
|
|
40843
40867
|
async function changeCustomRenderer({
|
|
40844
40868
|
orgId,
|
|
40845
40869
|
apiService,
|
|
@@ -40849,11 +40873,21 @@ var __publicField = (obj, key, value) => {
|
|
|
40849
40873
|
customRenderer = new CustomRenderer(apiService);
|
|
40850
40874
|
customRenderer.intialize();
|
|
40851
40875
|
setLoading(true);
|
|
40876
|
+
const frame = frameList[0];
|
|
40852
40877
|
const apiRes = await apiService.DownloadMA({
|
|
40853
40878
|
orgId,
|
|
40854
|
-
assetsId:
|
|
40879
|
+
assetsId: frame._id
|
|
40880
|
+
});
|
|
40881
|
+
const defaultLens = frame.customisation.length > 0 ? frame.customisation.find((x2) => x2.type == "Lens") : null;
|
|
40882
|
+
customRenderer.renderModel(apiRes.asset.cloudfrontUrl, defaultLens == null, apiRes.decryptionKey).then(() => {
|
|
40883
|
+
if (frame.customisation.length > 0 && defaultLens) {
|
|
40884
|
+
customRenderer.setupLensMaterial(
|
|
40885
|
+
defaultLens
|
|
40886
|
+
);
|
|
40887
|
+
}
|
|
40888
|
+
currentFrame = frame;
|
|
40889
|
+
setLoading(false);
|
|
40855
40890
|
});
|
|
40856
|
-
customRenderer.renderModel(apiRes.asset.cloudfrontUrl, apiRes.decryptionKey).then(() => setLoading(false));
|
|
40857
40891
|
}
|
|
40858
40892
|
function MainContainer({
|
|
40859
40893
|
orgName,
|
|
@@ -40870,24 +40904,58 @@ var __publicField = (obj, key, value) => {
|
|
|
40870
40904
|
const changeFrame = (frame) => {
|
|
40871
40905
|
if (customRenderer) {
|
|
40872
40906
|
(async () => {
|
|
40873
|
-
|
|
40874
|
-
|
|
40875
|
-
|
|
40876
|
-
|
|
40877
|
-
|
|
40878
|
-
|
|
40879
|
-
|
|
40880
|
-
|
|
40881
|
-
|
|
40882
|
-
|
|
40883
|
-
|
|
40907
|
+
if (selectedLens) {
|
|
40908
|
+
setModelLoading(true);
|
|
40909
|
+
const apiRes = await apiService.DownloadMA({
|
|
40910
|
+
orgId,
|
|
40911
|
+
assetsId: frame._id
|
|
40912
|
+
});
|
|
40913
|
+
const defaultCustomisation = frame.customisation.length > 0 ? frame.customisation.find((x2) => x2.type == "Lens") : null;
|
|
40914
|
+
const renderAsIs = defaultCustomisation == null && selectedLens.sku == "lens-default";
|
|
40915
|
+
customRenderer.renderModel(apiRes.asset.cloudfrontUrl, renderAsIs, apiRes.decryptionKey).then(async () => {
|
|
40916
|
+
if (selectedLens && selectedLens.sku == "lens-default") {
|
|
40917
|
+
if (defaultCustomisation) {
|
|
40918
|
+
customRenderer.setupLensMaterial(
|
|
40919
|
+
defaultCustomisation
|
|
40920
|
+
);
|
|
40921
|
+
} else {
|
|
40922
|
+
console.log("Special lens detected.");
|
|
40923
|
+
}
|
|
40924
|
+
} else if (selectedLens) {
|
|
40925
|
+
customRenderer.setupLensMaterial(
|
|
40926
|
+
selectedLens
|
|
40927
|
+
);
|
|
40928
|
+
}
|
|
40929
|
+
currentFrame = frame;
|
|
40930
|
+
setModelLoading(false);
|
|
40931
|
+
});
|
|
40932
|
+
}
|
|
40884
40933
|
})();
|
|
40885
40934
|
}
|
|
40886
40935
|
setSelectedFrame(frame);
|
|
40887
40936
|
};
|
|
40888
|
-
const
|
|
40889
|
-
if (customRenderer) {
|
|
40890
|
-
|
|
40937
|
+
const changeLens = async (lens) => {
|
|
40938
|
+
if (customRenderer && currentFrame && lens) {
|
|
40939
|
+
const defaultCustomisation = currentFrame.customisation.length > 0 ? currentFrame.customisation.find((x2) => x2.type == "Lens") : null;
|
|
40940
|
+
const renderAsIs = defaultCustomisation == null && lens.sku == "lens-default";
|
|
40941
|
+
if (lens.sku == "lens-default") {
|
|
40942
|
+
if (defaultCustomisation) {
|
|
40943
|
+
customRenderer.setupLensMaterial(defaultCustomisation);
|
|
40944
|
+
} else {
|
|
40945
|
+
setModelLoading(true);
|
|
40946
|
+
if (currentFrame) {
|
|
40947
|
+
const apiRes = await apiService.DownloadMA({
|
|
40948
|
+
orgId,
|
|
40949
|
+
assetsId: currentFrame._id
|
|
40950
|
+
});
|
|
40951
|
+
customRenderer.renderModel(apiRes.asset.cloudfrontUrl, renderAsIs, apiRes.decryptionKey).then(() => {
|
|
40952
|
+
setModelLoading(false);
|
|
40953
|
+
});
|
|
40954
|
+
}
|
|
40955
|
+
}
|
|
40956
|
+
} else {
|
|
40957
|
+
customRenderer.setupLensMaterial(lens);
|
|
40958
|
+
}
|
|
40891
40959
|
}
|
|
40892
40960
|
setSelectedLens(lens);
|
|
40893
40961
|
};
|
|
@@ -40909,7 +40977,7 @@ var __publicField = (obj, key, value) => {
|
|
|
40909
40977
|
!viewerOnly && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-Checkout-Container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-box", children: [
|
|
40910
40978
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-header", children: [
|
|
40911
40979
|
/* @__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` })
|
|
40980
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-lensPrice", children: `${(selectedLens == null ? void 0 : selectedLens.price) ? `+ $${selectedLens == null ? void 0 : selectedLens.price}.00 USD` : ""}` })
|
|
40913
40981
|
] }),
|
|
40914
40982
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-body", children: [
|
|
40915
40983
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
@@ -40933,7 +41001,7 @@ var __publicField = (obj, key, value) => {
|
|
|
40933
41001
|
label: "STEP 2 : SELECT LENS COLOUR",
|
|
40934
41002
|
lensData: lensList,
|
|
40935
41003
|
selectedLens,
|
|
40936
|
-
changeLensMaterial
|
|
41004
|
+
changeLensMaterial: changeLens
|
|
40937
41005
|
}
|
|
40938
41006
|
)
|
|
40939
41007
|
]
|
|
@@ -48270,12 +48338,19 @@ var __publicField = (obj, key, value) => {
|
|
|
48270
48338
|
__publicField(this, "targetElement");
|
|
48271
48339
|
__publicField(this, "apiService");
|
|
48272
48340
|
__publicField(this, "events");
|
|
48341
|
+
__publicField(this, "htmlTarget");
|
|
48273
48342
|
this.apiService = apiService;
|
|
48274
48343
|
this.events = events2;
|
|
48275
48344
|
}
|
|
48276
48345
|
mount(sku, options) {
|
|
48277
48346
|
if (!this.targetElement) {
|
|
48278
|
-
const targetDomId = "dita-3dconfig-element";
|
|
48347
|
+
const targetDomId = options.customId ?? "dita-3dconfig-element";
|
|
48348
|
+
const target = document.getElementById(targetDomId);
|
|
48349
|
+
if (!target)
|
|
48350
|
+
throw new Error(`Element not found with id => '${targetDomId}' `);
|
|
48351
|
+
this.htmlTarget = target;
|
|
48352
|
+
this.htmlTarget.style.height = "100%";
|
|
48353
|
+
this.htmlTarget.style.width = "100%";
|
|
48279
48354
|
this.targetElement = client.createRoot(document.getElementById(targetDomId));
|
|
48280
48355
|
}
|
|
48281
48356
|
this.targetElement.render(React.createElement(App, {
|
|
@@ -48289,6 +48364,10 @@ var __publicField = (obj, key, value) => {
|
|
|
48289
48364
|
if (this.targetElement) {
|
|
48290
48365
|
this.targetElement.unmount();
|
|
48291
48366
|
this.targetElement = void 0;
|
|
48367
|
+
if (this.htmlTarget) {
|
|
48368
|
+
this.htmlTarget.style.height = "0px";
|
|
48369
|
+
this.htmlTarget.style.width = "auto";
|
|
48370
|
+
}
|
|
48292
48371
|
}
|
|
48293
48372
|
}
|
|
48294
48373
|
}
|
|
@@ -48706,14 +48785,18 @@ var __publicField = (obj, key, value) => {
|
|
|
48706
48785
|
this.sdkService = new SDKServiceFactory(sdkProps);
|
|
48707
48786
|
this.sdkService.Init();
|
|
48708
48787
|
}
|
|
48709
|
-
load(sku) {
|
|
48788
|
+
load(sku, customId) {
|
|
48789
|
+
this.uiService.unmount();
|
|
48710
48790
|
this.uiService.mount(sku, {
|
|
48711
|
-
viewerOnly: false
|
|
48791
|
+
viewerOnly: false,
|
|
48792
|
+
customId
|
|
48712
48793
|
});
|
|
48713
48794
|
}
|
|
48714
|
-
loadViewerOnly(sku) {
|
|
48795
|
+
loadViewerOnly(sku, customId) {
|
|
48796
|
+
this.uiService.unmount();
|
|
48715
48797
|
this.uiService.mount(sku, {
|
|
48716
|
-
viewerOnly: true
|
|
48798
|
+
viewerOnly: true,
|
|
48799
|
+
customId
|
|
48717
48800
|
});
|
|
48718
48801
|
}
|
|
48719
48802
|
unload() {
|