Merge pull request #23 from Laaouatni/popup-created-automatically-wih…

…out-write-it-in-html fix: #22 Popup created automatically wihout write it in html
Laaouatni · Aug 19, 2022 · 3caef5d · 3caef5d · vercel · Aug 19, 2022
2 parents 5e2d85f + e148ec9
commit 3caef5d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/gcode/index.html b/gcode/index.html
@@ -8,12 +8,6 @@
   </head>
   <body>
     <div id="app">
-      <div id="tooltip" role="tooltip">
-        <span>hello waaaaaaa</span>
-
-        <div id="arrow"></div>
-      </div>
-
       <section id="hello"></section>
     </div>
 
@@ -60,6 +54,7 @@
         top: var(--line-top);
         left: var(--line-left);
         transform: rotate(var(--line-rotate));
+        z-index: var(--line-zIndex);
       }
 
       .Gline::before {
@@ -86,8 +81,7 @@
         position: absolute;
         top: 50%;
         right: 0;
-        transform: translate(0, -50%);
-        z-index: 5 !important;
+        transform: translate(50%, -50%);
       }
 
       .Gline::before {

diff --git a/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssFloatPopup/CssFloatPopup.js b/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssFloatPopup/CssFloatPopup.js
@@ -1,14 +1,34 @@
-import updatePopup from "./other/Methods/updatePopup/updatePopup";
+import updatePopup from "./other/Methods/updatePopup/updatePopup.js";
 
 export default class CssFloatPopup {
+  static popup;
+  static span;
+  static arrow;
+
+  static {
+    CssFloatPopup.popup = document.createElement("div");
+    CssFloatPopup.span = document.createElement("span");
+    CssFloatPopup.arrow = document.createElement("div");
+
+    CssFloatPopup.popup.id = "tooltip";
+    CssFloatPopup.popup.role = "tooltip";
+
+    CssFloatPopup.span.style.setProperty("white-space", "pre");
+
+    CssFloatPopup.arrow.id = "arrow";
+
+    CssFloatPopup.popup.appendChild(CssFloatPopup.span);
+    CssFloatPopup.popup.appendChild(CssFloatPopup.arrow);
+  }
+
   constructor(_obj) {
     this.obj = _obj;
 
     this.button = this.obj.button;
-    this.popup = this.obj.popup;
-    this.arrow = this.obj.arrow ?? this.obj.popup.querySelector("#arrow");
-
-    this.popupText = this.popup.querySelector("span");
+
+    this.popup = CssFloatPopup.popup;
+    this.arrow = CssFloatPopup.arrow;
+    this.span = CssFloatPopup.span;
 
     this.addDefaultStyles();
     this.addEvents();
@@ -20,7 +40,7 @@ export default class CssFloatPopup {
 
   showPopup() {
     this.popup.style.display = "block";
-    this.popupText.textContent = `${this.button.dataset.after}`;
+    this.span.textContent = `${this.button.dataset.line}`;
     updatePopup(this);
   }
 
@@ -49,7 +69,7 @@ export default class CssFloatPopup {
       this.popup.style.setProperty(key, this.PopupValuesArray[index]);
     });
 
-    this.popupText.style.setProperty("white-space", "pre");
+    this.span.style.setProperty("white-space", "pre");
   }
 
   styleArrow() {

diff --git a/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssLine/CssLine.js b/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssLine/CssLine.js
@@ -6,7 +6,6 @@ export default class CssLine {
   constructor(_CurrentObj, _index) {
     this.index = _index;
     this.lineElement = document.createElement("div");
-    this.popupEl = document.querySelector("#tooltip");
 
     this.currentObj = _CurrentObj;
     this.previusObj = GcodeAPI.array[this.index - 1 > 0 ? this.index - 1 : 0];
@@ -34,7 +33,6 @@ export default class CssLine {
 
     this.createPopup({
       button: this.lineElement,
-      popup: this.popupEl
     });
 
   }
@@ -59,6 +57,7 @@ export default class CssLine {
       top: `${this.smallestPos.y}px`,
       rotate: `${this.lineAngle}deg`,
       backgroundColor: "red",
+      zIndex: `${GcodeAPI.array.length - this.index}`
     };
 
     this.stylesKeysArray = Object.keys(this.lineStylesObj);
@@ -74,7 +73,7 @@ export default class CssLine {
     this.lineElement.classList.add("Gline");
     this.lineElement.setAttribute("key", this.index);
     this.lineElement.setAttribute(
-      "data-after",
+      "data-line",
       `${JSON.stringify({
         length: this.lineLength,
         x: this.currentObj.x,

diff --git a/gcode/src/API/GcodeApi/Gsimulator/Gcss/Gcss.js b/gcode/src/API/GcodeApi/Gsimulator/Gcss/Gcss.js
@@ -1,6 +1,7 @@
 import Gsimulator from "../Gsimulator.js";
 import GcodeAPI from "../../GcodeAPI_main/GcodeAPI.js";
 import CssLine from "./CssLine/CssLine.js";
+import CssFloatPopup from "./CssFloatPopup/CssFloatPopup.js";
 
 export default class Gcss extends Gsimulator {
   constructor(_GcssObj) {
@@ -14,6 +15,8 @@ export default class Gcss extends Gsimulator {
       document.querySelector("#app") ??
       document.body;
 
+    this.parentHtmlContainer.appendChild(CssFloatPopup.popup);
+
     this.create();
   }