@perceptimagery/dita-configurator-staging 0.1.4002 → 0.1.5000

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.
Files changed (3) hide show
  1. package/README.md +3 -5
  2. package/dist/index.js +45 -25
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,14 +1,12 @@
1
- # Dita-configurator -preview
1
+ # Dita-configurator
2
2
 
3
- | An embeddable package for `Previewing | and changing.` SKUs
3
+ | An embeddable package for Dita's 3D configurator
4
4
 
5
- ## Documentation
6
-
7
- <https://docs.sprie.io/docs/?/>
8
5
 
9
6
  ## Usage
10
7
 
11
8
  Prod: `https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator@latest`
9
+
12
10
  Dev : `https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator-staging@latest`
13
11
 
14
12
  ```HTML
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}\n\n#Viewer-Container .webgl {\n /* border: 1px solid #000; */\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/* 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 height: auto;\n}\n\n.colorBox {\n width: 3.4rem;\n height: 2.5rem;\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 min-width: 3.5rem;\n height: 2.625rem;\n padding: 0.25rem;\n}\n\n.lens-dropdown-options li .li-element {\n width: 100%;\n height: 100%;\n z-index: 10;\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* {\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}"));
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.4002";
114
+ const version = "0.1.5000";
115
115
  class APIServiceFactory {
116
116
  constructor(fetcher) {
117
117
  __publicField(this, "isAuthenticated");
@@ -170,7 +170,7 @@ var __publicField = (obj, key, value) => {
170
170
  }
171
171
  // Lens-list call
172
172
  async FetchCustomisationList() {
173
- const url = `/v1/widget/list-customisation?search=type:Lens&limit=50`;
173
+ const url = `/v1/widget/list-customisation?search=type:Lens,usage:customizer&limit=50`;
174
174
  const response = await this.fetcher.Get(url);
175
175
  return response;
176
176
  }
@@ -40784,16 +40784,16 @@ var __publicField = (obj, key, value) => {
40784
40784
  },
40785
40785
  children: [
40786
40786
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "selected-lens", children: [
40787
- /* @__PURE__ */ jsxRuntimeExports.jsx(
40788
- "div",
40787
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "colorBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
40788
+ "img",
40789
40789
  {
40790
- className: "colorBox",
40791
- style: { backgroundColor: selectedLens && selectedLens.color }
40790
+ src: selectedLens && selectedLens.thumbnail,
40791
+ width: 50
40792
40792
  }
40793
- ),
40793
+ ) }),
40794
40794
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lens-details", children: [
40795
40795
  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "lensName", children: selectedLens && selectedLens.name }),
40796
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "lensColor", children: selectedLens && selectedLens.sku })
40796
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "lensColor", children: selectedLens && selectedLens.metadata[0].value })
40797
40797
  ] })
40798
40798
  ] }),
40799
40799
  !isMobileView && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -40817,16 +40817,16 @@ var __publicField = (obj, key, value) => {
40817
40817
  {
40818
40818
  className: selectedLens && selectedLens.name === option.name ? "selected" : "",
40819
40819
  children: [
40820
- /* @__PURE__ */ jsxRuntimeExports.jsx(
40821
- "div",
40820
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "li-element", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
40821
+ "img",
40822
40822
  {
40823
- className: "li-element",
40824
- style: { backgroundColor: option.color },
40823
+ src: option.thumbnail,
40824
+ width: 50,
40825
40825
  onClick: () => handleSelectOption(option),
40826
40826
  onMouseEnter: () => handleHoverOption(option),
40827
40827
  onMouseLeave: () => setHoveredOption(null)
40828
40828
  }
40829
- ),
40829
+ ) }),
40830
40830
  hoveredOption === option && /* @__PURE__ */ jsxRuntimeExports.jsx(
40831
40831
  "div",
40832
40832
  {
@@ -40848,15 +40848,17 @@ var __publicField = (obj, key, value) => {
40848
40848
  async function changeCustomRenderer({
40849
40849
  orgId,
40850
40850
  apiService,
40851
- frameList
40851
+ frameList,
40852
+ setLoading
40852
40853
  }) {
40853
40854
  customRenderer = new CustomRenderer(apiService);
40854
40855
  customRenderer.intialize();
40856
+ setLoading(true);
40855
40857
  const apiRes = await apiService.DownloadMA({
40856
40858
  orgId,
40857
40859
  assetsId: frameList[0]._id
40858
40860
  });
40859
- customRenderer.renderModel(apiRes.asset.cloudfrontUrl, apiRes.decryptionKey);
40861
+ customRenderer.renderModel(apiRes.asset.cloudfrontUrl, apiRes.decryptionKey).then(() => setLoading(false));
40860
40862
  }
40861
40863
  function MainContainer({
40862
40864
  orgName,
@@ -40867,19 +40869,22 @@ var __publicField = (obj, key, value) => {
40867
40869
  }) {
40868
40870
  const [selectedFrame, setSelectedFrame] = reactExports.useState();
40869
40871
  const [selectedLens, setSelectedLens] = reactExports.useState();
40872
+ const [modelLoading, setModelLoading] = reactExports.useState(false);
40870
40873
  const orgId = apiService.fetcher.LoadConfig().ORGID;
40871
40874
  const changeFrame = (frame) => {
40872
40875
  if (customRenderer) {
40873
40876
  (async () => {
40877
+ setModelLoading(true);
40874
40878
  const apiRes = await apiService.DownloadMA({
40875
40879
  orgId,
40876
40880
  assetsId: frame._id
40877
40881
  });
40878
- customRenderer.renderModel(apiRes.asset.cloudfrontUrl, apiRes.decryptionKey).then(
40879
- () => customRenderer.setupLensMaterial(
40882
+ customRenderer.renderModel(apiRes.asset.cloudfrontUrl, apiRes.decryptionKey).then(() => {
40883
+ setModelLoading(false);
40884
+ customRenderer.setupLensMaterial(
40880
40885
  selectedLens
40881
- )
40882
- );
40886
+ );
40887
+ });
40883
40888
  })();
40884
40889
  }
40885
40890
  setSelectedFrame(frame);
@@ -40892,7 +40897,12 @@ var __publicField = (obj, key, value) => {
40892
40897
  };
40893
40898
  reactExports.useEffect(() => {
40894
40899
  if (apiService && frameList && orgId) {
40895
- changeCustomRenderer({ apiService, frameList, orgId });
40900
+ changeCustomRenderer({
40901
+ apiService,
40902
+ frameList,
40903
+ orgId,
40904
+ setLoading: setModelLoading
40905
+ });
40896
40906
  }
40897
40907
  }, [apiService, frameList, orgId]);
40898
40908
  reactExports.useEffect(() => {
@@ -40939,18 +40949,28 @@ var __publicField = (obj, key, value) => {
40939
40949
  id: "Checkout-button",
40940
40950
  onClick: () => {
40941
40951
  if (selectedFrame && selectedLens) {
40942
- customEvent.emitEvent("onAddToCart", {
40952
+ const baseCurve = selectedFrame.metadata.find((item) => item.key == "baseCurve");
40953
+ const lensSkuWithBase = baseCurve ? selectedLens.sku + "-" + baseCurve.value : selectedLens.sku;
40954
+ const eventData = {
40943
40955
  frameSku: selectedFrame.sku,
40944
- lensSku: selectedLens.sku
40945
- });
40956
+ lensSku: lensSkuWithBase
40957
+ };
40958
+ customEvent.emitEvent("onAddToCart", eventData);
40946
40959
  }
40947
40960
  },
40961
+ type: "button",
40948
40962
  children: "Finalise & Add to cart"
40949
40963
  }
40950
40964
  )
40951
40965
  ] })
40952
40966
  ] }) }),
40953
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Viewer-Container", children: /* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { className: "webgl" }) })
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" }),
40970
+ "."
40971
+ ] }),
40972
+ /* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { className: "webgl" })
40973
+ ] })
40954
40974
  ] });
40955
40975
  }
40956
40976
  function App({ apiService, sku, events: events2 }) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@perceptimagery/dita-configurator-staging",
3
- "version": "0.1.4002",
3
+ "version": "0.1.5000",
4
4
  "author": "Abhishek Deb <abhishek@perceptimagery.com>",
5
5
  "license": "UNLICENSED",
6
6
  "main": "dist/index.js",