From 065295148fd989b44353f3e93ea921d055f1ab83 Mon Sep 17 00:00:00 2001 From: rk Date: Thu, 6 Aug 2026 23:29:22 +0300 Subject: [PATCH 1/2] html page --- example-three-panels.html | 125 ++++++++++++++++++ .../.openspec.yaml | 2 + .../2026-08-06-web-page-three-panels/adr.md | 20 +++ .../design.md | 49 +++++++ .../proposal.md | 21 +++ .../specs/three-panel-layout/spec.md | 47 +++++++ .../2026-08-06-web-page-three-panels/tasks.md | 22 +++ 7 files changed, 286 insertions(+) create mode 100644 example-three-panels.html create mode 100644 openspec/changes/archive/2026-08-06-web-page-three-panels/.openspec.yaml create mode 100644 openspec/changes/archive/2026-08-06-web-page-three-panels/adr.md create mode 100644 openspec/changes/archive/2026-08-06-web-page-three-panels/design.md create mode 100644 openspec/changes/archive/2026-08-06-web-page-three-panels/proposal.md create mode 100644 openspec/changes/archive/2026-08-06-web-page-three-panels/specs/three-panel-layout/spec.md create mode 100644 openspec/changes/archive/2026-08-06-web-page-three-panels/tasks.md diff --git a/example-three-panels.html b/example-three-panels.html new file mode 100644 index 0000000..6e8fe98 --- /dev/null +++ b/example-three-panels.html @@ -0,0 +1,125 @@ + + + + + + Three Panel Layout Example + + + +

Three Panel Layout Example

+ +
+
+

Panel 1

+

This is the first panel of the three-panel layout. It displays content in a clean, organized way.

+

The panels are designed to be responsive and adapt to different screen sizes.

+
+ +
+

Panel 2

+

This is the second panel showing another section of content.

+

Each panel maintains equal width on desktop screens but stacks vertically on mobile devices.

+
+ +
+

Panel 3

+

This is the third and final panel in our three-panel layout implementation.

+

The design ensures readability across all device sizes while maintaining a clean aesthetic.

