naming; UI sample

phoenixbf · Nov 17, 2024 · c910fb2 · c910fb2
1 parent be4ef0b
commit c910fb2
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 14 deletions.
diff --git a/public/dist/ATON.min.js b/public/dist/ATON.min.js
diff --git a/public/examples/ui-basic/index.html b/public/examples/ui-basic/index.html
@@ -39,10 +39,11 @@
 
         ATON.UI.showModal({
             header: "Sample Modal",
-            body: ATON.UI.createTabGroup({
+            body: ATON.UI.createTabsGroup({
                 items: [
                     {
                         title: "Tab1",
+                        icon: "settings",
                         content: ATON.UI.createButton({
                                     variant:"primary",
                                     text:"click me",
@@ -52,13 +53,14 @@
                     },
                     {
                         title: "Tab2",
-                        content: "This is a sample text for this second tab"
+                        icon: "layers",
+                        content: "This is a sample text for this second tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue viverra diam vitae maximus. Pellentesque a placerat lacus, interdum feugiat est. Proin non suscipit elit. Aliquam erat volutpat. Integer lobortis gravida venenatis. Nulla turpis eros, eleifend vel neque in, molestie pulvinar libero. Nunc sapien ex, tincidunt vel malesuada sit amet, elementum sit amet libero.Phasellus nec neque et lectus rhoncus tristique at ullamcorper justo. Maecenas venenatis elementum urna, non dignissim urna bibendum a. Nunc odio tortor, blandit in sodales vel, lacinia in augue. Aliquam quis sagittis turpis. Suspendisse eget mollis ex. Aenean lacinia laoreet viverra. In volutpat nisi sagittis, semper nisi et, fermentum lectus. Nunc vel eros nec diam pulvinar gravida. Sed quis auctor turpis. Suspendisse et nulla ipsum. Fusce non consequat diam. Mauris risus lacus, placerat sit amet dui nec, interdum consectetur turpis. Integer ut lobortis dolor, sed convallis est."
                     }
                 ]
                 })
             });
 /*
-        let test = ATON.UI._createElemementFromHTMLString(`
+        let test = ATON.UI.createElemementFromHTMLString(`
             <details>
                 <summary>TEST</summary>
                 <details>

diff --git a/public/res/css/main.css b/public/res/css/main.css
@@ -170,4 +170,10 @@ canvas:active {
     width: 32px;
     height: 32px;
     margin-right: 5px;
+}
+
+.aton-tab img {
+    width: 18px;
+    height: 18px;
+    margin-right: 5px;
 }
diff --git a/public/src/ATON.ui.js b/public/src/ATON.ui.js
@@ -297,6 +297,11 @@ UI.loadPartial = (src, parentid, bPrepend, onComplete)=>{
     });
 };
 
+UI.resolveIconURL = (icon)=>{
+    if (icon.includes("/")) return icon;
+    return UI.PATH_RES_ICONS + icon+".png";
+};
+
 /*===============================
     Items
 ===============================*/
@@ -321,10 +326,7 @@ UI.createButton = (options)=>{
     if (options.text) el.innerText = options.text;
 
     if (options.icon){
-        let iconsrc = UI.PATH_RES_ICONS + options.icon+".png";
-        if (options.icon.includes("/")) iconsrc = options.icon; // a path is given
-
-        el.prepend( UI.createElemementFromHTMLString("<img class='icon' src='"+iconsrc+"'>"));
+        el.prepend( UI.createElemementFromHTMLString("<img class='icon' src='"+UI.resolveIconURL(options.icon)+"'>"));
     }
 
     if (options.onpress) el.onclick = options.onpress;
@@ -333,19 +335,19 @@ UI.createButton = (options)=>{
 };
 
 /**
-Create a tab group.
-- options.items: an array of objects (tabs) with "title" (string) and "content" (DOM element) properties.
+Create a tabs group.
+- options.items: an array of objects (tabs) with "title" (string) and "content" (DOM element) properties. An optional "icon" can also be assigned per tab
 
 @param {object} options  - UI options object
 @returns {HTMLElement}
 */
-UI.createTabGroup = (options)=>{
+UI.createTabsGroup = (options)=>{
     let baseid = ATON.Utils.generateID("tabgroup");
 
     let el = document.createElement('div');
 
     let eltabs = document.createElement('ul');
-    eltabs.classList.add("nav","nav-tabs","nav-justified");
+    eltabs.classList.add("nav","nav-justified","nav-tabs"); // "nav-underline"
     eltabs.setAttribute("role","tablist");
 
     let eltabcontent = document.createElement('div');
@@ -360,6 +362,10 @@ UI.createTabGroup = (options)=>{
 
         let tabtitle   = e.title;
         let tabcontent = e.content;
+        let icon       = e.icon;
+
+        let icontab = "";
+        if (icon) icontab = "<img class='icon' src='"+UI.resolveIconURL(icon)+"'>";
 
         let tabid = baseid+"-"+tabtitle;
 
@@ -368,9 +374,9 @@ UI.createTabGroup = (options)=>{
         eltab.setAttribute("role","presentation");
 
         if (i===0) 
-            eltab.innerHTML = "<button class='nav-link active id='"+tabid+"-tab' data-bs-toggle='pill' data-bs-target='#"+tabid+"' type='button' role='tab' aria-controls='"+tabid+"' aria-selected='true'>"+tabtitle+"</button>";
+            eltab.innerHTML = "<button class='nav-link aton-tab active' id='"+tabid+"-tab' data-bs-toggle='pill' data-bs-target='#"+tabid+"' type='button' role='tab' aria-controls='"+tabid+"' aria-selected='true'>"+icontab+tabtitle+"</button>";
         else 
-            eltab.innerHTML = "<button class='nav-link id='"+tabid+"-tab' data-bs-toggle='pill' data-bs-target='#"+tabid+"' type='button' role='tab' aria-controls='"+tabid+"'>"+tabtitle+"</button>";
+            eltab.innerHTML = "<button class='nav-link aton-tab' id='"+tabid+"-tab' data-bs-toggle='pill' data-bs-target='#"+tabid+"' type='button' role='tab' aria-controls='"+tabid+"'>"+icontab+tabtitle+"</button>";
 
         eltabs.append(eltab);