@trebco/treb 27.12.2 → 28.2.0

package/treb-embed/src/custom-element/spreadsheet-constructor.ts

@@ -11,55 +11,7 @@ import { ColorFunctions, type Color } from 'treb-base-types';
 import { Measurement } from 'treb-utils';
 import type { ToolbarMessage } from '../toolbar-message';
 
-interface ElementOptions {
-  data: Record<string, string>;
-  text: string;
-  style: string;
-  title: string;
-  classes: string|string[];
-}
-
-/**
- * FIXME: unify this with DOMUtils
- */
-const Element = <K extends keyof HTMLElementTagNameMap>(tag: K, parent?: HTMLElement|DocumentFragment, options: Partial<ElementOptions> = {}, attrs: Record<string, string> = {}): HTMLElementTagNameMap[K] => {
-  const element = document.createElement(tag);
-  if (options.classes) {
-
-    // you can't use an array destructure in a ternary expression? TIL
-
-    if (Array.isArray(options.classes)) {
-      element.classList.add(...options.classes);
-    }
-    else {
-      element.classList.add(options.classes);
-    }
-
-  }
-  if (options.title) {
-    element.title = options.title;
-  }
-  if (options.text) {
-    element.textContent = options.text;
-  }
-  if (options.style) {
-    element.setAttribute('style', options.style);
-  }
-  if (options.data) {
-    for (const [key, value] of Object.entries(options.data)) {
-      element.dataset[key] = value;
-    }
-  }
-
-  for (const [key, value] of Object.entries(attrs)) {
-    element.setAttribute(key, value);
-  }
-
-  if (parent) {
-    parent.appendChild(element);
-  }
-  return element;
-}
+import { DOMContext } from 'treb-base-types';
 
 /** @internal */
 export class SpreadsheetConstructor {
@@ -82,6 +34,18 @@ export class SpreadsheetConstructor {
   /** root layout element */
   protected layout_element?: HTMLElement;
 
+  /** views container */
+  protected views?: HTMLElement;
+
+  /** 
+   * handle to the revert button, so we can adjust it. we can use
+   * container classes for the most part but we are updating the title.
+   * (FIXME: double-up the button, no reference required)
+   */
+  protected revert_button?: HTMLElement;
+
+  protected revert_state = false;
+
   /** cached controls */
   protected toolbar_controls: Record<string, HTMLElement> = {};
 
@@ -91,6 +55,8 @@ export class SpreadsheetConstructor {
     other?: HTMLDivElement,
   } = {};
 
+  protected DOM: DOMContext;
+
   // 
 
   constructor(root?: HTMLElement|string) {
@@ -99,19 +65,22 @@ export class SpreadsheetConstructor {
       root = document.querySelector(root) as HTMLElement;
     }
 
+    this.DOM = DOMContext.GetInstance(root?.ownerDocument);
+
     // there's a possibility this could be running in a node environment. 
     // in that case (wihtout a shim) HTMLElement will not exist, so we can't
     // check type.
 
-    if (typeof HTMLElement !== 'undefined' && root instanceof HTMLElement) {
-      this.root = root;
+    // but in that case what would root be? (...)
 
-      const style_node = document.head.querySelector('style[treb-stylesheet]');
+    if (this.DOM.view && root instanceof this.DOM.view.HTMLElement) {
+
+      this.root = root;
+      
+      const style_node = this.DOM.doc?.head.querySelector('style[treb-stylesheet]');
       if (!style_node) {
-        const style = Element('style');
-        style.setAttribute('treb-stylesheet', '');
-        style.textContent = css;
-        document.head.prepend(style);
+        this.DOM.doc?.head.prepend(
+          this.DOM.Create('style', undefined, undefined, { text: css, attrs: { 'treb-stylesheet': '' } }));
       }
 
     }
@@ -273,7 +242,7 @@ export class SpreadsheetConstructor {
       if (this.root.hasAttribute('inline-document')) {
         const inline_name = this.root.getAttribute('inline-document') || '';
         for (const element of Array.from(this.root.children)) {
-          if (element instanceof HTMLScriptElement) {
+          if (this.DOM.view && element instanceof this.DOM.view.HTMLScriptElement) {
             if (element.type === 'application/json') {
               const name = element.getAttribute('name') || '';
 
@@ -367,6 +336,22 @@ export class SpreadsheetConstructor {
       this.layout_element?.setAttribute('collapsed', '');
     }
 
+    // --- revert indicator ----------------------------------------------------
+
+    const revert_indicator = root.querySelector('[data-command=revert-indicator]');
+    if (this.DOM.view && revert_indicator instanceof this.DOM.view.HTMLElement) {
+      if (sheet.options.revert_indicator) {
+        revert_indicator.addEventListener('click', () => {
+          sheet.HandleToolbarMessage({
+            command: 'revert-indicator',
+          });
+        });
+      }
+      else {
+        revert_indicator.style.display = 'none';
+      }
+    }
+
     // --- toolbar/sidebar -----------------------------------------------------
     
     const sidebar = root.querySelector('.treb-layout-sidebar');
@@ -439,6 +424,10 @@ export class SpreadsheetConstructor {
       }
     }
 
+    if (sheet.options.revert_button) {
+      this.revert_button = this.layout_element.querySelector('[data-command=revert]') || undefined;
+    }
+
     // --- resize --------------------------------------------------------------
 
     if (sheet.options.resizable) {
@@ -448,7 +437,7 @@ export class SpreadsheetConstructor {
       const delta = { x: 0, y: 0 };
 
       // const resize_container = root.querySelector('.treb-layout-resize-container');
-      const views = root.querySelector('.treb-views');
+      this.views = root.querySelector('.treb-views') || undefined;
 
       let mask: HTMLElement|undefined;
       let resizer: HTMLElement|undefined;
@@ -456,10 +445,10 @@ export class SpreadsheetConstructor {
       const resize_handle = root.querySelector('.treb-layout-resize-handle') as HTMLElement;
 
       // mouse up handler added to mask (when created)
-      const mouse_up = () => finish();
+      const mouseup = () => finish();
 
       // mouse move handler added to mask (when created)
-      const mouse_move = ((event: MouseEvent) => {
+      const mousemove = ((event: MouseEvent) => {
         if (event.buttons === 0) {
           finish();
         }
@@ -480,13 +469,15 @@ export class SpreadsheetConstructor {
 
         if (delta.x || delta.y) {
           const rect = root.getBoundingClientRect();
-          root.style.width = (rect.width + delta.x) + 'px';
+          if (!sheet.options.constrain_width) {
+            root.style.width = (rect.width + delta.x) + 'px';
+          }
           root.style.height = (rect.height + delta.y) + 'px';
         }
 
         if (mask) {
-          mask.removeEventListener('mouseup', mouse_up);
-          mask.removeEventListener('mousemove', mouse_move);
+          mask.removeEventListener('mouseup', mouseup);
+          mask.removeEventListener('mousemove', mousemove);
           mask.parentElement?.removeChild(mask);
           mask = undefined;
         }
@@ -503,15 +494,17 @@ export class SpreadsheetConstructor {
 
         const resize_parent = root.querySelector('.treb-main') as HTMLElement; // was document.body
 
-        resizer = Element('div', resize_parent, { classes: 'treb-resize-rect' });
+        resizer = this.DOM.Div('treb-resize-rect', resize_parent);
 
-        mask = Element('div', resize_parent, { 
-          classes: 'treb-resize-mask', 
-          style: 'cursor: nw-resize;',
+        mask = this.DOM.Div('treb-resize-mask', resize_parent, { 
+          attrs: { 
+            style: 'cursor: nw-resize;' 
+          },
+          events: { mouseup, mousemove },
         });
 
-        mask.addEventListener('mouseup', mouse_up);
-        mask.addEventListener('mousemove', mouse_move);
+        // mask.addEventListener('mouseup', mouse_up);
+        // mask.addEventListener('mousemove', mouse_move);
 
         // resize_handle.classList.add('retain-opacity'); // we're not using this anymore
                 
@@ -521,7 +514,7 @@ export class SpreadsheetConstructor {
         delta.x = 0;
         delta.y = 0;
 
-        const layouts = views?.querySelectorAll('.treb-spreadsheet-body');
+        const layouts = this.views?.querySelectorAll('.treb-spreadsheet-body');
         const rects = Array.from(layouts||[]).map(element => element.getBoundingClientRect());
         if (rects.length) {
 
@@ -688,7 +681,7 @@ export class SpreadsheetConstructor {
     
     {
       
-      let fragment = document.createDocumentFragment();
+      let fragment = this.DOM.Fragment();
      
       const length = sheet.document_styles.theme_colors.length;
       const themes = ['Background', 'Text', 'Background', 'Text', 'Accent'];
@@ -718,7 +711,12 @@ export class SpreadsheetConstructor {
               }
 
             }
-            Element('button', fragment, { style, title, data: { command: 'set-color', color: JSON.stringify(entry.color) } });
+
+            this.DOM.Create('button', undefined, fragment, {
+              attrs: { style, title },
+              data: { command: 'set-color', color: JSON.stringify(entry.color) },
+            });
+
           }
         }
 
@@ -726,12 +724,11 @@ export class SpreadsheetConstructor {
 
       this.swatch_lists.theme?.replaceChildren(fragment);
 
-      fragment = document.createDocumentFragment();
-      Element('button', fragment, { 
-        classes: 'treb-default-color',
-        title: 'Default color', 
+      fragment = this.DOM.Fragment();
+      this.DOM.Create('button', 'treb-default-color', fragment, {
+        attrs: { title: 'Default color' },
         data: { command: 'set-color', color: JSON.stringify({}) },
-       });
+      });
 
       const colors = ['Black', 'White', 'Gray', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Violet'];
 
@@ -742,7 +739,12 @@ export class SpreadsheetConstructor {
 
       for (const text of [...colors, ...additional_colors]) {
         const style = `background: ${text.toLowerCase()};`;
-        Element('button', fragment, { style, title: text, data: { command: 'set-color', color: JSON.stringify({text: text.toLowerCase()})}});
+        this.DOM.Create('button', undefined, fragment, {
+          attrs: { style, title: text, },
+          data: { command: 'set-color', color: JSON.stringify({text: text.toLowerCase()})},
+        });
+
+        // Element('button', fragment, { style, title: text, data: { command: 'set-color', color: JSON.stringify({text: text.toLowerCase()})}});
       }
 
       this.swatch_lists.other?.replaceChildren(fragment);
@@ -770,16 +772,15 @@ export class SpreadsheetConstructor {
       }
     }
 
-    const Button = (format: string) => {
-      return Element('button', undefined, {
-        text: format, data: { format, command: 'number-format' },
+    const Button = (format: string) => 
+    this.DOM.Create('button', undefined, undefined, {
+        text: format, 
+        data: { format, command: 'number-format' },
       });
-    };
 
-    const fragment = document.createDocumentFragment();
+    const fragment = this.DOM.Fragment();
     fragment.append(...number_formats.map(format => Button(format)));
-
-    fragment.append(Element('div', undefined, {}, {separator: ''}));
+    fragment.append(this.DOM.Div(undefined, undefined, { attrs: { separator: '' }}));
     fragment.append(...date_formats.map(format => Button(format)));
 
     format_menu.textContent = '';
@@ -787,6 +788,48 @@ export class SpreadsheetConstructor {
     
   }
 
+  /**
+   * setting explicit state on the revert button (if enabled).
+   * 
+   * @param sheet 
+   */
+  public UpdateRevertState(sheet: EmbeddedSpreadsheet) {
+
+    const state = sheet.can_revert;
+
+    if (this.revert_state === state) {
+      return; // nothing to do
+    }
+
+    this.revert_state = state;
+
+    if (this.revert_button || sheet.options.revert_indicator) {
+
+      if (this.revert_state) {
+        this.views?.classList.add('treb-can-revert');
+      }
+      else {
+        this.views?.classList.remove('treb-can-revert');
+      }
+
+      if (this.revert_button) {
+        this.revert_button.dataset.canRevert = state ? 'true' : 'false'; // FIXME: remove
+
+        // FIXME: container classes, double up button
+
+        if (state) {
+          this.revert_button.classList.remove('sidebar-disabled');
+          this.revert_button.title = 'Revert to original version'; // FIXME: strings
+        }
+        else {
+          this.revert_button.classList.add('sidebar-disabled');
+          this.revert_button.title = 'This is the original version of the document'; // FIXME: strings
+        }
+      }
+    }
+
+  }
+
   /**
    * replace a given template with its contents.
    */
@@ -1133,8 +1176,8 @@ export class SpreadsheetConstructor {
 
     if (/firefox/i.test(navigator.userAgent)) {
       scroller.addEventListener('scroll', () => {
-        if (document.activeElement instanceof HTMLElement ) {
-          document.activeElement.blur();
+        if (this.DOM.view && this.DOM.doc?.activeElement instanceof this.DOM.view.HTMLElement ) {
+          this.DOM.doc.activeElement?.blur();
         }
       });
     }
@@ -1288,6 +1331,7 @@ export class SpreadsheetConstructor {
           case 'reset':
             this.UpdateDocumentStyles(sheet, format_menu);
             this.UpdateSelectionStyle(sheet, toolbar, comment_box);
+            this.UpdateRevertState(sheet);
             break;
 
           case 'selection':