@studiocms/ui
Version:
The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.
161 lines (160 loc) • 5.02 kB
JavaScript
class SingleSidebarHelper {
sidebar;
sidebarToggle;
/**
* A helper to manage the sidebar with.
* @param toggleID The ID of the element that should toggle the sidebar.
*/
constructor(toggleID) {
const sidebarContainer = document.getElementById("sui-sidebar");
if (!sidebarContainer) {
throw new Error(
`No item with ID 'sui-sidebar' found. Please add the <Sidebar> component to this page.`
);
}
this.sidebar = sidebarContainer;
if (toggleID) {
this.toggleSidebarOnClick(toggleID);
}
}
/**
* A helper function register an element which should toggle the sidebar.
* @param elementID The ID of the element that should toggle the sidebar.
*/
toggleSidebarOnClick = (elementID) => {
const navToggle = document.getElementById(elementID);
if (!navToggle) {
throw new Error(`No item with ID ${elementID} found.`);
}
this.sidebarToggle = navToggle;
this.sidebarToggle.addEventListener("click", () => {
this.sidebar.classList.toggle("active");
});
};
/**
* A helper function to hide the sidebar when an element is clicked.
* @param elementID The ID of the element that should hide the sidebar.
*/
hideSidebarOnClick = (elementID) => {
const element = document.getElementById(elementID);
if (!element) {
throw new Error(`No item with ID ${elementID} found.`);
}
element.addEventListener("click", this.hideSidebar);
};
/**
* A helper function to show the sidebar when an element is clicked.
* @param elementID The ID of the element that should show the sidebar.
*/
showSidebarOnClick = (elementID) => {
const element = document.getElementById(elementID);
if (!element) {
throw new Error(`No item with ID ${elementID} found.`);
}
element.addEventListener("click", this.showSidebar);
};
/**
* A function to hide the sidebar.
*/
hideSidebar = () => {
this.sidebar.classList.remove("active");
};
/**
* A function to show the sidebar.
*/
showSidebar = () => {
this.sidebar.classList.add("active");
};
}
class DoubleSidebarHelper {
sidebarsContainer;
/**
* A helper to manage the double sidebar with.
*/
constructor() {
const sidebarsContainer = document.getElementById("sui-sidebars");
if (!sidebarsContainer) {
throw new Error(
`No item with ID 'sidebars' found. Please add the <DoubleSidebar> component to this page.`
);
}
this.sidebarsContainer = sidebarsContainer;
}
/**
* A helper function to hide the sidebar when an element is clicked.
* @param elementID The ID of the element that should hide the sidebar.
*/
hideSidebarOnClick = (elementID) => {
const element = document.getElementById(elementID);
if (!element) {
throw new Error(`No item with ID ${elementID} found.`);
}
element.addEventListener("click", this.hideSidebar);
};
/**
* A helper function to show the outer sidebar when an element is clicked.
* @param elementID The ID of the element that should show the outer sidebar.
*/
showOuterOnClick = (elementID) => {
const element = document.getElementById(elementID);
if (!element) {
throw new Error(`No item with ID ${elementID} found.`);
}
element.addEventListener("click", this.showOuterSidebar);
};
/**
* A helper function to show the inner sidebar when an element is clicked.
* @param elementID The ID of the element that should show the inner sidebar.
*/
showInnerOnClick = (elementID) => {
const element = document.getElementById(elementID);
if (!element) {
throw new Error(`No item with ID ${elementID} found.`);
}
element.addEventListener("click", this.showInnerSidebar);
};
/**
* A helper function to toggle between the outer and inner sidebar when an element is clicked.
* @param elementID The ID of the element that should toggle the sidebar view.
*/
toggleStateOnClick = (elementID) => {
const element = document.getElementById(elementID);
if (!element) {
throw new Error(`No item with ID ${elementID} found.`);
}
element.addEventListener("click", this.toggleSidebarState);
};
/**
* A function to show the inner sidebar.
*/
showInnerSidebar = () => {
this.sidebarsContainer.classList.add("inner", "active");
};
/**
* A function to show the outer sidebar.
*/
showOuterSidebar = () => {
this.sidebarsContainer.classList.add("active");
this.sidebarsContainer.classList.remove("inner");
};
/**
* A function to toggle between the outer and inner sidebar.
*/
toggleSidebarState = () => {
if (this.sidebarsContainer.classList.contains("inner")) {
this.showOuterSidebar();
} else {
this.showInnerSidebar();
}
};
/**
* A function to hide the sidebar altogether.
*/
hideSidebar = () => {
this.sidebarsContainer.classList.remove("inner", "active");
};
}
export {
DoubleSidebarHelper,
SingleSidebarHelper
};