add ui treatment for overrides sub-menu in cam ops

src/kiri-mode/cam/client.js

@@ -1498,9 +1498,12 @@ CAM.init = function(kiri, api) {
         offover:  UC.newInput(LANG.cc_offd_s, {title:LANG.cc_offd_l, convert:UC.toFloat, units:true, show:() => poppedRec.offset !== "none"}),
         sep:      UC.newBlank({class:"pop-sep", modes:MCAM, xshow:zDogSep}),
         merge:    UC.newBoolean(LANG.co_merg_s, undefined, {title:LANG.co_merg_l}),
-        bottom:   UC.newBoolean(LANG.cf_botm_s, undefined, {title:LANG.cf_botm_l, show:(op,conf) => conf.process.camZBottom}),
         dogbone:  UC.newBoolean(LANG.co_dogb_s, undefined, {title:LANG.co_dogb_l, show:canDogBones}),
         revbone:  UC.newBoolean(LANG.co_dogr_s, undefined, {title:LANG.co_dogr_l, show:canDogBonesRev}),
+        expand:   UC.newExpand("overrides"),
+        sep:      UC.newBlank({class:"pop-sep"}),
+        bottom:   UC.newBoolean(LANG.cf_botm_s, undefined, {title:LANG.cf_botm_l, show:(op,conf) => conf.process.camZBottom}),
+        end:      UC.endExpand(),
         sep:      UC.newBlank({class:"pop-sep"}),
         menu:     UC.newRow([ UC.newButton("select", func.traceAdd) ], {class:"ext-buttons f-row"}),
     };
@@ -1706,10 +1709,10 @@ function createPopOp(type, map) {
             }
             return rec;
         },
-        hideshow: (abc) => {
+        hideshow: () => {
             for (let inp of Object.values(op.inputs)) {
                 let parent = inp.parentElement;
-                if (parent.setVisible && parent.__opt.show) {
+                if (parent && parent.setVisible && parent.__opt.show) {
                     parent.setVisible(parent.__opt.show(op, API.conf.get()));
                 }
             }

src/kiri/ui.js

@@ -10,6 +10,7 @@ gapp.register("kiri.ui", [], (root, exports) => {
 
     let DOC = self.document,
         inputAction = null,
+        lastAddTo = null,
         lastGroup = null,
         lastDiv = null,
         addTo = null,
@@ -46,11 +47,13 @@ gapp.register("kiri.ui", [], (root, exports) => {
         toFloat,
         isSticky,
         setSticky,
-        newElement,
         newBoolean,
         newButton,
         newBlank,
         newDiv,
+        newElement,
+        newExpand,
+        endExpand,
         newGCode,
         newGroup,
         newLabel,
@@ -58,8 +61,6 @@ gapp.register("kiri.ui", [], (root, exports) => {
         newRange,
         newRow,
         newSelect,
-        newTable,
-        newTableRow,
         newText,
         setGroup,
         addUnits,
@@ -297,8 +298,8 @@ gapp.register("kiri.ui", [], (root, exports) => {
         return row;
     }
 
-    function addCollapsableElement(parent) {
-        let row = newDiv();
+    function addCollapsableElement(parent, options = {}) {
+        let row = newDiv(options);
         if (parent) parent.appendChild(row);
         if (lastGroup) lastGroup.push(row);
         return row;
@@ -404,16 +405,42 @@ gapp.register("kiri.ui", [], (root, exports) => {
     }
 
     function newDiv(opt = {}) {
-        let div = DOC.createElement('div');
+        let div = DOC.createElement(opt.tag || 'div');
         addModeControls(div, opt);
         (opt.addto || addTo).appendChild(div);
         if (opt.addto) lastDiv = addTo = div;
-        if (opt.addto && opt.class) div.setAttribute('class', opt.class);
+        if (opt.class) div.setAttribute('class', opt.class);
         lastGroup?.push(div);
         div._group = groupName;
         return div;
     }
 
+    function newExpand(label, opt = {}, opteach = {}) {
+        let div = DOC.createElement('details');
+        div.setAttribute('class', opt.class || 'f-col');
+        addModeControls(div, opt);
+
+        let summary = DOC.createElement('summary');
+        summary.setAttribute('class', opt.class || 'var-row');
+        summary.innerHTML = `<label>${label}</label>`;
+
+        div.appendChild( summary );
+        div.collapse = () => {
+            div.removeAttribute('open');
+        };
+
+        lastAddTo = addTo;
+        addTo.appendChild(div);
+        addTo = div;
+
+        return div;
+    }
+
+    function endExpand() {
+        addTo = lastAddTo;
+        return addTo;
+    }
+
     function isSticky() {
         return groupSticky;
     }
@@ -432,10 +459,11 @@ gapp.register("kiri.ui", [], (root, exports) => {
         txt.setAttribute("spellcheck", "false");
         txt.setAttribute("style", "resize: none");
         txt.onblur = bindTo || inputAction;
+        txt.button = btn;
 
         btn.setAttribute("class", "basis-50");
         btn.appendChild(DOC.createTextNode(label));
-
+        btn.setAttribute("title", opt.title || undefined);
         btn.onclick = function(ev) {
             ev.stopPropagation();
             if (ev.target === txt) {
@@ -470,11 +498,8 @@ gapp.register("kiri.ui", [], (root, exports) => {
                 }
             }
         };
+
         addModeControls(btn, opt);
-        if (opt.title) {
-            btn.setAttribute("title", options.title);
-        }
-        txt.button = btn;
 
         return txt;
     }
@@ -802,25 +827,4 @@ gapp.register("kiri.ui", [], (root, exports) => {
         return row;
     }
 
-    function newRowTable(array) {
-        let div = newDiv();
-        div.setAttribute("class", "table-row");
-        array.forEach(function(c) {
-            div.appendChild(c);
-        });
-        return div;
-    }
-
-    function newTableRow(arrayOfArrays, options) {
-        return newRow(newTable(arrayOfArrays), options);
-    }
-
-    function newTable(arrayOfArrays) {
-        let array = [];
-        for (let i=0; i<arrayOfArrays.length; i++) {
-            array.push(newRowTable(arrayOfArrays[i]));
-        }
-        return array;
-    }
-
 });

web/kiri/index.css

@@ -187,20 +187,20 @@ th, tr, td, span, div, label, button {
 th, tr, td, label {
     white-space: nowrap;
 }
-details > summary {
+details summary {
     list-style: none;
 }
-details > summary::-webkit-details-marker {
+details summary::-webkit-details-marker {
     display: none;
 }
-details > summary::before {
+details summary::before {
     content: "";
 }
-details > summary {
+details summary {
     position: relative;
     cursor: pointer;
 }
-details > summary::after {
+details summary::after {
     content: "▸";
     position: absolute;
     right: 5px;
@@ -208,7 +208,7 @@ details > summary::after {
     transform: rotate(-90deg);
     transition: transform 0.2s ease;
 }
-details[open] > summary::after {
+details[open] summary::after {
     transform: rotate(90deg);
 }