pack gcode edit buttons

This commit is contained in:
Stewart Allen 2020-06-20 22:07:35 -04:00
commit 3fde3b0590
3 changed files with 98 additions and 19 deletions

View file

@ -1270,18 +1270,28 @@
gcode: UC.newGroup(LANG.dv_gr_gco, $('device'), {group:"dgco", inline:true, modes:GCODE}),
gcodeFan: UC.newInput(LANG.dv_fanp_s, {title:LANG.dv_fanp_l, modes:FDM, size:"40%", text:true}),
gcodeTrack: UC.newInput(LANG.dv_prog_s, {title:LANG.dv_prog_l, modes:FDM, size:"40%", text:true}),
gcodeLayer: UC.newText(LANG.dv_layr_s, {title:LANG.dv_layr_l, modes:FDM, size:14, height: 2, area:gcode}),
gcodeLayerPause: UC.newRow([
(UI.gcodeLayer = UC.newGCode(LANG.dv_layr_s, {title:LANG.dv_layr_l, modes:FDM, size:14, height: 2, area:gcode})).button,
(UI.gcodePause = UC.newGCode(LANG.dv_paus_s, {title:LANG.dv_paus_l, modes:FDM, size:14, height:3, area:gcode})).button,
], {modes:FDM, class:"ext-buttons row"}),
gcodeSpace: UC.newBoolean(LANG.dv_tksp_s, onBooleanClick, {title:LANG.dv_tksp_l, modes:CAM_LASER}),
gcodeStrip: UC.newBoolean(LANG.dv_strc_s, onBooleanClick, {title:LANG.dv_strc_l, modes:CAM}),
gcodeFExt: UC.newInput(LANG.dv_fext_s, {title:LANG.dv_fext_l, modes:CAM_LASER, size:7, text:true}),
gcodeDwell: UC.newText(LANG.dv_dwll_s, {title:LANG.dv_dwll_l, modes:CAM, size:14, height:2, area:gcode}),
gcodeChange: UC.newText(LANG.dv_tool_s, {title:LANG.dv_tool_l, modes:CAM, size:14, height:2, area:gcode}),
gcodeSpindle: UC.newText(LANG.dv_sspd_s, {title:LANG.dv_sspd_l, modes:CAM, size:14, height:2, area:gcode}),
gcodePause: UC.newText(LANG.dv_paus_s, {title:LANG.dv_paus_l, modes:FDM, size:14, height:3, area:gcode}),
gcodeLaserOn: UC.newText(LANG.dv_lzon_s, {title:LANG.dv_lzon_l, modes:LASER, size:14, height:3, area:gcode}),
gcodeLaserOff: UC.newText(LANG.dv_lzof_s, {title:LANG.dv_lzof_l, modes:LASER, size:14, height:3, area:gcode}),
gcodePre: UC.newText(LANG.dv_head_s, {title:LANG.dv_head_l, modes:GCODE, size:14, height:3, area:gcode}),
gcodePost: UC.newText(LANG.dv_foot_s, {title:LANG.dv_foot_l, modes:GCODE, size:14, height:3, area:gcode}),
gcodeLaserOnOff: UC.newRow([
(UI.gcodeLaserOn = UC.newGCode(LANG.dv_lzon_s, {title:LANG.dv_lzon_l, modes:LASER, size:14, height:3, area:gcode})).button,
(UI.gcodeLaserOff = UC.newGCode(LANG.dv_lzof_s, {title:LANG.dv_lzof_l, modes:LASER, size:14, height:3, area:gcode})).button,
], {modes:LASER, class:"ext-buttons row"}),
gcodeCam1: UC.newRow([
(UI.gcodeChange = UC.newGCode(LANG.dv_tool_s, {title:LANG.dv_tool_l, modes:CAM, size:14, height:2, area:gcode})).button
], {modes:CAM, class:"ext-buttons row"}),
gcodeCam2: UC.newRow([
(UI.gcodeDwell = UC.newGCode(LANG.dv_dwll_s, {title:LANG.dv_dwll_l, modes:CAM, size:14, height:2, area:gcode})).button,
(UI.gcodeSpindle = UC.newGCode(LANG.dv_sspd_s, {title:LANG.dv_sspd_l, modes:CAM, size:14, height:2, area:gcode})).button
], {modes:CAM, class:"ext-buttons row"}),
gcodeHeadFoot: UC.newRow([
(UI.gcodePre = UC.newGCode(LANG.dv_head_s, {title:LANG.dv_head_l, modes:GCODE, size:14, height:3, area:gcode})).button,
(UI.gcodePost = UC.newGCode(LANG.dv_foot_s, {title:LANG.dv_foot_l, modes:GCODE, size:14, height:3, area:gcode})).button
], {modes:GCODE, class:"ext-buttons row"}),
layout: UC.newGroup(LANG.op_menu, $('prefs-gen'), {inline: true}),
expert: UC.newBoolean(LANG.op_xprt_s, booleanSave, {title:LANG.op_xprt_l}),

