@linkitbe/sdk 1.0.0

package/dist/linkitbe_sdk.min.js

@@ -0,0 +1,627 @@
+(function() {
+
+  // ============================================================
+  // КОНФИГ (переопределяется через window.LinkItBeConfig)
+  // ============================================================
+
+  const config = Object.assign({
+    domain: window.location.hostname,
+    contentSelector: null,
+    useRemoteContentSelector: true,
+    showPreview: true,
+    useRemoteStyles: false,
+    plainBlockJoiner: '\n',
+    plainBlockSelector: 'p, blockquote, h1, h2, h3, h4, h5, h6',
+    // null / не массив — все типы интеграций; иначе только перечисленные (например ['keyword', 'mini-offer']).
+    allowedFormats: ['keyword', 'mini-offer'],
+    apiBaseUrl: 'https://api.linkitbe.com',
+    partnerApiKey: null,
+    sdkVersion: '1.1.0',
+    styles: {
+      linkColor: '#e2187b',
+      linkWeight: '700',
+      linkDecoration: 'underline',
+    }
+  }, window.LinkItBeConfig || {});
+
+
+  // ============================================================
+  // 1. ПОЛУЧЕНИЕ ID СТАТЬИ
+  // ============================================================
+
+  function getScriptQueryParam(name) {
+    const scripts = document.getElementsByTagName('script');
+    for (let i = scripts.length - 1; i >= 0; i--) {
+      const src = scripts[i].getAttribute('src') || '';
+      if (!src || src.indexOf('linkitbe_sdk.js') === -1) continue;
+      try {
+        const u = new URL(src, window.location.origin);
+        const v = u.searchParams.get(name);
+        if (v && v.trim()) return v.trim();
+      } catch (e) {
+        // ignore parse issues and continue fallback chain
+      }
+    }
+    return null;
+  }
+
+  function getArticleId() {
+    const fromConfig = config.linkitbe_article_id ? String(config.linkitbe_article_id).trim() : "";
+    if (fromConfig) return fromConfig;
+
+    const fromScriptParam = getScriptQueryParam('linkitbe_article_id');
+    if (fromScriptParam) return fromScriptParam;
+
+    // Вариант 1: из URL
+    const urlMatch = window.location.pathname.match(/\/(\d{6,})-/);
+    if (urlMatch) return urlMatch[1];
+
+    // Вариант 2: из id параграфов (id="56287698_1")
+    const firstP = document.querySelector('p[id]');
+    if (firstP) {
+      const idMatch = firstP.id.match(/^(\d+)_/);
+      if (idMatch) return idMatch[1];
+    }
+
+    // Вариант 3: из data-атрибута gigachat контейнера
+    const gigachat = document.querySelector('[id^="rambler-gigachat-chat-container:"]');
+    if (gigachat) {
+      const containerMatch = gigachat.id.match(/(\d{6,})/);
+      if (containerMatch) return containerMatch[1];
+    }
+
+    return null;
+  }
+
+
+  // ============================================================
+  // 2. ЗАПРОС РАЗМЕТКИ
+  // ============================================================
+
+  async function fetchMarkup(articleId) {
+    const base = String(config.apiBaseUrl || 'https://api.linkitbe.com').replace(/\/$/, '');
+    const url = `${base}/v1/markup?article_id=${encodeURIComponent(articleId)}&domain=${encodeURIComponent(config.domain)}`;
+
+    const headers = { 'Accept': 'application/json' };
+    const partnerKey = config.partnerApiKey ? String(config.partnerApiKey).trim() : '';
+    if (partnerKey) {
+      headers['X-Partner-Api-Key'] = partnerKey;
+    }
+
+    const res = await fetch(url, {
+      method: 'GET',
+      headers,
+      credentials: 'omit',
+    });
+
+    if (!res.ok) {
+      throw new Error(`[LinkItBe] markup request failed: ${res.status}`);
+    }
+
+    return await res.json();
+  }
+
+  function getOrCreateSessionId() {
+    const key = '__lb_session_id';
+    try {
+      const existing = window.localStorage.getItem(key);
+      if (existing && existing.trim()) return existing.trim();
+      const generated = (window.crypto && window.crypto.randomUUID)
+        ? window.crypto.randomUUID()
+        : `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+      window.localStorage.setItem(key, generated);
+      return generated;
+    } catch (e) {
+      return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+    }
+  }
+
+  function extractProcessingIdFromIntegrations(integrations) {
+    if (!Array.isArray(integrations)) return null;
+    for (const integration of integrations) {
+      const link = integration && integration.link ? String(integration.link) : '';
+      if (!link) continue;
+      try {
+        const u = new URL(link, window.location.origin);
+        const raw = u.searchParams.get('processing_id');
+        const value = Number(raw);
+        if (Number.isFinite(value) && value > 0) return value;
+      } catch (e) {
+        // ignore malformed link and continue
+      }
+    }
+    return null;
+  }
+
+  async function emitViewRendered(articleId, integrations, appliedCount) {
+    const processingId = extractProcessingIdFromIntegrations(integrations);
+    if (!processingId || appliedCount <= 0) return;
+
+    const partnerKey = config.partnerApiKey ? String(config.partnerApiKey).trim() : '';
+    if (!partnerKey) return;
+
+    const payload = {
+      event_id: (window.crypto && window.crypto.randomUUID)
+        ? window.crypto.randomUUID()
+        : `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+      event_type: 'view_rendered',
+      event_time: new Date().toISOString(),
+      article_id: articleId,
+      domain: config.domain,
+      processing_id: processingId,
+      placement_link: window.location.href,
+      integrations_count: appliedCount,
+      sdk_version: String(config.sdkVersion || ''),
+      session_id: getOrCreateSessionId(),
+      referrer: document.referrer || null,
+    };
+
+    try {
+      const base = String(config.apiBaseUrl || 'https://api.linkitbe.com').replace(/\/$/, '');
+      await fetch(`${base}/v1/events/view-rendered`, {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+          'X-Partner-Api-Key': partnerKey,
+        },
+        body: JSON.stringify(payload),
+        keepalive: true,
+        credentials: 'omit',
+      });
+    } catch (e) {
+      console.warn('[LinkItBe] failed to send view_rendered event', e);
+    }
+  }
+
+
+
+  // ============================================================
+  // 3. ПРИМЕНЕНИЕ КОНФИГА ИЗ API
+  // ============================================================
+
+  function resolveConfig(remoteConfig) {
+    if (remoteConfig) {
+      if (config.useRemoteContentSelector && remoteConfig.content_selector) {
+        config.contentSelector = remoteConfig.content_selector;
+      }
+      if (config.useRemoteStyles && remoteConfig.style) {
+        config.styles = {
+          linkColor: remoteConfig.style.link_color || config.styles.linkColor,
+          linkWeight: remoteConfig.style.link_weight || config.styles.linkWeight,
+          linkDecoration: remoteConfig.style.link_decoration || config.styles.linkDecoration,
+        };
+      }
+      if (Array.isArray(remoteConfig.allowed_formats)) {
+        config.allowedFormats = remoteConfig.allowed_formats;
+      }
+    }
+  }
+
+  function filterIntegrationsByAllowedFormats(integrations) {
+    const allowed = config.allowedFormats;
+    if (allowed == null || !Array.isArray(allowed)) return integrations;
+    return integrations.filter(i => allowed.includes(i.type));
+  }
+
+
+  // ============================================================
+  // 4. ПРЕВЬЮ
+  // ============================================================
+
+  function createPreview() {
+    const preview = document.createElement('div');
+    preview.id = '__lb_preview';
+    preview.style.cssText = `
+      position: fixed;
+      display: none;
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+      padding: 12px;
+      z-index: 99999;
+      width: 180px;
+      font-family: Manrope, sans-serif;
+      pointer-events: none;
+    `;
+    document.body.appendChild(preview);
+    return preview;
+  }
+
+  function showPreview(preview, integration, x, y) {
+    if (!integration.preview || !integration.preview.img) {
+      preview.style.display = 'none';
+      return;
+    }
+
+    preview.replaceChildren();
+
+    const image = document.createElement('img');
+    image.src = String(integration.preview.img);
+    image.style.cssText = 'width:100%;border-radius:8px;display:block;';
+    preview.appendChild(image);
+
+    const title = document.createElement('div');
+    title.style.cssText = 'margin-top:8px;font-size:13px;color:#343b4c;font-weight:600;';
+    title.textContent = integration.preview.title ? String(integration.preview.title) : '';
+    preview.appendChild(title);
+
+    const price = document.createElement('div');
+    price.style.cssText = 'font-size:12px;color:#777;margin-top:2px;';
+    price.textContent = integration.preview.price ? String(integration.preview.price) : '';
+    preview.appendChild(price);
+
+    const cta = document.createElement('div');
+    cta.style.cssText = `font-size:12px;color:${config.styles.linkColor};margin-top:2px;`;
+    cta.textContent = integration.preview.cta ? String(integration.preview.cta) : '';
+    preview.appendChild(cta);
+
+    preview.style.left = (x + 16) + 'px';
+    preview.style.top = (y - 60) + 'px';
+    preview.style.display = 'block';
+  }
+
+
+  // ============================================================
+  // 5. KEYWORD: plain, матчи, Range
+  // ============================================================
+
+  function escapeRegex(s) {
+    return String(s).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  function isInsideLbLink(node) {
+    const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+    return !!(el && el.closest && el.closest('a.__lb_link'));
+  }
+
+  function getTextNodesInBlock(blockEl) {
+    const out = [];
+    const walker = document.createTreeWalker(
+      blockEl,
+      NodeFilter.SHOW_TEXT,
+      {
+        acceptNode(node) {
+          if (isInsideLbLink(node)) return NodeFilter.FILTER_REJECT;
+          return NodeFilter.FILTER_ACCEPT;
+        }
+      }
+    );
+    let n;
+    while ((n = walker.nextNode())) out.push(n);
+    return out;
+  }
+
+  function buildPlainAndSpans(contentBlock) {
+    const joiner = config.plainBlockJoiner != null ? config.plainBlockJoiner : '\n';
+    const sel = config.plainBlockSelector || 'p, blockquote, h1, h2, h3, h4, h5, h6';
+    const blocks = contentBlock.querySelectorAll(sel);
+    const spans = [];
+    let plain = '';
+
+    blocks.forEach((block, i) => {
+      if (i > 0) plain += joiner;
+      const textNodes = getTextNodesInBlock(block);
+      for (const node of textNodes) {
+        const t = node.textContent;
+        if (!t.length) continue;
+        const g0 = plain.length;
+        plain += t;
+        spans.push({ g0, g1: plain.length, node });
+      }
+    });
+
+    return { plain, spans };
+  }
+
+  function findKeywordMatches(plain, keyword) {
+    if (!keyword) return [];
+    const re = new RegExp(escapeRegex(keyword), 'gi');
+    const matches = [];
+    let m;
+    while ((m = re.exec(plain)) !== null) {
+      matches.push({ start: m.index, end: m.index + m[0].length });
+      if (m[0].length === 0 && re.lastIndex === m.index) re.lastIndex++;
+    }
+    return matches;
+  }
+
+  function pickMatchSpan(matches, position) {
+    if (!matches.length) return null;
+    if (matches.length === 1) return matches[0];
+
+    const pos = position || {};
+    const mi = pos.match_index;
+    if (mi != null && Number.isFinite(Number(mi))) {
+      const idx = Number(mi);
+      if (idx >= 0 && idx < matches.length) return matches[idx];
+      console.warn('[LinkItBe] match_index out of range:', mi, 'n=', matches.length);
+    }
+
+    const os = pos.offset_start;
+    const oe = pos.offset_end;
+    if (os != null && Number.isFinite(Number(os))) {
+      const nos = Number(os);
+      const noe = oe != null && Number.isFinite(Number(oe)) ? Number(oe) : null;
+      let best = matches[0];
+      let bestScore = Infinity;
+      for (const m of matches) {
+        const d1 = Math.abs(m.start - nos);
+        const d2 = noe != null ? Math.abs(m.end - noe) : 0;
+        const score = d1 * 1e9 + d2;
+        if (score < bestScore) {
+          bestScore = score;
+          best = m;
+        }
+      }
+      return best;
+    }
+
+    console.warn('[LinkItBe] ambiguous matches, skipping (no match_index / offset_start):', matches.length);
+    return null;
+  }
+
+  function pointForInclusiveStart(gs, spans, plainLen) {
+    if (gs < 0 || gs >= plainLen || !spans.length) return null;
+    const s = spans.find(seg => gs >= seg.g0 && gs < seg.g1);
+    if (!s) return null;
+    return { node: s.node, offset: gs - s.g0 };
+  }
+
+  function pointForExclusiveEnd(ge, spans, plainLen) {
+    if (!spans.length) return null;
+    if (ge <= 0) return { node: spans[0].node, offset: 0 };
+    if (ge >= plainLen) {
+      const last = spans[spans.length - 1];
+      return { node: last.node, offset: last.node.textContent.length };
+    }
+    for (let i = 0; i < spans.length; i++) {
+      const s = spans[i];
+      if (ge > s.g0 && ge <= s.g1) {
+        return { node: s.node, offset: ge - s.g0 };
+      }
+      if (ge === s.g0) {
+        return { node: s.node, offset: 0 };
+      }
+    }
+    for (let i = 0; i < spans.length; i++) {
+      if (ge < spans[i].g0) {
+        return { node: spans[i].node, offset: 0 };
+      }
+    }
+    return null;
+  }
+
+  function wrapRangeWithAnchor(range, anchor) {
+    try {
+      range.surroundContents(anchor);
+    } catch (e) {
+      const contents = range.extractContents();
+      while (contents.firstChild) anchor.appendChild(contents.firstChild);
+      range.insertNode(anchor);
+    }
+  }
+
+  function sanitizeIntegrationLink(rawLink) {
+    if (rawLink == null) {
+      return null;
+    }
+
+    try {
+      const url = new URL(String(rawLink), window.location.origin);
+      if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+        return null;
+      }
+      return url.toString();
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function createLinkElement(integration, linkText, linkStyle) {
+    const sanitizedLink = sanitizeIntegrationLink(integration.link);
+    if (!sanitizedLink) {
+      return null;
+    }
+
+    const a = document.createElement('a');
+    a.href = sanitizedLink;
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer sponsored nofollow';
+    a.className = '__lb_link';
+    a.setAttribute('data-lb-integration', encodeURIComponent(JSON.stringify(integration)));
+    a.style.cssText = linkStyle.replace(/\s+/g, ' ').trim();
+    a.textContent = linkText;
+    return a;
+  }
+
+  function resolveKeywordSpan(contentBlock, integration) {
+    const { plain, spans } = buildPlainAndSpans(contentBlock);
+    const matches = findKeywordMatches(plain, integration.keyword);
+    const span = pickMatchSpan(matches, integration.position);
+    if (!span) return null;
+    const linkText = plain.slice(span.start, span.end);
+    return { plain, spans, span, linkText };
+  }
+
+  function applyKeywordWrap(contentBlock, integration, linkStyle) {
+    const resolved = resolveKeywordSpan(contentBlock, integration);
+    if (!resolved) {
+      console.warn('[LinkItBe] no span for keyword:', integration.keyword);
+      return false;
+    }
+
+    const { plain, spans, span, linkText } = resolved;
+    const startPt = pointForInclusiveStart(span.start, spans, plain.length);
+    const endPt = pointForExclusiveEnd(span.end, spans, plain.length);
+    if (!startPt || !endPt) {
+      console.warn('[LinkItBe] could not map span to DOM');
+      return false;
+    }
+
+    const slice = plain.slice(span.start, span.end);
+    if (slice.toLowerCase() !== linkText.toLowerCase()) {
+      console.warn('[LinkItBe] plain slice mismatch');
+      return false;
+    }
+
+    const range = document.createRange();
+    range.setStart(startPt.node, startPt.offset);
+    range.setEnd(endPt.node, endPt.offset);
+
+    const anchor = createLinkElement(integration, slice, linkStyle);
+    if (!anchor) {
+      console.warn('[LinkItBe] invalid integration link:', integration.link);
+      return false;
+    }
+    wrapRangeWithAnchor(range, anchor);
+    return true;
+  }
+
+  const MINI_OFFER_PLACEHOLDER = '{anchor_text}';
+
+  function applyMiniOffer(contentBlock, integration, linkStyle) {
+    const sel = config.plainBlockSelector || 'p, blockquote, h1, h2, h3, h4, h5, h6';
+    const blocks = contentBlock.querySelectorAll(sel);
+    if (!blocks.length) {
+      console.warn('[LinkItBe] mini-offer: no content blocks');
+      return false;
+    }
+
+    const lastBlock = blocks[blocks.length - 1];
+    const outro = document.createElement('p');
+    outro.className = '__lb_mini_offer';
+    outro.style.cssText = 'margin-top:16px;font-size:15px;font-family:Manrope, sans-serif;color:#343b4c;';
+
+    const adLabel = document.createElement('span');
+    adLabel.style.cssText = 'font-size:11px;color:#999;display:block;margin-bottom:4px;';
+    adLabel.textContent = '#реклама';
+    outro.appendChild(adLabel);
+
+    const body = document.createElement('span');
+    const template = integration.text != null ? String(integration.text) : '';
+    const anchorLabel = integration.anchor_text != null ? String(integration.anchor_text) : '';
+    const ph = template.indexOf(MINI_OFFER_PLACEHOLDER);
+    const before = ph >= 0 ? template.slice(0, ph) : template;
+    const after = ph >= 0 ? template.slice(ph + MINI_OFFER_PLACEHOLDER.length) : '';
+
+    if (before) body.appendChild(document.createTextNode(before));
+    const anchor = createLinkElement(integration, anchorLabel, linkStyle);
+    if (!anchor) {
+      console.warn('[LinkItBe] mini-offer invalid integration link:', integration.link);
+      return false;
+    }
+    body.appendChild(anchor);
+    if (after) body.appendChild(document.createTextNode(after));
+
+    outro.appendChild(body);
+    lastBlock.after(outro);
+    return true;
+  }
+
+  function applyIntegrations(integrations) {
+    const contentBlock = config.contentSelector
+      ? document.querySelector(config.contentSelector)
+      : document.body;
+
+    if (!contentBlock) {
+      console.warn('[LinkItBe] Content block not found:', config.contentSelector);
+      const active = filterIntegrationsByAllowedFormats(integrations);
+      return { appliedCount: 0, integrations: active };
+    }
+
+    const preview = config.showPreview ? createPreview() : null;
+
+    const linkStyle = `
+      color:${config.styles.linkColor};
+      font-weight:${config.styles.linkWeight};
+      text-decoration:${config.styles.linkDecoration};
+      cursor:pointer;
+    `;
+
+    const active = filterIntegrationsByAllowedFormats(integrations);
+    let appliedCount = 0;
+    let pending = active.filter(i => i.type === 'keyword');
+
+    while (pending.length) {
+      const rows = [];
+      for (const integ of pending) {
+        const r = resolveKeywordSpan(contentBlock, integ);
+        if (r) rows.push({ integ, spanStart: r.span.start });
+      }
+      if (!rows.length) {
+        pending.forEach(i => console.warn('[LinkItBe] unresolved keyword:', i.keyword));
+        break;
+      }
+
+      rows.sort((a, b) => b.spanStart - a.spanStart);
+      const { integ } = rows[0];
+      if (applyKeywordWrap(contentBlock, integ, linkStyle)) {
+        appliedCount += 1;
+      }
+      pending = pending.filter(i => i !== integ);
+    }
+
+    active.filter(i => i.type === 'mini-offer').forEach(integ => {
+      if (applyMiniOffer(contentBlock, integ, linkStyle)) {
+        appliedCount += 1;
+      } else {
+        console.warn('[LinkItBe] mini-offer failed');
+      }
+    });
+
+    if (preview) {
+      document.querySelectorAll('.__lb_link').forEach(link => {
+        let integration;
+        try {
+          integration = JSON.parse(decodeURIComponent(link.dataset.lbIntegration || ''));
+        } catch (e) {
+          console.warn('[LinkItBe] invalid integration payload for preview', e);
+          return;
+        }
+        if (!integration.preview || !integration.preview.img) {
+          return;
+        }
+        link.addEventListener('mouseenter', (e) => showPreview(preview, integration, e.clientX, e.clientY));
+        link.addEventListener('mousemove', (e) => {
+          preview.style.left = (e.clientX + 16) + 'px';
+          preview.style.top = (e.clientY - 60) + 'px';
+        });
+        link.addEventListener('mouseleave', () => { preview.style.display = 'none'; });
+      });
+    }
+
+    return { appliedCount, integrations: active };
+  }
+
+
+  // ============================================================
+  // INIT
+  // ============================================================
+
+  async function init() {
+    const articleId = getArticleId();
+    if (!articleId) {
+      console.warn('[LinkItBe] Article ID not found');
+      return;
+    }
+
+    console.log('[LinkItBe] Article ID:', articleId);
+
+    try {
+      const data = await fetchMarkup(articleId);
+      resolveConfig(data.config || {});
+      const integrations = Array.isArray(data.integrations) ? data.integrations : [];
+      const result = applyIntegrations(integrations);
+      await emitViewRendered(articleId, result.integrations, result.appliedCount);
+    } catch (e) {
+      console.warn('[LinkItBe] failed to load markup', e);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@linkitbe/sdk",
+  "version": "1.0.0",
+  "description": "LinkItBe browser SDK",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/linkitbe_sdk.min.js",
+  "unpkg": "dist/linkitbe_sdk.min.js",
+  "jsdelivr": "dist/linkitbe_sdk.min.js"
+}