105 lines
3.0 KiB
JavaScript
105 lines
3.0 KiB
JavaScript
const views = Array.from(document.querySelectorAll(".view"));
|
|
const navItems = Array.from(document.querySelectorAll(".nav-item"));
|
|
const viewLinks = Array.from(document.querySelectorAll("[data-view-link]"));
|
|
|
|
function showView(name) {
|
|
views.forEach((view) => {
|
|
view.classList.toggle("is-active", view.id === `view-${name}`);
|
|
});
|
|
|
|
navItems.forEach((item) => {
|
|
item.classList.toggle("is-active", item.dataset.view === name);
|
|
});
|
|
}
|
|
|
|
navItems.forEach((item) => {
|
|
item.addEventListener("click", () => showView(item.dataset.view));
|
|
});
|
|
|
|
viewLinks.forEach((link) => {
|
|
link.addEventListener("click", () => showView(link.dataset.viewLink));
|
|
});
|
|
|
|
const appData = {
|
|
atlas: {
|
|
name: "Atlas Notes",
|
|
icon: "AN",
|
|
iconClass: "app-icon-atlas",
|
|
subtitle: "com.example.atlas - owner mobile-platform",
|
|
stable: "2.8.4",
|
|
downloads: "14,283",
|
|
platforms: "4",
|
|
},
|
|
forge: {
|
|
name: "Forge Build",
|
|
icon: "FB",
|
|
iconClass: "app-icon-forge",
|
|
subtitle: "io.example.forge - owner release-engineering",
|
|
stable: "1.12.0",
|
|
downloads: "7,421",
|
|
platforms: "3",
|
|
},
|
|
field: {
|
|
name: "FieldKit",
|
|
icon: "FK",
|
|
iconClass: "app-icon-field",
|
|
subtitle: "com.example.fieldkit - owner field-ops",
|
|
stable: "0.9.8",
|
|
downloads: "2,906",
|
|
platforms: "2",
|
|
},
|
|
ledger: {
|
|
name: "LedgerWorks",
|
|
icon: "LW",
|
|
iconClass: "app-icon-ledger",
|
|
subtitle: "net.example.ledger - owner finance-tools",
|
|
stable: "5.4.1",
|
|
downloads: "4,108",
|
|
platforms: "2",
|
|
},
|
|
};
|
|
|
|
const appRows = Array.from(document.querySelectorAll(".app-row"));
|
|
const detailIcon = document.getElementById("detail-icon");
|
|
const detailName = document.getElementById("detail-name");
|
|
const detailSubtitle = document.getElementById("detail-subtitle");
|
|
const metricStable = document.getElementById("metric-stable");
|
|
const metricDownloads = document.getElementById("metric-downloads");
|
|
const metricPlatforms = document.getElementById("metric-platforms");
|
|
|
|
function selectApp(key) {
|
|
const data = appData[key];
|
|
if (!data) return;
|
|
|
|
appRows.forEach((row) => {
|
|
row.classList.toggle("is-selected", row.dataset.app === key);
|
|
});
|
|
|
|
detailIcon.className = `app-icon app-icon-large ${data.iconClass}`;
|
|
detailIcon.textContent = data.icon;
|
|
detailName.textContent = data.name;
|
|
detailSubtitle.textContent = data.subtitle;
|
|
metricStable.textContent = data.stable;
|
|
metricDownloads.textContent = data.downloads;
|
|
metricPlatforms.textContent = data.platforms;
|
|
}
|
|
|
|
appRows.forEach((row) => {
|
|
row.addEventListener("click", () => selectApp(row.dataset.app));
|
|
});
|
|
|
|
const methodButtons = Array.from(document.querySelectorAll("#ios-methods button"));
|
|
const methodDetails = Array.from(document.querySelectorAll(".method-detail"));
|
|
|
|
methodButtons.forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
methodButtons.forEach((item) => {
|
|
item.classList.toggle("is-selected", item === button);
|
|
});
|
|
|
|
methodDetails.forEach((detail) => {
|
|
detail.classList.toggle("is-hidden", detail.id !== `method-${button.dataset.method}`);
|
|
});
|
|
});
|
|
});
|