FEATURE Introducing component

resources/js/singles/post-toolbar.ts

@@ -0,0 +1,34 @@
+export function handlePostToolbar() {
+  observeTabsButtons();
+}
+
+function observeTabsButtons(): void {
+  const toolbarButtons = document.querySelectorAll('#post-toolbar button[role="tab"]');
+  if (!toolbarButtons) return;
+
+  toolbarButtons.forEach((toolbarButton) => {
+    toolbarButton.addEventListener('click', () => {
+      const currentTabValue = toolbarButton.getAttribute('data-tab') as string;
+      toggleActiveTab(toolbarButton as HTMLElement);
+      handleActiveTabContent(currentTabValue as string);
+    });
+  });
+}
+
+function toggleActiveTab(toolbarButton: HTMLElement): void {
+  resetActiveToolbarButtons();
+  toolbarButton.setAttribute('aria-selected', 'true');
+}
+
+function resetActiveToolbarButtons(): void {
+  const toolbarButtons = document.querySelectorAll('#post-toolbar button[role="tab"]');
+  if (!toolbarButtons) return;
+  toolbarButtons.forEach((toolbarButton) => {
+    toolbarButton.setAttribute('aria-selected', 'false');
+  });
+}
+
+function handleActiveTabContent(tab: string): void {
+  const contentWrapper = document.querySelector('.content-wrapper');
+  contentWrapper?.setAttribute('data-active-tab', tab);
+}