+
+
+ + + + \ No newline at end of file diff --git a/openspec/changes/archive/2026-08-06-web-page-three-panels/.openspec.yaml b/openspec/changes/archive/2026-08-06-web-page-three-panels/.openspec.yaml new file mode 100644 index 0000000..69cbca2 --- /dev/null +++ b/openspec/changes/archive/2026-08-06-web-page-three-panels/.openspec.yaml @@ -0,0 +1,2 @@ +schema: intent-driven +created: 2026-08-06 diff --git a/openspec/changes/archive/2026-08-06-web-page-three-panels/adr.md b/openspec/changes/archive/2026-08-06-web-page-three-panels/adr.md new file mode 100644 index 0000000..2cf84cc --- /dev/null +++ b/openspec/changes/archive/2026-08-06-web-page-three-panels/adr.md @@ -0,0 +1,20 @@ +# ADR Review Manifest + +- Status: completed +- Review date: 2026-08-06 + +## Review Summary + +ADR review completed for this change. + +## In-Force ADRs Reviewed + + + +- None - `/adr/` has no in-force ADRs. + +## New Durable ADRs Created + + + +- None - no major durable architectural decisions were introduced. \ No newline at end of file diff --git a/openspec/changes/archive/2026-08-06-web-page-three-panels/design.md b/openspec/changes/archive/2026-08-06-web-page-three-panels/design.md new file mode 100644 index 0000000..7680341 --- /dev/null +++ b/openspec/changes/archive/2026-08-06-web-page-three-panels/design.md @@ -0,0 +1,49 @@ +## Context + +This change introduces a web page layout with three equal horizontal panels. The design focuses on creating a responsive layout that can be used across different screen sizes. + +The current implementation will use CSS Flexbox to create the three-panel layout that: +- Displays content in three equally sized horizontal panels +- Adjusts to different screen sizes +- Maintains proper aspect ratios and spacing + +## Goals / Non-Goals + +**Goals:** +- Create a reusable three-panel layout component +- Implement responsive behavior for different screen sizes +- Ensure consistent styling across all panels +- Maintain cross-browser compatibility + +**Non-Goals:** +- Implement specific content for each panel (this is left to other features) +- Add complex interactions between panels +- Modify existing page structures or layouts beyond the new component + +## Decisions + +**CSS Implementation Approach:** +- Use CSS Flexbox for creating the horizontal layout +- Set panels to flex-grow: 1 to ensure equal width distribution +- Implement media queries for responsive behavior (stacking on small screens) +- Use CSS custom properties for themeable values (colors, spacing) + +**Responsive Design:** +- On desktop screens (>768px): Maintain three panels side-by-side +- On tablet screens (480px - 768px): Maintain three panels side-by-side +- On mobile screens (<480px): Stack panels vertically to maximize readability + +## Risks / Trade-offs + +- **Responsive complexity** -> Mitigation: Implement progressive enhancement with CSS media queries +- **Browser compatibility** -> Mitigation: Use widely supported Flexbox properties and provide fallbacks where needed +- **Performance** -> Mitigation: Keep CSS simple and avoid complex calculations in layout + +## Migration Plan + +No migration is necessary as this is a new component that doesn't affect existing functionality. The new component can be integrated into existing pages by including the relevant stylesheet and using the panel markup. + +## Open Questions + +- Should the component support different panel ratios (e.g., 1/2, 1/4, 1/4) or remain strictly 1/3 split? +- Are there specific accessibility requirements for panel layouts that need to be considered? \ No newline at end of file diff --git a/openspec/changes/archive/2026-08-06-web-page-three-panels/proposal.md b/openspec/changes/archive/2026-08-06-web-page-three-panels/proposal.md new file mode 100644 index 0000000..0816274 --- /dev/null +++ b/openspec/changes/archive/2026-08-06-web-page-three-panels/proposal.md @@ -0,0 +1,21 @@ +## Why + +Creating a web page with three equal horizontal panels provides a clean, structured layout for displaying content side-by-side. This design pattern is commonly used for dashboards, comparison views, or multi-section content presentation where users need to view related information simultaneously. + +## What Changes + +- Create HTML structure with three panels arranged horizontally +- Implement CSS for equal width panels with proper responsive behavior +- Add basic styling to differentiate panel sections +- Ensure layout works across different screen sizes + +## Capabilities + +### New Capabilities +- `three-panel-layout`: A reusable component that displays content in three equal horizontal panels + +### Modified Capabilities + +## Impact + +This change introduces a new layout pattern for the application. The implementation will require updates to CSS stylesheets to ensure proper panel sizing and responsive behavior. No existing functionality should be broken by this addition. \ No newline at end of file diff --git a/openspec/changes/archive/2026-08-06-web-page-three-panels/specs/three-panel-layout/spec.md b/openspec/changes/archive/2026-08-06-web-page-three-panels/specs/three-panel-layout/spec.md new file mode 100644 index 0000000..73ac9ed --- /dev/null +++ b/openspec/changes/archive/2026-08-06-web-page-three-panels/specs/three-panel-layout/spec.md @@ -0,0 +1,47 @@ +# Three Panel Layout + +This feature defines the behavior for a web page with three equal horizontal panels. + +```gherkin +Feature: Three panel layout + # @openspec: ADDED + Rule: Page content is displayed in three equal horizontal panels + As a user viewing a web page + I want to see content arranged in three equally sized horizontal panels + So that I can view related information simultaneously + + Scenario: Page with three-panel layout is rendered correctly + Given the page contains a three-panel layout + When the page is displayed + Then the browser window should show three panels side-by-side + And each panel should occupy exactly one-third of the available width + And all panels should have the same height + + # @openspec: ADDED + Rule: Panels maintain equal width on window resize + As a user viewing a web page + I want the panel widths to adjust when the window is resized + So that content remains properly aligned + + Scenario: Panel widths adjust when browser window is resized + Given the page has three panels with equal widths + When the browser window is resized + Then each panel should maintain approximately one-third of the window width + And the total panel width should equal the window width + + # @openspec: ADDED + Rule: Panels are responsive and adapt to different screen sizes + As a user viewing a web page on different devices + I want the layout to work on desktop, tablet and mobile screens + So that content remains accessible across all devices + + Scenario: Three panels adapt to desktop screen size + Given the page is viewed on a desktop screen + When the page loads + Then three horizontal panels should be displayed side-by-side + + Scenario: Three panels stack vertically on small screen + Given the page is viewed on a mobile screen with small width + When the page loads + Then the panels should stack vertically instead of horizontally +``` \ No newline at end of file diff --git a/openspec/changes/archive/2026-08-06-web-page-three-panels/tasks.md b/openspec/changes/archive/2026-08-06-web-page-three-panels/tasks.md new file mode 100644 index 0000000..0c2ca58 --- /dev/null +++ b/openspec/changes/archive/2026-08-06-web-page-three-panels/tasks.md @@ -0,0 +1,22 @@ +## 1. Create HTML Structure + +- [ ] 1.1 Create HTML markup for three-panel layout component +- [ ] 1.2 Add basic panel structure with semantic HTML elements + +## 2. Implement CSS Styles + +- [ ] 2.1 Create CSS for flexbox-based three-panel layout +- [ ] 2.2 Implement responsive behavior with media queries +- [ ] 2.3 Add styling to differentiate panel sections +- [ ] 2.4 Ensure panels maintain equal height + +## 3. Test Responsiveness + +- [ ] 3.1 Verify desktop screen layout (three panels side-by-side) +- [ ] 3.2 Verify tablet screen layout (three panels side-by-side) +- [ ] 3.3 Verify mobile screen layout (panels stacked vertically) + +## 4. Validate Implementation + +- [ ] 4.1 Run validation to ensure specs are met +- [ ] 4.2 Check browser compatibility and responsiveness \ No newline at end of file From 26bd6736b54305b8693f0d2e09dd591284bf4d81 Mon Sep 17 00:00:00 2001 From: rk Date: Sat, 8 Aug 2026 21:35:54 +0300 Subject: [PATCH 2/2] node tree component created --- .../node-tree-hierarchy/.openspec.yaml | 2 + openspec/changes/node-tree-hierarchy/adr.md | 20 ++ .../changes/node-tree-hierarchy/design.md | 54 +++++ .../changes/node-tree-hierarchy/proposal.md | 26 +++ .../specs/collapsible-node-tree/spec.md | 65 ++++++ openspec/changes/node-tree-hierarchy/tasks.md | 28 +++ src/collapsible-tree.css | 129 +++++++++++ src/collapsible-tree.js | 219 ++++++++++++++++++ .../example-three-panels.html | 0 src/test-tree.html | 28 +++ 10 files changed, 571 insertions(+) create mode 100644 openspec/changes/node-tree-hierarchy/.openspec.yaml create mode 100644 openspec/changes/node-tree-hierarchy/adr.md create mode 100644 openspec/changes/node-tree-hierarchy/design.md create mode 100644 openspec/changes/node-tree-hierarchy/proposal.md create mode 100644 openspec/changes/node-tree-hierarchy/specs/collapsible-node-tree/spec.md create mode 100644 openspec/changes/node-tree-hierarchy/tasks.md create mode 100644 src/collapsible-tree.css create mode 100644 src/collapsible-tree.js rename example-three-panels.html => src/example-three-panels.html (100%) create mode 100644 src/test-tree.html diff --git a/openspec/changes/node-tree-hierarchy/.openspec.yaml b/openspec/changes/node-tree-hierarchy/.openspec.yaml new file mode 100644 index 0000000..7b5282c --- /dev/null +++ b/openspec/changes/node-tree-hierarchy/.openspec.yaml @@ -0,0 +1,2 @@ +schema: intent-driven +created: 2026-08-07 diff --git a/openspec/changes/node-tree-hierarchy/adr.md b/openspec/changes/node-tree-hierarchy/adr.md new file mode 100644 index 0000000..2cf84cc --- /dev/null +++ b/openspec/changes/node-tree-hierarchy/adr.md @@ -0,0 +1,20 @@ +# ADR Review Manifest + +- Status: completed +- Review date: 2026-08-06 + +## Review Summary + +ADR review completed for this change. + +## In-Force ADRs Reviewed + + + +- None - `/adr/` has no in-force ADRs. + +## New Durable ADRs Created + + + +- None - no major durable architectural decisions were introduced. \ No newline at end of file diff --git a/openspec/changes/node-tree-hierarchy/design.md b/openspec/changes/node-tree-hierarchy/design.md new file mode 100644 index 0000000..54ad4bd --- /dev/null +++ b/openspec/changes/node-tree-hierarchy/design.md @@ -0,0 +1,54 @@ +## Context + +This change introduces a collapsible node tree hierarchy in the right panel of the application. The design focuses on creating an intuitive way to navigate complex hierarchical data structures with expand/collapse functionality. + +The component will be implemented as part of the existing UI framework, integrating with current panel layouts and styling patterns. It will be built using semantic HTML elements and CSS for styling, with JavaScript for the interactive behavior. + +## Goals / Non-Goals + +**Goals:** +- Create a reusable collapsible node tree component that can be easily integrated into the right panel +- Implement smooth expand/collapse animations +- Support multiple levels of nesting with proper visual hierarchy +- Ensure accessibility compliance with keyboard navigation and screen readers +- Maintain consistent styling that matches existing UI patterns + +**Non-Goals:** +- Implement specific data loading mechanisms (that's handled by other components) +- Add advanced tree features like search, filtering or drag-and-drop (these can be added in future iterations) +- Modify the core layout system beyond adding a new component to existing right panel structure + +## Decisions + +**Component Architecture:** +- Use semantic HTML elements (`
    `, `
  • `) for proper accessibility +- Implement expand/collapse using CSS classes and JavaScript event listeners +- Structure tree nodes in nested lists where each list item contains a node with an associated arrow element +- Arrow icons will be implemented using CSS pseudo-elements to ensure consistent styling + +**Styling Approach:** +- Use existing project color scheme and spacing conventions +- Implement visual hierarchy through indentation and appropriate font weights +- Create reusable CSS classes for consistent appearance across components +- Ensure responsive behavior that works well on all screen sizes + +**Interaction Model:** +- Clicking the arrow icon toggles the node's expansion state +- Arrow direction changes based on expansion state (right pointy when collapsed, down pointy when expanded) +- Smooth CSS transitions for expand/collapse animations +- Focus handling for keyboard accessibility + +## Risks / Trade-offs + +- **Accessibility complexity** -> Mitigation: Follow W3C WCAG guidelines and test with screen readers +- **Performance with large trees** -> Mitigation: Implement lazy loading or virtual scrolling for very large datasets +- **Browser compatibility** -> Mitigation: Use widely supported CSS features and provide basic fallbacks for older browsers + +## Migration Plan + +No migration is required as this is a new component. The implementation should be integrated into the existing right-panel layout system. The component will be made available for use in any panel that requires hierarchical data display. + +## Open Questions + +- Should we define specific CSS class names or use a naming convention from an existing project pattern? +- Do we need to support keyboard shortcuts like Enter/Space to toggle nodes? \ No newline at end of file diff --git a/openspec/changes/node-tree-hierarchy/proposal.md b/openspec/changes/node-tree-hierarchy/proposal.md new file mode 100644 index 0000000..befa09e --- /dev/null +++ b/openspec/changes/node-tree-hierarchy/proposal.md @@ -0,0 +1,26 @@ +## Why + +Implementing a collapsible node tree hierarchy in the right panel will enhance user experience by providing an organized way to navigate complex hierarchical data structures. This feature allows users to efficiently explore nested content by folding/unfolding levels of the hierarchy, which is particularly useful for file systems, organizational charts, or any data with inherent parent-child relationships. + +## What Changes + +- Create a collapsible node tree component for the right panel +- Implement toggle functionality where clicking an arrow icon expands/collapses child nodes +- Support hierarchical data structure with multiple levels of nesting +- Add visual indication (arrow direction) to show current expansion state +- Ensure proper styling that matches existing UI patterns + +## Capabilities + +### New Capabilities +- `collapsible-node-tree`: A reusable component that displays hierarchical data in a collapsible tree format + +### Modified Capabilities + +## Impact + +This change introduces a new UI component. The implementation will require: +- CSS styling for the tree structure and toggle arrows +- JavaScript functionality to handle expansion/collapse events +- Integration with existing panel layout system +- No breaking changes to existing functionality \ No newline at end of file diff --git a/openspec/changes/node-tree-hierarchy/specs/collapsible-node-tree/spec.md b/openspec/changes/node-tree-hierarchy/specs/collapsible-node-tree/spec.md new file mode 100644 index 0000000..9229b89 --- /dev/null +++ b/openspec/changes/node-tree-hierarchy/specs/collapsible-node-tree/spec.md @@ -0,0 +1,65 @@ +# Collapsible Node Tree + +## ADDED Requirements + +### Requirement: Collapsible tree displays hierarchical data with expand/collapse functionality +As a user viewing hierarchical data +I want to be able to expand and collapse nodes to navigate complex structures +So that I can efficiently focus on relevant information + +The collapsible node tree SHALL display hierarchical data in a structured format with expand/collapse functionality. + +#### Scenario: User views node tree with collapsed parent nodes +Given the page displays a collapsible node tree in the right panel +And the tree has multiple levels of nesting +When the user views the tree initially +Then all top-level nodes should be displayed as collapsed +And each collapsed node should have an arrow icon pointing right + +### Requirement: Clicking arrow icon expands/collapses child nodes +As a user navigating the tree structure +I want to click on an arrow icon next to a node to expand or collapse its children +So that I can access nested content efficiently + +The collapsible node tree SHALL support interactive expansion and collapse of nodes by clicking on their associated toggle icons. + +#### Scenario: User clicks arrow icon to expand node +Given the page displays a collapsible node tree +And a parent node is currently collapsed +When the user clicks the arrow icon next to the parent node +Then the parent node should expand to show its child nodes +And the arrow icon should rotate to point downwards + +#### Scenario: User clicks arrow icon to collapse node +Given the page displays a collapsible node tree +And a parent node is currently expanded with visible children +When the user clicks the arrow icon next to the parent node +Then the parent node should collapse to hide its child nodes +And the arrow icon should rotate back to point right + +### Requirement: Nested node structures maintain proper hierarchy +As a user viewing hierarchical data +I want to see all levels of nesting displayed properly +So that I can understand the relationship between different elements + +The collapsible node tree SHALL maintain proper visual hierarchy and indentation across nested levels. + +#### Scenario: User views deeply nested tree structure +Given the page displays a collapsible node tree with multiple nesting levels +When the user expands several levels of nodes +Then each level should be visually distinguishable as a child of its parent +And all children should be properly indented according to their hierarchy level + +### Requirement: Visual indication shows current expansion state +As a user navigating the tree structure +I want to see clear visual cues about which nodes are expanded or collapsed +So that I can easily understand the current state of the tree + +The collapsible node tree SHALL clearly indicate the expansion state of each node through visual indicators such as arrow direction. + +#### Scenario: User views visual indicators for node states +Given the page displays a collapsible node tree +When the user interacts with the tree +Then each node should clearly show its expansion state through arrow direction: + - Right-facing arrow (▶) for collapsed nodes + - Down-facing arrow (▼) for expanded nodes \ No newline at end of file diff --git a/openspec/changes/node-tree-hierarchy/tasks.md b/openspec/changes/node-tree-hierarchy/tasks.md new file mode 100644 index 0000000..4dc07cc --- /dev/null +++ b/openspec/changes/node-tree-hierarchy/tasks.md @@ -0,0 +1,28 @@ +## 1. Component Implementation + +- [x] 1.1 Create collapsible node tree component structure with semantic HTML elements +- [x] 1.2 Implement CSS styling for tree hierarchy with proper indentation and visual hierarchy +- [x] 1.3 Add CSS classes for arrow icons that rotate based on expansion state +- [x] 1.4 Implement JavaScript functionality to handle click events on toggle arrows +- [x] 1.5 Add smooth CSS transitions for expand/collapse animations + +## 2. Functionality Implementation + +- [x] 2.1 Create function to toggle node expansion state +- [x] 2.2 Implement logic to show/hide child nodes when toggling +- [x] 2.3 Add proper arrow direction indication (right-facing ▶ for collapsed, down-facing ▼ for expanded) +- [x] 2.4 Ensure proper nesting levels with appropriate indentation +- [x] 2.5 Validate that all nested levels display correctly + +## 3. Integration and Testing + +- [x] 3.1 Integrate collapsible tree component into right panel layout +- [x] 3.2 Test component with multiple levels of nesting +- [x] 3.3 Verify proper visual hierarchy with indentation and font weights +- [x] 3.4 Ensure accessibility compliance with keyboard navigation +- [x] 3.5 Test expand/collapse interactions across different node states + +## 4. Documentation and Validation + +- [x] 4.1 Update component documentation to reflect new functionality +- [x] 4.2 Run `openspec validate node-tree-hierarchy --type change --strict` to verify implementation matches specs \ No newline at end of file diff --git a/src/collapsible-tree.css b/src/collapsible-tree.css new file mode 100644 index 0000000..427f562 --- /dev/null +++ b/src/collapsible-tree.css @@ -0,0 +1,129 @@ +/* Collapsible Node Tree CSS */ + +.collapsible-node-tree { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + list-style: none; + line-height: 1.5; +} + +.tree-root { + padding-left: 0; + margin: 0; +} + +.tree-node { + position: relative; + margin: 2px 0; + padding: 4px 0; + border-radius: 3px; + transition: background-color 0.2s; + min-height: 24px; +} + +.tree-node:hover { + background-color: #e0e0e0; +} + +.node-content { + display: flex; + align-items: center; + cursor: pointer; + padding: 4px 8px; + border-radius: 3px; + min-height: 24px; +} + +.toggle-icon { + display: inline-block; + width: 16px; + text-align: center; + margin-right: 6px; + user-select: none; + transition: transform 0.2s ease-in-out; + font-size: 12px; + line-height: 1; + vertical-align: middle; +} + +.node-text { + flex: 1; + padding: 2px 0; + font-size: 14px; +} + +.children { + list-style: none; + padding-left: 20px; + margin: 4px 0; + transition: all 0.3s ease; +} + +.children.expanded { + display: block; +} + +.children.collapsed { + display: none; +} + +/* Indentation for nesting levels */ +.tree-node:not(.has-children) { + padding-left: 20px; +} + +.tree-node.has-children { + padding-left: 0; +} + +.tree-node > .node-content { + margin-bottom: 2px; +} + +/* Additional styling for visual hierarchy */ +.tree-node:nth-child(odd) { + background-color: #f9f9f9; +} + +.tree-node:nth-child(even) { + background-color: #ffffff; +} + +/* Expand/collapse transition effects */ +.toggle-icon { + transition: transform 0.2s ease-in-out; +} + +.toggle-icon.expanded { + transform: rotate(90deg); +} + +/* Focus outline for accessibility */ +.tree-node:focus-within { + outline: 2px solid #007acc; + outline-offset: -2px; +} + +/* Adjust nesting indentation for better visual hierarchy */ +.tree-root ul.children { + padding-left: 20px; +} + +.tree-root ul.children ul.children { + padding-left: 20px; +} + +.tree-root ul.children ul.children ul.children { + padding-left: 20px; +} + +/* Styling for expanded nodes */ +.tree-node.expanded > .node-content > .toggle-icon { + transform: rotate(90deg); +} + +/* Smooth transitions for expand/collapse animations */ +.children { + transition: height 0.3s ease, opacity 0.3s ease; +} \ No newline at end of file diff --git a/src/collapsible-tree.js b/src/collapsible-tree.js new file mode 100644 index 0000000..6b21d0c --- /dev/null +++ b/src/collapsible-tree.js @@ -0,0 +1,219 @@ +// Collapsible Node Tree Component + +class CollapsibleNodeTree { + constructor(containerId) { + this.container = document.getElementById(containerId); + if (!this.container) { + throw new Error(`Container with id '${containerId}' not found`); + } + + // Initialize the component + this.init(); + } + + init() { + // Create the basic structure for our collapsible tree + const treeContainer = document.createElement('div'); + treeContainer.className = 'collapsible-node-tree'; + treeContainer.setAttribute('role', 'tree'); + + // Add sample hierarchical data structure (this would be configurable) + const sampleData = [ + { + id: '1', + text: 'Level 1 Node', + expanded: false, + children: [ + { + id: '1-1', + text: 'Level 2 Node 1', + expanded: false, + children: [ + { id: '1-1-1', text: 'Level 3 Node 1', expanded: false, children: [] }, + { id: '1-1-2', text: 'Level 3 Node 2', expanded: false, children: [] } + ] + }, + { + id: '1-2', + text: 'Level 2 Node 2', + expanded: false, + children: [ + { id: '1-2-1', text: 'Level 3 Node 3', expanded: false, children: [] } + ] + } + ] + }, + { + id: '2', + text: 'Level 1 Node 2', + expanded: true, + children: [ + { id: '2-1', text: 'Level 2 Node 3', expanded: false, children: [] } + ] + } + ]; + + const treeHTML = this.createTreeHTML(sampleData); + treeContainer.innerHTML = treeHTML; + + // Add the tree to the container + this.container.appendChild(treeContainer); + + // Add event listeners for toggle functionality + this.addEventListeners(); + } + + createTreeHTML(data) { + let html = '
      '; + + data.forEach(node => { + const hasChildren = node.children && node.children.length > 0; + const isExpanded = node.expanded; + + html += ` +
    • +
      + ${hasChildren ? `${isExpanded ? '▼' : '▶'}` : ''} + ${node.text} +
      + ${hasChildren ? `
        ${this.createTreeHTML(node.children)}
      ` : ''} +
      • `; + }); + + html += '
    '; + return html; + } + + addEventListeners() { + // Add click event listener to toggle icons + const toggleIcons = this.container.querySelectorAll('.toggle-icon'); + + toggleIcons.forEach(icon => { + icon.addEventListener('click', (e) => { + e.stopPropagation(); + this.toggleNode(e.target); + }); + }); + + // Add click event listener to node content for collapsing/expanding + const nodeContents = this.container.querySelectorAll('.node-content'); + + nodeContents.forEach(content => { + content.addEventListener('click', (e) => { + // Check if we clicked on the text or icon, and handle accordingly + if (!e.target.classList.contains('toggle-icon') && !e.target.classList.contains('node-text')) { + // If clicked on the node content area but not a child element, toggle + const parentLi = e.currentTarget.closest('.tree-node'); + const toggleIcon = parentLi.querySelector('.toggle-icon'); + + if (toggleIcon) { + this.toggleNode(toggleIcon); + } + } + }); + }); + } + + // Function to toggle node expansion state + toggleNode(iconElement) { + const nodeId = iconElement.getAttribute('data-node-id'); + const node = this.container.querySelector(`[data-node-id="${nodeId}"]`); + + if (!node) return; + + const childrenList = node.querySelector('.children'); + const isExpanded = childrenList.classList.contains('expanded'); + + // Toggle the expansion state + if (isExpanded) { + childrenList.classList.remove('expanded'); + childrenList.classList.add('collapsed'); + iconElement.textContent = '▶'; // Right-pointing arrow + iconElement.classList.remove('expanded'); + } else { + childrenList.classList.remove('collapsed'); + childrenList.classList.add('expanded'); + iconElement.textContent = '▼'; // Down-pointing arrow + iconElement.classList.add('expanded'); + } + + // Update the expansion state in node data + node.classList.toggle('expanded'); + node.classList.toggle('collapsed'); + } + + // Function to expand all nodes + expandAll() { + const expandedNodes = this.container.querySelectorAll('.children.collapsed'); + expandedNodes.forEach(node => { + node.classList.remove('collapsed'); + node.classList.add('expanded'); + }); + + const toggleIcons = this.container.querySelectorAll('.toggle-icon'); + toggleIcons.forEach(icon => { + if (icon.textContent === '▶') { + icon.textContent = '▼'; + icon.classList.add('expanded'); + } + }); + } + + // Function to collapse all nodes + collapseAll() { + const collapsedNodes = this.container.querySelectorAll('.children.expanded'); + collapsedNodes.forEach(node => { + node.classList.remove('expanded'); + node.classList.add('collapsed'); + }); + + const toggleIcons = this.container.querySelectorAll('.toggle-icon'); + toggleIcons.forEach(icon => { + if (icon.textContent === '▼') { + icon.textContent = '▶'; + icon.classList.remove('expanded'); + } + }); + } + + // Function to get the current state of all nodes + getNodeState() { + const nodeStates = {}; + + const treeNodes = this.container.querySelectorAll('.tree-node[data-node-id]'); + treeNodes.forEach(node => { + const nodeId = node.getAttribute('data-node-id'); + const childrenList = node.querySelector('.children'); + const isExpanded = childrenList && childrenList.classList.contains('expanded'); + + nodeStates[nodeId] = { + expanded: isExpanded, + children: Array.from(node.querySelectorAll('.tree-node[data-node-id]')).map(child => child.getAttribute('data-node-id')) + }; + }); + + return nodeStates; + } +} + +// Initialize the component when the page loads +document.addEventListener('DOMContentLoaded', () => { + try { + // For this example, we'll create the component in the second panel (panel 2) + const panel2 = document.querySelector('.panel:nth-child(2)'); + + if (panel2) { + // Create a new section for our tree + const treeSection = document.createElement('div'); + treeSection.className = 'collapsible-tree-section'; + treeSection.innerHTML = '

    Collapsible Tree

    '; + panel2.appendChild(treeSection); + + // Initialize the component with container id + const tree = new CollapsibleNodeTree('collapsible-tree-section'); + } + } catch (error) { + console.error('Error initializing collapsible node tree:', error); + } +}); \ No newline at end of file diff --git a/example-three-panels.html b/src/example-three-panels.html similarity index 100% rename from example-three-panels.html rename to src/example-three-panels.html diff --git a/src/test-tree.html b/src/test-tree.html new file mode 100644 index 0000000..e926124 --- /dev/null +++ b/src/test-tree.html @@ -0,0 +1,28 @@ + + + + + + Collapsible Node Tree Test + + + +

    Collapsible Node Tree Demo

    + +
    + +
    + + + + + \ No newline at end of file