broadlistening-viewer 0.2.0

data/js/shared/fullscreen_modal.js

@@ -0,0 +1,108 @@
+import { icon, escapeHtml } from "./decidim_core_shim";
+import { t } from "./i18n";
+import Toolbar, { VIEW_MODES } from "./toolbar";
+class FullscreenModal {
+  constructor(options = {}) {
+    this.options = {
+      viewMode: VIEW_MODES.SCATTER_ALL,
+      hasDensityData: false,
+      isDenseGroupEnabled: true,
+      ...options
+    };
+    this.isOpen = false;
+  }
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.toolbar = new Toolbar({
+      viewMode: this.options.viewMode,
+      hasDensityData: this.options.hasDensityData,
+      isDenseGroupEnabled: this.options.isDenseGroupEnabled,
+      showSettings: false,
+      showFullscreen: false,
+      onViewModeChange: (mode) => {
+        this.options.onViewModeChange?.(mode);
+        this.updateToolbarState({ viewMode: mode });
+      }
+    });
+    this.modal = document.createElement("div");
+    this.modal.className = "fixed inset-0 z-[9999] flex flex-col bg-white";
+    this.modal.innerHTML = `
+      <div data-blv="fullscreen-header" class="flex justify-between items-center px-4 py-3 border-b border-gray-200 bg-gray-50 shrink-0">
+        ${this.toolbar.render()}
+        <button class="flex items-center justify-center w-10 h-10 p-0 bg-transparent border-none rounded-lg cursor-pointer text-gray-500 transition-all duration-150 hover:bg-gray-200 hover:text-gray-900 [&_svg]:w-6 [&_svg]:h-6" data-action="close" title="${escapeHtml(t("common.close"))}">
+          ${icon("close-line")}
+        </button>
+      </div>
+      <div data-blv="fullscreen-breadcrumb" class="px-4"></div>
+      <div class="flex-1 overflow-hidden p-4">
+        <div data-blv="chart-plot" class="w-full h-full"></div>
+      </div>
+    `;
+    document.body.appendChild(this.modal);
+    document.body.style.overflow = "hidden";
+    this.bindEvents();
+    this.renderBreadcrumb();
+    this.renderChart();
+  }
+  bindEvents() {
+    if (!this.modal) return;
+    const headerContainer = this.modal.querySelector('[data-blv="fullscreen-header"]');
+    this.toolbar.bindEvents(headerContainer);
+    this.modal.querySelector("[data-action='close']").addEventListener("click", () => {
+      this.close();
+    });
+    this._escapeHandler = (e) => {
+      if (e.key === "Escape") {
+        this.close();
+      }
+    };
+    document.addEventListener("keydown", this._escapeHandler);
+  }
+  getChartContainer() {
+    if (!this.modal) return void 0;
+    return this.modal.querySelector('[data-blv="chart-plot"]');
+  }
+  getBreadcrumbContainer() {
+    if (!this.modal) return void 0;
+    return this.modal.querySelector('[data-blv="fullscreen-breadcrumb"]');
+  }
+  renderChart() {
+    if (!this.modal || !this.options.renderChart) return;
+    const container = this.getChartContainer();
+    if (container) {
+      container.innerHTML = "";
+      this.options.renderChart(container);
+    }
+  }
+  renderBreadcrumb() {
+    if (!this.modal || !this.options.renderBreadcrumb) return;
+    const container = this.getBreadcrumbContainer();
+    if (container) {
+      this.options.renderBreadcrumb(container);
+    }
+  }
+  updateToolbarState(state) {
+    if (!this.modal || !this.toolbar) return;
+    const headerContainer = this.modal.querySelector('[data-blv="fullscreen-header"]');
+    this.toolbar.updateState(headerContainer, state);
+    Object.assign(this.options, state);
+  }
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    if (this.modal) {
+      document.body.removeChild(this.modal);
+      this.modal = void 0;
+    }
+    document.body.style.overflow = "";
+    if (this._escapeHandler) {
+      document.removeEventListener("keydown", this._escapeHandler);
+      this._escapeHandler = void 0;
+    }
+    this.options.onClose?.();
+  }
+}
+export {
+  FullscreenModal as default
+};

data/js/shared/i18n.js

@@ -0,0 +1,37 @@
+const getViewMessages = () => {
+  const element = document.getElementById("broadlistening-view-i18n");
+  if (!element || !element.dataset.messages) {
+    return {};
+  }
+  try {
+    return JSON.parse(element.dataset.messages);
+  } catch (e) {
+    console.error("[broadlistening_view] Failed to parse i18n messages:", e);
+    return {};
+  }
+};
+const t = (key, interpolations = {}) => {
+  const messages = getViewMessages();
+  let value = messages;
+  for (const part of key.split(".")) {
+    if (value && typeof value === "object") {
+      value = value[part];
+    } else {
+      value = void 0;
+      break;
+    }
+  }
+  if (value == null) {
+    console.warn(`[broadlistening_view] Missing translation: ${key}`);
+    return key;
+  }
+  if (typeof value === "string" && Object.keys(interpolations).length > 0) {
+    return value.replace(/%\{(\w+)\}/g, (match, name) => {
+      return interpolations[name] !== void 0 ? String(interpolations[name]) : match;
+    });
+  }
+  return String(value);
+};
+export {
+  t
+};