Merge pull request #134 from Dynamsoft/_dev

position the element based on its center position.

Author: Cube

4.use-case/3.show-result-texts-on-the-video.html

@@ -16,23 +16,24 @@
       Dynamsoft Barcode Reader Sample - Show result texts on the video
     </title>
     <style>
-      .bubble-box{
+      .bubble-box-container {
         position: absolute;
+        display: flex;
+        justify-content: center;
+      }
+      .bubble-box-container>.bubble-box{
+        position: absolute;
+        width: max-content;
+        max-width: 20rem;
         background: white;
         border-radius: 4px; 
         padding: 4px;
         word-break: break-all;
         word-wrap: break-word;
         box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.2);
+        transform: translateY(calc(-100% - 4px));
       }
-      .bubble-box.adaptive-width{ /*complicated*/
-        max-width: 20rem; /* change to value you like */
-      }
-      .bubble-box.fixed-width{ /*easy*/
-        width: 20rem; /* change to value you like */
-        transform: translate(-50%, calc(-100% - 4px));
-      }
-      .bubble-box::after{
+      .bubble-box-container>.bubble-box::after{
         content: '';
         position: absolute;
         bottom: -8px;
@@ -108,8 +109,12 @@
                 y: Math.max(l.y1, l.y2, l.y3, l.y4),
               };
 
-              divInf = document.createElement("div");
-              divInf.classList.add('bubble-box', 'adaptive-width'); // or 'fixed-width'
+              const divInfContainer = document.createElement("div");
+              divInfContainer.className = "bubble-box-container";
+              const divInf = document.createElement("div");
+              divInf.className = "bubble-box";
+              divInf.innerText = result.barcodeText;
+              divInfContainer.append(divInf);
               const bodyStyle = getComputedStyle(document.body);
               if (bodyStyle.position === "static") {
                 /**
@@ -119,19 +124,8 @@
                 const pageP1 = scanner.convertToPageCoordinates(p1);
                 const pageP2 = scanner.convertToPageCoordinates(p2);
                 const pageMidX = (pageP1.x + pageP2.x) / 2;
-                divInf.style.top = `${pageP1.y}px`;
-                if(divInf.classList.contains('fixed-width')){
-                  // fixed-width, easy
-                  divInf.style.left = `${pageMidX}px`;
-                }else if(pageMidX < document.documentElement.clientWidth / 2){
-                  // adaptive-width, near left
-                  divInf.style.left = `${pageMidX}px`;
-                  divInf.style.transform = `translate(-50%, calc(-100% - 4px))`;
-                }else{
-                  // adaptive-width, near right
-                  divInf.style.right = `${document.documentElement.clientWidth - pageMidX}px`;
-                  divInf.style.transform = `translate(50%, calc(-100% - 4px))`;
-                }
+                divInfContainer.style.top = `${pageP1.y}px`;
+                divInfContainer.style.left = `${pageMidX}px`;
               } else { // if you set body `position` as `relative`, `absolute`, and so on, things can get complicated.
                 /**
                  * 'convertToClientCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the viewport.
@@ -141,22 +135,10 @@
                 const clientP2 = scanner.convertToClientCoordinates(p2);
                 const clientMidX = (clientP1.x + clientP2.x) / 2;
                 const bodyRect = document.body.getBoundingClientRect();
-                divInf.style.top = `${clientP1.y - bodyRect.top - parseFloat(bodyStyle.borderTopWidth)}px`;
-                if(divInf.classList.contains('fixed-width')){
-                  // fixed-width, easy
-                  divInf.style.left = `${clientMidX - bodyRect.left - parseFloat(bodyStyle.borderLeftWidth)}px`;
-                }else if(clientMidX < bodyRect.left + bodyRect.width / 2){
-                  // adaptive-width, near left
-                  divInf.style.left = `${clientMidX - bodyRect.left - parseFloat(bodyStyle.borderLeftWidth)}px`;
-                  divInf.style.transform = `translate(-50%, calc(-100% - 4px))`;
-                }else{
-                  // adaptive-width, near right
-                  divInf.style.right = `${bodyRect.left + bodyRect.width - clientMidX}px`;
-                  divInf.style.transform = `translate(50%, calc(-100% - 4px))`;
-                }
+                divInfContainer.style.top = `${clientP1.y - bodyRect.top - parseFloat(bodyStyle.borderTopWidth)}px`;
+                divInfContainer.style.left = `${clientMidX - bodyRect.left - parseFloat(bodyStyle.borderLeftWidth)}px`;
               }
-              divInf.innerText = result.barcodeText;
-              divInfContainers.append(divInf);
+              divInfContainers.append(divInfContainer);
 
               /**
                * You can also add more information, such as displaying product images.