diff --git a/src/kiri-mode/cam/client.js b/src/kiri-mode/cam/client.js index 6bb111a2..b69cb61f 100644 --- a/src/kiri-mode/cam/client.js +++ b/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())); } } diff --git a/src/kiri/ui.js b/src/kiri/ui.js index 3678d037..b90c5cbd 100644 --- a/src/kiri/ui.js +++ b/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 = ``; + + 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 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); }