@contentcredits/sdk 2.0.3 → 2.1.0

package/dist/content-credits.esm.js

@@ -518,6 +518,20 @@ function createGate(options) {
         }
         contentEl.setAttribute(GATE_ATTR, 'true');
         gated = true;
+        // Add a gradient fade at the bottom of the visible teaser so the cutoff
+        // looks intentional rather than abrupt.
+        if (!contentEl.querySelector('[data-cc-fade]')) {
+            const prevPos = contentEl.style.position;
+            if (!prevPos || prevPos === 'static')
+                contentEl.style.position = 'relative';
+            const fadeEl = document.createElement('div');
+            fadeEl.setAttribute('data-cc-fade', 'true');
+            fadeEl.style.cssText =
+                'position:absolute;bottom:0;left:0;width:100%;height:160px;' +
+                    'background:linear-gradient(to bottom,transparent 0%,var(--cc-bg,#fff) 100%);' +
+                    'pointer-events:none;z-index:1;';
+            contentEl.appendChild(fadeEl);
+        }
         return true;
     }
     function reveal() {
@@ -529,6 +543,10 @@ function createGate(options) {
                 n.removeAttribute('data-cc-hidden');
             }
         });
+        // Remove gradient fade
+        const fadeEl = contentEl === null || contentEl === void 0 ? void 0 : contentEl.querySelector('[data-cc-fade]');
+        if (fadeEl)
+            fadeEl.remove();
         hiddenNodes = [];
         contentEl === null || contentEl === void 0 ? void 0 : contentEl.removeAttribute(GATE_ATTR);
         gated = false;
@@ -561,6 +579,24 @@ function createShadowHost(id) {
     host._ccShadow = root;
     return { host, root };
 }
