@aller/cyclops-frontend-vanilla

cyclops-frontend-vanilla

This package is for vanilla-js DOM-manipulation for cyclops-functions. As of now, it only contains code for injecting the login-button/showing your name in the place of the login-button.

Table of Contents

• Functions
  • injectUser
  • injectLoginBox
  • injectSubscriptionBox
• TODO

Functions

injectUser

import { injectUser } from '@aller/cyclops-frontend-vanilla'

injectUser(elementId, domain?, ILoginButton?)

For users that want the least possible bloat, imports should be handled as such:

import { injectUser } from "@aller/cyclops-frontend-vanilla/lib/components/loginButton";

Instead of importing everything the index.ts forward-exports, it only imports the element that is wanted/needed. This could help tree-shaking in cases where there are no tree-shaking done on transpiling.

Injects a login-button to the elementId sent in as a parameter and fetches whether the user is logged in.

If you want to test the functionality on a non-relative domain, the domain can also be sent with as a parameter.

This function can include an object of the type ILoginButton interface for customizable classes and texts. Here are the defaults:

{
  dropdownButtonClass: "cyclops-dropbtn",
  dropdownContentClass: "cyclops-dropdown-content",
  dropdownClass: "cyclops-dropdown",
  containerContentClass: "cyclops-login",
  loginText: "Logg Inn",
  logoutText: "Logg Ut",
  myPageText: "Minside",
  extraLinks: []
}

For adding more custom elements in the user-dropdown, the property extraLinks can be used. This property can hold elements of the interface:

interface IExtraLink {
  text: string;
  href: string;
}

If the property extraLinks remain empty, there will only be added the default "Minside" and "Logg Ut" buttons. If the extraLinks are defined, these links will appear between the "Minside" and "Logg Ut" links.

injectLoginBox

import { injectLoginBox } from '@aller/cyclops-frontend-vanilla'

injectLoginBox(elementId: string, domain?: string, textClasses?: ILoginBox)

For users that want the least possible bloat, imports should be handled as such:

import { injectLoginBox } from "@aller/cyclops-frontend-vanilla/lib/components/loginBox";

Injects a login-wall/login-box into the document with some customizable classes and texts. elementId defines what element it should be under, domain can be used if you don't want a relative path. textClasses is of the type ILoginBox which can be used to override the default texts and classes.

interface ILoginBox {
  texts?: {
    toSeeText?: string;
    loginText?: string;
    loginaID?: string;
    ifNoPre?: string;
    registerText?: string;
    itsFree?: string;
  };
  classes?: {
    container?: string;
    title?: string;
    subtitle?: string;
    loginButton?: string;
    register?: string;
  };
}

injectSubscriptionBox

import { injectSubscriptionBox } from '@aller/cyclops-frontend-vanilla'

injectSubscriptionBox(
  elementId: string,
  brandId: string,
  productId: string,
  dealId: string,
  _focus: boolean,
  _brands: any[],
  _textsAndClasses?: ISubscriptionBox,
  _paymentOptions?: IPaymentOptions,
  _domain?: string | null)

For users that want the least possible bloat, imports should be handled as such:

import { injectSubscriptionBox } from "@aller/cyclops-frontend-vanilla/lib/components/subscriptionBox";

injectSubscriptionBox injects a subscription-box that either is dynamic from the catalogue, or just inserts based on the _brands included. brandId, productId and dealId is used for verifying that the brand/product/deal actually exists in the inserted _brands. If _brands isn't defined, it logs out an error to the console, since _brands are required.

_focus decides whether the box should have the css-class focus, which can be used to add extra styling to that specific element.

_textsAndClasses contains the different override/extra texts and classes editors can add:

interface ISubscriptionBox {
  texts?: {
    youChoseText?: string;
    bottomText?: string;
    subtitleText?: string;
    label?: string;
    buyButtonText?: string;
  };
  classes?: {
    subscriptionBoxClass?: string;
    dealNameClass?: string;
    labelClass?: string;
    costClass?: string;
    fullTermsClass?: string;
    buyButtonClass?: string;
    dialogClass?: string;
    dialogContentClass?: string;
    dialogProductNameClass?: string;
    dialogCostClass?: string;
    dialogDealNameClass?: string;
    dialogFullTermsClass?: string;
    dialogSubtitleTextClass?: string;
    dialogBuyButtonClass?: string;
    dialogBottomTextClass?: string;
    dialogCloseClass?: string;
  };
}

injectSubscriptionBoxWidthGetter

import { injectSubscriptionBoxWidthGetter } from '@aller/cyclops-frontend-vanilla'

injectSubscriptionBoxWidthGetter(
  elementId: string,
  brandId: string,
  productId: string,
  dealId: string,
  _focus: boolean,
  _brands?: any[],
  _textsAndClasses?: ISubscriptionBox,
  _paymentOptions?: IPaymentOptions,
  _domain?: string | null)

For users that want the least possible bloat, imports should be handled as such:

import { injectSubscriptionBoxWidthGetter } from "@aller/cyclops-frontend-vanilla/lib/components/subscriptionBoxWidthGetter";

injectSubscriptionBoxWidthGetter injects a subscription-box that either is dynamic from the catalogue, or just inserts based on the _brands included. brandId, productId and dealId is used for verifying that the brand/product/deal actually exists in the inserted _brands. If _brands isn't defined, the three ID's are used to fetch and populate the correct element from the API.

See injectSubscriptionBox for the rest of the parameters.