@translifycc/angular 0.1.3 → 0.1.5

package/dist/translify-selector.component.js

@@ -1,461 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { Component, Input, NgZone, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
-import { NgIf, NgFor, NgClass } from '@angular/common';
-import { getSavedLang, saveLang, clearSavedLang, loadTranslationCache, saveTranslationCache, getTextNodes, collectNewTextNodes, fetchLanguages, callTranslateApi, } from './translate';
-let TranslifySelectorComponent = class TranslifySelectorComponent {
-    constructor(ngZone, cdr) {
-        this.ngZone = ngZone;
-        this.cdr = cdr;
-        this.apiBase = 'https://translify.cc';
-        this.domain = window.location.hostname || 'localhost';
-        this.classNames = {};
-        this.labels = {};
-        this.languages = [];
-        this.activeLang = getSavedLang();
-        this.isOpen = false;
-        this.loadingState = 'idle';
-        this.overlayVisible = false;
-        this.toastVisible = false;
-        // All mutable translation state — no change detection needed
-        this.originalTexts = new Map();
-        this.translationCache = new Map();
-        this.currentCacheLang = null;
-        this.isTranslating = false;
-        this.pendingNodes = [];
-        this.observer = null;
-        this.debounceTimer = null;
-        this.overlayTimer = null;
-    }
-    get activeLangObj() {
-        return this.languages.find((l) => l.code === this.activeLang);
-    }
-    async ngOnInit() {
-        if (!this.apiKey) {
-            console.error('[Translify] apiKey is required.');
-            return;
-        }
-        try {
-            this.languages = await fetchLanguages(this.apiBase);
-            this.cdr.markForCheck();
-        }
-        catch (e) {
-            console.error('[Translify] Failed to fetch languages', e);
-            return;
-        }
-        this.ngZone.runOutsideAngular(() => {
-            this.startObserver();
-            this.patchHistory();
-        });
-        if (this.activeLang && this.languages.length > 0) {
-            await this.translate(this.activeLang);
-        }
-    }
-    ngOnDestroy() {
-        this.stopObserver();
-        clearTimeout(this.overlayTimer);
-    }
-    // ── Cache helpers ───────────────────────────────────────────────────────────
-    ensureCacheLoaded(lang) {
-        if (this.currentCacheLang === lang)
-            return;
-        this.translationCache = loadTranslationCache(lang);
-        this.currentCacheLang = lang;
-    }
-    applyCache(nodes) {
-        const uncached = [];
-        nodes.forEach((node) => {
-            var _a, _b;
-            const src = (_b = (_a = this.originalTexts.get(node)) !== null && _a !== void 0 ? _a : node.textContent) !== null && _b !== void 0 ? _b : '';
-            const hit = this.translationCache.get(src);
-            if (hit !== undefined) {
-                node.textContent = hit;
-            }
-            else {
-                uncached.push(node);
-            }
-        });
-        return uncached;
-    }
-    // ── Overlay / toast ─────────────────────────────────────────────────────────
-    showOverlay() {
-        clearTimeout(this.overlayTimer);
-        this.ngZone.run(() => {
-            this.overlayVisible = false;
-            this.loadingState = 'overlay';
-            requestAnimationFrame(() => { this.overlayVisible = true; this.cdr.markForCheck(); });
-            this.cdr.markForCheck();
-        });
-    }
-    hideOverlay() {
-        this.overlayTimer = setTimeout(() => {
-            this.ngZone.run(() => { this.overlayVisible = false; this.cdr.markForCheck(); });
-            this.overlayTimer = setTimeout(() => {
-                this.ngZone.run(() => { this.loadingState = 'idle'; this.cdr.markForCheck(); });
-            }, 400);
-        }, 600);
-    }
-    showToast() {
-        clearTimeout(this.overlayTimer);
-        this.ngZone.run(() => {
-            this.loadingState = 'toast';
-            requestAnimationFrame(() => { this.toastVisible = true; this.cdr.markForCheck(); });
-            this.cdr.markForCheck();
-        });
-    }
-    hideToast() {
-        this.ngZone.run(() => {
-            this.toastVisible = false;
-            this.overlayTimer = setTimeout(() => {
-                this.ngZone.run(() => { this.loadingState = 'idle'; this.cdr.markForCheck(); });
-            }, 350);
-            this.cdr.markForCheck();
-        });
-    }
-    // ── flushNodes ──────────────────────────────────────────────────────────────
-    async flushNodes(nodes, targetLang) {
-        if (!nodes.length)
-            return;
-        if (this.isTranslating) {
-            this.pendingNodes.push(...nodes);
-            return;
-        }
-        this.isTranslating = true;
-        try {
-            nodes.forEach((n) => {
-                var _a;
-                if (!this.originalTexts.has(n))
-                    this.originalTexts.set(n, (_a = n.textContent) !== null && _a !== void 0 ? _a : '');
-            });
-            const uncached = this.applyCache(nodes);
-            if (uncached.length > 0) {
-                const texts = uncached.map((n) => this.originalTexts.get(n));
-                const translations = await callTranslateApi(this.apiBase, this.apiKey, this.domain, texts, targetLang);
-                uncached.forEach((node, i) => {
-                    if (translations[i] !== undefined) {
-                        this.translationCache.set(this.originalTexts.get(node), translations[i]);
-                        node.textContent = translations[i];
-                    }
-                });
-                saveTranslationCache(targetLang, this.translationCache);
-            }
-        }
-        catch (e) {
-            console.error('[Translify] Dynamic translation error', e);
-        }
-        finally {
-            this.isTranslating = false;
-            if (this.pendingNodes.length > 0) {
-                const next = this.pendingNodes.splice(0);
-                this.flushNodes(next, targetLang);
-            }
-        }
-    }
-    // ── MutationObserver ────────────────────────────────────────────────────────
-    startObserver() {
-        if (this.observer)
-            return;
-        this.observer = new MutationObserver((mutations) => {
-            if (!this.activeLang)
-                return;
-            const targetLang = this.activeLang;
-            const newNodes = [];
-            mutations.forEach((mutation) => {
-                if (mutation.type !== 'childList')
-                    return;
-                mutation.addedNodes.forEach((node) => {
-                    newNodes.push(...collectNewTextNodes(node, this.originalTexts));
-                });
-            });
-            if (!newNodes.length)
-                return;
-            const uncached = [];
-            newNodes.forEach((node) => {
-                var _a;
-                const src = (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
-                const hit = this.translationCache.get(src);
-                if (hit !== undefined) {
-                    this.originalTexts.set(node, src);
-                    node.textContent = hit;
-                }
-                else {
-                    uncached.push(node);
-                }
-            });
-            if (!uncached.length)
-                return;
-            this.pendingNodes.push(...uncached);
-            if (!this.isTranslating) {
-                clearTimeout(this.debounceTimer);
-                this.debounceTimer = setTimeout(() => {
-                    const toFlush = this.pendingNodes.splice(0);
-                    this.flushNodes(toFlush, targetLang);
-                }, 50);
-            }
-        });
-        this.observer.observe(document.body, { childList: true, subtree: true });
-    }
-    stopObserver() {
-        if (this.observer) {
-            this.observer.disconnect();
-            this.observer = null;
-        }
-        clearTimeout(this.debounceTimer);
-    }
-    // ── SPA route change detection ──────────────────────────────────────────────
-    patchHistory() {
-        const orig = history.pushState.bind(history);
-        const self = this;
-        history.pushState = function (state, unused, url) {
-            orig(state, unused, url);
-            self.onRouteChange();
-        };
-        window.addEventListener('popstate', () => this.onRouteChange());
-    }
-    onRouteChange() {
-        if (!this.activeLang)
-            return;
-        const targetLang = this.activeLang;
-        setTimeout(() => {
-            const nodes = getTextNodes(document.body).filter((n) => !this.originalTexts.has(n));
-            if (!nodes.length)
-                return;
-            this.pendingNodes.push(...nodes);
-            if (!this.isTranslating) {
-                const toFlush = this.pendingNodes.splice(0);
-                this.flushNodes(toFlush, targetLang);
-            }
-        }, 100);
-    }
-    // ── Main translate ──────────────────────────────────────────────────────────
-    async translate(targetLang) {
-        if (this.isTranslating)
-            return;
-        this.isTranslating = true;
-        try {
-            this.ensureCacheLoaded(targetLang);
-            const isFirstEver = this.translationCache.size === 0;
-            if (this.originalTexts.size > 0) {
-                this.originalTexts.forEach((text, node) => { node.textContent = text; });
-            }
-            const nodes = getTextNodes(document.body);
-            if (!nodes.length)
-                return;
-            nodes.forEach((node) => {
-                var _a;
-                if (!this.originalTexts.has(node))
-                    this.originalTexts.set(node, (_a = node.textContent) !== null && _a !== void 0 ? _a : '');
-            });
-            const uncached = this.applyCache(nodes);
-            const lang = this.languages.find((l) => l.code === targetLang);
-            document.documentElement.setAttribute('dir', (lang === null || lang === void 0 ? void 0 : lang.isRTL) ? 'rtl' : 'ltr');
-            saveLang(targetLang);
-            this.ngZone.run(() => { this.activeLang = targetLang; this.cdr.markForCheck(); });
-            if (uncached.length > 0) {
-                if (isFirstEver)
-                    this.showOverlay();
-                else
-                    this.showToast();
-                const texts = uncached.map((n) => this.originalTexts.get(n));
-                const translations = await callTranslateApi(this.apiBase, this.apiKey, this.domain, texts, targetLang);
-                uncached.forEach((node, i) => {
-                    if (translations[i] !== undefined) {
-                        this.translationCache.set(this.originalTexts.get(node), translations[i]);
-                        node.textContent = translations[i];
-                    }
-                });
-                saveTranslationCache(targetLang, this.translationCache);
-                if (isFirstEver)
-                    this.hideOverlay();
-                else
-                    this.hideToast();
-            }
-        }
-        catch (e) {
-            console.error('[Translify] Translation error', e);
-            this.hideOverlay();
-            this.hideToast();
-        }
-        finally {
-            this.isTranslating = false;
-            if (this.pendingNodes.length > 0) {
-                const next = this.pendingNodes.splice(0);
-                this.flushNodes(next, this.activeLang);
-            }
-        }
-    }
-    // ── Restore ─────────────────────────────────────────────────────────────────
-    restore() {
-        this.stopObserver();
-        this.originalTexts.forEach((text, node) => { node.textContent = text; });
-        this.originalTexts.clear();
-        document.documentElement.setAttribute('dir', 'ltr');
-        clearSavedLang();
-        this.activeLang = null;
-        this.isOpen = false;
-        this.cdr.markForCheck();
-        this.ngZone.runOutsideAngular(() => this.startObserver());
-    }
-    // ── UI handlers ─────────────────────────────────────────────────────────────
-    handleSelect(langCode) {
-        this.isOpen = false;
-        this.translate(langCode);
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], TranslifySelectorComponent.prototype, "apiKey", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], TranslifySelectorComponent.prototype, "apiBase", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], TranslifySelectorComponent.prototype, "domain", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], TranslifySelectorComponent.prototype, "classNames", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], TranslifySelectorComponent.prototype, "labels", void 0);
-TranslifySelectorComponent = __decorate([
-    Component({
-        selector: 'translify-selector',
-        standalone: true,
-        imports: [NgIf, NgFor, NgClass],
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [`
-    .translify-selector { position: relative; display: inline-block; }
-    .translify-trigger {
-      display: inline-flex; align-items: center; gap: 6px;
-      padding: 8px 14px; border-radius: 8px; border: 1px solid #e5e7eb;
-      background: #fff; cursor: pointer; font-size: 14px; color: #374151;
-      transition: border-color 0.15s;
-    }
-    .translify-trigger:hover { border-color: #9ca3af; }
-    .translify-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
-    .translify-trigger-chevron { font-size: 10px; transition: transform 0.2s; }
-    .translify-trigger-chevron.open { transform: rotate(180deg); }
-    .translify-dropdown {
-      position: absolute; top: calc(100% + 6px); left: 0; z-index: 9999;
-      background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
-      min-width: 220px; max-height: 320px; overflow-y: auto;
-      box-shadow: 0 8px 24px rgba(0,0,0,0.12); display: flex; flex-direction: column;
-    }
-    .translify-dropdown-header {
-      padding: 10px 14px; font-size: 11px; font-weight: 700;
-      color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em;
-      border-bottom: 1px solid #f3f4f6; flex-shrink: 0;
-    }
-    .translify-option {
-      display: flex; align-items: center; gap: 8px;
-      padding: 10px 14px; cursor: pointer; font-size: 14px;
-      color: #111827; border: none; background: none; width: 100%; text-align: left;
-      transition: background 0.1s;
-    }
-    .translify-option:hover { background: #f9fafb; }
-    .translify-option.active { background: #eff6ff; color: #2563eb; font-weight: 600; }
-    .translify-option-name { font-size: 12px; color: #9ca3af; margin-left: auto; }
-    .translify-option-rtl {
-      font-size: 10px; color: #9ca3af;
-      background: #f3f4f6; padding: 2px 5px; border-radius: 4px;
-    }
-    .translify-restore {
-      display: flex; align-items: center; gap: 6px;
-      padding: 10px 14px; cursor: pointer; font-size: 13px; color: #ef4444;
-      border: none; background: none; width: 100%; text-align: left;
-      border-top: 1px solid #f3f4f6; flex-shrink: 0; transition: background 0.1s;
-    }
-    .translify-restore:hover { background: #fff5f5; }
-    .translify-toast {
-      position: fixed; bottom: 84px; right: 24px; z-index: 2147483647;
-      background: #1e293b; color: #fff; padding: 10px 16px;
-      border-radius: 10px; font-size: 13px; pointer-events: none;
-      transition: opacity 0.3s ease, transform 0.3s ease;
-    }
-    .translify-overlay {
-      position: fixed; inset: 0; z-index: 2147483646;
-      background: rgba(255,255,255,0.85); backdrop-filter: blur(3px);
-      display: flex; flex-direction: column;
-      align-items: center; justify-content: center; gap: 14px;
-      transition: opacity 0.35s ease;
-    }
-    .translify-overlay-spinner {
-      width: 40px; height: 40px; border-radius: 50%;
-      border: 3px solid #e5e7eb; border-top-color: #2563eb;
-      animation: tlfy-spin 0.7s linear infinite;
-    }
-    @keyframes tlfy-spin { to { transform: rotate(360deg); } }
-    .translify-overlay-title { font-size: 15px; font-weight: 600; color: #111827; text-align: center; }
-    .translify-overlay-sub { font-size: 12px; color: #6b7280; margin-top: 4px; text-align: center; }
-  `],
-        template: `
-    <div class="translify-selector" (clickOutside)="isOpen = false">
-      <button
-        class="translify-trigger"
-        [class]="classNames.trigger || ''"
-        (click)="isOpen = !isOpen"
-        [disabled]="loadingState !== 'idle' || languages.length === 0"
-        [attr.aria-expanded]="isOpen"
-      >
-        <span>🌐</span>
-        <span>{{ activeLangObj ? activeLangObj.nativeName : (labels.trigger || 'Translate') }}</span>
-        <span class="translify-trigger-chevron" [class.open]="isOpen">▾</span>
-      </button>
-
-      <div *ngIf="isOpen" class="translify-dropdown" [class]="classNames.dropdown || ''">
-        <div class="translify-dropdown-header">{{ labels.dropdownHeader || 'Select Language' }}</div>
-
-        <button
-          *ngFor="let lang of languages"
-          class="translify-option"
-          [class.active]="activeLang === lang.code"
-          (click)="handleSelect(lang.code)"
-        >
-          <span>{{ lang.nativeName }}</span>
-          <span class="translify-option-name">{{ lang.name }}</span>
-          <span *ngIf="lang.isRTL" class="translify-option-rtl">RTL</span>
-        </button>
-
-        <button *ngIf="activeLang" class="translify-restore" (click)="restore()">
-          ↩ {{ labels.restore || 'Show original' }}
-        </button>
-      </div>
-    </div>
-
-    <div
-      *ngIf="loadingState === 'overlay'"
-      class="translify-overlay"
-      [style.opacity]="overlayVisible ? '1' : '0'"
-    >
-      <div class="translify-overlay-spinner"></div>
-      <div>
-        <div class="translify-overlay-title">{{ labels.overlayTitle || 'Translating page…' }}</div>
-        <div class="translify-overlay-sub">{{ labels.overlaySub || 'First time only — instant on next visit.' }}</div>
-      </div>
-    </div>
-
-    <div
-      *ngIf="loadingState === 'toast'"
-      class="translify-toast"
-      [style.opacity]="toastVisible ? '1' : '0'"
-      [style.transform]="toastVisible ? 'translateY(0)' : 'translateY(8px)'"
-    >
-      ⏳ Translating…
-    </div>
-  `,
-    }),
-    __metadata("design:paramtypes", [NgZone, ChangeDetectorRef])
-], TranslifySelectorComponent);
-export { TranslifySelectorComponent };