View file

@ -41,6 +41,7 @@
hidePop: hidePop,
isPopped: isPopped,
newText: newTextArea,
newGCode: newGCode,
newLabel: newLabel,
newRange: newRange,
newInput: newInputField,
@ -347,6 +348,7 @@
return div;
}
let lastBtn = null;
let lastTxt = null;
let lastPop = null;
let savePop = null;
@ -366,9 +368,9 @@
return lastPop !== null;
}
function newTextArea(label, options) {
function newGCode(label, options) {
let opt = options || {},
row = newDiv(options),
row = lastDiv,
btn = DOC.createElement("button"),
pop = DOC.createElement("div"),
txt = DOC.createElement("textarea"),
@ -379,7 +381,68 @@
txt.setAttribute("style", "resize: none");
txt.onblur = inputAction;
btn.appendChild(DOC.createTextNode("edit"));
btn.appendChild(DOC.createTextNode(label));
btn.onclick = function(ev) {
ev.stopPropagation();
if (ev.target === txt) {
// drop clicks on TextArea
ev.target.focus();
} else {
let fc = area.firstChild;
if (fc) area.removeChild(fc);
area.appendChild(txt);
txt.scrollTop = 0;
txt.scrollLeft = 0;
txt.selectionEnd = 0;
let rows = txt.value.split('\n');
let cols = 0;
rows.forEach(row => {
cols = Math.max(cols, row.length);
});
txt.setAttribute("cols", Math.max(30, cols + 1));
txt.setAttribute("rows", Math.max(10, rows.length + 1));
let showing = btn === lastBtn;
hidePop();
if (lastTxt) {
lastTxt.classList.remove('txt-sel');
}
if (lastBtn) {
lastBtn.classList.remove('btn-sel');
}
if (!showing) {
btn.classList.add('btn-sel');
lastTxt = btn;
lastBtn = btn;
txt.focus();
} else {
inputAction();
}
}
};
addModeControls(btn, opt);
if (opt.title) row.setAttribute("title", options.title);
txt.button = btn;
return txt;
}
function newTextArea(label, options) {
let opt = options || {},
inline = opt.row,
row = inline ? lastDiv : newDiv(options),
btn = DOC.createElement("button"),
pop = DOC.createElement("div"),
txt = DOC.createElement("textarea"),
area = opt.area;
txt.setAttribute("wrap", "off");
txt.setAttribute("spellcheck", "false");
txt.setAttribute("style", "resize: none");
txt.onblur = inputAction;
btn.appendChild(DOC.createTextNode(inline ? label : "edit"));
btn.onclick = function(ev) {
ev.stopPropagation();
@ -405,10 +468,13 @@
let showing = pop === lastPop;
hidePop();
if (lastBtn) {
lastBtn.classList.remove('btn-sel');
}
if (lastTxt) {
lastTxt.classList.remove('txt-sel');
}
if (!showing) {
if (lastTxt) {
lastTxt.classList.remove('txt-sel');
}
row.classList.add('txt-sel');
savePop = inputAction;
pop.style.display = "flex";
@ -420,15 +486,18 @@
}
}
};
addModeControls(btn, opt);
addId(btn, opt);
row.appendChild(newLabel(label));
if (!inline) {
row.appendChild(newLabel(label));
row.setAttribute("class", "var-row");
}
row.appendChild(btn);
row.setAttribute("class", "var-row");
if (opt.title) row.setAttribute("title", options.title);
btn.setVisible = row.setVisible;
if (row.setVisible) {
btn.setVisible = row.setVisible;
}
return txt;
}

View file

@ -429,7 +429,7 @@ and (orientation : landscape) {
.txt-sel {
background-color: #eee;
}
.txt-sel button {
.txt-sel button, .btn-sel {
background-color: #ccc;
}
#pop-rotate .value, #pop-scale .value {