Merge pull request #37 from eviltester/17-moveable-size-bar-between-options-and-preview-panel

divider resize

Author: eviltester

packages/core-ui/js/gui_components/import-export-controls.js

@@ -24,6 +24,12 @@ class ImportExportControls {
   constructor() {
     this.previewRowLimit = 10;
     this.textEditMode = 'preview';
+    this.defaultOptionsPanelWidthPx = 272;
+    this.minOptionsPanelWidthPx = 180;
+    this.maxOptionsPanelWidthPx = 520;
+    this.minPreviewPanelWidthPx = 220;
+    this.currentOptionsPanelWidthPx = null;
+    this._activeSplitDrag = null;
   }
 
   addHTMLtoGui(parentelement) {
@@ -293,6 +299,7 @@ class ImportExportControls {
 
     const edit_area = document.querySelector('div.edit-area');
     const optionsparent = document.querySelector('div.options-parent');
+    const splitter = document.querySelector('div.options-preview-splitter');
     const text_area = document.getElementById('markdown');
 
     edit_area.style.width = '100%';
@@ -308,6 +315,9 @@ class ImportExportControls {
       console.log('undefined panel type for ' + type);
       edit_area.style.display = 'block';
       optionsparent.style.display = 'none';
+      if (splitter) {
+        splitter.style.display = 'none';
+      }
       text_area.style.width = '100%';
       text_area.style.height = '100%';
       return;
@@ -318,7 +328,8 @@ class ImportExportControls {
     text_area.style.width = '100%';
     text_area.style.height = '100%';
 
-    optionsparent.style.width = '17em';
+    const initialWidth = this._clampOptionsPanelWidth(this._getInitialOptionsPanelWidthPx(), edit_area);
+    this._setOptionsPanelWidth(optionsparent, initialWidth);
     optionsparent.style.height = '100%';
 
     optionsparent.innerHTML = '';
@@ -337,6 +348,7 @@ class ImportExportControls {
     }
 
     optionsparent.style.display = 'block';
+    this._configureOptionsPreviewSplitter(edit_area, optionsparent, splitter, text_area);
   }
 
   setOptionsApplyDirtyState(optionsparent, isDirty) {
@@ -476,6 +488,165 @@ class ImportExportControls {
     }
     importButton.disabled = this.isPreviewTextMode();
   }
+
+  _configureOptionsPreviewSplitter(editArea, optionsParent, splitter, textArea) {
+    if (!splitter || !editArea || !optionsParent || !textArea) {
+      return;
+    }
+
+    splitter.style.display = 'block';
+    textArea.style.flex = '1 1 auto';
+    this._updateSplitterAriaValues(splitter, optionsParent, editArea);
+
+    if (splitter.dataset.splitterInitialised === 'true') {
+      return;
+    }
+
+    splitter.dataset.splitterInitialised = 'true';
+    splitter.addEventListener('pointerdown', (event) => this._beginSplitterDrag(event, editArea, optionsParent));
+    splitter.addEventListener('keydown', (event) =>
+      this._handleSplitterKeyDown(event, optionsParent, editArea, splitter)
+    );
+  }
+
+  _beginSplitterDrag(event, editArea, optionsParent) {
+    if (!event || event.button > 0) {
+      return;
+    }
+    if (this._activeSplitDrag) {
+      return;
+    }
+
+    const pointerId = event.pointerId;
+    const startX = event.clientX;
+    const startWidth = this._readOptionsPanelWidthPx(optionsParent);
+
+    this._activeSplitDrag = {
+      pointerId,
+      startX,
+      startWidth,
+      editArea,
+      optionsParent,
+    };
+
+    event.preventDefault();
+    document.body.classList.add('is-resizing-split');
+
+    const onMove = (moveEvent) => this._handleSplitterDragMove(moveEvent);
+    const onEnd = (endEvent) => this._endSplitterDrag(endEvent, onMove, onEnd);
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onEnd);
+    document.addEventListener('pointercancel', onEnd);
+  }
+
+  _handleSplitterDragMove(event) {
+    const dragState = this._activeSplitDrag;
+    if (!dragState || event.pointerId !== dragState.pointerId) {
+      return;
+    }
+
+    event.preventDefault();
+    const deltaX = event.clientX - dragState.startX;
+    const requestedWidth = dragState.startWidth + deltaX;
+    const boundedWidth = this._clampOptionsPanelWidth(requestedWidth, dragState.editArea);
+    this._setOptionsPanelWidth(dragState.optionsParent, boundedWidth);
+    const splitter = document.querySelector('div.options-preview-splitter');
+    if (splitter) {
+      this._updateSplitterAriaValues(splitter, dragState.optionsParent, dragState.editArea);
+    }
+  }
+
+  _endSplitterDrag(event, onMove, onEnd) {
+    if (!this._activeSplitDrag) {
+      return;
+    }
+    if (event && event.pointerId !== this._activeSplitDrag.pointerId) {
+      return;
+    }
+
+    document.removeEventListener('pointermove', onMove);
+    document.removeEventListener('pointerup', onEnd);
+    document.removeEventListener('pointercancel', onEnd);
+    document.body.classList.remove('is-resizing-split');
+    this._activeSplitDrag = null;
+  }
+
+  _setOptionsPanelWidth(optionsParent, widthPx) {
+    const safeWidth = Math.round(widthPx);
+    optionsParent.style.width = `${safeWidth}px`;
+    optionsParent.style.minWidth = `${safeWidth}px`;
+    optionsParent.style.maxWidth = `${safeWidth}px`;
+    optionsParent.style.flex = '0 0 auto';
+    this.currentOptionsPanelWidthPx = safeWidth;
+  }
+
+  _handleSplitterKeyDown(event, optionsParent, editArea, splitter) {
+    if (!event) {
+      return;
+    }
+
+    const step = event.shiftKey ? 24 : 12;
+    let requestedWidth = this._readOptionsPanelWidthPx(optionsParent);
+    let handled = true;
+
+    if (event.key === 'ArrowLeft') {
+      requestedWidth -= step;
+    } else if (event.key === 'ArrowRight') {
+      requestedWidth += step;
+    } else if (event.key === 'Home') {
+      requestedWidth = this.minOptionsPanelWidthPx;
+    } else if (event.key === 'End') {
+      requestedWidth = this.maxOptionsPanelWidthPx;
+    } else {
+      handled = false;
+    }
+
+    if (!handled) {
+      return;
+    }
+
+    event.preventDefault();
+    const boundedWidth = this._clampOptionsPanelWidth(requestedWidth, editArea);
+    this._setOptionsPanelWidth(optionsParent, boundedWidth);
+    this._updateSplitterAriaValues(splitter, optionsParent, editArea);
+  }
+
+  _readOptionsPanelWidthPx(optionsParent) {
+    const parsed = Number.parseFloat(optionsParent?.style?.width || '');
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+    return this._getInitialOptionsPanelWidthPx();
+  }
+
+  _getInitialOptionsPanelWidthPx() {
+    if (Number.isFinite(this.currentOptionsPanelWidthPx)) {
+      return this.currentOptionsPanelWidthPx;
+    }
+    return this.defaultOptionsPanelWidthPx;
+  }
+
+  _clampOptionsPanelWidth(widthPx, editArea) {
+    const editWidth = editArea?.getBoundingClientRect?.().width || 0;
+    const maxByContainer =
+      editWidth > 0
+        ? Math.max(this.minOptionsPanelWidthPx, editWidth - this.minPreviewPanelWidthPx)
+        : this.maxOptionsPanelWidthPx;
+    const maxAllowed = Math.min(this.maxOptionsPanelWidthPx, maxByContainer);
+    return Math.min(Math.max(widthPx, this.minOptionsPanelWidthPx), maxAllowed);
+  }
+
+  _updateSplitterAriaValues(splitter, optionsParent, editArea) {
+    if (!splitter) {
+      return;
+    }
+    const min = this.minOptionsPanelWidthPx;
+    const max = this._clampOptionsPanelWidth(this.maxOptionsPanelWidthPx, editArea);
+    const now = this._clampOptionsPanelWidth(this._readOptionsPanelWidthPx(optionsParent), editArea);
+    splitter.setAttribute('aria-valuemin', `${min}`);
+    splitter.setAttribute('aria-valuemax', `${max}`);
+    splitter.setAttribute('aria-valuenow', `${now}`);
+  }
 }
 
 export { ImportExportControls };

packages/core-ui/js/gui_components/tabbed-text-control.js

@@ -50,6 +50,14 @@ class TabbedTextControl {
 
         <div class="edit-area">
             <div class="options-parent" style="display: none"></div>
+            <div
+              class="options-preview-splitter"
+              style="display: none"
+              role="separator"
+              tabindex="0"
+              aria-orientation="vertical"
+              aria-label="Resize options panel"
+            ></div>
             <div id="markdown" style="height: 30%; width:100%;">
               <textarea class="textrepresentation" name="Markdown" id="markdownarea"></textarea>
             </div>

styles.css

@@ -208,6 +208,61 @@ button:disabled{
   resize: vertical;
 }
 
+.edit-area{
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-height: 14rem;
+}
+
+.options-parent{
+  overflow: auto;
+}
+
+.options-preview-splitter{
+  width: 8px;
+  cursor: col-resize;
+  background: #f5f8fa;
+  border-left: 1px solid #d7e2e8;
+  border-right: 1px solid #d7e2e8;
+  flex: 0 0 8px;
+  opacity: 0.7;
+  transition: background-color 120ms ease, opacity 120ms ease;
+  touch-action: none;
+  -webkit-user-select: none;
+}
+
+.options-preview-splitter:hover{
+  background: #ebf2f6;
+  opacity: 0.95;
+}
+
+body.is-resizing-split{
+  user-select: none;
+  cursor: col-resize;
+}
+
+#markdown{
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+@media (max-width: 640px){
+  .edit-area{
+    flex-direction: column;
+  }
+
+  .options-preview-splitter{
+    display: none !important;
+  }
+
+  .options-parent{
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+  }
+}
+
 .testDataDefn{
   height: 10em;
   width:95%;

tests/utils/import-export-controls-mode.test.js

@@ -169,6 +169,7 @@ describe('ImportExportControls file reading and visibility', () => {
             <div id="markdown"></div>
             <div class="edit-area"></div>
             <div class="options-parent"></div>
+            <div class="options-preview-splitter"></div>
             <div id="importExportRoot"></div>
             <button id="copyTextButton">Copy</button>
         </body></html>`);
@@ -335,4 +336,46 @@ describe('ImportExportControls file reading and visibility', () => {
     expect(controls.exporter.setOptionsForType).toHaveBeenCalledWith('csv', { delimiter: '|' });
     expect(applyButton.disabled).toBe(true);
   });
+
+  test('shows splitter when options panel is active and hides for unsupported format', () => {
+    const splitter = document.querySelector('div.options-preview-splitter');
+    const editArea = document.querySelector('div.edit-area');
+    const textAreaContainer = document.getElementById('markdown');
+
+    controls.setOptionsViewForFormatType();
+
+    expect(splitter.style.display).toBe('block');
+    expect(editArea.style.display).toBe('flex');
+    expect(textAreaContainer.style.flex).toBe('1 1 auto');
+
+    document.querySelector('li.active-type a').setAttribute('data-type', 'unknown');
+    controls.setOptionsViewForFormatType();
+
+    expect(splitter.style.display).toBe('none');
+  });
+
+  test('splitter drag resizes options panel width and clamps to min/max', () => {
+    controls.setOptionsViewForFormatType();
+    const splitter = document.querySelector('div.options-preview-splitter');
+    const optionsParent = document.querySelector('div.options-parent');
+    const editArea = document.querySelector('div.edit-area');
+
+    editArea.getBoundingClientRect = () => ({ width: 1000 });
+
+    splitter.dispatchEvent(
+      new dom.window.MouseEvent('pointerdown', { bubbles: true, button: 0, clientX: 300, pointerId: 1 })
+    );
+    document.dispatchEvent(new dom.window.MouseEvent('pointermove', { bubbles: true, clientX: 380, pointerId: 1 }));
+    expect(Number.parseFloat(optionsParent.style.width)).toBeGreaterThan(272);
+    expect(document.body.classList.contains('is-resizing-split')).toBe(true);
+
+    document.dispatchEvent(new dom.window.MouseEvent('pointermove', { bubbles: true, clientX: -500, pointerId: 1 }));
+    expect(Number.parseFloat(optionsParent.style.width)).toBe(controls.minOptionsPanelWidthPx);
+
+    document.dispatchEvent(new dom.window.MouseEvent('pointermove', { bubbles: true, clientX: 9999, pointerId: 1 }));
+    expect(Number.parseFloat(optionsParent.style.width)).toBe(controls.maxOptionsPanelWidthPx);
+
+    document.dispatchEvent(new dom.window.MouseEvent('pointerup', { bubbles: true, pointerId: 1 }));
+    expect(document.body.classList.contains('is-resizing-split')).toBe(false);
+  });
 });