perfect-gui 4.2.3 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "description": "Nice and simple GUI for JavaScript",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -286,6 +286,9 @@ export default class GUI {
         } else {
             name = typeof params.name == 'string' ? params.name || ' ' : ' ';
         }
+
+        const selected = params.selected === true;
+        const selectionBorder = params.selectionBorder !== false;
                 
         if (!this.imageContainer) {
             this.imageContainer = this._createElement({
@@ -299,6 +302,10 @@ export default class GUI {
             inline: `background-image: url(${path})`,
             parent: this.imageContainer
         })
+
+        if (selected && selectionBorder) {
+            image.classList.add('p-gui__image--selected');
+        }
         
         // Text inside image
         this._createElement({
@@ -308,7 +315,16 @@ export default class GUI {
         })    
         
         if (typeof callback == 'function') {
-            image.onclick = () => callback({ path, text: name });
+            image.onclick = () => {
+                let selected = this.imageContainer.querySelectorAll('.p-gui__image--selected');
+                for (let i = 0; i < selected.length; i++) {
+                    selected[i].classList.remove('p-gui__image--selected');
+                }
+                if (selectionBorder) {
+                    image.classList.add('p-gui__image--selected');
+                }
+                callback({ path, text: name });
+            };
         }
     }
     

package/src/styles.js

@@ -113,6 +113,19 @@ export default function( position_type ) {
         position: relative;
         margin-top: 1px;
         margin-bottom: 19px;
+        border-radius: var(--main-border-radius);
+    }
+
+    .p-gui__image--selected::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        content: '';
+        border: 1px solid #06FF89;
+        box-sizing: border-box;
+        border-radius: var(--main-border-radius);
     }
     
     .p-gui__image-text {