From 6e879396b7767688bce9f0d2cdebbd990c193676 Mon Sep 17 00:00:00 2001
From: Josep Boix Requesens <jspboix@gmail.com>
Date: Sat, 6 Apr 2024 01:49:30 +0200
Subject: [PATCH] feat: add toggle pane button for theme editor file navigation

Introduces a new `TogglePaneButton` component, aimed at displaying a virtual file system in order to
edit the multiple `scss` files found in the pillarbox default theme. When a file in the tree view is
selected, its content is loaded into the theme editor for modification and previewing.

***Example***
```html
<toggle-pane-button label="Display a message">
  <span>Hello World!</span>
</toggle-pane-button>
``
---
 .prebuild.js                               |  5 +-
 index.html                                 |  7 +-
 scss/index.scss                            |  6 ++
 src/components/css-editor.js               | 37 +++++----
 src/components/preview-box.js              |  4 +-
 src/components/resizable-bar.js            |  6 ++
 src/components/toggle-pane-button.js       | 95 ++++++++++++++++++++++
 src/components/toggle-pane-button.scss     | 57 +++++++++++++
 src/components/tree-view.js                | 18 ++--
 src/components/tree-view.scss              |  2 +-
 src/index.js                               | 22 ++++-
 src/workspace/sass-workspace-compiler.js   | 11 +--
 test/components/preview-box.test.js        |  2 +-
 test/components/toggle-pane-button.test.js | 68 ++++++++++++++++
 14 files changed, 303 insertions(+), 37 deletions(-)
 create mode 100644 src/components/toggle-pane-button.js
 create mode 100644 src/components/toggle-pane-button.scss
 create mode 100644 test/components/toggle-pane-button.test.js

diff --git a/.prebuild.js b/.prebuild.js
index 575d2a8..fdd9765 100644
--- a/.prebuild.js
+++ b/.prebuild.js
@@ -3,7 +3,8 @@
  * recursively includes all the files and their content to create json
  * representation of the workspace for the theme editor.
  */
-import { readdirSync, statSync, readFileSync, writeFileSync } from 'fs';
+import { mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'fs';
+import * as path from 'path';
 import { join } from 'path';
 
 const isDebugEnabled = process.argv.includes('--debug');
@@ -55,9 +56,11 @@ try {
 
   // Define the output path for the generated workspace structure JSON file.
   const outputPath = './src/assets/pillarbox-scss-workspace.json';
+  const outputDir = path.dirname(outputPath);
 
   // Write the structured workspace to a JSON file, pretty-printed.
   console.log(`Writing the workspace structure to ${outputPath}...`);
+  mkdirSync(outputDir, { recursive: true });
   writeFileSync(outputPath, JSON.stringify(structure, null, 2), 'utf-8');
 
   console.log(`Successfully wrote the workspace structure to ${outputPath}`);
diff --git a/index.html b/index.html
index 50b3161..2a5badd 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,12 @@ <h1><img src="/pillarbox-logo.webp" class="logo" alt="Pillarbox logo"/> Pillarbo
 <main>
   <resizable-split-view>
     <section slot="left">
-      <h2>Craft your theme</h2>
+      <div class="craft-title-container">
+        <h2>Craft your theme</h2>
+        <toggle-pane-button title="Select a file to edit" id="navigation-button">
+          <tree-view id="navigation"></tree-view>
+        </toggle-pane-button>
+      </div>
       <css-editor id="editor"></css-editor>
     </section>
     <section slot="right">
diff --git a/scss/index.scss b/scss/index.scss
index fa9bc2e..afd7bdd 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -81,6 +81,12 @@ footer {
   }
 }
 
+.craft-title-container {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+}
+
 /*
  * TODO: Adjust .monaco-container dimensions to ensure full parent coverage.
  *
diff --git a/src/components/css-editor.js b/src/components/css-editor.js
index ad409df..24449fd 100644
--- a/src/components/css-editor.js
+++ b/src/components/css-editor.js
@@ -4,18 +4,6 @@ import * as monaco from 'monaco-editor';
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
 
-const initialStyle = `
-/* Turn the progress bar white */
-.pillarbox-js .vjs-play-progress { 
-  color: white;
-  background-color: white; 
-}
-
-/* Show the scrubber */
-.pillarbox-js .vjs-play-progress::before {
-  font-size: 0.9em;
-}`.trim();
-
 self.MonacoEnvironment = {
   getWorker: function(_, label) {
     if (label === 'css' || label === 'scss' || label === 'less') {
@@ -45,6 +33,14 @@ class CssEditor extends LitElement {
     theme: { type: String }
   };
 
+  /**
+   * Holds the initial value passed to this css editor.
+   *
+   * @type string
+   * @private
+   */
+  #initialValue = '';
+
   constructor() {
     super();
     this.container = createRef();
@@ -93,7 +89,20 @@ class CssEditor extends LitElement {
    * @returns {String} The current content of the editor.
    */
   getValue() {
-    return this.editor ? this.editor.getValue() : initialStyle;
+    return this.editor ? this.editor.getValue() : this.#initialValue;
+  }
+
+  /**
+   * Set the new content of the Monaco Editor.
+   *
+   * @param value {string} The new content fo the editor.
+   */
+  setValue(value) {
+    if (!this.editor) {
+      this.#initialValue = value;
+    } else {
+      this.editor.setValue(value);
+    }
   }
 
   /**
@@ -104,7 +113,7 @@ class CssEditor extends LitElement {
     super.firstUpdated(_changedProperties);
 
     this.editor = monaco.editor.create(this.container.value, {
-      value: initialStyle,
+      value: this.#initialValue,
       language: 'scss',
       theme: this.getTheme(),
       automaticLayout: true,
diff --git a/src/components/preview-box.js b/src/components/preview-box.js
index a32c4d5..b96a138 100644
--- a/src/components/preview-box.js
+++ b/src/components/preview-box.js
@@ -1,7 +1,6 @@
 import { html, LitElement } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import pillarbox from '@srgssr/pillarbox-web';
-import pbStyle from '@srgssr/pillarbox-web/dist/pillarbox.min.css?inline';
 
 /**
  * `PreviewBox` is a LitElement component that creates a pillarbox player
@@ -32,7 +31,6 @@ class PreviewBox extends LitElement {
    */
   render() {
     return html`
