|
|
|
@@ -127,14 +127,39 @@
|
|
|
|
|
|
|
|
|
|
const layouts = {
|
|
|
|
|
compact: { label: "Compact", advanced: false, preferredTab: "main" },
|
|
|
|
|
broadcast: { label: "Broadcast", advanced: false, preferredTab: "main" },
|
|
|
|
|
broadcast: { label: "Broadcast", advanced: false, preferredTab: "main", capability: "broadcast" },
|
|
|
|
|
digital: { label: "Digital", advanced: false, preferredTab: "digital-modes" },
|
|
|
|
|
full: { label: "Full controls", advanced: true, preferredTab: "main" },
|
|
|
|
|
};
|
|
|
|
|
let hasBroadcastRig = false;
|
|
|
|
|
|
|
|
|
|
function broadcastLayoutAvailable() {
|
|
|
|
|
return hasBroadcastRig;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function refreshLayoutOptions() {
|
|
|
|
|
const select = document.getElementById("operator-layout-select");
|
|
|
|
|
if (!select) return;
|
|
|
|
|
const previous = select.value || document.body.dataset.operatorLayout || "compact";
|
|
|
|
|
select.replaceChildren();
|
|
|
|
|
Object.entries(layouts).forEach(([value, layout]) => {
|
|
|
|
|
if (layout.capability === "broadcast" && !broadcastLayoutAvailable()) return;
|
|
|
|
|
select.add(new Option(layout.label, value));
|
|
|
|
|
});
|
|
|
|
|
const available = Array.from(select.options).some(option => option.value === previous);
|
|
|
|
|
select.value = available ? previous : "compact";
|
|
|
|
|
if (!available && previous === "broadcast") api.applyLayout("compact");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
api.setBroadcastLayoutAvailable = function setBroadcastLayoutAvailable(available) {
|
|
|
|
|
hasBroadcastRig = Boolean(available);
|
|
|
|
|
refreshLayoutOptions();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
api.applyLayout = function applyLayout(name, options = {}) {
|
|
|
|
|
const layout = layouts[name] || layouts.compact;
|
|
|
|
|
document.body.dataset.operatorLayout = name in layouts ? name : "compact";
|
|
|
|
|
const permittedName = name === "broadcast" && !broadcastLayoutAvailable() ? "compact" : name;
|
|
|
|
|
const layout = layouts[permittedName] || layouts.compact;
|
|
|
|
|
document.body.dataset.operatorLayout = permittedName in layouts ? permittedName : "compact";
|
|
|
|
|
localStorage.setItem("trxOperatorLayout", document.body.dataset.operatorLayout);
|
|
|
|
|
const details = document.getElementById("advanced-radio-controls");
|
|
|
|
|
if (details) details.open = layout.advanced;
|
|
|
|
@@ -150,10 +175,12 @@
|
|
|
|
|
label.className = "operator-layout-picker";
|
|
|
|
|
label.innerHTML = '<span class="visually-hidden">Operator layout</span><select id="operator-layout-select" aria-label="Operator layout"></select>';
|
|
|
|
|
const select = label.querySelector("select");
|
|
|
|
|
Object.entries(layouts).forEach(([value, layout]) => select.add(new Option(layout.label, value)));
|
|
|
|
|
select.value = localStorage.getItem("trxOperatorLayout") || "compact";
|
|
|
|
|
select.addEventListener("change", () => api.applyLayout(select.value, { navigate: true }));
|
|
|
|
|
const savedLayout = localStorage.getItem("trxOperatorLayout") || "compact";
|
|
|
|
|
actions.insertBefore(label, actions.firstChild);
|
|
|
|
|
select.value = savedLayout;
|
|
|
|
|
refreshLayoutOptions();
|
|
|
|
|
if (savedLayout !== "broadcast" && layouts[savedLayout]) select.value = savedLayout;
|
|
|
|
|
select.addEventListener("change", () => api.applyLayout(select.value, { navigate: true }));
|
|
|
|
|
api.applyLayout(select.value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|