package/dist/translify.module.d.ts

@@ -1,2 +0,0 @@
-export declare class TranslifyModule {
-}

package/dist/translify.module.js

@@ -1,19 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { NgModule } from '@angular/core';
-import { TranslifySelectorComponent } from './translify-selector.component';
-// For NgModule-based apps (Angular 15+)
-// Standalone component apps can import TranslifySelectorComponent directly
-let TranslifyModule = class TranslifyModule {
-};
-TranslifyModule = __decorate([
-    NgModule({
-        imports: [TranslifySelectorComponent],
-        exports: [TranslifySelectorComponent],
-    })
-], TranslifyModule);
-export { TranslifyModule };

package/src/index.d.ts

@@ -1,9 +0,0 @@
-export { TranslifySelectorComponent } from './translify-selector.component';
-export { TranslifyModule } from './translify.module';
-
-export interface Language {
-  code: string;
-  name: string;
-  nativeName: string;
-  isRTL: boolean;
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export { TranslifySelectorComponent } from './translify-selector.component';
-export { TranslifyModule } from './translify.module';
-export type { Language } from './translate';

package/src/translate.ts

@@ -1,112 +0,0 @@
-export interface Language {
-  code: string;
-  name: string;
-  nativeName: string;
-  isRTL: boolean;
-}
-
-const SKIP_TAGS = new Set([
-  'SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME',
-  'CODE', 'PRE', 'SVG', 'MATH', 'INPUT', 'TEXTAREA',
-]);
-
-export function getSavedLang(): string | null {
-  return localStorage.getItem('translify_lang');
-}
-
-export function saveLang(lang: string): void {
-  localStorage.setItem('translify_lang', lang);
-}
-
-export function clearSavedLang(): void {
-  localStorage.removeItem('translify_lang');
-}
-
-export function loadTranslationCache(lang: string): Map<string, string> {
-  try {
-    const stored = localStorage.getItem(`translify_cache_${lang}`);
-    return stored ? new Map(Object.entries(JSON.parse(stored))) : new Map();
-  } catch {
-    return new Map();
-  }
-}
-
-export function saveTranslationCache(lang: string, cache: Map<string, string>): void {
-  try {
-    const obj: Record<string, string> = {};
-    cache.forEach((v, k) => { obj[k] = v; });
-    localStorage.setItem(`translify_cache_${lang}`, JSON.stringify(obj));
-  } catch {}
-}
-
-export function getTextNodes(root: Node): Text[] {
-  const nodes: Text[] = [];
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
-    acceptNode(node: Node) {
-      const text = (node as Text);
-      if (!text.textContent?.trim()) return NodeFilter.FILTER_REJECT;
-      if (SKIP_TAGS.has((text.parentElement?.tagName ?? ''))) return NodeFilter.FILTER_REJECT;
-      if ((text.textContent?.trim().length ?? 0) > 5000) return NodeFilter.FILTER_REJECT;
-      if (text.parentElement?.closest('[translate="no"]')) return NodeFilter.FILTER_REJECT;
-      return NodeFilter.FILTER_ACCEPT;
-    },
-  });
-  let n: Node | null;
-  while ((n = walker.nextNode())) nodes.push(n as Text);
-  return nodes;
-}
-
-export function collectNewTextNodes(node: Node, originalTexts: Map<Node, string>): Text[] {
-  const nodes: Text[] = [];
-  if (node.nodeType === Node.TEXT_NODE) {
-    const t = node as Text;
-    if (!originalTexts.has(t) && t.textContent?.trim()) nodes.push(t);
-  } else if (node.nodeType === Node.ELEMENT_NODE) {
-    const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
-    let n: Node | null;
-    while ((n = walker.nextNode())) {
-      const t = n as Text;
-      if (
-        !originalTexts.has(t) &&
-        t.textContent?.trim() &&
-        !SKIP_TAGS.has(t.parentElement?.tagName ?? '') &&
-        !t.parentElement?.closest('[translate="no"]')
-      ) {
-        nodes.push(t);
-      }
-    }
-  }
-  return nodes;
-}
-
-export async function fetchLanguages(apiBase: string): Promise<Language[]> {
-  const res = await fetch(`${apiBase}/translate/languages`);
-  const json = await res.json();
-  return json.data.languages;
-}
-
-export async function callTranslateApi(
-  apiBase: string,
-  apiKey: string,
-  domain: string,
-  texts: string[],
-  targetLang: string,
-): Promise<string[]> {
-  const results: string[] = [];
-  for (let i = 0; i < texts.length; i += 100) {
-    const chunk = texts.slice(i, i + 100);
-    const res = await fetch(`${apiBase}/translate`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'x-api-key': apiKey,
-        'x-domain': domain,
-      },
-      body: JSON.stringify({ texts: chunk, targetLanguage: targetLang, sourceLanguage: 'auto' }),
-    });
-    const json = await res.json();
-    if (!json.success) throw new Error(json.message || 'Translation failed');
-    results.push(...json.data.translations);
-  }
-  return results;
-}