-      <style>${pbStyle}</style>
       <style>${this.appliedCss}</style>
       <video id="main-player"
              class="pillarbox-js"
@@ -52,7 +50,7 @@ class PreviewBox extends LitElement {
     // Initializes pillarbox with the video element and sets the video source.
     this.player = pillarbox(this.pillarboxRef.value, { muted: true });
     this.player.src({
-      src: 'urn:rts:video:14764404',
+      src: 'urn:rts:video:14318206',
       type: 'srgssr/urn'
     });
   }
diff --git a/src/components/resizable-bar.js b/src/components/resizable-bar.js
index a2a8a18..7f45445 100644
--- a/src/components/resizable-bar.js
+++ b/src/components/resizable-bar.js
@@ -13,6 +13,12 @@ import resizableBarStyle from './resizable-bar.scss?inline';
  *
  * @part resizer - The resizer element.
  *
+ * @cssproperty [--resizable-bar-margin-inline=1em] - The margin on the sides of the resizable bar.
+ * @cssproperty [--resizable-bar-resizer-bg-color=#575454] - The background color of the resizable bar.
+ * @cssproperty [--resizable-bar-resizer-width=0.3em] - The width of the resizable bar.
+ * @cssproperty [--resizable-bar-resizer-height=50%] - The height of the resizable bar.
+ * @cssproperty [--resizable-bar-resizer-border-radius=5px] - The border radius of the resizable bar.
+ *
  * @example
  * <resizable-bar></resizable-bar>
  */
diff --git a/src/components/toggle-pane-button.js b/src/components/toggle-pane-button.js
new file mode 100644
index 0000000..933de66
--- /dev/null
+++ b/src/components/toggle-pane-button.js
@@ -0,0 +1,95 @@
+import { html, LitElement, unsafeCSS } from 'lit';
+import togglePaneButtonStyle from './toggle-pane-button.scss?inline';
+
+/**
+ * A LitElement component that creates a toggle button to show or hides a popup pane.
+ * It changes its state when clicked, and can display custom content within a popup.
+ *
+ * @element toggle-pane-button
+ *
+ * @property {String} title - The title of the button, shown as a tooltip.
+ * @property {String} label - The visible label of the button.
+ * @property {Boolean} opened - Indicates whether the popup is currently visible. Reflects to attribute.
+ *
+ * @attribute {Boolean} opened - Reflects the `opened` property to an attribute. Determines the visibility of the popup.
+ *
+ * @slot - Default slot for the content of the popup.
+ *
+ * @part button - The button element that can be styled independently.
+ * @part popup - The popup element that appears or hides based on the `opened` state.
+ *
+ * @cssproperty [--button-background=#40729d] - The background color of the button.
+ * @cssproperty [--button-hover-background=#305273] - The background color of the button on hover.
+ * @cssproperty [--button-color=#fff] - The text color of the button.
+ * @cssproperty [--popup-background=#333] - The background color of the popup element.
+ * @cssproperty [--popup-border=1px solid #666] - The border style for the popup element.
+ * @cssproperty [--popup-border-radius=0.5em] - The border radius of the popup element.
+ * @cssproperty [--popup-z-index=1] - The z-index of the popup element, controlling its stack order.
+ *
+ * @example
+ * <toggle-pane-button label="Display a message">
+ *   <span>Hello World!</span>
+ * </toggle-pane-button>
+ */
+class TogglePaneButton extends LitElement {
+  /**
+   * A private method to close the popup.
+   * @type {Function}
+   * @private
+   */
+  #closePopup = () => { this.opened = false; };
+
+  static styles = unsafeCSS(togglePaneButtonStyle);
+
+  static properties = {
+    opened: { type: Boolean, reflect: true },
+    title: { type: String },
+    label: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.opened = false;
+  }
+
+  render() {
+    return html`
+      <button part="button" 
+              @click="${() => { this.opened = !this.opened; }}"
+              title="${this.title}">
+        ${this.label}
+      </button>
+      <div part="popup">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+
+    if (_changedProperties.has('opened')) {
+      this.#togglePopup();
+    }
+  }
+
+  #togglePopup() {
+    if (this.opened) {
+      document.addEventListener('click', this.#closePopup, { once: true });
+    } else {
+      document.removeEventListener('click', this.#closePopup);
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', e => e.stopPropagation());
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this.#closePopup);
+  }
+}
+
+customElements.define('toggle-pane-button', TogglePaneButton);
diff --git a/src/components/toggle-pane-button.scss b/src/components/toggle-pane-button.scss
new file mode 100644
index 0000000..c8a1e46
--- /dev/null
+++ b/src/components/toggle-pane-button.scss
@@ -0,0 +1,57 @@
+:host {
+  --button-background: #40729d;
+  --button-hover-background: #305273;
+  --button-color: #fff;
+  --button-border-radius: 0.5em;
+  --popup-background: #333;
+  --popup-border: 1px solid #666;
+  --popup-border-radius: 0.5em;
+  --popup-z-index: 1;
+}
+
+[part="button"] {
+  position: relative; /* Needed for the chevron */
+  padding: 1em;
+  color: var(--button-foreground);
+  background: var(--button-background);
+  border: none;
+  border-radius: var(--button-border-radius);
+  cursor: pointer;
+  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+[part="button"]::after {
+  display: inline-block;
+  width: 0.3em;
+  height: 0.3em;
+  border-right: 2px solid currentcolor;
+  border-bottom: 2px solid currentcolor;
+  transform: translate(50%, -50%) rotate(45deg);
+  transition: transform 0.3s ease;
+  content: "";
+  margin-inline: 0.5em;
+}
+
+[part="button"]:hover {
+  background-color: var(--button-hover-background);
+}
+
+[part="popup"] {
+  position: absolute;
+  z-index: var(--popup-z-index);
+  display: none;
+  margin-top: 5px;
+  padding: 0.7em;
+  background: var(--popup-background);
+  border: var(--popup-border);
+  border-radius: var(--popup-border-radius);
+  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
+}
+
+:host([opened]) [part="popup"] {
+  display: block;
+}
+
+:host([opened]) [part="button"]::after {
+  transform: translate(50%, -50%) rotate(225deg);
+}
diff --git a/src/components/tree-view.js b/src/components/tree-view.js
index 44d1952..63c4d4c 100644
--- a/src/components/tree-view.js
+++ b/src/components/tree-view.js
@@ -12,11 +12,19 @@ import { partMap } from './component-utils.js';
  *
  * @fires TreeView#selected Dispatched when a non-folder item is clicked, with the item's data as detail.
  *
+ * @property {Array<TreeItem>} items Holds the tree structure data.
+ *
  * @part item - The item element.
  * @part item-name - The element displaying the item's name.
  * @part root - The root element of the tree.
  *
- * @property {Array<TreeItem>} items Holds the tree structure data.
+ * @cssproperty [--tree-background-color=#333] - The background color of the tree component.
+ * @cssproperty [--tree-item-hover-color=#555] - The background color of a tree item when hovered.
+ * @cssproperty [--tree-item-selected-color=#666] - The background color of a tree item when selected.
+ * @cssproperty [--tree-folder-icon='📁'] - The icon used for folders in the tree.
+ * @cssproperty [--tree-file-icon='📄'] - The icon used for files in the tree.
+ * @cssproperty [--tree-icon-size=1em] - The size of the icons in the tree.
+ * @cssproperty [--tree-indentation=1.5em] - The indentation size for nested items in the tree.
  *
  * @example
  * // Example of setting `items` for the TreeView component:
@@ -33,11 +41,9 @@ import { partMap } from './component-utils.js';
 class TreeView extends LitElement {
   static styles = unsafeCSS(treeViewStyle);
 
-  static get properties() {
-    return {
-      items: { type: Array }
-    };
-  }
+  static properties = {
+    items: { type: Array }
+  };
 
   constructor() {
     super();
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index dada156..e9fd1d6 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -14,6 +14,7 @@
   margin: 0;
   padding: 0;
   list-style-type: none;
+  background-color: var(--tree-background-color);
 }
 
 [part~="item"] {
@@ -59,7 +60,6 @@
 }
 
 /* Optional: Add a "selected" class to items when clicked to highlight the current selection */
-
 [part~="item-name"].selected {
   background-color: var(--tree-item-selected-color);
 }
diff --git a/src/index.js b/src/index.js
index 06fd3f5..a41d771 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,11 +2,29 @@ import './components/css-editor.js';
 import './components/resizable-split-view.js';
 import './components/preview-box.js';
 import './components/tree-view.js';
+import './components/toggle-pane-button.js';
+import sassCompiler from './workspace/workspace.js';
 
+let currentItem = sassCompiler.mainScss;
+
+const navigation = document.getElementById('navigation');
+const navigationButton = document.getElementById('navigation-button');
 const editor = document.getElementById('editor');
 const preview = document.getElementById('preview');
 
-preview.appliedCss = editor.getValue();
+navigation.items = sassCompiler.workspace;
+navigationButton.label = currentItem.name;
+editor.setValue(currentItem.content);
+
+navigation.addEventListener('selected', (event) => {
+  currentItem = event.detail;
+  navigationButton.label = currentItem.name;
+  editor.setValue(currentItem.content);
+  navigationButton.opened = false;
+});
+
+preview.appliedCss = sassCompiler.compile();
 editor.addEventListener('value-changed', (event) => {
-  preview.appliedCss = event.detail.value;
+  currentItem.content = event.detail.value;
+  preview.appliedCss = sassCompiler.compile();
 });
diff --git a/src/workspace/sass-workspace-compiler.js b/src/workspace/sass-workspace-compiler.js
index 1438c91..72fdba3 100644
--- a/src/workspace/sass-workspace-compiler.js
+++ b/src/workspace/sass-workspace-compiler.js
@@ -7,6 +7,7 @@ import { VirtualSassImporter } from './virtual-sass-importer.js';
  *
  * @property workspace The virtual workspace. Changes in the `content` of any
  *                     file will be reflected once the CSS compiled.
+ * @property mainScss The main scss file.
  *
  * @example
  * // Define your workspace
@@ -36,12 +37,6 @@ export class SassWorkspaceCompiler {
    * @type {import('sass/types/importer').Importer}
    */
   #importer;
-  /**
-   * The main scss file.
-   *
-   * @type {TreeItem}
-   */
-  #mainScss;
 
   /**
    * Initializes a new instance of the SassWorkspaceCompiler.
@@ -53,7 +48,7 @@ export class SassWorkspaceCompiler {
   constructor(workspace, main, resources = {}) {
     this.workspace = workspace;
     this.#importer = new VirtualSassImporter(workspace, resources);
-    this.#mainScss = this.workspace.find(item => item.name === main);
+    this.mainScss = this.workspace.find(item => item.name === main);
   }
 
   /**
@@ -67,6 +62,6 @@ export class SassWorkspaceCompiler {
       style: 'compressed'
     };
 
-    return sass.compileString(this.#mainScss.content, opts).css;
+    return sass.compileString(this.mainScss.content, opts).css;
   }
 }
diff --git a/test/components/preview-box.test.js b/test/components/preview-box.test.js
index a81254c..7cc58c5 100644
--- a/test/components/preview-box.test.js
+++ b/test/components/preview-box.test.js
@@ -33,7 +33,7 @@ describe('PreviewBox Component', () => {
     expect(pillarboxMock)
       .toHaveBeenCalledWith(expect.anything(), { muted: true });
     expect(pillarboxMock.mock.instances[0].srcSpy).toHaveBeenCalledWith({
-      src: 'urn:rts:video:14764404',
+      src: 'urn:rts:video:14318206',
       type: 'srgssr/urn'
     });
   });
diff --git a/test/components/toggle-pane-button.test.js b/test/components/toggle-pane-button.test.js
new file mode 100644
index 0000000..53d1dc9
--- /dev/null
+++ b/test/components/toggle-pane-button.test.js
@@ -0,0 +1,68 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import '../../src/components/toggle-pane-button.js';
+
+describe('toggle-pane-button', () => {
+  let element;
+
+  beforeEach(() => {
+    document.body.innerHTML = '<toggle-pane-button label="Toggle" title="Click to toggle"></toggle-pane-button>';
+    element = document.body.querySelector('toggle-pane-button');
+  });
+
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  it('initially not opened', () => {
+    // Verify the popup is not visible initially
+    expect(element.opened).toBeFalsy();
+    expect(element.hasAttribute('opened')).toBeFalsy();
+  });
+
+  it('toggles open state on button click', async() => {
+    const button = element.shadowRoot.querySelector('button[part="button"]');
+
+    button.click();
+
+    await element.updateComplete;
+
+    // Verify the popup is visible after a click
+    expect(element.opened).toBeTruthy();
+    expect(element.hasAttribute('opened')).toBeTruthy();
+
+    button.click();
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    // Verify the popup is hidden after another click
+    expect(element.opened).toBeFalsy();
+    expect(element.hasAttribute('opened')).toBeFalsy();
+  });
+
+  it('reflects "opened" property to attribute correctly', async() => {
+    element.opened = true;
+
+    await element.updateComplete;
+
+    // Verify the attribute reflects the property
+    expect(element.hasAttribute('opened')).toBeTruthy();
+
+    element.opened = false;
+    await element.updateComplete;
+
+    // Verify the attribute reflects the changed property
+    expect(element.hasAttribute('opened')).toBeFalsy();
+  });
+
+  it('closes popup when clicking outside', async() => {
+    // Open the popup first
+    element.opened = true;
+    await element.updateComplete;
+
+    // Simulate a document click event
+    document.dispatchEvent(new MouseEvent('click'));
+    await element.updateComplete;
+
+    // Verify the popup is closed after document click
+    expect(element.opened).toBeFalsy();
+  });
+});