From 9069ca631dc90e280f0b5f910760e98b3780c19a Mon Sep 17 00:00:00 2001
From: kevin <kevin@larke.org>
Date: Sat, 12 Oct 2024 15:35:41 -0400
Subject: [PATCH] src/caw/html/ css/ui.css js/ui.js : Updates to support HList
 and setTitle(). Clicking on the current selected option now generates a
 'click' event.

---
 src/caw/html/css/ui.css | 32 +++++++++++++++++++++++++++++++-
 src/caw/html/js/ui.js   | 40 ++++++++++++++++++++++++++++++++++------
 2 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/src/caw/html/css/ui.css b/src/caw/html/css/ui.css
index 7c98619..abd66f4 100644
--- a/src/caw/html/css/ui.css
+++ b/src/caw/html/css/ui.css
@@ -132,13 +132,42 @@ label {
     flex-direction: column;
     
     height: 100px;
+    width: 100%;
     overflow-x: hidden; /* 'hidden' to remove scroll bar */
     overflow-y: auto; 
-    width: 100%;
 
     background-color: PowderBlue;    
 }
 
+
+/* outer list div - contains the list label and the list scroller */
+.uiHListDiv {
+    display: flex;
+    flex-direction: row;
+
+    align-items: flex-start;     /* left justify */
+    align-content: flex-stretch; /* fill horizontal space */
+    
+}
+
+.uiHListDiv label {
+    width: 100%;
+    background-color: LightSteelBlue;
+
+}
+
+.uiHList {
+    display:flex;
+    flex-direction: row;
+    
+    height: 100%;
+    overflow-x: auto; 
+    overflow-y: hidden;  /* 'hidden' to remove scroll bar */
+
+    background-color: PowderBlue;    
+}
+
+
 .uiStringDisp {
     width: 100%;
 }
@@ -146,3 +175,4 @@ label {
 .uiSelected {
     border: 1px solid blue;
 }
+
diff --git a/src/caw/html/js/ui.js b/src/caw/html/js/ui.js
index d0e8ddd..c23793d 100644
--- a/src/caw/html/js/ui.js
+++ b/src/caw/html/js/ui.js
@@ -382,7 +382,8 @@ function ui_create_select( parent_ele, d )
 {
     var ele = ui_create_ctl( parent_ele, "select", d.title, d, "uiSelect" );
     ele.onchange = function() { ui_on_select(this) }
-
+    ele.onclick  = function() { ui_on_select(this) }
+    
     if( !d.hasOwnProperty('value') )
     {
 	ui_send_echo(ele)
@@ -576,6 +577,26 @@ function ui_set_number_value( ele, value )
 
 }
 
+function ui_set_title( ele, d )
+{
+    if( ele.tagName.toLowerCase() == "button" )
+	ele.innerHTML = d.value;
+    else
+    {
+	// most controls will have a sibling element of type 'label'
+	var label_eles = ele.parentNode.getElementsByTagName("label");
+	
+	if( label_eles != null && label_eles.length > 0 )
+	{
+	    label_eles[0].innerHTML = d.value
+	}
+	else
+	{
+	    ui_error("set_title() target element not found.");
+	}
+    }    
+}
+
 function ui_set_number_range( ele, d )
 {
     _ui_set_number_range(ele,d)
@@ -740,10 +761,9 @@ function ui_create_log( parent_ele, d )
     return log_ele
 }
 
-function ui_create_list( parent_ele, d )
+function ui_create_list( parent_ele, d, class_label )
 {
-    //console.log(d)
-    var list_ele  = ui_create_ctl( parent_ele, "div", d.title, d, "uiList" )
+    var list_ele  = ui_create_ctl( parent_ele, "div", d.title, d, class_label )
     
     return list_ele
 }
@@ -923,6 +943,10 @@ function ui_set( d )
     {
 	switch( d.type )
 	{
+	    case "title":
+	    ui_set_title(ele,d);
+	    break;
+	    
 	    case "number_range":
 	    ui_set_number_range(ele, d)
 	    break;
@@ -1045,8 +1069,12 @@ function ui_create( d )
 	    ele = ui_create_log( parent_ele, d );
 	    break;
 
-	    case "list":
-	    ele = ui_create_list( parent_ele, d );
+	    case "vlist":
+	    ele = ui_create_list( parent_ele, d, "uiList" );
+	    break;
+
+	    case "hlist":
+	    ele = ui_create_list( parent_ele, d, "uiHList" );
 	    break;
 	    
 	    default: