@sesamy/sesamy-js 1.3.1 → 1.3.3

package/src/app.ts

@@ -1,101 +0,0 @@
-import { User } from '@auth0/auth0-spa-js';
-import './style.css';
-import sesamyLogo from '/sesamy.png';
-import { Events } from './types/Events';
-
-/**
- * This class is only used for rendering the UI and not shipped in the bundle
- */
-
-class SesamyAppComponent extends HTMLElement {
-  private user: User | undefined;
-
-  constructor() {
-    super();
-  }
-
-  async _handleProfile() {
-    this.user = await window.sesamy.auth.getUser();
-    this.render();
-  }
-
-  async connectedCallback() {
-    this.setupEventListeners();
-
-    if (!window.sesamy) {
-      window.addEventListener(Events.READY, () => this._handleProfile());
-      return;
-    }
-
-    this._handleProfile();
-  }
-
-  render() {
-    this.innerHTML = `
-      <div>
-        <a href="https://docs.sesamy.com" target="_blank">
-          <img src="${sesamyLogo}" class="logo" alt="Vite logo" />
-        </a>    
-        <h1>Sesamy JS</h1>
-        <p class="read-the-docs">
-          Click on the Sesamy logo to learn more
-        </p>
-        ${this.user ? this.renderUserProfile() : this.renderLoginButton()}
-      </div>
-    `;
-  }
-
-  private renderLoginButton(): string {
-    return '<button part="login-btn" class="login auth-visible" id="login-btn"> Login </button>';
-  }
-
-  private renderUserProfile(): string {
-    return `<div class="user" part="user">
-      <a href="/profile" part="user-link">
-        ${
-          this.user?.picture
-            ? ` <img
-              class="big"
-              part="user-img img-big"
-              src=${this.user.picture}
-              alt=${this.user.name || 'User avatar'}
-            />`
-            : `<div part="avatar avatar-big" class="avatar big"> Placeholder </div>`
-        }
-        <h2 class="user-name">${this.user?.name || 'User Name'}</h2>
-      </a>
-
-      <div class="logout-wrap"> 
-        <a href="#" class="logout-btn" id="logout-btn"> Logout </a> 
-      </div> 
-      <div>
-        <a href="/entitlements.html">
-          View Entitlements
-        </a>
-      </div>
-      <div>
-        <a href="/contracts.html">
-          View Contracts
-        </a> 
-      </div> 
-    </div>`;
-  }
-
-  private setupEventListeners() {
-    this.addEventListener('click', event => {
-      const clickedElement = event.target as Element;
-      const logoutButton = clickedElement.closest('#logout-btn');
-      const loginButton = clickedElement.closest('#login-btn');
-
-      if (logoutButton) {
-        window.sesamy.auth.logout();
-      }
-
-      if (loginButton) {
-        window.sesamy.auth.loginWithRedirect();
-      }
-    });
-  }
-}
-
-customElements.define('sesamy-app', SesamyAppComponent);

package/src/constants.ts

@@ -1,2 +0,0 @@
-export const BASE_URL_DOMAIN = import.meta.env.VITE_BASE_URL_DOMAIN;
-export const ANALYTICS_BASE_URL = import.meta.env.VITE_ANALYTICS_BASE_URL;

package/src/controllers/index.ts

@@ -1 +0,0 @@
-// Will be stuff in here later

package/src/controllers/paywall.ts

@@ -1,14 +0,0 @@
-import { triggerEvent } from '../events/ready';
-import { accessArticle as accessArticleService } from '../services/sesamy';
-import { Events } from '../types/Events';
-
-export async function accessArticle(articleId: string) {
-  // Call the API to access the article
-  const response = await accessArticleService({ articleId });
-
-  if (response.status !== 'ok') {
-    triggerEvent(Events.SOFT_PAYWALL, {});
-  }
-
-  return response;
-}

package/src/entitlementsStyle.css

