cyberia 3.2.5 → 3.2.9

package/src/client/components/core/ColorPaletteElement.js

@@ -0,0 +1,309 @@
+const PALETTE_COLUMNS = [
+  { name: 'Red', hue: 0 },
+  { name: 'Orange', hue: 28 },
+  { name: 'Yellow', hue: 52 },
+  { name: 'Green', hue: 132 },
+  { name: 'Cyan', hue: 182 },
+  { name: 'Blue', hue: 224 },
+  { name: 'Violet', hue: 278 },
+];
+
+const PALETTE_LIGHTNESS = [92, 82, 72, 60, 48, 36, 24];
+const PALETTE_GRAYSCALE_LIGHTNESS = [100, 84, 68, 52, 36, 18, 0];
+const PALETTE_SATURATION = 82;
+
+function clampChannel(value) {
+  return Math.max(0, Math.min(255, Math.round(value)));
+}
+
+function hslToHex(hue, saturation, lightness) {
+  const s = saturation / 100;
+  const l = lightness / 100;
+  const chroma = (1 - Math.abs(2 * l - 1)) * s;
+  const segment = hue / 60;
+  const second = chroma * (1 - Math.abs((segment % 2) - 1));
+  const match = l - chroma / 2;
+
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+
+  if (segment >= 0 && segment < 1) {
+    red = chroma;
+    green = second;
+  } else if (segment < 2) {
+    red = second;
+    green = chroma;
+  } else if (segment < 3) {
+    green = chroma;
+    blue = second;
+  } else if (segment < 4) {
+    green = second;
+    blue = chroma;
+  } else if (segment < 5) {
+    red = second;
+    blue = chroma;
+  } else {
+    red = chroma;
+    blue = second;
+  }
+
+  const r = clampChannel((red + match) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  const g = clampChannel((green + match) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  const b = clampChannel((blue + match) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `#${r}${g}${b}`.toUpperCase();
+}
+
+function normalizeHex(value) {
+  const raw = String(value || '')
+    .trim()
+    .replace('#', '');
+  if (/^[\da-fA-F]{3}$/.test(raw)) {
+    return `#${raw
+      .split('')
+      .map((char) => char + char)
+      .join('')}`.toUpperCase();
+  }
+  if (/^[\da-fA-F]{6}$/.test(raw)) {
+    return `#${raw}`.toUpperCase();
+  }
+  return null;
+}
+
+function buildPaletteRows() {
+  return PALETTE_LIGHTNESS.map((lightness, rowIndex) => {
+    const colorSwatches = PALETTE_COLUMNS.map((column) => ({
+      name: `${column.name} ${rowIndex + 1}`,
+      value: hslToHex(column.hue, PALETTE_SATURATION, lightness),
+    }));
+    const grayscaleLightness = PALETTE_GRAYSCALE_LIGHTNESS[rowIndex] ?? 0;
+    const grayscaleName =
+      rowIndex === 0 ? 'White' : rowIndex === PALETTE_LIGHTNESS.length - 1 ? 'Black' : `Gray ${rowIndex}`;
+    return [
+      ...colorSwatches,
+      {
+        name: grayscaleName,
+        value: hslToHex(0, 0, grayscaleLightness),
+      },
+    ];
+  });
+}
+
+const PALETTE_ROWS = buildPaletteRows();
+
+class ColorPaletteElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._value = '#FF0000';
+    this._disabled = false;
+    this._handleClick = this._handleClick.bind(this);
+  }
+
+  static get observedAttributes() {
+    return ['value', 'disabled'];
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === 'value') {
+      this._setValue(newValue, { reflect: false, emit: false });
+      return;
+    }
+    if (name === 'disabled') {
+      this._disabled = newValue !== null;
+      this._updateSelection();
+    }
+  }
+
+  connectedCallback() {
+    this.render();
+    this.shadowRoot.addEventListener('click', this._handleClick);
+    this._setValue(this.getAttribute('value') || this._value, { reflect: false, emit: false });
+  }
+
+  disconnectedCallback() {
+    this.shadowRoot.removeEventListener('click', this._handleClick);
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  set value(value) {
+    this._setValue(value, { reflect: true, emit: false });
+  }
+
+  _setValue(value, { reflect, emit } = { reflect: true, emit: false }) {
+    const normalized = normalizeHex(value);
+    if (!normalized) {
+      return;
+    }
+    const changed = normalized !== this._value;
+    this._value = normalized;
+    if (reflect && this.getAttribute('value') !== normalized) {
+      this.setAttribute('value', normalized);
+    }
+    this._updateSelection();
+    if (emit && changed) {
+      const detail = { value: normalized, hex: normalized };
+      this.dispatchEvent(new CustomEvent('colorchange', { detail }));
+      this.dispatchEvent(new CustomEvent('change', { detail }));
+    }
+  }
+
+  _handleClick(event) {
+    const swatch = event.target.closest('button[data-color]');
+    if (!swatch || this._disabled) {
+      return;
+    }
+    this._setValue(swatch.dataset.color, { reflect: true, emit: true });
+  }
+
+  _updateSelection() {
+    if (!this.shadowRoot) {
+      return;
+    }
+    const swatches = this.shadowRoot.querySelectorAll('button[data-color]');
+    swatches.forEach((swatch) => {
+      const selected = swatch.dataset.color === this._value;
+      swatch.toggleAttribute('data-selected', selected);
+      swatch.setAttribute('aria-pressed', selected ? 'true' : 'false');
+      swatch.disabled = this._disabled;
+    });
+
+    const currentValue = this.shadowRoot.querySelector('.current-value');
+    if (currentValue) {
+      currentValue.textContent = this._value;
+    }
+    const currentSwatch = this.shadowRoot.querySelector('.current-swatch');
+    if (currentSwatch) {
+      currentSwatch.style.background = this._value;
+    }
+  }
+
+  render() {
+    const gridMarkup = PALETTE_ROWS.map(
+      (row) => `
+        <div class="swatch-row">
+          ${row
+            .map(
+              (swatch) => `
+                <button
+                  type="button"
+                  class="swatch"
+                  data-color="${swatch.value}"
+                  title="${swatch.name} ${swatch.value}"
+                  aria-label="${swatch.name} ${swatch.value}"
+                  style="background:${swatch.value};"
+                ></button>
+              `,
+            )
+            .join('')}
+        </div>
+      `,
+    ).join('');
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+
+        .palette {
+          display: grid;
+          gap: 10px;
+          font-family: monospace;
+          color: #d7d7d7;
+        }
+
+        .grid {
+          display: grid;
+          gap: 6px;
+        }
+
+        .swatch-row {
+          display: grid;
+          grid-template-columns: repeat(8, minmax(0, 1fr));
+          gap: 6px;
+        }
+
+        .swatch {
+          appearance: none;
+          border: 2px solid rgba(255, 255, 255, 0.16);
+          border-radius: 8px;
+          cursor: pointer;
+          display: block;
+          min-height: 24px;
+          padding: 0;
+          position: relative;
+          transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
+          width: 100%;
+        }
+
+        .swatch:hover {
+          transform: translateY(-1px);
+          border-color: rgba(255, 255, 255, 0.5);
+        }
+
+        .swatch[data-selected] {
+          border-color: #ffffff;
+          box-shadow: 0 0 0 2px rgba(28, 28, 28, 0.7), 0 0 0 4px rgba(255, 255, 255, 0.45);
+        }
+
+        .swatch[data-selected]::after {
+          content: '';
+          position: absolute;
+          inset: 6px;
+          border: 1px solid rgba(0, 0, 0, 0.45);
+          border-radius: 5px;
+        }
+
+        .current {
+          align-items: center;
+          display: flex;
+          gap: 8px;
+          font-size: 12px;
+        }
+
+        .current-swatch {
+          border: 1px solid rgba(255, 255, 255, 0.24);
+          border-radius: 6px;
+          height: 18px;
+          width: 18px;
+        }
+
+        .current-label {
+          color: #9f9f9f;
+          text-transform: uppercase;
+        }
+
+        .swatch:disabled {
+          cursor: default;
+          opacity: 0.55;
+          transform: none;
+        }
+      </style>
+      <div class="palette">
+        <div class="grid">${gridMarkup}</div>
+        <div class="current">
+          <div class="current-swatch"></div>
+          <div><span class="current-label">Selected</span> <span class="current-value"></span></div>
+        </div>
+      </div>
+    `;
+    this._updateSelection();
+  }
+}
+
+if (!customElements.get('color-palette')) {
+  customElements.define('color-palette', ColorPaletteElement);
+}
+
+export { ColorPaletteElement };

package/src/client/components/core/Content.js

@@ -32,7 +32,7 @@ const attachMarkdownLinkHandlers = (containerSelector) => {
         id: `external-link-${s4()}`,
         html: async () => html`
           <div class="in section-mp" style="text-align: center; padding: 20px;">
-            <p>${Translate.Render('external-link-warning')}</p>
+            <p>${Translate.instance('external-link-warning')}</p>
             <p style="word-break: break-all; margin-top: 10px;"><strong>${href}</strong></p>
           </div>
         `,
@@ -55,8 +55,8 @@ const attachMarkdownLinkHandlers = (containerSelector) => {
   });
 };
 
-const Content = {
-  Render: async function (options = { idModal: '', titleIcon: '' }) {
+class Content {
+  static async instance(options = { idModal: '', titleIcon: '' }) {
     const { idModal } = options;
     setTimeout(async () => {
       try {
@@ -140,12 +140,15 @@ const Content = {
         htmls(`.content-render-${idModal}`, ``);
 
         // Pass file IDs to RenderFile - it will fetch blobs as needed
-        if (md) await this.RenderFile({ idModal, file: md, id: md._id });
-        if (file) await this.RenderFile({ idModal, file, id: file._id });
+        if (md) await Content.RenderFile({ idModal, file: md, id: md._id });
+        if (file) await Content.RenderFile({ idModal, file, id: file._id });
         Modal.Data[idModal].onObserverListener[`main-content-observer`]();
       } catch (error) {
         htmls(`.content-render-${idModal}`, '');
-        htmls(`.error-${idModal}`, html`<i class="fas fa-exclamation-circle"></i> ${Translate.Render(error.message)}`);
+        htmls(
+          `.error-${idModal}`,
+          html`<i class="fas fa-exclamation-circle"></i> ${Translate.instance(error.message)}`,
+        );
         s(`.error-${idModal}`).classList.remove('hide');
       }
       s(`.ssr-shimmer-content-${idModal}`).classList.add('hide');
@@ -164,14 +167,14 @@ const Content = {
         ${imageShimmer()}
       </div>
       <div class="abs center error-${idModal} hide"></div>`;
-  },
+  }
 
   /**
    * Helper function to get file content
    * Supports both legacy format (with buffer data) and new format (metadata only)
    * For new format, fetches content from blob endpoint
    */
-  getFileContent: async function (file, options = {}) {
+  static async getFileContent(file, options = {}) {
     // If custom URL provided, use it
     if (options.url) {
       return await CoreService.getRaw({ url: options.url });
@@ -197,9 +200,9 @@ const Content = {
     }
 
     throw new Error('No file content available');
-  },
+  }
 
-  RenderFile: async function (
+  static async RenderFile(
     options = {
       file: {
         _id: '',
@@ -308,13 +311,13 @@ ${JSON.stringify(JSON.parse(content), null, 4)}</pre
     if (ext === 'md') {
       attachMarkdownLinkHandlers(container);
     }
-  },
+  }
 
   /**
    * Generate appropriate URL for file display
    * Prefers blob endpoint for new metadata-only format
    */
-  urlFactory: async function (options) {
+  static async urlFactory(options) {
     // If custom URL provided, use it
     if (options.url) {
       return options.url;
@@ -340,7 +343,7 @@ ${JSON.stringify(JSON.parse(content), null, 4)}</pre
     }
 
     return null;
-  },
-};
+  }
+}
 
 export { Content, attachMarkdownLinkHandlers };