Merge pull request #46 from KamuiKody/main

Final Revisit to Image on Hover [Feature]
qbcore-framework · Nov 13, 2024 · e02d07b · e02d07b
2 parents 71edd97 + ace1235
commit e02d07b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/html/index.html b/html/index.html
@@ -14,7 +14,10 @@
     </head>
     <body>
         <div id="container">
-            <div id="buttons"></div>
+            <div id="buttons"></div>            
+            <div id="imageHover">
+                <img id="image" />
+            </div>
         </div>
     </body>
 </html>
diff --git a/html/script.js b/html/script.js
@@ -1,4 +1,5 @@
 let buttonParams = [];
+let images = [];
 
 const openMenu = (data = null) => {
     let html = "";
@@ -9,6 +10,7 @@ const openMenu = (data = null) => {
             let isMenuHeader = item.isMenuHeader;
             let isDisabled = item.disabled;
             let icon = item.icon;
+            images[index] = item;
             html += getButtonRender(header, message, index, isMenuHeader, isDisabled, icon);
             if (item.params) buttonParams[index] = item.params;
         }
@@ -38,7 +40,9 @@ const getButtonRender = (header, message = null, id, isMenuHeader, isDisabled, i
 
 const closeMenu = () => {
     $("#buttons").html(" ");
+    $('#imageHover').css('display' , 'none');
     buttonParams = [];
+    images = [];
 };
 
 const postData = (id) => {
@@ -68,6 +72,21 @@ window.addEventListener("message", (event) => {
     }
 });
 
+window.addEventListener('mousemove', (event) => {
+    let $target = $(event.target);
+    if ($target.closest('.button:hover').length && $('.button').is(":visible")) {
+        let id = event.target.id;
+        if (!images[id]) return
+        if (images[id].image) {
+            $('#image').attr('src', images[id].image);
+            $('#imageHover').css('display' , 'block');
+        }
+    }
+    else {
+        $('#imageHover').css('display' , 'none');
+    }
+})
+
 document.onkeyup = function (event) {
     const charCode = event.key;
     if (charCode == "Escape") {

diff --git a/html/style.css b/html/style.css
@@ -173,4 +173,17 @@ div > .header {
   font-size: 0.9rem;
   font-weight: 400;
   overflow: hidden;
+}
+
+#imageHover {
+    position: absolute;
+    top: 10%;
+    right: 25em;
+}
+
+#image {
+    src: "";
+    max-height: 40vh;
+    max-width: 40vw;
+    object-fit: scale-down;
 }