+/**
+ * Creates a shadow host inserted immediately after `anchorEl` in the DOM.
+ * Used for the inline paywall panel so it flows naturally below the content.
+ */
+function createInlineShadowHost(id, anchorEl) {
+    let host = document.getElementById(id);
+    if (!host) {
+        host = document.createElement('div');
+        host.id = id;
+        anchorEl.parentNode.insertBefore(host, anchorEl.nextSibling);
+    }
+    const existing = host._ccShadow;
+    if (existing)
+        return { host, root: existing };
+    const root = host.attachShadow({ mode: 'open' });
+    host._ccShadow = root;
+    return { host, root };
+}
 function removeShadowHost(id) {
     const host = document.getElementById(id);
     if (host)
@@ -583,56 +619,27 @@ function getPaywallStyles(primaryColor, fontFamily) {
     return `
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-    .cc-paywall-gate {
-      position: relative;
+    /* Inline paywall panel — sits below the teaser content in the page flow */
+    .cc-paywall-inline {
       width: 100%;
-    }
-
-    .cc-teaser-fade {
-      position: relative;
-    }
-    .cc-teaser-fade::after {
-      content: '';
-      position: absolute;
-      bottom: 0; left: 0; width: 100%;
-      height: 120px;
-      background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
-      pointer-events: none;
-    }
-
-    /* Full-viewport backdrop — centers the overlay and blocks background clicks */
-    .cc-paywall-backdrop {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.45);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-      pointer-events: all;
-    }
-
-    .cc-paywall-overlay {
+      padding: 36px 24px 32px;
       background: #fff;
       border: 1px solid #e5e7eb;
-      border-radius: 12px;
-      padding: 32px 24px;
-      width: 100%;
-      max-width: 480px;
+      border-top: 3px solid ${primaryColor};
+      border-radius: 0 0 12px 12px;
       text-align: center;
       font-family: ${fontFamily};
-      box-shadow: 0 8px 40px rgba(0,0,0,0.18);
-      pointer-events: all;
+      box-sizing: border-box;
     }
 
-    .cc-paywall-overlay h2 {
+    .cc-paywall-inline h2 {
       font-size: 20px;
       font-weight: 700;
       color: #111827;
       margin-bottom: 8px;
     }
 
-    .cc-paywall-overlay p {
+    .cc-paywall-inline p {
       font-size: 14px;
       color: #6b7280;
       margin-bottom: 24px;
@@ -1165,20 +1172,24 @@ function createPaywallRenderer(config) {
     let root = null;
     let overlay = null;
     function init() {
-        const { root: shadowRoot } = createShadowHost(HOST_ID);
+        // Insert the shadow host immediately after the content element so the
+        // paywall panel flows inline below the teaser — no modal, no backdrop.
+        const contentEl = document.querySelector(config.contentSelector);
+        if (!contentEl)
+            return;
+        const { root: shadowRoot } = createInlineShadowHost(HOST_ID, contentEl);
         root = shadowRoot;
         injectStyles(root, getPaywallStyles(config.theme.primaryColor, config.theme.fontFamily));
-        // Backdrop: fixed full-viewport flex container — centers the overlay and
-        // blocks interaction with the page behind it (pointer-events: all in CSS).
-        const backdrop = el('div');
-        backdrop.className = 'cc-paywall-backdrop';
-        root.appendChild(backdrop);
         overlay = el('div');
-        overlay.className = 'cc-paywall-overlay';
-        backdrop.appendChild(overlay);
+        overlay.className = 'cc-paywall-inline';
+        root.appendChild(overlay);
     }
     function render(state, callbacks, meta) {
         var _a, _b, _c;
+        // During the initial access check the content is already hidden by the
+        // gate — no need to show a spinner in the paywall slot.
+        if (state === 'checking')
+            return;
         if (!overlay)
             init();
         if (!overlay)
@@ -1187,9 +1198,6 @@ function createPaywallRenderer(config) {
         while (overlay.firstChild)
             overlay.removeChild(overlay.firstChild);
         switch (state) {
-            case 'checking':
-                renderChecking(overlay);
-                break;
             case 'login':
                 renderLogin(overlay, callbacks);
                 break;
@@ -1207,20 +1215,6 @@ function createPaywallRenderer(config) {
                 break;
         }
     }
-    function renderChecking(parent) {
-        const spinner = el('div');
-        spinner.className = 'cc-spinner';
-        spinner.style.margin = '0 auto 12px';
-        spinner.style.width = '24px';
-        spinner.style.height = '24px';
-        spinner.style.borderWidth = '2px';
-        spinner.style.borderColor = '#e5e7eb';
-        spinner.style.borderTopColor = config.theme.primaryColor;
-        const text = el('p', 'Checking access...');
-        text.style.cssText = 'font-size:14px;color:#6b7280;text-align:center;font-family:' + config.theme.fontFamily;
-        parent.appendChild(spinner);
-        parent.appendChild(text);
-    }
     function renderLogin(parent, cb) {
         parent.appendChild(el('h2', 'This article requires a subscription'));
         parent.appendChild(el('p', 'Log in with your Content Credits account to unlock this article.'));
@@ -1465,6 +1459,10 @@ function scrubTokenFromUrl() {
  * Read and store a token that may have been placed in the current URL
  * (e.g. after a mobile redirect back from the accounts site).
  * Always scrubs the token from the URL after reading it.
+ *
+ * If we're running inside a popup window (window.opener exists), we notify
+ * the opener via postMessage and close ourselves — this prevents the popup
+ * from showing the full article page after a successful login redirect.
  */
 function consumeTokenFromUrl() {
     var _a, _b;
@@ -1479,33 +1477,90 @@ function consumeTokenFromUrl() {
         }
         if (token) {
             tokenStorage.set(token);
+            // If we're inside a popup (opened by openAuthPopup), notify the opener
+            // and close instead of rendering the page. This fixes the bug where the
+            // popup shows the blog article after the accounts redirect.
+            if (window.opener && !window.opener.closed) {
+                try {
+                    window.opener.postMessage({ type: 'cc_auth_callback', token, refreshToken: refreshToken !== null && refreshToken !== void 0 ? refreshToken : null }, window.location.origin);
+                }
+                catch (_c) {
+                    // opener is cross-origin or restricted — fall through, URL polling will handle it
+                }
+                // Brief delay so the opener can process the message before the popup closes
+                setTimeout(() => { try {
+                    window.close();
+                }
+                catch ( /* ignore */_a) { /* ignore */ } }, 300);
+            }
             return token;
         }
     }
-    catch (_c) {
+    catch (_d) {
         // ignore
     }
     return null;
 }
 /**
- * Open a centered auth popup and poll for the token callback.
+ * Open a centered auth popup and wait for the token callback.
+ *
+ * Primary path: listens for a postMessage from the popup page (sent by
+ * consumeTokenFromUrl when the accounts redirect lands on our origin).
+ *
+ * Fallback path: polls popup.location.href every 200 ms for cases where
+ * postMessage isn't available (e.g. some mobile browsers, extensions).
+ *
  * Returns a promise that resolves with the token when login completes,
  * or null if the popup is closed without completing login.
  */
 function openAuthPopup(authUrl) {
     return new Promise(resolve => {
         let popup = null;
+        let settled = false;
+        function finish(token) {
+            if (settled)
+                return;
+            settled = true;
+            clearInterval(timer);
+            window.removeEventListener('message', onMessage);
+            resolve(token);
+        }
+        // ── Primary: postMessage from popup ───────────────────────────────────
+        function onMessage(event) {
+            var _a;
+            // Only accept messages from our own origin
+            if (event.origin !== window.location.origin)
+                return;
+            if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) !== 'cc_auth_callback')
+                return;
+            const token = event.data.token;
+            const refreshToken = event.data.refreshToken;
+            if (!token)
+                return;
+            tokenStorage.set(token);
+            if (refreshToken)
+                refreshTokenStorage.set(refreshToken);
+            try {
+                popup === null || popup === void 0 ? void 0 : popup.close();
+            }
+            catch ( /* ignore */_b) { /* ignore */ }
+            finish(token);
+        }
+        window.addEventListener('message', onMessage);
         try {
             popup = window.open(authUrl, POPUP_NAME, centeredSpecs());
         }
         catch (_a) {
-            // popup blocked — fall through to null
+            window.removeEventListener('message', onMessage);
+            resolve(null);
+            return;
         }
-        // Popup blocked
         if (!popup || popup.closed) {
+            window.removeEventListener('message', onMessage);
             resolve(null);
             return;
         }
+        // ── Fallback: URL polling ─────────────────────────────────────────────
         const POLL_MS = 200;
         const MAX_WAIT_MS = 5 * 60 * 1000; // 5 minutes
         let elapsed = 0;
@@ -1513,17 +1568,15 @@ function openAuthPopup(authUrl) {
             var _a, _b;
             elapsed += POLL_MS;
             if (!popup || popup.closed) {
-                clearInterval(timer);
-                resolve(tokenStorage.get()); // may have been set just before close
+                finish(tokenStorage.get());
                 return;
             }
             if (elapsed > MAX_WAIT_MS) {
-                clearInterval(timer);
                 try {
                     popup.close();
                 }
                 catch ( /* ignore */_c) { /* ignore */ }
-                resolve(null);
+                finish(null);
                 return;
             }
             try {
@@ -1535,15 +1588,13 @@ function openAuthPopup(authUrl) {
                     const refreshToken = (_b = params.get('refresh_token')) !== null && _b !== void 0 ? _b : params.get('cc_refresh_token');
                     if (token) {
                         tokenStorage.set(token);
-                        if (refreshToken) {
+                        if (refreshToken)
                             refreshTokenStorage.set(refreshToken);
-                        }
-                        clearInterval(timer);
                         try {
                             popup.close();
                         }
                         catch ( /* ignore */_d) { /* ignore */ }
-                        resolve(token);
+                        finish(token);
                     }
                 }
             }
@@ -1554,8 +1605,10 @@ function openAuthPopup(authUrl) {
     });
 }
 
-function createPaywall(config, creditsApi, state, emitter) {
-    const gate = createGate({
+function createPaywall(config, creditsApi, state, emitter, existingGate) {
+    // Accept a pre-created gate so the caller can call gate.hide() synchronously
+    // before any async work, preventing a flash of the full article content.
+    const gate = existingGate !== null && existingGate !== void 0 ? existingGate : createGate({
         selector: config.contentSelector,
         teaserParagraphs: config.teaserParagraphs,
     });
@@ -2620,14 +2673,23 @@ class ContentCredits {
     async _start() {
         // 1. Consume any token that arrived in the URL (mobile redirect flow)
         consumeTokenFromUrl();
-        // 2. If no access token in memory/session, attempt a silent refresh.
+        // 2. Hide premium content immediately (synchronous) before any async work.
+        //    This prevents the flash of full article content that would otherwise
+        //    appear during the token-refresh and access-check network round-trips.
+        const earlyGate = createGate({
+            selector: this.config.contentSelector,
+            teaserParagraphs: this.config.teaserParagraphs,
+        });
+        earlyGate.hide();
+        // 3. If no access token in memory/session, attempt a silent refresh.
         //    This runs on every new browser session (after the browser was closed)
-        //    and silently re-authenticates the user using their stored refresh token
-        //    — no popup, no visible delay, no paywall flash.
+        //    and silently re-authenticates the user using their stored refresh token.
         if (!tokenStorage.has()) {
             await tryRefreshSession(this.config.apiBaseUrl);
         }
-        this.paywallModule = createPaywall(this.config, this.creditsApi, this.state, this.emitter);
+        // Pass the pre-created gate so createPaywall reuses the same instance
+        // (and its hiddenNodes list) rather than creating a second one.
+        this.paywallModule = createPaywall(this.config, this.creditsApi, this.state, this.emitter, earlyGate);
         if (this.config.enableComments) {
             this.commentsModule = createComments(this.config, this.commentsApi, this.emitter);
             this.commentsModule.init();
@@ -2677,7 +2739,7 @@ class ContentCredits {
     }
     /** SDK version string. */
     static get version() {
-        return "2.0.3";
+        return "2.1.0";
     }
 }
 // ── Auto-init from script data attributes (CDN usage) ────────────────────────