@@ -1,147 +0,0 @@
-.container {
-  background-color: var(--background, transparent);
-  font-family: var(--font-family, 'Helvetica');
-}
-ul {
-  list-style-type: none;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--items-gap, 16px);
-  margin-top: 0;
-  padding: 0;
-}
-ul > * {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: var(--item-width, 300px);
-}
-button {
-  appearance: none;
-  display: inline-block;
-  text-decoration: none;
-  text-align: left;
-  background: none;
-  border: none;
-  width: 100%;
-  display: flex;
-  align-items: stretch;
-  text-decoration: none;
-  cursor: pointer;
-}
-button::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-button > * {
-  flex-shrink: 0;
-}
-.image-container {
-  padding-bottom: 14px;
-}
-img {
-  width: var(--image-size, 95px);
-  height: var(--image-size, 95px);
-  border-radius: var(--image-border-radius, 12px);
-  object-fit: cover;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-.details {
-  margin-left: var(--details-margin-left, 8px);
-  border-bottom-color: var(--divider-color, #70707023);
-  border-bottom-width: var(--divider-width, 1px);
-  padding-bottom: 14px;
-  border-bottom-style: solid;
-  display: flex;
-  flex-direction: column;
-  justify-content: var(--details-justify-content, space-between);
-  flex: 1;
-}
-p {
-  font-weight: normal;
-  margin: 0;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-.title {
-  color: var(--title-color, #131313);
-  font-size: 15px;
-  -webkit-line-clamp: 1;
-}
-.summary {
-  color: var(--summary-color, #22222260);
-  font-size: 12px;
-  -webkit-line-clamp: 2;
-}
-span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-span.type {
-  color: var(--type-color, #22222270);
-  text-transform: uppercase;
-  font-size: var(--type-font-size, 11px);
-  font-weight: medium;
-  margin-top: 4px;
-  font-family: var(--type-font-family, var(--font-family, 'Helvetica'));
-}
-span.date {
-  color: var(--date-color, #22222260);
-  font-size: var(--date-font-size, 12px);
-  font-weight: normal;
-  font-family: var(--date-font-family, var(--font-family, 'Helvetica'));
-}
-.modal {
-  display: none;
-  position: fixed;
-  z-index: var(--modal-zindex, 100);
-  padding-top: 20px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-.modal-blackout {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-.modal-container {
-  position: relative;
-  background-color: white;
-  margin: auto;
-  padding: 0;
-  max-width: 500px;
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: 0.4s;
-  animation-name: animatetop;
-  animation-duration: 0.4s;
-}
-.close-container {
-  position: absolute;
-  right: 16px;
-  top: 16px;
-  cursor: pointer;
-  z-index: 900;
-  width: auto;
-}
-@media only screen and (max-width: 768px) {
-  .modal {
-    padding: 10px 0;
-  }
-  .modal-container {
-    max-width: 100%;
-  }
-}

package/src/events/ready.ts

@@ -1,12 +0,0 @@
-import { Events } from '../types/Events';
-
-// TODO: Separate the event into a function per event so they can be typed
-export function triggerEvent(eventType: Events, payload: any) {
-  const customEvent = new CustomEvent(eventType, {
-    detail: payload,
-    bubbles: true,
-    composed: true,
-  });
-
-  dispatchEvent(customEvent);
-}

package/src/index.ts

@@ -1,36 +0,0 @@
-import { triggerEvent } from './events/ready';
-import { registerAPI } from './javascript-api';
-import { Config } from './types/Config';
-import { init as initAuth } from './services/auth';
-import { initAnalytics } from './services/analytics';
-import { Events } from './types/Events';
-
-export async function init(config: Config) {
-  initAnalytics({
-    clientId: config.clientId,
-    // The default client id can be overridden by the config
-    ...config.analytics,
-  });
-
-  // Auth needs to be initated after the analytics so that the auth events can be tracked
-  await initAuth(config);
-
-  const api = registerAPI(config.namespace);
-
-  triggerEvent(Events.READY, {});
-
-  return api;
-}
-
-// This is for checking if the script is being loaded in the browser
-if (typeof document !== 'undefined') {
-  const configElement = document.getElementById('sesamy-js');
-  if (configElement?.textContent) {
-    try {
-      const config = JSON.parse(configElement.textContent);
-      init(config);
-    } catch (err) {
-      console.error('Failed to parse config', err);
-    }
-  }
-}

package/src/javascript-api.ts

@@ -1,84 +0,0 @@
-import { loginWithRedirect, getUser, isAuthenticated, logout } from './services/auth';
-import {
-  getEntitlement,
-  getEntitlements,
-  getContract,
-  getContracts,
-  getBill,
-  getBills,
-  getTags,
-  setTag,
-  pushTag,
-} from './services/sesamy';
-import { accessArticle } from './controllers/paywall';
-import { version } from '../package.json';
-
-function getVersion() {
-  return version;
-}
-
-export interface SesamyApi {
-  articles: {
-    access: typeof accessArticle;
-  };
-  auth: {
-    getUser: typeof getUser;
-    isAuthenticated: typeof isAuthenticated;
-    loginWithRedirect: typeof loginWithRedirect;
-    logout: typeof logout;
-  };
-  tags: {
-    list: typeof getTags;
-    set: typeof setTag;
-    push: typeof pushTag;
-  };
-  getEntitlement: typeof getEntitlement;
-  getEntitlements: typeof getEntitlements;
-  getContract: typeof getContract;
-  getContracts: typeof getContracts;
-  getBill: typeof getBill;
-  getBills: typeof getBills;
-  getVersion: typeof getVersion;
-}
-
-interface SesamyWindow {
-  sesamy: SesamyApi;
-}
-
-// Extend the global Window type with your SesamyWindow interface
-declare global {
-  interface Window extends SesamyWindow {}
-}
-
-export function registerAPI(namespace: string | null = 'sesamy') {
-  const api: SesamyApi = {
-    auth: {
-      getUser,
-      isAuthenticated,
-      loginWithRedirect,
-      logout,
-    },
-    articles: {
-      access: accessArticle,
-    },
-    tags: {
-      list: getTags,
-      set: setTag,
-      push: pushTag,
-    },
-    getEntitlement,
-    getEntitlements,
-    getContract,
-    getContracts,
-    getBill,
-    getBills,
-    getVersion,
-  };
-
-  if (namespace !== null) {
-    // This makes it possible to use a different namespace
-    (window as any)[namespace] = api;
-  }
-
-  return api;
-}

package/src/services/analytics/element-tracker.ts

@@ -1,117 +0,0 @@
-/// <reference path="./types/analytics-activity-utils.d.ts" />
-import { onUserActivity } from '@analytics/activity-utils';
-
-// IDLE_TIME is in ms
-const timeout = 5000;
-
-export interface ElementTrackerOptions {
-  element: HTMLElement;
-  viewCallback?: () => void;
-  activeDurationCallback?: (duration: number) => void;
-  idleDurationCallback?: (duration: number) => void;
-}
-
-export default class ElementTracker {
-  element: HTMLElement;
-
-  isInViewport = false;
-
-  isAwake = false;
-
-  isFlushing?: boolean;
-
-  observer: IntersectionObserver;
-
-  lastEventAt = Date.now();
-
-  registeredView = false;
-
-  viewCallback?: () => void;
-
-  activeDurationCallback?: (duration: number, flushing?: boolean) => void;
-
-  idleDurationCallback?: (duration: number, flushing?: boolean) => void;
-
-  constructor(options: ElementTrackerOptions) {
-    this.element = options.element;
-    // We NEED to have callbacks here rather than using events as events will be lost when the browser is unloading
-    this.viewCallback = options.viewCallback;
-    this.activeDurationCallback = options.activeDurationCallback;
-    this.idleDurationCallback = options.idleDurationCallback;
-
-    // Setup the interaction observer
-    this.observer = new IntersectionObserver(
-      entries => {
-        // I guess there will only be one entry? Verify?
-        entries.forEach(entry => {
-          this.handleInViewPort(entry.isIntersecting);
-        });
-      },
-      {
-        threshold: 0,
-      },
-    );
-    this.observer.observe(this.element);
-
-    // Setup the active/idle
-    onUserActivity({
-      onIdle: (elapsedTime: number) => this.handleAwake(false, elapsedTime),
-      onWakeUp: (elapsedTime: number) => this.handleAwake(true, elapsedTime),
-      timeout,
-    });
-  }
-
-  /**
-   * Flush the awake timer in case the page is unloading
-   */
-  flush() {
-    this.isFlushing = true;
-    this.handleAwake(!this.isAwake, Math.round((Date.now() - this.lastEventAt) / 1000));
-  }
-
-  handleInViewPort(isInViewport: boolean) {
-    if (isInViewport) {
-      // A view envent only occurs if the element is active.
-      this.isAwake = true;
-      this.trackInViewport();
-    } else {
-      // An article outside the viewport is not active
-      this.handleAwake(false, Math.round((Date.now() - this.lastEventAt) / 1000));
-    }
-
-    this.isInViewport = isInViewport;
-  }
-
-  handleAwake(isAwake: boolean, elapsedTime: number) {
-    // Store the current awake state
-    this.isAwake = isAwake;
-    this.lastEventAt = isAwake ? Date.now() - elapsedTime * timeout : Date.now();
-
-    if (!this.isInViewport) {
-      return;
-    }
-    this.trackAwake(isAwake, elapsedTime);
-  }
-
-  trackAwake(awake: boolean, elapsedTime: number) {
-    if (!awake && this.activeDurationCallback) {
-      this.activeDurationCallback(elapsedTime, this.isFlushing);
-    }
-
-    if (awake && this.idleDurationCallback) {
-      this.idleDurationCallback(elapsedTime, this.isFlushing);
-    }
-  }
-
-  trackInViewport() {
-    if (this.registeredView) {
-      return;
-    }
-
-    this.registeredView = true;
-
-    if (this.viewCallback) {
-      this.viewCallback();
-    }
-  }
-}